由于前两个月项目赶得紧。加班太多。导致微博停更了两个月。今天开始重新开更
<template> <el-row :gutter="10"> <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"><div class="grid-content" style="background-color: #033447"> <div style="width: 100px;height: 30px;background-color: rgba(43,133,235);line-height: 30px;color: white">运单统计</div> <Echarts :right="rightInfo"></Echarts> <div style="width: 100px;height: 30px;background-color: rgba(43,133,235);line-height: 30px;margin-top: 20px;color: white">运单列表</div> <billList :leftList="leftList"></billList> </div></el-col> //这一部分container是高德地图的代码块 <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12"><div class="grid-content bg-purple-light"> <div style="height:912px" id="container" tabindex="0"></div> </div></el-col> <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"><div class="grid-content" style="background-color: #033447"> <div style="width: 100px;height: 30px;background-color: rgba(43,133,235);line-height: 30px;color: white">客户单量</div> <customerBillNum :customerBillNum="leftCustomer"></customerBillNum> <div style="width: 100px;height: 30px;background-color: rgba(43,133,235);line-height: 30px;margin-top: 20px;color: white">货物统计</div> <billInfo :leftChart="leftChart"></billInfo> </div></el-col> </el-row> </template> <link rel="stylesheet" type="text/css" href="css/app.css" /> <script> //这部分import删掉。放了报错 import Echarts from '@/components/Echarts' import billList from '@/components/billList' import billInfo from "@/components/billInfo"; import customerBillNum from '../components/customerBillNum'; //这部分往下不可以删 // 引入地图组件 // import AMap from '../util/Amap' import AMap from 'AMap' export default { name: 'home', components: { Echarts,billList,billInfo,customerBillNum }, data(){ return{ map:null, leftChart:{}, // rowStyle: {height: 40 + 'px'}, leftList:{}, rightInfo:{}, leftCustomer:{}, billWayList:[], markers : [] } }, mounted() { this.billList(); this.init() }, methods:{ // 初始化 init: function () { this.map = new AMap.Map('container', { resizeEnable: true, center: [114.52, 35.10], zoom: 6, mapStyle: 'amap://styles/blue', //设置地图的显示样式 }); this.map.clearMap(); // 清除地图覆盖物 }, //接口 billList(){ this.$http.get('http://localhost:8000/api/billWay/find',{ params:{ sort:'updatedTime,desc' } }).then((res) => { let vlastLocation = res.data.data.vlastLocation; vlastLocation.forEach((value,index,array) => { let postion = []; postion.push(array[index].lon/600000) postion.push(array[index].lat/600000) let marker = new AMap.Marker({ map: this.map, icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png', position: postion, offset: new AMap.Pixel(-13, -30) }); this.map.add(marker) }) }).catch(function(response) { console.log(response); //发生错误时执行的代码 }); } } } </script> <style lang="scss" scoped> .seamless-warp { height: 229px; overflow: hidden; } ::-webkit-scrollbar { width: 1px; height: 1px; } /*el响应式*/ .el-row{ background-color: #033447; width: 100%; } .el-col { border-radius: 4px; background-color:#033447; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } </style>