lngtruck/src/views/home/list.vue

<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>