From e1d380a930e73d8355a4695ca5f5b91f471c2394 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Mon, 28 Apr 2025 13:32:12 +0800
Subject: [PATCH] 修改大屏
---
src/views/hazardousChemicals/bigScreen/index.vue | 17 +++-
src/views/hazardousChemicals/bigScreen/components/midTop.vue | 44 ++++++----
src/views/hazardousChemicals/bigScreen/components/midTop2.vue | 115 +++++++++++++++++-----------
src/views/hazardousChemicals/bigScreen/components/midBottom.vue | 46 +++++++----
4 files changed, 138 insertions(+), 84 deletions(-)
diff --git a/src/views/hazardousChemicals/bigScreen/components/midBottom.vue b/src/views/hazardousChemicals/bigScreen/components/midBottom.vue
index 7f9b1f3..8062e73 100644
--- a/src/views/hazardousChemicals/bigScreen/components/midBottom.vue
+++ b/src/views/hazardousChemicals/bigScreen/components/midBottom.vue
@@ -1,12 +1,13 @@
<template>
<div class="charts-container">
- <div id="preWarning"></div>
+<!-- <div id="preWarning"></div>-->
<div class="table-wrapper">
<table class="scrollable-table">
<thead>
<tr>
- <th>预警信息</th>
- <th>预警时间</th>
+ <th>企业名称</th>
+ <th>预警情况</th>
+ <th>分类</th>
</tr>
</thead>
</table>
@@ -15,12 +16,14 @@
<table class="scrollable-table">
<tbody>
<tr v-for="(item,index) in warningData" :key="item.id">
- <td>{{ item.warningInfo }}</td>
- <td>{{ item.warningTime }}</td>
+ <td>{{ item.name }}</td>
+ <td>{{ item.info }}</td>
+ <td :class="{'red': item.type == '红色','yellow': item.type == '黄色','blue': item.type == '蓝色'}">{{ item.type }}</td>
</tr>
<tr v-for="(item,index) in loopData" :key="`loop-${item.id}`">
- <td>{{ item.warningInfo }}</td>
- <td>{{ item.warningTime }}</td>
+ <td>{{ item.name }}</td>
+ <td>{{ item.info }}</td>
+ <td :class="{'red': item.type == '红色','yellow': item.type == '黄色','blue': item.type == '蓝色'}">{{ item.type }}</td>
</tr>
</tbody>
</table>
@@ -36,16 +39,16 @@
import {ElMessage} from "element-plus";
const warningData = [
- {warningInfo: '超期预警',warningTime: '2025-04-24 13:18:41' },
- {warningInfo: '超期预警',warningTime: '2025-04-23 13:00:21' },
- {warningInfo: '超期预警',warningTime: '2025-04-20 10:11:34' },
- {warningInfo: '超期预警',warningTime: '2025-04-18 09:28:51' },
- {warningInfo: '超期预警',warningTime: '2025-04-16 08:18:21' },
- {warningInfo: '超期预警',warningTime: '2025-04-15 05:12:21' },
- {warningInfo: '超期预警',warningTime: '2025-04-14 04:11:41' }
+ {name: '企业1',info: 'XXXXXXXX',type: '红色' },
+ {name: '企业2',info: 'XXXXXXXX',type: '蓝色' },
+ {name: '企业3',info: 'XXXXXXXX',type: '黄色' },
+ {name: '企业4',info: 'XXXXXXXX',type: '蓝色' },
+ {name: '企业5',info: 'XXXXXXXX',type: '红色' },
+ {name: '企业6',info: 'XXXXXXXX',type: '黄色' },
+ {name: '企业7',info: 'XXXXXXXX',type: '蓝色' }
]
// 配置参数
-const visibleRows = 5 // 显示的行数
+const visibleRows = 7 // 显示的行数
const scrollSpeed = 0.5 // 每次滚动的像素数
const rowHeight = 36 // 行高，与CSS一致
const viewport = ref(null)
@@ -53,7 +56,7 @@
let animationFrame = null
onMounted(()=>{
- getList()
+ // getList()
// 设置视口高度
if (viewport.value) {
viewport.value.style.height = `${visibleRows * rowHeight}px`
@@ -214,6 +217,16 @@
box-sizing: border-box;
font-size: 12px;
font-weight: normal;
+ flex: 1;
+ }
+ .red{
+ color: red
+ }
+ .yellow{
+ color: yellow
+ }
+ .blue{
+ color: #51ccff
}
th {
position: sticky;
@@ -222,6 +235,7 @@
}
tr{
background: rgb(6,38,87);
+ display: flex;
&:nth-of-type(2n){
background: rgb(19,72,127);
diff --git a/src/views/hazardousChemicals/bigScreen/components/midTop.vue b/src/views/hazardousChemicals/bigScreen/components/midTop.vue
index 99e6443..6954abd 100644
--- a/src/views/hazardousChemicals/bigScreen/components/midTop.vue
+++ b/src/views/hazardousChemicals/bigScreen/components/midTop.vue
@@ -85,7 +85,7 @@
// 表格数据
const companyData = ref([])
// 配置参数
-const visibleRows = 8 // 显示的行数
+const visibleRows = 10 // 显示的行数
const scrollSpeed = 0.5 // 每次滚动的像素数
const rowHeight = 40 // 行高，与CSS一致
const viewport = ref(null)
@@ -94,7 +94,7 @@
onMounted(()=>{
getList()
- initChart()
+ // initChart()
// 设置视口高度
if (viewport.value) {
viewport.value.style.height = `${visibleRows * rowHeight}px`
@@ -153,11 +153,10 @@
companyData.value = res.data
const mapData = companyData.value.map(i=>{
return {
- name: i.companyName + '(' + i.warningCount + ')',
+ name: i.companyName + '\n' + i.warningCount,
value: [i.longitude,i.latitude]
}
})
- console.log(mapData,'mapData')
initChart(mapData)
}
@@ -202,6 +201,7 @@
let option = {
geo: {
map: '苏州市',
+ roam: 'scale',
aspectScale: 0.8,
layoutCenter: ['50%', '50%'], //地图位置
layoutSize: '75%',
@@ -271,10 +271,10 @@
{
type: 'effectScatter',
coordinateSystem: 'geo',
- symbolSize: 10,
+ symbolSize: 4,
rippleEffect: {
- period: 3,
- scale: 10,
+ period: 2,
+ scale: 6,
brushType: 'fill'
},
label: {
@@ -283,7 +283,7 @@
position: 'right',
formatter: '{b}',
color: 'yellow',
- fontSize: 12
+ fontSize: 14
}
},
data: mapData,
@@ -291,8 +291,8 @@
//坐标点颜色
normal: {
show: true,
- color: 'skyblue',
- shadowBlur: 20,
+ color: 'orange',
+ shadowBlur: 6,
shadowColor: '#fff'
},
emphasis: {
@@ -317,18 +317,18 @@
height: 100%;
display: flex;
align-items: flex-start;
+ gap: 10px
}
.container-left{
+ flex: 1;
display: flex;
flex-direction: column;
align-items: center;
- width: 300px;
}
.filter{
- width: 300px;
- margin-top: 50px;
+ width: 100%;
display: flex;
align-items: center;
}
@@ -354,9 +354,11 @@
}
}
}
+
+
.table-wrapper {
position: relative;
- width: 300px;
+ width: 100%;
margin-top: 10px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 2px;
@@ -415,8 +417,14 @@
100% { opacity: 1; }
}
- #areaMap{
- flex: 1;
- height: 500px;
- }
+#areaMap{
+ flex: 2;
+ height: 100%;
+}
+:deep(.BMap_cpyCtrl) {
+ display: none !important;
+}
+:deep(.anchorBL) {
+ display: none !important;
+}
</style>
diff --git a/src/views/hazardousChemicals/bigScreen/components/midTop2.vue b/src/views/hazardousChemicals/bigScreen/components/midTop2.vue
index 40d3749..b30547f 100644
--- a/src/views/hazardousChemicals/bigScreen/components/midTop2.vue
+++ b/src/views/hazardousChemicals/bigScreen/components/midTop2.vue
@@ -86,7 +86,7 @@
// 表格数据
const companyData = ref([])
// 配置参数
-const visibleRows = 8 // 显示的行数
+const visibleRows = 10 // 显示的行数
const scrollSpeed = 0.5 // 每次滚动的像素数
const rowHeight = 40 // 行高，与CSS一致
const viewport = ref(null)
@@ -103,8 +103,6 @@
setTimeout(() => {
scrollAnimation()
}, 100)
- initMap()
-
})
onBeforeUnmount(() => {
@@ -148,63 +146,76 @@
}
]
-const initMap=()=>{
- var map = new BMapGL.Map("areaMap");
+const initMap=(mapData)=>{
+ let map = new BMapGL.Map("areaMap",{
+ backgroundColor: [0, 0, 0, 0]
+ });
map.setMapType(BMAP_NORMAL_MAP);
- var point = new BMapGL.Point(120.752833, 31.333439);
- map.centerAndZoom(point, 12);
+ let centerPoint = new BMapGL.Point(120.702833, 31.333439);
+ map.centerAndZoom(centerPoint, 12);
map.enableScrollWheelZoom(true);
- map.setTilt(40);
+ map.setTilt(30);
map.setMapStyleV2({
styleId: 'c66f44df4e55ce8f0fa90205997df335'
});
- // var bd = new BMapGL.Boundary();
- // bd.get('苏州市工业园区', function (rs) {
- // // console.log('外轮廓：', rs.boundaries[0])
- // // console.log('内镂空：', rs.boundaries[1])
- // var hole = new BMapGL.Polygon(rs.boundaries, {
- // fillColor: 'blue',
- // fillOpacity: 0.2
- // });
- // map.addOverlay(hole);
- // });
- var bd1 = new BMapGL.Boundary();
- bd1.get('苏州市工业园区', function (rs) {
+
+ let bd1 = new BMapGL.Boundary();
+ bd1.get('苏州市', function (rs) {
let count = rs.boundaries.length;
for (let i = 0; i < count; i++) {
let path = [];
let str = rs.boundaries[i].replace(' ', '');
let points = str.split(';');
for (let j = 0; j < points.length; j++) {
- let lng = points[j].split(',')[0];
- let lat = points[j].split(',')[1];
+ let lng = Number(points[j].split(',')[0]);
+ let lat = Number(points[j].split(',')[1]);
path.push(new BMapGL.Point(lng, lat));
}
- let prism = new BMapGL.Prism(path, 200, {
+ let mapMask = new BMapGL.MapMask(path, {
+ isBuildingMask: true,
+ isPoiMask: true,
+ isMapMask: true,
+ showRegion: 'inside',
topFillColor: '#5679ea',
- topFillOpacity: 0.6,
+ topFillOpacity: 0.5,
sideFillColor: '#5679ea',
sideFillOpacity: 0.9
});
+ let border = new BMapGL.Polyline(path, {
+ strokeColor: '#4ca7a2',
+ strokeWeight: 1,
+ strokeOpacity: 1
+ });
+ let prism = new BMapGL.Prism(path, 500, {
+ topFillColor: '#5679ea',
+ topFillOpacity: 0.4,
+ sideFillColor: '#5679ea',
+ sideFillOpacity: 1
+ });
+ map.addOverlay(mapMask);
+ map.addOverlay(border);
map.addOverlay(prism);
}
- });
- // var circle = new BMapGL.Circle(new BMapGL.Point(120.742833,31.333439),1000,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
- // map.addOverlay(circle);
- var point = new BMapGL.Point(120.742833,31.333439);
- var content = '企业一（10）';
- var label = new BMapGL.Label(content, {
- position: point,
- offset: new BMapGL.Size(-20, -10)
})
- map.addOverlay(label);
- label.setStyle({
- color: '#11FEEE',
- fontSize: '14px',
- border: 'none',
- backgroundColor: '#293075'
- })
- label.setPosition(point)
+
+ for(let i of mapData){
+ let pointMarker = new BMapGL.Marker(new BMapGL.Point(i.value[0],i.value[1]));
+ map.addOverlay(pointMarker);
+ var point = new BMapGL.Point(i.value[0],i.value[1]);
+ var content = i.name;
+ var label = new BMapGL.Label(content, {
+ position: point,
+ })
+ map.addOverlay(label);
+ label.setStyle({
+ color: '#11FEEE',
+ fontSize: '11px',
+ border: 'none',
+ backgroundColor: '#293075'
+ })
+ }
+
+
}
const getList = async () => {
const res = await getCompanyMessage(companyType.value)
@@ -217,7 +228,7 @@
value: [i.longitude,i.latitude]
}
})
- // initChart(mapData)
+ initMap(mapData)
}
}else{
@@ -380,15 +391,14 @@
}
.container-left{
+ flex: 1;
display: flex;
flex-direction: column;
align-items: center;
- width: 300px;
}
.filter{
- width: 300px;
- margin-top: 50px;
+ width: 100%;
display: flex;
align-items: center;
}
@@ -418,7 +428,7 @@
.table-wrapper {
position: relative;
- width: 300px;
+ width: 100%;
margin-top: 10px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 2px;
@@ -478,8 +488,13 @@
}
#areaMap{
- flex: 1;
+ flex: 2;
height: 100%;
+ background: none !important;
+ }
+
+ :deep(.bmap-container){
+ background-image: none !important;
}
:deep(.BMap_cpyCtrl) {
display: none !important;
@@ -487,4 +502,12 @@
:deep(.anchorBL) {
display: none !important;
}
+:deep(.BMapLabel){
+ min-width: 50px;
+ white-space: pre-wrap !important;
+}
+
+:deep(.BMap_mask){
+ background: #082c61 !important;
+}
</style>
diff --git a/src/views/hazardousChemicals/bigScreen/index.vue b/src/views/hazardousChemicals/bigScreen/index.vue
index 865342c..e9e812f 100644
--- a/src/views/hazardousChemicals/bigScreen/index.vue
+++ b/src/views/hazardousChemicals/bigScreen/index.vue
@@ -1,12 +1,12 @@
<template>
- <div class="data-dashboard">
+ <div :class="isFull?'data-dashboard1':'data-dashboard2'">
<header class="dashboard-header">
<div class="header-left">
<div class="current-time">{{ currentTime }}</div>
<div class="current-date">{{ currentDate }}</div>
</div>
<div class="header-center">
- <h1 class="dashboard-title">独墅湖科教创新区危化品智慧管控平台</h1>
+ <h1 class="dashboard-title">独墅湖科教创新区危化品智慧管控一张图</h1>
</div>
<div class="header-right">
<div class="weather-info">
@@ -48,7 +48,7 @@
</div>
<div class="chart-container chart-4">
<div class="chart-title">
- <img :src="leftArrow"><span>实时预警信息</span><img :src="rightArrow">
+ <img :src="leftArrow"><span>企业安全风险预警情况和分类</span><img :src="rightArrow">
</div>
<div class="chart-placeholder">
<mid-bottom></mid-bottom>
@@ -135,7 +135,7 @@
</script>
<style lang="postcss">
-.data-dashboard {
+.data-dashboard1,.data-dashboard2 {
width: 100%;
height: 100%;
display: flex;
@@ -278,4 +278,13 @@
}
}
}
+.data-dashboard2{
+ width: 100%;
+ height: calc(100vh - 70px);
+ display: flex;
+ flex-direction: column;
+ background-color: #031A41;
+ color: #fff;
+ overflow: hidden;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.2