123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544 |
- <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>
|