Tmr-Admin/src/views/statisticalAnalysis/pushingplan/index.vue

 <template>
  <div class="app-container">
    <div class="search">
      <el-date-picker v-model="table.parammaps.inputDatetime" type="daterange" class="inputDatetime filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
      <el-input v-model="table.parammaps.tname" placeholder="推料车" style="width: 180px;" class="filter-item" clearable />
      <el-button class="successBorder" @click="handleRefresh">重置</el-button>
      <el-button class="successBorder" @click="form_search">查询</el-button>
    </div>
    <div class="table">
      <el-table
        :key="tableKey"
        ref="table"
        v-loading="listLoading"
        element-loading-text="给我一点时间"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        class="elTable table-fixed"
        :max-height="myHeight"
      >
        <el-table-column label="序号" align="center" type="index" width="50px" />
        <el-table-column label="推料车" min-width="100px" align="center" prop="tname" />
        <el-table-column label="备注" min-width="100px" align="center" prop="remark" />
        <el-table-column label="开始时间" min-width="100px" align="center" prop="startdate" />
        <el-table-column label="结束时间" min-width="100px" align="center" prop="enddate" />
        <el-table-column label="运行时间" min-width="100px" align="center" prop="date" />
        <el-table-column label="运行轨迹" align="center" width="80" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}">
            <el-button v-if="isRoleEdit" class="miniSuccess" @click="handleRunning_trajectory(row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span v-if="listLoading == false" style="margin-right: 30px;margin-top: 10px;font-size: 14px;">共{{total }}条</span>
    </div>

    <el-dialog  :visible.sync="run.dialogFormVisible" :close-on-click-modal="false" width="50%">
     <template slot="title">
       <div class="avue-crud__dialog__header">
         <span class="el-dialog__title">
           <span style="display:inline-block;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px" />
           运行轨迹
         </span>
         <div class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true">
           <svg-icon v-if="dialogFull" icon-class="exit-fullscreen" />
           <svg-icon v-else icon-class="fullscreen" />
         </div>
       </div>
     </template>
    <div ref="map" class="map-container"></div>
    <div slot="footer" class="dialog-footer">
       <el-button class="cancelClose1" @click="run.dialogFormVisible = false;getList()">关闭</el-button>
    </div>
   </el-dialog>

  </div>
</template>

