vehicleHistory-list.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. <template>
  2. <div>
  3. <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
  4. <el-form-item label="查询时间段" prop="timeRange">
  5. <el-date-picker
  6. type="datetimerange"
  7. v-model="queryModel.timeRange"
  8. start-placeholder="开始时间"
  9. end-placeholder="结束时间"
  10. placeholder="选择时间范围"
  11. format='yyyy-MM-dd HH:mm:ss'
  12. value-format="yyyy-MM-dd HH:mm:ss"
  13. >
  14. </el-date-picker>
  15. </el-form-item>
  16. <el-form-item>
  17. <el-button
  18. type="primary"
  19. size="mini"
  20. icon="ios-search"
  21. @click="changePage(1)"
  22. :loading="loading"
  23. >查询</el-button>&nbsp;
  24. <el-button
  25. type="info"
  26. size="mini"
  27. style="margin-left: 8px"
  28. @click="handleReset('queryForm')"
  29. >重置</el-button>
  30. </el-form-item>
  31. </el-form>
  32. <el-divider></el-divider>
  33. <div class="custom-layout">
  34. <div class="custom-center">
  35. <el-amap
  36. ref="vehicleHistoryMap"
  37. vid="vehicleHistoryMap"
  38. :center="pointPosition"
  39. :zoom="15"
  40. style="width:100%;height:600px;"
  41. :plugin="plugin"
  42. :events="events"
  43. >
  44. <!--数据点-->
  45. <el-amap-marker :zIndex="5"
  46. v-for="(item,index) in itemList"
  47. :key="index"
  48. :position="item.position"
  49. :title="item.title"
  50. :icon="busIcon"
  51. >
  52. </el-amap-marker>
  53. <!--轨迹-->
  54. <el-amap-polyline :path="mapPath"
  55. :zIndex="2"
  56. :isOutline="true"
  57. :outlineColor="'#ffeeff'"
  58. :borderWeight="3"
  59. :strokeColor="'#3366FF'"
  60. :strokeOpacity="1"
  61. :strokeWeight="6"
  62. :strokeStyle="'solid'"
  63. :strokeDasharray="[10, 5]"
  64. :lineJoin="'round'"
  65. :lineCap="'round'"
  66. ></el-amap-polyline>
  67. <!--站点-->
  68. <el-amap-marker
  69. :zIndex="1"
  70. v-for="station in stationList"
  71. :key="station.id"
  72. :position="station.position"
  73. :title="station.title"
  74. :icon="station.icon"
  75. ></el-amap-marker>
  76. </el-amap>
  77. </div>
  78. <div class="custom-right">
  79. <el-table
  80. ref="formTable"
  81. :data="tableData"
  82. v-loading="loading"
  83. element-loading-text="拼命加载中"
  84. stripe
  85. height="600"
  86. @row-click="rowClick"
  87. >
  88. <el-table-column label="经纬度" width="200px">
  89. <template slot-scope="{row}">
  90. <span style="cursor:pointer;">{{row.longitude}},{{row.latitude}}</span>
  91. </template>
  92. </el-table-column>
  93. <el-table-column prop="createTime" width="160px" label="记录时间"></el-table-column>
  94. </el-table>
  95. </div>
  96. </div>
  97. <div style="text-align:right;">
  98. <el-pagination
  99. :current-page.sync="pageIndex"
  100. :total="totalElements"
  101. :page-sizes="pageSizeList"
  102. @current-change="changePage"
  103. @size-change="pageSizeChange"
  104. layout="total, sizes, prev, pager, next"
  105. ></el-pagination>
  106. </div>
  107. </div>
  108. </template>
  109. <script>
  110. import routeInfoApi from "@/api/bus/routeInfo";
  111. import vehicleApi from "@/api/bus/vehicleInfo";
  112. import stationIcon from "@/assets/icons/station.svg";
  113. import greenIcon from "@/assets/icons/green.svg";
  114. import redIcon from "@/assets/icons/red.svg";
  115. import busIcon from "@/assets/icons/bus.svg";
  116. export default {
  117. name:"busVehicleList",
  118. props: ["deviceNo","routeId"],
  119. data(){
  120. return{
  121. busIcon: busIcon,
  122. queryModel: {
  123. timeRange: null
  124. },
  125. loading: false,
  126. tableData: [],
  127. statusData:[],
  128. multipleSelection: [],
  129. stationList: [],
  130. pageIndex: 1,
  131. pageSize: 20,
  132. totalElements: 0,
  133. pageSizeList: [20,50,100,200,500],
  134. pointPosition: [112.240222, 30.337053],
  135. mapPath: [],
  136. itemList: [],
  137. plugin: ["AMap.Scale", "AMap.OverView", "AMap.ToolBar", "AMap.MapType","AMap.RangingTool"],
  138. mapRuler: {},
  139. ranging: false,
  140. events: {
  141. init: (map)=>{
  142. const ruler = new window.AMap.RangingTool(map);
  143. this.mapRuler = ruler
  144. }
  145. }
  146. }
  147. },
  148. methods: {
  149. handleReset(name) {
  150. this.$refs[name].resetFields();
  151. },
  152. changePage(pageIndex) {
  153. this.loading = true;
  154. var formData = new FormData();
  155. formData.append("pageIndex", this.pageIndex);
  156. formData.append("pageSize", this.pageSize);
  157. formData.append("deviceNo", this.deviceNo);
  158. if(this.queryModel.timeRange!=null){
  159. formData.append("startTime", this.queryModel.timeRange[0]);
  160. formData.append("endTime", this.queryModel.timeRange[1]);
  161. }
  162. vehicleApi.gpsHistoryList(formData).then((response)=>{
  163. this.loading = false;
  164. var jsonData = response.data;
  165. this.tableData = jsonData.data.data;
  166. this.totalElements = jsonData.data.recordsTotal;
  167. this.mapPath = [];
  168. if(this.tableData.length>0){
  169. var lngSum = this.tableData.reduce((acc,cur)=>{
  170. return acc + parseFloat(cur.longitude);
  171. },0);
  172. var lngAvg = lngSum / this.tableData.length;
  173. console.log(lngAvg);
  174. this.tableData.forEach(item=>{
  175. var pos = [parseFloat(item.longitude),parseFloat(item.latitude)];
  176. //如果有数据点精度与平均值偏差0.5,则不显示该点
  177. if(Math.abs(lngAvg - pos[0])<0.5){
  178. this.mapPath.push(pos);
  179. }
  180. });
  181. var firstRow = this.tableData[0];
  182. this.rowClick(firstRow);
  183. }
  184. this.pageIndex = pageIndex;
  185. })
  186. },
  187. pageSizeChange(pageSize) {
  188. this.pageSize = pageSize;
  189. this.changePage(1);
  190. },
  191. rowClick(row, column, event) {
  192. this.itemList = [];
  193. this.pointPosition = [parseFloat(row.longitude),parseFloat(row.latitude)];
  194. this.itemList.push({
  195. position: [row.longitude,row.latitude],
  196. title: row.createTime
  197. });
  198. },
  199. //初始化日期
  200. getCurrentMonthFirst() {
  201. var self = this;
  202. var date = new Date();
  203. var startDate = new Date();
  204. var month = parseInt(date.getMonth() + 1);
  205. //当前测温记录
  206. var startMonth = month;
  207. // if (startDate.getDate() < 7) {
  208. // startMonth = startDate.getMonth();
  209. // startDate.setDate(0);
  210. // }
  211. // startDate = startDate.getDate() - 7;
  212. var startTime =
  213. date.getFullYear() + "-" + startMonth + "-" + startDate.getDate() + " 00:00:00";
  214. var endTime =
  215. date.getFullYear() + "-" + month + "-" + date.getDate() + " 23:59:59";
  216. self.queryModel.timeRange = [startTime, endTime];
  217. },
  218. loadRouteMap(routeId) {
  219. //读取当前路线的站点
  220. routeInfoApi.edit(routeId).then((response) => {
  221. var jsonData = response.data;
  222. var model = jsonData.data;
  223. var _stationList = model.stationList;
  224. this.stationList = [];
  225. _stationList.forEach((item) => {
  226. if (item.location != null && item.location.length > 0) {
  227. var station = {
  228. id: item.id,
  229. title: item.name,
  230. position: item.location.split(","),
  231. icon: stationIcon
  232. };
  233. this.stationList.push(station);
  234. if(item.stationSubInfoList!=null){
  235. item.stationSubInfoList.forEach(subItem=>{
  236. var startToEnd = subItem.startStationId == this.stationList[0].id;
  237. this.stationList.push({
  238. id: subItem.id,
  239. title: item.name + "入口" + (startToEnd ? "(起)" : "(终)"),
  240. position: [subItem.longitude,subItem.latitude],
  241. icon: startToEnd ? greenIcon : redIcon
  242. });
  243. });
  244. }
  245. }
  246. });
  247. });
  248. }
  249. },
  250. components: {
  251. },
  252. mounted() {
  253. //this.changePage(1);
  254. //this.loadRouteMap(this.routeId);
  255. },
  256. created() {
  257. }
  258. }
  259. </script>
  260. <style lang="scss" scoped>
  261. .el-divider {
  262. margin: 5px 0;
  263. }
  264. .route-list{
  265. text-align: left;
  266. }
  267. .demo-form-inline {
  268. margin-left: 10px;
  269. text-align: left;
  270. }
  271. .custom-layout{
  272. display: flex;
  273. flex-direction: row;
  274. }
  275. .custom-center{
  276. flex:1;
  277. }
  278. .custom-right{
  279. width: 400px;
  280. }
  281. </style>