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="plandate"
        />
        <el-table-column
          label="实际开始时间"
          min-width="100px"
          align="center"
          prop="startdate"
        />
        <el-table-column
          label="偏差分钟数"
          min-width="100px"
          align="center"
          prop="deviation"
        />
        <el-table-column
          label="实际结束时间"
          min-width="100px"
          align="center"
          prop="enddate"
        />
        <el-table-column
          label="实际时长(分钟)"
          min-width="100px"
          align="center"
          prop="dates"
        />

        <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>
    <!-- 分页 start-->
    <el-pagination
      class="pages"
      v-if="listLoading == false"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[50, 100, 150, 200]"
      :page-size="table.pagecount"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 分页 end -->

    <el-dialog
      :visible.sync="run.dialogFormVisible"
      :close-on-click-modal="false"
      width="80%"
    >
      <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 style="margin-bottom: 20px;background-image: url('http://niu305.cn:8091/uploads/image/headphoto1.png');background-position: top right;"> -->
        <div>
          <h3>推料计划详情</h3>
          <div class="run-box-rg">
            <div>
              <span>推料车:</span>{{runDate?.tname || '暂无'}}
            </div>
            <div>
              <span>备注:</span>{{runDate?.remark || '暂无'}}
            </div>
            <div>
              <span>计划开始时间:</span>{{runDate?.plandate || '暂无'}}
            </div>
            <div>
              <span>实际开始时间:</span>{{runDate?.startdate || '暂无'}}
            </div>
            <div>
              <span>偏差分钟数:</span>{{runDate?.deviation || '暂无'}}
            </div>
            <div>
              <span>实际结束时间:</span>{{runDate?.enddate || '暂无'}}
            </div>
            <div>
              <span>实际时长:</span>{{runDate?.dates || '暂无'}} 分钟
            </div>

            <div>
              <span>推料栏舍顺序:</span>{{ runDate?.bname || '暂无' }}
            </div>
          </div>
          <div ref="map" class="map-container"></div>
        </div>

      <!-- </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'
// import vLoUrl from '../../../assets/images/tet.png'
import vLoUrl from '../../../assets/images/guiji2.jpeg'
window._AMapSecurityConfig = {
  securityJsCode: '0133db0118e961029dc45a2d5039cbb1' // '「申请的安全密钥」',
}
export default {
  name: 'Pushingplan',
  data() {
    return {
      runDate:{},
      currentPage: 1,
      table: {
        offset: 1,
        name: 'getTmrEqipmemtList',
        pagecount: 50,
        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.87873, // 实景图所在位置的纬度
      longitude: 113.216553, // 实景图所在位置的经度
      zoom: 17, // 实景
      apiKey: 'fb6a0e88dbad4931d96a121bcf7c4442',
      vLoUrl
    }
  },

  mounted() {
    // this.initMap();
  },
  created() {
    this.getButtons()
    this.getList()
    var totalTimeInMinutes = this.timeStringToMinutes('12:20:27');
     console.log(totalTimeInMinutes);
  },

  methods: {
    // 点击查看的时候获取 推车的数据并去获取推料的原计划
    timeStringToMinutes(timeString) {
    var timeParts = timeString.split(':');
    var hours = parseInt(timeParts[0]);
    var minutes = parseInt(timeParts[1]);
    var seconds = parseInt(timeParts[2]);
    return (hours * 60 + minutes + seconds / 60).toFixed(2) ;
},
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.table.pagecount = val
      this.table.offset = 1
      this.currentPage = 1
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.table.offset = val
      this.getList()
    },
    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) => {
        if (response.data.list !== null) {
          let arr = JSON.parse(JSON.stringify(response.data.list))
          arr.forEach((item)=>{
             item.dates = this.timeStringToMinutes(item.date) || item.date;
             item.deviation = this.timeStringToMinutes(item.deviation) || item.deviation;
          })
          this.list = arr

        } 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) {
      this.runDate = row;
      console.log('点击了运行轨迹',this.runDate );

      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 = []
            // let str= `${parseFloat(response.data[i].N)} ${parseFloat(response.data[i].A)} `
            list.push(
              parseFloat(response.data[i].N),
              parseFloat(response.data[i].A)
            )

            arrList.push(list)
            ////////
            // let testArr =[];
            // testArr.push(parseFloat(response.data[i].A),parseFloat(response.data[i].N));
            // arrList.push(testArr);
            //////
          }

          this.path = arrList //真实数据
          //  console.log(JSON.stringify(arrList),'arrList')
          //  console.log(arrList.join('\n'),'9999999');
          // 测试数据
          // this.path =  [
          //   // [116.317911, 39.939229], // 示例轨迹点1
          //   // [116.327911, 39.939229], // 示例轨迹点1
          //   // [116.328911, 39.939329], // 示例轨迹点1
          //   // [116.338911, 39.939429], // 示例轨迹点1
          //   // [116.342659, 39.946275]
          //   // [113.2268105910612,40.88140752472374],
          //   // [113.210637000,40.8765545]
          //    [113.210637000,40.8765548] ,// 左下
          //   // [113.210637002,40.8765551],
          //   // [113.210637012,40.8765561],
          //   // [113.210637015,40.8765562],
          //   // [113.210637020,40.8765564],
          //   // [113.210637021,40.8765568],
          //   //  [113.213728833,40.8798781621],
          //   //  [113.214728833,40.8798781624],
          //   //  [113.215728833,40.8798781342],
          //   //  [113.216728833,40.8798781664],
          //    [113.210637000,40.8798781666], //左上

          //    [113.219728833,40.8798781666],//// 右上
          // ]
          // this.longitude = this.path[0][0] // 实景图所在位置的经度
          // this.latitude = this.path[0][1] // 实景图所在位置的纬度
          // zoom: 15, // 实景
        } else {
          this.path = []
        }
        this.initMap()
      })
    },
    async initMap() {
      await AMapLoader.load({
        key: 'fb6a0e88dbad4931d96a121bcf7c4442', // 替换为你的高德地图API Key
        version: '2.0',
        plugins: []
      }).then(() => {})
      // 后续牧场栏舍图
      var backgroundImageUrl = this.vLoUrl // 示例图片链接
      var imageLayer = new AMap.ImageLayer({
        url: backgroundImageUrl,
        bounds: new AMap.Bounds(
          // this.path[0],
          // this.path[this.path.length - 1]
          // [113.20750428,40.87528624] ,// 左下
          // [113.22348518,40.88395588], // 右上
          [113.21478078, 40.87649131], //左下角；
          [113.23067741, 40.88588863] // 右上角
        ), //图片范围大小的经纬度，传入西南和东北的经纬度坐标
        zooms: [15, 20]
      })
      this.map = new window.AMap.Map(this.$refs.map, {
        zoom: 18,
        // zIndex:2,
        center: [113.21549472999999, 40.879621060000005],
        layers: [AMap.createDefaultLayer(), imageLayer]
      })
      const startMarker = new window.AMap.Marker({
        position: this.path[this.path.length - 1], // 起始点位置
        map: this.map,
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png' // 起始点图标
      })
      const endMarker = new window.AMap.Marker({
        position: this.path[0],
        map: this.map,
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png' // 终点图标
      })

      this.drawPath()
    },
    drawPath() {
      const polyline = new window.AMap.Polyline({
        path: this.path,
        strokeStyle: 'red',
        strokeColor: '#F9423A',
        strokeOpacity: 1,
        strokeWeight: 3,
        map: this.map,
        dirArrowStyle: true
      })

      // 调整地图视图以适应轨迹

      this.map.setFitView()
      this.map.setZoom(18)
    }
  }
}
</script>
<style lang="scss" scoped>
.run-box{
  height: 600px;
}
.run-box-rg{
  display: flex;
  justify-content:left;
  flex-direction: row;
  flex-wrap: wrap;
  padding:  0px 20px;
  font-size:16px;
  border-bottom:1px dotted #eee;
}
.run-box-rg div{
  margin-bottom:10px;
  margin-right:15px;
}
.run-box-rg div>span{
    font-size: 16px!important;
    font-weight: 600;

  }

.map-container {
  height: 600px;
  // width: 840px;
  // border-right:1px dotted #eee;
  padding:0 10px;
}
.search {
  clear: both;
}

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