优化

MrShi

4 天以前 3a154bdb0a5aaa2c0ac3eac95a6ba747068bd454

 admin/src/components/business/OperaJkSketchLineMapWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,286 @@
<template>
  <GlobalWindow
    :title="title"
    width="100%"
    :visible.sync="visible"
  ><div style="display:flex;">
    <div style="width: 40%;">
      <TableLayout >
        <!-- æœç´¢è¡¨å• -->
        <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="" inline>
          <el-form-item label="" prop="name" style="width: 100px;">
            <el-input v-model="searchForm.name" placeholder="客户名称" @keypress.enter.native="search"></el-input>
          </el-form-item>
          <el-form-item label="" prop="code"  style="width: 100px;">
            <el-input v-model="searchForm.code" placeholder="客户简码" @keypress.enter.native="search"></el-input>
          </el-form-item>
          <section>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </section>
        </el-form>
        <!-- è¡¨æ ¼å’Œåˆ†é¡µ -->
        <template v-slot:table-wrap>
          <el-table
              v-loading="isWorking.search"
              :data="tableData.list"
              stripe
              @selection-change="handleSelectionChange"
          >
            <el-table-column prop="sortnum" label="客户序号" min-width="80px"></el-table-column>
            <el-table-column prop="code" label="客户简码" min-width="120px">
              <template scope="{row}">
                <span  title="点击查看" style="cursor: pointer;" class="blue" @click="showDetail(row)">{{row.code}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="客户名称" min-width="120px">
              <template scope="{row}">
                <span title="点击查看" style="cursor: pointer;"  class="blue" @click="showDetail(row)">{{row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalNum" label="送货量(条)" min-width="120px"></el-table-column>
          </el-table>
          <pagination
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
              :pagination="tableData.pagination"
              style="width: 60%;"
          >
          </pagination>
          <el-button @click="visible=false" style="position: fixed;bottom: 10px;right: 20px;">返回</el-button>
        </template>
      </TableLayout>
    </div>
    <div  style="width: 60%;">
      <div id="container" style="width: 60%"></div>
      <div id="panel" style='position: absolute; right: 10px;top: 10px;height: 480px;width: 300px;z-index: 100;overflow: auto;'></div>
    </div>
  </div>

    <template   v-slot:footer>
      <el-button @click="visible=false">返回</el-button>
    </template>
  </GlobalWindow>
</template>

<script>
import BaseTable from '@/components/base/BaseTable'
import TableLayout from '@/layouts/TableLayout'
import Pagination from '@/components/common/Pagination'
import GlobalWindow from '@/components/common/GlobalWindow'
import AMapLoader from '@amap/amap-jsapi-loader'
import greenIcon from '@/assets/icons/location-green.png'
import blueIcon from '@/assets/icons/location-blue.png'
import redIcon from '@/assets/icons/location-red.png'
export default {
  name: 'OperaJkSketchMapWindow',
  extends: BaseTable,
  components: { GlobalWindow, Pagination, TableLayout },
  data () {
    return {
      // è¡¨å•æ•°æ®
      visible: false,
      title: '',
      searchForm: {
        sketchLineId: '',
        name: '',
        code: ''
      },
      dataList: [],
      infoWindow: null,
      locations: [],
      map: null,
      model: {
      }
    }
  },
  created () {
    this.config({
      module: '交控-线路优化线路客户记录信息表',
      api: '/business/jkSketchCustomer',
      'field.id': 'id',
      'field.main': 'id'
    })
  },
  methods: {
    open (title, row) {
      this.title = title + (row.lineName)
      this.visible = true
      this.dataList = []
      this.model = row
      this.locations = []
      this.infoWindows = []
      this.initAMap()
      this.searchForm.sketchLineId = row.id
      this.visible = true
      this.tableData = {
        // å·²é€‰ä¸­çš„数据
        selectedRows: [],
        // æŽ’序的字段
        sorts: [],
        // å½“前页数据
        list: [],
        // åˆ†é¡µ
        pagination: {
          pageIndex: 1,
          pageSize: 10,
          total: 0
        }
      }
      this.search()
    },
    showDetail (row) {
      console.error('对不起，该客户定位信息不完善！')
      if (!this.map) {
        return
      }
      if (!row.longitude || !row.latitude) {
        this.$message.error('对不起，该客户定位信息不完善！')
        return
      }
      this.closeInfo()
      // æž„建信息窗体中显示的内容
      var info = []
      info.push('<div style="width: 400px;"><div style="width: 100%;font-size: 18px;border-bottom: 1px solid #eeeeee;padding-bottom: 6px;"> <b>客户信息</b> </div> ')
      info.push('<div style="padding:0px 0px 0px 4px;"><span><b>姓名：' + row.name + '</b><b style="color:red;">【' + row.code + '】</b></span> ')
      info.push('<span style="margin-top: 5px;">序号：' + row.sortnum + '</span> ')
      info.push('<span style="margin-top: 5px;">地址：' + row.location + '</span></div>')
      info.push('</div>')
      this.infoWindow = new AMap.InfoWindow({
        content: info.join('<br/>') // ä½¿ç”¨é»˜è®¤ä¿¡æ¯çª—体框样式，显示信息内容
      })
      // this.infoWindow.on('open',showInfoOpen)
      this.infoWindow.on('close', this.showInfoClose)
      this.infoWindow.open(this.map, new AMap.LngLat(row.longitude, row.latitude))
    },
    closeInfo () {
      if (this.infoWindow) {
        this.infoWindow.close()
      }
    },
    showInfoClose () {
    },
    loadCustomer () {
      var that = this
      this.api.allMapList({
        sketchLineId: this.model.id
      }).then(res => {
        that.dataList = res || []
        that.locations = []
        that.dataList.forEach((item, index) => {
          var allsteps = []
          allsteps.push([item.startLogitude, item.startLatitude])
          const steps = (item.steps || '').split(';')
          if (index != that.dataList.length - 1) {
            steps.forEach(item1 => {
              const ll = (item1 || '').split(',')
              allsteps.push(ll)
            })
            allsteps.push([item.endLogitude, item.endLatitude])
          }
          try {
            /*  console.log(item)
                var driving = new AMap.Driving({
                  map: that.map,
                  panel: 'panel'
                })
                driving.search(new AMap.LngLat(item.startLogitude, item.startLatitude), new AMap.LngLat(item.endLogitude, item.endLatitude), function (status, result) {
                  if (status === 'complete') {
                    console.log('绘制驾车路线完成')
                  } else {
                    console.error('获取驾车数据失败：' + result)
                  }
                }) */
          } catch (e) {

          }
          var color = index === that.dataList.length - 1 ? '#a10e0e' : '#157713'
          var polyline = new AMap.Polyline({
            path: [allsteps],
            isOutline: true,
            outlineColor: color || '#157713',
            borderWeight: 1,
            strokeColor: color || '#157713',
            strokeOpacity: 1,
            strokeWeight: 2,
            // æŠ˜çº¿æ ·å¼è¿˜æ”¯æŒ 'dashed'
            strokeStyle: 'solid',
            // strokeStyle是dashed时有效
            strokeDasharray: [10, 5],
            lineJoin: 'round',
            lineCap: 'round',
            zIndex: 100
          })

          that.map.add([polyline])
          that.map.setFitView()

          const icon = new AMap.Icon({
            size: new AMap.Size(30, 50), // å›¾æ ‡å°ºå¯¸
            image: index === 0 ? greenIcon : (index === that.dataList.length - 1 ? redIcon : blueIcon)
          })

          console.log("=====index====",index)
          var marker = new AMap.Marker({
            position: new AMap.LngLat(item.startLogitude, item.startLatitude),
            icon: icon,
            anchor: 'bottom-center',
            offset: new AMap.Pixel(0, 0)
          })
          // var title = (index == 0 ? '园区' : (index + '.' + item.name + (' ' + item.location || ''))) + '，' + (index != that.dataList.length - 1 ? '距下一站：' : '返回园区：') + ((item.distance || 0) / 1000) + '公里'
          //  marker.setTitle(title)
          var contnet = '<div>' + (index == 0 ? '园区' : (index + '.' + item.name)) + '</div>'
          marker.setLabel({
            direction: 'right',
            offset: new AMap.Pixel(0, 0),
            content: contnet
          })
          marker.setMap(that.map)
          // that.locations.push(allsteps)
        })
      })
    },
    initAMap () {
      var that = this
      AMapLoader.load({
        key: process.env.VUE_APP_AMAP_KEY,
        version: '2.0',
        plugins: ['AMap.ToolBar', 'AMap.Driving'],
        AMapUI: {
          version: '1.1',
          plugins: []
        },
        Loca: {
          version: '2.0' // æ•°æ®å¯è§†åŒ–
        }
      }).then((AMap) => {
        that.map = new AMap.Map('container', {
          viewMode: '2D', // é»˜è®¤ä½¿ç”¨ 2D æ¨¡å¼
          zoom: 20, // åˆå§‹åŒ–地图层级
          center: [118.39, 31.28] // åˆå§‹åŒ–地图中心点
        })
        this.loadCustomer()
      }).catch(e => {
        console.log(e)
      })
    },
    getRandomColor (index, total) {
      const r = 21
      // const g = 80 +(index*50/total);
      const g = 120
      const b = 19
      return `rgb(${r}, ${g}, ${b})`
    }
  }
}
</script>
<style>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 90%;
  position: absolute;
}

</style>