松花湖景区通 滚动条完善

.history/songhua-ui/src/main_20240521131104.js

@@ -0,0 +1,93 @@
+import Vue from 'vue'
+import BaiduMap from 'vue-baidu-map'
+import Cookies from 'js-cookie'
+
+import Element from 'element-ui'
+import './assets/styles/element-variables.scss'
+
+import '@/assets/styles/index.scss' // global css
+import '@/assets/styles/ruoyi.scss' // ruoyi css
+import App from './App'
+import store from './store'
+import router from './router'
+import directive from './directive' // directive
+import plugins from './plugins' // plugins
+import { download } from '@/utils/request'
+
+import './assets/icons' // icon
+import './permission' // permission control
+import { getDicts } from "@/api/system/dict/data";
+import { getConfigKey } from "@/api/system/config";
+import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+// 分页组件
+import Pagination from "@/components/Pagination";
+// 自定义表格工具组件
+import RightToolbar from "@/components/RightToolbar"
+// 富文本组件
+import Editor from "@/components/Editor"
+// 文件上传组件
+import FileUpload from "@/components/FileUpload"
+// 图片上传组件
+import ImageUpload from "@/components/ImageUpload"
+// 图片预览组件
+import ImagePreview from "@/components/ImagePreview"
+// 字典标签组件
+import DictTag from '@/components/DictTag'
+// 头部标签组件
+import VueMeta from 'vue-meta'
+// 字典数据组件
+import DictData from '@/components/DictData'
+// 引入echarts
+import * as echarts from 'echarts'// 在import的后面，echarts的前面加一个 * as
+Vue.prototype.$echarts = echarts
+
+// 全局方法挂载
+Vue.prototype.getDicts = getDicts
+Vue.prototype.getConfigKey = getConfigKey
+Vue.prototype.parseTime = parseTime
+Vue.prototype.resetForm = resetForm
+Vue.prototype.addDateRange = addDateRange
+Vue.prototype.selectDictLabel = selectDictLabel
+Vue.prototype.selectDictLabels = selectDictLabels
+Vue.prototype.download = download
+Vue.prototype.handleTree = handleTree
+
+// 全局组件挂载
+Vue.component('DictTag', DictTag)
+Vue.component('Pagination', Pagination)
+Vue.component('RightToolbar', RightToolbar)
+Vue.component('Editor', Editor)
+Vue.component('FileUpload', FileUpload)
+Vue.component('ImageUpload', ImageUpload)
+Vue.component('ImagePreview', ImagePreview)
+
+Vue.use(directive)
+Vue.use(plugins)
+Vue.use(VueMeta)
+DictData.install()
+
+/**
+ * If you don't want to use mock-server
+ * you want to use MockJs for mock api
+ * you can execute: mockXHR()
+ *
+ * Currently MockJs will be used in the production environment,
+ * please remove it before going online! ! !
+ */
+
+Vue.use(Element, {
+  size: Cookies.get('size') || 'medium' // set element-ui default size
+})
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  router,
+  store,
+  render: h => h(App)
+})
+Vue.use(BaiduMap, {
+  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
+  ak: 'Qog1nZtgKesJwIoEFpbMke5QvfSkHsnj'
+})

.history/songhua-ui/src/main_20240525111825.js

@@ -0,0 +1,93 @@
+import Vue from 'vue'
+import BaiduMap from 'vue-baidu-map'
+import Cookies from 'js-cookie'
+
+import Element from 'element-ui'
+import './assets/styles/element-variables.scss'
+
+import '@/assets/styles/index.scss' // global css
+import '@/assets/styles/ruoyi.scss' // ruoyi css
+import App from './App'
+import store from './store'
+import router from './router'
+import directive from './directive' // directive
+import plugins from './plugins' // plugins
+import { download } from '@/utils/request'
+
+import './assets/icons' // icon
+import './permission' // permission control
+import { getDicts } from "@/api/system/dict/data";
+import { getConfigKey } from "@/api/system/config";
+import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+// 分页组件
+import Pagination from "@/components/Pagination";
+// 自定义表格工具组件
+import RightToolbar from "@/components/RightToolbar"
+// 富文本组件
+import Editor from "@/components/Editor"
+// 文件上传组件
+import FileUpload from "@/components/FileUpload"
+// 图片上传组件
+import ImageUpload from "@/components/ImageUpload"
+// 图片预览组件
+import ImagePreview from "@/components/ImagePreview"
+// 字典标签组件
+import DictTag from '@/components/DictTag'
+// 头部标签组件
+import VueMeta from 'vue-meta'
+// 字典数据组件
+import DictData from '@/components/DictData'
+// 引入echarts
+import * as echarts from 'echarts'// 在import的后面，echarts的前面加一个 * as
+Vue.prototype.$echarts = echarts
+
+// 全局方法挂载
+Vue.prototype.getDicts = getDicts
+Vue.prototype.getConfigKey = getConfigKey
+Vue.prototype.parseTime = parseTime
+Vue.prototype.resetForm = resetForm
+Vue.prototype.addDateRange = addDateRange
+Vue.prototype.selectDictLabel = selectDictLabel
+Vue.prototype.selectDictLabels = selectDictLabels
+Vue.prototype.download = download
+Vue.prototype.handleTree = handleTree
+
+// 全局组件挂载
+Vue.component('DictTag', DictTag)
+Vue.component('Pagination', Pagination)
+Vue.component('RightToolbar', RightToolbar)
+Vue.component('Editor', Editor)
+Vue.component('FileUpload', FileUpload)
+Vue.component('ImageUpload', ImageUpload)
+Vue.component('ImagePreview', ImagePreview)
+
+Vue.use(directive)
+Vue.use(plugins)
+Vue.use(VueMeta)
+DictData.install()
+
+/**
+ * If you don't want to use mock-server
+ * you want to use MockJs for mock api
+ * you can execute: mockXHR()
+ *
+ * Currently MockJs will be used in the production environment,
+ * please remove it before going online! ! !
+ */
+
+Vue.use(Element, {
+  size: Cookies.get('size') || 'medium' // set element-ui default size
+})
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  router,
+  store,
+  render: h => h(App)
+})
+// Vue.use(BaiduMap, {
+//   // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
+//   ak: 'Qog1nZtgKesJwIoEFpbMke5QvfSkHsnj'
+// })

