first commit

.env.development

@@ -0,0 +1,17 @@
+# 开发环境
+NODE_ENV = 'development'
+# 渔船点位
+VITE_WS_BASE_URL ='ws://220.185.188.222:8055/api/gisWs'
+
+VITE_APP_BASE_URL = 'http://125.124.131.105:6811/api'
+# VITE_APP_BASE_URL = 'http://119.167.138.11:7282/video-service'
+
+# 智能体访问地址 
+# 宋凯忠本地
+VITE_APP_MODEL_URL = ''
+
+# 海康播放插件配置
+VITE_APP_HAIKANG_SECRET = 'pvQSichVMqtLGh4Ltedo'
+VITE_APP_HAIKANG_APPKEY = '28273161'
+VITE_APP_HAIKANG_IP = '39.175.75.233'
+VITE_APP_HAIKANG_PORT = 10443

.env.production

@@ -0,0 +1,13 @@
+# 生产环境
+NODE_ENV = 'production'
+# 渔船点位
+VITE_WS_BASE_URL ='ws://100.95.225.221:6810/api/gisWs'
+
+VITE_APP_BASE_URL = 'http://125.124.131.105:6811/api'
+# 智能体访问地址 
+VITE_APP_MODEL_URL = 'http://198.16.74.211:7282/zhinengti'
+# 海康播放插件配置
+VITE_APP_HAIKANG_SECRET = 'pvQSichVMqtLGh4Ltedo'
+VITE_APP_HAIKANG_APPKEY = '28273161'
+VITE_APP_HAIKANG_IP = '39.175.75.233'
+VITE_APP_HAIKANG_PORT = 10443

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+*.zip
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc.config.js

@@ -0,0 +1,20 @@
+export default {
+  printWidth: 100, // 最大行长规则通常设置为 100 或 120。
+  tabWidth: 2, // 指定每个标签缩进级别的空格数。
+  useTabs: false, // 使用制表符而不是空格缩进行。
+  semi: false, // true（默认）: 在每条语句的末尾添加一个分号。false：仅在可能导致 ASI 失败的行的开头添加分号。
+  vueIndentScriptAndStyle: true, // Vue 文件脚本和样式标签缩进
+  singleQuote: true, // 使用单引号而不是双引号
+  quoteProps: 'as-needed', // 引用对象中的属性时，仅在需要时在对象属性周围添加引号。
+  bracketSpacing: true, // 在对象文字中的括号之间打印空格。
+  trailingComma: 'none', // "none":没有尾随逗号。"es5": 在 ES5 中有效的尾随逗号（对象、数组等），TypeScript 中的类型参数中没有尾随逗号。"all"- 尽可能使用尾随逗号。
+  bracketSameLine: false, // 将>多行 HTML（HTML、JSX、Vue、Angular）元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭合元素）。
+  jsxSingleQuote: false, // 在 JSX 中使用单引号而不是双引号。
+  arrowParens: 'always', // 在唯一的箭头函数参数周围始终包含括号。
+  insertPragma: false, // 插入编译指示
+  requirePragma: false, // 需要编译指示
+  proseWrap: 'never', // 如果散文超过打印宽度，则换行
+  htmlWhitespaceSensitivity: 'strict', // 所有标签周围的空格（或缺少空格）被认为是重要的。
+  endOfLine: 'lf', // 确保在文本文件中仅使用 ( \n)换行，常见于 Linux 和 macOS 以及 git repos 内部。
+  rangeStart: 0 // 格式化文件时，回到包含所选语句的第一行的开头。
+}

README.md

@@ -0,0 +1,9 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+
+### 代码说明
+项目基于Node20.0.0版本创建
+Pinia + Vue Router4

eslint.config.js

