Skip to content

J
JINRUN-DP
Commit 6de2505b authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add 声光报警

parent aae93185
Hide whitespace changes
Inline Side-by-side
Showing with 237 additions and 214 deletions
src/components/MineMonitor/RightAiWarning.vue
View file @ 6de2505b
<template> <template>
<!-- 图表容器 Canvas --> <!-- 图表容器 Canvas -->
<div class="chart-container wrapper"> <div class="chart-container wrapper">
<h2 class="card-title">AI预警分析</h2> <h2 class="card-title">当月司机AI预警分析</h2>
<div class="chart-wrapper"> <div class="chart-wrapper">
<canvas <canvas
ref="chartCanvasRef" ref="chartCanvasRef"
......
src/views/_builtin/cesiumDeom/index.vue
View file @ 6de2505b
<template>
<div class="wrapper">
<div
class="top-toolbar"
style="display: flex; align-items: center; justify-content: space-around"
>
<span class="baojing">声光报警</span>
<n-switch v-model:value="active" />
<i class="split-line"></i>
<span class="houtaiguanli" @click="navTo">后台管理</span>
</div>
<!-- cesium容器 -->
<div class="cesium-container">
<div id="cesiumContainer"></div>
<header class="cesiumcontainer_top slide-in-top"></header>
</div>
</div>
<!-- 地图结束 -->
<!-- <div class="top">
<img src="@/assets/jinrun/title.png" alt="" srcset="">
</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>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<!-- 非地图相关 开始 -->
<!-- 左侧收起按钮 -->
<div
class="toggle-btn left-toggle"
:class="{ collapsed: !isLeftModulesVisible }"
@click="toggleBothModules"
>
<div class="btn-arrow1">
<div>
<img
:src="isLeftModulesVisible ? arrowLeftImg : arrowRightImg"
alt=""
srcset=""
/><br />
<span class="arrow-font">{{ isLeftModulesVisible ? "收" : "展" }}</span>
<br />
<span class="arrow-font">{{ isLeftModulesVisible ? "起" : "开" }}</span>
</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 />
<span class="arrow-font">{{ isLeftModulesVisible ? "收" : "展" }}</span>
<br />
<span class="arrow-font">{{ isLeftModulesVisible ? "起" : "开" }}</span>
</div>
</div>
</div>
<!-- 左侧模块容器 -->
<transition name="slide-left">
<div class="left-modules" v-show="isLeftModulesVisible">
<LeftDeviceStatus />
<LeftRainfallTrend />
<!--
<LeftOnlineMonitor /> -->
</div>
</transition>
<!-- 右侧模块容器 -->
<transition name="slide-right">
<div class="right-modules" v-show="isRightModulesVisible">
<RightAiWarning />
<!--
<RightEnvMonitor />
<RightTodayAlarm /> -->
</div>
</transition>
<!-- 非地图相关 结束 -->
</template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from "vue";
import { onMounted, onUnmounted } from 'vue'; import { onMounted, onUnmounted } from "vue";
import * as Cesium from 'cesium'; import * as Cesium from "cesium";
import '../../../../Cesium/Widgets/widgets.css'; import "../../../../Cesium/Widgets/widgets.css";
// 引入拆分的组件 // 引入拆分的组件
// import LeftDeviceStatus from '@/components/MineMonitor/LeftDeviceStatus.vue'; // import LeftDeviceStatus from '@/components/MineMonitor/LeftDeviceStatus.vue';
let viewer: Cesium.Viewer | null = null; let viewer: Cesium.Viewer | null = null;
const active = ref(false);
// REM自适应配置 // REM自适应配置
const REM_CONFIG = { const REM_CONFIG = {
// 设计稿宽度 // 设计稿宽度
designWidth: 1920, designWidth: 1920,
// 基准值：1rem = 100px // 基准值：1rem = 100px
baseSize: 100 baseSize: 100,
}; };
/** /**
...@@ -33,43 +136,40 @@ const setRemUnit = () => { ...@@ -33,43 +136,40 @@ const setRemUnit = () => {
}; };
// 控制左右模块显示状态的响应式变量 // 控制左右模块显示状态的响应式变量
const isLeftModulesVisible = ref(true) const isLeftModulesVisible = ref(true);
const isRightModulesVisible = ref(true) const isRightModulesVisible = ref(true);
// 切换左侧模块显示状态 // 切换左侧模块显示状态
const toggleLeftModules = () => { const toggleLeftModules = () => {
isLeftModulesVisible.value = !isLeftModulesVisible.value isLeftModulesVisible.value = !isLeftModulesVisible.value;
} };
// 切换右侧模块显示状态 // 切换右侧模块显示状态
const toggleRightModules = () => { const toggleRightModules = () => {
isRightModulesVisible.value = !isRightModulesVisible.value isRightModulesVisible.value = !isRightModulesVisible.value;
} };
// 切换两侧模块显示状态 // 切换两侧模块显示状态
const toggleBothModules = () => { const toggleBothModules = () => {
isLeftModulesVisible.value = !isLeftModulesVisible.value isLeftModulesVisible.value = !isLeftModulesVisible.value;
isRightModulesVisible.value = !isRightModulesVisible.value isRightModulesVisible.value = !isRightModulesVisible.value;
} };
// 导入所需的图片资源 // 导入所需的图片资源
import arrowLeftImg from '@/assets/jinrun/arrow-left.png' import arrowLeftImg from "@/assets/jinrun/arrow-left.png";
import arrowRightImg from '@/assets/jinrun/arrow-right.png' import arrowRightImg from "@/assets/jinrun/arrow-right.png";
onMounted(() => { onMounted(() => {
// 配置Cesium资源路径 // 配置Cesium资源路径
window.CESIUM_BASE_URL = '/Cesium'; window.CESIUM_BASE_URL = "/Cesium";
// 初始化REM自适应 // 初始化REM自适应
setRemUnit(); setRemUnit();
// 监听窗口大小变化 // 监听窗口大小变化
window.addEventListener('resize', setRemUnit); window.addEventListener("resize", setRemUnit);
// 初始化Cesium地图 // 初始化Cesium地图
viewer = new Cesium.Viewer('cesiumContainer', { viewer = new Cesium.Viewer("cesiumContainer", {
// 禁用所有可能导致问题的组件 // 禁用所有可能导致问题的组件
animation: false, animation: false,
baseLayerPicker: false, baseLayerPicker: false,
...@@ -86,22 +186,22 @@ onMounted(() => { ...@@ -86,22 +186,22 @@ onMounted(() => {
shadows: false, shadows: false,
terrainProvider: undefined, terrainProvider: undefined,
requestRenderMode: true, requestRenderMode: true,
showRenderLoopErrors: false showRenderLoopErrors: false,
}); });
// 隐藏Cesium版权信息 // 隐藏Cesium版权信息
if (viewer?.cesiumWidget) { if (viewer?.cesiumWidget) {
viewer.cesiumWidget.creditContainer.style.display = 'none'; viewer.cesiumWidget.creditContainer.style.display = "none";
} }
// 设置初始视角（中国区域） // 设置初始视角（中国区域）
viewer?.camera.setView({ viewer?.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(105.0, 35.0, 10000000.0), destination: Cesium.Cartesian3.fromDegrees(105.0, 35.0, 10000000.0),
orientation: { orientation: {
heading: Cesium.Math.toRadians(0.0), heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90.0), pitch: Cesium.Math.toRadians(-90.0),
roll: 0.0 roll: 0.0,
} },
}); });
}); });
...@@ -111,149 +211,75 @@ onUnmounted(() => { ...@@ -111,149 +211,75 @@ onUnmounted(() => {
viewer.destroy(); viewer.destroy();
viewer = null; viewer = null;
} }
// 移除窗口大小变化监听 // 移除窗口大小变化监听
window.removeEventListener('resize', setRemUnit); window.removeEventListener("resize", setRemUnit);
}); });
const navTo = () => { const navTo = () => {
window.location.href = '/home'; window.location.href = "/home";
}; };
</script> </script>
<template>
<div class="wrapper">
<!-- cesium容器 -->
<div class="cesium-container">
<div id="cesiumContainer"></div>
<header class="cesiumcontainer_top slide-in-top"></header>
<h2 class="header_date">
<NIcon size="40" @click="navTo">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 512 512"
enable-background="new 0 0 512 512"
xml:space="preserve"
>
<g>
<path
d="M413.967,276.8c1.06-6.235,1.06-13.518,1.06-20.8s-1.06-13.518-1.06-20.8l44.667-34.318
c4.26-3.118,5.319-8.317,2.13-13.518L418.215,115.6c-2.129-4.164-8.507-6.235-12.767-4.164l-53.186,20.801
c-10.638-8.318-23.394-15.601-36.16-20.801l-7.448-55.117c-1.06-4.154-5.319-8.318-10.638-8.318h-85.098
c-5.318,0-9.577,4.164-10.637,8.318l-8.508,55.117c-12.767,5.2-24.464,12.482-36.171,20.801l-53.186-20.801
c-5.319-2.071-10.638,0-12.767,4.164l-42.549,71.765c-2.119,4.153-1.061,10.399,2.129,13.518L96.97,235.2
c0,7.282-1.06,13.518-1.06,20.8s1.06,13.518,1.06,20.8l-44.668,34.318c-4.26,3.118-5.318,8.317-2.13,13.518L92.721,396.4
c2.13,4.164,8.508,6.235,12.767,4.164l53.187-20.801c10.637,8.318,23.394,15.601,36.16,20.801l8.508,55.117
c1.069,5.2,5.318,8.318,10.637,8.318h85.098c5.319,0,9.578-4.164,10.638-8.318l8.518-55.117c12.757-5.2,24.464-12.482,36.16-20.801
l53.187,20.801c5.318,2.071,10.637,0,12.767-4.164l42.549-71.765c2.129-4.153,1.06-10.399-2.13-13.518L413.967,276.8z
M255.468,328.8c-41.489,0-74.46-32.235-74.46-72.8s32.971-72.8,74.46-72.8s74.461,32.235,74.461,72.8S296.957,328.8,255.468,328.8
z"
></path>
</g>
</svg>
</NIcon>
</h2>
</div>
</div>
<!-- 地图结束 -->
<!-- <div class="top">
<img src="@/assets/jinrun/title.png" alt="" srcset="">
</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>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<!-- 非地图相关 开始 -->
<!-- 左侧收起按钮 -->
<div
class="toggle-btn left-toggle"
:class="{ 'collapsed': !isLeftModulesVisible }"
@click="toggleBothModules"
>
<div class="btn-arrow1">
<div>
<img :src="isLeftModulesVisible ? arrowLeftImg : arrowRightImg" alt="" srcset=""><br>
<span class="arrow-font">{{isLeftModulesVisible ? '收' : '展'}}</span>
<br>
<span class="arrow-font">{{isLeftModulesVisible ? '起' : '开'}}</span>
</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>
<span class="arrow-font">{{isLeftModulesVisible ? '收' : '展'}}</span>
<br>
<span class="arrow-font">{{isLeftModulesVisible ? '起' : '开'}}</span>
</div>
</div>
</div>
<!-- 左侧模块容器 -->
<transition name="slide-left">
<div class="left-modules" v-show="isLeftModulesVisible">
<LeftDeviceStatus />
<LeftRainfallTrend />
<!--
<LeftOnlineMonitor /> -->
</div>
</transition>
<!-- 右侧模块容器 -->
<transition name="slide-right">
<div class="right-modules" v-show="isRightModulesVisible">
<RightAiWarning />
<!--
<RightEnvMonitor />
<RightTodayAlarm /> -->
</div>
</transition>
<!-- 非地图相关 结束 -->
</template>
<style scoped lang="scss"> <style scoped lang="scss">
.top-toolbar {
position: absolute;
top: .5rem;
right: 0.3rem;
width: 3rem;
height: 0.3rem;
color: #11e0ff;
// background-color: #fff;
z-index: 99999;
.split-line {
width: 0.03rem;
height: 0.36rem;
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;
}
}
}
.top, .top,
.bottom, .bottom,
.left, .left,
.right { .right {
position: absolute; position: absolute;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
// .top { // .top {
// top: 0; // top: 0;
...@@ -267,7 +293,7 @@ const navTo = () => { ...@@ -267,7 +293,7 @@ const navTo = () => {
width: 100%; width: 100%;
height: 1.25rem; height: 1.25rem;
position: absolute; position: absolute;
.first-image { .first-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -275,7 +301,7 @@ const navTo = () => { ...@@ -275,7 +301,7 @@ const navTo = () => {
// background-repeat: no-repeat; // background-repeat: no-repeat;
// background-size: cover; // background-size: cover;
position: relative; position: relative;
.second-icon { .second-icon {
// background-image: url('@/assets/jinrun/title.png'); // background-image: url('@/assets/jinrun/title.png');
// background-repeat: no-repeat; // background-repeat: no-repeat;
...@@ -296,7 +322,7 @@ const navTo = () => { ...@@ -296,7 +322,7 @@ const navTo = () => {
width: 100%; width: 100%;
height: 0.4rem; height: 0.4rem;
// height: 0.52rem; // height: 0.52rem;
background-image: url('@/assets/jinrun/bottom.png'); background-image: url("@/assets/jinrun/bottom.png");
background-size: contain; background-size: contain;
} }
.left { .left {
...@@ -307,12 +333,10 @@ const navTo = () => { ...@@ -307,12 +333,10 @@ const navTo = () => {
// height: 1080px; // height: 1080px;
// height: 9.4rem; // height: 9.4rem;
height: calc(100vh); height: calc(100vh);
background-size: contain; background-size: contain;
background-position-x: left; background-position-x: left;
background-image: url('@/assets/jinrun/left.png'); background-image: url("@/assets/jinrun/left.png");
} }
.right { .right {
top: 0rem; top: 0rem;
...@@ -324,23 +348,22 @@ const navTo = () => { ...@@ -324,23 +348,22 @@ const navTo = () => {
// height: 9.4rem; // height: 9.4rem;
height: 100vh; height: 100vh;
background-image: url('@/assets/jinrun/right.png'); background-image: url("@/assets/jinrun/right.png");
background-size: contain; background-size: contain;
background-position-x: right; background-position-x: right;
} }
// 收起按钮样式 // 收起按钮样式
.toggle-btn { .toggle-btn {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: .71rem; width: 0.71rem;
height: 1.87rem; height: 1.87rem;
// background: rgba(0, 138, 255, 0.8); // background: rgba(0, 138, 255, 0.8);
background-image: url('@/assets/jinrun/toggle-left.png'); background-image: url("@/assets/jinrun/toggle-left.png");
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0;
cursor: pointer; cursor: pointer;
z-index: 100; z-index: 100;
...@@ -348,61 +371,56 @@ const navTo = () => { ...@@ -348,61 +371,56 @@ const navTo = () => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.3s ease; transition: all 0.3s ease;
&.left-toggle { &.left-toggle {
// left: 4.65rem; /* 与左侧模块宽度一致 */ // left: 4.65rem; /* 与左侧模块宽度一致 */
left: 5.1rem; /* 与左侧模块宽度一致 */ left: 4.9rem; /* 与左侧模块宽度一致 */
background-image: url('@/assets/jinrun/toggle-left.png');
background-image: url("@/assets/jinrun/toggle-left.png");
} }
&.left-toggle:hover { &.left-toggle:hover {
background-image: url('@/assets/jinrun/toggle-left_click.png'); background-image: url("@/assets/jinrun/toggle-left_click.png");
} }
&.right-toggle { &.right-toggle {
// right: 4.65rem;; /* 与右侧模块宽度一致 */ // right: 4.65rem;; /* 与右侧模块宽度一致 */
right: 5.1rem; /* 与左侧模块宽度一致 */ right: 4.9rem; /* 与左侧模块宽度一致 */
background-image: url('@/assets/jinrun/toggle-right.png'); background-image: url("@/assets/jinrun/toggle-right.png");
} }
&.right-toggle:hover { &.right-toggle:hover {
background-image: url('@/assets/jinrun/toggle-right_click.png'); background-image: url("@/assets/jinrun/toggle-right_click.png");
} }
&.collapsed { &.collapsed {
&.left-toggle { &.left-toggle {
left: .55rem; left: 0.55rem;
border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0;
} }
&.right-toggle { &.right-toggle {
right: .55rem; right: 0.55rem;
border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px;
} }
} }
.btn-arrow1{ .btn-arrow1 {
img{ img {
width: 0.18rem; width: 0.18rem;
// height: 0.21rem; // height: 0.21rem;
// margin-bottom:.1rem; // margin-bottom:.1rem;
// margin-bottom: -.15rem; // margin-bottom: -.15rem;
} }
} }
.btn-arrow { .btn-arrow {
width: 10px; width: 10px;
height: 10px; height: 10px;
border-top: 2px solid #fff; border-top: 2px solid #fff;
border-right: 2px solid #fff; border-right: 2px solid #fff;
transition: transform 0.3s ease; transition: transform 0.3s ease;
&::before { &::before {
content: ''; content: "";
position: absolute; position: absolute;
width: 2px; width: 2px;
height: 10px; height: 10px;
...@@ -411,25 +429,25 @@ const navTo = () => { ...@@ -411,25 +429,25 @@ const navTo = () => {
right: 4px; right: 4px;
} }
} }
&.left-toggle .btn-arrow { &.left-toggle .btn-arrow {
transform: rotate(135deg); transform: rotate(135deg);
} }
&.right-toggle .btn-arrow { &.right-toggle .btn-arrow {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
&.collapsed { &.collapsed {
&.left-toggle .btn-arrow { &.left-toggle .btn-arrow {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
&.right-toggle .btn-arrow { &.right-toggle .btn-arrow {
transform: rotate(135deg); transform: rotate(135deg);
} }
} }
&:hover { &:hover {
// background: rgba(0, 138, 255, 1); // background: rgba(0, 138, 255, 1);
} }
...@@ -449,7 +467,8 @@ const navTo = () => { ...@@ -449,7 +467,8 @@ const navTo = () => {
.slide-left-leave-to { .slide-left-leave-to {
transform: translateX(-100%); transform: translateX(-100%);
opacity: 0; opacity: 0;
}‘ }
‘
// 右侧模块滑动动画 // 右侧模块滑动动画
.slide-right-enter-active, .slide-right-enter-active,
...@@ -467,40 +486,44 @@ const navTo = () => { ...@@ -467,40 +486,44 @@ const navTo = () => {
opacity: 0; opacity: 0;
} }
// 当模块隐藏时调整收起按钮位置 // 当模块隐藏时调整收起按钮位置
.left-modules:not(.v-enter-active):not(.v-leave-active) ~ .left-toggle:not(.collapsed) { .left-modules:not(.v-enter-active):not(.v-leave-active)
~ .left-toggle:not(.collapsed) {
left: 0; left: 0;
border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0;
} }
.right-modules:not(.v-enter-active):not(.v-leave-active) ~ .right-toggle:not(.collapsed) { .right-modules:not(.v-enter-active):not(.v-leave-active)
~ .right-toggle:not(.collapsed) {
right: 0; right: 0;
border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px;
background: pink; background: pink;
} }
.left-modules, .right-modules { .left-modules,
.right-modules {
width: 4.6rem; width: 4.6rem;
// background: pink; // background: pink;
// margin-top: .6rem; // margin-top: .6rem;
padding-top: 1rem; padding-top: 1rem;
margin-left: 0.4rem;
position: absolute; position: absolute;
} }
.left-modules{ .left-modules {
left: 0; left: 0;
margin-left: 0.4rem;
} }
.right-modules{ .right-modules {
right: 0; right: 0;
} margin-right: 0.4rem;
.arrow-font{
color:#fff; font-size:0.18rem;
} }
.arrow-font {
color: #fff;
font-size: 0.18rem;
}
// 地图相关 // 地图相关
...@@ -519,7 +542,7 @@ const navTo = () => { ...@@ -519,7 +542,7 @@ const navTo = () => {
} }
.cesiumcontainer_top { .cesiumcontainer_top {
background: url('/src/assets/bg_top.png') no-repeat; background: url("/src/assets/bg_top.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
height: 90px; height: 90px;
position: absolute; position: absolute;
......
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