.history/songhua-ui/src/main_20240525111841.js

@@ -0,0 +1,93 @@
+import Vue from 'vue'
+import BaiduMap from 'vue-baidu-map'
+import Cookies from 'js-cookie'
+
+import Element from 'element-ui'
+import './assets/styles/element-variables.scss'
+
+import '@/assets/styles/index.scss' // global css
+import '@/assets/styles/ruoyi.scss' // ruoyi css
+import App from './App'
+import store from './store'
+import router from './router'
+import directive from './directive' // directive
+import plugins from './plugins' // plugins
+import { download } from '@/utils/request'
+
+import './assets/icons' // icon
+import './permission' // permission control
+import { getDicts } from "@/api/system/dict/data";
+import { getConfigKey } from "@/api/system/config";
+import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+// 分页组件
+import Pagination from "@/components/Pagination";
+// 自定义表格工具组件
+import RightToolbar from "@/components/RightToolbar"
+// 富文本组件
+import Editor from "@/components/Editor"
+// 文件上传组件
+import FileUpload from "@/components/FileUpload"
+// 图片上传组件
+import ImageUpload from "@/components/ImageUpload"
+// 图片预览组件
+import ImagePreview from "@/components/ImagePreview"
+// 字典标签组件
+import DictTag from '@/components/DictTag'
+// 头部标签组件
+import VueMeta from 'vue-meta'
+// 字典数据组件
+import DictData from '@/components/DictData'
+// 引入echarts
+import * as echarts from 'echarts'// 在import的后面，echarts的前面加一个 * as
+Vue.prototype.$echarts = echarts
+
+// 全局方法挂载
+Vue.prototype.getDicts = getDicts
+Vue.prototype.getConfigKey = getConfigKey
+Vue.prototype.parseTime = parseTime
+Vue.prototype.resetForm = resetForm
+Vue.prototype.addDateRange = addDateRange
+Vue.prototype.selectDictLabel = selectDictLabel
+Vue.prototype.selectDictLabels = selectDictLabels
+Vue.prototype.download = download
+Vue.prototype.handleTree = handleTree
+
+// 全局组件挂载
+Vue.component('DictTag', DictTag)
+Vue.component('Pagination', Pagination)
+Vue.component('RightToolbar', RightToolbar)
+Vue.component('Editor', Editor)
+Vue.component('FileUpload', FileUpload)
+Vue.component('ImageUpload', ImageUpload)
+Vue.component('ImagePreview', ImagePreview)
+
+Vue.use(directive)
+Vue.use(plugins)
+Vue.use(VueMeta)
+DictData.install()
+
+/**
+ * If you don't want to use mock-server
+ * you want to use MockJs for mock api
+ * you can execute: mockXHR()
+ *
+ * Currently MockJs will be used in the production environment,
+ * please remove it before going online! ! !
+ */
+
+Vue.use(Element, {
+  size: Cookies.get('size') || 'medium' // set element-ui default size
+})
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  router,
+  store,
+  render: h => h(App)
+})
+Vue.use(BaiduMap, {
+  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
+  ak: 'Qog1nZtgKesJwIoEFpbMke5QvfSkHsnj'
+})

.history/songhua-ui/src/router/index_20240525105058.js

