|
|
@@ -0,0 +1,317 @@
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <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>
|
|
|
+
|
|
|
+<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';
|
|
|
+window._AMapSecurityConfig = {
|
|
|
+ securityJsCode: '0133db0118e961029dc45a2d5039cbb1' // '「申请的安全密钥」',
|
|
|
+}
|
|
|
+export default {
|
|
|
+ name: 'Pushingplan',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ table: {
|
|
|
+ name:'getTmrEqipmemtList',
|
|
|
+ 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.878730, // 实景图所在位置的纬度
|
|
|
+ longitude: 113.216553, // 实景图所在位置的经度
|
|
|
+ zoom: 17, // 实景
|
|
|
+ apiKey:'fb6a0e88dbad4931d96a121bcf7c4442'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ // this.initMap();
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getButtons()
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ 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 = []
|
|
|
+ // list.push(parseFloat(response.data[i].N),parseFloat(response.data[i].A))
|
|
|
+ // arrList.push(list)
|
|
|
+ // }
|
|
|
+
|
|
|
+ // console.log(JSON.stringify(arrList),'arrList')
|
|
|
+ // this.path = arrList
|
|
|
+ // this.path = [ //测试数据
|
|
|
+ // [116.405285, 39.904989], // 示例轨迹点1
|
|
|
+ // [116.407516, 39.904987], // 示例轨迹点2
|
|
|
+ // [116.407517, 39.91344] // 示例轨迹点3
|
|
|
+ // // 添加更多轨迹点
|
|
|
+ // ]
|
|
|
+ this.path = [
|
|
|
+ [121.461525,31.312628],
|
|
|
+ // [121.461526,31.312628],[121.461527,31.312628],[121.461527,31.312628]
|
|
|
+ ]
|
|
|
+ console.log(this.path[0][0])
|
|
|
+ this.longitude = this.path[0][0] // 实景图所在位置的经度
|
|
|
+ this.latitude = this.path[0][1] // 实景图所在位置的纬度
|
|
|
+ // zoom: 15, // 实景
|
|
|
+ this.initMap();
|
|
|
+ } else {
|
|
|
+ this.path = []
|
|
|
+ }
|
|
|
+ // this.initMap();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async initMap() {
|
|
|
+ await AMapLoader.load({
|
|
|
+ key: 'fb6a0e88dbad4931d96a121bcf7c4442', // 替换为你的高德地图API Key
|
|
|
+ version: '2.0',
|
|
|
+ plugins: [],
|
|
|
+ }).then(()=>{
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ this.map = new window.AMap.Map(this.$refs.map, {
|
|
|
+ zoom: 16,
|
|
|
+ center: this.path[0],
|
|
|
+ // layers: [
|
|
|
+ // new window.AMap.TileLayer.Satellite() // 使用卫星地图图层
|
|
|
+ // ]
|
|
|
+ });
|
|
|
+ const startMarker = new window.AMap.Marker({
|
|
|
+ position: this.path[0], // 起始点位置
|
|
|
+ map: this.map,
|
|
|
+ icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png', // 起始点图标
|
|
|
+ });
|
|
|
+ // const endMarker = new window.AMap.Marker({
|
|
|
+ // position: this.path[this.path.length - 1],
|
|
|
+ // map: this.map,
|
|
|
+ // icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png', // 终点图标
|
|
|
+ // });
|
|
|
+ this.correctPath();
|
|
|
+ this.drawPath();
|
|
|
+ // this.addStartMarker()
|
|
|
+ },
|
|
|
+ correctPath() {
|
|
|
+ // 调用高德地图的轨迹纠偏服务进行处理
|
|
|
+
|
|
|
+ // 处理返回结果并在地图上展示纠偏后的轨迹
|
|
|
+ },
|
|
|
+ drawDrop(){
|
|
|
+ var that = this
|
|
|
+ that.path.forEach(function(coord, index) {
|
|
|
+ // console.log(coord, index,'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());
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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();
|
|
|
+ this.map.setZoom(16)
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .map-container {
|
|
|
+ height: 400px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .el-tag{margin-right: 5px;}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+ .red-row{
|
|
|
+ background: #fde2e2 !important;
|
|
|
+ }
|
|
|
+</style>
|
