first commit

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;
+}