fix:路段

guoshipeng

2023-08-25 399abec46258d2c69dabb4e60c1efc26702d3719

fix:路段

 src/assets/43ea4c2b53f61e02193622a7c08c7a1.png

 src/assets/723cd95f31481a502d495b2d814d658.png

 src/assets/7e0c779a1e1899a97eb1e4e8fdba030.png

 src/assets/97b970a4f3bd8c3cba44fa167e984e5.png

 src/assets/fb259ce2e368f6853a58b91d6f6b293.png

 src/components/map/pickCoordinate1.vue

@@ -24,7 +24,10 @@
            style="width: 160px; height: 26px"

            @change="searchMap"

          ></a-input> -->

          <input v-model="input" id="tipinput" /><button @click="searchAddress">

          <input v-model="input" id="tipinput" /><button

            @click="searchAddress"

            style="background-color: #1890ff; color:white; border:none;margin-left:5px"

          >

            搜索

          </button>

          <div id="panel"></div>


 src/route/devices.router.ts

 src/route/other.router.ts

New file
@@ -0,0 +1,27 @@
import MainLayout from '@/layout/main/MainLayout.vue';



const router = {

    path: '/other',

    component: MainLayout,

    name: '/other',

    redirect: '/other/road',

    meta: {

        title: '其他',

        icon: 'table',

        routerGuard: true,

        i18n: `其他`

    },

    children: [{

        path: 'road',

        name: '/other/road',

        component: () => import(/* webpackChunkName: "list" */ '@/views/list/road.vue'),

        meta: {

            title: '路径规划',

            routerGuard: true,

            i18n: `menu.list.road`

        },

    },

]

};



export default router;


 src/route/router.ts

@@ -14,6 +14,7 @@
// 合并的路由组件

import sensors from './sensors.router';

import devices from './devices.router';

import other from './other.router';

import cache from './cache.router'

import usersMange from './usersMange.router'




 src/util/request.ts

@@ -7,7 +7,8 @@
    //baseURL: 'http://47.99.64.149:8082/', // baseUrl会在发送请求的时候拼接在url前面      开发环境

    // baseURL: 'http://www.7drlb7.com:8082/', // baseUrl会在发送请求的时候拼接在url前面      正式环境

    baseURL: 'http://120.26.43.34:8082/',

    // baseURL: 'http://192.168.0.11:8082/',

    // baseURL: 'http://192.168.0.12:8082/',

    // baseURL: 'http://192.168.0.28:8082/',// cjl

    timeout: 5000

})




 src/views/list/road.vue

