|
|
@@ -28,16 +28,33 @@
|
|
|
</el-row>
|
|
|
<kt-common-table
|
|
|
:tableHeights="700"
|
|
|
- :showOperation="false"
|
|
|
: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
|
|
|
@@ -68,6 +85,9 @@ export default {
|
|
|
],
|
|
|
oderStateoptions:[],
|
|
|
rescueTypeoptions:[],
|
|
|
+ dialogVisible:false,
|
|
|
+ arrmap: [],
|
|
|
+ mapCenter:[]
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -75,8 +95,67 @@ export default {
|
|
|
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: {
|
|
|
- getDictItems: function(typeName) {
|
|
|
+ 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) {
|
lihongxiao