@@ -0,0 +1,219 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+/* Layout */
+import Layout from '@/layout'
+
+/**
+ * Note: 路由配置项
+ *
+ * hidden: true                     // 当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
+ * alwaysShow: true                 // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
+ *                                  // 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
+ *                                  // 若你想不管路由下面的 children 声明的个数都显示你的根路由
+ *                                  // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
+ * redirect: noRedirect             // 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
+ * name:'router-name'               // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
+ * query: '{"id": 1, "name": "ry"}' // 访问路由的默认传递参数
+ * roles: ['admin', 'common']       // 访问路由的角色权限
+ * permissions: ['a:a:a', 'b:b:b']  // 访问路由的菜单权限
+ * meta : {
+ noCache: true                   // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
+ title: 'title'                  // 设置该路由在侧边栏和面包屑中展示的名字
+ icon: 'svg-name'                // 设置该路由的图标，对应路径src/assets/icons/svg
+ breadcrumb: false               // 如果设置为false，则不会在breadcrumb面包屑中显示
+ activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
+ }
+ */
+
+// 公共路由
+export const constantRoutes = [
+  {
+    path: '/redirect',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/redirect/:path(.*)',
+        component: () => import('@/views/redirect')
+      }
+    ]
+  },
+  {
+    path: '/login',
+    component: () => import('@/views/login'),
+    hidden: true
+  },
+  {
+    path: '/songhuaIndex1',
+    component: () => import('@/views/index1/index'),
+    hidden: true
+  },
+  {
+    path: '/register',
+    component: () => import('@/views/register'),
+    hidden: true
+  },
+  {
+    path: '/404',
+    component: () => import('@/views/error/404'),
+    hidden: true
+  },
+  {
+    path: '/401',
+    component: () => import('@/views/error/401'),
+    hidden: true
+  },
+  // SSO-登录用
+  {
+    name: 'sso-login',
+    path: '/sso-login',
+    component: () => import('@/views/sso/sso-login'),
+  },
+  {
+    path: '',
+    component: Layout,
+    redirect: 'index',
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/index'),
+        name: 'Index',
+        meta: { title: '首页', icon: 'dashboard', affix: true }
+      }
+    ]
+  },
+  {
+    path: '/user',
+    component: Layout,
+    hidden: true,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'profile',
+        component: () => import('@/views/system/user/profile/index'),
+        name: 'Profile',
+        meta: { title: '个人中心', icon: 'user' }
+      }
+    ]
+  },
+  // {
+  //林业中心
+  // path: '/songhuaIndex',
+  // name: 'songhuaIndex',
+  // component: () => import('@/views/index/index'),
+  // meta: {
+  //   title: '松花湖'
+  // }
+  //   path: 'http://dsj.1230t.com/',
+  //   name: 'songhuaIndex',
+  //   component: () => import('@/views/index/index'),
+  //   meta: {
+  //     title: '易景通数据指数',
+  //     icon: ['dashboard'] // 添加图标
+  //   }
+  // },
+  // {
+  //   path: '/songhuaIndex1',
+  //   name: 'songhuaIndex1',
+  //   component: () => import('@/views/index1/index'),
+  //   meta: {
+  //     title: '松花湖景区通',
+  //     icon: ['eye-open'] // 添加图标
+  //   }
+  // },
+]
+
+// 动态路由，基于用户权限动态去加载
+export const dynamicRoutes = [
+  {
+    path: '/system/user-auth',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:user:edit'],
+    children: [
+      {
+        path: 'role/:userId(\\d+)',
+        component: () => import('@/views/system/user/authRole'),
+        name: 'AuthRole',
+        meta: { title: '分配角色', activeMenu: '/system/user' }
+      }
+    ]
+  },
+  {
+    path: '/system/role-auth',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:role:edit'],
+    children: [
+      {
+        path: 'user/:roleId(\\d+)',
+        component: () => import('@/views/system/role/authUser'),
+        name: 'AuthUser',
+        meta: { title: '分配用户', activeMenu: '/system/role' }
+      }
+    ]
+  },
+  {
+    path: '/system/dict-data',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:dict:list'],
+    children: [
+      {
+        path: 'index/:dictId(\\d+)',
+        component: () => import('@/views/system/dict/data'),
+        name: 'Data',
+        meta: { title: '字典数据', activeMenu: '/system/dict' }
+      }
+    ]
+  },
+  {
+    path: '/monitor/job-log',
+    component: Layout,
+    hidden: true,
+    permissions: ['monitor:job:list'],
+    children: [
+      {
+        path: 'index/:jobId(\\d+)',
+        component: () => import('@/views/monitor/job/log'),
+        name: 'JobLog',
+        meta: { title: '调度日志', activeMenu: '/monitor/job' }
+      }
+    ]
+  },
+  {
+    path: '/tool/gen-edit',
+    component: Layout,
+    hidden: true,
+    permissions: ['tool:gen:edit'],
+    children: [
+      {
+        path: 'index/:tableId(\\d+)',
+        component: () => import('@/views/tool/gen/editTable'),
+        name: 'GenEdit',
+        meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
+      }
+    ]
+  }
+]
+
+// 防止连续点击多次路由报错
+let routerPush = Router.prototype.push;
+let routerReplace = Router.prototype.replace;
+// push
+Router.prototype.push = function push(location) {
+  return routerPush.call(this, location).catch(err => err)
+}
+// replace
+Router.prototype.replace = function push(location) {
+  return routerReplace.call(this, location).catch(err => err)
+}
+
+export default new Router({
+  mode: 'history', // 去掉url中的#
+  scrollBehavior: () => ({ y: 0 }),
+  routes: constantRoutes
+})

.history/songhua-ui/src/router/index_20240528092847.js