@@ -0,0 +1,93 @@
+import globals from 'globals'
+import pluginJs from '@eslint/js'
+import pluginVue from 'eslint-plugin-vue'
+
+export default [
+  { files: [ '**/*.{js,mjs,cjs,vue}' ] },
+  // 指定全局变量和环境
+  {
+    languageOptions: {
+      globals: globals.browser
+    }
+  },
+  pluginJs.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+  // 自定义规则
+  {
+    rules: {
+      // eslint（https://eslint.bootcss.com/docs/rules/）
+      'no-var': 'warn', // 要求使用 let 或 const 而不是 var
+      "no-unused-vars": "off",
+      semi: [ 'warn', 'never' ], // 禁用行尾使用分号
+      'no-extra-semi': 'error', // 禁止不必要的分号
+      'comma-dangle': [ 'warn', 'never' ], // 禁止末尾逗号
+      'eol-last': 0, // 文件以换行符结束
+      'no-multi-spaces': 'warn', // 禁止多余的空格
+      'no-multiple-empty-lines': [ 'warn', { max: 1 } ], // 空行不能超过 1 行
+      'max-len': [ 'off', { code: 600 } ],
+      'vue/multi-word-component-names': 'off', // 组件命名规则
+      'linebreak-style': [ 'off', 'windows' ],
+      'no-underscore-dangle': [ 'off', 'always' ],
+      'no-console': 'warn', // 禁止出现console
+      'no-debugger': 'warn', // 禁止出现debugger
+      'no-duplicate-case': 'warn', // 禁止出现重复case
+      'no-empty': 'warn', // 禁止出现空语句块
+      'no-extra-parens': 'warn', // 禁止不必要的括号
+      'no-func-assign': 'warn', // 禁止对Function声明重新赋值
+      'no-unreachable': 'warn', // 禁止出现[return|throw]之后的代码块
+      'no-else-return': 'warn', // 禁止if语句中return语句之后有else块
+      'no-empty-function': 'warn', // 禁止出现空的函数块
+      'no-lone-blocks': 'warn', // 禁用不必要的嵌套块
+      'no-redeclare': 'warn', // 禁止多次声明同一变量
+      'no-return-assign': 'warn', // 禁止在return语句中使用赋值语句
+      'no-return-await': 'warn', // 禁用不必要的[return/await]
+      'no-self-compare': 'warn', // 禁止自身比较表达式
+      'no-useless-catch': 'warn', // 禁止不必要的catch子句
+      'no-useless-return': 'warn', // 禁止不必要的return语句
+      'no-mixed-spaces-and-tabs': 'warn', // 禁止空格和tab的混合缩进
+      'no-trailing-spaces': 'warn', // 禁止一行结束后面不要有空格
+      'no-useless-call': 'warn', // 禁止不必要的.call()和.apply()
+      'no-delete-var': 'off', // 允许出现delete变量的使用
+      'no-shadow': 'off', // 允许变量声明与外层作用域的变量同名
+      'dot-notation': 'warn', // 要求尽可能地使用点号
+      'no-undef': 0 ,
+      'default-case': 'warn', // 要求switch语句中有default分支
+      eqeqeq: 'warn', // 要求使用 === 和 !==
+      curly: 'warn', // 要求所有控制语句使用一致的括号风格
+      'space-before-blocks': 'warn', // 要求在块之前使用一致的空格
+      'space-in-parens': 'warn', // 要求在圆括号内使用一致的空格
+      'space-infix-ops': 'warn', // 要求操作符周围有空格
+      'space-unary-ops': 'warn', // 要求在一元操作符前后使用一致的空格
+      'switch-colon-spacing': 'warn', // 要求在switch的冒号左右有空格
+      'arrow-spacing': 'warn', // 要求箭头函数的箭头前后使用一致的空格
+      'array-bracket-spacing': [ 'warn', 'always' ], // 要求数组方括号中使用一致的空格
+      'brace-style': 'warn', // 要求在代码块中使用一致的大括号风格
+      // 'camelcase': 'warn', // 要求使用骆驼拼写法命名约定
+      'object-curly-spacing': [ 'warn', 'always' ], // 在对象字面量、解构赋值和导入/导出说明符的大括号内保持一致的间距
+      'comma-spacing': [ 'warn', { before: false, after: true } ],
+      'comma-style': [ 'warn', 'last' ],
+      'key-spacing': [ 'warn', { beforeColon: false, afterColon: true } ], // 对象字面量的属性中键和值之间使用一致的间距
+      quotes: [ 'warn', 'single', 'avoid-escape' ] // 要求统一使用单引号符号
+    }
+  },
+  // 忽略文件
+  {
+    ignores: [
+      '**/dist',
+      '.vscode',
+      '.idea',
+      '*.sh',
+      '**/node_modules',
+      '*.md',
+      '*.woff',
+      '*.woff',
+      '*.ttf',
+      'package-lock.json',
+      '/public',
+      '/docs',
+      '**/output',
+      '.husky',
+      '.local'
+    ]
+  }
+]