New file
@@ -0,0 +1,545 @@
<template>

  <div style="display: flex; overflow: hidden">

    <div class="left">

      <div class="left-one">

        <a-range-picker

          v-model="timevalue"

          show-time

          @ok="change1()"

          valueFormat="yyyy-MM-DD HH:MM:SS"

          style="width: 200px"

        />

        <a-select

          ref="select"

          v-model="carvalue"

          style="width: 200px; margin-left: 10px"

          placeholder="请选择走航车"

        >

          <a-select-option

            v-for="item in carIndex"

            :key="item.id"

            :value="item.mac"

            >{{ item.name }}</a-select-option

          >

        </a-select>

        <a-button type="primary" style="margin-left: 10px" @click="selectCar"

          >查询</a-button

        >

      </div>



      <div class="left-two">

        <a-table

          :dataSource="dataSource"

          :selectedRows="selectedRows"

          :columns="columns"

          :pagination="false"

          :scroll="{ y: 300 }"

          style="width: 100%"

        ></a-table>

      </div>

      <div class="left-three" style="margin-top: 20px">

        <a-button

          v-show="upa === ''"

          type="primary"

          style="margin-left: 10px; float: right; margin-right: 10px"

          @click="openIn"

          >添加</a-button

        >

        <a-button

          v-show="upa === 'upa'"

          type="primary"

          style="margin-left: 10px; float: right; margin-right: 10px"

          @click="inupa"

          >取消</a-button

        >

        <a-button

          v-show="upa === 'upa'"

          type="primary"

          style="margin-left: 10px; float: right; margin-right: 10px"

          @click="openupa"

          >修改</a-button

        >

      </div>

      <div

        class="left-four"

        style="margin-top: 65px"

        v-show="batchshow === true"

      >

        <a-card title="批量添加" style="width: 500px">

          <div>

            <div>

              <span style="font-size: 15.5px; color: black; margin-left: 50px"

                >开始时间 :</span

              >

              <a-input

                style="width: 300px; margin-left: 15px"

                placeholder="请输入开始时间"

                v-model="starttime"

              />

            </div>

            <div style="margin-top: 10px; margin-left: 50px">

              <span style="font-size: 15.5px; color: black">结束时间 :</span>

              <a-input

                style="width: 300px; margin-left: 15px"

                placeholder="请输入结束时间"

                v-model="endtime"

              />

            </div>

          </div>

          <div style="margin-left: 140px; margin-top: 30px">

            <a-button @click="handlebatch">关闭</a-button>

            <a-button @click="handlenull">清空</a-button>

            <a-button type="primary" @click="insertbatch">提交</a-button>

          </div>

        </a-card>

      </div>

    </div>

    <a-modal

      title="路段名添加"

      :visible="visibleCreateModal1"

      @cancel="handleCreateModalCancel1"

      destroyOnClose

      okText="保存"

    >

      <template #footer>

        <a-button key="back" @click="handleCreateModalCancel1">关闭</a-button>

        <a-button key="submit" type="primary" @click="insertCarLu"

          >提交</a-button

        >

      </template>

      <div>

        <div>

          <span style="font-size: 17.5px; color: black; margin-left: 50px"

            >起点 :</span

          >

          <a-input

            style="width: 300px; margin-left: 15px"

            placeholder="请输入起点"

            v-model="startLu"

          />

        </div>

        <div style="margin-top: 10px; margin-left: 50px">

          <span style="font-size: 17.5px; color: black">终点 :</span>

          <a-input

            style="width: 300px; margin-left: 15px"

            placeholder="请输入终点"

            v-model="endLu"

          />

        </div>

      </div>

    </a-modal>

    <div class="right">

      <div id="roadmap" class="roadmap"></div>

    </div>

  </div>

</template>



<script lang="tsx">

import {Component, Prop, Vue, Model, Watch} from "vue-property-decorator";

import { get, post } from "@/util/request";

import org from "@/util/org";

import axios from "axios";

import { jsonp }  from 'vue-jsonp'

import any = jasmine.any;





@Component({

  components: {

    
  }

})

export default class road extends Vue {

  private timevalue:any=[]

  private change1(){

    console.log(this.timevalue);

  }

   private  mounted() {

    this.roadmap();

  }

  private map:any

  private roadmap(){

      this.map = new BMapGL.Map('roadmap')

      // 设置地图中心点和缩放级别

      var point = new BMapGL.Point(116.404, 39.915);

      this.map.centerAndZoom('苏州市', 15);

      this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮，地图可以进行放大、缩小s

  }

  private dataSource: any[] = [];

  private visibleCreateModal1: boolean = false;

  private handleCreateModalCancel1():any{

    this.visibleCreateModal1=false;

  }

  private selectedRows: any[] = [];

  private tableLoading: boolean = false;

  private columns: any[] = [

    {

      title: "起点",

      dataIndex: "startPoint"

    },

    {

      title: "终点",

      dataIndex: "endPoint"

    },

    {

      title: "操作",

      customRender: this.opRender

    }

  ];

  private openIn(){

    this.visibleCreateModal1=true;

  }

  private startLu:any=''

  private endLu:any=''

  private insertCarLu(){

    post('coordinate/interCruiserRoad',{

      startPoint:this.startLu,

      endPoint:this.endLu

    }).then((res)=>{

      console.log(res);

      this.$message.success(res.data.message)

      this.visibleCreateModal1=false;

      this.startLu=''

      this.endLu=''

      this.selectLu()

    })

  }

