tmr-admin/.svn/pristine/b5/b53fbd07c68aa2b7faa093b646f270cc851e49dc.svn-base

<template>
  <div class="app-container">
    <!-- <h1>牧场</h1> -->
    <div class="search">
      <el-date-picker v-model="table.getdataListParm.parammaps.date" :clearable="false" type="date" placeholder="选择日期" />
      <el-select v-model="table.getdataListParm.parammaps.lpplantype" placeholder="设备类型" class="filter-item" style="width: 120px;" clearable>
        <el-option v-for="item in equipmentTypeList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button class="successBorder" @click="handleSearch">查询</el-button>
      <el-button class="successBorder" @click="handleRefresh">重置</el-button>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <h4>设备列表</h4>
        <div class="table">
          <el-table
            :key="table.tableKey"
            v-loading="table.listLoading"
            element-loading-text="给我一点时间"
            :data="table.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            :height="table1Height"
            @row-click="rowClick1"
          >
            <el-table-column label="设备类型" min-width="90px" align="center" prop="field1" />
            <el-table-column label="设备名称" min-width="80px" align="center" prop="field2" />
            <el-table-column label="GPS设备名称" min-width="90px" align="center" prop="field3" />
            <el-table-column label="总时长(分钟)" min-width="100px" align="center" prop="field4" />
          </el-table>
        </div>
        <h4>设备详情</h4>
        <div class="table">
          <el-table
            :key="table2.tableKey"
            v-loading="table2.listLoading"
            element-loading-text="给我一点时间"
            :data="table2.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            :height="table1Height"
            @row-click="rowClick2"
          >
            <el-table-column label="设备名称" min-width="90px" align="center" prop="field1" />
            <el-table-column label="开始时间" min-width="80px" align="center" prop="field2" />
            <el-table-column label="结束时间" min-width="90px" align="center" prop="field3" />
            <el-table-column label="时长(分钟)" min-width="100px" align="center" prop="field4" />
          </el-table>
        </div>
      </el-col>
      <el-col :span="16" class="map">
        <h4>设备轨迹图</h4>
        <div v-if="isShow" style="text-align: center;line-height: 400px;">设备轨迹图加载失败，请刷新加载设备轨迹图</div>
        <div v-else id="yzMap" style="min-height: 400px;" />
      </el-col>
    </el-row>

  </div>

</template>