<script>
import { GetDataByName, postJson,getJson, formatNum, checkButtons } from '@/api/common'
import { parseTime} from '@/utils/index.js'
import { MessageBox } from 'element-ui'
import Cookies from 'js-cookie'
import axios from 'axios'
import { getToken } from '@/utils/auth'
import { createApp } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode: '0133db0118e961029dc45a2d5039cbb1' // '「申请的安全密钥」',
}
export default {
  name: 'Pushingplan',
  data() {
    return {
      table: {
        name:'getTmrEqipmemtList',
        parammaps: {
          // pastureid: Cookies.get('pastureid'),
          tname:'',
          startdate:'',
          enddate: '',
          inputDatetime: null,
          // startdate: parseTime(new Date(), '{y}-{m}-{d}'),
          // enddate: parseTime(new Date(), '{y}-{m}-{d}'),
          // inputDatetime: [new Date(), new Date()],
        },
      },
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,

      run: {
        dialogFormVisible: false,
        dialogStatus: '',
        temp:{}
      },
      dialogFull: false,
      isRoleEdit: [],
      isokDisable: false,
      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
      cellStyle: { padding: 0 + 'px' },
      myHeight: document.documentElement.clientHeight - 85- 150,
       map: null,
       path:[],
      // path: [
      //   [116.405285, 39.904989], // 示例轨迹点1
      //   [116.407516, 39.904717], // 示例轨迹点2
      //   [3118.407366, 39.91344],  // 示例轨迹点3
      //   // 添加更多轨迹点
      // ],
      index: 0,
      latitude: 40.878730, // 实景图所在位置的纬度
      longitude: 113.216553, // 实景图所在位置的经度
      zoom: 17, // 实景
      apiKey:'fb6a0e88dbad4931d96a121bcf7c4442'
    }
  },

   mounted() {
      // this.initMap();
    },
  created() {
    this.getButtons()
    this.getList()
  },

  methods: {
    getButtons() {
      const Edit = 'Pushingplan'
      const isRoleEdit = checkButtons(JSON.parse(sessionStorage.getItem('buttons')), Edit)
      this.isRoleEdit = isRoleEdit
    },

    getList() {
      this.listLoading = true
      let url = '/authdata/GetDataByName'
      let data = this.table
      if(this.table.parammaps.inputDatetime !== null){
        data.parammaps.startdate = parseTime(this.table.parammaps.inputDatetime[0], '{y}-{m}-{d}')
        data.parammaps.enddate = parseTime(this.table.parammaps.inputDatetime[1], '{y}-{m}-{d}')
      }else{
        data.parammaps.startdate = ''
        data.parammaps.enddate = ''
      }
      postJson(url,data).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.list = response.data.list
        } else {
          this.list = []
        }
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 100)
      })
    },



    form_search() {
      console.log('点击了查询')
      this.getList()
    },
    handleRefresh(){
      this.table.parammaps.tname = ''
      this.table.parammaps.inputDatetime = null
      this.getList()
    },
    handleRunning_trajectory(row){
      console.log('点击了运行轨迹')
      this.run.dialogStatus = 'run'
      this.run.dialogFormVisible = true
      this.run.temp = Object.assign({}, row)
      this.getRuningList()
    },
    getRuningList(){
      let url = '/authdata/equipment/muster'
      let data = '?id='+this.run.temp.id
      getJson(url,data).then(response => {
        // path
        // console.log('table数据', response.data.list)
        if (response.data !== null) {
          let arrList = []
          for(let i=0;i<response.data.length;i++){
            let list = []
            list.push(parseFloat(response.data[i].N),parseFloat(response.data[i].A))
            arrList.push(list)
          }

          // console.log(JSON.stringify(arrList),'arrList')
          this.path = arrList
          // this.path = [  //测试数据
          //   [116.405285, 39.904989], // 示例轨迹点1
          //   [116.407516, 39.904987], // 示例轨迹点2
          //   [116.407517, 39.91344]  // 示例轨迹点3
          //   // 添加更多轨迹点
          // ]
          // this.path = [
          //   [121.461525,31.312628],
          //   // [121.461526,31.312628],[121.461527,31.312628],[121.461527,31.312628]
          // ]
          console.log(this.path[0][0])
          this.longitude = this.path[0][0] // 实景图所在位置的经度
          this.latitude = this.path[0][1] // 实景图所在位置的纬度
          // zoom: 15, // 实景
          this.initMap();
        } else {
          this.path = []
        }
        // this.initMap();
      })
    },
    async initMap() {
      await AMapLoader.load({
        key: 'fb6a0e88dbad4931d96a121bcf7c4442', // 替换为你的高德地图API Key
        version: '2.0',
        plugins: [],
      }).then(()=>{

      })

      this.map = new window.AMap.Map(this.$refs.map, {
        zoom: 16,
        center: this.path[0],
        // layers: [
        //   new window.AMap.TileLayer.Satellite() // 使用卫星地图图层
        // ]
      });
      const startMarker = new window.AMap.Marker({
        position: this.path[0], // 起始点位置
        map: this.map,
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png', // 起始点图标
      });
      const endMarker = new window.AMap.Marker({
        position: this.path[this.path.length - 1],
        map: this.map,
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png', // 终点图标
      });
      this.correctPath();
      this.drawPath();
      // this.addStartMarker()
    },
    correctPath() {
      // 调用高德地图的轨迹纠偏服务进行处理

      // 处理返回结果并在地图上展示纠偏后的轨迹
    },
    drawDrop(){
      var that = this
      that.path.forEach(function(coord, index) {
        // console.log(coord, index,'coord, index')
          var marker = new AMap.Marker({
              position: coord, // 对应点的经/纬度
              map: that.map, // 显示在地图上
              icon: new AMap.Icon({
                // size: new AMap.Size(36, 36),  // 图标尺寸
                image: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b'+ (index + 1) +'.png',  // 自定义图标
                // imageSize: new AMap.Size(36, 36),  // 图标尺寸
              }),
              offset: new AMap.Pixel(-10, -30) // 调整图标的偏移，使图标中心显示在点位置
          });
          // var label = new AMap.Text({
          //     text: (index + 1).toString(), // 显示的数字
          //     position: coord, // 标签位置与点位置相同
          //     offset: new AMap.Pixel(-10, -20), // 调整标签的偏移，使数字显示在点的正上方
          //     map: that.map // 显示在地图上
          // });
          // 添加信息窗体
          marker.on('click', function() {
              var infoWindow = new AMap.InfoWindow({
                  content: '经度：' + coord[0] + '<br>纬度：' + coord[1]
              });
              infoWindow.open(that.map, marker.getPosition());
          });
      });
    },
    drawPath() {
      const polyline = new window.AMap.Polyline({
        path: this.path,
        strokeStyle: 'red',
        strokeColor: '#3366FF',
        strokeOpacity: 1,
        strokeWeight: 3,
        map: this.map,
        dirArrowStyle: true,
      });
      // 调整地图视图以适应轨迹
      this.map.setFitView();
      this.map.setZoom(16)
    },
  }
}
</script>
<style lang="scss" scoped>
  .map-container {
    height: 400px;
    width: 100%;
  }
  .search {
    clear: both;
  }

  .table {
    margin-top: 10px;
  }
  .el-tag{margin-right: 5px;}
</style>
<style lang="scss">
  .red-row{
    background: #fde2e2 !important;
  }
</style>