661 lines
30 KiB
Vue
661 lines
30 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-row :gutter="10" style="margin-bottom: 10px;padding: 0 10px">
|
||
<el-col :span="24">
|
||
<el-button @click="addVehicleDrawer = true">添加车辆</el-button>
|
||
<el-button @click="genVehicleDialog = true" type="primary">生成车辆</el-button>
|
||
<el-button @click="vehicleUnifiedOnline" type="success">一键上线</el-button>
|
||
<el-button @click="vehicleUnifiedOffline" type="success">一键离线</el-button>
|
||
<el-button @click="vehicleUnifiedSend" type="primary">一键上报</el-button>
|
||
<el-button @click="vehicleUnifiedPosition" type="primary">一键重置路径</el-button>
|
||
<el-button @click="vehicleUnifiedStop" type="warning">一键取消上报</el-button>
|
||
<el-popover
|
||
v-if="unifiedInfo.unifiedStatus"
|
||
style="margin-left: 15px"
|
||
placement="top-start"
|
||
title="任务执行状态"
|
||
width="200"
|
||
trigger="hover">
|
||
<el-progress :percentage="(unifiedInfo.taskSuccessSum+unifiedInfo.taskErrorSum)/unifiedInfo.taskExecutionSum*100" :color="customColors"></el-progress>
|
||
<div style="width: 100%; margin: 5px 0">任务描述：<el-tag>{{unifiedInfo.taskName}}</el-tag></div>
|
||
<div style="width: 100%; margin: 5px 0">任务总数：<el-tag>{{unifiedInfo.taskExecutionSum}}</el-tag></div>
|
||
<div style="width: 100%; margin: 5px 0">成功总数：<el-tag>{{unifiedInfo.taskSuccessSum}}</el-tag></div>
|
||
<div style="width: 100%; margin: 5px 0">失败总数：<el-tag>{{unifiedInfo.taskErrorSum}}</el-tag></div>
|
||
|
||
<el-button slot="reference">有任务在执行</el-button>
|
||
</el-popover>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="10">
|
||
<el-row :gutter="10" style="height: 100px;">
|
||
<el-row :gutter="10" style="margin-bottom: 10px;padding: 0 10px">
|
||
<el-col :span="6">
|
||
<el-input v-model="queryParams.vin" prefix-icon="el-icon-search" placeholder="VIN检索(模糊)"></el-input>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-switch style="margin: 9px 0;"
|
||
v-model="queryParams.online"
|
||
active-color="#13ce66"
|
||
inactive-text="上线优先展示">
|
||
</el-switch>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10" style="margin-bottom: 10px;padding: 0 10px">
|
||
<el-pagination
|
||
@size-change="pageSizeChange"
|
||
@current-change="pageChange"
|
||
:current-page="queryParams.page"
|
||
:page-sizes="[10, 20, 30, 50, 100]"
|
||
:page-size="queryParams.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="vehiclePage.total">
|
||
</el-pagination>
|
||
</el-row>
|
||
</el-row>
|
||
<div class="grid-content bg-purple" :style="{'height': contentHeight - 150 +'px'}">
|
||
<el-row :gutter="10">
|
||
<el-col :span="12" v-for="vehicle in vehiclePage.rows" style="margin: 0 0 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-button style="float: right;" type="danger"
|
||
@click="vehicleRemove(vehicle.vin)" size="mini">删除</el-button>
|
||
<span style="float: right; color: rgba(255,255,255,0)">|</span>
|
||
<el-button style="float: right;" :type="checkVin === vehicle.vin ? 'success' : ''"
|
||
@click="checkVin = vehicle.vin" size="mini" :disabled="!vehicle.online">{{checkVin === vehicle.vin ? "已选择" : "选择"}}</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="clientClose(vehicle.vin)">
|
||
下线
|
||
</el-button>
|
||
</div>
|
||
<el-descriptions class="margin-top" :column="1" size="mini" border>
|
||
<el-descriptions-item>
|
||
<template slot="label"> <i class="el-icon-discover"></i> 路线 </template>
|
||
<el-radio-group v-model="vehicle.positionCode" size="mini" @input="checkPositionCode(vehicle)">
|
||
<el-radio-button v-for="positionCode in positionCodeList" :label="positionCode"></el-radio-button>
|
||
</el-radio-group>
|
||
|
||
<el-tag style="margin-left: 15px;" type="success">{{vehicle.positionLength}}</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template slot="label"> <i class="el-icon-location-outline"></i> 档位 </template>
|
||
<el-radio-group size="mini" v-model="vehicle.gear" @input="checkGear(vehicle)">
|
||
<el-radio-button label="P"></el-radio-button>
|
||
<el-radio-button label="D"></el-radio-button>
|
||
</el-radio-group>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template slot="label"> <i class="el-icon-mobile-phone"></i> 报文上报 </template>
|
||
<el-radio-group size="mini" v-model="vehicle.msgCode" @input="checkMsg(vehicle)">
|
||
<el-radio-button label="上报"></el-radio-button>
|
||
<el-radio-button label="暂停"></el-radio-button>
|
||
<el-radio-button label="停止"></el-radio-button>
|
||
</el-radio-group>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template slot="label"> <i class="el-icon-tickets"></i> 总里程 </template>
|
||
<el-tag size="small">{{vehicle.mileage}}/KM</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
<i class="el-icon-office-building"></i>
|
||
联系地址
|
||
</template>
|
||
江苏省苏州市吴中区吴中大道 1188 号
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="14">
|
||
<el-empty v-if="checkVin == null" description="请在左侧选择需要查看数据的车辆"></el-empty>
|
||
<div v-if="checkVin != null" 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>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-drawer
|
||
title="添加车辆"
|
||
:visible.sync="addVehicleDrawer"
|
||
direction="ltr"
|
||
size="50%">
|
||
<el-row>
|
||
<el-col :span="22" :offset="1">
|
||
<h3 style="color: red">一行一个VIN，多VIN进行换行</h3>
|
||
<el-form ref="form" :model="addForm" label-position="top" label-width="80px">
|
||
<el-form-item label="车辆VIN">
|
||
<el-input type="textarea" :rows="35" v-model="addForm.vinStr"></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="vehicleCreate">添加车辆</el-button>
|
||
<el-button>取消</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-col>
|
||
</el-row>
|
||
</el-drawer>
|
||
<el-dialog
|
||
title="生成车辆"
|
||
:visible.sync="genVehicleDialog"
|
||
width="30%">
|
||
<el-row>
|
||
<el-col :offset="1" :span="22">
|
||
<el-form ref="form" :model="genForm" label-position="top" label-width="80px">
|
||
<el-form-item label="生成车辆数量 最高99999">
|
||
<el-input-number v-model="genForm.number" style="width: 100%" controls-position="right"
|
||
:min="1" :max="99999"></el-input-number>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-col>
|
||
</el-row>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="genVehicleDialog = false">取 消</el-button>
|
||
<el-button type="primary" @click="vehicleGen">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
editStatus,
|
||
instanceCheckPosition,
|
||
instanceClientClose,
|
||
instanceClientInit, instanceData,
|
||
instanceGear,
|
||
instanceList,
|
||
instanceMsg, unifiedOffline, unifiedOnline, unifiedPosition, unifiedSend, unifiedStatus, unifiedStop
|
||
} from '@/api/vehicle/instance'
|
||
import {positionList} from "@/api/vehicle/position";
|
||
import { create, gen, remove } from '@/api/vehicle/vehicle'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
contentHeight: 1024,
|
||
// 选中的VIN
|
||
checkVin: null,
|
||
// 路径列表
|
||
positionCodeList: [],
|
||
// 车辆列表
|
||
vehiclePage: {
|
||
rows: [],
|
||
total: 0
|
||
},
|
||
// 查询
|
||
queryParams: {
|
||
page: 1,
|
||
pageSize: 10,
|
||
vin: null,
|
||
online: true
|
||
},
|
||
// 定时获取车辆列表
|
||
intervalInstanceList: null,
|
||
// 定时获取车辆数据
|
||
intervalVehicleDataContinued: null,
|
||
// 车辆模拟数据
|
||
vehicleData: {},
|
||
// 添加车辆抽屉
|
||
addVehicleDrawer: false,
|
||
// 添加表单
|
||
addForm: {
|
||
vinStr: null
|
||
},
|
||
// 生成车辆弹框
|
||
genVehicleDialog: false,
|
||
// 生成车辆表单
|
||
genForm: {
|
||
number: 0
|
||
},
|
||
// 任务进度
|
||
unifiedInfo: {
|
||
unifiedStatus: false,
|
||
taskName: null,
|
||
taskExecutionSum: null,
|
||
taskStartTime: null,
|
||
taskSuccessSum: null,
|
||
taskErrorSum: null
|
||
},
|
||
unifiedInfoInterval: null,
|
||
// 进度条颜色
|
||
customColors: [
|
||
{ color: '#f56c6c', percentage: 20 },
|
||
{ color: '#e6a23c', percentage: 40 },
|
||
{ color: '#1989fa', percentage: 60 },
|
||
{ color: '#6f7ad3', percentage: 80 },
|
||
{ color: '#5cb87a', percentage: 100 }
|
||
]
|
||
}
|
||
},
|
||
created() {
|
||
this.contentHeight = window.innerHeight - 60;
|
||
this.initInstanceList();
|
||
this.initPositionList();
|
||
this.intervalVehicleDataContinued = setInterval(this.vehicleDataContinued, 1000);
|
||
},
|
||
methods: {
|
||
/**
|
||
* 获取状态
|
||
*/
|
||
vehicleUnifiedStatus() {
|
||
unifiedStatus().then(response => {
|
||
this.unifiedInfo = response.data;
|
||
if (!this.unifiedInfo.unifiedStatus){
|
||
clearInterval(this.unifiedInfoInterval);
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 一键上线
|
||
*/
|
||
vehicleUnifiedOnline(){
|
||
unifiedOnline().then(response => {
|
||
this.$notify({
|
||
title: '操作提示',
|
||
message: response.msg,
|
||
type: response.code === 200 ? 'success' : 'error'
|
||
})
|
||
this.unifiedInfoInterval = setInterval(this.vehicleUnifiedStatus, 100)
|
||
})
|
||
},
|
||
/**
|
||
* 一键离线
|
||
*/
|
||
vehicleUnifiedOffline(){
|
||
unifiedOffline().then(response => {
|
||
// 一键离线清空车辆选择
|
||
this.checkVin = null;
|
||
this.$notify({
|
||
title: '操作提示',
|
||
message: response.msg,
|
||
type: response.code === 200 ? 'success' : 'error'
|
||
})
|
||
})
|
||
},
|
||
/**
|
||
* 一键上报
|
||
*/
|
||
vehicleUnifiedSend(){
|
||
unifiedSend().then(response => {
|
||
this.$notify({
|
||
title: '操作提示',
|
||
message: response.msg,
|
||
type: response.code === 200 ? 'success' : 'error'
|
||
})
|
||
})
|
||
},
|
||
/**
|
||
* 一键上报
|
||
*/
|
||
vehicleUnifiedPosition(){
|
||
unifiedPosition().then(response => {
|
||
this.$notify({
|
||
title: '操作提示',
|
||
message: response.msg,
|
||
type: response.code === 200 ? 'success' : 'error'
|
||
})
|
||
})
|
||
},
|
||
/**
|
||
* 一键取消上报
|
||
*/
|
||
vehicleUnifiedStop(){
|
||
unifiedStop().then(response => {
|
||
this.$notify({
|
||
title: '操作提示',
|
||
message: response.msg,
|
||
type: response.code === 200 ? 'success' : 'error'
|
||
})
|
||
})
|
||
},
|
||
/**
|
||
* 选择每页数量
|
||
* @param val
|
||
*/
|
||
pageSizeChange(val) {
|
||
this.queryParams.pageSize = val;
|
||
this.getInstanceList()
|
||
},
|
||
/**
|
||
* 选择页数
|
||
* @param val
|
||
*/
|
||
pageChange(val) {
|
||
this.queryParams.page = val;
|
||
this.getInstanceList()
|
||
},
|
||
/**
|
||
* 车辆生成
|
||
*/
|
||
vehicleGen(){
|
||
gen(this.genForm.number).then(response => {
|
||
this.genVehicleDialog = false;
|
||
this.$notify({
|
||
title: '操作提示',
|
||
message: response.msg,
|
||
type: response.code === 200 ? 'success' : 'error'
|
||
})
|
||
})
|
||
},
|
||
/**
|
||
* 车辆添加
|
||
*/
|
||
vehicleCreate(){
|
||
create(this.addForm).then(response => {
|
||
this.addVehicleDrawer = false;
|
||
this.$notify({
|
||
title: '操作提示',
|
||
message: response.msg,
|
||
type: response.code === 200 ? 'success' : 'error'
|
||
})
|
||
})
|
||
},
|
||
/**
|
||
* 车辆删除
|
||
*/
|
||
vehicleRemove(vin){
|
||
remove(vin).then(response => {
|
||
this.getInstanceList()
|
||
this.$notify({
|
||
title: '操作提示',
|
||
message: response.msg,
|
||
type: response.code === 200 ? 'success' : 'error'
|
||
})
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 获取车辆数据
|
||
*/
|
||
vehicleDataContinued(){
|
||
if (this.checkVin != null){
|
||
instanceData(this.checkVin).then(response => {
|
||
this.vehicleData = response.data
|
||
})
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 状态发生改变
|
||
* @param statusKey 状态Key
|
||
*/
|
||
statusChange(statusKey) {
|
||
editStatus(this.checkVin, statusKey, this.vehicleData[statusKey]).then(response => {
|
||
this.$notify({
|
||
title: '操作提示',
|
||
message: response.msg,
|
||
type: response.code === 200 ? 'success' : 'error'
|
||
})
|
||
})
|
||
},
|
||
/**
|
||
* 选中报文上报状态
|
||
* @param vehicle 车辆
|
||
*/
|
||
checkGear(vehicle) {
|
||
instanceGear(vehicle.vin, vehicle.gear).then(response => {
|
||
this.getInstanceList();
|
||
this.$notify({
|
||
title: '操作提示',
|
||
message: response.msg,
|
||
type: response.code === 200 ? 'success' : 'error'
|
||
})
|
||
})
|
||
},
|
||
/**
|
||
* 选中报文上报状态
|
||
* @param vehicle 车辆
|
||
*/
|
||
checkMsg(vehicle) {
|
||
instanceMsg(vehicle.vin, vehicle.msgCode).then(response => {
|
||
this.getInstanceList();
|
||
this.$notify({
|
||
title: '操作提示',
|
||
message: response.msg,
|
||
type: response.code === 200 ? 'success' : 'error'
|
||
})
|
||
})
|
||
},
|
||
/**
|
||
* 选择车辆路径
|
||
* @param vehicle
|
||
*/
|
||
checkPositionCode(vehicle) {
|
||
instanceCheckPosition(vehicle.vin, vehicle.positionCode).then(response => {
|
||
this.getInstanceList();
|
||
this.$notify({
|
||
title: '操作提示',
|
||
message: response.msg,
|
||
type: response.code === 200 ? 'success' : 'error'
|
||
})
|
||
})
|
||
},
|
||
/**
|
||
* 初始化路径
|
||
*/
|
||
initPositionList(){
|
||
positionList().then(response => {
|
||
this.positionCodeList = response.data;
|
||
})
|
||
},
|
||
/**
|
||
* 初始化车辆列表
|
||
*/
|
||
initInstanceList(){
|
||
// 优先执行一次数据获取
|
||
this.getInstanceList()
|
||
// 再次执行为定时器执行
|
||
this.intervalInstanceList = setInterval(this.getInstanceList, 3000);
|
||
},
|
||
/**
|
||
* 获取车辆列表
|
||
*/
|
||
getInstanceList() {
|
||
instanceList(this.queryParams).then(response => {
|
||
this.vehiclePage = response.data;
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 初始化车机
|
||
* @param vin
|
||
*/
|
||
clientInit(vin){
|
||
instanceClientInit(vin).then(response => {
|
||
this.getInstanceList();
|
||
this.$notify({
|
||
title: '操作提示',
|
||
message: response.msg,
|
||
type: response.code === 200 ? 'success' : 'error'
|
||
})
|
||
})
|
||
},
|
||
/**
|
||
* 关闭车机
|
||
* @param vin
|
||
*/
|
||
clientClose(vin){
|
||
instanceClientClose(vin).then(response => {
|
||
this.getInstanceList();
|
||
// 如果下线的是本车则关闭实时车况查看
|
||
if (vin === this.checkVin){
|
||
this.checkVin = null
|
||
}
|
||
this.$notify({
|
||
title: '操作提示',
|
||
message: response.msg,
|
||
type: response.code === 200 ? 'success' : 'error'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.app-container {
|
||
padding: 10px 5px 0 10px;
|
||
background-color: #f4f4f5;
|
||
}
|
||
|
||
.el-row {
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.bg-purple {
|
||
background: #f4f4f5;
|
||
}
|
||
|
||
.grid-content {
|
||
border-radius: 4px;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.grid-content::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
|
||
.grid-content::-webkit-scrollbar-thumb {
|
||
border-radius: 10px;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.grid-content::-webkit-scrollbar-track {
|
||
border-radius: 0;
|
||
background: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.vehicleDiv {
|
||
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>
|
||
|