1116 lines
39 KiB
Vue
1116 lines
39 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="68px">
|
|
<el-form-item label="VIN" prop="vin">
|
|
<el-input
|
|
v-model="queryParams.vin"
|
|
placeholder="请输入VIN"
|
|
clearable
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="开始时间" prop="startTime">
|
|
<el-date-picker
|
|
v-model="queryParams.startTime"
|
|
clearable
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="请选择开始时间"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="结束时间" prop="endTime">
|
|
<el-date-picker
|
|
v-model="queryParams.endTime"
|
|
clearable
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="请选择结束时间"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
v-hasPermi="['record:record:add']"
|
|
type="primary"
|
|
plain
|
|
icon="el-icon-plus"
|
|
size="mini"
|
|
@click="handleAdd"
|
|
>新增</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
v-hasPermi="['record:record:edit']"
|
|
type="success"
|
|
plain
|
|
icon="el-icon-edit"
|
|
size="mini"
|
|
:disabled="single"
|
|
@click="handleUpdate"
|
|
>修改</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
v-hasPermi="['record:record:remove']"
|
|
type="danger"
|
|
plain
|
|
icon="el-icon-delete"
|
|
size="mini"
|
|
:disabled="multiple"
|
|
@click="handleDelete"
|
|
>删除</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
v-hasPermi="['record:record:export']"
|
|
type="warning"
|
|
plain
|
|
icon="el-icon-download"
|
|
size="mini"
|
|
@click="handleExport"
|
|
>导出</el-button>
|
|
</el-col>
|
|
<right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
|
|
</el-row>
|
|
|
|
<el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
<el-table-column label="VIN" align="center" prop="vin" />
|
|
<el-table-column label="开始时间" align="center" prop="startTime" width="180">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.startTime }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="结束时间" align="center" prop="endTime" width="180">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.endTime }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-map-location"
|
|
@click="openTrack(scope.row.vin,scope.row.id)"
|
|
>历史轨迹</el-button>
|
|
<el-button
|
|
v-hasPermi="['record:record:remove']"
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-delete"
|
|
@click="handleDelete(scope.row)"
|
|
>删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination
|
|
v-show="total>0"
|
|
:total="total"
|
|
:page.sync="queryParams.pageNum"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="getList"
|
|
/>
|
|
|
|
<!-- 添加或修改车辆行驶记录对话框 -->
|
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px" />
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
:fullscreen="true"
|
|
:visible.sync="trajectoryVisible"
|
|
:before-close="trajectoryClose"
|
|
>
|
|
<div style="width:100%;height:800px;">
|
|
<el-row type="flex" style="height: 30px">
|
|
<el-col :span="18">
|
|
<div class="grid-content bg-purple-dark">
|
|
<el-tag style="margin-left: 47.5%;font-size: 16px" size="medium">车辆轨迹：{{ this.vin }} 记录时间：{{ nowTime }}</el-tag>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="grid-content bg-purple-dark">
|
|
<el-progress :text-inside="true" :stroke-width="26" :percentage="nowSchedule" style="margin-right: 40%" />
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row style="margin-top: 5px">
|
|
<el-col :span="7" style="margin-left: 2.2%;"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix" style="font-size: 8px">
|
|
<span>车辆轨迹</span>
|
|
</div>
|
|
<div>
|
|
<el-amap
|
|
style="width: 455px;height: 300px"
|
|
class="amap-box"
|
|
:amap-manager="amapManager"
|
|
:vid="'amap-vue'"
|
|
:zoom="zoom"
|
|
:plugin="plugin"
|
|
:center="center"
|
|
:events="events"
|
|
>
|
|
<!-- 标记 -->
|
|
<el-amap-marker v-for="(marker, index) in carmarkers" :key="index" :position="marker.position" :vid="index" :content="marker.content" :events="marker.events" />
|
|
<el-amap-info-window
|
|
:position="currentWindow.position"
|
|
:content="currentWindow.content"
|
|
:visible="currentWindow.visible"
|
|
:events="currentWindow.events"
|
|
/>
|
|
</el-amap>
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col :span="8" style="margin-left: 1.5%"><div class="grid-content bg-purple-light">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix" style="font-size: 8px">
|
|
<span>车辆转速</span>
|
|
</div>
|
|
<div>
|
|
<div class="app-container homeIndex">
|
|
<div class="mineEcharts">
|
|
<div ref="mineEcharts" style="height: 260px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col :span="7" style="margin-left: 1.5%"><div class="grid-content bg-purple-light">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix" style="font-size: 8px;height: 10px">
|
|
<span>电池温度/电压</span>
|
|
</div>
|
|
<div>
|
|
<div id="batteryTemperature" :style="{width: '470px', height: '150px'}" />
|
|
<div id="cellVoltage" :style="{width: '470px', height: '150px'}" />
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
</el-row>
|
|
<el-row style="margin-top: 2%">
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>单体电池最低电压</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.lowestVoltageBattery }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.6%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>电机电压</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.motorVoltage }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.6%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>电机转速</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.motorSpeed }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.6%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>BMS自检计数器</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.selfCheckingCounter }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.6%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>总电压</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.totalVoltage }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
</el-row>
|
|
<el-row style="margin-top: 2%">
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>档位</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.gears }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>电池剩余电量</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.dumpEnergy }}%
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>电机电流</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.motorCurrent }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>制动踏板行程值</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.brakePedal }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>总电流</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.jointCurrent }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
</el-row>
|
|
<el-row style="margin-top: 2%">
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>单次最大电压</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.maximumVoltage }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>燃料消耗率</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.fuelRate }}L/百公里
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>绝缘电阻</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.insulationResistance }}Ω
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>最大反馈功率</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.maximumFeedbackPower }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>单体电池最高温度</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.maximumTemperatureBattery }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
</el-row>
|
|
<el-row style="margin-top: 2%">
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>动力电池可用容量</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.availableBatteryCapacity }}%
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>电机温度</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.motorTemperature }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>充放电电流</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.chargingAndDischargingCurrent }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>最大放电功率</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.maximumDischargePower }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>电机控制器温度</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.motorControllerTemperature }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
</el-row>
|
|
<el-row style="margin-top: 2%">
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>电池负载端总电压</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.totalVoltageAtLoadEnd }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>里程</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.totalDistance }}KM
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>单体电池最低温度</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.lowestTemperatureBattery }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>加速踏板行程值</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.acceleratorPedal }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
<el-col style="margin-left: 2.7%" :span="4"><div class="grid-content bg-purple">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>电机转矩</span>
|
|
</div>
|
|
<div>
|
|
{{ this.vehicleInfo.motorTorque }}
|
|
</div>
|
|
</el-card>
|
|
</div></el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<!--<script>-->
|
|
<!--import { listRecord, getRecord, delRecord, addRecord, updateRecord, trackHistory } from "@/api/record/record";-->
|
|
<!--import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'-->
|
|
<!--let amapManager = new AMapManager()-->
|
|
<!--import echarts from 'echarts'-->
|
|
<!--export default {-->
|
|
<!-- name: "History",-->
|
|
<!-- dicts: ['vehicle_status', 'vehicle_type'],-->
|
|
<!-- data() {-->
|
|
<!-- return {-->
|
|
<!-- chart: null,-->
|
|
<!-- mineEcharts: null,-->
|
|
<!-- carmarkers :[],-->
|
|
<!-- currentWindow: {-->
|
|
<!-- position: [10.396624,47.908167],-->
|
|
<!-- events: {},-->
|
|
<!-- content:1011,-->
|
|
<!-- visible: true-->
|
|
<!-- },-->
|
|
<!-- address: null,-->
|
|
<!-- searchKey: '',-->
|
|
<!-- amapManager,-->
|
|
<!-- markers: [],-->
|
|
<!-- searchOption: {-->
|
|
<!-- city: '全国',-->
|
|
<!-- citylimit: true-->
|
|
<!-- },-->
|
|
<!-- vehicleInfo:{},-->
|
|
<!-- center: [146.396624,47.908167],-->
|
|
<!-- zoom: 15,-->
|
|
<!-- lng: 0,-->
|
|
<!-- lat: 0,-->
|
|
<!-- loaded: false,-->
|
|
<!-- events: {-->
|
|
<!-- init() {-->
|
|
<!-- lazyAMapApiLoaderInstance.load().then(() => {-->
|
|
<!-- self.initSearch()-->
|
|
<!-- })-->
|
|
<!-- },-->
|
|
<!-- // 点击获取地址的数据-->
|
|
<!-- click(e) {-->
|
|
<!-- self.markers = []-->
|
|
<!-- let { lng, lat } = e.lnglat-->
|
|
<!-- self.lng = lng-->
|
|
<!-- self.lat = lat-->
|
|
<!-- self.center = [lng, lat]-->
|
|
<!-- self.markers.push([lng, lat])-->
|
|
<!-- // 这里通过高德 SDK 完成。-->
|
|
<!-- let geocoder = new AMap.Geocoder({-->
|
|
<!-- radius: 500,-->
|
|
<!-- extensions: 'all'-->
|
|
<!-- })-->
|
|
<!-- console.log(lng+","+lat) //控制台打印坐标-->
|
|
<!-- geocoder.getAddress([lng, lat], function(status, result) {-->
|
|
<!-- if (status === 'complete' && result.info === 'OK') {-->
|
|
<!-- if (result && result.regeocode) {-->
|
|
<!-- console.log(result.regeocode.formattedAddress) //控制台打印地址-->
|
|
<!-- self.address = result.regeocode.formattedAddress-->
|
|
<!-- self.searchKey = result.regeocode.formattedAddress-->
|
|
<!-- self.$nextTick()-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- })-->
|
|
<!-- }-->
|
|
<!-- },-->
|
|
<!-- // 一些工具插件-->
|
|
<!-- plugin: [-->
|
|
<!-- {-->
|
|
<!-- pName: 'Geocoder',-->
|
|
<!-- events: {-->
|
|
<!-- init (o) {-->
|
|
<!-- //console.log("一些工具插件--地址"+o.getAddress())-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- },-->
|
|
<!-- {-->
|
|
<!-- // 鹰眼-->
|
|
<!-- pName: 'OverView',-->
|
|
<!-- events: {-->
|
|
<!-- init(instance) {-->
|
|
<!-- //console.log("鹰眼:"+instance);-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- },-->
|
|
<!-- {-->
|
|
<!-- // 地图类型-->
|
|
<!-- pName: 'MapType',-->
|
|
<!-- defaultType: 0,-->
|
|
<!-- events: {-->
|
|
<!-- init(instance) {-->
|
|
<!-- //console.log("地图类型:"+instance);-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- },-->
|
|
<!-- ],-->
|
|
<!-- trajectoryVisible:false,-->
|
|
<!-- // 遮罩层-->
|
|
<!-- loading: true,-->
|
|
<!-- // 选中数组-->
|
|
<!-- ids: [],-->
|
|
<!-- // 非单个禁用-->
|
|
<!-- single: true,-->
|
|
<!-- // 非多个禁用-->
|
|
<!-- multiple: true,-->
|
|
<!-- // 显示搜索条件-->
|
|
<!-- showSearch: true,-->
|
|
<!-- // 总条数-->
|
|
<!-- total: 0,-->
|
|
<!-- // 车辆行驶记录表格数据-->
|
|
<!-- recordList: [],-->
|
|
<!-- // 弹出层标题-->
|
|
<!-- title: "",-->
|
|
<!-- // 是否显示弹出层-->
|
|
<!-- open: false,-->
|
|
<!-- // 查询参数-->
|
|
<!-- queryParams: {-->
|
|
<!-- pageNum: 1,-->
|
|
<!-- pageSize: 10,-->
|
|
<!-- vin: null,-->
|
|
<!-- startTime: null,-->
|
|
<!-- endTime: null-->
|
|
<!-- },-->
|
|
<!-- // 表单参数-->
|
|
<!-- form: {},-->
|
|
<!-- // 表单校验-->
|
|
<!-- rules: {-->
|
|
<!-- vin: [-->
|
|
<!-- { required: true, message: "VIN不能为空", trigger: "blur" }-->
|
|
<!-- ],-->
|
|
<!-- },-->
|
|
<!-- id:'',-->
|
|
<!-- historyData: [],-->
|
|
<!-- nowSchedule:0,-->
|
|
<!-- nowTime: null,-->
|
|
<!-- batteryTemperature:[],-->
|
|
<!-- cellVoltage:[]-->
|
|
<!-- };-->
|
|
<!-- },-->
|
|
<!-- created() {-->
|
|
<!-- this.getList();-->
|
|
<!-- },-->
|
|
<!-- mounted() {-->
|
|
<!-- this.instrumentInfo();-->
|
|
<!-- this.fetchData()-->
|
|
<!-- //图的大小自适应-->
|
|
<!-- window.addEventListener('resize',()=>{-->
|
|
<!-- if (this.chart){-->
|
|
<!-- this.chart.resize()-->
|
|
<!-- }-->
|
|
<!-- })-->
|
|
<!-- },-->
|
|
<!-- methods: {-->
|
|
<!-- batteryTemperatureLine() {-->
|
|
<!-- let myChart= this.$echarts.init(document.getElementById('batteryTemperature'))-->
|
|
<!-- var option;-->
|
|
<!-- option = {-->
|
|
<!-- color: ['#FF0087'],-->
|
|
<!-- title: {-->
|
|
<!-- text: '电池温度'-->
|
|
<!-- },-->
|
|
<!-- tooltip: {-->
|
|
<!-- trigger: 'axis',-->
|
|
<!-- axisPointer: {-->
|
|
<!-- type: 'cross',-->
|
|
<!-- label: {-->
|
|
<!-- backgroundColor: '#6a7985'-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- },-->
|
|
<!-- legend: {-->
|
|
<!-- data: []-->
|
|
<!-- },-->
|
|
<!-- grid: {-->
|
|
<!-- left: '1%',-->
|
|
<!-- right: '1%',-->
|
|
<!-- bottom: '1%',-->
|
|
<!-- containLabel: true-->
|
|
<!-- },-->
|
|
<!-- xAxis: [-->
|
|
<!-- {-->
|
|
<!-- type: 'category',-->
|
|
<!-- boundaryGap: false,-->
|
|
<!-- data: []-->
|
|
<!-- }-->
|
|
<!-- ],-->
|
|
<!-- yAxis: [-->
|
|
<!-- {-->
|
|
<!-- type: 'value'-->
|
|
<!-- }-->
|
|
<!-- ],-->
|
|
<!-- series: [-->
|
|
<!-- {-->
|
|
<!-- name: '电池温度',-->
|
|
<!-- type: 'line',-->
|
|
<!-- stack: 'Total',-->
|
|
<!-- smooth: true,-->
|
|
<!-- lineStyle: {-->
|
|
<!-- width: 0-->
|
|
<!-- },-->
|
|
<!-- showSymbol: false,-->
|
|
<!-- areaStyle: {-->
|
|
<!-- opacity: 0.8,-->
|
|
<!-- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [-->
|
|
<!-- {-->
|
|
<!-- offset: 0,-->
|
|
<!-- color: 'rgb(128, 255, 165)'-->
|
|
<!-- },-->
|
|
<!-- {-->
|
|
<!-- offset: 1,-->
|
|
<!-- color: 'rgb(1, 191, 236)'-->
|
|
<!-- }-->
|
|
<!-- ])-->
|
|
<!-- },-->
|
|
<!-- emphasis: {-->
|
|
<!-- focus: 'series'-->
|
|
<!-- },-->
|
|
<!-- data: this.batteryTemperature-->
|
|
<!-- },-->
|
|
<!-- ]-->
|
|
<!-- };-->
|
|
<!-- myChart.setOption(option);-->
|
|
<!-- },-->
|
|
<!-- cellVoltageLine() {-->
|
|
<!-- let myChart= this.$echarts.init(document.getElementById('cellVoltage'))-->
|
|
<!-- var option;-->
|
|
<!-- option = {-->
|
|
<!-- color: ['#FF0087'],-->
|
|
<!-- title: {-->
|
|
<!-- text: '电池电压'-->
|
|
<!-- },-->
|
|
<!-- tooltip: {-->
|
|
<!-- trigger: 'axis',-->
|
|
<!-- axisPointer: {-->
|
|
<!-- type: 'cross',-->
|
|
<!-- label: {-->
|
|
<!-- backgroundColor: '#6a7985'-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- },-->
|
|
<!-- legend: {-->
|
|
<!-- data: []-->
|
|
<!-- },-->
|
|
|
|
<!-- grid: {-->
|
|
<!-- left: '3%',-->
|
|
<!-- right: '4%',-->
|
|
<!-- bottom: '3%',-->
|
|
<!-- containLabel: true-->
|
|
<!-- },-->
|
|
<!-- xAxis: [-->
|
|
<!-- {-->
|
|
<!-- type: 'category',-->
|
|
<!-- boundaryGap: false,-->
|
|
<!-- data: []-->
|
|
<!-- }-->
|
|
<!-- ],-->
|
|
<!-- yAxis: [-->
|
|
<!-- {-->
|
|
<!-- type: 'value'-->
|
|
<!-- }-->
|
|
<!-- ],-->
|
|
<!-- series: [-->
|
|
<!-- {-->
|
|
<!-- name: '电池电压',-->
|
|
<!-- type: 'line',-->
|
|
<!-- stack: 'Total',-->
|
|
<!-- smooth: true,-->
|
|
<!-- lineStyle: {-->
|
|
<!-- width: 0-->
|
|
<!-- },-->
|
|
<!-- showSymbol: false,-->
|
|
<!-- areaStyle: {-->
|
|
<!-- opacity: 0.8,-->
|
|
<!-- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [-->
|
|
<!-- {-->
|
|
<!-- offset: 0,-->
|
|
<!-- color: 'rgb(255, 0, 135)'-->
|
|
<!-- },-->
|
|
<!-- {-->
|
|
<!-- offset: 1,-->
|
|
<!-- color: 'rgb(135, 0, 157)'-->
|
|
<!-- }-->
|
|
<!-- ])-->
|
|
<!-- },-->
|
|
<!-- emphasis: {-->
|
|
<!-- focus: 'series'-->
|
|
<!-- },-->
|
|
<!-- data: this.cellVoltage-->
|
|
<!-- }-->
|
|
<!-- ]-->
|
|
<!-- };-->
|
|
<!-- myChart.setOption(option);-->
|
|
<!-- },-->
|
|
<!-- openTrack(vin,id){-->
|
|
<!-- this.vin = vin-->
|
|
<!-- this.id = id-->
|
|
<!-- this.trajectoryVisible = true-->
|
|
<!-- this.getPass()-->
|
|
<!-- },-->
|
|
<!-- instrumentInfo() {-->
|
|
<!-- var chartDom = this.$refs.mineEcharts;-->
|
|
<!-- var myChart = echarts.init(chartDom);-->
|
|
<!-- var option;-->
|
|
<!-- option = {-->
|
|
<!-- //鼠标悬停文字提示-->
|
|
<!-- tooltip: {-->
|
|
<!-- formatter: "{b} : {c}",-->
|
|
<!-- },-->
|
|
<!-- series: [-->
|
|
<!-- {-->
|
|
<!-- name: "",-->
|
|
<!-- type: "gauge",-->
|
|
<!-- radius: "50%",-->
|
|
<!-- center: ["15%", "55%"], //第一个仪表盘的位置-->
|
|
<!-- min: 0, //显示的最小值和最大值-->
|
|
<!-- max: 10000,-->
|
|
<!-- axisLabel: { //仪表盘刻度-->
|
|
<!-- show: false,-->
|
|
<!-- },-->
|
|
<!-- axisLine: { //仪表盘宽度-->
|
|
<!-- lineStyle: {-->
|
|
<!-- width: 10,-->
|
|
<!-- },-->
|
|
<!-- },-->
|
|
<!-- pointer: { //仪表盘的指针长度及宽度-->
|
|
<!-- show: true,-->
|
|
<!-- length: "70%",-->
|
|
<!-- width: 4,-->
|
|
<!-- },-->
|
|
<!-- title: { //仪表盘的文字样式-->
|
|
<!-- show: true,-->
|
|
<!-- offsetCenter: [0, "100%"],-->
|
|
<!-- textStyle: {-->
|
|
<!-- color: "#667EFF",-->
|
|
<!-- fontSize: 20,-->
|
|
<!-- },-->
|
|
<!-- },-->
|
|
<!-- detail: {-->
|
|
<!-- formatter: "{value}转",-->
|
|
<!-- textStyle: {-->
|
|
<!-- fontSize: 14,-->
|
|
<!-- color: "#00FF99",-->
|
|
<!-- },-->
|
|
<!-- },-->
|
|
<!-- splitLine: { //仪表盘的刻度线显示-->
|
|
<!-- show: false,-->
|
|
<!-- },-->
|
|
<!-- data: [-->
|
|
<!-- {-->
|
|
<!-- value: this.vehicleInfo.motorTorque,-->
|
|
<!-- name: "电机转矩",-->
|
|
<!-- },-->
|
|
<!-- ],-->
|
|
<!-- },-->
|
|
<!-- {-->
|
|
<!-- name: "",-->
|
|
<!-- type: "gauge",-->
|
|
<!-- radius: "70%",-->
|
|
<!-- center: ["50%", "48%"],-->
|
|
<!-- min: 0,-->
|
|
<!-- max: 300,-->
|
|
<!-- axisLabel: {-->
|
|
<!-- show: false,-->
|
|
<!-- },-->
|
|
<!-- axisLine: {-->
|
|
<!-- lineStyle: {-->
|
|
<!-- width: 10,-->
|
|
<!-- },-->
|
|
<!-- },-->
|
|
<!-- pointer: {-->
|
|
<!-- show: true,-->
|
|
<!-- length: "70%",-->
|
|
<!-- width: 4,-->
|
|
<!-- // 0,-->
|
|
<!-- },-->
|
|
<!-- splitLine: {-->
|
|
<!-- show: false,-->
|
|
<!-- },-->
|
|
<!-- title: {-->
|
|
<!-- show: true,-->
|
|
<!-- offsetCenter: [0, "92%"],-->
|
|
<!-- textStyle: {-->
|
|
<!-- color: "#667EFF",-->
|
|
<!-- fontSize: 20,-->
|
|
<!-- },-->
|
|
<!-- },-->
|
|
<!-- detail: {-->
|
|
<!-- formatter: "{value}KM/H",-->
|
|
<!-- textStyle: {-->
|
|
<!-- fontSize: 14,-->
|
|
<!-- color: "#00FF99",-->
|
|
<!-- },-->
|
|
<!-- },-->
|
|
<!-- data: [-->
|
|
<!-- {-->
|
|
<!-- value: this.vehicleInfo.speed,-->
|
|
<!-- name: "车速",-->
|
|
<!-- },-->
|
|
<!-- ],-->
|
|
<!-- },-->
|
|
<!-- {-->
|
|
<!-- name: "",-->
|
|
<!-- type: "gauge",-->
|
|
<!-- radius: "50%",-->
|
|
<!-- center: ["85%", "55%"],-->
|
|
<!-- min: 0,-->
|
|
<!-- max: 20,-->
|
|
<!-- axisLabel: {-->
|
|
<!-- show: false,-->
|
|
<!-- },-->
|
|
<!-- axisLine: {-->
|
|
<!-- lineStyle: {-->
|
|
<!-- width: 10,-->
|
|
<!-- },-->
|
|
<!-- },-->
|
|
<!-- pointer: {-->
|
|
<!-- show: true,-->
|
|
<!-- length: "70%",-->
|
|
<!-- width: 4,-->
|
|
<!-- },-->
|
|
<!-- splitLine: {-->
|
|
<!-- show: false,-->
|
|
<!-- },-->
|
|
<!-- title: {-->
|
|
<!-- show: true,-->
|
|
<!-- offsetCenter: [0, "100%"],-->
|
|
<!-- textStyle: {-->
|
|
<!-- color: "#667EFF",-->
|
|
<!-- fontSize: 20,-->
|
|
<!-- },-->
|
|
<!-- },-->
|
|
<!-- detail: {-->
|
|
<!-- formatter: "{value}L/h",-->
|
|
<!-- textStyle: {-->
|
|
<!-- fontSize: 14,-->
|
|
<!-- color: "#00FF99",-->
|
|
<!-- },-->
|
|
<!-- },-->
|
|
<!-- data: [-->
|
|
<!-- {-->
|
|
<!-- value: this.vehicleInfo.fuelRate,-->
|
|
<!-- name: "燃料消耗率",-->
|
|
<!-- },-->
|
|
<!-- ],-->
|
|
<!-- },-->
|
|
<!-- ],-->
|
|
<!-- };-->
|
|
<!-- option && myChart.setOption(option);-->
|
|
<!-- },-->
|
|
<!-- trajectoryClose(){-->
|
|
<!-- clearInterval(this.timer)-->
|
|
<!-- this.trajectoryVisible = false-->
|
|
<!-- this.batteryTemperature = []-->
|
|
<!-- this.cellVoltage = []-->
|
|
<!-- },-->
|
|
<!-- getPass(){-->
|
|
<!-- trackHistory(this.id).then(resp => {-->
|
|
<!-- this.historyData = resp.data-->
|
|
<!-- var i = 0;-->
|
|
<!-- if(this.historyData.length > 0){-->
|
|
<!-- this.timer = setInterval(()=>{-->
|
|
<!-- this.batteryTemperatureLine();-->
|
|
<!-- this.cellVoltageLine();-->
|
|
<!-- if(i+1 >= this.historyData.length){-->
|
|
<!-- this.$message({-->
|
|
<!-- message: '历史轨迹回显完毕',-->
|
|
<!-- type: 'success'-->
|
|
<!-- });-->
|
|
<!-- clearInterval(this.timer)-->
|
|
<!-- }else{-->
|
|
<!-- i++-->
|
|
<!-- this.instrumentInfo()-->
|
|
<!-- console.log(i)-->
|
|
<!-- console.log(this.historyData.length)-->
|
|
<!-- var nodeData = this.historyData[i]-->
|
|
<!-- this.cellVoltage.push(nodeData.totalVoltage)-->
|
|
<!-- this.batteryTemperature.push(nodeData.maximumTemperatureBattery)-->
|
|
<!-- this.nowTime = new Date(nodeData.time).toLocaleString()-->
|
|
<!-- this.nowSchedule = parseFloat(i / (this.historyData.length-1) * 100).toFixed(2)-->
|
|
<!-- this.currentWindow.position = [nodeData.longitude,nodeData.latitude]-->
|
|
<!-- this.center = [nodeData.longitude,nodeData.latitude]-->
|
|
<!-- this.vehicleInfo = nodeData-->
|
|
<!-- this.currentWindow = {-->
|
|
<!-- position: [nodeData.longitude,nodeData.latitude],-->
|
|
<!-- content: ``,-->
|
|
<!-- events: {-->
|
|
<!-- close: (e) => {-->
|
|
<!-- this.currentWindow.visible = false-->
|
|
<!-- }-->
|
|
<!-- },-->
|
|
<!-- visible: true }-->
|
|
<!-- this.carmarkers = [-->
|
|
<!-- {-->
|
|
<!-- position:this.currentWindow.position,-->
|
|
<!-- content: `<div><img src="http://webapi.amap.com/images/car.png"></div>`,-->
|
|
<!-- events: {-->
|
|
<!-- click: (e) => {-->
|
|
<!-- this.currentWindow = {-->
|
|
<!-- position: [nodeData.longitude,nodeData.latitude],-->
|
|
<!-- content: `<div style="color: #1c84c6;"></div>`,-->
|
|
<!-- events: {-->
|
|
<!-- close: (e) => {-->
|
|
<!-- this.currentWindow.visible = false-->
|
|
<!-- }-->
|
|
<!-- },-->
|
|
<!-- visible: true }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- ]-->
|
|
<!-- }-->
|
|
<!-- },1000);-->
|
|
<!-- }-->
|
|
<!-- })-->
|
|
<!-- },-->
|
|
<!-- initSearch() {-->
|
|
<!-- let vm = this-->
|
|
<!-- let map = this.amapManager.getMap()-->
|
|
<!-- AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {-->
|
|
<!-- var poiPicker = new PoiPicker({-->
|
|
<!-- input: 'search',-->
|
|
<!-- placeSearchOptions: {-->
|
|
<!-- map: map,-->
|
|
<!-- pageSize: 10-->
|
|
<!-- },-->
|
|
<!-- suggestContainer: 'searchTip',-->
|
|
<!-- searchResultsContainer: 'searchTip'-->
|
|
<!-- })-->
|
|
<!-- vm.poiPicker = poiPicker-->
|
|
<!-- // 监听poi选中信息-->
|
|
<!-- poiPicker.on('poiPicked', function(poiResult) {-->
|
|
<!-- // console.log(poiResult)-->
|
|
<!-- let source = poiResult.source-->
|
|
<!-- let poi = poiResult.item-->
|
|
<!-- if (source !== 'search') {-->
|
|
<!-- poiPicker.searchByKeyword(poi.name)-->
|
|
<!-- } else {-->
|
|
<!-- poiPicker.clearSearchResults()-->
|
|
<!-- vm.markers = []-->
|
|
<!-- let lng = poi.location.lng-->
|
|
<!-- let lat = poi.location.lat-->
|
|
<!-- let address = poi.cityname + poi.adname + poi.name-->
|
|
<!-- vm.center = [lng, lat]-->
|
|
<!-- vm.markers.push([lng, lat])-->
|
|
<!-- vm.lng = lng-->
|
|
<!-- vm.lat = lat-->
|
|
<!-- vm.address = address-->
|
|
<!-- vm.searchKey = address-->
|
|
<!-- }-->
|
|
<!-- })-->
|
|
<!-- })-->
|
|
<!-- },-->
|
|
<!-- /** 查询车辆行驶记录列表 */-->
|
|
<!-- getList() {-->
|
|
<!-- this.loading = true;-->
|
|
<!-- listRecord(this.queryParams).then(response => {-->
|
|
<!-- this.recordList = response.rows;-->
|
|
<!-- this.total = response.total;-->
|
|
<!-- this.loading = false;-->
|
|
<!-- });-->
|
|
<!-- },-->
|
|
<!-- // 取消按钮-->
|
|
<!-- cancel() {-->
|
|
<!-- this.open = false;-->
|
|
<!-- this.reset();-->
|
|
<!-- },-->
|
|
<!-- // 表单重置-->
|
|
<!-- reset() {-->
|
|
<!-- this.form = {-->
|
|
<!-- id: null,-->
|
|
<!-- vin: null,-->
|
|
<!-- startTime: null,-->
|
|
<!-- endTime: null-->
|
|
<!-- };-->
|
|
<!-- this.resetForm("form");-->
|
|
<!-- },-->
|
|
<!-- /** 搜索按钮操作 */-->
|
|
<!-- handleQuery() {-->
|
|
<!-- this.queryParams.pageNum = 1;-->
|
|
<!-- this.getList();-->
|
|
<!-- },-->
|
|
<!-- /** 重置按钮操作 */-->
|
|
<!-- resetQuery() {-->
|
|
<!-- this.resetForm("queryForm");-->
|
|
<!-- this.handleQuery();-->
|
|
<!-- },-->
|
|
<!-- // 多选框选中数据-->
|
|
<!-- handleSelectionChange(selection) {-->
|
|
<!-- this.ids = selection.map(item => item.id)-->
|
|
<!-- this.single = selection.length!==1-->
|
|
<!-- this.multiple = !selection.length-->
|
|
<!-- },-->
|
|
<!-- /** 新增按钮操作 */-->
|
|
<!-- handleAdd() {-->
|
|
<!-- this.reset();-->
|
|
<!-- this.open = true;-->
|
|
<!-- this.title = "添加车辆行驶记录";-->
|
|
<!-- },-->
|
|
<!-- /** 修改按钮操作 */-->
|
|
<!-- handleUpdate(row) {-->
|
|
<!-- this.reset();-->
|
|
<!-- const id = row.id || this.ids-->
|
|
<!-- getRecord(id).then(response => {-->
|
|
<!-- this.form = response.data;-->
|
|
<!-- this.open = true;-->
|
|
<!-- this.title = "修改车辆行驶记录";-->
|
|
<!-- });-->
|
|
<!-- },-->
|
|
<!-- /** 提交按钮 */-->
|
|
<!-- submitForm() {-->
|
|
<!-- this.$refs["form"].validate(valid => {-->
|
|
<!-- if (valid) {-->
|
|
<!-- if (this.form.id != null) {-->
|
|
<!-- updateRecord(this.form).then(response => {-->
|
|
<!-- this.$modal.msgSuccess("修改成功");-->
|
|
<!-- this.open = false;-->
|
|
<!-- this.getList();-->
|
|
<!-- });-->
|
|
<!-- } else {-->
|
|
<!-- addRecord(this.form).then(response => {-->
|
|
<!-- this.$modal.msgSuccess("新增成功");-->
|
|
<!-- this.open = false;-->
|
|
<!-- this.getList();-->
|
|
<!-- });-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- });-->
|
|
<!-- },-->
|
|
<!-- /** 删除按钮操作 */-->
|
|
<!-- handleDelete(row) {-->
|
|
<!-- const ids = row.id || this.ids;-->
|
|
<!-- this.$modal.confirm('是否确认删除车辆行驶记录编号为"' + ids + '"的数据项？').then(function() {-->
|
|
<!-- return delRecord(ids);-->
|
|
<!-- }).then(() => {-->
|
|
<!-- this.getList();-->
|
|
<!-- this.$modal.msgSuccess("删除成功");-->
|
|
<!-- }).catch(() => {});-->
|
|
<!-- },-->
|
|
<!-- /** 导出按钮操作 */-->
|
|
<!-- handleExport() {-->
|
|
<!-- this.download('record/record/export', {-->
|
|
<!-- ...this.queryParams-->
|
|
<!-- }, `record_${new Date().getTime()}.xlsx`)-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!--};-->
|
|
<!--</script>-->
|