Skip to content

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

add 声光报警

parent aae93185
Show whitespace changes
Inline Side-by-side
Showing with 237 additions and 214 deletions
src/components/MineMonitor/RightAiWarning.vue
View file @ 6de2505b
<template>
<!-- 图表容器 Canvas -->
<div class="chart-container wrapper">
<h2 class="card-title">AI预警分析</h2>
<h2 class="card-title">当月司机AI预警分析</h2>
<div class="chart-wrapper">
<canvas
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">
import { ref } from 'vue'
import { onMounted, onUnmounted } from 'vue';
import * as Cesium from 'cesium';
import '../../../../Cesium/Widgets/widgets.css';
import { ref } from "vue";
import { onMounted, onUnmounted } from "vue";
import * as Cesium from "cesium";
import "../../../../Cesium/Widgets/widgets.css";
// 引入拆分的组件
// import LeftDeviceStatus from '@/components/MineMonitor/LeftDeviceStatus.vue';
let viewer: Cesium.Viewer | null = null;
const active = ref(false);
// REM自适应配置
const REM_CONFIG = {
// 设计稿宽度
designWidth: 1920,
// 基准值：1rem = 100px
baseSize: 100
baseSize: 100,
};
/**
......@@ -33,43 +136,40 @@ const setRemUnit = () => {
};
// 控制左右模块显示状态的响应式变量
const isLeftModulesVisible = ref(true)
const isRightModulesVisible = ref(true)
const isLeftModulesVisible = ref(true);
const isRightModulesVisible = ref(true);
// 切换左侧模块显示状态
const toggleLeftModules = () => {
isLeftModulesVisible.value = !isLeftModulesVisible.value
}
isLeftModulesVisible.value = !isLeftModulesVisible.value;
};
// 切换右侧模块显示状态
const toggleRightModules = () => {
isRightModulesVisible.value = !isRightModulesVisible.value
}
isRightModulesVisible.value = !isRightModulesVisible.value;
};
// 切换两侧模块显示状态
const toggleBothModules = () => {
isLeftModulesVisible.value = !isLeftModulesVisible.value
isRightModulesVisible.value = !isRightModulesVisible.value
}
isLeftModulesVisible.value = !isLeftModulesVisible.value;
isRightModulesVisible.value = !isRightModulesVisible.value;
};
// 导入所需的图片资源
import arrowLeftImg from '@/assets/jinrun/arrow-left.png'
import arrowRightImg from '@/assets/jinrun/arrow-right.png'
import arrowLeftImg from "@/assets/jinrun/arrow-left.png";
import arrowRightImg from "@/assets/jinrun/arrow-right.png";
onMounted(() => {
// 配置Cesium资源路径
window.CESIUM_BASE_URL = '/Cesium';
window.CESIUM_BASE_URL = "/Cesium";
// 初始化REM自适应
setRemUnit();
// 监听窗口大小变化
window.addEventListener('resize', setRemUnit);
window.addEventListener("resize", setRemUnit);
// 初始化Cesium地图
viewer = new Cesium.Viewer('cesiumContainer', {
viewer = new Cesium.Viewer("cesiumContainer", {
// 禁用所有可能导致问题的组件
animation: false,
baseLayerPicker: false,
......@@ -86,12 +186,12 @@ onMounted(() => {
shadows: false,
terrainProvider: undefined,
requestRenderMode: true,
showRenderLoopErrors: false
showRenderLoopErrors: false,
});
// 隐藏Cesium版权信息
if (viewer?.cesiumWidget) {
viewer.cesiumWidget.creditContainer.style.display = 'none';
viewer.cesiumWidget.creditContainer.style.display = "none";
}
// 设置初始视角（中国区域）
......@@ -100,8 +200,8 @@ onMounted(() => {
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90.0),
roll: 0.0
}
roll: 0.0,
},
});
});
......@@ -113,140 +213,66 @@ onUnmounted(() => {
}
// 移除窗口大小变化监听
window.removeEventListener('resize', setRemUnit);
window.removeEventListener("resize", setRemUnit);
});
const navTo = () => {
window.location.href = '/home';
window.location.href = "/home";
};
</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">
.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,
.bottom,
......@@ -296,7 +322,7 @@ const navTo = () => {
width: 100%;
height: 0.4rem;
// height: 0.52rem;
background-image: url('@/assets/jinrun/bottom.png');
background-image: url("@/assets/jinrun/bottom.png");
background-size: contain;
}
.left {
......@@ -310,9 +336,7 @@ const navTo = () => {
background-size: contain;
background-position-x: left;
background-image: url('@/assets/jinrun/left.png');
background-image: url("@/assets/jinrun/left.png");
}
.right {
top: 0rem;
......@@ -324,21 +348,20 @@ const navTo = () => {
// height: 9.4rem;
height: 100vh;
background-image: url('@/assets/jinrun/right.png');
background-image: url("@/assets/jinrun/right.png");
background-size: contain;
background-position-x: right;
}
// 收起按钮样式
.toggle-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: .71rem;
width: 0.71rem;
height: 1.87rem;
// 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-repeat: no-repeat;
border-radius: 0 10px 10px 0;
......@@ -351,42 +374,37 @@ const navTo = () => {
&.left-toggle {
// left: 4.65rem; /* 与左侧模块宽度一致 */
left: 5.1rem; /* 与左侧模块宽度一致 */
background-image: url('@/assets/jinrun/toggle-left.png');
left: 4.9rem; /* 与左侧模块宽度一致 */
background-image: url("@/assets/jinrun/toggle-left.png");
}
&.left-toggle:hover {
background-image: url('@/assets/jinrun/toggle-left_click.png');
background-image: url("@/assets/jinrun/toggle-left_click.png");
}
&.right-toggle {
// right: 4.65rem;; /* 与右侧模块宽度一致 */
right: 5.1rem; /* 与左侧模块宽度一致 */
background-image: url('@/assets/jinrun/toggle-right.png');
right: 4.9rem; /* 与左侧模块宽度一致 */
background-image: url("@/assets/jinrun/toggle-right.png");
}
&.right-toggle:hover {
background-image: url('@/assets/jinrun/toggle-right_click.png');
background-image: url("@/assets/jinrun/toggle-right_click.png");
}
&.collapsed {
&.left-toggle {
left: .55rem;
left: 0.55rem;
border-radius: 0 10px 10px 0;
}
&.right-toggle {
right: .55rem;
right: 0.55rem;
border-radius: 10px 0 0 10px;
}
}
.btn-arrow1{
img{
.btn-arrow1 {
img {
width: 0.18rem;
// height: 0.21rem;
// margin-bottom:.1rem;
......@@ -402,7 +420,7 @@ const navTo = () => {
transition: transform 0.3s ease;
&::before {
content: '';
content: "";
position: absolute;
width: 2px;
height: 10px;
......@@ -449,7 +467,8 @@ const navTo = () => {
.slide-left-leave-to {
transform: translateX(-100%);
opacity: 0;
}‘
}
‘
// 右侧模块滑动动画
.slide-right-enter-active,
......@@ -467,40 +486,44 @@ const navTo = () => {
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;
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;
border-radius: 10px 0 0 10px;
background: pink;
}
.left-modules, .right-modules {
.left-modules,
.right-modules {
width: 4.6rem;
// background: pink;
// margin-top: .6rem;
padding-top: 1rem;
margin-left: 0.4rem;
position: absolute;
}
.left-modules{
.left-modules {
left: 0;
margin-left: 0.4rem;
}
.right-modules{
.right-modules {
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 = () => {
}
.cesiumcontainer_top {
background: url('/src/assets/bg_top.png') no-repeat;
background: url("/src/assets/bg_top.png") no-repeat;
background-size: 100% 100%;
height: 90px;
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