index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>千帆智瞰</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/js/jsencrypt.min.js"></script>
+    <script src="/js/jsWebControl-1.0.0.min.js"></script>
+    <script type="module" src="/src/main.js"></script>
+    <!-- 引入 paas.js -->
+    <script async type="text/javascript" src="http://198.16.74.210/paas.js" fh2></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,53 @@
+{
+  "name": "trawler",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "@maptalks/gl": "^0.104.2",
+    "@maptalks/vt": "^0.103.4",
+    "@vueuse/core": "^11.1.0",
+    "axios": "^1.7.7",
+    "echarts": "^5.5.1",
+    "element-plus": "^2.8.4",
+    "file-saver": "^2.0.5",
+    "flv.js": "^1.6.2",
+    "marked": "^16.4.0",
+    "lodash": "^4.17.21",
+    "maptalks": "^1.0.3",
+    "maptalks-gl": "^0.115.0",
+    "maptalks.markercluster": "^0.8.8",
+    "maptalks.routeplayer": "^1.1.0",
+    "mitt": "^3.0.1",
+    "pinia": "^2.2.2",
+    "sm-crypto": "^0.3.13",
+    "swiper": "^11.1.1",
+    "vue": "^3.4.37",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.7",
+    "@babel/eslint-parser": "^7.25.7",
+    "@eslint/js": "^9.12.0",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "eslint": "^9.12.0",
+    "eslint-define-config": "^2.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.28.0",
+    "fast-glob": "^3.3.2",
+    "globals": "^15.10.0",
+    "prettier": "^3.3.3",
+    "protobufjs": "^7.4.0",
+    "sass": "^1.79.4",
+    "vite": "^5.4.1",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vue-eslint-parser": "^9.4.3"
+  }
+}

public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/App.vue

@@ -0,0 +1,128 @@
+<template>
+  <router-view></router-view>
+</template>
+<script setup>
+</script>
+
+<style lang="scss">
+html,
+body {
+  box-sizing: border-box;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  width: 100% !important;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*业务版滚动条样式*/
+html ::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 2px;
+}
+
+html ::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  height: 2px;
+  background: rgba(95, 128, 183, 1) !important;
+  border-radius: 4px !important;
+  opacity: .5 !important;
+}
+
+/* 字体设置 */
+/* 思源黑体-中等 */
+@font-face {
+  font-family: 'SHSCM';
+  src: url('/font/SourceHanSansCN-Medium.otf');
+}
+
+/* 思源黑体-常规 */
+@font-face {
+  font-family: 'SHSCN';
+  src: url('/font/SourceHanSansCN-Normal.otf');
+}
+
+/* 优设标题黑 */
+@font-face {
+  font-family: 'YouSheBiaoTiHei';
+  src: url('/font/YouSheBiaoTiHei.ttf');
+}
+
+/* 旁门正道 */
+@font-face {
+  font-family: 'PangMenZhengDao';
+  src: url('/font/PangMenZhengDaoBiaoTi.ttf');
+}
+
+/* 优设体 */
+@font-face {
+  font-family: 'YouSheRegular';
+  src: url('/font/YouSheRegular.TTF');
+}
+
+/* 欣意冠黑体 */
+@font-face {
+  font-family: 'XinYiGuanHeiTi';
+  src: url('/font/XinYiGuanHeiTi.ttf');
+}
+
+/* 钉钉进步体 */
+@font-face {
+  font-family: 'DingTalkJinBuTi';
+  src: url('/font/DingTalkJinBuTi.ttf');
+}
+
+/* 一品创享体 */
+@font-face {
+  font-family: 'YPCX';
+  src: url('/font/YPchuangxiang-GB.ttf');
+}
+
+#app {
+  font-family: 'SHSCN', Avenir, Helvetica, Arial, sans-serif !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  height: 100%;
+  line-height: 1;
+  text-align: left;
+  color: #2c3e50;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+:focus-visible {
+  outline: unset;
+}
+// maptalks 提示框样式
+.maptalks-msgBox{
+  width: max-content !important;
+}
+.maptalks-close{
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  color: #ccc;
+  text-decoration: auto;
+}
+.maptalks-msgContent{
+  background: #0e3766;
+  border: 1px solid #00C0FF;
+  color: #fff;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 20px 10px;
+}
+.maptalks-ico{
+  display: none !important;
+}
+</style>