@@ -0,0 +1,219 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+/* Layout */
+import Layout from '@/layout'
+
+/**
+ * Note: 路由配置项
+ *
+ * hidden: true                     // 当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
+ * alwaysShow: true                 // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
+ *                                  // 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
+ *                                  // 若你想不管路由下面的 children 声明的个数都显示你的根路由
+ *                                  // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
+ * redirect: noRedirect             // 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
+ * name:'router-name'               // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
+ * query: '{"id": 1, "name": "ry"}' // 访问路由的默认传递参数
+ * roles: ['admin', 'common']       // 访问路由的角色权限
+ * permissions: ['a:a:a', 'b:b:b']  // 访问路由的菜单权限
+ * meta : {
+ noCache: true                   // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
+ title: 'title'                  // 设置该路由在侧边栏和面包屑中展示的名字
+ icon: 'svg-name'                // 设置该路由的图标，对应路径src/assets/icons/svg
+ breadcrumb: false               // 如果设置为false，则不会在breadcrumb面包屑中显示
+ activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
+ }
+ */
+
+// 公共路由
+export const constantRoutes = [
+  {
+    path: '/redirect',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/redirect/:path(.*)',
+        component: () => import('@/views/redirect')
+      }
+    ]
+  },
+  {
+    path: '/login',
+    component: () => import('@/views/login'),
+    hidden: true
+  },
+  {
+    path: '/songhuaIndex1',
+    component: () => import('@/views/index1/index'),
+    hidden: true
+  },
+  {
+    path: '/register',
+    component: () => import('@/views/register'),
+    hidden: true
+  },
+  {
+    path: '/404',
+    component: () => import('@/views/error/404'),
+    hidden: true
+  },
+  {
+    path: '/401',
+    component: () => import('@/views/error/401'),
+    hidden: true
+  },
+  // SSO-登录用
+  {
+    name: 'sso-login',
+    path: '/sso-login',
+    component: () => import('@/views/sso/sso-login'),
+  },
+  {
+    path: '',
+    component: Layout,
+    redirect: 'index',
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/index'),
+        name: 'Index',
+        meta: { title: '首页', icon: 'dashboard', affix: true }
+      }
+    ]
+  },
+  {
+    path: '/user',
+    component: Layout,
+    hidden: true,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'profile',
+        component: () => import('@/views/system/user/profile/index'),
+        name: 'Profile',
+        meta: { title: '个人中心', icon: 'user' }
+      }
+    ]
+  },
+  {
+  // 林业中心
+  path: '/songhuaIndex',
+  name: 'songhuaIndex',
+  component: () => import('@/views/index/index'),
+  meta: {
+    title: '松花湖'
+  }
+    // path: 'http://dsj.1230t.com/',
+    // name: 'songhuaIndex',
+    // component: () => import('@/views/index/index'),
+    // meta: {
+    //   title: '易景通数据指数',
+    //   icon: ['dashboard'] // 添加图标
+    // }
+  },
+  {
+    path: '/songhuaIndex1',
+    name: 'songhuaIndex1',
+    component: () => import('@/views/index1/index'),
+    meta: {
+      title: '松花湖景区通',
+      icon: ['eye-open'] // 添加图标
+    }
+  },
+]
+
+// 动态路由，基于用户权限动态去加载
+export const dynamicRoutes = [
+  {
+    path: '/system/user-auth',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:user:edit'],
+    children: [
+      {
+        path: 'role/:userId(\\d+)',
+        component: () => import('@/views/system/user/authRole'),
+        name: 'AuthRole',
+        meta: { title: '分配角色', activeMenu: '/system/user' }
+      }
+    ]
+  },
+  {
+    path: '/system/role-auth',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:role:edit'],
+    children: [
+      {
+        path: 'user/:roleId(\\d+)',
+        component: () => import('@/views/system/role/authUser'),
+        name: 'AuthUser',
+        meta: { title: '分配用户', activeMenu: '/system/role' }
+      }
+    ]
+  },
+  {
+    path: '/system/dict-data',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:dict:list'],
+    children: [
+      {
+        path: 'index/:dictId(\\d+)',
+        component: () => import('@/views/system/dict/data'),
+        name: 'Data',
+        meta: { title: '字典数据', activeMenu: '/system/dict' }
+      }
+    ]
+  },
+  {
+    path: '/monitor/job-log',
+    component: Layout,
+    hidden: true,
+    permissions: ['monitor:job:list'],
+    children: [
+      {
+        path: 'index/:jobId(\\d+)',
+        component: () => import('@/views/monitor/job/log'),
+        name: 'JobLog',
+        meta: { title: '调度日志', activeMenu: '/monitor/job' }
+      }
+    ]
+  },
+  {
+    path: '/tool/gen-edit',
+    component: Layout,
+    hidden: true,
+    permissions: ['tool:gen:edit'],
+    children: [
+      {
+        path: 'index/:tableId(\\d+)',
+        component: () => import('@/views/tool/gen/editTable'),
+        name: 'GenEdit',
+        meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
+      }
+    ]
+  }
+]
+
+// 防止连续点击多次路由报错
+let routerPush = Router.prototype.push;
+let routerReplace = Router.prototype.replace;
+// push
+Router.prototype.push = function push(location) {
+  return routerPush.call(this, location).catch(err => err)
+}
+// replace
+Router.prototype.replace = function push(location) {
+  return routerReplace.call(this, location).catch(err => err)
+}
+
+export default new Router({
+  mode: 'history', // 去掉url中的#
+  scrollBehavior: () => ({ y: 0 }),
+  routes: constantRoutes
+})

.history/songhua-ui/src/views/index1/index_20240528092945.vue

@@ -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.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;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528093358.vue

@@ -0,0 +1,260 @@
+<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');
+          console.log(ul)
+          // 循环数组中的每个项目
+          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;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528093419.vue

@@ -0,0 +1,260 @@
+<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');
+          console.log(ul.scrollbar)
+          // 循环数组中的每个项目
+          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;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528093424.vue

@@ -0,0 +1,260 @@
+<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');
+          console.log(ul.scrollBar)
+          // 循环数组中的每个项目
+          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;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528093428.vue

@@ -0,0 +1,260 @@
+<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');
+          console.log(ul.scroll)
+          // 循环数组中的每个项目
+          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;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528093831.vue

