|
|
@@ -43,6 +43,7 @@
|
|
|
|
|
|
<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" icon="el-icon-edit-outline" @click="handleRunning_trajectory(row)" />
|
|
|
<el-button v-if="isRoleEdit" class="miniSuccess" icon="el-icon-edit-outline" @click="handleUpdate(row)" />
|
|
|
<el-button v-if="isRoleEdit" class="miniDanger" icon="el-icon-delete" @click="handleRowDelete(row)" />
|
|
|
</template>
|
|
|
@@ -112,6 +113,25 @@
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
|
|
|
+ <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>
|
|
|
|
|
|
@@ -122,7 +142,11 @@ 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: 'PushMaterialPlan',
|
|
|
data() {
|
|
|
@@ -150,6 +174,10 @@ export default {
|
|
|
enable: [{ required: true, message: '必填', trigger: 'blur' }]
|
|
|
}
|
|
|
},
|
|
|
+ run: {
|
|
|
+ dialogFormVisible: false,
|
|
|
+ dialogStatus: '',
|
|
|
+ },
|
|
|
dialogFull: false,
|
|
|
tmrList:[],
|
|
|
barList:[],
|
|
|
@@ -159,8 +187,19 @@ export default {
|
|
|
rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
|
|
|
cellStyle: { padding: 0 + 'px' },
|
|
|
myHeight: document.documentElement.clientHeight - 85- 150,
|
|
|
+ map: null,
|
|
|
+ path: [
|
|
|
+ [116.405285, 39.904989], // 示例轨迹点1
|
|
|
+ [116.407516, 39.904717], // 示例轨迹点2
|
|
|
+ [116.407366, 39.91344], // 示例轨迹点3
|
|
|
+ // 添加更多轨迹点
|
|
|
+ ],
|
|
|
+ index: 0,
|
|
|
}
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ // this.initMap();
|
|
|
+ },
|
|
|
created() {
|
|
|
this.getButtons()
|
|
|
this.getTMR_barList()
|
|
|
@@ -331,11 +370,77 @@ export default {
|
|
|
handleRefresh(){
|
|
|
this.table.parammaps.date = ''
|
|
|
this.table.parammaps.eqCode = ''
|
|
|
+ },
|
|
|
+ handleRunning_trajectory(row){
|
|
|
+ console.log('点击了运行轨迹')
|
|
|
+ this.run.dialogStatus = 'run'
|
|
|
+ this.run.dialogFormVisible = true
|
|
|
+ this.initMap();
|
|
|
+ },
|
|
|
+ async initMap() {
|
|
|
+ await AMapLoader.load({
|
|
|
+ key: 'fb6a0e88dbad4931d96a121bcf7c4442', // 替换为你的高德地图API Key
|
|
|
+ version: '2.0',
|
|
|
+ plugins: [],
|
|
|
+ });
|
|
|
+
|
|
|
+ this.map = new window.AMap.Map(this.$refs.map, {
|
|
|
+ zoom: 13,
|
|
|
+ center: this.path[0],
|
|
|
+ });
|
|
|
+
|
|
|
+ this.drawPath();
|
|
|
+ this.drawDrop();
|
|
|
+ // this.startLoop();
|
|
|
+ },
|
|
|
+ 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();
|
|
|
+ },
|
|
|
+ drawDrop(){
|
|
|
+ var that = this
|
|
|
+ that.path.forEach(function(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());
|
|
|
+ });
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+ .map-container {
|
|
|
+ height: 400px;
|
|
|
+ }
|
|
|
.search {
|
|
|
clear: both;
|
|
|
}
|