src/api/comprehensive/trawler/index.js

@@ -0,0 +1,108 @@
+import request from '@/utils/request'
+
+/**
+ * 渔船档案
+ * @param {*}
+ * @returns
+ */
+// 渔船档案分页列表查询
+export const trawlerArchivePage = (data) => {
+  return request({
+    url: '/fishingPort/fishingBoatArchives/getBoatList',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 获取指定区域的渔船回放
+ * @param data
+ * @returns {*}
+ */
+export const getRegionBoatPlayback = (data) => request({
+  url: '/fishingPort/dsEnterOutPort/getRegionBoatPlayback',
+  method: 'post',
+  data
+})
+/**
+ * 获取多条轨迹回放数据
+ * @param data
+ * @returns {*}
+ */
+export const getBoatsTrajectory = (data) => request({
+  url: '/boatDynamicWake/getBoatsTrajectory',
+  method: 'post',
+  data
+})
+
+// 获取指定的渔船尾迹
+export const getBoatTrack = (data) => {
+  return request({
+    url: '/boatDynamicWake/getWakeData',
+    method: 'post',
+    data: data,
+    timeout: 60000
+  })
+}
+
+// 渔船轨迹查询
+export const getBoatTrajectory = (data) => {
+  return request({
+    url: '/boatDynamicWake/getBoatTrajectory',
+    method: 'post',
+    data,
+    timeout: 60000
+  })
+}
+
+// 渔船轨迹查询
+export const exportBoatTrajectory = '/boatDynamicWake/exportBoatTrajectory'
+
+// 首页查询数量接口
+export const getBusinessIndexStatistics = (data) => {
+  return request({
+    url: '/fishingPort/fishingBoatArchives/getBusinessIndexStatistics',
+    method: 'post',
+    data
+  })
+}
+// 在外作业渔船
+export const getOutPortList = (data) => {
+  return request({
+    url: '/portStatistics/getOutPortList',
+    method: 'post',
+    data
+  })
+}
+// 渔港统计
+export const getBusinessIndexPortStatistics = (data) => {
+  return request({
+    url: '/fishingPort/dsPort/getBusinessIndexPortStatistics',
+    method: 'post',
+    data
+  })
+}
+// 分港口统计查询
+export const getPortStatisticsByPortId = (data) => {
+  return request({
+    url: '/fishingPort/dsPort/getPortStatisticsByPortId',
+    method: 'post',
+    data
+  })
+}
+// 在港船舶
+export const getInPortList = (data) => {
+  return request({
+    url: '/portStatistics/getInPortList',
+    method: 'post',
+    data
+  })
+}
+// 当日进出港列表
+export const findOutEnterPortList = (data) => {
+  return request({
+    url: '/fishingPort/dsPort/findOutEnterPortList',
+    method: 'post',
+    data
+  })
+}

src/api/login/index.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+/**
+ * 用户登录
+ * @param data
+ */
+export const login = (data) => {
+  return request({
+    url: '/validateLogin',
+    headers: {
+      isToken: false,
+      repeatSubmit: false
+    },
+    method: 'post',
+    data: data
+  })
+}
+
+// 退出登录
+export function logout() {
+  return request({
+    url: '/logout',
+    method: 'post'
+  })
+}
+
+// 获取验证码
+export const getCodeImg = () => {
+  return request({
+    url: '/captchaImage',
+    headers: {
+      isToken: false
+    },
+    method: 'get',
+    timeout: 20000
+  })
+}
+
+// 获取用户详细信息
+export function getUserInfo() {
+  return request({
+    url: '/getInfo',
+    method: 'get'
+  })
+}

src/api/map/index.js

@@ -0,0 +1,92 @@
+import service from '@/utils/request'
+/**
+ * 查询当前渔船动态定位
+ * 查询
+ * @param data
+ * @returns {*}
+ */
+export const findByCurrent = (data) => service({
+  url: '/boatDynamic/findByCurrent',
+  method: 'post',
+  data
+})
+/**
+ * 根据mmsi获取 24H 轨迹信息
+ * 查询
+ * @param data
+ * @returns {*}
+ */
+export const findAISPointPositionByMmsi = (data) => {
+  return service({
+    url: '/boatData/findAISPointPositionByMmsi',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 光电联动查看监控设备列表
+ * 查询
+ * @param data
+ * @returns {*}
+ */
+export const getDevicesForServo = (data) => {
+  return service({
+    url: '/fishingPort/dsVideo/getDevicesForServo',
+    method: 'post',
+    data: data
+  })
+}
+// 光电联动反向定位，判断监控设备和将要联动的定位目标是否超出可视范围、是否处于视角遮挡区
+export function getDevicesIsCover(data) {
+  return service({
+    url: '/fishingPort/dsVideo/judgeMoveByGps',
+    method: 'post',
+    data: data
+  })
+}
+
+// 光电联动反向定位联动控制，根据监控设备和将要联动的定位目标经纬度控制视频监控设备转动对焦
+export function sitMoveByGps(data) {
+  return service({
+    url: '/fishingPort/dsVideo/sitMoveByGps',
+    method: 'post',
+    data: data
+  })
+}
+
+// 光电随动
+export function servoByRadar(data) {
+  return service({
+    url: '/fishingPort/dsVideo/servoByRadar',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'application/json;charset=utf-8'
+    }
+  })
+}
+// 退出光电随动
+export function exitServoByRadar(data) {
+  return service({
+    url: '/fishingPort/dsVideo/servoByRadarExit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 业务查询渔船信息 根据终端号进行查询数据
+// 查询
+export const findBoatListByMmsi = (data) => service({
+  url: '/fishingPort/fishingBoatArchives/findBoatListByMmsi',
+  method: 'post',
+  data
+})
+
+// 业务查询渔船信息 根据渔船id进行查询数据
+// 查询
+export const getBoatInfoByBoatId = (data) => service({
+  url: '/fishingPort/fishingBoatArchives/getBoatInfoByBoatId',
+  method: 'post',
+  data
+})

src/api/model.js

@@ -0,0 +1,19 @@
+/**
+ * 问答
+ * @param data
+ * @returns {*}
+ */
+export const getAnswers = import.meta.env.VITE_APP_MODEL_URL + '/query'
+
+/**
+ * 历史记录
+ * @param data
+ * @returns {*}
+ */
+export const getHistory = import.meta.env.VITE_APP_MODEL_URL + '/history'
+/**
+ * 终止回答
+ * @param data
+ * @returns {*}
+ */
+export const restart = import.meta.env.VITE_APP_MODEL_URL + '/restart'

src/api/system/index.js

@@ -0,0 +1,242 @@
+import request from '@/utils/request'
+
+// 获取路由
+export const getRouters = () => {
+  return request({
+    url: '/getRouters',
+    method: 'get'
+  })
+}
+
+/**
+ * 获取用户列表
+ */
+export function getUserPage(query) {
+  return request({
+    url: '/system/user/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询用户详细
+export function getUserInfo(userId) {
+  return request({
+    url: '/system/user/' + userId,
+    method: 'get'
+  })
+}
+
+// 新增用户
+export function addUser(data) {
+  return request({
+    url: '/system/user',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改用户
+export function updateUser(data) {
+  return request({
+    url: '/system/user',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除用户
+export function delUser(userId) {
+  return request({
+    url: '/system/user/' + userId,
+    method: 'delete'
+  })
+}
+// 用户密码重置
+export function resetUserPwd(data) {
+  return request({
+    url: '/system/user/resetPwd',
+    method: 'put',
+    data: data
+  })
+}
+// 个人信息 重置密码
+export function updateUserPwd(params) {
+  return request({
+    url: '/system/user/profile/updatePwd',
+    method: 'put',
+    params: params
+  })
+}
+/**
+ * 获取菜单列表
+ */
+export function getMenu(query) {
+  return request({
+    url: '/system/menu/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增菜单
+export function addMenu(data) {
+  return request({
+    url: '/system/menu',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改菜单
+export function updateMenu(data) {
+  return request({
+    url: '/system/menu',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除菜单
+export function delMenu(menuId) {
+  return request({
+    url: '/system/menu/' + menuId,
+    method: 'delete'
+  })
+}
+
+// 查询菜单下拉树结构
+export function getMenuTree() {
+  return request({
+    url: '/system/menu/treeselect',
+    method: 'get'
+  })
+}
+
+// 根据角色ID查询菜单下拉树结构
+export function getMenuTreeByRole(roleId) {
+  return request({
+    url: '/system/menu/roleMenuTreeselect/' + roleId,
+    method: 'get'
+  })
+}
+
+// 获取角色列表
+export function getRolePage(query) {
+  return request({
+    url: '/system/role/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增角色
+export function addRole(data) {
+  return request({
+    url: '/system/role',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改角色
+export function updateRole(data) {
+  return request({
+    url: '/system/role',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除角色
+export function delRole(roleId) {
+  return request({
+    url: '/system/role/' + roleId,
+    method: 'delete'
+  })
+}
+
+// 查询登录日志列表
+export function loginLogPage(query) {
+  return request({
+    url: '/monitor/logininfor/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 导出登录日志列表
+export const exportLoginLog = '/monitor/logininfor/export'
+
+// 查询操作日志列表
+export function operateLogPage(query) {
+  return request({
+    url: '/monitor/operlog/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 导出操作日志列表
+export const exportOperateLog = '/monitor/operlog/export'
+
+// 区域树
+export const getAreaTree = (data) => {
+  return request({
+    url: `/system/area/getAreaTree/${data.id}`,
+    method: 'get'
+  })
+}
+
+/**
+ * 获取部门列表
+ */
+export function getDept(query) {
+  return request({
+    url: '/system/dept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（排除节点）
+export function listDeptExcludeChild(deptId) {
+  return request({
+    url: '/system/dept/list/exclude/' + deptId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/dept',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/dept',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/system/dept/' + deptId,
+    method: 'delete'
+  })
+}
+
+// 查询部门下拉树结构
+export function deptTreeSelect() {
+  return request({
+    url: '/system/user/deptTree',
+    method: 'get'
+  })
+}

src/assets/css/screen-map.css

@@ -0,0 +1,481 @@
+/* 一张图地图涉及样式 */
+/* INFOWINDOW */
+.trawler-info-window {
+  background: #133e91;
+  display: flex;
+  flex-direction: column;
+  left: -500px;
+  /*left: 50%;*/
+  position: fixed;
+  top: -300px;
+  /*top: 50%;*/
+  /*transform: translate(-50%, -50%);*/
+  width: 430px;
+}
+
+.trawler-info-window .title {
+  align-items: center;
+  background: linear-gradient(180deg, rgba(2, 31, 75, 0.1) 64%, rgba(4, 42, 117, 0.7) 97%);
+  border-left: 2px solid rgba(2, 222, 255, 1);
+  box-sizing: border-box;
+  color: rgba(2, 222, 255, 1);
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  font-size: 16px;
+  height: 36px;
+  line-height: 36px;
+  padding-left: 10px;
+  text-align: left;
+  width: 100%;
+}
+
+.trawler-info-window .icon-message {
+  cursor: pointer;
+  height: 20px;
+  margin-left: 10px;
+  width: 20px;
+}
+
+.trawler-info-window .icon-close {
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+
+.trawler-info-window .trawler-info {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  font-size: 13px;
+  padding-left: 14px;
+  padding-right: 14px;
+}
+
+.trawler-info-window .trawler-info-item {
+  color: rgba(255, 255, 255, 1);
+  height: 100%;
+  text-align: left;
+  width: 50%;
+}
+
+.trawler-info-subitem {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  height: 30px;
+  line-height: 1;
+  justify-content: flex-start;
+  padding-left: 10px;
+}
+
+.trawler-info-subitem .label {
+  flex-shrink: 0;
+  color: rgba(171, 177, 200, 1);
+  margin-right: 5px;
+}
+
+.trawler-info-subitem:nth-child(2n + 1) {
+  /* background-color: rgba(2, 22, 67, 1); */
+}
+
+.trawler-info-subitem .value {
+  flex-grow: 1;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* TRACK */
+.cockpit-review-container {
+  background-image: url('/public/img/cockpit-img/icon-track-review-bg.png');
+  background-size: 100% 100%;
+  position: absolute;
+  bottom: 114px;
+  font-family: 'SHSCNR';
+  left: 23vw;
+  right: 23vw;
+  z-index: 99;
+}
+
+.review-container {
+  border-radius: 5px;
+  box-sizing: border-box;
+  color: rgba(255, 255, 255, 0.8);
+  height: 130px;
+  padding-bottom: 20px;
+  padding-left: 30px;
+  padding-right: 30px;
+  padding-top: 25px;
+  position: relative;
+  width: 100%;
+}
+
+.review-close {
+  /* background-image: url('@/assets/images/catch/steelyard/icon-close.png'); */
+  /* background-size: 100% 100%; */
+  position: absolute;
+  top: 36px;
+  right: -36px;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.review-tool-bar {
+  width: 100%;
+  display: flex;
+  justify-items: center;
+  align-items: center;
+}
+
+.bar-left {
+  font-size: 14px;
+  text-align: left;
+  width: 35%;
+}
+
+.bar-left span {
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: 5px;
+  padding-bottom: 3px;
+  padding-left: 3px;
+  padding-right: 3px;
+  padding-top: 3px;
+}
+
+.bar-left span.primary {
+  background-color: #409eff;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.bar-right {
+  font-size: 14px;
+  text-align: right;
+  width: 30%;
+}
+
+.bar-center {
+  font-size: 14px;
+  text-align: center;
+  width: 40%;
+}
+
+.play-control {
+  cursor: pointer;
+}
+
+.play-control i {
+  color: rgb(55, 183, 255);
+  font-size: 26px;
+}
+
+/* BERTH_INFO_WINDOW */
+.berth-info-window {
+  background-color: #133e91;
+  border-radius: 6px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  /*height: 140px;*/
+  left: 50%;
+  padding-bottom: 20px;
+  padding-left: 20px;
+  padding-right: 0;
+  padding-top: 20px;
+  position: fixed;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 256px;
+}
+
+.berth-info-window .name {
+  color: #FFFFFF;
+  font-size: 20px;
+  margin-bottom: 3px;
+  text-align: left;
+}
+
+.berth-info-window .berth-info-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.berth-info-window .berth-info-list .berth-info-item {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+}
+
+.berth-info-window .berth-info-list .berth-info-item:not(:last-child) {
+  margin-bottom: 8px;
+}
+
+.berth-info-window .berth-info-list .berth-info-item .label {
+  color: rgba(171, 177, 200, 1);
+  text-align: left;
+  width: 97px;
+}
+
+.berth-info-window .berth-info-list .berth-info-item .value {
+  color: rgba(255, 255, 255, 1);
+}
+
+.berth-info-window .berth-icon-arrow-bottom {
+  background-color: rgba(25, 119, 209, 1);
+  border-radius: 50%;
+  bottom: 21px;
+  cursor: pointer;
+  height: 22px;
+  line-height: 22px;
+  position: absolute;
+  right: 12px;
+  text-align: center;
+  width: 22px;
+}
+
+.berth-info-window .berth-info-line {
+  border-left: 2px dashed rgba(2, 222, 255, 1);
+  bottom: -60px;
+  height: 60px;
+  left: 50%;
+  position: absolute;
+  transform: translateX(-50%);
+}
+
+.berth-info-window .berth-info-circle {
+  background-color: rgba(254, 194, 48, 1);
+  border-radius: 50%;
+  bottom: -72px;
+  height: 12px;
+  left: 50%;
+  position: absolute;
+  transform: translateX(-50%);
+  width: 12px;
+}
+
+.berth-info-window .berth-info-window-close {
+  background-color: rgba(0, 19, 46, 0.7);
+  border-radius: 50%;
+  color: #FFFFFF;
+  cursor: pointer;
+  font-size: 12px;
+  height: 18px;
+  line-height: 18px;
+  position: absolute;
+  right: -24px;
+  text-align: center;
+  top: -13px;
+  width: 18px;
+}
+
+/* 报警信息弹窗 */
+.accident-info-window,
+.material-info-window {
+  background-color: #133e91;
+  border-radius: 6px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  /*height: 515px;*/
+  left: 50%;
+  padding-bottom: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+  position: fixed;
+  top: 50%;
+  transform: translate(-50%, -54%);
+}
+
+.accident-info-window {
+  width: 520px;
+}
+
+.material-info-window {
+  width: 330px;
+}
+
+/* CLOSE */
+.accident-info-window .icon-close,
+.material-info-window .icon-close {
+  cursor: pointer;
+  position: absolute;
+  right: 18px;
+  top: 14px;
+}
+
+/* TITLE */
+.accident-info-window .title,
+.material-info-window .title {
+  background: linear-gradient(180deg, #FFFFFF 0%, #C8DAFF 100%);
+  border-bottom: 1px solid rgba(147, 192, 253, 0.4);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  font-size: 16px;
+  font-weight: 800;
+  letter-spacing: 1px;
+  padding-bottom: 10px;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.accident-info-window .title {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.accident-info-window .title .icon-more {
+  cursor: pointer;
+  height: 20px;
+  margin-left: 10px;
+  width: 20px;
+}
+
+/* IMG */
+.accident-info-window .accident-images {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.accident-info-window .accident-images img {
+  height: 100px;
+  width: 33.33%;
+}
+
+/* CONTENT */
+.material-info-window .material-content {
+  display: flex;
+  flex-direction: column;
+  padding-top: 10px;
+}
+
+.accident-info-window .accident-content {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding-top: 10px;
+}
+
+.accident-info-window .accident-content-item {
+  width: 50%;
+}
+
+.accident-info-window .accident-content-item,
+.material-info-window .material-content-item {
+  display: flex;
+  flex-direction: row;
+}
+
+.accident-info-window .accident-content-item:not(:last-child),
+.material-info-window .material-content-item:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+.accident-info-window .accident-content-item .label,
+.material-info-window .material-content-item .label {
+  color: rgba(171, 177, 200, 1);
+  flex-shrink: 0;
+  font-size: 14px;
+  letter-spacing: 2px;
+  text-align: left;
+  width: 105px;
+}
+
+.accident-info-window .accident-content-item .value,
+.material-info-window .material-content-item .value {
+  color: rgba(255, 255, 255, 1);
+  flex-grow: 1;
+  font-size: 14px;
+  text-align: left;
+}
+
+.accident-info-window .line-straight,
+.material-info-window .line-straight {
+  background-color: rgba(0, 187, 255, 1);
+  height: 2px;
+  left: -35px;
+  position: absolute;
+  top: 40px;
+  width: 35px;
+}
+
+.accident-info-window .line-broken,
+.material-info-window .line-broken {
+  background-color: rgba(0, 187, 255, 1);
+  height: 2px;
+  left: -64px;
+  position: absolute;
+  transform: rotateZ(-45deg);
+  top: 52px;
+  width: 35px;
+}
+
+.typhoon-dialog {
+  background-color: white;
+  height: 180px;
+  position: fixed;
+  top: -121px;
+  left: -160px;
+  width: 250px;
+}
+.typhoon-dialog .title {
+  align-items: center;
+  background-color: rgba(22, 127, 255, 1);
+  box-sizing: border-box;
+  color: white;
+  display: flex;
+  flex-direction: row;
+  height: 30px;
+  padding-left: 10px;
+  position: relative;
+  text-align: left;
+}
+.typhoon-dialog .title .icon-close {
+  cursor: pointer;
+  position: absolute;
+  right: 5px;
+  transform: translateY(-50%);
+  top: 50%;
+}
+.typhoon-dialog .title .name {
+  font-size: 16px;
+  margin-right: 10px;
+}
+.typhoon-dialog .title .time {
+  font-size: 14px;
+}
+.typhoon-dialog .info-list {
+  display: flex;
+  flex-direction: column;
+}
+.typhoon-dialog .info-item {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  font-size: 12px;
+  height: 30px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.typhoon-dialog .info-item:nth-child(2n) {
+  background-color: rgba(22, 127, 255, .05);
+}
+.typhoon-dialog .info-item .label {
+  color: #696969;
+  flex-shrink: 0;
+  margin-right: 10px;
+}