  private opRender(text: string, record: any, index: number) {

    return (

        <div style="width:180px">

          <a onClick={() => this.handleEditModalVisible(record)}>

            {" "}

            编辑{" "}

          </a>

          <a-divider type="vertical"/>

           <a onClick={() => this.handleEditbatch(record)}>

            {" "}

            批量添加{" "}

          </a>

          <a-divider type="vertical"/>

          <a-popconfirm

              title="确认删除吗？"

              ok-text="确定"

              cancel-text="取消"

              onConfirm={() => this.deleteDevice(record)}

          >

            <a href="#">删除</a>

          </a-popconfirm>

        </div>

        )

  }

  private deleteDevice(record){

    get('coordinate/deleteCruiserRoad',{

      id:record.coordinateId

    }).then((res)=>{

      console.log(res);

      this.$message.success(res.data.message)

      this.selectLu()

    })

  }

  private pointshow:boolean=false

  private batchid:any=0

  private batchshow:boolean=false

  private handleEditbatch(record){

    this.startstate='batch'

    this.batchshow=true

    this.selectCar();

    this.batchid=record.coordinateId

  }

  private handlebatch(){

    this.batchshow=false

    this.handlenull();

  }

  private handlenull(){

    this.starttime=''

    this.endtime=''

    
  }

  private insertbatch(){

     post('coordinateDetail/batch',{

       coordinateId:this.batchid,

        time1:this.starttime,

        time2:this.endtime,

        mac:this.carvalue,

    }).then((res=>{

      console.log(res);

      this.$message.success(res.data.message)

      this.starttime=''

      this.endtime=''

      this.selectCar()

    }))

  }

  private upa=''

  private recordid:any=0

  private handleEditModalVisible(record){

    this.handlebatch()

    this.startstate='none'

    this.upa='upa'

    this.recordid=record.coordinateId

    if(this.carvalue==='请选择走航车'){

      this.$message.warning('请选择走航车')

      return

    }

    if(this.timevalue.length===0){

      this.$message.warning('请选择时间')

      return

    }

    post('coordinateDetail/select',{

      coordinateId:record.coordinateId,

      // time1:'2023-08-05 00:00:00',

      // time2:'2023-08-06 00:00:00',

      time1:this.timevalue[0],

      time2:this.timevalue[1],

      mac:this.carvalue,

    }).then((res)=>{

      console.log(res);

      this.carDate=[]

      this.pointshow=true

      this.setMarker(res)

    })

  }

  private openupa(){

    post('coordinateDetail/insert',{

      coordinateId:this.recordid,

      data:this.dataList

    }).then((res)=>{

      console.log(res);

      this.$message.success(res.data.message)

      this.upa=''

      this.dataList=[]

      this.carDate=[]

      this.selectCar()

    })

  }

  private inupa(){

    this.upa=''

  }

  private carvalue:any='请选择走航车'

  private carIndex:any=[]

  private car(){

    get('cruiserInfo/selectCruisers',{

    }).then((res)=>{

      this.carIndex=res.data.data;

      console.log(this.carIndex);

    })

  }

  private carDate:any=[]

  private selectCar(){

    console.log(this.timevalue);

    if(this.carvalue==='请选择走航车'){

      this.$message.warning('请选择走航车')

      return

    }

    if(this.timevalue.length===0){

      this.$message.warning('请选择时间')

      return

    }

    get('cruiserInfo/getCruiserInFo',{

      mac:this.carvalue,

      // time1:'2023-08-05 00:00:00',

      // time2:'2023-08-06 00:00:00'

      time1:this.timevalue[0],

      time2:this.timevalue[1]

    }).then((res)=>{

      console.log(res.data.data,'res');

      // console.log(this.carDate,'this.carDate');

      this.carDate=[]

      this.pointshow=false

      this.setMarker(res)

    })

  }

  private markerdata:any=[]

  private marker:any=[]

  private dataList:any=[]

