|
|
@@ -0,0 +1,259 @@
|
|
|
+<template>
|
|
|
+ <div class="body shh_body">
|
|
|
+ <div class="header">
|
|
|
+ <h1 class="header_title">松花湖景区通</h1>
|
|
|
+ <span class="time">{{ currentTime }}</span>
|
|
|
+ </div>
|
|
|
+ <div id="parkCar" class="shh_part parkinglot">
|
|
|
+ <div class="shh_part_div" v-for="(item,index) in parkingLots" :key="index">
|
|
|
+ <img :src="getImgUrl(item.parkId)"/>
|
|
|
+ <div class="shh_txt">
|
|
|
+ <h1>{{ getParkingLotName(item.parkId) }}</h1>
|
|
|
+ <table style="width: 100%;color: white;border-collapse: collapse;">
|
|
|
+ <tr>
|
|
|
+ <td>总车位数：{{ item.allSpaceNumber }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>剩余车位：{{ item.remainSpaceNumber }}</td>
|
|
|
+ <td style="padding: 0 25px;">已用车位：{{ item.useSpaceNumber }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>当天出场车辆：{{ item.outParkCount }}</td>
|
|
|
+ <td style="padding: 0 25px;">当前在场车辆：{{ item.inParkCount }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>当天线下支付金额：{{ item.totalOutMoney }}</td>
|
|
|
+ <td style="padding: 0 25px;">当天网络支付金额：{{ item.totalPreMoney }}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="selectDate">
|
|
|
+ <div class="_moreMenu">
|
|
|
+ <ul id="myList" class="listContain">
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--游船视图页面-->
|
|
|
+ <div id="map"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+
|
|
|
+import {getGpsByDid, getShipRoute} from "@/api/ship/shipMapping";
|
|
|
+import {getParkData} from "@/api/park/parkLot";
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "songhuaIndex",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataSource: [],
|
|
|
+ parkingLots: [],
|
|
|
+ map: [],
|
|
|
+ currentTime: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 初始加载时间
|
|
|
+ this.getCurrentTime();
|
|
|
+ // 每秒刷新时间
|
|
|
+ setInterval(() => {
|
|
|
+ this.getCurrentTime();
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ setInterval(() => {
|
|
|
+ this.fetchParkingLots();
|
|
|
+ }, 1000 * 60 * 2);
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.handler();
|
|
|
+ this.fetchParkingLots();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getCurrentTime() {
|
|
|
+ const now = new Date();
|
|
|
+ const year = now.getFullYear();
|
|
|
+ const month = now.getMonth() + 1;
|
|
|
+ const date = now.getDate();
|
|
|
+ const day = now.getDay();
|
|
|
+ const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
|
|
+ const hour = now.getHours();
|
|
|
+ const minute = now.getMinutes();
|
|
|
+ const second = now.getSeconds();
|
|
|
+
|
|
|
+ const formattedMonth = month < 10 ? `0${month}` : month;
|
|
|
+ const formattedDate = date < 10 ? `0${date}` : date;
|
|
|
+ const formattedHour = hour < 10 ? `0${hour}` : hour;
|
|
|
+ const formattedMinute = minute < 10 ? `0${minute}` : minute;
|
|
|
+ const formattedSecond = second < 10 ? `0${second}` : second;
|
|
|
+
|
|
|
+ this.currentTime = `${year}年${formattedMonth}月${formattedDate}日 ${weekDays[day]} ${formattedHour}:${formattedMinute}:${formattedSecond}`;
|
|
|
+ },
|
|
|
+ fetchParkingLots() {
|
|
|
+ getParkData().then(response => {
|
|
|
+ this.parkingLots = response.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getImgUrl(parkId) {
|
|
|
+ switch (parkId) {
|
|
|
+ case "15305":
|
|
|
+ return require("@/assets/images/shh_part" + 1 + ".png");
|
|
|
+ case "15338":
|
|
|
+ return require("@/assets/images/shh_part" + 2 + ".png");
|
|
|
+ // 可以继续添加其他停车场的情况
|
|
|
+ // default:
|
|
|
+ // return "未知停车场";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getParkingLotName(parkId) {
|
|
|
+ // 在这里根据 parkId 返回停车场名称
|
|
|
+ switch (parkId) {
|
|
|
+ case "15305":
|
|
|
+ return "一号松花湖停车场";
|
|
|
+ case "15338":
|
|
|
+ return "二号松花湖停车场";
|
|
|
+ // 可以继续添加其他停车场的情况
|
|
|
+ // default:
|
|
|
+ // return "未知停车场";
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //地图
|
|
|
+ handler() {
|
|
|
+ getShipRoute().then(res => {
|
|
|
+ let that = this
|
|
|
+ if (res.code == 200) {
|
|
|
+ that.dataSource = res.data
|
|
|
+ let ul;
|
|
|
+ let dataList = that.dataSource
|
|
|
+ that.map = new BMap.Map('map'); // 创建Map实例
|
|
|
+ that.map.centerAndZoom(new BMap.Point(126.85912, 43.671033), 13); // 初始化地图,设置中心点坐标和地图级别
|
|
|
+ that.map.enableScrollWheelZoom(true);
|
|
|
+ let mapStyle = {
|
|
|
+ style: 'midnight',
|
|
|
+ };
|
|
|
+ that.map.setMapStyle(mapStyle);
|
|
|
+ for (let i = 0; i < dataList.length; i++) {
|
|
|
+ let pointArray = [];
|
|
|
+ for (let j = 0; j < dataList[i].polylinePath.length; j++) {
|
|
|
+ pointArray.push(new BMap.Point(dataList[i].polylinePath[j].lng, dataList[i].polylinePath[j].lat))
|
|
|
+ }
|
|
|
+ // 创建小船图标
|
|
|
+ var myIcon = new BMap.Icon(require("@/assets/images/ship.png"), new BMap.Size(52, 26));
|
|
|
+ var marker = new BMap.Marker(new BMap.Point(dataList[i].polylinePath[0].lng, dataList[i].polylinePath[0].lat), {icon: myIcon}); // 创建点
|
|
|
+ var opts = {
|
|
|
+ width: 100, // 信息窗口宽度
|
|
|
+ height: 80, // 信息窗口高度
|
|
|
+ title: "游船信息", // 信息窗口标题
|
|
|
+ }
|
|
|
+ // marker添加点击事件
|
|
|
+ marker.addEventListener('mouseover', function () {
|
|
|
+ this.map.openInfoWindow(new BMap.InfoWindow("游船名称:" + dataList[i].shipName + "</br>" + "游船型号:" + dataList[i].shipType + "</br>" + "驱动类型:" + dataList[i].propulsion + "</br>", opts), new BMap.Point(dataList[i].polylinePath[0].lng, dataList[i].polylinePath[0].lat));
|
|
|
+ });
|
|
|
+ marker.addEventListener('mouseout', function () {
|
|
|
+ this.map.closeInfoWindow();
|
|
|
+ });
|
|
|
+ this.map.addOverlay(marker);
|
|
|
+ }
|
|
|
+ ul = document.getElementById('myList');
|
|
|
+ // 循环数组中的每个项目
|
|
|
+ dataList.concat(dataList).forEach(function (item) {
|
|
|
+ // 创建一个新的li元素
|
|
|
+ var li = document.createElement('li');
|
|
|
+ // 设置li元素的内容
|
|
|
+ li.textContent = item.shipName;
|
|
|
+ li.style.transform = 'translateX(22px)';
|
|
|
+ li.style.cursor = 'pointer';
|
|
|
+ // 添加点击事件处理程序
|
|
|
+ li.addEventListener('click', (e) => {
|
|
|
+ // 重置状态
|
|
|
+ const liSets = document.getElementById('myList').getElementsByTagName('li')
|
|
|
+ const length = liSets.length;
|
|
|
+ for (var i = 0; i < length; i++) {
|
|
|
+ liSets[i].style.color = '#3CDFFF';
|
|
|
+ }
|
|
|
+ // 在这里添加你想执行的点击事件代码
|
|
|
+ that.selectGpsByDid(item.registrationNumber)
|
|
|
+ console.log(e.target)
|
|
|
+ e.target.style.color = '#fff'
|
|
|
+ // 可以进行其他操作，如触发其他函数或改变元素样式等
|
|
|
+ });
|
|
|
+ // 将li元素添加到ul中
|
|
|
+ ul.appendChild(li);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ that.$modal.msgError("查询失败");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectGpsByDid(val) {
|
|
|
+ this.map.clearOverlays();
|
|
|
+ let marker;
|
|
|
+ let polyline;
|
|
|
+ let opts;
|
|
|
+ getGpsByDid(val).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ let dataList = res.data
|
|
|
+ for (let i = 0; i < dataList.length; i++) {
|
|
|
+ let pointArray = [];
|
|
|
+ for (let j = 0; j < dataList[i].polylinePath.length; j++) {
|
|
|
+ pointArray.push(new BMap.Point(dataList[i].polylinePath[j].lng, dataList[i].polylinePath[j].lat))
|
|
|
+ }
|
|
|
+ polyline = new BMap.Polyline(pointArray, {
|
|
|
+ strokeColor: dataList[i].color,
|
|
|
+ strokeWeight: 5,
|
|
|
+ strokeOpacity: 0.5
|
|
|
+ });//创建折线
|
|
|
+ // 创建小船图标
|
|
|
+ var myIcon = new BMap.Icon(require("@/assets/images/ship.png"), new BMap.Size(52, 26));
|
|
|
+ marker = new BMap.Marker(new BMap.Point(dataList[i].polylinePath[0].lng, dataList[i].polylinePath[0].lat), {icon: myIcon}); // 创建点
|
|
|
+ opts = {
|
|
|
+ width: 100, // 信息窗口宽度
|
|
|
+ height: 80, // 信息窗口高度
|
|
|
+ title: "游船信息", // 信息窗口标题
|
|
|
+ }
|
|
|
+ // marker添加点击事件
|
|
|
+ marker.addEventListener('mouseover', function () {
|
|
|
+ this.map.openInfoWindow(new BMap.InfoWindow("游船名称:" + dataList[i].shipName + "</br>" + "游船型号:" + dataList[i].shipType + "</br>" + "驱动类型:" + dataList[i].propulsion + "</br>", opts), new BMap.Point(dataList[i].polylinePath[0].lng, dataList[i].polylinePath[0].lat));
|
|
|
+ });
|
|
|
+ marker.addEventListener('mouseout', function () {
|
|
|
+ this.map.closeInfoWindow();
|
|
|
+ });
|
|
|
+ this.map.addOverlay(polyline);
|
|
|
+ this.map.addOverlay(marker);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$modal.msgError("查询失败");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import "@/assets/styles/shh_body.scss";
|
|
|
+@import "@/assets/styles/shh_index.scss";
|
|
|
+
|
|
|
+.listContain{
|
|
|
+ height: 465px;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: scroll;
|
|
|
+}
|
|
|
+.listContain::-webkit-scrollbar{
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.parkinglot{
|
|
|
+ background: rgba(0, 0, 0, 0.5) !important;
|
|
|
+}
|
|
|
+.anchorBL{
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+.BMap_cpyCtrl{
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+</style>
|
yuhang Fu