tmr-admin/.svn/pristine/13/1382c0335c4f0afc86ea91dfe5a8b07b7088d0f2.svn-base

<template>
  <div class="app-container">
    <!-- <h1>牧场</h1> -->
    <div class="search">
      <el-date-picker v-model="table.getdataListParm.parammaps.date" 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.value" :label="item.lable" :value="item.value" />
      </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="intime" />
            <el-table-column label="设备名称" min-width="80px" align="center" prop="lpplantype" />
            <el-table-column label="GPS设备名称" min-width="90px" align="center" prop="remark" />
            <el-table-column label="总时长(分钟)" min-width="100px" align="center" prop="tmrtname" />
          </el-table>
        </div>
        <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="rowClick2"
          >
            <el-table-column label="设备名称" min-width="90px" align="center" prop="intime" />
            <el-table-column label="开始时间" min-width="80px" align="center" prop="lpplantype" />
            <el-table-column label="结束时间" min-width="90px" align="center" prop="remark" />
            <el-table-column label="时长(分钟)" min-width="100px" align="center" prop="tmrtname" />
          </el-table>
        </div>
      </el-col>
      <el-col :span="16" class="map">
        <h4>设备轨迹图</h4>
        <div id="yzMap" />
      </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: '设备01' }, { id: 1, name: '设备02' }],
      // 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
      },
      table1Height: (document.documentElement.clientHeight - 85 - 250) / 2,
      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
      cellStyle: { padding: 0 + 'px' },
      map: '', drivingRoute: '', drivingRoute1: '',
      zoom: 12,
      myCarTrack: '',
      config: '',
      startIcon: 'http://lbs.tianditu.gov.cn/images/bus/start.png',	// 起点图标
      endIcon: 'http://lbs.tianditu.gov.cn/images/bus/end.png'		// 终点图标
    }
  },
  created() {
    this.getList()
    console.log(document.documentElement.clientHeight - 85 - 250)
    this.roadMap()
  },
  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 = []
        }
        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) { },
    rowClick2(row, column, event) { },
    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 = []
        }
        setTimeout(() => {
          this.table2.listLoading = false
        }, 100)
      })
    },
    roadMap() {
      MapInit.init().then(
        T => {
          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(116.40769, 39.91945), 12)
          var config = {
            policy: 0,	// 驾车策略
            onSearchComplete: this.searchResult	// 检索完成后的回调函数
          }
          this.drivingRoute = new T.DrivingRoute(this.map, config)
          this.drivingRoute1 = new T.DrivingRoute(this.map, config)
          this.searchDrivingRoute()
        }).catch()
    },
    searchDrivingRoute() {
      this.map.clearOverLays()
      var startLngLat = new T.LngLat(116.354060, 39.905650)
      var endLngLat = new T.LngLat(116.428130, 39.903550)
      // 驾车路线搜索
      this.drivingRoute.search(startLngLat, endLngLat)

      var startLngLat1 = new T.LngLat(116.380967, 39.953285)
      var endLngLat1 = new T.LngLat(116.424374, 39.914668)
      // 驾车路线搜索
      this.drivingRoute1.search(startLngLat1, endLngLat1)
    },
    createRoute(lnglats, lineColor) {
      this.myCarTrack = new this.T.CarTrack(this.map, {
        interval: 20,
        speed: 10,
        dynamicLine: false,
        Datas: lnglats,
        polylinestyle: { color: '#2C64A7', width: 5, opacity: 0.9 }
      })
      this.myCarTrack.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)
        this.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>