|
|
@@ -0,0 +1,342 @@
|
|
|
+<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>
|
|
|
+ </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>
|
|
|
+ </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>
|
|
|
+</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'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'battle',
|
|
|
+ // components: { MarkerWindow, AreaDataAnalysis },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ mapStyle: {
|
|
|
+ width: '100%',
|
|
|
+ height: '100%'
|
|
|
+ },
|
|
|
+ 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 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ computed: {},
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ // 重置地图高度
|
|
|
+ this.mapHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
|
|
|
+ },
|
|
|
+ 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 || []
|
|
|
+
|
|
|
+ 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]
|
|
|
+ })
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取加气站类型
|
|
|
+ getGasstationTypeName(type) {
|
|
|
+ let name = '-'
|
|
|
+
|
|
|
+ this.gasstationType.forEach(item => {
|
|
|
+ if (type === item.value) {
|
|
|
+ name = this.gasstationCheckType(type) ? item.text : '大象加气'
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ return name
|
|
|
+ },
|
|
|
+ gasstationCheckType(type) {
|
|
|
+ if (type === 2001 || type === 2002 || type === 2003 || type === 2004) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ filterGasstationList(value) {
|
|
|
+ this.currGasstationList = this.gasstationList.filter(item => item.nickName && item.nickName.indexOf(value) !== -1)
|
|
|
+ },
|
|
|
+ searchBackEvent() {
|
|
|
+ this.gasstationInfoStatus = false
|
|
|
+ },
|
|
|
+ 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')
|
|
|
+
|
|
|
+ if (this.currentWindow.markerWindowStatus) {
|
|
|
+ currClass = currClass.replace('bmap-info-window-hide', '')
|
|
|
+ currShadowClass = currShadowClass.replace('bmap-info-window-hide', '')
|
|
|
+ } else {
|
|
|
+ currClass = currClass.concat(' bmap-info-window-hide')
|
|
|
+ currShadowClass = currShadowClass.concat(' bmap-info-window-hide')
|
|
|
+ }
|
|
|
+
|
|
|
+ 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
|
|
|
+
|
|
|
+ this.currentWindow.markerWindowStatus = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ markerLabelContent(item) {
|
|
|
+ let html = ''
|
|
|
+
|
|
|
+ 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>'
|
|
|
+
|
|
|
+ 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' } })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
王贵旺
