vue-insagent-pc/src/views/ServiceManagement/OneClickRescue/OrderInquiry.vue

<template>
  <div>
  <el-row>
    <el-form :inline="true" :model="formInline" class="demo-form-inline"  label-width="130px" size="small">
  <el-form-item label="车牌号">
    <el-input v-model="formInline.licencePlate" placeholder="车牌号" clearable></el-input>
  </el-form-item>
  <el-form-item label="救援起点">
    <el-input v-model="formInline.rescueStarting" placeholder="救援起点" clearable></el-input>
  </el-form-item>
  <el-form-item label="救援终点">
    <el-input v-model="formInline.rescuePosition" placeholder="救援终点" clearable></el-input>
  </el-form-item>
  <el-form-item label="订单状态">
    <el-select v-model="formInline.orderState" placeholder="订单状态" clearable>
      <el-option  v-for="val in oderStateoptions" :key="val.label" :label="val.dictTag" :value="val.dictValue" ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="服务类型">
    <el-select v-model="formInline.serveCode" placeholder="服务类型" clearable>
      <el-option  v-for="val in rescueTypeoptions" :key="val.label" :label="val.dictTag" :value="val.dictValue" ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="findPage">查询</el-button>
  </el-form-item>
</el-form>
  </el-row>
  <kt-common-table
    :tableHeights="700"
    :SerialShow="false"
    :data="pageResult"
    :columns="columns"
    button2Name="详情"
    permsButton2="sys:orderInquiry1:detail"
    @handleButton2="handleButton" 
    @findPage="findPage"
  ></kt-common-table>

  <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="50%"
  :before-close="handleClose">
    <div  style="width: 100%; height: 400px" id="map" ></div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">关闭</el-button>
  </span>
</el-dialog>
</div>
</template>
<script>
import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
	securityJsCode: 'd62687dd438cfadd859bbab66d8e41a2',		//安全密钥
}
export default {
  components: {
    KtCommonTable
  },
  data() {
    return {
      pageRequest: {
        pageNum: 1,
        pageSize: 20
      },
      formInline:{},
      pageResult: [],
      columns: [
        //数据列
        { prop: "id", label: "订单ID",},
        { prop: "licencePlate", label: "车牌号",  },
        { prop: "orderState", label: "订单状态" },
        {
          prop: "phoneNumber",
          label: "联系人电话",
        },
        { prop: "rescueStarting", label: "救援起点" },
        { prop: "rescuePosition", label: "救援终点" },
        { prop: "rescueScene", label: "救援场景" },
        { prop: "rescueSum", label: "救援金额" },
        { prop: "rescueUser", label: "救援联系人" },
        { prop: "serveCode", label: "服务类型" },
      ],
      oderStateoptions:[],
      rescueTypeoptions:[],
      dialogVisible:false,
      arrmap: [],
      mapCenter:[]
    };
  },
  created() {
      //获取所有下拉框数据
      this.getDictItems("oderState");
      this.getDictItems("rescueType");
    },
    async mounted(){
      
      await AMapLoader.load({
        key: '262c17c813cdaab1bf93bfeb9873a6c8',
        version: '2.0',
       plugins: ['AMap.Geolocation', 'AMap.Marker']
      })
    },
    updated() {
      if(this.dialogVisible){
        this.initMap();
      }
    },
  methods: {
    initMap(){
      this. map = new AMap.Map('map', {
        zoom: 13, // 缩放级别
        viewMode: '3D',
        // resizeEnable: true,
        center:this.mapCenter, // 中心点坐标
      });
      this.addMarkers()
    },
    addMarkers(){
      this.arrmap.forEach(marker => {
        const [longitude, latitude]= marker.lnglat;
        const markerObj= new window.AMap.Marker({position:[longitude,latitude],title: marker.title,
          direction: 'right',
            offset: new AMap.Pixel(10, 0),
            map: this.map,
          // icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          });
          markerObj.setLabel({
            direction: 'right',
            offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
            content: marker.title, //设置文本标注内容
          });
          markerObj.on('click',()=>{console.log(marker.title);});
      });
    },
    handleButton({row,index}){
      if(row.startingLatitude&& row.startingLongitude && row.positionLatitude && row.positionLongitude){
        this.arrmap=[
        {
          lnglat:[row.startingLatitude,row.startingLongitude],
          title:row.rescueStarting,
        },{
          lnglat:[row.positionLatitude,row.positionLongitude],
          title:row.rescuePosition,
        },
      ]
      let latitude= (row.startingLatitude+ row.positionLatitude) / 2
      let longitude= (row.startingLongitude+ row.positionLongitude) / 2
      this.mapCenter=[latitude,longitude]
      }
      this.dialogVisible = true
    },
    handleClose(){
      this.dialogVisible = false
    },
       getDictItems: function(typeName) {
        let that = this;
        this.$api.insCompany.dicType(typeName)
          .then(function(res) {
            that[typeName + "options"] = res.data.ddList; // 把获取到的数据赋给this.data
          })
          .catch(function(error) {
            that[typeName + "options"] = [];
          });
      },
    findPage(data) {
      if (data && data.pageRequest) {
        this.pageRequest.pageNum = data.pageRequest.pageNum;
        this.pageRequest.pageSize = data.pageRequest.pageSize;
      }
      this.$api.one.rescueOrderPage({...this.pageRequest,...this.formInline}).then(res => {
        if(res.code==200){
          this.pageResult = res.data;
        }
      });
    }
  }
};
</script>