<script>
import MapInit from '@/components/show/MapInit.js'
import { GetDataByName } from '@/api/common'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
export default {
  name: 'EquipmentRunningTrack',
  data() {
    return {
      equipmentTypeList: [{ id: 0, name: '自走式TMR' }, { id: 1, name: '撒料设备TMR' }, { id: 2, name: '铲车' }, { id: 3, name: '推料车' }, { id: 4, name: '推粪车' }],
      // TMR设备列表
      table: {
        getdataListParm: {
          name: 'getprocessAnalysis',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            date: parseTime(new Date(), '{y}-{m}-{d}'),
            iscompleted: '',
            tmrtname: '',
            lpplantype: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true
      },
      table2: {
        getdataListParm: {
          name: 'getprocessAnalysisStr',
          page: 1,
          offset: 1,
          pagecount: 1,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            id: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true
      },
      table3: {
        getdataListParm: {
          name: 'getprocessAnalysisStr',
          page: 1,
          offset: 1,
          pagecount: 1,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            id: ''
          }
        },
        tableKey: 0,
        // initializationMap: [116.40769, 39.91945],
        // startLngLatMap: [116.380967, 39.953285],
        // endLngLatMap: [116.424374, 39.914668],
        initializationMap: '',
        startLngLatMap: '',
        endLngLatMap: '',
        pointsList: [],
        total: 0,
        listLoading: true
      },
      table1Height: (document.documentElement.clientHeight - 85 - 250) / 2,
      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
      cellStyle: { padding: 0 + 'px' },
      map: '', drivingRoute: '',
      zoom: 16.5,
      startIcon: 'http://lbs.tianditu.gov.cn/images/bus/start.png',	// 起点图标
      endIcon: 'http://lbs.tianditu.gov.cn/images/bus/end.png', // 终点图标
      line: null,
      points: [],
      isShow: false
    }
  },
  created() {
    this.getList()
    console.log(document.documentElement.clientHeight - 85 - 250)
  },
  methods: {
    getList() {
      this.table.listLoading = true
      GetDataByName(this.table.getdataListParm).then(response => {
        console.log('TMR设备列表table数据', response.data.list)
        // if (response.data.list !== null) {
        //   this.table.list = response.data.list
        // } else {
        //   this.table.list = []
        // }
        this.table.list = [
          { 'field1': '自走式TMR', 'field2': '1', 'field3': '自走式GPS', 'field4': '100', 'id': '1' },
          { 'field1': '铲车', 'field2': '1号铲车', 'field3': '铲车GPS', 'field4': '60', 'id': '2' }
        ]
        this.table2.getdataListParm.parammaps.id = this.table.list[0].id
        this.getList2()
        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    },
    handleSearch() {
      this.table.getdataListParm.offset = 1
      this.getList()
    },
    handleRefresh() {
      console.log('点击了重置')
      this.table.getdataListParm.offset = 1
      this.getList()
    },
    rowClick1(row, column, event) {
      if (row.id == '1') {
        this.table2.getdataListParm.parammaps.id = '1'
      } else {
        this.table2.getdataListParm.parammaps.id = '2'
      }
      this.getList2()
    },

    getList2() {
      this.table2.listLoading = false
      GetDataByName(this.table2.getdataListParm).then(response => {
        console.log('过程详情table数据', response.data.list)
        // if (response.data.list !== null) {
        //   this.table2.list = response.data.list
        // } else {
        //   this.table2.list = []
        // }
        if (this.table2.getdataListParm.parammaps.id == '1') {
          this.table2.list = [
            { 'field1': '1', 'field2': '05:29:43', 'field3': '05:37:47', 'field4': '8', 'id': '1' },
            { 'field1': '1', 'field2': '05:37:50', 'field3': '05:40:33', 'field4': '2.6', 'id': '2' }
          ]
        } else {
          this.table2.list = [
            { 'field1': '1号铲车', 'field2': '09:01:28', 'field3': '09:04:42', 'field4': '3.2', 'id': '3' }
          ]
        }
        this.table3.getdataListParm.parammaps.id = this.table2.list[0].id
        this.getList3()
        setTimeout(() => {
          this.table2.listLoading = false
        }, 100)
      })
    },
    rowClick2(row, column, event) {
      if (row.id == '1') {
        this.table3.getdataListParm.parammaps.id = '1'
      } else if (row.id == '2') {
        this.table3.getdataListParm.parammaps.id = '2'
      } else {
        this.table3.getdataListParm.parammaps.id = '3'
      }
      if (this.table3.getdataListParm.parammaps.id == '1') {
        this.table3.initializationMap = [117.88, 33.82]
        this.table3.pointsList = [
          { 'longitude': 117.8826770, 'latitude': 33.8208131 },
          { 'longitude': 117.8826372, 'latitude': 33.8213032 },
          { 'longitude': 117.8826971, 'latitude': 33.8217033 },
          { 'longitude': 117.8827081, 'latitude': 33.8220751 },
          { 'longitude': 117.8829982, 'latitude': 33.8220152 },
          { 'longitude': 117.8831583, 'latitude': 33.8220853 },
          { 'longitude': 117.8833981, 'latitude': 33.8221151 },
          { 'longitude': 117.8835982, 'latitude': 33.8219852 },
          { 'longitude': 117.8839703, 'latitude': 33.8220433 },
          { 'longitude': 117.8838709, 'latitude': 33.8222431 },
          { 'longitude': 117.8840024, 'latitude': 33.8225752 },
          { 'longitude': 117.8837024, 'latitude': 33.8226553 },
          { 'longitude': 117.8833024, 'latitude': 33.8225956 },
          { 'longitude': 117.8830024, 'latitude': 33.8226556 },
          { 'longitude': 117.8827133, 'latitude': 33.8226505 },
          { 'longitude': 117.8826033, 'latitude': 33.8218505 },
          { 'longitude': 117.8825471, 'latitude': 33.8208586 }
        ]

        // this.table3.startLngLatMap = [117.892022, 33.824756]
        // this.table3.endLngLatMap = [117.891159, 33.826252]
      } else if (this.table3.getdataListParm.parammaps.id == '2') {
        this.table3.initializationMap = [117.88, 33.82]
        this.table3.pointsList = [
          { 'longitude': 117.8826684, 'latitude': 33.8220995 },
          { 'longitude': 117.8823899, 'latitude': 33.8222107 },
          { 'longitude': 117.882071, 'latitude': 33.822077 },
          { 'longitude': 117.8819408, 'latitude': 33.8221457 },
          { 'longitude': 117.881294, 'latitude': 33.8222307 },
          { 'longitude': 117.881294, 'latitude': 33.8226243 },
          { 'longitude': 117.8814287, 'latitude': 33.8232728 },
          { 'longitude': 117.8816937, 'latitude': 33.8231791 },
          { 'longitude': 117.8819363, 'latitude': 33.8232328 },
          { 'longitude': 117.8822417, 'latitude': 33.8232791 },
          { 'longitude': 117.882592, 'latitude': 33.8231304 },
          { 'longitude': 117.8827448, 'latitude': 33.8227855 },
          { 'longitude': 117.8826549, 'latitude': 33.8224481 },
          { 'longitude': 117.8826819, 'latitude': 33.822092 }
        ]
      } else {
        this.table3.initializationMap = [117.88, 33.82]
        this.table3.pointsList = [
          { 'longitude': 117.8828031, 'latitude': 33.823599 },
          { 'longitude': 117.8830906, 'latitude': 33.8236015 },
          { 'longitude': 117.8832433, 'latitude': 33.8235127 },
          { 'longitude': 117.8834544, 'latitude': 33.8235777 },
          { 'longitude': 117.8836161, 'latitude': 33.823509 },
          { 'longitude': 117.8838079, 'latitude': 33.8235015 },
          { 'longitude': 117.8840159, 'latitude': 33.823554 },
          { 'longitude': 117.8840248, 'latitude': 33.8232528 },
          { 'longitude': 117.8838048, 'latitude': 33.8233503 },
          { 'longitude': 117.8835532, 'latitude': 33.8233128 },
          { 'longitude': 117.8833511, 'latitude': 33.8233703 },
          { 'longitude': 117.8831162, 'latitude': 33.8233639 },
          { 'longitude': 117.8828225, 'latitude': 33.8234215 },
          { 'longitude': 117.8825822, 'latitude': 33.8234577 },
          { 'longitude': 117.8825022, 'latitude': 33.8234077 },
          { 'longitude': 117.8821698, 'latitude': 33.8234015 },
          { 'longitude': 117.881797, 'latitude': 33.8235052 },
          { 'longitude': 117.8815096, 'latitude': 33.8234865 },
          { 'longitude': 117.8813659, 'latitude': 33.8235952 },
          { 'longitude': 117.8813614, 'latitude': 33.8237577 },
          { 'longitude': 117.8816353, 'latitude': 33.8237002 },
          { 'longitude': 117.8820108, 'latitude': 33.8236552 },
          { 'longitude': 117.8821708, 'latitude': 33.8237152 },
          { 'longitude': 117.8822708, 'latitude': 33.8236152 },
          { 'longitude': 117.8824708, 'latitude': 33.8236152 },
          { 'longitude': 117.8825531, 'latitude': 33.8235588 },
          { 'longitude': 117.8828031, 'latitude': 33.8236088 }
        ]
        // this.table3.startLngLatMap = [117.754060, 33.505650]
        // this.table3.endLngLatMap = [117.728130, 33.603550]
      }
      // this.getList3()
      MapInit.init().then(
        T => {
          this.isShow = false
          this.T = T
          this.map = new T.Map('yzMap', config) // /初始化地图对象
          const ctrl = new T.Control.MapType()
          this.map.addControl(ctrl)
          this.map.centerAndZoom(new T.LngLat(this.table3.initializationMap[0], this.table3.initializationMap[1]), this.zoom) // 初始化
          var config = {
            policy: 0,	// 驾车策略
            onSearchComplete: this.searchResult	// 检索完成后的回调函数
          }

          console.log(this.map, '=========this.map')
          // var map = this.map
          // this.map.disableDrag()
          // setTimeout(() => {
          //   alert('可以拖拽地图了')
          //   this.map.enableDrag()
          // }, 2000)
          this.map.setMapType(TMAP_HYBRID_MAP)
          this.points = []
          for (let i = 0; i < this.table3.pointsList.length; i++) {
            this.points.push(new T.LngLat(this.table3.pointsList[i].longitude, this.table3.pointsList[i].latitude))
          }
          // 创建线对象
          this.line = new T.Polyline(this.points, {
            color: 'red'
          })
          // 向地图上添加线
          this.map.addOverLay(this.line)
          // this.drivingRoute = new T.DrivingRoute(this.map, config)
          // this.searchDrivingRoute()
          // this.map.enableInertia()
        }).catch(error => {
        console.log(error, '666')
        this.isShow = true
      })
    },
    getList3() {
      this.table3.listLoading = false
      GetDataByName(this.table3.getdataListParm).then(response => {
        // if (response.data.list !== null) {
        //   this.table2.list = response.data.list
        // } else {
        //   this.table2.list = []
        // }

        if (this.table3.getdataListParm.parammaps.id == '1') {
          this.table3.initializationMap = [117.88199, 33.82250]
          this.table3.pointsList = [
            { 'longitude': 117.8826770, 'latitude': 33.8208131 },
            { 'longitude': 117.8826372, 'latitude': 33.8213032 },
            { 'longitude': 117.8826971, 'latitude': 33.8217033 },
            { 'longitude': 117.8827081, 'latitude': 33.8220751 },
            { 'longitude': 117.8829982, 'latitude': 33.8220152 },
            { 'longitude': 117.8831583, 'latitude': 33.8220853 },
            { 'longitude': 117.8833981, 'latitude': 33.8221151 },
            { 'longitude': 117.8835982, 'latitude': 33.8219852 },
            { 'longitude': 117.8839703, 'latitude': 33.8220433 },
            { 'longitude': 117.8838709, 'latitude': 33.8222431 },
            { 'longitude': 117.8840024, 'latitude': 33.8225752 },
            { 'longitude': 117.8837024, 'latitude': 33.8226553 },
            { 'longitude': 117.8833024, 'latitude': 33.8225956 },
            { 'longitude': 117.8830024, 'latitude': 33.8226556 },
            { 'longitude': 117.8827133, 'latitude': 33.8226505 },
            { 'longitude': 117.8826033, 'latitude': 33.8218505 },
            { 'longitude': 117.8825471, 'latitude': 33.8208586 }
          ]

          // this.table3.startLngLatMap = [117.892022, 33.824756]
          // this.table3.endLngLatMap = [117.891159, 33.826252]
        } else if (this.table3.getdataListParm.parammaps.id == '2') {
          this.table3.initializationMap = [117.88, 33.82]
          this.table3.pointsList = [
            { 'longitude': 117.8826684, 'latitude': 33.8220995 },
            { 'longitude': 117.8823899, 'latitude': 33.8222107 },
            { 'longitude': 117.882071, 'latitude': 33.822077 },
            { 'longitude': 117.8819408, 'latitude': 33.8221457 },
            { 'longitude': 117.881294, 'latitude': 33.8222307 },
            { 'longitude': 117.881294, 'latitude': 33.8226243 },
            { 'longitude': 117.8814287, 'latitude': 33.8232728 },
            { 'longitude': 117.8816937, 'latitude': 33.8231791 },
            { 'longitude': 117.8819363, 'latitude': 33.8232328 },
            { 'longitude': 117.8822417, 'latitude': 33.8232791 },
            { 'longitude': 117.882592, 'latitude': 33.8231304 },
            { 'longitude': 117.8827448, 'latitude': 33.8227855 },
            { 'longitude': 117.8826549, 'latitude': 33.8224481 },
            { 'longitude': 117.8826819, 'latitude': 33.822092 }
          ]
        } else {
          this.table3.initializationMap = [117.88, 33.82]
          this.table3.pointsList = [
            { 'longitude': 117.8828031, 'latitude': 33.823599 },
            { 'longitude': 117.8830906, 'latitude': 33.8236015 },
            { 'longitude': 117.8832433, 'latitude': 33.8235127 },
            { 'longitude': 117.8834544, 'latitude': 33.8235777 },
            { 'longitude': 117.8836161, 'latitude': 33.823509 },
            { 'longitude': 117.8838079, 'latitude': 33.8235015 },
            { 'longitude': 117.8840159, 'latitude': 33.823554 },
            { 'longitude': 117.8840248, 'latitude': 33.8232528 },
            { 'longitude': 117.8838048, 'latitude': 33.8233503 },
            { 'longitude': 117.8835532, 'latitude': 33.8233128 },
            { 'longitude': 117.8833511, 'latitude': 33.8233703 },
            { 'longitude': 117.8831162, 'latitude': 33.8233639 },
            { 'longitude': 117.8828225, 'latitude': 33.8234215 },
            { 'longitude': 117.8825822, 'latitude': 33.8234577 },
            { 'longitude': 117.8825022, 'latitude': 33.8234077 },
            { 'longitude': 117.8821698, 'latitude': 33.8234015 },
            { 'longitude': 117.881797, 'latitude': 33.8235052 },
            { 'longitude': 117.8815096, 'latitude': 33.8234865 },
            { 'longitude': 117.8813659, 'latitude': 33.8235952 },
            { 'longitude': 117.8813614, 'latitude': 33.8237577 },
            { 'longitude': 117.8816353, 'latitude': 33.8237002 },
            { 'longitude': 117.8820108, 'latitude': 33.8236552 },
            { 'longitude': 117.8821708, 'latitude': 33.8237152 },
            { 'longitude': 117.8822708, 'latitude': 33.8236152 },
            { 'longitude': 117.8824708, 'latitude': 33.8236152 },
            { 'longitude': 117.8825531, 'latitude': 33.8235588 },
            { 'longitude': 117.8828031, 'latitude': 33.8236088 }
          ]
          // this.table3.startLngLatMap = [117.754060, 33.505650]
          // this.table3.endLngLatMap = [117.728130, 33.603550]
        }

        this.roadMap()
        // setTimeout(() => {
        //   this.table3.listLoading = false
        // }, 100)
      })
    },

    roadMap() {
      MapInit.init().then(
        T => {
          this.isShow = false
          this.T = T
          this.map = new T.Map('yzMap', config) // /初始化地图对象
          const ctrl = new T.Control.MapType()
          this.map.addControl(ctrl)
          this.map.centerAndZoom(new T.LngLat(this.table3.initializationMap[0], this.table3.initializationMap[1]), this.zoom) // 初始化
          var config = {
            policy: 0,	// 驾车策略
            onSearchComplete: this.searchResult	// 检索完成后的回调函数
          }

          // var map = this.map
          this.map.disableDrag()
          // setTimeout(() => {
          //   alert('可以拖拽地图了')
          //   this.map.enableDrag()
          // }, 2000)
          this.map.setMapType(TMAP_HYBRID_MAP)
          this.points = []
          for (let i = 0; i < this.table3.pointsList.length; i++) {
            this.points.push(new T.LngLat(this.table3.pointsList[i].longitude, this.table3.pointsList[i].latitude))
          }
          // 创建线对象
          this.line = new T.Polyline(this.points, {
            color: 'red'
          })
          // 向地图上添加线
          this.map.addOverLay(this.line)
          // this.drivingRoute = new T.DrivingRoute(this.map, config)
          // this.searchDrivingRoute()
          // this.map.enableInertia()
          // console.log(JSON.stringify(this.map), '=========this.map')
        }).catch(error => {
        console.log(error, '666')
        this.isShow = true
      })
    },
    getDistance(points) {
      var r = 0
      for (var k = 0; k < points.length - 1; k++) {
        r += points[k].distanceTo(points[k + 1])
      }

      return r
    }

    // searchDrivingRoute() {
    //   this.map.clearOverLays()
    //   // var startLngLat = new T.LngLat(this.table3.startLngLatMap[0], this.table3.startLngLatMap[1])
    //   // var endLngLat = new T.LngLat(this.table3.endLngLatMap[0], this.table3.endLngLatMap[1])
    //   var startLngLat = new T.LngLat(this.table3.pointsList[0].longitude, this.table3.pointsList[0].latitude)
    //   var endLngLat = new T.LngLat(this.table3.pointsList[this.table3.pointsList.length - 1].longitude, this.table3.pointsList[this.table3.pointsList.length - 1].latitude)

    //   // 驾车路线搜索
    //   this.drivingRoute.search(startLngLat, endLngLat)
    // },
    // createRoute(lnglats, lineColor) {
    //   var _CarTrack = new T.CarTrack(this.map, {
    //     interval: 20,
    //     speed: 10,
    //     dynamicLine: false,
    //     Datas: lnglats,
    //     polylinestyle: { color: '#2C64A7', width: 5, opacity: 0.9 }
    //   })
    //   _CarTrack.start()
    // },
    // createStartMarker(result) {
    //   var startMarker = new T.Marker(result.getStart(), {
    //     icon: new T.Icon({
    //       iconUrl: this.startIcon,
    //       iconSize: new T.Point(44, 34),
    //       iconAnchor: new T.Point(12, 31)
    //     })
    //   })
    //   this.map.addOverLay(startMarker)
    //   var endMarker = new T.Marker(result.getEnd(), {
    //     icon: new T.Icon({
    //       iconUrl: this.endIcon,
    //       iconSize: new T.Point(44, 34),
    //       iconAnchor: new T.Point(12, 31)
    //     })
    //   })
    //   this.map.addOverLay(endMarker)
    // },
    // searchResult(result) {
    //   // 添加起始点
    //   this.createStartMarker(result)
    //   var obj = result
    //   // 获取方案个数
    //   var routes = result.getNumPlans()
    //   for (var i = 0; i < routes; i++) {
    //     // 获得单条驾车方案结果对象
    //     var plan = result.getPlan(i)
    //     console.log(plan, 'plan')
    //     var that = this
    //     that.createRoute(plan.getPath())
    //   }
    // }

  }
}

</script>
<style lang="scss" scoped>
  .search{padding-top:10px;clear: both;}
  .table{margin-top:10px;}
  .detail{
    height:84px;border: 1px solid #EBEEF5;padding-left:10px;font:16px/32px '';color:#333;
    .detail-t{margin-top: 10px;}
    .detail-b{margin-bottom: 10px;}
  }
  .map{position: relative;min-height: 480px;}
   #yzMap {
    width: 95%;
    height: 100%;
    position: absolute;
  }
</style>