Skip to content

S
SatelliteDigital
提交 e00a0c56 authored 作者: 刘佳星-公司's avatar 刘佳星-公司
浏览文件
操作

最新的ui

上级 8b7268d4
显示空白字符变更
内嵌 并排
正在显示 包含 754 行增加 和 118 行删除
src/layout/index.vue
浏览文件 @ e00a0c56
...@@ -55,15 +55,15 @@ ...@@ -55,15 +55,15 @@
</div> </div>
<div class="right"> <div class="right">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="breadcrumb-container"> <!-- <div class="breadcrumb-container">
<el-breadcrumb separator=">"> <el-breadcrumb separator=">">
<el-breadcrumb-item v-for="(crumb, index) in breadcrumbs" :key="index"> <el-breadcrumb-item v-for="(crumb, index) in breadcrumbs" :key="index">
{{ crumb.name }} {{ crumb.name }}
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div> -->
<!-- 标签页 --> <!-- 标签页 -->
<div class="tabs-container"> <div class="tabs-container" v-show="tabShow">
<el-tabs v-model="activeTabKey" closable @tab-remove="removeTab" @tab-click="handleTabClick" <el-tabs v-model="activeTabKey" closable @tab-remove="removeTab" @tab-click="handleTabClick"
class="custom-tabs"> class="custom-tabs">
<el-tab-pane v-for="tab in tabs" :key="tab.key" :label="tab.label" :name="tab.key"> <el-tab-pane v-for="tab in tabs" :key="tab.key" :label="tab.label" :name="tab.key">
...@@ -316,6 +316,11 @@ const removeTab = (key) => { ...@@ -316,6 +316,11 @@ const removeTab = (key) => {
// 标签页点击处理 // 标签页点击处理
const handleTabClick = (tab) => { const handleTabClick = (tab) => {
const tabItem = tabs.value.find(item => item.key === tab.paneName); const tabItem = tabs.value.find(item => item.key === tab.paneName);
if (tabItem.path == '/dashboard/analysis') {
tabShow.value = false
} else {
tabShow.value = true
}
if (tabItem) { if (tabItem) {
router.push(tabItem.path); router.push(tabItem.path);
} }
...@@ -326,9 +331,14 @@ const toggleSubMenu = (index) => { ...@@ -326,9 +331,14 @@ const toggleSubMenu = (index) => {
openMenus.value[index] = !openMenus.value[index]; openMenus.value[index] = !openMenus.value[index];
saveMenuState(); saveMenuState();
}; };
// 子菜单项点击处理 // 子菜单项点击处理
const handleSubMenuClick = (child) => { const handleSubMenuClick = (child) => {
console.log(child.path, '路径');
if (child.path == '/dashboard/analysis') {
tabShow.value = false
} else {
tabShow.value = true
}
useAppStoreInstance.num = child.path; useAppStoreInstance.num = child.path;
localStorage.setItem('menu', child.path); localStorage.setItem('menu', child.path);
router.push(child.path); router.push(child.path);
...@@ -367,9 +377,15 @@ const curUserLogout = () => { ...@@ -367,9 +377,15 @@ const curUserLogout = () => {
const showavatarUrl = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'); const showavatarUrl = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png');
const tabShow = ref(true)
// 初始化 // 初始化
onMounted(() => { onMounted(() => {
console.log(route.path, '路由');
if (route.path == '/dashboard/analysis') {
tabShow.value = false
} else {
tabShow.value = true
}
nextTick(() => { nextTick(() => {
useAppStoreInstance.initavatarUrlFn() useAppStoreInstance.initavatarUrlFn()
}) })
...@@ -395,8 +411,8 @@ onMounted(() => { ...@@ -395,8 +411,8 @@ onMounted(() => {
} }
// console.log("currentDisplayPath.value--------------------------",isPathInMenu(route.path)) // console.log("currentDisplayPath.value--------------------------",isPathInMenu(route.path))
if (!isPathInMenu(route.path)) { if (!isPathInMenu(route.path)) {
console.log("currentDisplayPath.value--------------------------", isPathInMenu(route.path), getCurrentValidPath(), JSON.parse(localStorage.getItem('menuState')).lastValidMenuPath) console.log("currentDisplayPath.value--------------------------", isPathInMenu(route.path), getCurrentValidPath(), JSON.parse(localStorage.getItem('menuState'))?.lastValidMenuPath)
router.replace(JSON.parse(localStorage.getItem('menuState')).lastValidMenuPath); router.replace(JSON.parse(localStorage.getItem('menuState'))?.lastValidMenuPath);
} }
// console.log("currentDisplayPath.value--------------------------",isPathInMenu(route.path),getCurrentValidPath()) // console.log("currentDisplayPath.value--------------------------",isPathInMenu(route.path),getCurrentValidPath())
initTabs(); initTabs();
...@@ -775,8 +791,9 @@ watch(route, () => { ...@@ -775,8 +791,9 @@ watch(route, () => {
color: #ffffff; color: #ffffff;
/* padding-left: 15px; */ /* padding-left: 15px; */
padding: 10px; padding: 10px;
background: linear-gradient(360deg, rgba(72, 71, 82, 0.25) 0%, rgba(72, 71, 82, 0) 65%); /* background: linear-gradient(360deg, rgba(72, 71, 82, 0.25) 0%, rgba(72, 71, 82, 0) 65%); */
/* border-bottom: 1px solid rgb(180, 178, 178); */ /* border-bottom: 1px solid rgb(180, 178, 178); */
background-color: #2d2d34;
} }
.el-breadcrumb { .el-breadcrumb {
...@@ -822,11 +839,15 @@ watch(route, () => { ...@@ -822,11 +839,15 @@ watch(route, () => {
/* background-color: #ffffff; */ /* background-color: #ffffff; */
/* background: linear-gradient(360deg, rgba(72, 71, 82, 0.25) 0%, rgba(72, 71, 82, 0) 65%); */ /* background: linear-gradient(360deg, rgba(72, 71, 82, 0.25) 0%, rgba(72, 71, 82, 0) 65%); */
background-color: #1e1e1e; background-color: #1e1e1e;
padding: 2px 5px; /* padding: 2px 5px; */
padding-left: 10px;
background: linear-gradient(0deg, #2c2c33 0%, #252529 100%);
} }
:deep() .el-tabs .el-tabs__header { :deep() .el-tabs .el-tabs__header {
margin: 0 0 5px !important; margin: 0 0 0px !important;
/* background: linear-gradient(0deg, #2c2c33 0%, #252529 100%); */
} }
:deep() .tabs-container .el-tabs__nav-wrap::after { :deep() .tabs-container .el-tabs__nav-wrap::after {
......
src/views/areafiremanage/historyfire/index.vue
浏览文件 @ e00a0c56
...@@ -5,16 +5,19 @@ ...@@ -5,16 +5,19 @@
<!-- 左侧区域 --> <!-- 左侧区域 -->
<div class="left-section"> <div class="left-section">
<!-- 左侧上部分 --> <!-- 左侧上部分 -->
<!-- 左侧下部分：统计区域 --> <!-- 左侧下部分：统计区域 -->
<div class="info-card stats-alerts"> <div class="info-card stats-alerts">
<div class="card-tong card-show"> <!-- <div class="card-tong card-show">
<currentFire :currentFireData="currentFireData"></currentFire> <currentFire :currentFireData="currentFireData"></currentFire>
</div> </div>
<div class="card-tong"> <div class="card-tong">
</div> -->
<div>
<div>输入框</div>
<div>按钮</div>
<div>归档</div>
</div> </div>
<div>列表</div>
</div> </div>
</div> </div>
...@@ -154,7 +157,7 @@ watch(route, () => { ...@@ -154,7 +157,7 @@ watch(route, () => {
.main-content { .main-content {
display: flex; display: flex;
gap: var(--card-spacing); gap: var(--card-spacing);
padding: 0.4rem 0; /* padding: 0.4rem 0; */
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -177,8 +180,8 @@ watch(route, () => { ...@@ -177,8 +180,8 @@ watch(route, () => {
/* 通用卡片样式 */ /* 通用卡片样式 */
.info-card { .info-card {
background-color: #fff; /* background-color: #fff; */
padding: 1rem; /* padding: 1rem; */
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
overflow: hidden; overflow: hidden;
...@@ -249,10 +252,11 @@ watch(route, () => { ...@@ -249,10 +252,11 @@ watch(route, () => {
/* 统计区域卡片 */ /* 统计区域卡片 */
.stats-alerts { .stats-alerts {
display: flex; /* display: flex; */
gap: 1rem; gap: 1rem;
border-radius: 8px; /* border-radius: 8px; */
height: 79.5%; height: calc(100vh - 150px);
border: 1px solid red;
} }
......
src/views/dashboard/analysis/index.vue
浏览文件 @ e00a0c56
...@@ -7,10 +7,14 @@ ...@@ -7,10 +7,14 @@
<!-- 左侧上部分 --> <!-- 左侧上部分 -->
<div class="left-top"> <div class="left-top">
<!-- 区域信息概览 --> <!-- 区域信息概览 -->
<div class="info-card region-overview">
<div class="card-header"> <div class="card-header">
<h2>区域信息概览</h2> <div class="headTitle">区域概览--阳光城市花园</div>
<div class="titleR">
<img src="../../../static/ui/quan.png" class="titleRImg" alt="">
<div>刷新</div>
</div> </div>
</div>
<!-- <div class="info-card region-overview">
<div class="info-grid"> <div class="info-grid">
<div class="info-item" v-for="(item, index) in OverviewRegionalInformation" :key="index"> <div class="info-item" v-for="(item, index) in OverviewRegionalInformation" :key="index">
<span class="label">{{ item.label }}:</span> <span class="label">{{ item.label }}:</span>
...@@ -18,7 +22,7 @@ ...@@ -18,7 +22,7 @@
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div> -->
<!-- 区域地图 --> <!-- 区域地图 -->
<div class="info-card region-map"> <div class="info-card region-map">
...@@ -28,19 +32,42 @@ ...@@ -28,19 +32,42 @@
<!-- 左侧下部分：历史火情统计 --> <!-- 左侧下部分：历史火情统计 -->
<div class="info-card stats-alerts"> <div class="info-card stats-alerts">
<div class="card-tabs"> <!-- <div class="card-tabs">
<span class="tab-btn">历史火情统计</span> <span class="tab-btn">历史火情统计</span>
</div> -->
<div class="card-header">
<div>历史火情统计</div>
<div class="titleR">
<div class="timeQiehuan">
<div class="time0" :class="timeNum == 1 ? 'timeActive' : ''" @click="timeChange(1)">近30天</div>
<div class="time0 bor" :class="timeNum == 2 ? 'timeActive' : ''" @click="timeChange(2)">近3个月</div>
<div class="time0" :class="timeNum == 3 ? 'timeActive' : ''" @click="timeChange(3)">近一年</div>
</div>
<img src="../../../static/ui/yan.png" class="titleRImg1" alt="">
<div>更多</div>
</div>
</div> </div>
<div class="tab-content history-stats"> <div class="tab-content history-stats">
<div class="time-filter"> <!-- <div class="time-filter">
<el-select v-model="historyFireSelectTime" placeholder="选择数据查看范围" style="width: 240px" <el-select v-model="historyFireSelectTime" placeholder="选择数据查看范围" style="width: 240px"
class="filter-select" @change="historyFireSelectTimeFn"> class="filter-select" @change="historyFireSelectTimeFn">
<el-option v-for="item in historyFireTimeData" :key="item.value" :label="item.label" <el-option v-for="item in historyFireTimeData" :key="item.value" :label="item.label"
:value="item.value" /> :value="item.value" />
</el-select> </el-select>
</div> </div> -->
<div class="chart-container"> <div class="chart-container">
<div class="main4Title" style="margin-top: 10px;width: 80%;margin: 0 auto;">
<div>火情登记分布</div>
<img src="../../../static/ui/leftTop.png" class="imgposition" alt="">
</div>
<div id="echarts0" class="chart"></div>
</div>
<div class="chart-container1">
<div class="main4Title" style="margin-top: 10px;width: 90%;margin: 0 auto;">
<div>火情趋势图</div>
<img src="../../../static/ui/leftTop.png" class="imgposition" alt="">
</div>
<div id="historyChart" class="chart"></div> <div id="historyChart" class="chart"></div>
</div> </div>
</div> </div>
...@@ -50,50 +77,80 @@ ...@@ -50,50 +77,80 @@
<!-- 右侧区域 --> <!-- 右侧区域 -->
<div class="right-section"> <div class="right-section">
<div class="info-card current-situation"> <div class="info-card current-situation">
<div class="card-header "> <div class="card-headers">
<h2> <img class="icon-fire-red" src="../../static/image/huo.png" alt="">当前火情</h2> <div class="headTitle">火情告警</div>
<span><el-button type="warning" circle style="color: red;">紧急</el-button></span> <div class="titleR">
<img src="../../../static/ui/yan.png" class="titleRImg1" alt="">
<div>更多</div>
</div> </div>
</div>
<div class="situation-list"> <div class="situationMain">
<!-- 火情项目 --> <!-- 火情告警 -->
<div class="situation-item " :class="index === 0 ? 'emergency' : ''" <div style="width: 100%;height: 100%;overflow-y: auto;z-index: 11;">
<div class="situation-item"
:class="item.isXFOk ? 'jiechu' : item.severity == 1 ? 'oneji' : item.severity == 2 ? 'twoji' : item.severity == 3 ? 'threeji' : ''"
v-for="(item, index) in currentFireData" :key="index"> v-for="(item, index) in currentFireData" :key="index">
<div class="itemtop">
<div class="situation-content"> <div style="display: flex;">
<p><img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span <div class="itemtop0 onejiColor"
class="location">{{ item.location }}</span></p> :class="item.severity == 1 ? 'onejiColor' : item.severity == 2 ? 'twojiColor' : item.severity == 3 ? 'threejiColor' : ''">
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="severity">{{ <img v-if="item.severity == 3" src="../../../static/ui/huo1.png" class="itemimg" alt="">
item.severity}}</span></p> <img v-else src="../../../static/ui/huo0.png" class="itemimg" alt="">
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span <div :style="{ color: item.severity == 3 ? '#000000' : '#ffffff' }">{{ item.severity == 1 ? '一级' :
:class="item.isXFOk ? 'isXFOk' : 'isXFNotOk'">{{ item.status }}</span></p> item.severity == 2 ? '二级' : item.severity == 3 ? '三级' : '' }}
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="time">{{ </div>
item.time}}</span></p> </div>
<div class="itemtop0 itemjiechu">已解除</div>
</div>
<div style="color: #ffffff;">{{ item.time }}</div>
</div>
<div>
<div style="display: flex;align-items: center;">
<img class="itemimgs" src="../../../static/ui/dingwei.png" alt="">
<div>{{ item.location }}</div>
</div>
<div style="display: flex;align-items: center;margin-top: 5px;">
<img class="itemimgs" src="../../../static/ui/zhuangtai.png" alt="">
<div>{{ item.status }}</div>
</div>
<div style="display: flex;align-items: center;margin-top: 5px;">
<img class="itemimgs" src="../../../static/ui/renyaun.png" alt="">
<div>{{ item.personnel }}</div>
</div>
<div style="display: flex;align-items: center;margin-top: 5px;">
<img class="itemimgs" src="../../../static/ui/wurenji.png" alt="">
<div>{{ item.drone }}</div>
</div>
</div>
<div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="info-card current-situation1"> <div class="info-card current-situation1">
<div class="card-header"> <div class="card-headers">
<h2>传感器报警</h2> <div class="headTitle">火情告警</div>
<span><el-button type="warning" circle>紧急</el-button></span> <div class="titleR">
<img src="../../../static/ui/yan.png" class="titleRImg1" alt="">
<div>更多</div>
</div> </div>
<div class="situation-list">
<!-- 火情项目 -->
<div class="situation-item " :class="sensorFireBorderColor[item.fireLevel]"
v-for="(item, index) in currentFireData" :key="index">
<div class="situation-content">
<p><img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span
class="location">{{ item.location }}</span></p>
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="severity">{{
item.severity}}</span></p>
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span
class="status">{{ item.status }}</span></p>
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="time">{{
item.time}}</span></p>
</div> </div>
<div class="situationMain">
<div class="main4Title">
<div>设备使用情况</div>
<img src="../../../static/ui/leftTop.png" class="imgposition" alt="">
</div>
<div>
<div id="echats3"></div>
</div>
<div class="main4Title" style="margin-top: 10px;">
<div>设备状态</div>
<img src="../../../static/ui/leftTop.png" class="imgposition" alt="">
</div>
<div>
<div id="echats4"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -106,8 +163,11 @@ ...@@ -106,8 +163,11 @@
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { ref, onMounted, nextTick, reactive, onUnmounted, watchEffect } from 'vue'; import { ref, onMounted, nextTick, reactive, onUnmounted, watchEffect } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
// 初始化设置历史火情统计的图标天数
const timeNum = ref(1)
const timeChange = (val) => {
timeNum.value = val
}
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
// 响应式高度配置，方便统一修改 // 响应式高度配置，方便统一修改
...@@ -150,10 +210,42 @@ const historyFireTimeData = ref([ ...@@ -150,10 +210,42 @@ const historyFireTimeData = ref([
// 定义一个响应式变量currentFireData，存储火灾数据 // 定义一个响应式变量currentFireData，存储火灾数据
const currentFireData = ref([ const currentFireData = ref([
{ location: "红色 四单元 七号搂 3楼", severity: "四级 (大规模)", status: "消防人员已到达现场", time: "2025年8月7日 11:14 发现", fireLevel: 0, isXFOk: false }, {
{ location: "金色家园小区 三单元 七号搂 3楼", severity: "三级 (大规模)", status: "消防人员未到达现场", time: "2025年8月5日 11:14 发现", fireLevel: 1, isXFOk: true }, severity: 1,//级别
{ location: "金色家园小区 四单元 七号搂 3楼", severity: "四级 (大规模)", status: "消防人员已到达现场", time: "2025年8月7日 11:14 发现", fireLevel: 0, isXFOk: false }, time: "2025-8-7 11:14:36",
{ location: "金色家园小区 三单元 七号搂 3楼", severity: "三级 (大规模)", status: "消防人员未到达现场", time: "2025年8月5日 11:14 发现", fireLevel: 2, isXFOk: true }, location: "红色 四单元 七号搂 3楼",//位置
status: "消防人员已到达现场",//状态
personnel: '刘诗涵',//人员
drone: 'DR569',//无人机编号
isXFOk: false,//是否已解除
},
{
severity: 2,//级别
time: "2025-8-7 11:14:36",
location: "红色 四单元 七号搂 3楼",//位置
status: "消防人员已到达现场",//状态
personnel: '刘诗涵',//人员
drone: 'DR569',//无人机编号
isXFOk: false,//是否已解除
},
{
severity: 3,//级别
time: "2025-8-7 11:14:36",
location: "红色 四单元 七号搂 3楼",//位置
status: "消防人员已到达现场",//状态
personnel: '刘诗涵',//人员
drone: 'DR569',//无人机编号
isXFOk: false,//是否已解除
},
{
severity: 2,//级别
time: "2025-8-7 11:14:36",
location: "红色 四单元 七号搂 3楼",//位置
status: "消防人员已到达现场",//状态
personnel: '刘诗涵',//人员
drone: 'DR569',//无人机编号
isXFOk: true,//是否已解除
},
]); ]);
// 定义一个响应式变量，用来存储火警的边框颜色 // 定义一个响应式变量，用来存储火警的边框颜色
...@@ -161,11 +253,112 @@ const sensorFireBorderColor = ref(["fireover", "firewarning", "fireemergency"]); ...@@ -161,11 +253,112 @@ const sensorFireBorderColor = ref(["fireover", "firewarning", "fireemergency"]);
const historyFireSelectTimeFn = () => { const historyFireSelectTimeFn = () => {
console.log(historyFireSelectTime.value); console.log(historyFireSelectTime.value);
}; };
// 火情登记分布
// 图表实例 let chart0Instance = null;
const initChart0 = () => {
nextTick(() => { // 确保DOM渲染完成
const chartDom = document.getElementById('echarts0');
if (!chartDom) return;
// 销毁已有实例避免内存泄漏
if (chart0Instance) chart0Instance.dispose();
chart0Instance = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'item'
},
legend: {
// orient: "vertical",
top: '75%',
// right: '0%',
// left: '60%',
textStyle: { //图例文字的样式
color: '#ffffff',
// fontSize: 14,
rich: {
a: { fontSize: 20, color: '#ffffff' }, // 自定义样式
b: { fontSize: 12 }
}
},
data: ['一级', '二级', '三级'],
formatter: function (name) {
// 根据不同的名称返回不同的样式
switch (name) {
case '一级':
return `${name} {a|20}`; // 大号字体
case '二级':
return `${name} {a|2}`; // 大号字体
case '三级':
return `${name} {a|8}`; // 大号字体
}
}
},
series: [
{
name: '火情登记',
detail: {
// 调节数字位置
offsetCenter: [-1, 12],
color: '#fff',
fontSize: '22px'
},
type: 'pie',
radius: ['45%', '60%'],
center: ['50%', '40%'],
avoidLabelOverlap: false,
itemStyle: {
// borderRadius: 10,
borderColor: 'transparent',
borderWidth: 5
},
label: {
show: true,
name: 'asas',
position: 'center'
},
// emphasis: {//聚焦
// label: {
// show: true,
// fontSize: 14,
// fontWeight: 'bold'
// }
// },
// labelLine: {
// show: true
// },
color: ['red', '#faac53', '#ffcc24'],
data: [
{ value: 20, name: '一级' },
{ value: 40, name: '二级' },
{ value: 40, name: '三级' },
]
}
]
};
chart0Instance.on('click', function (params) {
// 获取到点击的点的相关信息，再跳转到详情页的时候传递过去
// console.log("--------------333333333333-------------",params.name,params.value);
// router.push({
// path: '/fireManage',
// query: { taskId: params.name }
// })
// useAppStoreInstance.num = 4
});
chart0Instance.setOption(option);
// 窗口大小变化时重绘图表
const resizeHandler = () => {
chart0Instance.resize();
};
window.addEventListener('resize', resizeHandler);
// 组件卸载时清理
onUnmounted(() => {
window.removeEventListener('resize', resizeHandler);
chartInstance.dispose();
});
});
};
// 火情趋势图
let chartInstance = null; let chartInstance = null;
const initChart2 = () => {
const initFireHistoryChart = () => {
nextTick(() => { // 确保DOM渲染完成 nextTick(() => { // 确保DOM渲染完成
const chartDom = document.getElementById('historyChart'); const chartDom = document.getElementById('historyChart');
if (!chartDom) return; if (!chartDom) return;
...@@ -233,13 +426,220 @@ const initFireHistoryChart = () => { ...@@ -233,13 +426,220 @@ const initFireHistoryChart = () => {
}); });
}); });
}; };
// 设备使用情况
let chart3Instance = null;
const initChart3 = () => {
nextTick(() => { // 确保DOM渲染完成
const chartDom = document.getElementById('echats3');
if (!chartDom) return;
// 销毁已有实例避免内存泄漏
if (chart3Instance) chart3Instance.dispose();
chart3Instance = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: "vertical",
top: '20%',
// right: '0%',
left: '40%',
textStyle: { //图例文字的样式
color: '#ffffff',
// fontSize: 14,
rich: {
a: { fontSize: 20, color: '#ffffff' }, // 自定义样式
b: { fontSize: 12 }
}
},
data: ['无人机总数', '飞行中', '空闲'],
formatter: function (name) {
// 根据不同的名称返回不同的样式
switch (name) {
case '无人机总数':
return `${name} {a|20}`; // 大号字体
case '空闲':
return `${name} {a|2}`; // 大号字体
case '飞行中':
return `${name} {a|8}`; // 大号字体
}
}
},
series: [
{
name: '无人机总数',
detail: {
// 调节数字位置
offsetCenter: [-1, 12],
color: '#fff',
fontSize: '22px'
},
type: 'pie',
radius: ['45%', '60%'],
center: ['20%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
// borderRadius: 10,
borderColor: 'transparent',
borderWidth: 5
},
label: {
show: true,
name: 'asas',
position: 'center'
},
// emphasis: {//聚焦
// label: {
// show: true,
// fontSize: 14,
// fontWeight: 'bold'
// }
// },
// labelLine: {
// show: true
// },
color: ['#636367', '#c7e9ff'],
data: [
{ value: 20, name: '空闲' },
{ value: 80, name: '飞行中' },
]
}
]
};
chart3Instance.on('click', function (params) {
// router.push({
// path: '/fireManage',
// query: { taskId: params.name }
// })
// useAppStoreInstance.num = 4
});
chart3Instance.setOption(option);
// 窗口大小变化时重绘图表
window.addEventListener('resize', resizeHandler);
});
};
//设备状态
let chart4Instance = null;
const initChart4 = () => {
nextTick(() => { // 确保DOM渲染完成
const chartDom = document.getElementById('echats4');
if (!chartDom) return;
// 销毁已有实例避免内存泄漏
if (chart4Instance) chart4Instance.dispose();
chart4Instance = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
orient: "vertical",
top: '60%',
// right: '0%',
left: '25%',
textStyle: { //图例文字的样式
color: '#ffffff',
// fontSize: 14,
rich: {
a: { fontSize: 20, color: '#ffffff' }, // 自定义样式
b: { fontSize: 12 }
}
},
data: ['正常', '维护', '故障'],
},
grid: {
left: 60,
},
xAxis: {
type: 'value',
axisLine: { show: false },
axisTick: { show: false },
splitLine: { show: false },
},
yAxis: {
type: 'category',
axisLine: { show: false },
axisTick: { show: false },
splitLine: { show: false },
data: ['设备状态']
},
series: [
{
name: '正常',
type: 'bar',
barWidth: 10,
stack: 'total',
emphasis: {
focus: 'series'
},
data: [320]
},
{
name: '维护',
type: 'bar',
barWidth: 10,
stack: 'total',
emphasis: {
focus: 'series'
},
data: [120,]
},
{
name: '故障',
type: 'bar',
stack: 'total',
barWidth: 10,
emphasis: {
focus: 'series'
},
data: [220]
},
]
};
chart4Instance.on('click', function (params) {
});
chart4Instance.setOption(option);
// 窗口大小变化时重绘图表
window.addEventListener('resize', resizeHandler);
});
};
const resizeHandler = () => {
if (chart3Instance) {
chart3Instance.resize();
}
if (chartInstance) {
chartInstance.resize();
}
if (chart4Instance) {
chart4Instance.resize();
}
};
// 挂载时初始化 // 挂载时初始化
onMounted(() => { onMounted(() => {
initFireHistoryChart(); initChart0();
initChart2();
initChart3();
initChart4();
});
// 组件卸载时清理
onUnmounted(() => {
window.removeEventListener('resize', resizeHandler);
if (chart3Instance) {
chart3Instance.dispose();
}
if (chartInstance) {
chartInstance.dispose();
}
if (chart4Instance) {
chart4Instance.dispose();
}
}); });
...@@ -258,7 +658,7 @@ onMounted(() => { ...@@ -258,7 +658,7 @@ onMounted(() => {
.main-content { .main-content {
display: flex; display: flex;
gap: var(--card-spacing); gap: var(--card-spacing);
padding: 0.4rem 0; /* padding: 0.4rem 0; */
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
...@@ -267,7 +667,7 @@ onMounted(() => { ...@@ -267,7 +667,7 @@ onMounted(() => {
/* 左侧区域样式 */ /* 左侧区域样式 */
.left-section { .left-section {
/* background-color: #10b981; */ /* background-color: #10b981; */
flex: 2; flex: 3;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--card-spacing); gap: var(--card-spacing);
...@@ -276,18 +676,19 @@ onMounted(() => { ...@@ -276,18 +676,19 @@ onMounted(() => {
} }
.left-top { .left-top {
display: flex; /* display: flex; */
gap: var(--card-spacing); gap: var(--card-spacing);
height: 39%; height: calc(60vh - 106px);
flex-shrink: 0; flex-shrink: 0;
background-color: #2d2d34;
} }
/* 卡片通用样式 - 核心优化 */ /* 卡片通用样式 - 核心优化 */
.info-card { .info-card {
background-color: rgb(255, 255, 255); background-color: #2d2d34;
border-radius: 8px; /* border-radius: 8px; */
padding: 1rem; /* padding: 1rem; */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
...@@ -297,22 +698,50 @@ onMounted(() => { ...@@ -297,22 +698,50 @@ onMounted(() => {
} }
.info-card:hover { .info-card:hover {
transform: translateY(2px); /* transform: translateY(2px); */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); */
} }
/* 卡片头部 */ /* 卡片头部 */
.card-header { .card-header {
color: #ffffff;
padding-left: 20px;
position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid #f1f1f1; /* border-bottom: 1px solid #f1f1f1; */
margin-bottom: 1rem; /* margin-bottom: 1rem; */
height: var(--header-height); height: 50px;
width: 100%;
background-image: url(../../../static/ui/long.png);
background-repeat: no-repeat;
background-size: 100% 100%;
/* height: var(--header-height); */
/* flex-shrink: 0; */ /* flex-shrink: 0; */
} }
.card-headers {
color: #ffffff;
padding-left: 20px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
width: 100%;
background-image: url(../../../static/ui/samrt.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* 标题 */
.headTitle {
font-size: 16px;
font-weight: 600;
}
.card-header1 { .card-header1 {
background-color: #e29393; background-color: #e29393;
} }
...@@ -364,7 +793,7 @@ onMounted(() => { ...@@ -364,7 +793,7 @@ onMounted(() => {
} }
.info-item:hover { .info-item:hover {
transform: translateX(4px); /* transform: translateX(4px); */
} }
.info-item:last-child { .info-item:last-child {
...@@ -384,7 +813,8 @@ onMounted(() => { ...@@ -384,7 +813,8 @@ onMounted(() => {
/* 区域地图 */ /* 区域地图 */
.region-map { .region-map {
flex: 2; flex: 2;
padding: 0; padding: 20px;
height: calc(100% - 50px);
} }
.map-image { .map-image {
...@@ -395,63 +825,74 @@ onMounted(() => { ...@@ -395,63 +825,74 @@ onMounted(() => {
.map-image:hover { .map-image:hover {
transform: translateY(4px); /* transform: translateY(4px); */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
} }
/* 历史火情统计 */ /* 历史火情统计 */
.stats-alerts { .stats-alerts {
height: 38.5%; height: 39vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.card-tabs { /* .card-tabs {
display: flex; display: flex;
border-bottom: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1;
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 1.2rem; font-size: 1.2rem;
color: #1e40af; color: #1e40af;
} } */
.tab-content { .tab-content {
display: flex; /* display: flex;
flex-direction: column; flex-direction: column; */
/* height: 100%; */ /* height: 100%; */
} }
.history-stats { .history-stats {
display: flex; display: flex;
flex-direction: column; /* flex-direction: column; */
height: calc(100% - 50px);
padding-top: 20px;
} }
.time-filter { .time-filter {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
margin-bottom: 1rem; margin: 0.5rem 0 1rem 1rem;
flex-shrink: 0; flex-shrink: 0;
} }
/* 图表容器 - 自适应高度 */ /* 图表容器 - 自适应高度 */
.chart-container { .chart-container {
color: #ffffff;
width: 30%;
position: relative;
/* min-height: var(--chart-min-height); */
height: 100%;
}
width: 100%; .chart-container1 {
color: #ffffff;
width: 70%;
position: relative; position: relative;
min-height: var(--chart-min-height); /* min-height: var(--chart-min-height); */
height: 100%;
} }
.chart { .chart {
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
position: absolute; /* position: absolute;
top: 0; top: 0;
left: 0; left: 0; */
} }
/* 右侧区域样式 */ /* 右侧区域样式 */
...@@ -460,43 +901,54 @@ onMounted(() => { ...@@ -460,43 +901,54 @@ onMounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--card-spacing); gap: var(--card-spacing);
height: 79%; /* height: calc(100vh - 100px); */
overflow: hidden; overflow: hidden;
} }
/* 右侧卡片 - 使用flex布局自动分配高度 */ /* 右侧卡片 - 使用flex布局自动分配高度 */
.current-situation, .current-situation {
.current-situation1 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(60vh - 106px);
}
.current-situation1 {
display: flex;
flex-direction: column;
height: 39vh;
} }
/* 火情列表 */ /* 火情列表 */
.situation-list { .situation-list {
display: flex; /* display: flex;
flex-direction: column; flex-direction: column; */
gap: 0.5rem; /* gap: 0.5rem; */
/* flex-grow: 1; */
/* padding-right: 5px; */
height: 100%;
}
.situationMain {
overflow-y: auto; overflow-y: auto;
flex-grow: 1; padding: 20px 20px 10px 20px;
padding-right: 5px; height: calc(100% - 50px);
color: #ffffff;
/* box-shadow: inset 0 -20px rgba(0, 0, 0, 1); */
/* box-shadow: 2px 0 5px rgba(0, 0, 0, 1); */
} }
/* 火情项目样式 */ /* 火情项目样式 */
.situation-item { .situation-item {
display: flex; height: 200px;
gap: 1rem; margin-bottom: 10px;
padding: 0.9rem; padding: 0px 20px;
border-radius: 6px; color: #ffffff;
background-color: #f9f9f9; z-index: 10;
border-left: 4px solid transparent;
transition: transform 0.2s ease;
border-left: #fc0000 4px solid;
} }
.situation-item:hover { .situation-item:hover {
transform: translateX(4px); /* transform: translateX(4px); */
} }
.fireover { .fireover {
...@@ -523,6 +975,7 @@ onMounted(() => { ...@@ -523,6 +975,7 @@ onMounted(() => {
.emergency { .emergency {
position: sticky; position: sticky;
/*//固定在某个位置 */
top: 0; top: 0;
z-index: 100; z-index: 100;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
...@@ -613,4 +1066,161 @@ onMounted(() => { ...@@ -613,4 +1066,161 @@ onMounted(() => {
font-size: 0.85rem; font-size: 0.85rem;
} }
} }
.titleR {
margin-right: 10px;
display: flex;
align-items: center;
cursor: pointer;
font-size: 14px;
}
.titleRImg {
width: 15px;
height: 15px;
margin-right: 10px;
}
.titleRImg1 {
width: 20px;
height: 15px;
margin-right: 5px;
}
.timeQiehuan {
display: flex;
align-items: center;
border: 1px solid #5c54c5;
border-radius: 5px;
margin-right: 10px;
}
.time0 {
width: 60px;
padding: 2px 0px;
text-align: center;
color: #5c54c5;
}
.timeActive {
background-color: #5c54c5;
color: #ffffff;
}
.bor {
border-left: 1px solid #5c54c5;
border-right: 1px solid #5c54c5;
}
/* 火情告警 */
/* 火情解除 */
.jiechu {
background-image: url(../../../static/ui/jiechu.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.oneji {
background-image: url(../../../static/ui/oneji.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.onejiColor {
background: linear-gradient(to right, #fe473e 40%, #df2d39 100%);
}
.twojiColor {
background: linear-gradient(to right, #f08f20 40%, #e56b00 100%);
}
.threejiColor {
background: linear-gradient(to right, #ffe263 40%, #ffcc25 100%);
}
.jiechuColor {
background-color: red !important;
}
.twoji {
background-image: url(../../../static/ui/twoji.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.threeji {
background-image: url(../../../static/ui/threeji.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.itemtop {
display: flex;
justify-content: space-between;
border-bottom: 1px dashed #4d4642;
align-items: center;
margin-bottom: 5px;
}
.itemtop0 {
margin: 10px 0;
width: 65px;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 14px;
color: #ffffff;
border-radius: 3px;
padding: 2px 5px;
cursor: pointer;
}
.itemjiechu {
border: 1px solid #37ba6d;
color: #37ba6d;
margin-left: 10px;
}
.itemimg {
width: 13px;
height: 18px;
}
.itemimgs {
width: 30px;
height: 30px;
margin-right: 10px;
}
/* 设备使用情况 */
#echats3 {
width: 100%;
height: 150px;
color: #ffffff !important;
}
.main4Title {
background-color: #3a3a3e;
font-size: 14px;
padding: 5px;
position: relative;
margin-bottom: 5px;
}
.imgposition {
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 5px;
}
/* 设备状况 */
#echats4 {
width: 100%;
height: 50px;
color: #ffffff !important;
}
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论