@@ -0,0 +1,261 @@
+<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" :webkit-scrollbar="showFlag">
+        </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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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');
+          this.showFlag = 'none'
+          // 循环数组中的每个项目
+          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: attr(webkit-scrollbar);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528093900.vue

@@ -0,0 +1,261 @@
+<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" :webkit-scrollbar="showFlag">
+        </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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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');
+          this.showFlag = 'false'
+          // 循环数组中的每个项目
+          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: attr(webkit-scrollbar);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528093906.vue

@@ -0,0 +1,261 @@
+<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" :webkit-scrollbar="showFlag">
+        </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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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');
+          this.showFlag = false
+          // 循环数组中的每个项目
+          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: attr(webkit-scrollbar);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528093912.vue

@@ -0,0 +1,261 @@
+<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" :webkit-scrollbar="showFlag">
+        </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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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');
+          this.showFlag = none
+          // 循环数组中的每个项目
+          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: attr(webkit-scrollbar);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528093928.vue

@@ -0,0 +1,261 @@
+<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" :webkit-scrollbar="showFlag">
+        </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: '',
+      showFlag:'none',   // 滚动条flag
+    }
+  },
+  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');
+          this.showFlag = none
+          // 循环数组中的每个项目
+          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: attr(webkit-scrollbar);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528093947.vue

@@ -0,0 +1,261 @@
+<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" :webkit-scrollbar="showFlag">
+        </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: '',
+      showFlag:none,   // 滚动条flag
+    }
+  },
+  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');
+          this.showFlag = none
+          // 循环数组中的每个项目
+          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: attr(webkit-scrollbar);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528093957.vue

@@ -0,0 +1,261 @@
+<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" :webkit-scrollbar="showFlag">
+        </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: '',
+      showFlag:'null',   // 滚动条flag
+    }
+  },
+  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');
+          this.showFlag = none
+          // 循环数组中的每个项目
+          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: attr(webkit-scrollbar);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094021.vue

@@ -0,0 +1,260 @@
+<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" :webkit-scrollbar="showFlag">
+        </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: '',
+      showFlag:'null',   // 滚动条flag
+    }
+  },
+  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.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: attr(webkit-scrollbar);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094034.vue

@@ -0,0 +1,260 @@
+<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" :webkit-scrollbar="showFlag">
+        </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: '',
+      showFlag:'none',   // 滚动条flag
+    }
+  },
+  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.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: attr(webkit-scrollbar);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094041.vue

@@ -0,0 +1,260 @@
+<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" :webkit-scrollbar="showFlag">
+        </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: '',
+      showFlag:none,   // 滚动条flag
+    }
+  },
+  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.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: attr(webkit-scrollbar);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094050.vue

@@ -0,0 +1,260 @@
+<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" :webkit-scrollbar="showFlag">
+        </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: '',
+      showFlag:'none',   // 滚动条flag
+    }
+  },
+  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.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: attr(webkit-scrollbar);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094105.vue

@@ -0,0 +1,260 @@
+<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" webkit-scrollbar="none">
+        </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: '',
+      showFlag:'none',   // 滚动条flag
+    }
+  },
+  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.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: attr(webkit-scrollbar);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094118.vue

@@ -0,0 +1,260 @@
+<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" webkit-scrollbar="none">
+        </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: '',
+      // showFlag:'none',   // 滚动条flag
+    }
+  },
+  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.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: attr(webkit-scrollbar);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094132.vue

@@ -0,0 +1,260 @@
+<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" data-scrollbar="none">
+        </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: '',
+      // showFlag:'none',   // 滚动条flag
+    }
+  },
+  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.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: attr(data-scrollbar);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094159.vue

@@ -0,0 +1,260 @@
+<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" data-value="none">
+        </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: '',
+      // showFlag:'none',   // 滚动条flag
+    }
+  },
+  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.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: attr(data-value);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094229.vue

@@ -0,0 +1,260 @@
+<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" data-text="none">
+        </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: '',
+      // showFlag:'none',   // 滚动条flag
+    }
+  },
+  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.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: attr(data-text);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094250.vue

@@ -0,0 +1,260 @@
+<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" data-text="'none'">
+        </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: '',
+      // showFlag:'none',   // 滚动条flag
+    }
+  },
+  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.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: attr(data-text);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094303.vue

@@ -0,0 +1,260 @@
+<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" webkit-scrollbar="none">
+        </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: '',
+      // showFlag:'none',   // 滚动条flag
+    }
+  },
+  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.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: attr(webkit-scrollbar);
+}
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094311.vue

@@ -0,0 +1,260 @@
+<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" webkit-scrollbar="none">
+        </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: '',
+      // showFlag:'none',   // 滚动条flag
+    }
+  },
+  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.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;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094551.vue

@@ -0,0 +1,269 @@
+<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="!showFlag ? 'listContain show' : 'listContain not-show' ">
+        </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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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.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;
+}
+
+.show{
+  .listContain::-webkit-scrollbar{
+    display: block;
+  }
+}
+.not-show{
+  .listContain::-webkit-scrollbar{
+    display: none;
+  }
+}
+
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094558.vue

@@ -0,0 +1,269 @@
+<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="showFlag ? 'listContain show' : 'listContain not-show' ">
+        </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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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.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;
+}
+
+.show{
+  .listContain::-webkit-scrollbar{
+    display: block;
+  }
+}
+.not-show{
+  .listContain::-webkit-scrollbar{
+    display: none;
+  }
+}
+
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094656.vue