  private indataList:any=[]

  private LudataList:any=[]

  private carDataList:any=[]

  private starttime:any=''

  private endtime:any=''

  private startstate:any='none'

  private  setMarker(res) {

    console.log(res);

    const that=this

     that.carDate=[]

     that.carDataList=[]

     for(var i=0;i<res.data.data.rsData.length;i++){

        // res.data.data.rsData[i].flylat=res.data.data.rsData[i].flylat+'°'.toString()

        // res.data.data.rsData[i].flylon=res.data.data.rsData[i].flylon+'°'.toString()

        that.carDate.push(res.data.data.rsData[i])

      }

       for(var i=0;i<res.data.data.data.length;i++){

        // res.data.data.rsData[i].flylat=res.data.data.rsData[i].flylat+'°'.toString()

        // res.data.data.rsData[i].flylon=res.data.data.rsData[i].flylon+'°'.toString()

        that.carDataList.push(res.data.data.data[i])

      }

      console.log(that.carDate,'that.carDate');

      console.log(that.carDataList,'that.carDataList');

      that.map.clearOverlays()

      let bPoints = []

      let aPoints = []

      if (res.status ===200) {

        for (let i = 0; i < that.carDate.length; i++) {

          //创建单个point

          var myIcon = new BMapGL.Icon(require("@/assets/723cd95f31481a502d495b2d814d658.png"), new BMapGL.Size(50, 50), {

            });

          const statePoint = new BMapGL.Point(that.carDate[i].flylon,that.carDate[i].flylat);

          // console.log(statePoint,'statePoint');

          bPoints.push(statePoint)

          //将marker保存在data函数中 后续需要使用

          that.marker[i] = new BMapGL.Marker(statePoint,{icon:myIcon});

          that.marker[i].customData = {data: that.carDate[i].data,state: that.carDate[i].state};

          //在地图中添加marker

          that.map.addOverlay(that.marker[i]);

          that.marker[i].addEventListener("click",function(){

          console.log(that.carDate[i].data,'that.carDate[i].data');

            switch(that.carDate[i].state){

              case '1':

                  that.marker[i].setIcon(new BMapGL.Icon(require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"), new BMapGL.Size(50, 50)

              ));

                that.carDate[i].state='2'

                break;

              case '2':

                 that.marker[i].setIcon(new BMapGL.Icon(require("@/assets/723cd95f31481a502d495b2d814d658.png"), new BMapGL.Size(50, 50)

              ));

                that.carDate[i].state='1'

            }

                that.dataList.push({code:that.carDate[i].data,state:that.carDate[i].state});

              if(that.startstate==='batch'){

                if(that.starttime!==''&&that.endtime!==''){

                  that.$message.warning('请先清空')

                  return

                }

                 if(that.starttime===''){

                  that.starttime=that.carDate[i].time

                  }else{

                    that.endtime=that.carDate[i].time

                  }

              }

                
                     
            for (let i = 0; i < that.dataList.length; i++) {

              /*获取当前元素后的所有元素*/

              for (let j = i + 1; j < that.dataList.length; j++) {

                //判断两个元素的值是否相等

                if (that.dataList[i].code == that.dataList[j].code) {

                  //如果相等则证明出现了重复的元素，则删除j对应的元素

                  that.dataList.splice(j, 1);

                   if(that.dataList[i].state==='1'){

                    that.dataList[i].state='2'

                   }else{

                    that.dataList[i].state='1'

                   }

                }

              }

            }

          }); //监听事件

        }



        for (let i = 0; i < that.carDataList.length; i++) {

          console.log(that.carDataList[i],'that.carDataList[i]');

          //创建单个point

          var myIcon = new BMapGL.Icon(require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"), new BMapGL.Size(50, 50), {

            });

          const statePoint = new BMapGL.Point(that.carDataList[i].longitude,that.carDataList[i].latitude);

          // console.log(statePoint,'statePoint');

          aPoints.push(statePoint)

          //将marker保存在data函数中 后续需要使用

          that.markerdata[i] = new BMapGL.Marker(statePoint,{icon:myIcon});

          that.markerdata[i].customData = {data: that.carDataList[i].code,state: that.carDataList[i].state,id:that.carDataList[i].id};

          //在地图中添加marker

          that.map.addOverlay(that.markerdata[i]);

          that.markerdata[i].addEventListener("click",function(){

            switch(that.carDataList[i].state){

              case '1':

                 that.markerdata[i].setIcon(new BMapGL.Icon(require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"), new BMapGL.Size(50, 50)

              ));

              that.carDataList[i].state='2';

              break;

              case '2':

                console.log(123);

               that.markerdata[i].setIcon(new BMapGL.Icon(require("@/assets/723cd95f31481a502d495b2d814d658.png"), new BMapGL.Size(50, 50)

              ));

              that.carDataList[i].state='1';

              break;

            }

                that.dataList.push({code:that.carDataList[i].code,state:that.carDataList[i].state,id:that.carDataList[i].id});

              console.log(that.dataList);

            for (let i = 0; i < that.dataList.length; i++) {

              /*获取当前元素后的所有元素*/

              for (let j = i + 1; j < that.dataList.length; j++) {

                //判断两个元素的值是否相等

                if (that.dataList[i].code == that.dataList[j].code) {

                  //如果相等则证明出现了重复的元素，则删除j对应的元素

                  that.dataList.splice(j, 1);

                   if(that.dataList[i].state==='1'){

                    that.dataList[i].state='2'

                   }else{

                    that.dataList[i].state='1'

                   }

                }

              }

              // that.indataList = Array.from(new Set(that.dataList))

            }

          }); //监听事件

        }



        //重新定义地图的缩放和中心点

        if(that.pointshow===false){

          that.setZoom(bPoints)

        }else{

          that.setZoom(aPoints)

        }

      }

    }

    private setZoom(bPoints) {

      var view = this.map.getViewport(eval(bPoints));

      var mapZoom = view.zoom;

      var centerPoint = view.center;

      this.map.centerAndZoom(centerPoint, mapZoom);

    }



    private selectLu(){

      get('coordinate/selectCruiserRoad',{

      }).then((res)=>{

        this.dataSource=res.data.data

      })

    }

  private created () {

    this.car()  
    this.selectLu()

  }



}

