Skip to content

J
JINRUN-DP
Commit 83672c70 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

new from liqilin

parent bba8ce47
Hide whitespace changes
Inline Side-by-side
Showing with 2087 additions and 1757 deletions
.env
View file @ 83672c70
......@@ -2,7 +2,7 @@
# if use a sub directory, it must be end with "/", like "/admin/" but not "/admin"
VITE_BASE_URL=/
VITE_APP_TITLE=SoybeanAdmin
VITE_APP_TITLE=金润四化综合管理系统
VITE_APP_DESC=SoybeanAdmin is a fresh and elegant admin template
......@@ -63,12 +63,42 @@ VITE_DEVTOOLS_LAUNCH_EDITOR=code
# VITE_VIDEO_URL=ws://192.168.3.248:9999
# 开发环境 - 所有服务接口地址
VITE_SERVICE_URL=http://192.168.2.53:9995
VITE_SERVICE_URL=http://192.168.2.67:9995
# 模型地址环境
VITE_MODEL_URL=http://192.168.2.53:9995/model
VITE_MODEL_URL=http://192.168.2.67:9995/model
# 开发环境 - WebSocket 全局地址
# VITE_WEBSOCKET_URL=ws://192.168.3.248:9996
\ No newline at end of file
# VITE_WEBSOCKET_URL=ws://192.168.3.248:9996
# 人员定位 -- 前后端
VITE_PERSON_URL=http://192.168.2.67:8083
# 后 http://192.168.2.37:8082
# 定位卡 http://192.168.2.53:9997
# 边坡监测 -- 前后端
VITE_SIDE_URL=http://192.168.2.67:9087
# 后 http://192.168.2.37:9082
# 全方位监测 -- 前后端
VITE_POINT_URL=http://192.168.2.67:9088
# 后 http://192.168.2.37:9081
# 排土场 -- 前后端
VITE_CASTING_URL=http://192.168.2.67:9086
# 后 http://192.168.2.37:9080
# 卡车调度 -- 前后端
VITE_TRUCK_URL=http://192.168.2.67:8040
VITE_TRUCKS_URL=http://192.168.2.67:9089
# 后 http://192.168.2.53:9996
# AI系统 -- 前后端
VITE_AI_URL=http://192.168.2.67:9528
# 后 http://192.168.2.53:9528
# 综合系统 -- 前后端
# 前 http://192.168.2.54:9527
# 后 http://192.168.2.53:9995
index.html
View file @ 83672c70
......@@ -10,9 +10,9 @@
<script src="./public/js/proj4.js"></script>
<script src="./public/js/turf.min.js"></script>
<link rel="stylesheet" type="text/css" href="./Cesium/Widgets/widgets.css" />
<script type="text/javascript" src="/public/webrtcstreamer.js"></script>
<script type="text/javascript" src="./public/webrtcstreamer.js"></script>
<script type="text/javascript" src="./Cesium/Cesium.js"></script>
<script src="/public/jquery-1.7.1.min.js"></script>
<script src="./public/jquery-1.7.1.min.js"></script>
<title>%VITE_APP_TITLE%</title>
</head>
......
src/api/index-dp.ts
View file @ 83672c70
......@@ -51,7 +51,7 @@ export const getCarLogList = async (): Promise<any> => await axios.get('home/car
// 修改报警状态
export const setAlarmStatusApi = async (command: string): Promise<any> => await axios.post(`/home/sound/${command}`);
export const setAlarmStatusApi = async (command: any): Promise<any> => await axios.post(`/home/sound/${command}`);
// 获取报警状态
export const getAlarmStatusApi = async (): Promise<any> => await axios.get('/home/alarm/status');
......
src/api/index.ts
View file @ 83672c70
......@@ -34,6 +34,9 @@ export const api_tokenGet = async (): Promise<any> => await axios.get(`/api/toke
export const api_menuPageGet = async (data: any): Promise<any> =>
await axios.get(`/menu/page?pageNum=${data.pageNum}&pageSize=${data.pageSize}`);
export const api_menuListGet = async (): Promise<any> =>
await axios.get(`/menu/list`);
// ------------------- 用户管理接口 ------------------
export const api_userPageGet = async (data: any): Promise<any> =>
await axios.get(`/user/page?pageNum=${data.pageNum}&pageSize=${data.pageSize}&startTime=${data.startTime}&endTime=${data.endTime}&username=${data.username}&depName=${data.depname}`);
......@@ -56,6 +59,8 @@ export const api_getDepList = async (): Promise<any> => await axios.get('/dep/li
export const api_putPassword = async (data:any): Promise<any> => await axios.put(`/user/password/${data.id}/${data.password}`);
export const api_getRoleId = async (id:any): Promise<any> => await axios.get(`/role/${id}`);
// ------------------- 角色管理接口 ------------------
export const api_rolePage = async (data: any): Promise<any> =>
await axios.get(`/role/page?pageNum=${data.pageNum}&pageSize=${data.pageSize}&roleName=${data.rolename}&startTime=${data.startTime}&endTime=${data.endTime}`);
......
src/api/interface/index.ts
View file @ 83672c70
interface DetectionRecord {
type: string;
cardId: any;
id: number;
videoName: string;
cameraName: string;
......
src/api/utils/cesium.ts
View file @ 83672c70
......@@ -32,4 +32,25 @@ export const create3D = async (viewer: any, url: any, height = 0) => {
tiles.modelMatrix = Cesium.Matrix4.fromTranslation(translate);
create3D.id = viewer.scene.primitives.add(tiles);
viewer.zoomTo(tiles);
}
export function pointLine(viewer) {
let polygonCoordList = [
122.04454563914409,37.489284875763744,
122.04561831986973,37.487027958982864,
122.05006039343479,37.48821693911029,
122.04881042851096,37.49135388724233,
]
// 创建红色线圈
viewer.entities.add({
id: 'allTotalArea',
name: 'allTotalArea',
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray(polygonCoordList),
width: 4,
material: Cesium.Color.RED,
clampToGround: true, // 禁用贴地
},
})
}
\ No newline at end of file
src/api/utils/cesiumCarsUtil.ts
View file @ 83672c70
......@@ -182,17 +182,19 @@ function densifyPoints(positions: any[], stepSize: number = 2.0) {
}
export async function createNewPositionHeight(position: any, viewer: any) {
const denseCoordinates = densifyPoints(position, 10.0); // 每隔2米插入一个点
const denseCoordinates = densifyPoints(position, 20.0); // 每隔20米插入一个点
let clampedPositions: any[] = [];
try {
const updatedPositions = await viewer.scene.clampToHeightMostDetailed(denseCoordinates);
clampedPositions = updatedPositions.map((pos: any) => {
const cartographic = Cesium.Cartographic.fromCartesian(pos);
return Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + 0.8);
});
for(let item of updatedPositions) {
if(item) {
const cartographic = Cesium.Cartographic.fromCartesian(item);
let dataPoints = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + 6);
clampedPositions.push(dataPoints);
}
}
} catch (error) {
console.warn('高度贴合计算失败或部分失败:', error);
clampedPositions = denseCoordinates;
......
src/api/utils/cesiumModel.ts
View file @ 83672c70
......@@ -2,7 +2,7 @@ import { loadEnv } from "vite";
import { getModelNewApi } from "../index";
export async function getModel() {
const url = 'http://192.168.2.53:9995/model/'
const url = 'http://192.168.2.67:9995/model/'
let res = await getModelNewApi();
......
src/api/utils/cesiumUtil.ts
View file @ 83672c70
......@@ -188,11 +188,13 @@ export async function createNewPositionHeight(position: any, viewer: any) {
try {
const updatedPositions = await viewer.scene.clampToHeightMostDetailed(denseCoordinates);
clampedPositions = updatedPositions.map((pos: any) => {
const cartographic = Cesium.Cartographic.fromCartesian(pos);
return Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + 6);
});
for(let item of updatedPositions) {
if(item) {
const cartographic = Cesium.Cartographic.fromCartesian(item);
let dataPoints = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + 6);
clampedPositions.push(dataPoints);
}
}
} catch (error) {
console.warn('高度贴合计算失败或部分失败:', error);
clampedPositions = denseCoordinates;
......@@ -224,7 +226,6 @@ export async function startVehicleMovement(viewer: any, totalDuration: number) {
for (let i = 0; i < rawCoordinates.length - 1; i++) {
totalDistance += Cesium.Cartesian3.distance(rawCoordinates[i], rawCoordinates[i + 1]);
}
let accumulatedTime = 0;
positionProperty.addSample(viewer.clock.currentTime, rawCoordinates[0]);
......
src/components/MineMonitor/RightTodayAlarm.vue
View file @ 83672c70
......@@ -89,12 +89,16 @@
<template v-if="boundaryData.length > 0">
<template v-for="(item, index) in boundaryData" :key="index">
<dd class="list-item" :class="getItemClass(item)">
<span>{{ item.driver }}</span>
<span>{{ item.licensePlate }}</span>
<span class="time-cell">
<span>{{ item.driver || item.carName }}</span>
<span>{{ item.licensePlate || item.id }}</span>
<span class="time-cell" v-if="item.boundaryTime">
<div class="date-part">{{ item.boundaryTime?.split(' ')[0] }}</div>
<div class="time-part">{{ item.boundaryTime?.split(' ')[1] }}</div>
</span>
<span class="time-cell" v-if="item.createTime">
<div class="date-part">{{ item.createTime?.split(' ')[0] }}</div>
<div class="time-part">{{ item.createTime?.split(' ')[1] }}</div>
</span>
</dd>
</template>
</template>
......
src/layouts/modules/global-header/index.vue
View file @ 83672c70
......@@ -55,10 +55,10 @@ function goToCesium() {
<img src="@/assets/daping.png" alt="" style="width: 16px; height: 16px; margin-right: 4px" />
大屏
</NButton>
<NButton quaternary circle style="width: 60px">
<!-- <NButton quaternary circle style="width: 60px">
<img src="@/assets/qiehuan.png" alt="" style="width: 16px; height: 16px; margin-right: 4px" />
切换
</NButton>
</NButton> -->
<!--
<NButton quaternary circle style="width: 60px" >
<img src="@/assets/yonghu.png" alt="" style="width: 16px; height: 16px; margin-right: 4px" />
......
src/layouts/modules/global-menu/modules/vertical-menu.vue
View file @ 83672c70
......@@ -8,6 +8,7 @@ import { useThemeStore } from '@/store/modules/theme';
import { useRouteStore } from '@/store/modules/route';
import { useRouterPush } from '@/hooks/common/router';
import { useMenu } from '../context';
import { localStg } from '@/utils/storage';
defineOptions({
name: 'VerticalMenu'
......@@ -51,11 +52,12 @@ watch(
:collapsed="appStore.siderCollapse"
:collapsed-width="themeStore.sider.collapsedWidth"
:collapsed-icon-size="22"
:options="routeStore.menus"
:options="localStg.get('routerList')"
:inverted="inverted"
:indent="18"
@update:value="routerPushByKeyWithMetaQuery"
/>
<!-- :options="localStg.get('routerList')" -->
</SimpleScrollbar>
</Teleport>
</template>
......
src/locales/langs/zh-cn.ts
View file @ 83672c70
......@@ -222,7 +222,7 @@ const local: App.I18n.Schema = {
404: '页面不存在',
500: '服务器错误',
'iframe-page': '外链页面',
cesiumdeom: 'Cesium大屏',
cesiumdeom: '综合大屏',
home: '越界开采系统',
home_police: '报警列表',
home_rail: '电子围栏管理',
......
src/router/guard/route.ts
View file @ 83672c70
......@@ -38,9 +38,9 @@ export function createRouteGuard(router: Router) {
const hasRole = authStore.userInfo.roles.some(role => routeRoles.includes(role));
const hasAuth = authStore.isStaticSuper || !routeRoles.length || hasRole;
// if it is login route when logged in, then switch to the root page
// if it is login route when logged in, then switch to the home page
if (to.name === loginRoute && isLogin) {
next({ name: rootRoute });
next({ path: '/home' });
return;
}
......
src/router/index.ts
View file @ 83672c70
......@@ -30,6 +30,7 @@ export const router = createRouter({
routes
});
/** Setup Vue Router */
export async function setupRouter(app: App) {
app.use(router);
......@@ -38,6 +39,6 @@ export async function setupRouter(app: App) {
}
router.beforeEach((to, from, next) => {
connect();
connect('home');
next();
});
src/router/routes/builtin.ts
View file @ 83672c70
......@@ -5,7 +5,7 @@ import { getRoutePath, transformElegantRoutesToVueRoutes } from '../elegant/tran
export const ROOT_ROUTE: CustomRoute = {
name: 'root',
path: '/',
redirect: getRoutePath(import.meta.env.VITE_ROUTE_HOME) || '/home',
redirect: '/login',
meta: {
title: 'root',
constant: true
......
src/typings/components.d.ts
View file @ 83672c70
......@@ -19,24 +19,10 @@ declare module 'vue' {
DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
ExceptionBase: typeof import('./../components/common/exception-base.vue')['default']
FullScreen: typeof import('./../components/common/full-screen.vue')['default']
IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined')['default']
IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
'IconIc:baselineFileDownload': typeof import('~icons/ic/baseline-file-download')['default']
'IconIc:baselinePlus': typeof import('~icons/ic/baseline-plus')['default']
'IconIc:roundClose': typeof import('~icons/ic/round-close')['default']
'IconIc:roundFileUpload': typeof import('~icons/ic/round-file-upload')['default']
'IconIc:roundTableView': typeof import('~icons/ic/round-table-view')['default']
'IconIc:twotoneFormatListBulleted': typeof import('~icons/ic/twotone-format-list-bulleted')['default']
IconLocalBanner: typeof import('~icons/local/banner')['default']
IconLocalLogo: typeof import('~icons/local/logo')['default']
IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
IconTooltip: typeof import('./../components/common/icon-tooltip.vue')['default']
IconUilSearch: typeof import('~icons/uil/search')['default']
LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
LeftDeviceStatus: typeof import('./../components/MineMonitor/LeftDeviceStatus.vue')['default']
LeftOnlineMonitor: typeof import('./../components/MineMonitor/LeftOnlineMonitor.vue')['default']
......@@ -49,12 +35,10 @@ declare module 'vue' {
NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
NButton: typeof import('naive-ui')['NButton']
NButtonGroup: typeof import('naive-ui')['NButtonGroup']
NCard: typeof import('naive-ui')['NCard']
NCheckbox: typeof import('naive-ui')['NCheckbox']
NCol: typeof import('naive-ui')['NCol']
NColorPicker: typeof import('naive-ui')['NColorPicker']
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
NDataTable: typeof import('naive-ui')['NDataTable']
NDatePicker: typeof import('naive-ui')['NDatePicker']
NDialogProvider: typeof import('naive-ui')['NDialogProvider']
......@@ -62,42 +46,26 @@ declare module 'vue' {
NDrawer: typeof import('naive-ui')['NDrawer']
NDrawerContent: typeof import('naive-ui')['NDrawerContent']
NDropdown: typeof import('naive-ui')['NDropdown']
NEmpty: typeof import('naive-ui')['NEmpty']
NFlex: typeof import('naive-ui')['NFlex']
NForm: typeof import('naive-ui')['NForm']
NFormItem: typeof import('naive-ui')['NFormItem']
NGi: typeof import('naive-ui')['NGi']
NGrid: typeof import('naive-ui')['NGrid']
NIcon: typeof import('naive-ui')['NIcon']
NInfiniteScroll: typeof import('naive-ui')['NInfiniteScroll']
NInput: typeof import('naive-ui')['NInput']
NInputGroup: typeof import('naive-ui')['NInputGroup']
NInputNumber: typeof import('naive-ui')['NInputNumber']
NList: typeof import('naive-ui')['NList']
NListItem: typeof import('naive-ui')['NListItem']
NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
NMenu: typeof import('naive-ui')['NMenu']
NMessageProvider: typeof import('naive-ui')['NMessageProvider']
NModal: typeof import('naive-ui')['NModal']
NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
NPagination: typeof import('naive-ui')['NPagination']
NPopover: typeof import('naive-ui')['NPopover']
NPopselect: typeof import('naive-ui')['NPopselect']
NRadio: typeof import('naive-ui')['NRadio']
NRadioGroup: typeof import('naive-ui')['NRadioGroup']
NRow: typeof import('naive-ui')['NRow']
NSc: typeof import('naive-ui')['NSc']
NScord: typeof import('naive-ui')['NScord']
NScrollbar: typeof import('naive-ui')['NScrollbar']
NSelect: typeof import('naive-ui')['NSelect']
NSpace: typeof import('naive-ui')['NSpace']
NSpaceNCOl: typeof import('naive-ui')['NSpaceNCOl']
NSpin: typeof import('naive-ui')['NSpin']
NStatistic: typeof import('naive-ui')['NStatistic']
NSwitch: typeof import('naive-ui')['NSwitch']
NTab: typeof import('naive-ui')['NTab']
NTabs: typeof import('naive-ui')['NTabs']
NThing: typeof import('naive-ui')['NThing']
NTooltip: typeof import('naive-ui')['NTooltip']
NTree: typeof import('naive-ui')['NTree']
NTreeSelect: typeof import('naive-ui')['NTreeSelect']
......@@ -129,24 +97,10 @@ declare global {
const DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
const ExceptionBase: typeof import('./../components/common/exception-base.vue')['default']
const FullScreen: typeof import('./../components/common/full-screen.vue')['default']
const IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
const IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined')['default']
const IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
const IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
const 'IconIc:baselineFileDownload': typeof import('~icons/ic/baseline-file-download')['default']
const 'IconIc:baselinePlus': typeof import('~icons/ic/baseline-plus')['default']
const 'IconIc:roundClose': typeof import('~icons/ic/round-close')['default']
const 'IconIc:roundFileUpload': typeof import('~icons/ic/round-file-upload')['default']
const 'IconIc:roundTableView': typeof import('~icons/ic/round-table-view')['default']
const 'IconIc:twotoneFormatListBulleted': typeof import('~icons/ic/twotone-format-list-bulleted')['default']
const IconLocalBanner: typeof import('~icons/local/banner')['default']
const IconLocalLogo: typeof import('~icons/local/logo')['default']
const IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
const IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
const IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
const IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
const IconTooltip: typeof import('./../components/common/icon-tooltip.vue')['default']
const IconUilSearch: typeof import('~icons/uil/search')['default']
const LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
const LeftDeviceStatus: typeof import('./../components/MineMonitor/LeftDeviceStatus.vue')['default']
const LeftOnlineMonitor: typeof import('./../components/MineMonitor/LeftOnlineMonitor.vue')['default']
......@@ -159,12 +113,10 @@ declare global {
const NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
const NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
const NButton: typeof import('naive-ui')['NButton']
const NButtonGroup: typeof import('naive-ui')['NButtonGroup']
const NCard: typeof import('naive-ui')['NCard']
const NCheckbox: typeof import('naive-ui')['NCheckbox']
const NCol: typeof import('naive-ui')['NCol']
const NColorPicker: typeof import('naive-ui')['NColorPicker']
const NConfigProvider: typeof import('naive-ui')['NConfigProvider']
const NDataTable: typeof import('naive-ui')['NDataTable']
const NDatePicker: typeof import('naive-ui')['NDatePicker']
const NDialogProvider: typeof import('naive-ui')['NDialogProvider']
......@@ -172,42 +124,26 @@ declare global {
const NDrawer: typeof import('naive-ui')['NDrawer']
const NDrawerContent: typeof import('naive-ui')['NDrawerContent']
const NDropdown: typeof import('naive-ui')['NDropdown']
const NEmpty: typeof import('naive-ui')['NEmpty']
const NFlex: typeof import('naive-ui')['NFlex']
const NForm: typeof import('naive-ui')['NForm']
const NFormItem: typeof import('naive-ui')['NFormItem']
const NGi: typeof import('naive-ui')['NGi']
const NGrid: typeof import('naive-ui')['NGrid']
const NIcon: typeof import('naive-ui')['NIcon']
const NInfiniteScroll: typeof import('naive-ui')['NInfiniteScroll']
const NInput: typeof import('naive-ui')['NInput']
const NInputGroup: typeof import('naive-ui')['NInputGroup']
const NInputNumber: typeof import('naive-ui')['NInputNumber']
const NList: typeof import('naive-ui')['NList']
const NListItem: typeof import('naive-ui')['NListItem']
const NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
const NMenu: typeof import('naive-ui')['NMenu']
const NMessageProvider: typeof import('naive-ui')['NMessageProvider']
const NModal: typeof import('naive-ui')['NModal']
const NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
const NPagination: typeof import('naive-ui')['NPagination']
const NPopover: typeof import('naive-ui')['NPopover']
const NPopselect: typeof import('naive-ui')['NPopselect']
const NRadio: typeof import('naive-ui')['NRadio']
const NRadioGroup: typeof import('naive-ui')['NRadioGroup']
const NRow: typeof import('naive-ui')['NRow']
const NSc: typeof import('naive-ui')['NSc']
const NScord: typeof import('naive-ui')['NScord']
const NScrollbar: typeof import('naive-ui')['NScrollbar']
const NSelect: typeof import('naive-ui')['NSelect']
const NSpace: typeof import('naive-ui')['NSpace']
const NSpaceNCOl: typeof import('naive-ui')['NSpaceNCOl']
const NSpin: typeof import('naive-ui')['NSpin']
const NStatistic: typeof import('naive-ui')['NStatistic']
const NSwitch: typeof import('naive-ui')['NSwitch']
const NTab: typeof import('naive-ui')['NTab']
const NTabs: typeof import('naive-ui')['NTabs']
const NThing: typeof import('naive-ui')['NThing']
const NTooltip: typeof import('naive-ui')['NTooltip']
const NTree: typeof import('naive-ui')['NTree']
const NTreeSelect: typeof import('naive-ui')['NTreeSelect']
......
src/utils/ai.ts
View file @ 83672c70
......@@ -4,7 +4,7 @@ let webRtcServrce = ref();
export function webVideo(rtsp: any) {
console.log('111',rtsp);
webRtcServrce.value = new WebRtcStreamer('video', location.protocol + '//' + "192.168.2.53:8000")
webRtcServrce.value = new WebRtcStreamer('video', location.protocol + '//' + "192.168.2.67:8000")
webRtcServrce.value.connect('rtsp://admin:Gemho120611@192.168.0.17:554/h264/ch1/main/av_stream');
};
src/utils/webSocket.ts
View file @ 83672c70
......@@ -4,16 +4,16 @@ import { router } from '@/router';
import { localStg } from './storage';
import { AudioPlayer } from './common';
let ws: any = null;
const severName = 'home';
let severName = 'home';
// 定义WebSocket连接的URL
const webSocketUrl = `ws://192.168.2.53:8080/ws/${severName}`;
const webSocketUrl = `ws://192.168.2.67:9995/ws/${severName}`;
// 存储活动通知实例的数组，用于限制通知数量
const activeNotifications: any[] = [];
const MAX_NOTIFICATIONS = 3;
const htmlStr = ref('');
// JSON字符串转对象函数
function parseDetectionRecord(jsonString: string): DetectionRecord {
export function parseDetectionRecord(jsonString: string): DetectionRecord {
try {
// 注意：需要先清理字符串中的额外反引号
const cleanedString = jsonString.replace(/^\s*`|`\s*$/g, '');
......@@ -53,11 +53,12 @@ function createLimitedNotification(options: any) {
return notification;
}
const playAudio = async (id: any) => {
const player = new AudioPlayer(`http://192.168.2.53:9995/v1/play/${id}`);
const player = new AudioPlayer(`http://192.168.2.67:9995/v1/play/${id}`);
player.play().catch(err => console.error('播放失败',err));
player.play().catch(err => console.error('播放失败', err));
};
export function connect() {
export function connect(name:any) {
severName = name;
if ('WebSocket' in window) {
ws = new WebSocket(webSocketUrl);
// 连接成功时触发
......@@ -69,12 +70,17 @@ export function connect() {
// 接收到消息时触发
ws.onmessage = function (event) {
const recordObject: DetectionRecord = parseDetectionRecord(event.data);
if (event.data == 401) {
localStorage.removeItem('token');
router.push('/login');
// 处理接收到的数据
const data = recordObject;
console.log('111', data);
if (data.type == 'router') {
router.push({
path: '/personnel/track',
query: {
cardId: data.cardId
}
});
} else {
// 处理接收到的数据
const data = recordObject;
if (true) {
playAudio(data.algorithmId);
}
......@@ -102,7 +108,7 @@ export function connect() {
])
]),
h(NRow, { gutter: 10, style: { marginTop: '10px' } }, [
h(NCol, { span: 7 },[
h(NCol, { span: 7 }, [
h('div', { style: { fontSize: '14px', textAlign: 'center' } }, [
h('span', '报警图片：')
])
......@@ -110,59 +116,14 @@ export function connect() {
h(NCol, { span: 15 }, [
h('img', {
style: { height: '100px', width: '200px' },
src: 'http://192.168.2.53:9995/image/979fc62b9f3a4097933e6e0a0aed489d.jpg'
src: 'http://192.168.2.67:9995/image/979fc62b9f3a4097933e6e0a0aed489d.jpg'
})
]),
// h(NCol, { span: 12 }, [
// h(NSpace, { vertical: true, justify: 'space-between' }, [
// // h('div', [
// // h(NButton, { quaternary: true, round: true }, () => data.cameraName || ''),
// // h('div', { style: { fontSize: '14px' } }, [
// // h(
// // NButton,
// // {
// // quaternary: true,
// // round: true,
// // type: 'info',
// // onClick: () => toLogPage(data)
// // },
// // () => '查看详情'
// // )
// // ])
// // ]),
// // h('div', { style: { display: 'flex', justifyContent: 'space-between', marginTop: '20px' } }, [
// // h(
// // NButton,
// // {
// // strong: true,
// // secondary: true,
// // size: 'small',
// // // onClick: () => modifyAlramStatus(data.id, '1')
// // style: {
// // color: 'white',
// // backgroundColor: '#2196f3'
// // }
// // },
// // () => '正确报警'
// // ),
// // h(
// // NButton,
// // {
// // strong: true,
// // secondary: true,
// // size: 'small',
// // style: { marginLeft: '20px', color: 'white', backgroundColor: '#f57b70' }
// // // onClick: () => modifyAlramStatus(data.id, '2')
// // },
// // () => '错误报警'
// // )
// // ])
// ])
// ])
])
])
});
}
// 处理收到的消息
};
......
src/views/_builtin/cesiumDeom/index copy.vue
View file @ 83672c70
<script setup lang="ts">
import { nextTick, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue';
import '../../../../Cesium/Widgets/widgets.css';
import { useMessage } from 'naive-ui';
import {
getCameraIdApi,
getCarPointAllCarApi,
getCemeraPointApi,
getFenceListsApi,
getHomeCarApi,
getMonitorIdApi,
getMonitorPointApi,
getPointAllPersonApi,
getPointListApi
} from '@/api';
import { create3D } from '@/api/utils/cesium';
import { getElevationFromRay, getElevationFromRays } from '@/api/utils/cesiumUtil';
import { cesiumToLongitudeAndLatitude } from '@/api/utils/coordinateUtil';
import { getModel } from '@/api/utils/cesiumModel';
import { iconPoint } from '@/api/utils/home/cesiumPositions';
import { carSpeed } from '@/api/utils/carSpeed';
import fullScreen from '@/utils/full';
import { webVideo } from '@/utils/ai';
import bluePersonIcon from '@/assets/blueperson.png';
import arrowLeftImg from '@/assets/jinrun/arrow-left.png';
import arrowRightImg from '@/assets/jinrun/arrow-right.png';
import redCarIcon from '@/assets/icon15Red.png';
import redVideoIcon from '@/assets/icon16Red.png';
import redBianIcon from '@/assets/icon17Red.png';
import redPersonIcon from '../../../assets/redperson.png';
import blueCarIcon from '@/assets/icon15.png';
import blueVideoIcon from '@/assets/icon16.png';
import blueBianIcon from '@/assets/icon17.png';
import MultiSelect from './appselect.vue';
let viewer: any = null;
const message = useMessage();
let personEntity: any;
const pins: any = [];
const full = ref(false);
let entityId: any;
let link: any;
let speed = 0;
let text = '';
const personList = ref([]);
const modelData = ref([
[122.04736846370741, 37.48958083145254],
[122.04760069379522, 37.489226301608184],
[122.04823299200363, 37.489451482540346],
[122.04802271634016, 37.48983410372907],
[122.04748237248322, 37.49016152294277]
]);
const options = [
{
label: '全选',
value: '1'
},
{
label: '在线监测设备',
value: '3'
},
{
label: '视频监控',
value: '2'
},
{
label: '人员定位',
value: '4'
},
{
label: '车辆定位',
value: '5'
},
{
label: '越界开采',
value: '6'
import { nextTick, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue';
import '../../../../Cesium/Widgets/widgets.css';
import { useMessage } from 'naive-ui';
import {
api_getRoleId,
getCameraIdApi,
getCarPointAllCarApi,
getCemeraPointApi,
getFenceListsApi,
getHomeCarApi,
getMonitorIdApi,
getMonitorPointApi,
getPointAllPersonApi,
getPointListApi
} from '@/api';
import { create3D, pointLine } from '@/api/utils/cesium';
import { getElevationFromRay, getElevationFromRays } from '@/api/utils/cesiumUtil';
import { cesiumToLongitudeAndLatitude } from '@/api/utils/coordinateUtil';
import { getModel } from '@/api/utils/cesiumModel';
import { iconPoint } from '@/api/utils/home/cesiumPositions';
import { carSpeed } from '@/api/utils/carSpeed';
import fullScreen from '@/utils/full';
import { webVideo } from '@/utils/ai';
import bluePersonIcon from '@/assets/blueperson.png';
import arrowLeftImg from '@/assets/jinrun/arrow-left.png';
import arrowRightImg from '@/assets/jinrun/arrow-right.png';
import redCarIcon from '@/assets/icon15Red.png';
import redVideoIcon from '@/assets/icon16Red.png';
import redBianIcon from '@/assets/icon17Red.png';
import blueCarIcon from '@/assets/icon15.png';
import blueVideoIcon from '@/assets/icon16.png';
import blueBianIcon from '@/assets/icon17.png';
import redPersonIcon from '../../../assets/redperson.png';
import MultiSelect from './appselect.vue';
import { useRouteStore } from '@/store/modules/route';
import { router } from '@/router';
import { localStg } from '@/utils/storage';
let viewer: any = null;
const message = useMessage();
let personEntity: any;
const pins: any = [];
const full = ref(false);
let entityId: any;
const routeStore = useRouteStore();
let link: any;
let speed = 0;
let text = '';
const personList = ref([]);
const modelData = ref([
[122.04736846370741, 37.48958083145254],
[122.04760069379522, 37.489226301608184],
[122.04823299200363, 37.489451482540346],
[122.04802271634016, 37.48983410372907],
[122.04748237248322, 37.49016152294277]
]);
const options = [
{
label: '全选',
value: '1'
},
{
label: '在线监测设备',
value: '3'
},
{
label: '视频监控',
value: '2'
},
{
label: '人员定位',
value: '4'
},
{
label: '车辆定位',
value: '5'
},
{
label: '越界开采',
value: '6'
}
];
const value = ref(options.map(opt => opt.value));
const data = ref([]);
const datasouce = ref();
const fence = ref<any>();
const personShow = ref(false);
const carShow = ref(false);
const equipmentShow = ref(false);
const videoShow = ref(false);
const treeFence = ref<any>([]);
const wallEntities = ref<any[]>([]);
const iconEntities = ref<any[]>([]);
const fenceData = ref({
imagePath: '',
imageColor: ''
});
const labelData = ref<any>();
const formData = ref([]);
// zhaojunbao 开始
// REM自适应配置
const active = ref(false);
const REM_CONFIG = {
// 设计稿宽度
designWidth: 1920,
designHeight: 1080,
// 基准值：1rem = 100px
baseSize: 100
};
// 动态路由
const navTo = async () => {
let result = routeStore.menus;
let getStorage = localStorage.getItem('loginId');
if(!getStorage) {
window.location.href = '/login';
}
let res = await api_getRoleId(getStorage);
let menus = res.data.data.permissionIds;
const routeList: any = []
for (let item of result) {
let res = menus.find(data => data.menuPath == item.key);
if (res) {
routeList.push(item);
}
];
const value = ref(options.map(opt => opt.value));
const data = ref([]);
const datasouce = ref();
const fence = ref<any>();
const personShow = ref(false);
const carShow = ref(false);
const equipmentShow = ref(false);
const videoShow = ref(false);
const treeFence = ref<any>([]);
const wallEntities = ref<any[]>([]);
const iconEntities = ref<any[]>([]);
const fenceData = ref({
imagePath: '',
imageColor: ''
});
const labelData = ref<any>();
const formData = ref([]);
// zhaojunbao 开始
// REM自适应配置
const active = ref(false);
const REM_CONFIG = {
// 设计稿宽度
designWidth: 1920,
designHeight: 1080,
// 基准值：1rem = 100px
baseSize: 100
};
// 跳转首页
const navTo = () => {
window.location.href = '/home';
};
/**
* 设置REM单位
* 根据窗口宽度动态计算根元素font-size
*/
const setRemUnit = () => {
const { designWidth, designHeight, baseSize } = REM_CONFIG;
// 获取当前窗口尺寸
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// 计算宽高缩放比例
const scaleX = windowWidth / designWidth;
const scaleY = windowHeight / designHeight;
// 取较小的缩放比例以适应屏幕，确保内容不会被裁剪
const scale = Math.min(scaleX, scaleY);
// 设置根元素font-size，确保最小为50px（可选）
const fontSize = Math.max(baseSize * scale, 50);
document.documentElement.style.fontSize = `${fontSize}px`;
};
// 控制左右模块显示状态的响应式变量
const isLeftModulesVisible = ref(true);
const isRightModulesVisible = ref(true);
}
const toggleBothModules = () => {
isLeftModulesVisible.value = !isLeftModulesVisible.value;
isRightModulesVisible.value = !isRightModulesVisible.value;
localStg.set('routerList', routeList)
window.location.href = '/home';
};
/**
* 设置REM单位
* 根据窗口宽度动态计算根元素font-size
*/
const setRemUnit = () => {
const { designWidth, designHeight, baseSize } = REM_CONFIG;
// 获取当前窗口尺寸
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// 计算宽高缩放比例
const scaleX = windowWidth / designWidth;
const scaleY = windowHeight / designHeight;
// 取较小的缩放比例以适应屏幕，确保内容不会被裁剪
const scale = Math.min(scaleX, scaleY);
// 设置根元素font-size，确保最小为50px（可选）
const fontSize = Math.max(baseSize * scale, 50);
document.documentElement.style.fontSize = `${fontSize}px`;
};
// 控制左右模块显示状态的响应式变量
const isLeftModulesVisible = ref(true);
const isRightModulesVisible = ref(true);
const toggleBothModules = () => {
isLeftModulesVisible.value = !isLeftModulesVisible.value;
isRightModulesVisible.value = !isRightModulesVisible.value;
};
// zhaojunbao 结束
// 模型
function add3dtiles() {
const CesiumConfig = {
defaultAccessToken:
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NTE1OTUxOS1jNTc5LTQwNmMtOWU5My1jNTI3NTIyYzAxNTUiLCJpZCI6MjUwODM5LCJpYXQiOjE3Mjk5MjE1MzV9.xromwPD3oA1e0YsWV035DE5KmYvivkC6fxt344vwObA'
};
// zhaojunbao 结束
// 模型
function add3dtiles() {
const CesiumConfig = {
defaultAccessToken:
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NTE1OTUxOS1jNTc5LTQwNmMtOWU5My1jNTI3NTIyYzAxNTUiLCJpZCI6MjUwODM5LCJpYXQiOjE3Mjk5MjE1MzV9.xromwPD3oA1e0YsWV035DE5KmYvivkC6fxt344vwObA'
};
Cesium.Ion.defaultAccessToken = CesiumConfig.defaultAccessToken;
viewer = new Cesium.Viewer('cesiumContainer', {
geocoder: false,
homeButton: false,
infoBox: false,
animation: false,
fullscreenButton: false,
enableCompass: true, // 启用指南针
enableCompassOuterRing: true, // 启用指南针外环
sceneModePicker: false,
timeline: false,
navigationHelpButton: false,
baseLayerPicker: false,
enableZoomControls: false, // 禁用缩放控件
enableDistanceLegend: false, // 禁用比例尺
selectionIndicator: false
Cesium.Ion.defaultAccessToken = CesiumConfig.defaultAccessToken;
viewer = new Cesium.Viewer('cesiumContainer', {
geocoder: false,
homeButton: false,
infoBox: false,
animation: false,
fullscreenButton: false,
enableCompass: true, // 启用指南针
enableCompassOuterRing: true, // 启用指南针外环
sceneModePicker: false,
timeline: false,
navigationHelpButton: false,
baseLayerPicker: false,
enableZoomControls: false, // 禁用缩放控件
enableDistanceLegend: false, // 禁用比例尺
selectionIndicator: false
});
viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.cesiumWidget.creditContainer.style.display = 'none';
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
getModel().then(item => {
create3D(viewer, item, 0);
});
}
// 监听选中值的变化
watch(
value,
(newVal, oldVal) => {
// 防止无限递归
if (JSON.stringify(newVal) === JSON.stringify(oldVal)) return;
// 获取除全选外的所有选项值
const otherValues = options.slice(1).map(opt => opt.value);
// 检查是否选中了所有其他选项
const allOtherSelected = otherValues.every(val => newVal.includes(val));
// 检查是否点击了全选
const allSelectedNow = newVal.includes('1');
const allSelectedBefore = oldVal.includes('1');
// 点击了全选选项
if (allSelectedNow && !allSelectedBefore) {
value.value = options.map(opt => opt.value);
return;
}
// 取消了全选选项
if (!allSelectedNow && allSelectedBefore) {
// 检查是否所有其他选项都被选中
const allOtherOptionsSelected = otherValues.every(val => newVal.includes(val));
if (allOtherOptionsSelected) {
// 如果所有其他选项都被选中，取消所有选中状态
value.value = [];
} else {
// 如果不是所有其他选项都被选中，只取消全选选项
value.value = newVal.filter(val => val !== '1');
}
return;
}
const someOptionUnselected = oldVal.length > newVal.length;
if (someOptionUnselected && allSelectedNow) {
// 如果取消了某个选项且当前处于全选状态，取消全选，但保留其他选项
value.value = newVal.filter(val => val !== '1');
}
// 选中了所有其他选项，自动选中全选
if (allOtherSelected && !allSelectedNow) {
value.value = options.map(opt => opt.value);
}
// 如果取消了所有选项，清空value
if (newVal.length === 0) {
value.value = [];
}
},
{ deep: true }
);
// 监听选择框的变化
watch(
value,
newValue => {
// 如果选中了"全选"，显示所有实体
if (newValue.includes('1')) {
wallEntities.value.forEach(entity => (entity.show = true));
// 显示所有图标和标签
pins.forEach(pin => {
if (pin.entity) pin.entity.show = true;
if (pin.labelEntity) pin.labelEntity.show = true;
if (pin.backgroundEntity) pin.backgroundEntity.show = true;
});
} else {
// 根据选中的选项显示对应实体
wallEntities.value.forEach(entity => {
entity.show = newValue.includes('6'); // 越界开采对应电子围栏
});
// 根据选中的选项显示对应图标和标签
pins.forEach(pin => {
const type = pin.type;
let shouldShow = false;
switch (type) {
case 1: // 人员定位
shouldShow = newValue.includes('4');
break;
case 2: // 车辆定位
shouldShow = newValue.includes('5');
break;
case 3: // 在线监测设备
shouldShow = newValue.includes('3');
break;
case 4: // 视频监控
shouldShow = newValue.includes('2');
break;
default:
shouldShow = false;
}
// 设置图标和标签的显示状态
if (pin.entity) pin.entity.show = shouldShow;
if (pin.labelEntity) pin.labelEntity.show = shouldShow;
if (pin.backgroundEntity) pin.backgroundEntity.show = shouldShow;
});
}
},
{ immediate: true }
);
async function fenceListGet() {
const res = await getFenceListsApi();
formData.value = res.data.data;
for (const item of res.data.data) {
const positions = item.coordinate.map((item: { xcoordinate: any; ycoordinate: any }) => {
return [item.xcoordinate, item.ycoordinate];
});
viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.cesiumWidget.creditContainer.style.display = 'none';
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
getModel().then(item => {
create3D(viewer, item, 0);
const heights: any = [];
for (const data of item.coordinate) {
const cartographic = Cesium.Cartographic.fromDegrees(data.xcoordinate, data.ycoordinate);
const height = await getElevationFromRay(cartographic, viewer);
heights.push(height);
}
electronic(positions, heights, item.rangeType);
}
}
// 电子围栏
function electronic(position: any, heightData: any, rangeType: any) {
function map_common_addDatasouce(datasouceName: string) {
let datasouce = viewer.dataSources._dataSources.find(t => {
return t && t.name == datasouceName;
});
if (!datasouce) {
datasouce = new Cesium.CustomDataSource(datasouceName);
viewer.dataSources.add(datasouce);
}
return datasouce;
}
// 监听选中值的变化
watch(
value,
(newVal, oldVal) => {
// 防止无限递归
if (JSON.stringify(newVal) === JSON.stringify(oldVal)) return;
// 获取除全选外的所有选项值
const otherValues = options.slice(1).map(opt => opt.value);
// 检查是否选中了所有其他选项
const allOtherSelected = otherValues.every(val => newVal.includes(val));
// 检查是否点击了全选
const allSelectedNow = newVal.includes('1');
const allSelectedBefore = oldVal.includes('1');
// 点击了全选选项
if (allSelectedNow && !allSelectedBefore) {
value.value = options.map(opt => opt.value);
return;
}
// 取消了全选选项
if (!allSelectedNow && allSelectedBefore) {
// 检查是否所有其他选项都被选中
const allOtherOptionsSelected = otherValues.every(val => newVal.includes(val));
if (allOtherOptionsSelected) {
// 如果所有其他选项都被选中，取消所有选中状态
value.value = [];
} else {
// 如果不是所有其他选项都被选中，只取消全选选项
value.value = newVal.filter(val => val !== '1');
}
return;
}
const someOptionUnselected = oldVal.length > newVal.length;
if (someOptionUnselected && allSelectedNow) {
// 如果取消了某个选项且当前处于全选状态，取消全选，但保留其他选项
value.value = newVal.filter(val => val !== '1');
}
// 选中了所有其他选项，自动选中全选
if (allOtherSelected && !allSelectedNow) {
value.value = options.map(opt => opt.value);
function DynamicWallMaterialProperty(options: any) {
this._definitionChanged = new Cesium.Event();
this._color = undefined;
this._colorSubscription = undefined;
this.color = options.color || Color.BLUE;
this.duration = options.duration || 1000;
this.trailImage = options.trailImage;
this._time = new Date().getTime();
}
function _getDirectionWallShader(options: any) {
if (options && options.get) {
let materail =
'czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
czm_material material = czm_getDefaultMaterial(materialInput);\n\
vec2 st = materialInput.st;';
if (options.freely == 'vertical') {
// （由下到上）
materail += `vec4 colorImage = texture(image, vec2(fract(st.s), fract(float(${options.count})*st.t${
options.direction
} time)));\n\ `;
} else {
// （逆时针）
materail += `vec4 colorImage = texture(image, vec2(fract(float(${options.count})*st.s ${
options.direction
} time), fract(st.t)));\n\ `;
}
// 如果取消了所有选项，清空value
if (newVal.length === 0) {
value.value = [];
// 泛光
materail +=
'vec4 fragColor;\n\
fragColor.rgb = (colorImage.rgb+color.rgb) / 1.0;\n\
fragColor = czm_gammaCorrect(fragColor);\n\
material.diffuse = colorImage.rgb;\n\
material.alpha = colorImage.a;\n\
material.emission = fragColor.rgb;\n\
return material;\n\
}';
return materail;
}
}
Object.defineProperties(DynamicWallMaterialProperty.prototype, {
isConstant: {
get() {
return false;
}
},
{ deep: true }
);
// 监听选择框的变化
watch(
value,
newValue => {
// 如果选中了"全选"，显示所有实体
if (newValue.includes('1')) {
wallEntities.value.forEach(entity => (entity.show = true));
iconEntities.value.forEach(entity => (entity.show = true));
} else {
// 根据选中的选项显示对应实体
wallEntities.value.forEach(entity => {
entity.show = newValue.includes('6'); // 越界开采对应电子围栏
});
iconEntities.value.forEach(entity => {
const type = entity.properties?.type?.getValue();
switch (type) {
case 1: // 在线监测设备
entity.show = newValue.includes('3');
break;
case 2: // 视频监控
entity.show = newValue.includes('4');
break;
case 3: // 车辆定位
entity.show = newValue.includes('2');
break;
case 4: // 人员定位
case 5: // 人员定位
entity.show = newValue.includes('1');
break;
default:
entity.show = false;
}
});
definitionChanged: {
get() {
return this._definitionChanged;
}
},
{ immediate: true }
);
async function fenceListGet() {
const res = await getFenceListsApi();
formData.value = res.data.data;
for (const item of res.data.data) {
const positions = item.coordinate.map((item: { xcoordinate: any; ycoordinate: any }) => {
return [item.xcoordinate, item.ycoordinate];
});
const heights: any = [];
for (const data of item.coordinate) {
const cartographic = Cesium.Cartographic.fromDegrees(data.xcoordinate, data.ycoordinate);
const height = await getElevationFromRay(cartographic, viewer);
heights.push(height);
}
electronic(positions, heights, item.rangeType);
color: Cesium.createPropertyDescriptor('color')
});
const MaterialType = `wallType${Number.parseInt(Math.random() * 1000)}`;
DynamicWallMaterialProperty.prototype.getType = function (time) {
return MaterialType;
};
DynamicWallMaterialProperty.prototype.getValue = function (time, result) {
if (!Cesium.defined(result)) {
result = {};
}
}
// 电子围栏
function electronic(position: any, heightData: any, rangeType: any) {
function map_common_addDatasouce(datasouceName: string) {
let datasouce = viewer.dataSources._dataSources.find(t => {
return t && t.name == datasouceName;
});
if (!datasouce) {
datasouce = new Cesium.CustomDataSource(datasouceName);
viewer.dataSources.add(datasouce);
}
return datasouce;
result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
result.image = this.trailImage;
if (this.duration) {
result.time = ((new Date().getTime() - this._time) % this.duration) / this.duration;
}
function DynamicWallMaterialProperty(options: any) {
this._definitionChanged = new Cesium.Event();
this._color = undefined;
this._colorSubscription = undefined;
this.color = options.color || Color.BLUE;
this.duration = options.duration || 1000;
this.trailImage = options.trailImage;
this._time = new Date().getTime();
viewer.scene.requestRender();
return result;
};
DynamicWallMaterialProperty.prototype.equals = function (other) {
return (
this === other ||
(other instanceof DynamicWallMaterialProperty && Cesium.Property.equals(this._color, other._color))
);
};
Cesium.Material._materialCache.addMaterial(MaterialType, {
fabric: {
type: MaterialType,
uniforms: {
color: new Cesium.Color(1.0, 0.0, 0.0, 0.1),
image: Cesium.Material.DefaultImageId,
time: -20
},
source: _getDirectionWallShader({
get: true,
count: 3.0,
freely: 'vertical',
direction: '-'
})
},
translucent(material) {
return true;
}
function _getDirectionWallShader(options: any) {
if (options && options.get) {
let materail =
'czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
czm_material material = czm_getDefaultMaterial(materialInput);\n\
vec2 st = materialInput.st;';
if (options.freely == 'vertical') {
// （由下到上）
materail += `vec4 colorImage = texture(image, vec2(fract(st.s), fract(float(${options.count})*st.t${
options.direction
} time)));\n\ `;
} else {
// （逆时针）
materail += `vec4 colorImage = texture(image, vec2(fract(float(${options.count})*st.s ${
options.direction
} time), fract(st.t)));\n\ `;
});
Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty;
function loadWall() {
position.push(position[0]);
heightData.push(heightData[0]);
const data = position.map((item: any) => {
return item;
});
const heightMax = heightData.map((item: any) => {
return item;
});
const coor = Array.prototype.concat.apply([], data);
const minHeightList = heightMax.map((item: any) => {
return item + 30;
});
datasouce.value = map_common_addDatasouce('wall');
if (fence.value) {
if (treeFence.value.length > 0) {
for (const item of treeFence.value) {
datasouce.value.entities.remove(item);
}
// 泛光
materail +=
'vec4 fragColor;\n\
fragColor.rgb = (colorImage.rgb+color.rgb) / 1.0;\n\
fragColor = czm_gammaCorrect(fragColor);\n\
material.diffuse = colorImage.rgb;\n\
material.alpha = colorImage.a;\n\
material.emission = fragColor.rgb;\n\
return material;\n\
}';
return materail;
}
}
Object.defineProperties(DynamicWallMaterialProperty.prototype, {
isConstant: {
get() {
return false;
}
},
definitionChanged: {
get() {
return this._definitionChanged;
}
},
color: Cesium.createPropertyDescriptor('color')
});
const MaterialType = `wallType${Number.parseInt(Math.random() * 1000)}`;
DynamicWallMaterialProperty.prototype.getType = function (time) {
return MaterialType;
};
DynamicWallMaterialProperty.prototype.getValue = function (time, result) {
if (!Cesium.defined(result)) {
result = {};
}
result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
result.image = this.trailImage;
if (this.duration) {
result.time = ((new Date().getTime() - this._time) % this.duration) / this.duration;
}
viewer.scene.requestRender();
return result;
};
DynamicWallMaterialProperty.prototype.equals = function (other) {
return (
this === other ||
(other instanceof DynamicWallMaterialProperty && Cesium.Property.equals(this._color, other._color))
);
};
Cesium.Material._materialCache.addMaterial(MaterialType, {
fabric: {
type: MaterialType,
uniforms: {
color: new Cesium.Color(1.0, 0.0, 0.0, 0.1),
image: Cesium.Material.DefaultImageId,
time: -20
},
source: _getDirectionWallShader({
get: true,
count: 3.0,
freely: 'vertical',
direction: '-'
if (rangeType == 1) {
fenceData.value = {
imagePath: '/src/assets/wallss.png',
imageColor: 'Cesium.Color.ORANGE'
};
} else if (rangeType == 2) {
fenceData.value = {
imagePath: '/src/assets/walls.png',
imageColor: 'Cesium.Color.CYAN'
};
} else {
fenceData.value = {
imagePath: '/src/assets/wallsRed.png',
imageColor: 'Cesium.Color.RED'
};
}
const entity = datasouce.value.entities.add({
wall: {
positions: Cesium.Cartesian3.fromDegreesArray(coor),
maximumHeights: heightMax,
minimumHeights: minHeightList,
material: new Cesium.DynamicWallMaterialProperty({
trailImage: fenceData.value.imagePath,
color: fenceData.value.imageColor,
duration: 1500
})
},
translucent(material) {
return true;
}
});
Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty;
function loadWall() {
position.push(position[0]);
heightData.push(heightData[0]);
const data = position.map((item: any) => {
return item;
});
const heightMax = heightData.map((item: any) => {
return item;
});
const coor = Array.prototype.concat.apply([], data);
const minHeightList = heightMax.map((item: any) => {
return item + 30;
});
datasouce.value = map_common_addDatasouce('wall');
if (fence.value) {
if (treeFence.value.length > 0) {
for (const item of treeFence.value) {
datasouce.value.entities.remove(item);
}
}
}
if (rangeType == 1) {
fenceData.value = {
imagePath: '/src/assets/wallss.png',
imageColor: 'Cesium.Color.ORANGE'
};
} else if (rangeType == 2) {
fenceData.value = {
imagePath: '/src/assets/walls.png',
imageColor: 'Cesium.Color.CYAN'
};
} else {
fenceData.value = {
imagePath: '/src/assets/wallsRed.png',
imageColor: 'Cesium.Color.RED'
};
}
const entity = datasouce.value.entities.add({
wall: {
positions: Cesium.Cartesian3.fromDegreesArray(coor),
maximumHeights: heightMax,
minimumHeights: minHeightList,
material: new Cesium.DynamicWallMaterialProperty({
trailImage: fenceData.value.imagePath,
color: fenceData.value.imageColor,
duration: 1500
})
}
});
wallEntities.value.push(entity);
// 保存围栏数据用于边界检测
window.fenceData = position;
}
loadWall();
wallEntities.value.push(entity);
// 保存围栏数据用于边界检测
window.fenceData = position;
}
// 点击弹框隐藏
function videosShow() {
if (videoShow.value == true) {
videoShow.value = false;
iconShow();
}
loadWall();
}
// 点击弹框隐藏
function videosShow() {
if (videoShow.value == true) {
videoShow.value = false;
iconShow();
}
function equipmentsShow() {
if (equipmentShow.value == true) {
equipmentShow.value = false;
iconShow();
}
}
function equipmentsShow() {
if (equipmentShow.value == true) {
equipmentShow.value = false;
iconShow();
}
function carsShow() {
if (carShow.value == true) {
carShow.value = false;
iconShow();
}
function carsShow() {
if (carShow.value == true) {
carShow.value = false;
iconShow();
}
}
function personsShow() {
if (personShow.value == true) {
personShow.value = false;
iconShow();
}
}
function iconShow() {
for (const item of pins) {
if (item.type == 1) {
item.image = bluePersonIcon;
} else if (item.type == 2) {
item.image = blueCarIcon;
} else if (item.type == 3) {
item.image = blueBianIcon;
} else {
item.image = blueVideoIcon;
}
}
function personsShow() {
if (personShow.value == true) {
iconPoint(viewer, pins);
}
// 设置员工类型
function getPersonTypeName(type: number): string {
switch (type) {
case 1:
return '员工';
case 2:
return '访客';
default:
return '没有该类型';
}
}
async function setTimePerson() {
const res = await getPointAllPersonApi();
for (const item of pins) {
const pin = res.data.data.find((personData: any) => personData.cardId == item.id);
if (pin) {
personShow.value = false;
iconShow();
item.image = bluePersonIcon;
item.position = {
lon: pin.lon,
lat: pin.lat
};
}
}
function iconShow() {
const carRes = await getCarPointAllCarApi();
for (const item of pins) {
const pin = carRes.data.data.find((carData: any) => carData.carNumber == item.id);
if (pin) {
carShow.value = false;
item.image = blueCarIcon;
item.position = {
lon: pin.lon,
lat: pin.lat
};
}
}
iconPoint(viewer, pins);
}
setInterval(setTimePerson, 20 * 1000);
// setInterval(setTimePerson, 2 * 60 * 1000);
onMounted(async () => {
add3dtiles();
pointLine(viewer);
setTimeout(async () => {
fenceListGet();
const res = await getPointAllPersonApi();
const personData = res.data.data;
personData.map(item => {
pins.push({
id: item.cardId,
name: item.realName,
type: 1,
image: bluePersonIcon,
position: {
lon: item.lon,
lat: item.lat
},
data: item,
entity: null
});
});
// 获取并显示车辆数据，使用不同的前缀
const resCar = await getCarPointAllCarApi();
const carData = resCar.data.data;
carData.map(item => {
pins.push({
id: item.carNumber,
name: item.carNumber,
type: 2,
image: blueCarIcon,
position: {
lon: item.lon,
lat: item.lat
},
data: item,
entity: null
});
});
// 获取在线监测
const resPoint = await getMonitorPointApi();
const pointData = resPoint.data.data;
pointData.map(item => {
pins.push({
id: item.id,
type: 3,
name: item.equipname,
image: blueBianIcon,
position: {
lon: item.longitude,
lat: item.latitude
},
data: item,
entity: null,
label: null
});
});
// 获取视频监控信息
const resVideo = await getCemeraPointApi();
const videoData = resVideo.data.data;
videoData.map(item => {
pins.push({
id: item.id,
name: item.cameraName,
type: 4,
image: blueVideoIcon,
position: {
lon: item.lon,
lat: item.lat
},
data: item,
entity: null
});
});
iconPoint(viewer, pins).then(result => {
console.log(result);
});
}, 2000);
// setTimePerson();
setRemUnit();
// 监听窗口大小变化
window.addEventListener('resize', setRemUnit);
// zhaojunbao 结束
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(async function (click: any) {
const pickedObject = viewer.scene.pick(click.position);
for (const item of pins) {
if (item.type == 1) {
item.image = bluePersonIcon;
......@@ -504,1037 +689,886 @@
item.image = blueVideoIcon;
}
}
iconPoint(viewer, pins);
}
// 设置员工类型
function getPersonTypeName(type: number): string {
switch (type) {
case 1:
return '员工';
case 2:
return '访客';
default:
return '没有该类型';
}
}
async function setTimePerson() {
const res = await getPointAllPersonApi();
for (const item of pins) {
const pin = res.data.data.find((personData: any) => personData.cardId == item.id);
if (pin) {
personShow.value = false;
item.image = bluePersonIcon;
item.position = {
lon: pin.lon,
lat: pin.lat
};
}
}
const carRes = await getCarPointAllCarApi();
for (const item of pins) {
const pin = carRes.data.data.find((carData: any) => carData.carNumber == item.id);
if (pin) {
if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
const pin = pins.find(item => item.entity === pickedObject.id);
if (pin.type == 1) {
equipmentShow.value = false;
videoShow.value = false;
carShow.value = false;
item.image = blueCarIcon;
item.position = {
lon: pin.lon,
lat: pin.lat
};
}
}
iconPoint(viewer, pins);
}
setInterval(setTimePerson, 10 * 1000);
onMounted(async () => {
add3dtiles();
setTimeout(async () => {
fenceListGet();
const res = await getPointAllPersonApi();
const personData = res.data.data;
personData.map(item => {
pins.push({
id: item.cardId,
name: item.realName,
type: 1,
image: bluePersonIcon,
position: {
lon: item.lon,
lat: item.lat
},
data: item,
entity: null
});
});
// 获取并显示车辆数据，使用不同的前缀
const resCar = await getCarPointAllCarApi();
const carData = resCar.data.data;
carData.map(item => {
pins.push({
id: item.carNumber,
name: item.carNumber,
type: 2,
image: blueCarIcon,
position: {
lon: item.lon,
lat: item.lat
},
data: item,
entity: null
});
});
// 获取在线监测
const resPoint = await getMonitorPointApi();
const pointData = resPoint.data.data;
pointData.map(item => {
pins.push({
id: item.id,
type: 3,
name: item.equipname,
image: blueBianIcon,
position: {
lon: item.longitude,
lat: item.latitude
},
data: item,
entity: null,
label: null
});
});
// 获取视频监控信息
const resVideo = await getCemeraPointApi();
const videoData = resVideo.data.data;
videoData.map(item => {
pins.push({
id: item.id,
name: item.cameraName,
type: 4,
image: blueVideoIcon,
position: {
lon: item.lon,
lat: item.lat
},
data: item,
entity: null
});
});
iconPoint(viewer, pins).then(result => {
console.log(result);
});
}, 2000);
// setTimePerson();
setRemUnit();
// 监听窗口大小变化
window.addEventListener('resize', setRemUnit);
// zhaojunbao 结束
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(async function (click: any) {
const pickedObject = viewer.scene.pick(click.position);
for (const item of pins) {
if (item.type == 1) {
item.image = bluePersonIcon;
} else if (item.type == 2) {
item.image = blueCarIcon;
} else if (item.type == 3) {
item.image = blueBianIcon;
} else {
item.image = blueVideoIcon;
personShow.value = true;
labelData.value = pin.data;
pin.image = redPersonIcon;
} else if (pin.type == 2) {
// 车
equipmentShow.value = false;
videoShow.value = false;
personShow.value = false;
carShow.value = true;
const res = await getHomeCarApi(pin.id);
console.log(res);
if (res.data.code == 200) {
speed = res.data.data.point ? carSpeed(res.data.data) : 0;
labelData.value = res.data.data;
link = `${labelData.value.ipAddress}?lang=zh&devIdno=${labelData.value.cameraNo}&account=${labelData.value.username}&password=${labelData.value.password}&channel=1`;
}
}
if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
const pin = pins.find(item => item.entity === pickedObject.id);
if (pin.type == 1) {
equipmentShow.value = false;
videoShow.value = false;
carShow.value = false;
personShow.value = true;
labelData.value = pin.data;
pin.image = redPersonIcon;
} else if (pin.type == 2) {
// 车
equipmentShow.value = false;
videoShow.value = false;
personShow.value = false;
carShow.value = true;
const res = await getHomeCarApi(pin.id);
console.log(res);
if (res.data.code == 200) {
speed = res.data.data.point ? carSpeed(res.data.data) : 0;
labelData.value = res.data.data;
link = `${labelData.value.ipAddress}?lang=zh&devIdno=${labelData.value.cameraNo}&account=${labelData.value.username}&password=${labelData.value.password}&channel=1`;
}
pin.image = redCarIcon;
} else if (pin.type == 3) {
// 监测设备
videoShow.value = false;
carShow.value = false;
personShow.value = false;
equipmentShow.value = true;
const res = await getMonitorIdApi(pin.id);
if (res.data.code == 200) {
if (res.data.data.devicetype == 3) {
text = '表面位移';
} else if (res.data.data.devicetype == 6) {
text = '降雨量';
}
labelData.value = res.data.data;
}
pin.image = redBianIcon;
} else {
// 摄像头
equipmentShow.value = false;
videoShow.value = true;
carShow.value = false;
personShow.value = false;
videoShow.value = true;
const res = await getCameraIdApi(pin.id);
if (res.data.code == 200) {
labelData.value = res.data.data;
console.log(labelData.value);
const webRtcServrce = ref();
nextTick(() => {
webRtcServrce.value = new WebRtcStreamer('video', `${location.protocol}//` + `192.168.2.53:8000`);
webRtcServrce.value.connect(res.data.data.videoStream);
});
pin.image = redCarIcon;
} else if (pin.type == 3) {
// 监测设备
videoShow.value = false;
carShow.value = false;
personShow.value = false;
equipmentShow.value = true;
const res = await getMonitorIdApi(pin.id);
if (res.data.code == 200) {
if (res.data.data.devicetype == 3) {
text = '表面位移';
} else if (res.data.data.devicetype == 6) {
text = '降雨量';
}
pin.image = redVideoIcon;
labelData.value = res.data.data;
}
iconPoint(viewer, pins);
pin.image = redBianIcon;
} else {
// 摄像头
equipmentShow.value = false;
videoShow.value = false;
videoShow.value = true;
carShow.value = false;
personShow.value = false;
iconPoint(viewer, pins);
videoShow.value = true;
const res = await getCameraIdApi(pin.id);
if (res.data.code == 200) {
labelData.value = res.data.data;
console.log(labelData.value);
const webRtcServrce = ref();
nextTick(() => {
webRtcServrce.value = new WebRtcStreamer('video', `${location.protocol}//` + `192.168.2.53:8000`);
webRtcServrce.value.connect(res.data.data.videoStream);
});
}
pin.image = redVideoIcon;
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
});
onUnmounted(() => {
// 清理Cesium资源
if (viewer) {
viewer.destroy();
viewer = null;
iconPoint(viewer, pins);
} else {
equipmentShow.value = false;
videoShow.value = false;
carShow.value = false;
personShow.value = false;
iconPoint(viewer, pins);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
});
onUnmounted(() => {
// 清理Cesium资源
if (viewer) {
viewer.destroy();
viewer = null;
}
// 移除窗口大小变化监听
window.removeEventListener('resize', setRemUnit);
// 移除html元素style属性中的font-size
document.documentElement.style.fontSize = '';
});
</script>
<template>
<div class="wrapper">
<div class="top-toolbar">
<div class="baojing">
声光报警
<NSwitch v-model:value="active" />
</div>
<!-- <i class="split-line"></i> -->
<div class="split-line"></div>
<div class="houtaiguanli" @click="navTo">后台管理</div>
// 移除窗口大小变化监听
window.removeEventListener('resize', setRemUnit);
// 移除html元素style属性中的font-size
document.documentElement.style.fontSize = '';
});
</script>
<template>
<div class="wrapper">
<div class="top-toolbar">
<div class="baojing">
声光报警
<NSwitch v-model:value="active" />
</div>
<!-- cesium 容器 -->
<div class="cesium-container">
<div id="cesiumContainer">
<!-- 选择框 -->
<MultiSelect v-model="value" :options="options" style="position: fixed; z-index: 999; top: 100px; left: 63%" />
<!-- 人员信息弹框 -->
<div v-if="personShow == true" class="personMessage">
<div style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px">
<div style="width: 90%; margin: 0; font-size: 16px">
<span>人员信息</span>
<div class="person1"></div>
</div>
<button
id="close-info"
style="background: none; border: none; color: white; cursor: pointer; font-size: 18px; margin-left: 10px"
@click="personsShow()"
>
&times;
</button>
</div>
<div style="line-height: 1.8">
<p class="title1">
<strong class="title2">姓名:</strong>
{{ labelData.realName }}
</p>
<p class="title1">
<strong class="title2">定位卡号:</strong>
{{ labelData.cardId }}
</p>
<p class="title1">
<strong class="title2">人员类型:</strong>
{{ getPersonTypeName(labelData.personType) }}
</p>
<p class="title1">
<strong class="title2">电话:</strong>
{{ labelData.phone }}
</p>
<p class="title1">
<strong class="title2">部门:</strong>
{{ labelData.deptName }}
</p>
<!-- <i class="split-line"></i> -->
<div class="split-line"></div>
<div class="houtaiguanli" @click="navTo">后台管理</div>
</div>
<!-- cesium 容器 -->
<div class="cesium-container">
<div id="cesiumContainer">
<!-- 选择框 -->
<MultiSelect v-model="value" :options="options" style="position: fixed; z-index: 999; top: 100px; left: 63%" />
<!-- 人员信息弹框 -->
<div v-if="personShow == true" class="personMessage">
<div style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px">
<div style="width: 90%; margin: 0; font-size: 16px">
<span>人员信息</span>
<div class="person1"></div>
</div>
<button
id="close-info"
style="background: none; border: none; color: white; cursor: pointer; font-size: 18px; margin-left: 10px"
@click="personsShow()"
>
&times;
</button>
</div>
<!-- 车辆信息 -->
<div v-if="carShow == true" class="carMessage">
<div style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px">
<div style="width: 90%; margin: 0; font-size: 16px">
<span>车辆信息</span>
<div class="person1"></div>
</div>
<button
id="close-info"
style="background: none; border: none; color: white; cursor: pointer; font-size: 18px; margin-left: 10px"
@click="carsShow()"
>
&times;
</button>
<div style="line-height: 1.8">
<p class="title1">
<strong class="title2">姓名:</strong>
{{ labelData.realName }}
</p>
<p class="title1">
<strong class="title2">定位卡号:</strong>
{{ labelData.cardId }}
</p>
<p class="title1">
<strong class="title2">人员类型:</strong>
{{ getPersonTypeName(labelData.personType) }}
</p>
<p class="title1">
<strong class="title2">电话:</strong>
{{ labelData.phone }}
</p>
<p class="title1">
<strong class="title2">部门:</strong>
{{ labelData.deptName }}
</p>
</div>
</div>
<!-- 车辆信息 -->
<div v-if="carShow == true" class="carMessage">
<div style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px">
<div style="width: 90%; margin: 0; font-size: 16px">
<span>车辆信息</span>
<div class="person1"></div>
</div>
<div style="line-height: 1.8; display: flex; justify-content: space-between">
<div class="car-left">
<div class="left-top">
<p class="title1">
<strong class="title2">车牌号:</strong>
{{ labelData.carNumber || '暂无数据' }}
</p>
<p class="title1">
<strong class="title2">车队名称:</strong>
{{ labelData.teamName || '暂无数据' }}
</p>
<p class="title1">
<strong class="title2">当前车速:</strong>
{{ speed }} km/h
</p>
<p class="title1">
<strong class="title2">车辆类型:</strong>
{{ labelData.carType || '暂无数据' }}
</p>
</div>
<div class="left-center"></div>
<div class="left-bottom">
<p class="title1">
<strong class="title2">司机姓名:</strong>
{{ labelData.driverName || '暂无数据' }}
</p>
<p class="title1">
<strong class="title2">工作开始时间:</strong>
{{ labelData.workStartTime || '暂无数据' }}
</p>
<p class="title1">
<strong class="title2">工作时长:</strong>
{{ labelData.workTime || '暂无数据' }}
</p>
<p class="title1">
<strong class="title2">终端设备编号:</strong>
{{ labelData.terminalNumber || '暂无数据' }}
</p>
</div>
<button
id="close-info"
style="background: none; border: none; color: white; cursor: pointer; font-size: 18px; margin-left: 10px"
@click="carsShow()"
>
&times;
</button>
</div>
<div style="line-height: 1.8; display: flex; justify-content: space-between">
<div class="car-left">
<div class="left-top">
<p class="title1">
<strong class="title2">车牌号:</strong>
{{ labelData.carNumber || '暂无数据' }}
</p>
<p class="title1">
<strong class="title2">车队名称:</strong>
{{ labelData.teamName || '暂无数据' }}
</p>
<p class="title1">
<strong class="title2">当前车速:</strong>
{{ speed }} km/h
</p>
<p class="title1">
<strong class="title2">车辆类型:</strong>
{{ labelData.carType || '暂无数据' }}
</p>
</div>
<div class="car-right">
<iframe
allowfullscreen="true"
allowtransparency="true"
allow="autoplay"
scrolling="no"
:src="link"
width="100%"
height="100%"
frameborder="0"
style="padding-right: 20px"
></iframe>
<!-- '${res.ipAddress}?lang=zh&devIdno=${res.cameraNo}&account=${res.username}&password=${res.password}&channel=1' -->
<div class="left-center"></div>
<div class="left-bottom">
<p class="title1">
<strong class="title2">司机姓名:</strong>
{{ labelData.driverName || '暂无数据' }}
</p>
<p class="title1">
<strong class="title2">工作开始时间:</strong>
{{ labelData.workStartTime || '暂无数据' }}
</p>
<p class="title1">
<strong class="title2">工作时长:</strong>
{{ labelData.workTime || '暂无数据' }}
</p>
<p class="title1">
<strong class="title2">终端设备编号:</strong>
{{ labelData.terminalNumber || '暂无数据' }}
</p>
</div>
</div>
<div class="car-right">
<iframe
allowfullscreen="true"
allowtransparency="true"
allow="autoplay"
:src="link"
width="100%"
height="100%"
frameborder="0"
style="padding-right: 20px"
></iframe>
<!-- '${res.ipAddress}?lang=zh&devIdno=${res.cameraNo}&account=${res.username}&password=${res.password}&channel=1' -->
</div>
</div>
<!-- 在线检测设备信息 -->
<div v-if="equipmentShow == true" class="equipmentMessage">
<div style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px">
<div style="width: 90%; margin: 0; font-size: 16px">
<span>在线检测设备信息</span>
<div class="person1"></div>
</div>
<button
id="close-info"
style="background: none; border: none; color: white; cursor: pointer; font-size: 18px; margin-left: 10px"
@click="equipmentsShow()"
>
&times;
</button>
</div>
<!-- 在线检测设备信息 -->
<div v-if="equipmentShow == true" class="equipmentMessage">
<div style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px">
<div style="width: 90%; margin: 0; font-size: 16px">
<span>在线检测设备信息</span>
<div class="person1"></div>
</div>
<div style="line-height: 1.8">
<p class="title1">
<strong class="title2">设备名称:</strong>
{{ labelData.equipname }}
</p>
<p class="title1">
<strong class="title2">设备状态:</strong>
{{ labelData.dataStatus === 0 ? '在线' : '离线' }}
</p>
<p class="title1">
<strong class="title2">设备类型:</strong>
{{ text }}
</p>
<p class="title1">
<strong class="title2">监测值:</strong>
{{ labelData.value }}
</p>
<p class="title1">
<strong class="title2">监测时间:</strong>
{{ labelData.time }}
</p>
<p class="title1">
<strong class="title2">数据状态:</strong>
{{ labelData.onlineStatus === 0 ? '正常' : '蓝色报警' }}
</p>
<button
id="close-info"
style="background: none; border: none; color: white; cursor: pointer; font-size: 18px; margin-left: 10px"
@click="equipmentsShow()"
>
&times;
</button>
</div>
<div style="line-height: 1.8">
<p class="title1">
<strong class="title2">设备名称:</strong>
{{ labelData.equipname }}
</p>
<p class="title1">
<strong class="title2">设备状态:</strong>
{{ labelData.dataStatus === 0 ? '在线' : '离线' }}
</p>
<p class="title1">
<strong class="title2">设备类型:</strong>
{{ text }}
</p>
<p class="title1">
<strong class="title2">监测值:</strong>
{{ labelData.value }}
</p>
<p class="title1">
<strong class="title2">监测时间:</strong>
{{ labelData.time }}
</p>
<p class="title1">
<strong class="title2">数据状态:</strong>
{{ labelData.onlineStatus === 0 ? '正常' : '蓝色报警' }}
</p>
</div>
</div>
<!-- 视频监控信息 -->
<div v-if="videoShow == true" class="videoMessage">
<div style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px">
<div style="width: 90%; margin: 0; font-size: 16px">
<span>视频监控信息</span>
<div class="person1"></div>
</div>
<button
id="close-info"
style="background: none; border: none; color: white; cursor: pointer; font-size: 18px; margin-left: 10px"
@click="videosShow()"
>
&times;
</button>
</div>
<!-- 视频监控信息 -->
<div v-if="videoShow == true" class="videoMessage">
<div style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px">
<div style="width: 90%; margin: 0; font-size: 16px">
<span>视频监控信息</span>
<div class="person1"></div>
<div style="line-height: 1.8; display: flex; flex-direction: column; flex-wrap: nowrap">
<div class="video-top">
<div class="title3">
<strong class="title2">● 摄像头名称:</strong>
{{ labelData.areaName }}
</div>
<button
id="close-info"
style="background: none; border: none; color: white; cursor: pointer; font-size: 18px; margin-left: 10px"
@click="videosShow()"
>
&times;
</button>
</div>
<div style="line-height: 1.8; display: flex; flex-direction: column; flex-wrap: nowrap">
<div class="video-top">
<div class="title3">
<strong class="title2">● 摄像头名称:</strong>
{{ labelData.areaName }}
</div>
<div class="title3">
<strong class="title4">● 区域名称:</strong>
{{ labelData.cameraName }}
</div>
<div class="title3">
<strong class="title4">● 设备状态:</strong>
{{ labelData.status === 0 ? '在线' : '离线' }}
</div>
<div class="title3">
<strong class="title4">● 区域名称:</strong>
{{ labelData.cameraName }}
</div>
<div class="video-bottom">
<video
id="video"
controls
autoplay
muted
playsinline
width="100%"
height="100%"
style="object-fit: fill; z-index: 1"
></video>
<div class="title3">
<strong class="title4">● 设备状态:</strong>
{{ labelData.status === 0 ? '在线' : '离线' }}
</div>
</div>
<div class="video-bottom">
<video
id="video"
controls
autoplay
muted
playsinline
width="100%"
height="100%"
style="object-fit: fill; z-index: 1"
></video>
</div>
</div>
<!-- </div> -->
</div>
<!-- </div> -->
</div>
</div>
<div class="top">
<div class="first-image">
<img src="@/assets/jinrun/top.png" alt="" srcset="" />
<div class="second-icon">
<img src="@/assets/jinrun/title.png" alt="" />
</div>
</div>
<div class="top">
<div class="first-image">
<img src="@/assets/jinrun/top.png" alt="" srcset="" />
<div class="second-icon">
<img src="@/assets/jinrun/title.png" alt="" />
</div>
</div>
<div class="bottom"></div>
<div v-show="isLeftModulesVisible" class="left"></div>
<div v-show="isRightModulesVisible" class="right"></div>
<!-- 非cesium相关 开始 -->
<!-- 左侧收起按钮 -->
<div class="toggle-btn left-toggle" :class="{ collapsed: !isLeftModulesVisible }" @click="toggleBothModules">
<div class="btn-arrow1">
<div>
<img :src="isLeftModulesVisible ? arrowLeftImg : arrowRightImg" alt="" srcset="" />
<br />
<div class="arrow-font">
{{ isLeftModulesVisible ? '收起' : '展开' }}
</div>
</div>
<div class="bottom"></div>
<div v-show="isLeftModulesVisible" class="left"></div>
<div v-show="isRightModulesVisible" class="right"></div>
<!-- 非cesium相关 开始 -->
<!-- 左侧收起按钮 -->
<div class="toggle-btn left-toggle" :class="{ collapsed: !isLeftModulesVisible }" @click="toggleBothModules">
<div class="btn-arrow1">
<div>
<img :src="isLeftModulesVisible ? arrowLeftImg : arrowRightImg" alt="" srcset="" />
<br />
<div class="arrow-font">
{{ isLeftModulesVisible ? '收起' : '展开' }}
</div>
</div>
</div>
<!-- 右侧收起按钮 -->
<div class="toggle-btn right-toggle" :class="{ collapsed: !isRightModulesVisible }" @click="toggleBothModules">
<!-- <div class="btn-arrow1"><img src="@/assets/jinrun/arrow-right.png" alt="" srcset=""><br>收<br>起</div> -->
<div class="btn-arrow1">
<div>
<img :src="isLeftModulesVisible ? arrowRightImg : arrowLeftImg" alt="" srcset="" />
<br />
<div class="arrow-font">
{{ isLeftModulesVisible ? '收起' : '展开' }}
</div>
</div>
<!-- 右侧收起按钮 -->
<div class="toggle-btn right-toggle" :class="{ collapsed: !isRightModulesVisible }" @click="toggleBothModules">
<!-- <div class="btn-arrow1"><img src="@/assets/jinrun/arrow-right.png" alt="" srcset=""><br>收<br>起</div> -->
<div class="btn-arrow1">
<div>
<img :src="isLeftModulesVisible ? arrowRightImg : arrowLeftImg" alt="" srcset="" />
<br />
<div class="arrow-font">
{{ isLeftModulesVisible ? '收起' : '展开' }}
</div>
</div>
</div>
<!-- 左侧模块容器 -->
<Transition name="slide-left">
<div v-show="isLeftModulesVisible" class="left-modules">
<LeftDeviceStatus />
<LeftRainfallTrend />
<LeftOnlineMonitor />
</div>
</Transition>
<!-- 右侧模块容器 -->
<Transition name="slide-right">
<div v-show="isRightModulesVisible" class="right-modules">
<RightAiWarning />
<RightEnvMonitor />
<RightTodayAlarm />
</div>
</Transition>
<!-- 非cesium相关 结束 -->
</template>
<style scoped>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.cesium-container {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
#cesiumContainer {
width: 100%;
</div>
<!-- 左侧模块容器 -->
<Transition name="slide-left">
<div v-show="isLeftModulesVisible" class="left-modules">
<LeftDeviceStatus />
<LeftRainfallTrend />
<LeftOnlineMonitor />
</div>
</Transition>
<!-- 右侧模块容器 -->
<Transition name="slide-right">
<div v-show="isRightModulesVisible" class="right-modules">
<RightAiWarning />
<RightEnvMonitor />
<RightTodayAlarm />
</div>
</Transition>
<!-- 非cesium相关 结束 -->
</template>
<style scoped>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.cesium-container {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
#cesiumContainer {
width: 100%;
height: 100%;
}
.personMessage {
width: 450px;
height: 250px;
position: absolute;
padding: 15px 20px;
color: white;
font-family: sans-serif;
font-size: 14px;
pointer-events: auto;
z-index: 9999;
top: 100px;
left: 20%;
background-image: url('@/assets/person2.png');
background-size: 100% 100%;
transform: translate(50%, 50%);
}
.carMessage {
width: 600px;
height: 380px;
position: absolute;
padding: 15px 20px;
color: white;
font-family: sans-serif;
font-size: 14px;
pointer-events: auto;
z-index: 9999;
top: 100px;
left: 20%;
background-image: url('@/assets/person2.png');
background-size: 100% 100%;
transform: translate(50%, 50%);
}
.equipmentMessage {
width: 450px;
height: 290px;
position: absolute;
padding: 15px 20px;
color: white;
font-family: sans-serif;
font-size: 14px;
pointer-events: auto;
z-index: 9999;
top: 100px;
left: 20%;
background-image: url('@/assets/person2.png');
background-size: 100% 100%;
transform: translate(50%, 50%);
}
.videoMessage {
width: 680px;
height: 380px;
position: absolute;
padding: 15px 20px;
color: white;
font-family: sans-serif;
font-size: 14px;
pointer-events: auto;
z-index: 9999;
top: 100px;
left: 20%;
background-image: url('@/assets/person2.png');
background-size: 100% 100%;
transform: translate(50%, 50%);
}
.title1 {
margin-top: 5px;
}
.title2 {
color: #29d7fb;
margin-right: 10px;
}
.title3 {
display: flex;
align-items: center;
margin: 0px 0px 8px 0px;
}
.title4 {
color: #29d7fb;
margin-right: 10px;
margin-left: 20px;
}
span {
position: absolute;
z-index: 4;
left: 30px;
top: 10px;
}
.person1 {
width: 85%;
height: 40px;
background-image: url('@/assets/person1.png');
background-size: 100% 100%;
position: absolute;
left: 6px;
top: 20px;
}
.left-center {
width: 100%;
height: 10px;
border-bottom: 1px solid #147f9c;
}
.right {
width: 60%;
height: 50%;
/* margin-right: 20px; */
/* margin-top: 20px; */
}
#video {
height: 250px;
}
.video-top {
width: 100%;
height: 50%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.video-bottom {
margin-right: 20px;
}
.select {
width: 100%;
border: none;
background-image: url('@/assets/multiple-pop.png');
}
.n-select {
background-image: url('@/assets/multiple-pop.png');
background-position: center;
}
.n-select .n-select-trigger {
background-color: transparent;
}
.n-select .n-select-menu {
background-color: transparent;
}
:deep(.n-base-selection .n-base-selection-tags) {
background-color: transparent !important;
}
:deep(.n-base-selection .n-base-selection-label .n-base-selection-input .n-base-selection-input__content) {
color: white !important;
}
:deep(.n-base-selection .n-base-selection__border, .n-base-selection .n-base-selection__state-border) {
border: 1px solid #4ab9fd;
}
:deep(.n-tag) {
color: #fff;
background: #10273e00;
/* display:none; */
}
:deep(.n-tag .n-tag__border) {
border: none;
}
:deep(.n-base-selection-tag-wrapper) {
background: #10273e00;
}
/* zhaojunbao */
.top-toolbar {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 240px;
height: 0.4rem;
color: #11e0ff;
z-index: 9;
display: flex;
align-items: center;
justify-content: space-between;
.split-line {
width: 0.03rem;
height: 100%;
background: #11e0ff;
}
.personMessage {
width: 450px;
height: 250px;
position: absolute;
padding: 15px 20px;
color: white;
font-family: sans-serif;
font-size: 14px;
pointer-events: auto;
z-index: 9999;
top: 100px;
left: 20%;
background-image: url('@/assets/person2.png');
background-size: 100% 100%;
transform: translate(50%, 50%);
}
.carMessage {
width: 600px;
height: 380px;
position: absolute;
padding: 15px 20px;
color: white;
font-family: sans-serif;
font-size: 14px;
pointer-events: auto;
z-index: 9999;
top: 100px;
left: 20%;
background-image: url('@/assets/person2.png');
background-size: 100% 100%;
transform: translate(50%, 50%);
}
.equipmentMessage {
width: 450px;
height: 290px;
position: absolute;
padding: 15px 20px;
color: white;
font-family: sans-serif;
font-size: 14px;
pointer-events: auto;
z-index: 9999;
top: 100px;
left: 20%;
background-image: url('@/assets/person2.png');
background-size: 100% 100%;
transform: translate(50%, 50%);
}
.videoMessage {
width: 680px;
height: 380px;
position: absolute;
padding: 15px 20px;
color: white;
font-family: sans-serif;
font-size: 14px;
pointer-events: auto;
z-index: 9999;
top: 100px;
left: 20%;
background-image: url('@/assets/person2.png');
background-size: 100% 100%;
transform: translate(50%, 50%);
}
.title1 {
margin-top: 5px;
}
.title2 {
color: #29d7fb;
margin-right: 10px;
}
.title3 {
display: flex;
align-items: center;
margin: 0px 0px 8px 0px;
}
.title4 {
color: #29d7fb;
margin-right: 10px;
margin-left: 20px;
}
span {
position: absolute;
z-index: 4;
left: 30px;
top: 10px;
}
.person1 {
width: 85%;
height: 40px;
background-image: url('@/assets/person1.png');
background-size: 100% 100%;
position: absolute;
left: 6px;
top: 20px;
}
.left-center {
width: 100%;
height: 10px;
border-bottom: 1px solid #147f9c;
}
.right {
width: 60%;
height: 50%;
/* margin-right: 20px; */
/* margin-top: 20px; */
}
#video {
height: 250px;
}
.video-top {
width: 100%;
height: 50%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.video-bottom {
margin-right: 20px;
}
.select {
width: 100%;
border: none;
background-image: url('@/assets/multiple-pop.png');
}
.n-select {
background-image: url('@/assets/multiple-pop.png');
background-position: center;
}
.n-select .n-select-trigger {
background-color: transparent;
}
.n-select .n-select-menu {
background-color: transparent;
}
:deep(.n-base-selection .n-base-selection-tags) {
background-color: transparent !important;
}
:deep(.n-base-selection .n-base-selection-label .n-base-selection-input .n-base-selection-input__content) {
color: white !important;
}
:deep(.n-base-selection .n-base-selection__border, .n-base-selection .n-base-selection__state-border) {
border: 1px solid #4ab9fd;
}
:deep(.n-tag) {
color: #fff;
background: #10273e00;
/* display:none; */
}
:deep(.n-tag .n-tag__border) {
border: none;
}
:deep(.n-base-selection-tag-wrapper) {
background: #10273e00;
}
/* zhaojunbao */
.top-toolbar {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 240px;
height: 0.4rem;
color: #11e0ff;
z-index: 99999;
display: flex;
align-items: center;
justify-content: space-between;
.split-line {
width: 0.03rem;
height: 100%;
background: #11e0ff;
}
.baojing {
position: relative;
padding-left: 25px;
display: block;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-image: url('@/assets/jinrun/baojing.png');
background-size: contain;
background-repeat: no-repeat;
}
}
.houtaiguanli {
position: relative;
padding-left: 25px;
display: block;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-image: url('@/assets/jinrun/houtai.png');
background-size: contain;
background-repeat: no-repeat;
}
.baojing {
position: relative;
padding-left: 25px;
display: block;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-image: url('@/assets/jinrun/baojing.png');
background-size: contain;
background-repeat: no-repeat;
}
}
.top,
.bottom,
.left,
.right {
position: absolute;
background-repeat: no-repeat;
.houtaiguanli {
position: relative;
padding-left: 25px;
display: block;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-image: url('@/assets/jinrun/houtai.png');
background-size: contain;
background-repeat: no-repeat;
}
}
.top {
top: 0;
}
.top,
.bottom,
.left,
.right {
position: absolute;
background-repeat: no-repeat;
}
.top {
top: 0;
width: 100%;
height: 1.25rem;
position: absolute;
.first-image {
width: 100%;
height: 1.25rem;
position: absolute;
.first-image {
height: 100%;
position: relative;
& > img {
width: 100%;
height: 100%;
position: relative;
& > img {
width: 100%;
}
.second-icon {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
width: 5.04rem;
/* 可根据实际需要调整大小 */
height: 0.54rem;
/* 可根据实际需要调整大小 */
}
}
.second-icon {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
width: 5.04rem;
/* 可根据实际需要调整大小 */
height: 0.54rem;
/* 可根据实际需要调整大小 */
}
}
.bottom {
bottom: 0;
left: 0;
width: 100%;
height: 0.4rem;
background-image: url('@/assets/jinrun/bottom.png');
background-size: cover;
}
.bottom {
bottom: 0;
left: 0;
width: 100%;
height: 0.4rem;
background-image: url('@/assets/jinrun/bottom.png');
background-size: cover;
}
.left {
top: 0rem;
left: 0;
width: 5.76rem;
height: calc(100vh);
background-size: contain;
background-position-x: left;
background-image: url('@/assets/jinrun/bg-left.png');
}
.right {
top: 0rem;
right: 0;
width: 5.76rem;
height: calc(100vh);
background-image: url('@/assets/jinrun/bg-right.png');
background-size: contain;
background-position-x: right;
}
.toggle-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0.71rem;
height: 1.87rem;
background-image: url('@/assets/jinrun/toggle-left.png');
background-size: cover;
background-repeat: no-repeat;
border-radius: 0 10px 10px 0;
cursor: pointer;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
&.left-toggle {
left: 5rem;
/* 与左侧模块宽度一致 */
background-image: url('@/assets/jinrun/toggle-left.png');
}
.left {
top: 0rem;
left: 0;
width: 5.76rem;
height: calc(100vh);
background-size: contain;
background-position-x: left;
background-image: url('@/assets/jinrun/bg-left.png');
&.left-toggle:hover {
background-image: url('@/assets/jinrun/toggle-left_click.png');
}
.right {
top: 0rem;
right: 0;
width: 5.76rem;
height: calc(100vh);
background-image: url('@/assets/jinrun/bg-right.png');
background-size: contain;
background-position-x: right;
&.right-toggle {
right: 5rem;
/* 与左侧模块宽度一致 */
background-image: url('@/assets/jinrun/toggle-right.png');
}
.toggle-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0.71rem;
height: 1.87rem;
background-image: url('@/assets/jinrun/toggle-left.png');
background-size: cover;
background-repeat: no-repeat;
border-radius: 0 10px 10px 0;
cursor: pointer;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
&.right-toggle:hover {
background-image: url('@/assets/jinrun/toggle-right_click.png');
}
&.collapsed {
&.left-toggle {
left: 5rem;
/* 与左侧模块宽度一致 */
background-image: url('@/assets/jinrun/toggle-left.png');
}
&.left-toggle:hover {
background-image: url('@/assets/jinrun/toggle-left_click.png');
left: 0.55rem;
border-radius: 0 10px 10px 0;
}
&.right-toggle {
right: 5rem;
/* 与左侧模块宽度一致 */
background-image: url('@/assets/jinrun/toggle-right.png');
}
&.right-toggle:hover {
background-image: url('@/assets/jinrun/toggle-right_click.png');
right: 0.55rem;
border-radius: 10px 0 0 10px;
}
&.collapsed {
&.left-toggle {
left: 0.55rem;
border-radius: 0 10px 10px 0;
}
&.right-toggle {
right: 0.55rem;
border-radius: 10px 0 0 10px;
}
}
.btn-arrow1 {
img {
width: 0.18rem;
}
}
.btn-arrow1 {
img {
width: 0.18rem;
}
.btn-arrow {
width: 10px;
}
.btn-arrow {
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transition: transform 0.3s ease;
&::before {
content: '';
position: absolute;
width: 2px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transition: transform 0.3s ease;
&::before {
content: '';
position: absolute;
width: 2px;
height: 10px;
background: #fff;
top: -4px;
right: 4px;
}
background: #fff;
top: -4px;
right: 4px;
}
}
&.left-toggle .btn-arrow {
transform: rotate(135deg);
}
&.right-toggle .btn-arrow {
transform: rotate(-45deg);
}
&.collapsed {
&.left-toggle .btn-arrow {
transform: rotate(135deg);
}
&.right-toggle .btn-arrow {
transform: rotate(-45deg);
}
&.collapsed {
&.left-toggle .btn-arrow {
transform: rotate(-45deg);
}
&.right-toggle .btn-arrow {
transform: rotate(135deg);
}
}
&:hover {
&.right-toggle .btn-arrow {
transform: rotate(135deg);
}
}
.slide-left-enter-active,
.slide-left-leave-active {
transition:
transform 0.5s ease,
opacity 0.5s ease;
}
.slide-left-enter-from {
transform: translateX(-100%);
opacity: 0;
}
.slide-left-leave-to {
transform: translateX(-100%);
opacity: 0;
}
.slide-right-enter-active,
.slide-right-leave-active {
transition:
transform 0.5s ease,
opacity 0.5s ease;
}
.slide-right-enter-from {
transform: translateX(100%);
opacity: 0;
}
.slide-right-leave-to {
transform: translateX(100%);
opacity: 0;
}
.left-modules:not(.v-enter-active):not(.v-leave-active).left-toggle:not(.collapsed) {
left: 0;
border-radius: 0 10px 10px 0;
}
.right-modules:not(.v-enter-active):not(.v-leave-active).right-toggle:not(.collapsed) {
right: 0;
border-radius: 10px 0 0 10px;
background: pink;
}
.left-modules,
.right-modules {
width: 4.6rem;
padding-top: 0.95rem;
position: absolute;
}
.left-modules {
left: 0;
margin-left: 0.4rem;
}
.right-modules {
right: 0;
margin-right: 0.4rem;
}
.arrow-font {
width: 20px;
color: #fff;
font-size: 0.18rem;
display: flex;
flex-direction: column;
}
.video-container {
width: 100%;
height: 250px;
border: 1px solid #ccc;
background: #f5f5f5;
position: relative;
}
#divPlugin {
width: 100%;
height: 100%;
}
.status-info {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
&:hover {
}
</style>
\ No newline at end of file
}
.slide-left-enter-active,
.slide-left-leave-active {
transition:
transform 0.5s ease,
opacity 0.5s ease;
}
.slide-left-enter-from {
transform: translateX(-100%);
opacity: 0;
}
.slide-left-leave-to {
transform: translateX(-100%);
opacity: 0;
}
.slide-right-enter-active,
.slide-right-leave-active {
transition:
transform 0.5s ease,
opacity 0.5s ease;
}
.slide-right-enter-from {
transform: translateX(100%);
opacity: 0;
}
.slide-right-leave-to {
transform: translateX(100%);
opacity: 0;
}
.left-modules:not(.v-enter-active):not(.v-leave-active).left-toggle:not(.collapsed) {
left: 0;
border-radius: 0 10px 10px 0;
}
.right-modules:not(.v-enter-active):not(.v-leave-active).right-toggle:not(.collapsed) {
right: 0;
border-radius: 10px 0 0 10px;
background: pink;
}
.left-modules,
.right-modules {
width: 4.6rem;
padding-top: 0.95rem;
position: absolute;
}
.left-modules {
left: 0;
margin-left: 0.4rem;
}
.right-modules {
right: 0;
margin-right: 0.4rem;
}
.arrow-font {
width: 20px;
color: #fff;
font-size: 0.18rem;
display: flex;
flex-direction: column;
}
.video-container {
width: 100%;
height: 250px;
border: 1px solid #ccc;
background: #f5f5f5;
position: relative;
}
#divPlugin {
width: 100%;
height: 100%;
}
.status-info {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
}
</style>
src/views/_builtin/cesiumDeom/index.vue
View file @ 83672c70
......@@ -3,6 +3,7 @@ import { nextTick, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue
import '../../../../Cesium/Widgets/widgets.css';
import { useMessage } from 'naive-ui';
import {
api_getRoleId,
getCameraIdApi,
getCarPointAllCarApi,
getCemeraPointApi,
......@@ -13,7 +14,7 @@ import {
getPointAllPersonApi,
getPointListApi
} from '@/api';
import { create3D } from '@/api/utils/cesium';
import { create3D, pointLine } from '@/api/utils/cesium';
import { getElevationFromRay, getElevationFromRays } from '@/api/utils/cesiumUtil';
import { cesiumToLongitudeAndLatitude } from '@/api/utils/coordinateUtil';
import { getModel } from '@/api/utils/cesiumModel';
......@@ -32,6 +33,10 @@ import blueVideoIcon from '@/assets/icon16.png';
import blueBianIcon from '@/assets/icon17.png';
import redPersonIcon from '../../../assets/redperson.png';
import MultiSelect from './appselect.vue';
import { useRouteStore } from '@/store/modules/route';
import { router } from '@/router';
import { localStg } from '@/utils/storage';
import { getAlarmStatusApi, setAlarmStatusApi } from '@/api/index-dp';
let viewer: any = null;
const message = useMessage();
......@@ -39,17 +44,10 @@ let personEntity: any;
const pins: any = [];
const full = ref(false);
let entityId: any;
const routeStore = useRouteStore();
let link: any;
let speed = 0;
let text = '';
const personList = ref([]);
const modelData = ref([
[122.04736846370741, 37.48958083145254],
[122.04760069379522, 37.489226301608184],
[122.04823299200363, 37.489451482540346],
[122.04802271634016, 37.48983410372907],
[122.04748237248322, 37.49016152294277]
]);
const options = [
{
......@@ -78,7 +76,6 @@ const options = [
}
];
const value = ref(options.map(opt => opt.value));
const data = ref([]);
const datasouce = ref();
const fence = ref<any>();
......@@ -99,6 +96,50 @@ const labelData = ref<any>();
const formData = ref([]);
// zhaojunbao 开始
const activeAlarm = ref(false);
const alarmStatus = ref(0); // 新增：控制声光报警开关状态 0 关 1 开
const isRequesting = ref(false); // 新增：防止重复点击
// 新增：获取声光报警状态
const getAlarmStatus = async () => {
try {
const res = await getAlarmStatusApi();
// console.log('获取声光报警状态成功:', res);
if (res.data.code === 200) {
alarmStatus.value = res.data.data;
}
} catch (error) {
console.error('获取声光报警状态失败:', error);
}
};
// 新增：切换声光报警状态
const toggleAlarmStatus = async () => {
// 防止重复点击
if (isRequesting.value) {
return;
}
isRequesting.value = true;
try {
let newStatus = alarmStatus.value === 0 ? 1 : 0;
const res = await setAlarmStatusApi(newStatus);
if (res.data.code === 200) {
alarmStatus.value = newStatus;
} else {
// console.error('设置声光报警状态失败:', res.data.message);
message.error(res.data.data);
}
} catch (error) {
console.error('设置声光报警状态异常:', error);
} finally {
// 请求完成后重置标志
isRequesting.value = false;
}
};
/** 新增：修改报警状态结束 */
// REM自适应配置
const active = ref(false);
const REM_CONFIG = {
......@@ -108,8 +149,25 @@ const REM_CONFIG = {
// 基准值：1rem = 100px
baseSize: 100
};
// 跳转首页
const navTo = () => {
// 动态路由
const navTo = async () => {
let result = routeStore.menus;
let getStorage = localStorage.getItem('loginId');
if(!getStorage) {
window.location.href = '/login';
}
let res = await api_getRoleId(getStorage);
let menus = res.data.data.permissionIds;
const routeList: any = []
for (let item of result) {
let res = menus.find(data => data.menuPath == item.key);
if (res) {
routeList.push(item);
}
}
localStg.set('routerList', routeList)
window.location.href = '/home';
};
......@@ -559,46 +617,79 @@ async function setTimePerson() {
}
iconPoint(viewer, pins);
}
setInterval(setTimePerson, 2 * 60 * 1000);
setInterval(setTimePerson, 20 * 1000);
// setInterval(setTimePerson, 2 * 60 * 1000);
onMounted(async () => {
await getAlarmStatus(); // 获取报警状态
add3dtiles();
pointLine(viewer);
setTimeout(async () => {
fenceListGet();
const res = await getPointAllPersonApi();
const personData = res.data.data;
console.log('--1--', personData);
personData.map(item => {
pins.push({
id: item.cardId,
name: item.realName,
type: 1,
image: bluePersonIcon,
position: {
lon: item.lon,
lat: item.lat
},
data: item,
entity: null
});
const createTime = new Date(item.createTime);
const now = new Date();
// 计算两个时间的差值（毫秒）
const diffInMs = now - createTime;
// 转换为分钟
const diffInMinutes = diffInMs / (1000 * 60);
// 判断是否超过3分钟
if (diffInMinutes > 3) {
} else {
pins.push({
id: item.cardId,
name: item.realName,
type: 1,
image: bluePersonIcon,
createTime: item.createTime,
position: {
lon: item.lon,
lat: item.lat
},
data: item,
entity: null
});
}
});
// 获取并显示车辆数据，使用不同的前缀
const resCar = await getCarPointAllCarApi();
const carData = resCar.data.data;
carData.map(item => {
pins.push({
id: item.carNumber,
name: item.carNumber,
type: 2,
image: blueCarIcon,
position: {
lon: item.lon,
lat: item.lat
},
data: item,
entity: null
});
const createTime = new Date(item.createTime);
const now = new Date();
// 计算两个时间的差值（毫秒）
const diffInMs = now - createTime;
// 转换为天数
const diffInDays = diffInMs / (1000 * 60);
// 判断是否超过20分钟
if (diffInDays > 20) {
} else {
pins.push({
id: item.carNumber,
name: item.carNumber,
type: 2,
image: blueCarIcon,
position: {
lon: item.lon,
lat: item.lat
},
data: item,
entity: null
});
}
});
// 获取在线监测
......@@ -639,7 +730,7 @@ onMounted(async () => {
});
iconPoint(viewer, pins).then(result => {
console.log(result);
console.log('--2--',result);
});
}, 2000);
// setTimePerson();
......@@ -647,7 +738,6 @@ onMounted(async () => {
setRemUnit();
// 监听窗口大小变化
window.addEventListener('resize', setRemUnit);
// zhaojunbao 结束
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
......@@ -724,7 +814,7 @@ onMounted(async () => {
console.log(labelData.value);
const webRtcServrce = ref();
nextTick(() => {
webRtcServrce.value = new WebRtcStreamer('video', `${location.protocol}//` + `192.168.2.53:8000`);
webRtcServrce.value = new WebRtcStreamer('video', `${location.protocol}//` + `192.168.2.67:8000`);
webRtcServrce.value.connect(res.data.data.videoStream);
});
}
......@@ -749,7 +839,7 @@ onUnmounted(() => {
viewer.destroy();
viewer = null;
}
// 移除窗口大小变化监听
window.removeEventListener('resize', setRemUnit);
......@@ -761,9 +851,11 @@ onUnmounted(() => {
<template>
<div class="wrapper">
<div class="top-toolbar">
<div class="baojing">
<div class="baojing" @click="toggleAlarmStatus">
声光报警
<NSwitch v-model:value="active" />
<!-- <NSwitch v-model:value="active" /> -->
<img src="@/assets/jinrun/open.png" alt="" srcset="" v-show="alarmStatus == 1">
<img src="@/assets/jinrun/close.png" alt="" srcset="" v-show="alarmStatus == 0">
</div>
<!-- <i class="split-line"></i> -->
......@@ -874,7 +966,6 @@ onUnmounted(() => {
allowfullscreen="true"
allowtransparency="true"
allow="autoplay"
scrolling="no"
:src="link"
width="100%"
height="100%"
......@@ -1037,7 +1128,7 @@ onUnmounted(() => {
<!-- 非cesium相关 结束 -->
</template>
<style scoped>
<style scoped lang="scss">
html,
body {
width: 100%;
......@@ -1241,9 +1332,9 @@ span {
/* zhaojunbao */
.top-toolbar {
position: absolute;
top: 0.5rem;
top: 0.44rem;
right: 0.5rem;
width: 240px;
width: 300px;
height: 0.4rem;
color: #11e0ff;
z-index: 99999;
......@@ -1258,9 +1349,24 @@ span {
}
.baojing {
.alarmTxt{
font-size: 0.18rem;
display: inline-block;
width: 100px;
}
position: relative;
padding-left: 25px;
display: block;
display: flex;
justify-content: start;
align-items: center;
height: 20px;
img{
width: 0.5rem;
height: 0.22rem;
cursor: pointer;
margin-left: 10px;
}
&::before {
content: '';
......
src/views/_builtin/login/modules/pwd-login.vue
View file @ 83672c70
......@@ -41,13 +41,17 @@ async function handleSubmit() {
const res = await api_loginPost(model);
if (res.data.code == 200) {
// 模拟loginByToken的逻辑
localStorage.setItem('loginId', res.data.data.roleId);
localStorage.setItem('token', res.data.data.token);
window.$notification?.success({
title: '登录成功',
content: '欢迎回来，登录已完成',
duration: 3000
duration: 3000,
style: {
zIndex: 9999
}
});
router.push('/home');
router.push('/cesiumDeom');
} else {
window.$notification?.error({
title: '登录失败',
......
src/views/aI/home/index.vue
View file @ 83672c70
......@@ -3,6 +3,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_AI_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......@@ -13,7 +15,7 @@ onMounted(async () => {
</script>
<template>
<iframe allowfullscreen="true" allowtransparency="true" allow="autoplay" scrolling="no" src="http://192.168.2.54:9528/large" frameborder="0"></iframe>
<iframe allowfullscreen="true" allowtransparency="true" allow="autoplay" :src="`${baseUrl}/large`" frameborder="0"></iframe>
</template>
<style scoped></style>
\ No newline at end of file
src/views/aI/jieguo/index.vue
View file @ 83672c70
......@@ -3,6 +3,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_AI_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......@@ -13,7 +15,7 @@ onMounted(async () => {
</script>
<template>
<iframe src="http://192.168.2.54:9528/result" frameborder="0"></iframe>
<iframe allowfullscreen="true" allowtransparency="true" allow="autoplay" :src="`${baseUrl}/result`" frameborder="0"></iframe>
</template>
<style scoped></style>
src/views/aI/shexiang/index.vue
View file @ 83672c70
......@@ -3,6 +3,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_AI_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......@@ -13,7 +15,7 @@ onMounted(async () => {
</script>
<template>
<iframe allowfullscreen="true" allowtransparency="true" allow="autoplay" scrolling="no" src="http://192.168.2.54:9528/camera" frameborder="0"></iframe>
<iframe allowfullscreen="true" allowtransparency="true" allow="autoplay" :src="`${baseUrl}/camera`" frameborder="0"></iframe>
</template>
<style scoped></style>
src/views/aI/shipin/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.54:9528/videos" frameborder="0"></iframe>
<iframe allowfullscreen="true" allowtransparency="true" allow="autoplay" :src="`${baseUrl}/videos`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_AI_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/aI/suanfa/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.54:9528/arithmetic" frameborder="0"></iframe>
<iframe allowfullscreen="true" allowtransparency="true" allow="autoplay" :src="`${baseUrl}/arithmetic`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_AI_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/aI/tixing/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.54:9528/remind" frameborder="0"></iframe>
<iframe allowfullscreen="true" allowtransparency="true" allow="autoplay" :src="`${baseUrl}/remind`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_AI_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/aI/tuisong/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.54:9528/pushmessage" frameborder="0"></iframe>
<iframe allowfullscreen="true" allowtransparency="true" allow="autoplay" :src="`${baseUrl}/pushmessage`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_AI_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/casting/data/detection/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/dataMonitor/bmwy/history" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/dataMonitor/bmwy/history`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_CASTING_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/casting/data/rainfall/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/dataMonitor/jyl/history" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/dataMonitor/jyl/history`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_CASTING_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/casting/home/index.vue
View file @ 83672c70
<template>
<iframe style="width: 100%; height: 100%;" src="http://192.168.2.15:81/index" frameborder="0"></iframe>
<iframe style="width: 100%; height: 100%;" :src="`${baseUrl}/index`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_CASTING_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/casting/monitor/entering/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/personMonitor/valueInput" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/personMonitor/valueInput`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_CASTING_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/casting/monitor/manage/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/personMonitor/monitorPoints" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/personMonitor/monitorPoints`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_CASTING_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/casting/police/list/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/alarmManage/history" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/alarmManage/history`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_CASTING_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/casting/police/setting/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/alarmManage/warning" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/alarmManage/warning`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_CASTING_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/casting/polling/manage/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/personInspection/checkItem" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/personInspection/checkItem`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_CASTING_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/casting/polling/result/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/personInspection/checkResult" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/personInspection/checkResult`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_CASTING_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/casting/polling/typeManage/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/personInspection/checkMode" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/personInspection/checkMode`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_CASTING_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/casting/system/casting/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/system/wastedumpManage" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/system/wastedumpManage`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_CASTING_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/casting/system/equipment/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/system/deviceManage" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/system/deviceManage`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_CASTING_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/casting/system/modelData/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/system/monitorItems" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/system/monitorItems`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_CASTING_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/casting/system/modelManage/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/system/moduleConfig" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/system/moduleConfig`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_CASTING_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/casting/system/monitor/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/system/monitorPointConfig" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/system/monitorPointConfig`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_CASTING_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/home/police/index.vue
View file @ 83672c70
......@@ -192,14 +192,22 @@ async function topDelete() {
if (ids.value == null || ids.value.length == 0) {
message.error('请选择要删除的用户');
} else {
let id = ids.value.join(',')
let res = await delFenceLogApi(id);
if(res.data.code == 200) {
search();
message.success('删除成功')
} else {
message.error(res.data.msg)
}
dialog.create({
title: '提示',
content: '确定删除这条记录吗？',
positiveText: '确定',
negativeText: '取消',
onPositiveClick: async () => {
let id = ids.value.join(',')
let res = await delFenceLogApi(id);
if (res.data.code == 200) {
search();
message.success('删除成功')
} else {
message.error(res.data.msg)
}
}
})
}
}
// 头部导出
......@@ -326,7 +334,7 @@ onMounted(() => {
<div style="margin-left: 30px">
车牌号
<NInput v-model:value="serarchData.username" placeholder="请输入车牌号"
<NInput v-model:value="serarchData.carNumber" placeholder="请输入车牌号"
style="width: 250px; margin-left: 10px" clearable="true" />
</div>
......
src/views/monitoring/data/detection/index.vue
View file @ 83672c70
<template>
<iframe style="width: 100%; height: 100%;" src="http://192.168.2.15:84/dataMonitor/bmwy/history" frameborder="0"></iframe>
<iframe style="width: 100%; height: 100%;" :src="`${baseUrl}/dataMonitor/bmwy/history`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_SIDE_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/monitoring/data/rainfall/index.vue
View file @ 83672c70
<template>
<iframe style="width: 100%; height: 100%;" src="http://192.168.2.15:84/dataMonitor/jyl/history" frameborder="0"></iframe>
<iframe style="width: 100%; height: 100%;" :src="`${baseUrl}/dataMonitor/jyl/history`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_SIDE_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/monitoring/home/index.vue
View file @ 83672c70
<template>
<iframe style="width: 100%; height: 100%;" src="http://192.168.2.15:84/index" frameborder="0"></iframe>
<iframe style="width: 100%; height: 100%;" :src="`${baseUrl}/index`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_SIDE_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/monitoring/monitor/entering/index.vue
View file @ 83672c70
<template>
<iframe style="width: 100%; height: 100%;" src="http://192.168.2.15:84/personMonitor/valueInput" frameborder="0"></iframe>
<iframe style="width: 100%; height: 100%;" :src="`${baseUrl}/personMonitor/valueInput`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_SIDE_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/monitoring/monitor/manage/index.vue
View file @ 83672c70
<template>
<iframe style="width: 100%; height: 100%;" src="http://192.168.2.15:84/personMonitor/monitorPoints" frameborder="0"></iframe>
<iframe style="width: 100%; height: 100%;" :src="`${baseUrl}/personMonitor/monitorPoints`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_SIDE_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/monitoring/police/list/index.vue
View file @ 83672c70
<template>
<iframe style="width: 100%; height: 100%;" src="http://192.168.2.15:84/alarmManage/history" frameborder="0"></iframe>
<iframe style="width: 100%; height: 100%;" :src="`${baseUrl}/alarmManage/history`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_SIDE_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/monitoring/police/setting/index.vue
View file @ 83672c70
<template>
<iframe style="width: 100%; height: 100%;" src="http://192.168.2.15:84/alarmManage/warning" frameborder="0"></iframe>
<iframe style="width: 100%; height: 100%;" :src="`${baseUrl}/alarmManage/warning`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_SIDE_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/monitoring/polling/manage/index.vue
View file @ 83672c70
<template>
<iframe style="width: 100%; height: 100%;" src="http://192.168.2.15:84/personInspection/checkItem" frameborder="0"></iframe>
<iframe style="width: 100%; height: 100%;" :src="`${baseUrl}/personInspection/checkItem`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_SIDE_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/monitoring/polling/result/index.vue
View file @ 83672c70
<template>
<iframe style="width: 100%; height: 100%;" src="http://192.168.2.15:84/personInspection/checkResult" frameborder="0"></iframe>
<iframe style="width: 100%; height: 100%;" :src="`${baseUrl}/personInspection/checkResult`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_SIDE_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/monitoring/polling/typeManage/index.vue
View file @ 83672c70
<template>
<iframe style="width: 100%; height: 100%;" src="http://192.168.2.15:84/personInspection/checkMode" frameborder="0"></iframe>
<iframe style="width: 100%; height: 100%;" :src="`${baseUrl}/personInspection/checkMode`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_SIDE_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/monitoring/system/equipment/index.vue
View file @ 83672c70
<template>
<iframe style="width: 100%; height: 100%;" src="http://192.168.2.15:84/system/deviceManage" frameborder="0"></iframe>
<iframe style="width: 100%; height: 100%;" :src="`${baseUrl}/system/deviceManage`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_SIDE_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/monitoring/system/modelData/index.vue
View file @ 83672c70
<template>
<iframe style="width: 100%; height: 100%;" src="http://192.168.2.15:84/system/monitorItems" frameborder="0"></iframe>
<iframe style="width: 100%; height: 100%;" :src="`${baseUrl}/system/monitorItems`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_SIDE_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/monitoring/system/modelManage/index.vue
View file @ 83672c70
<template>
<iframe style="width: 100%; height: 100%;" src="http://192.168.2.15:84/system/moduleConfig" frameborder="0"></iframe>
<iframe style="width: 100%; height: 100%;" :src="`${baseUrl}/system/moduleConfig`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_SIDE_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/monitoring/system/monitor/index.vue
View file @ 83672c70
<template>
<iframe style="width: 100%; height: 100%;" src="http://192.168.2.15:84/system/monitorPointConfig" frameborder="0"></iframe>
<iframe style="width: 100%; height: 100%;" :src="`${baseUrl}/system/monitorPointConfig`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_SIDE_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/orientation/monitor/facility/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/drybeachequipinfor/deviceManage" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/drybeachequipinfor/deviceManage`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_POINT_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/orientation/monitor/history/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/drybeachequipinfor/monitoringHistory" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/drybeachequipinfor/monitoringHistory`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_POINT_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/orientation/monitor/rainfall/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:81/drybeachequipinfor/jylHistory" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/drybeachequipinfor/jylHistory`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_POINT_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/orientation/video/index.vue
View file @ 83672c70
......@@ -3,6 +3,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_AI_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......@@ -13,7 +15,7 @@ onMounted(async () => {
</script>
<template>
<iframe src="http://192.168.2.54:9528/camera" frameborder="0"></iframe>
<iframe allowfullscreen="true" allowtransparency="true" allow="autoplay" :src="`${baseUrl}/camera`" frameborder="0"></iframe>
</template>
<style scoped></style>
\ No newline at end of file
src/views/personnel/facility/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.11/device/card" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/device/card`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_PERSON_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/personnel/manage/personnel/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.11/person/renyuan" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/person/renyuan`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_PERSON_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/personnel/manage/staff/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.11/person/fangke" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/person/fangke`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
import { connect, parseDetectionRecord } from '@/utils/webSocket';
import { router } from '@/router';
const baseUrl = import.meta.env.VITE_PERSON_URL;
let ws: any = null;
// 定义WebSocket连接的URL
const webSocketUrl = `ws://192.168.2.67:9995/ws/${'router'}`;
function connect() {
if ('WebSocket' in window) {
ws = new WebSocket(webSocketUrl);
// 连接成功时触发
ws.onopen = function (event) {
console.log('WebSocket连接成功');
};
// 接收到消息时触发
ws.onmessage = function (event) {
const recordObject: DetectionRecord = parseDetectionRecord(event.data);
// 处理接收到的数据
const data = recordObject;
console.log('111', data);
if (data.type == 'router') {
router.push({
path: '/personnel/track',
query: {
cardId: data.cardId
}
});
}
// 处理收到的消息
};
}
}
onMounted(async () => {
const message = useMessage();
......@@ -13,6 +46,7 @@ onMounted(async () => {
if (res.data.code == 401) {
message.error('登录过期');
}
connect()
})
</script>
......
src/views/personnel/manage/visitor/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.11/person/yuangong" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/person/yuangong`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_PERSON_URL;
onMounted(async () => {
const message = useMessage();
......
src/views/personnel/realTime/cesium.vue
View file @ 83672c70
......@@ -64,17 +64,6 @@ function add3dtiles() {
}
async function createRedLine() {
// polygonCoordList = [
// { id:'1', name: '李四1', x: 122.04635389346244, y: 37.488806671581244, },
// { id:'2', name: '李四2', x: 122.04889441347648, y: 37.489652755263485, },
// { id:'3', name: '李四3', x: 122.04866968206369, y: 37.49009150670726, },
// { id:'4', name: '李四4', x: 122.04742994760802, y: 37.48962490165547, },
// { id:'5', name: '李四5', x: 122.0462100510411, y: 37.48919903307283 },
// { id:'6', name: '李四6', x: 122.04604253116817, y: 37.48950907923646 },
// { id:'7', name: '李四7', x: 122.04722854327062, y: 37.48991898274459 },
// { id:'8', name: '李四8', x: 122.04706661542971, y: 37.49024792859644}
// ];
let res = await getPointAllPersonApi();
polygonCoordList = res.data.data;
......@@ -140,7 +129,6 @@ async function createRedLine() {
}
function selectChange(item:any) {
console.log('222',item);
personValue.value = item;
}
......@@ -150,6 +138,10 @@ function handleSearch() {
return;
} else {
personList.value = polygonCoordList.filter((item:any) => item.personId == personValue.value);
if(personList.value.length <= 0){
message.error('该人员未在线');
return;
}
personShow.value = true;
message.success('查询成功');
}
......
src/views/personnel/sos/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.11/sos/alarm" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/sos/alarm`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_PERSON_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/personnel/statistics/distribution/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.11/tongji/fenbu" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/tongji/fenbu`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_PERSON_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/personnel/statistics/police/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.11/tongji/baojing" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/tongji/baojing`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_PERSON_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/personnel/statistics/sheet/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.11/tongji/kaoqin" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/tongji/kaoqin`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_PERSON_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/personnel/statistics/statis/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.11/tongji/renyuan" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/tongji/renyuan`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_PERSON_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/personnel/track/cesium.vue
View file @ 83672c70
......@@ -9,14 +9,17 @@ import { remove } from 'nprogress';
import { toConvertLongitudeAndLatitude } from '@/api/utils/coordinateUtil';
import { getModel } from '@/api/utils/cesiumModel';
import { getModelAllApi, getPersonPointApi } from '@/api';
import { useRoute } from 'vue-router';
let viewer: any = null;
const route = useRoute();
const range = ref<any>(null);
const personValue = ref('');
const serarchData = ref({
username: '',
cardId: '',
personId: '',
startTime: '',
endTime: ''
endTime: '',
});
const cesiumShow = ref(false)
const isShow = ref(false);
......@@ -143,6 +146,9 @@ function pauseProgress() {
// 监听选取的人员
function selectChange(item: any) {
personValue.value = item;
let res = options.value.find(data => data.cardId == item)
serarchData.value.personId = res.personId;
}
// 监听时间范围变化
function watchTimeData(newRange: any) {
......@@ -215,6 +221,7 @@ function handleclear() {
function handleReset() {
isShow.value = false;
cesiumShow.value = false;
//删除模型
if (model.value) {
viewer.entities.remove(model.value);
......@@ -299,18 +306,35 @@ async function handleSearch() {
cesiumShow.value = true;
let data = {
cardId: personValue.value,
personId: serarchData.value.personId,
startTime: serarchData.value.startTime,
endTime: serarchData.value.endTime
}
let resHeight = null;
let res = await getPersonPointApi(data);
if (res.data.code == 200) {
for (let item of res.data.data) {
let dataList = [];
if (res.data.data.length <= 0) {
message.warning('暂无人员轨迹');
cesiumShow.value = false;
return;
}
if(res.data.data.length > 100){
let index = Math.floor(res.data.data.length / 100);
console.log(index);
for(let i = 0; i < 98; i++){
dataList.push(res.data.data[i * index]);
}
dataList.push(res.data.data[0],res.data.data[res.data.data.length - 1]);
} else {
dataList = res.data.data;
}
for (let item of dataList) {
const cartographic = Cesium.Cartographic.fromDegrees(item.lon, item.lat);
const height = await getElevationFromRays(cartographic, viewer);
const adjustedHeight = height;
const cartesian = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, adjustedHeight);
if (resHeight != null) {
let dataHeight = Number(height) - Number(resHeight);
if (dataHeight < 0.5) {
......@@ -322,6 +346,7 @@ async function handleSearch() {
resHeight = height;
}
let newPositions = await createNewPositionHeight(positions.value, viewer)
model.value = createModel(newPositions, viewer);
undataLine(newPositions);
cesiumShow.value = false;
......@@ -370,6 +395,18 @@ onMounted(() => {
updateProgress();
}, 2000);
search();
search().then(() => {
// 在获取到选项后再处理路由参数
const cardId = route.query.cardId;
if (cardId && options.value) {
const matchedOption = options.value.find(option => option.cardId === cardId);
if (matchedOption) {
value.value = cardId;
personValue.value = cardId;
}
}
});
});
</script>
......@@ -396,9 +433,9 @@ onMounted(() => {
</NSpace>
</div>
<n-spin class="spinDiv" v-show="cesiumShow">
<n-spin class="spinDiv" v-show="cesiumShow" stroke="#0088FFFF">
<template #description>
<span style="color: #2198f2;">加载中...</span>
<span style="color: #0088FFFF;">加载中...</span>
</template>
</n-spin>
......
src/views/truck/area/classes/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.53:8040/#/regional/fence" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/#/regional/fence`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_TRUCK_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/truck/area/message/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.53:8040/#/regional/information" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/#/regional/information`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_TRUCK_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/truck/car/carType/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:83/carManagement/carType" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/carManagement/carType`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_TRUCKS_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/truck/car/fault/index.vue
View file @ 83672c70
<template>
<iframe src=" http://192.168.2.15:83/carManagement/carFault" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/carManagement/carFault`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_TRUCKS_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/truck/car/maintain/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:83/carManagement/carRepair" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/carManagement/carRepair`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_TRUCKS_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/truck/car/message/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:83/carManagement/carInformation" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/carManagement/carInformation`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_TRUCKS_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/truck/car/playback/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:83/carManagement/carFleet" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/carManagement/carFleet`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_TRUCKS_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/truck/car/track/cesium.vue
View file @ 83672c70
......@@ -145,7 +145,6 @@ function pauseProgress() {
// 监听选取的人员
function selectChange(item: any) {
console.log(item);
personValue.value = item;
}
......@@ -220,6 +219,7 @@ function handleclear() {
function handleReset() {
isShow.value = false;
cesiumShow.value = false;
//删除模型
if (model.value) {
viewer.entities.remove(model.value);
......@@ -297,6 +297,7 @@ function selectSpeed(e) {
// }, 100);
}
}
async function handleSearch() {
handlerClean()
if (serarchData.value.startTime && serarchData.value.endTime) {
......@@ -309,7 +310,22 @@ async function handleSearch() {
let resHeight = null;
let res = await getCarPointApi(data);
if (res.data.code == 200) {
for (let item of res.data.data) {
let dataList = [];
if (res.data.data.length <= 0) {
message.warning('暂无车辆轨迹');
cesiumShow.value = false;
return;
}
if(res.data.data.length > 100){
let index = Math.floor(res.data.data.length / 100);
for(let i = 0; i < 98; i++){
dataList.push(res.data.data[i * index]);
}
dataList.push(res.data.data[0],res.data.data[res.data.data.length - 1]);
} else {
dataList = res.data.data;
}
for (let item of dataList) {
const cartographic = Cesium.Cartographic.fromDegrees(item.lon, item.lat);
const height = await getElevationFromRays(cartographic, viewer);
const adjustedHeight = height;
......@@ -324,9 +340,9 @@ async function handleSearch() {
}
resHeight = height;
}
let newPositions = await createNewPositionHeight(positions.value, viewer)
console.log(newPositions);
model.value = createModel(newPositions, viewer);
undataLine(newPositions);
cesiumShow.value = false;
......@@ -339,14 +355,6 @@ async function handleSearch() {
}
}
// watch([model.value, lineValue.value], ([newModel, newLineValue], [oldModel, oldLineValue]) => {
// if (newModel && newLineValue) {
// cesiumShow.value = false;
// } else {
// cesiumShow.value = true;
// }
// },{ deep: true });
// 添加开始和结束时间显示
function formatDateTime(date: any) {
if (!date) return '';
......@@ -399,9 +407,9 @@ onMounted(() => {
</NSpace>
</div>
<!-- 加载中 -->
<n-spin class="spinDiv" v-show="cesiumShow">
<n-spin class="spinDiv" v-show="cesiumShow" stroke="#0088FFFF">
<template #description>
<span style="color: #2198f2;">加载中...</span>
<span style="color: #0088FFFF;">加载中...</span>
</template>
</n-spin>
<!-- cesium -->
......
src/views/truck/car/type/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:83/carManagement/carFaultType" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/carManagement/carFaultType`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_TRUCKS_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/truck/driverMessage/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.53:8040/#/intelligent/person" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/#/intelligent/person`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_TRUCK_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/truck/safety/report/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:83/safetyManagement/checkModel" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/#/safetyManagement/checkModel`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_TRUCKS_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/truck/safety/security/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.15:83/safetyManagement/checkLog" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/safetyManagement/checkLog`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_TRUCKS_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/truck/smart/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.53:8040/#/intelligent/order" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/#/intelligent/order`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_TRUCK_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/truck/vehicle/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.53:8040/#/terminal" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/#/terminal`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_TRUCK_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/truck/video/history/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.53:8040/#/history/log" frameborder="0"></iframe>
<iframe :src="`${baseUrl}/#/history/log`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_TRUCK_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/truck/video/monitoring/index.vue
View file @ 83672c70
<template>
<iframe src="http://192.168.2.53:8040/#/ai/camera" frameborder="0"></iframe>
<iframe allowfullscreen="true" allowtransparency="true" allow="autoplay" :src="`${baseUrl}/#/ai/camera`" frameborder="0"></iframe>
</template>
<script lang="ts" setup>
......@@ -7,6 +7,8 @@ import { api_tokenGet } from '@/api';
import { useMessage } from 'naive-ui';
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_TRUCK_URL;
onMounted(async () => {
const message = useMessage();
let res = await api_tokenGet()
......
src/views/user/juese/index.vue
View file @ 83672c70
......@@ -17,7 +17,7 @@ import {
useDialog,
useMessage
} from 'naive-ui';
import { api_addRole, api_deleteRole, api_exportRoleData, api_getUserRole, api_menuPageGet, api_rolePage, api_updateRole } from '@/api';
import { api_addRole, api_deleteRole, api_exportRoleData, api_getUserRole, api_menuListGet, api_menuPageGet, api_rolePage, api_updateRole } from '@/api';
import { roleRules } from '@/rules/rules';
const message = useMessage();
......@@ -193,6 +193,10 @@ async function handleEdit(row: any) {
title.value = '编辑角色'
let res = await api_getUserRole(row.id)
formData.value = res.data.data;
formData.value.permissionIds = res.data.data.permissionIds.map((item:any) => {
return item.menuId;
})
console.log('permissionIds:', formData.value.permissionIds); // 检查这里的数据
createModal.value = true;
}
const dialog = useDialog();
......@@ -245,6 +249,9 @@ async function topCompile() {
createModal.value = true;
if(res.data.code == 200) {
formData.value = res.data.data
formData.value.permissionIds = res.data.data.permissionIds.map((item:any) => {
return item.menuId;
})
} else {
message.error(res.data.msg)
}
......@@ -347,11 +354,9 @@ async function search() {
}
async function authoritySearch(){
let res = await api_menuPageGet(pageData1.value);
let res = await api_menuListGet();
if (res.data.code == 200) {
console.log(res);
authorityData.value = res.data.data.data[0].children;
authorityData.value = res.data.data.children;
} else {
message.error(res.msg);
}
......
src/views/user/model/dixing/index.vue
View file @ 83672c70
......@@ -357,7 +357,7 @@ onMounted(() => {
@update:value="updataType1" />
</NFormItem>
<n-form-item label="模型上传">
<n-upload action="http://192.168.2.53:9995/information/model/file" :headers="{
<n-upload action="http://192.168.2.67:9995/information/model/file" :headers="{
'naive-info': 'hello!',
}" :data="{
'naive-data': 'cool! naive!',
......
src/views/user/model/kuangqu/index.vue
View file @ 83672c70
......@@ -367,7 +367,7 @@ onMounted(() => {
@update:value="updataType1" />
</NFormItem>
<NFormItem label="文件上传">
<n-upload action="http://192.168.2.53:9995/information/image/upload/iamge" :headers="{
<n-upload action="http://192.168.2.67:9995/information/image/upload/iamge" :headers="{
'naive-info': 'hello!'
}" :data="{
'naive-data': 'cool! naive!'
......
src/views/user/yonghu/index.vue
View file @ 83672c70
......@@ -423,10 +423,22 @@ function watchTimeData(value: any) {
async function search() {
let res = await api_userPageGet(serarchData.value);
// let resList = await api_getRoleList();
// let resUser = resList.data.data;
if (res.data.code == 200) {
tableData.value = res.data.data.records;
pageData.value.total = Number(res.data.data.total);
// resUser.forEach((item:any) => {
// for (let i = 0; i < tableData.value.length; i++) {
// const element = tableData.value[i];
// if (element.roleName == item.roleName) {
// element.roleName = item.roleRemark;
// console.log('111',element);
// console.log('222',item);
// }
// }
// })
} else {
message.error(res.data.msg);
}
......
vite.config.ts
View file @ 83672c70
......@@ -8,8 +8,8 @@ export default defineConfig(configEnv => {
const viteEnv = loadEnv(configEnv.mode, process.cwd()) as unknown as Env.ImportMeta;
const buildTime = getBuildTime();
const proxyTarget = 'http://192.168.2.53:8080';
const url = viteEnv.VITE_SERVICE_URL;
const proxyTarget = 'http://192.168.2.67:9995';
// const enableProxy = configEnv.command === 'serve' && !configEnv.isPreview;
return {
......@@ -39,7 +39,7 @@ export default defineConfig(configEnv => {
proxy: {
...createViteProxy(viteEnv, configEnv.command === 'serve'),
'/v1': {
target: url,
target: proxyTarget,
changeOrigin: true,
rewrite: path => path.replace(/^\/v1/, '')
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment