Tmr-Multilingual/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>
    <!-- 分页 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 class="run-box">
          <div ref="map" class="map-container"></div>
          <div class="run-box-rg">
            <h3>运动轨迹详情</h3>
            <div>
              <span>推料车:</span>{{1}}
            </div>
            <div>
              <span>推料车:</span>{{1}}
            </div>
            <div>
              <span>计划开始时间:</span>{{1}}
            </div>
            <div>
              <span>实际开始时间:</span>{{1}}
            </div>
            <div>
              <span>实际结束时间:</span>{{1}}
            </div>
            <div>
              <span>实际时长:</span>{{1}}
            </div>
            <div>
              <span>偏差分钟数:</span>{{1}}
            </div>
            <div>
              <span>备注:</span>{{1}}
            </div>
            <div>
              <span>计划推料顺序(栏舍):</span>{{1}}
            </div>
          </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 {
      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()
  },

  methods: {
    // 分页
    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) => {
        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 = []
            // 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{
  border:1px solid red;
  display: flex;
  justify-content: space-between;
  height: 600px;
}
.run-box-rg{
  flex: 1;
  border:1px solid green;
  padding-left: 20px;
  min-width:300px;
  font-size:16px;
  .run-box-rg span{
    font-size: 16px!important;
  }
  .run-box-rg>div{
    margin: 15px 0;
  }
}

.map-container {
  height: 600px;
  width: 840px;
}
.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>