@@ -0,0 +1,269 @@
+<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" :class="showFlag ? 'show' : 'not-show' ">
+        <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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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.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;
+}
+
+.show{
+  .listContain::-webkit-scrollbar{
+    display: block;
+  }
+}
+.not-show{
+  .listContain::-webkit-scrollbar{
+    display: none;
+  }
+}
+
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094710.vue

@@ -0,0 +1,269 @@
+<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" :class="!showFlag ? 'show' : 'not-show' ">
+        <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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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.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;
+}
+
+.show{
+  .listContain::-webkit-scrollbar{
+    display: block;
+  }
+}
+.not-show{
+  .listContain::-webkit-scrollbar{
+    display: none;
+  }
+}
+
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094713.vue

@@ -0,0 +1,269 @@
+<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" :class="showFlag ? 'show' : 'not-show' ">
+        <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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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.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;
+}
+
+.show{
+  .listContain::-webkit-scrollbar{
+    display: block;
+  }
+}
+.not-show{
+  .listContain::-webkit-scrollbar{
+    display: none;
+  }
+}
+
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094747.vue

@@ -0,0 +1,269 @@
+<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" :class="showFlag ? 'show' : 'not-show' ">
+        <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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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.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;
+}
+
+.show{
+  .listContain::-webkit-scrollbar{
+    display: block;
+  }
+}
+.not-show{
+  .listContain::-webkit-scrollbar{
+    display: none;
+  }
+}
+
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094836.vue

@@ -0,0 +1,270 @@
+<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" :class="showFlag ? 'show' : 'not-show' ">
+        <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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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');
+          if(dataList.length > 19) this.dataList = true
+          // 循环数组中的每个项目
+          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;
+}
+
+.show{
+  .listContain::-webkit-scrollbar{
+    display: block;
+  }
+}
+.not-show{
+  .listContain::-webkit-scrollbar{
+    display: none;
+  }
+}
+
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094842.vue

@@ -0,0 +1,270 @@
+<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" :class="showFlag ? 'show' : 'not-show' ">
+        <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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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');
+          if(dataList.length > 19) this.dataList = false
+          // 循环数组中的每个项目
+          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;
+}
+
+.show{
+  .listContain::-webkit-scrollbar{
+    display: block;
+  }
+}
+.not-show{
+  .listContain::-webkit-scrollbar{
+    display: none;
+  }
+}
+
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094848.vue

@@ -0,0 +1,270 @@
+<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" :class="showFlag ? 'show' : 'not-show' ">
+        <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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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');
+          if(dataList.length > 19) this.dataList = true
+          // 循环数组中的每个项目
+          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;
+}
+
+.show{
+  .listContain::-webkit-scrollbar{
+    display: block;
+  }
+}
+.not-show{
+  .listContain::-webkit-scrollbar{
+    display: none;
+  }
+}
+
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094909.vue

@@ -0,0 +1,270 @@
+<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" :class="showFlag ? 'show' : 'not-show' ">
+        <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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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');
+          if(dataList.concat(dataList).length > 19) this.dataList = true
+          // 循环数组中的每个项目
+          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;
+}
+
+.show{
+  .listContain::-webkit-scrollbar{
+    display: block;
+  }
+}
+.not-show{
+  .listContain::-webkit-scrollbar{
+    display: none;
+  }
+}
+
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094924.vue

@@ -0,0 +1,270 @@
+<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" :class="showFlag ? 'show' : 'not-show' ">
+        <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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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');
+          if(dataList.concat(dataList).length > 19) this.showFlag = true
+          // 循环数组中的每个项目
+          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;
+}
+
+.show{
+  .listContain::-webkit-scrollbar{
+    display: block;
+  }
+}
+.not-show{
+  .listContain::-webkit-scrollbar{
+    display: none;
+  }
+}
+
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528094930.vue

@@ -0,0 +1,270 @@
+<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" :class="showFlag ? 'show' : 'not-show' ">
+        <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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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');
+          if(dataList.length > 19) this.showFlag = true
+          // 循环数组中的每个项目
+          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;
+}
+
+.show{
+  .listContain::-webkit-scrollbar{
+    display: block;
+  }
+}
+.not-show{
+  .listContain::-webkit-scrollbar{
+    display: none;
+  }
+}
+
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240528095045.vue

