|
|
@@ -1,341 +1,126 @@
|
|
|
<template>
|
|
|
- <div class="battle-warp">
|
|
|
- <div class="map-card-wrap">
|
|
|
- <div class="map-card-wrap__info">
|
|
|
- <van-row class="map-card-wrap__info-box" :gutter="3" type="flex" justify="center">
|
|
|
- <van-col :span="6" class="item" v-for="(item, index) of cardList" :key="index">
|
|
|
- <div class="name">{{ item.name }}</div>
|
|
|
- <div class="value">{{ item.value }} <span class="unit">{{ item.unit }}</span></div>
|
|
|
- </van-col>
|
|
|
- </van-row>
|
|
|
- <div class="map-card-wrap__info-search">
|
|
|
- <van-dropdown-menu active-color="#1989fa">
|
|
|
- <van-dropdown-item v-model="tradeStatus" :options="tradeStatusList" />
|
|
|
- <van-dropdown-item v-model="runStatus" :options="runStatusList" />
|
|
|
- </van-dropdown-menu>
|
|
|
- <div><van-icon name="search" /></div>
|
|
|
+ <div class="battle-warp" style="padding: 10px 15px;height: 100%;">
|
|
|
+ <div class="list-wrap" style="background-color: #ffffff;padding: 0;border-radius: 4px;height: 100%;">
|
|
|
+ <van-search v-model="keyword" shape="round" @input="onLoad" placeholder="请输入车牌号或驾驶员姓名"/>
|
|
|
+ <div v-if="cloneTruckList.length <= 0" class="list-404" style="border-top: 1px solid #dfdfdf;">没有找到"{{ keyword }}"的相关车辆</div>
|
|
|
+ <div class="list-wrap__item" v-for="(item, index) in cloneTruckList" :key="index" style="border-top: 1px solid #dfdfdf;">
|
|
|
+ <div class="item-header">
|
|
|
+ <div class="text-bold">{{ item.carNumber }}<span class="text-normal">({{ item.linked === 1 ? '其他' : '自营' }})</span></div>
|
|
|
+ <div>今日里程<span class="color-blue">{{ item.mileage || '-' }}</span>公里</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="list-icon">
|
|
|
- <van-icon name="bars" size="30" style="margin-top: 10px;" />
|
|
|
- <div style="font-size: 12px;">列表</div>
|
|
|
- </div>
|
|
|
- <!--头部查询条件-->
|
|
|
-<!-- <div class="map-search">
|
|
|
- <div class="search-bar">
|
|
|
- <img src="@/assets/user.png" @click="userInfo" />
|
|
|
- <van-dropdown-menu>
|
|
|
- <van-dropdown-item v-model="finds.districtId" :options="districtList" @change="(value) => { initGasstationList(value, 'area') }" />
|
|
|
- <van-dropdown-item v-model="finds.gasType" :options="gasstationType" @change="initGasstationList" />
|
|
|
- </van-dropdown-menu>
|
|
|
- </div>
|
|
|
- <div class="search-icon" @click="searchGasstationList"><van-icon name="search" /></div>
|
|
|
- </div>-->
|
|
|
- <!--底部标签栏-->
|
|
|
-<!-- <van-tabbar v-model="active">
|
|
|
- <van-tabbar-item icon="gem-o" @click="meClickEvent">我的贡献</van-tabbar-item>
|
|
|
- <van-tabbar-item icon="plus" @click="gasstationClickEvent">新增站点</van-tabbar-item>
|
|
|
- <van-tabbar-item icon="chart-trending-o" @click.native="dataAnalysisEvent('open')">智能分析</van-tabbar-item>
|
|
|
- </van-tabbar>-->
|
|
|
- <!--地标文字-->
|
|
|
-<!-- <van-checkbox v-model="markerTitleStatus" shape="square" checked-color="#2765E2" @change="markerLabelEvent">地标文字</van-checkbox>-->
|
|
|
- <!--加气站列表-->
|
|
|
-<!-- <van-popup v-model="gasstationInfoStatus" position="right" :style="{ width: '100%', height: '100%' }">
|
|
|
- <div class="map-control-warp">
|
|
|
- <div class="map-card">
|
|
|
- <div class="card-control">
|
|
|
- <van-search v-model="filterGasstationName" show-action placeholder="请输入加气站">
|
|
|
- <template #action>
|
|
|
- <div @click="searchBackEvent">返回</div>
|
|
|
- </template>
|
|
|
- </van-search>
|
|
|
- <div class="map-list-pagination">共 {{pages.total}} 站点</div>
|
|
|
- <ul class="card-list" :style="{ height: (mapHeight - 55) + 'px'}">
|
|
|
- <li v-for="(item, index) of currGasstationList" :key="index" :class="'icon-' + (item.gasType || 2004)" @click="markerClickEvent(item)">
|
|
|
- <div class="title">
|
|
|
- <div>
|
|
|
- <span class="item-name text-overflow-ellipsis">{{gasstationNickName(item)}}</span>
|
|
|
- <span class="item-tag">[{{getGasstationTypeName(item.gasType)}}]</span>
|
|
|
- </div>
|
|
|
- <div class="item-type" v-if="item.gasType === 1001">自</div>
|
|
|
- <div class="item-type" v-else-if="item.gasType === 1002">合</div>
|
|
|
- <div class="item-type" v-else-if="item.gasType === 1003">盟</div>
|
|
|
- </div>
|
|
|
- <div class="address text-overflow-ellipsis">{{item.address}}</div>
|
|
|
- <div class="content">
|
|
|
- <span>
|
|
|
- <span class="text-bold-number">{{ (gasstationCheckType(item.gasType) ? item.offlineGasQty : (item.gasQty + item.offlineGasQty)) | formateZeroToBar('no') }}</span>吨<span class="time">({{ (gasstationCheckType(item.gasType) ? item.offlineGasQtyDate : item.gasQtyDate) | formateTData('date') }})</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span class="text-bold-number">{{ (gasstationCheckType(item.gasType) ? item.offlinePrice : item.price) | currency }}</span>/公斤<span class="time">({{ (gasstationCheckType(item.gasType) ? item.offlinePriceDate : item.priceDate) | formateTData('date') }})</span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <div class="item-info">
|
|
|
+ <div class="label item-info__user" style="padding-left: 0" v-if="item.truckDriverList.length > 0">
|
|
|
+ <div class="driver-wrap">
|
|
|
+ <div v-for="(driver, driverIndex) in item.truckDriverList" :key="driverIndex" class="driver-list">{{ truckToDriverUser(driver) }}</div>
|
|
|
+ </div>
|
|
|
+ <div>{{ truckToDriverMobile(item.truckDriverList[0].driverName) }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="label speed">
|
|
|
+ <span>{{ item.speed || '-' }}</span>公里/小时
|
|
|
+ <span class="status" :class="'status__' + item.speedStatus">{{ truckStatusList[item.speedStatus] }}</span>
|
|
|
</div>
|
|
|
+ <div class="label local">{{ item.currAddress || '-' }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </van-popup>-->
|
|
|
- <!--某个站点单击显示信息-->
|
|
|
-<!-- <van-popup v-model="currentWindow.markerWindowStatus" class="bmap-info-window-custom" round position="bottom">
|
|
|
- <marker-window v-if="currentWindow.markerWindowStatus" :rowData="currentWindow.data" :isNotDxStatus="gasstationCheckType(currentWindow.data.gasType)"></marker-window>
|
|
|
- </van-popup>-->
|
|
|
- <!--区域数据分析-->
|
|
|
-<!-- <van-popup v-model="markerDataAnalysisStatus" position="bottom">
|
|
|
- <area-data-analysis v-if="markerDataAnalysisStatus" :name="analysisDistrictName" :finds="finds"></area-data-analysis>
|
|
|
- </van-popup>-->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import 'vue-bmap-gl/dist/style.css'
|
|
|
-// import { $districtList, $userFindConfigAreaList } from '@/service/user'
|
|
|
-// import { $gasdataGasstationList } from '@/service/gasdata'
|
|
|
-import { currency, formateZeroToBar } from '@/utils/filters'
|
|
|
-// import { MarkerWindow, AreaDataAnalysis } from './components'
|
|
|
-import { mapJsonData } from '@/mock/map'
|
|
|
-
|
|
|
+import axios from 'axios'
|
|
|
+import { $gasdataGaugeAll } from '@/service/gasdata'
|
|
|
export default {
|
|
|
name: 'battle',
|
|
|
- // components: { MarkerWindow, AreaDataAnalysis },
|
|
|
data() {
|
|
|
return {
|
|
|
- mapStyle: {
|
|
|
- width: '100%',
|
|
|
- height: '100%'
|
|
|
+ truckStatusList: {
|
|
|
+ 0: '行驶中',
|
|
|
+ 1: '静止中',
|
|
|
+ 2: '离线中'
|
|
|
},
|
|
|
- center: [116.23228, 35.7127],
|
|
|
- zoom: 7,
|
|
|
- mapHeight: 400,
|
|
|
- cardList: [{
|
|
|
- name: '在线/总量',
|
|
|
- value: '55/100',
|
|
|
- unit: '辆'
|
|
|
- }, {
|
|
|
- name: '今日总里程',
|
|
|
- value: '600',
|
|
|
- unit: '公里'
|
|
|
- }, {
|
|
|
- name: '今日总耗能',
|
|
|
- value: '234.12',
|
|
|
- unit: '公斤'
|
|
|
- }, {
|
|
|
- name: '今日总减碳',
|
|
|
- value: '123.56',
|
|
|
- unit: '公斤'
|
|
|
- }],
|
|
|
- tradeStatus: 0,
|
|
|
- tradeStatusList: [
|
|
|
- { text: '全经营类型', value: 0 },
|
|
|
- { text: '自营', value: 1 },
|
|
|
- { text: '外协', value: 2 }
|
|
|
- ],
|
|
|
- runStatus: 0,
|
|
|
- runStatusList: [
|
|
|
- { text: '全行驶状态', value: 0 },
|
|
|
- { text: '行驶', value: 1 },
|
|
|
- { text: '静止', value: 2 },
|
|
|
- { text: '离线', value: 3 }
|
|
|
- ]
|
|
|
+ keyword: '',
|
|
|
+ truckList: [],
|
|
|
+ cloneTruckList: []
|
|
|
}
|
|
|
},
|
|
|
watch: {},
|
|
|
computed: {},
|
|
|
- created() {},
|
|
|
- mounted() {
|
|
|
- // 重置地图高度
|
|
|
- this.mapHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
|
|
|
+ created() {
|
|
|
+ this.dragendPointer()
|
|
|
},
|
|
|
+ mounted() {},
|
|
|
+ beforeDestroy() {},
|
|
|
methods: {
|
|
|
- // 初始化数据
|
|
|
- initData() {
|
|
|
- // 初始化区域list
|
|
|
- this.initDistrictList()
|
|
|
- // 加气站list
|
|
|
- this.initGasstationList()
|
|
|
- // 获取地图经纬度数据
|
|
|
- this.pointList = mapJsonData('all')
|
|
|
- },
|
|
|
- districtToAreaList() {
|
|
|
- /* $userFindConfigAreaList({ districtId: this.finds.districtId }).then(response => {
|
|
|
- const tmpPointList = []
|
|
|
- const data = response || []
|
|
|
- const featuresList = this.pointList.features || []
|
|
|
-
|
|
|
- data.forEach(item => {
|
|
|
- for (let i = 0; i < featuresList.length; i++) {
|
|
|
- if (trim(featuresList[i].properties.name) === trim(item.areaName)) {
|
|
|
- const tmpCoordList = featuresList[i].geometry.coordinates || []
|
|
|
- tmpCoordList.forEach(coord => {
|
|
|
- tmpPointList.push(...new Set(coord))
|
|
|
- })
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- this.polygon.path = tmpPointList
|
|
|
- }) */
|
|
|
- },
|
|
|
- markerLabelEvent() {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.gasstationList.forEach(item => {
|
|
|
- item.markerStatus = !this.markerTitleStatus
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- initDistrictList() {
|
|
|
- /* $districtList({}).then(response => {
|
|
|
- const tmpRes = response || []
|
|
|
+ onLoad() {
|
|
|
+ if (this.keyword) {
|
|
|
+ this.cloneTruckList = this.truckList.filter(item => {
|
|
|
+ const tmpKeyword = item.tmpKeyword.toLocaleUpperCase()
|
|
|
+ const inputKeyword = this.keyword.toLocaleUpperCase()
|
|
|
|
|
|
- let pointX = 0
|
|
|
- let pointY = 0
|
|
|
- tmpRes.forEach((item, index) => {
|
|
|
- item.value = item.districtId
|
|
|
- item.text = item.districtName
|
|
|
- item.points = this.points[item.districtName]
|
|
|
- pointX += item.points[0]
|
|
|
- pointY += item.points[1]
|
|
|
+ return tmpKeyword.indexOf(inputKeyword) !== -1
|
|
|
})
|
|
|
- if (tmpRes.length > 0) {
|
|
|
- this.center = [pointX / tmpRes.length, pointY / tmpRes.length]
|
|
|
- }
|
|
|
- tmpRes.unshift({ value: '', text: '全区域', points: this.center })
|
|
|
- this.districtList = tmpRes
|
|
|
- }) */
|
|
|
- },
|
|
|
- setMapCenter(value) {
|
|
|
- this.districtList.forEach(item => {
|
|
|
- if (value === item.value) {
|
|
|
- this.center = item.points
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- initGasstationList(value = '', type = '') {
|
|
|
- // const params = this.finds
|
|
|
-
|
|
|
- if (type === 'area') {
|
|
|
- this.districtToAreaList()
|
|
|
- }
|
|
|
- // 设置中心位置
|
|
|
- this.setMapCenter(value)
|
|
|
- this.filterGasstationName = ''
|
|
|
- this.dataAnalysisEvent('close')
|
|
|
- /* $gasdataGasstationList(params).then(response => {
|
|
|
- const res = response || []
|
|
|
- // 通过接口获取的数据，不可变
|
|
|
- this.gasstationList = [...new Set(res)]
|
|
|
- // 可通过加气站名过来
|
|
|
- this.currGasstationList = [...new Set(res)]
|
|
|
- this.pages.total = this.gasstationList.length
|
|
|
- }) */
|
|
|
- },
|
|
|
- async dataAnalysisEvent(type) {
|
|
|
- if (type === 'open') {
|
|
|
- if (this.markerDataAnalysisStatus) return false
|
|
|
-
|
|
|
- this.markerDataAnalysisStatus = true
|
|
|
} else {
|
|
|
- this.markerDataAnalysisStatus = false
|
|
|
+ this.cloneTruckList = [...this.truckList]
|
|
|
}
|
|
|
},
|
|
|
- // 获取加气站类型
|
|
|
- getGasstationTypeName(type) {
|
|
|
- let name = '-'
|
|
|
-
|
|
|
- this.gasstationType.forEach(item => {
|
|
|
- if (type === item.value) {
|
|
|
- name = this.gasstationCheckType(type) ? item.text : '大象加气'
|
|
|
- }
|
|
|
+ async queryCurrAddress(location) {
|
|
|
+ const data = await axios.post(process.env.VUE_APP_BAIDU_URL + '?output=json&ak=BrOh2W3mLGpsn4ML9k48XLfE4hXFAuKK&coordtype=wgs84ll&location=' + location).then(response => {
|
|
|
+ return response.data
|
|
|
})
|
|
|
|
|
|
- return name
|
|
|
- },
|
|
|
- gasstationCheckType(type) {
|
|
|
- if (type === 2001 || type === 2002 || type === 2003 || type === 2004) {
|
|
|
- return true
|
|
|
+ if (data.hasOwnProperty('result')) {
|
|
|
+ return data.result.addressComponent
|
|
|
+ } else {
|
|
|
+ return '-'
|
|
|
}
|
|
|
-
|
|
|
- return false
|
|
|
- },
|
|
|
- filterGasstationList(value) {
|
|
|
- this.currGasstationList = this.gasstationList.filter(item => item.nickName && item.nickName.indexOf(value) !== -1)
|
|
|
},
|
|
|
- searchBackEvent() {
|
|
|
- this.gasstationInfoStatus = false
|
|
|
+ truckToDriverUser(driver) {
|
|
|
+ // 解释司机个人信息
|
|
|
+ const driverUserInfo = driver.driverName ? driver.driverName.split('/') : []
|
|
|
+ return driverUserInfo.length >= 1 ? driverUserInfo[0] : '-'
|
|
|
},
|
|
|
- markerPopVisibleNode() {
|
|
|
- const dom = document.getElementsByClassName('BMap_bubble_pop')[0]
|
|
|
- const shadow = document.getElementsByClassName('shadow')[0]
|
|
|
- let currClass = dom.getAttribute('class')
|
|
|
- let currShadowClass = shadow.getAttribute('class')
|
|
|
+ truckToDriverMobile(info) {
|
|
|
+ if (info.indexOf('/') !== -1) {
|
|
|
+ const userinfo = info.split('/')
|
|
|
|
|
|
- if (this.currentWindow.markerWindowStatus) {
|
|
|
- currClass = currClass.replace('bmap-info-window-hide', '')
|
|
|
- currShadowClass = currShadowClass.replace('bmap-info-window-hide', '')
|
|
|
+ return userinfo[1] || '-'
|
|
|
} else {
|
|
|
- currClass = currClass.concat(' bmap-info-window-hide')
|
|
|
- currShadowClass = currShadowClass.concat(' bmap-info-window-hide')
|
|
|
+ return '-'
|
|
|
}
|
|
|
-
|
|
|
- dom.setAttribute('class', currClass)
|
|
|
- shadow.setAttribute('class', currShadowClass)
|
|
|
},
|
|
|
- mapMarkIcon(item) {
|
|
|
- // let imageURL = require('@/assets/battle/g_map_icon_default.png')
|
|
|
- //
|
|
|
- // if (item.gasType === 100 || item.gasType === 1001 || item.gasType === 1002 || item.gasType === 1003) {
|
|
|
- // imageURL = require('@/assets/battle/g_map_icon_1.png')
|
|
|
- // } else if (item.gasType === 2001) {
|
|
|
- // imageURL = require('@/assets/battle/g_map_icon_3.png')
|
|
|
- // } else if (item.gasType === 2002) {
|
|
|
- // imageURL = require('@/assets/battle/g_map_icon_2.png')
|
|
|
- // } else if (item.gasType === 2003) {
|
|
|
- // imageURL = require('@/assets/battle/g_map_icon_4.png')
|
|
|
- // } else if (item.gasType === 2004) {
|
|
|
- // imageURL = require('@/assets/battle/g_map_icon_default.png')
|
|
|
- // }
|
|
|
- // return { url: imageURL, size: [20, 26] }
|
|
|
- },
|
|
|
- // 点击某个点弹框
|
|
|
- markerClickEvent(item) {
|
|
|
- this.infoWindowClose(item)
|
|
|
- this.infoWindowOpen(item)
|
|
|
- },
|
|
|
- // 关闭窗口
|
|
|
- infoWindowClose(item) {
|
|
|
- this.currentWindow.markerWindowStatus = false
|
|
|
- },
|
|
|
- // 打开窗口
|
|
|
- infoWindowOpen(item) {
|
|
|
- this.currentWindow.markerWindowStatus = false
|
|
|
- // 统计图
|
|
|
- this.$nextTick(() => {
|
|
|
- this.currentWindow.data = item
|
|
|
+ dragendPointer() {
|
|
|
+ $gasdataGaugeAll({}).then(response => {
|
|
|
+ const data = response.carMonitorVos
|
|
|
|
|
|
- this.currentWindow.markerWindowStatus = true
|
|
|
- })
|
|
|
- },
|
|
|
- markerLabelContent(item) {
|
|
|
- let html = ''
|
|
|
+ this.truckList = data
|
|
|
+ data.forEach(async item => {
|
|
|
+ // 根据金纬度获取地理位置信息
|
|
|
+ const addressInfo = await this.queryCurrAddress(item.lat + ',' + item.lng)
|
|
|
+ const currAddress = addressInfo.province + addressInfo.city + addressInfo.district + addressInfo.street
|
|
|
|
|
|
- html += '<div class="marker-label-tag"><div class="title">' + this.gasstationNickName(item) + '</div><div class="detail"><div class="number"><span class="text-bold-number">' + formateZeroToBar(item.gasQty + item.offlineGasQty, 'no') + '</span> 吨</div><div class="money"><span class="text-bold-number">' + currency((this.gasstationCheckType(item.gasType) ? item.offlinePrice : item.price)) + '</span>/公斤</div></div></div>'
|
|
|
+ if (item.hasOwnProperty('currAddress')) {
|
|
|
+ item.currAddress = currAddress
|
|
|
+ } else {
|
|
|
+ this.$set(item, 'currAddress', currAddress)
|
|
|
+ }
|
|
|
|
|
|
- return html
|
|
|
- },
|
|
|
- searchGasstationList() {
|
|
|
- this.gasstationInfoStatus = true
|
|
|
- },
|
|
|
- gasstationNickName(item) {
|
|
|
- return item.nickName || '-'
|
|
|
- },
|
|
|
- meClickEvent() {
|
|
|
- this.$router.push({ path: '/me' })
|
|
|
- },
|
|
|
- userInfo() {
|
|
|
- this.$router.push({ path: '/user' })
|
|
|
- },
|
|
|
- gasstationClickEvent() {
|
|
|
- this.$router.push({ path: '/form', query: { type: 'add' } })
|
|
|
+ // 解释司机信息
|
|
|
+ const driverInfo = []
|
|
|
+ if (item.hasOwnProperty('truckDriverList') && item.truckDriverList.length > 0) {
|
|
|
+ item.truckDriverList.forEach(driver => {
|
|
|
+ driverInfo.push(this.truckToDriverUser(driver))
|
|
|
+ })
|
|
|
+ }
|
|
|
+ driverInfo.push(item.carNumber)
|
|
|
+
|
|
|
+ if (item.hasOwnProperty('tmpKeyword')) {
|
|
|
+ item.tmpKeyword = driverInfo.join('')
|
|
|
+ } else {
|
|
|
+ this.$set(item, 'tmpKeyword', driverInfo.join(''))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.cloneTruckList = [...this.truckList]
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
王贵旺