</script>



<style lang="less">

.roadmap {

  width: 100%;

  float: right;

  height: 50rem;

}

.BMap_cpyCtrl {

  display: none;

}

.anchorBL {

  display: none;

}

.left {

  width: 32%;

  background-color: white;

  padding: 10px;

}

.right {

  width: 68%;

}

.left-one {

  margin-top: 5px;

  height: 60px;

  border-bottom: 1px dashed gray;

}

.left-two {

  margin-top: 30px;

}

.BMap_Marker.BMap_noprint {

  width: 23px;

}

</style>


 src/views/passport/login/successLoginRoutee.ts

@@ -113,6 +113,15 @@
        title: '设备配置'

    },

}

const road = {

    path: 'road',

    name: '/other/road',

    component: () => import(/* webpackChunkName: "list" */ '@/views/list/road.vue'),

    meta: {

        routerGuard: true,

        title: '路径规划'

    },

}



const specialDevice = {

    path: 'specialDevice',

@@ -173,6 +182,7 @@
    sensorBasic: sensorBasic,

    sensorChangeUnit: sensorChangeUnit,

    basic: basic,

    road:road,

    deviceVersion: deviceVersion,

    deviceMonitorPoint: deviceMonitorPoint,

    specialDevice: specialDevice,


 src/views/system/organization.vue

@@ -124,7 +124,7 @@
                  @change="handleChange">

                <!--                       @blur="handleBlur"-->

                <a-select-option v-for="(item,index) of orgMenu" :value="item.id"> {{ item.name }}</a-select-option>

              </a-select>npm run

              </a-select>

            </a-form-model-item>

          </a-col>

          <a-col :md="11" :sm="24">