@@ -0,0 +1,271 @@
+<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" :class="showFlag ? 'show' : 'not-show' ">
+        <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: '',
+      showFlag:null,   // 滚动条flag
+    }
+  },
+  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');
+          // 多于19条数据显示滚动条
+          if(dataList.length > 19) this.showFlag = true
+          // 循环数组中的每个项目
+          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;
+}
+
+.show{
+  .listContain::-webkit-scrollbar{
+    display: block;
+  }
+}
+.not-show{
+  .listContain::-webkit-scrollbar{
+    display: none;
+  }
+}
+
+.parkinglot{
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index_20240528092334.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="image-container">
+    <video
+      src="../assets/video/bg.mp4"
+      style="width: 100%; object-fit:fill;"
+      autoplay
+      loop
+      muted
+      >
+    </video>
+    <div style="width: 100%;height: 100%;position: absolute;display: flex;padding: 13% 0 0 6%;">
+      <div class="image-wrapper">
+        <img src="@/assets/images/yc.png" alt="Image 1" />
+        <button class="btn" style="background-color: #486DC7;" @click="shipHandler">游船系统</button>
+      </div>
+      <div class="image-wrapper">
+        <img src="@/assets/images/pw.png" alt="Image 2" />
+        <button class="btn" style="background-color: #486DC7;" @click="ticketHandler">票务系统</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Index",
+  data() {
+    return {};
+  },
+  methods: {
+    shipHandler() {
+      window.open("https://192.168.4.27:10001/songhuaIndex1");
+    },
+    ticketHandler(){
+      window.open("http://dsj.1230t.com/");
+    },
+  },
+  mounted(){
+    const video = document.getElementById('video')
+    video.play()
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.image-container {
+  display: flex;
+  justify-content: space-between;
+  background: url('../assets/images/bg.jpg') 0 0 no-repeat;
+  background-size:100% 100% ;
+  align-items: center;
+  height: 827px;
+}
+
+.image-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 150px;
+}
+
+.image-wrapper img {
+  width: 500px;
+  height: auto;
+}
+
+.btn {
+  margin-top: 10px;
+  position: relative;
+  padding: 10px 20px;
+  border-radius: 7px;
+  border: 1px solid rgb(61, 106, 255);
+  font-size: 14px;
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 2px;
+  background: transparent;
+  color: #fff;
+  overflow: hidden;
+  box-shadow: 0 0 0 0 transparent;
+  -webkit-transition: all 0.2s ease-in;
+  -moz-transition: all 0.2s ease-in;
+  transition: all 0.2s ease-in;
+}
+.btn:hover {
+  background: rgb(61, 106, 255);
+  box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
+  -webkit-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.btn:hover::before {
+  -webkit-animation: sh02 0.5s 0s linear;
+  -moz-animation: sh02 0.5s 0s linear;
+  animation: sh02 0.5s 0s linear;
+}
+
+.btn::before {
+  content: '';
+  display: block;
+  width: 0px;
+  height: 86%;
+  position: absolute;
+  top: 7%;
+  left: 0%;
+  opacity: 0;
+  background: #fff;
+  box-shadow: 0 0 50px 30px #fff;
+  -webkit-transform: skewX(-20deg);
+  -moz-transform: skewX(-20deg);
+  -ms-transform: skewX(-20deg);
+  -o-transform: skewX(-20deg);
+  transform: skewX(-20deg);
+}
+
+@keyframes sh02 {
+  from {
+    opacity: 0;
+    left: 0%;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    left: 100%;
+  }
+}
+
+.btn:active {
+  box-shadow: 0 0 0 0 transparent;
+  -webkit-transition: box-shadow 0.2s ease-in;
+  -moz-transition: box-shadow 0.2s ease-in;
+  transition: box-shadow 0.2s ease-in;
+}
+</style>
+

.history/songhua-ui/src/views/index_20240528092546.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="image-container">
+    <video
+      src="../assets/video/bg.mp4"
+      style="width: 100%; object-fit:fill;"
+      autoplay
+      loop
+      muted
+      >
+    </video>
+    <div style="width: 100%;height: 100%;position: absolute;display: flex;padding: 13% 0 0 6%;">
+      <div class="image-wrapper">
+        <img src="@/assets/images/yc.png" alt="Image 1" />
+        <button class="btn" style="background-color: #486DC7;" @click="shipHandler">游船系统</button>
+      </div>
+      <div class="image-wrapper">
+        <img src="@/assets/images/pw.png" alt="Image 2" />
+        <button class="btn" style="background-color: #486DC7;" @click="ticketHandler">票务系统</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Index",
+  data() {
+    return {};
+  },
+  methods: {
+    shipHandler() {
+      window.open("http://localhost/songhuaIndex1");
+    },
+    ticketHandler(){
+      window.open("http://dsj.1230t.com/");
+    },
+  },
+  mounted(){
+    const video = document.getElementById('video')
+    video.play()
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.image-container {
+  display: flex;
+  justify-content: space-between;
+  background: url('../assets/images/bg.jpg') 0 0 no-repeat;
+  background-size:100% 100% ;
+  align-items: center;
+  height: 827px;
+}
+
+.image-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 150px;
+}
+
+.image-wrapper img {
+  width: 500px;
+  height: auto;
+}
+
+.btn {
+  margin-top: 10px;
+  position: relative;
+  padding: 10px 20px;
+  border-radius: 7px;
+  border: 1px solid rgb(61, 106, 255);
+  font-size: 14px;
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 2px;
+  background: transparent;
+  color: #fff;
+  overflow: hidden;
+  box-shadow: 0 0 0 0 transparent;
+  -webkit-transition: all 0.2s ease-in;
+  -moz-transition: all 0.2s ease-in;
+  transition: all 0.2s ease-in;
+}
+.btn:hover {
+  background: rgb(61, 106, 255);
+  box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
+  -webkit-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.btn:hover::before {
+  -webkit-animation: sh02 0.5s 0s linear;
+  -moz-animation: sh02 0.5s 0s linear;
+  animation: sh02 0.5s 0s linear;
+}
+
+.btn::before {
+  content: '';
+  display: block;
+  width: 0px;
+  height: 86%;
+  position: absolute;
+  top: 7%;
+  left: 0%;
+  opacity: 0;
+  background: #fff;
+  box-shadow: 0 0 50px 30px #fff;
+  -webkit-transform: skewX(-20deg);
+  -moz-transform: skewX(-20deg);
+  -ms-transform: skewX(-20deg);
+  -o-transform: skewX(-20deg);
+  transform: skewX(-20deg);
+}
+
+@keyframes sh02 {
+  from {
+    opacity: 0;
+    left: 0%;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    left: 100%;
+  }
+}
+
+.btn:active {
+  box-shadow: 0 0 0 0 transparent;
+  -webkit-transition: box-shadow 0.2s ease-in;
+  -moz-transition: box-shadow 0.2s ease-in;
+  transition: box-shadow 0.2s ease-in;
+}
+</style>
+

.history/songhua-ui/src/views/index_20240528092744.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="image-container">
+    <video
+      src="../assets/video/bg.mp4"
+      style="width: 100%; object-fit:fill;"
+      autoplay
+      loop
+      muted
+      >
+    </video>
+    <div style="width: 100%;height: 100%;position: absolute;display: flex;padding: 13% 0 0 6%;">
+      <div class="image-wrapper">
+        <img src="@/assets/images/yc.png" alt="Image 1" />
+        <button class="btn" style="background-color: #486DC7;" @click="shipHandler">游船系统</button>
+      </div>
+      <div class="image-wrapper">
+        <img src="@/assets/images/pw.png" alt="Image 2" />
+        <button class="btn" style="background-color: #486DC7;" @click="ticketHandler">票务系统</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Index",
+  data() {
+    return {};
+  },
+  methods: {
+    shipHandler() {
+      window.open("https://jqt.songhuahujqt.com/songhuaIndex1");
+    },
+    ticketHandler(){
+      window.open("http://dsj.1230t.com/");
+    },
+  },
+  mounted(){
+    const video = document.getElementById('video')
+    video.play()
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.image-container {
+  display: flex;
+  justify-content: space-between;
+  background: url('../assets/images/bg.jpg') 0 0 no-repeat;
+  background-size:100% 100% ;
+  align-items: center;
+  height: 827px;
+}
+
+.image-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 150px;
+}
+
+.image-wrapper img {
+  width: 500px;
+  height: auto;
+}
+
+.btn {
+  margin-top: 10px;
+  position: relative;
+  padding: 10px 20px;
+  border-radius: 7px;
+  border: 1px solid rgb(61, 106, 255);
+  font-size: 14px;
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 2px;
+  background: transparent;
+  color: #fff;
+  overflow: hidden;
+  box-shadow: 0 0 0 0 transparent;
+  -webkit-transition: all 0.2s ease-in;
+  -moz-transition: all 0.2s ease-in;
+  transition: all 0.2s ease-in;
+}
+.btn:hover {
+  background: rgb(61, 106, 255);
+  box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
+  -webkit-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.btn:hover::before {
+  -webkit-animation: sh02 0.5s 0s linear;
+  -moz-animation: sh02 0.5s 0s linear;
+  animation: sh02 0.5s 0s linear;
+}
+
+.btn::before {
+  content: '';
+  display: block;
+  width: 0px;
+  height: 86%;
+  position: absolute;
+  top: 7%;
+  left: 0%;
+  opacity: 0;
+  background: #fff;
+  box-shadow: 0 0 50px 30px #fff;
+  -webkit-transform: skewX(-20deg);
+  -moz-transform: skewX(-20deg);
+  -ms-transform: skewX(-20deg);
+  -o-transform: skewX(-20deg);
+  transform: skewX(-20deg);
+}
+
+@keyframes sh02 {
+  from {
+    opacity: 0;
+    left: 0%;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    left: 100%;
+  }
+}
+
+.btn:active {
+  box-shadow: 0 0 0 0 transparent;
+  -webkit-transition: box-shadow 0.2s ease-in;
+  -moz-transition: box-shadow 0.2s ease-in;
+  transition: box-shadow 0.2s ease-in;
+}
+</style>
+

songhua-ui/src/views/index1/index.vue

@@ -30,7 +30,7 @@
       </div>
     </div>
     <div class="selectDate">
-      <div class="_moreMenu">
+      <div class="_moreMenu" :class="showFlag ? 'show' : 'not-show' ">
         <ul id="myList" class="listContain">
         </ul>
       </div>
@@ -53,7 +53,8 @@ export default {
       dataSource: [],
       parkingLots: [],
       map: [],
-      currentTime: ''
+      currentTime: '',
+      showFlag:null,   // 滚动条flag
     }
   },
   mounted() {
@@ -159,8 +160,10 @@ export default {
             this.map.addOverlay(marker);
           }
           ul = document.getElementById('myList');
+          // 多于19条数据显示滚动条
+          if(dataList.length > 19) this.showFlag = true
           // 循环数组中的每个项目
-          dataList.concat(dataList).forEach(function (item) {
+          dataList.forEach(function (item) {
             // 创建一个新的li元素
             var li = document.createElement('li');
             // 设置li元素的内容
@@ -244,9 +247,18 @@ export default {
   overflow: hidden;
   overflow-y: scroll;
 }
-//.listContain::-webkit-scrollbar{
-//  display: none;
-//}
+
+.show{
+  .listContain::-webkit-scrollbar{
+    display: block;
+  }
+}
+.not-show{
+  .listContain::-webkit-scrollbar{
+    display: none;
+  }
+}
+
 .parkinglot{
   background: rgba(0, 0, 0, 0.5) !important;
 }