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="$t('common.to')"
        :start-placeholder="$t('common.startTime')"
        :end-placeholder="$t('common.endTime')"
      >
      </el-date-picker>
      <el-input
        v-model="table.parammaps.tname"
        :placeholder="$t('pushingplan.tname')"
        style="width: 180px"
        class="filter-item"
        clearable
      />
      <el-button class="successBorder" @click="handleRefresh">{{
        $t("common.reset")
      }}</el-button>
      <el-button class="successBorder" @click="form_search">{{
        $t("common.query")
      }}</el-button>
    </div>
    <div class="table">
      <el-table
        :key="tableKey"
        ref="table"
        v-loading="listLoading"
        :element-loading-text="$t('common.tableMsg')"
        :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="$t('pushingplan.num')"
          align="center"
          type="index"
          width="110px"
        />
        <el-table-column
          :label="$t('pushingplan.tname')"
          min-width="100px"
          align="center"
          prop="tname"
        />
        <el-table-column
          :label="$t('pushingplan.remark')"
          min-width="100px"
          align="center"
          prop="remark"
        />
        <el-table-column
          :label="$t('pushingplan.planDate')"
          min-width="100px"
          align="center"
          prop="plandate"
        />
        <el-table-column
          :label="$t('pushingplan.startDate')"
          min-width="100px"
          align="center"
          prop="startdate"
        />
        <el-table-column
          :label="$t('pushingplan.deviation')"
          min-width="100px"
          align="center"
          prop="deviation"
        />
        <el-table-column
          :label="$t('pushingplan.endDate')"
          min-width="100px"
          align="center"
          prop="enddate"
        />
        <el-table-column
          :label="$t('pushingplan.date')"
          min-width="100px"
          align="center"
          prop="dates"
        />

        <!-- <el-table-column
        :label="$t('pushingplan.name')"
          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)"
              >{{$t('pushingplan.watch')}}</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <!-- <span
        v-if="listLoading == false"
        style="margin-right: 30px; margin-top: 10px; font-size: 14px"
        >{{$t('processAnalysis.total')}}{{ total }}{{$t('processAnalysis.tiao')}}</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;
              "
            />
            {{ $t("pushingplan.name") }}
          </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>{{ $t("pushingplan.detail") }}</h3>
        <div class="run-box-rg">
          <div>
            <span>{{ $t("pushingplan.tname") }}:</span>{{ runDate.tname }}
          </div>
          <div>
            <span>{{ $t("pushingplan.remark") }}:</span>{{ runDate.remark }}
          </div>
          <div>
            <span>{{ $t("pushingplan.planDate") }}:</span>{{ runDate.plandate }}
          </div>
          <div>
            <span>{{ $t("pushingplan.startDate") }}:</span
            >{{ runDate.startdate }}
          </div>
          <div>
            <span>{{ $t("pushingplan.deviation") }}:</span
            >{{ runDate.deviation }}
          </div>
          <div>
            <span>{{ $t("pushingplan.endDate") }}:</span>{{ runDate.enddate }}
          </div>
          <div>
            <span>{{ $t("pushingplan.date") }}:</span>{{ runDate.dates }}
          </div>

          <div>
            <span>{{ $t("pushingplan.bname") }}:</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();
          "
          >{{ $t("common.closed") }}</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>