From e1d380a930e73d8355a4695ca5f5b91f471c2394 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期一, 28 四月 2025 13:32:12 +0800
Subject: [PATCH] 修改大屏
---
src/views/hazardousChemicals/bigScreen/components/midTop.vue | 117 +++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 78 insertions(+), 39 deletions(-)
diff --git a/src/views/hazardousChemicals/bigScreen/components/midTop.vue b/src/views/hazardousChemicals/bigScreen/components/midTop.vue
index 4a26014..6954abd 100644
--- a/src/views/hazardousChemicals/bigScreen/components/midTop.vue
+++ b/src/views/hazardousChemicals/bigScreen/components/midTop.vue
@@ -8,13 +8,31 @@
v-model="companyType"
filterable
placeholder="请选择企业类型"
- style="width: 100%"
+ style="flex: 1"
remote
remote-show-suffix
:remote-method="getList"
>
<el-option
v-for="item in typeList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ <el-select
+ clearable
+ :teleported="false"
+ v-model="warningType"
+ filterable
+ placeholder="请选择风险等级"
+ style="flex: 1"
+ remote
+ remote-show-suffix
+ :remote-method="getList"
+ >
+ <el-option
+ v-for="item in warningList"
:key="item.id"
:label="item.name"
:value="item.id"
@@ -67,7 +85,7 @@
// 表格数据
const companyData = ref([])
// 配置参数
-const visibleRows = 8 // 显示的行数
+const visibleRows = 10 // 显示的行数
const scrollSpeed = 0.5 // 每次滚动的像素数
const rowHeight = 40 // 行高，与CSS一致
const viewport = ref(null)
@@ -76,7 +94,7 @@
onMounted(()=>{
getList()
- initChart()
+ // initChart()
// 设置视口高度
if (viewport.value) {
viewport.value.style.height = `${visibleRows * rowHeight}px`
@@ -94,6 +112,7 @@
})
const companyType = ref('')
+const warningType = ref('')
const typeList = [
{
id: 0,
@@ -108,12 +127,39 @@
name: '中试类'
}
]
+const warningList = [
+ {
+ id: 1,
+ name: '红'
+ },
+ {
+ id: 2,
+ name: '橙'
+ },
+ {
+ id: 3,
+ name: '黄'
+ },
+ {
+ id: 4,
+ name: '蓝'
+ }
+]
const getList = async () => {
const res = await getCompanyMessage(companyType.value)
if(res.code == 200){
- companyData.value = res.data
- // console.log(companyData.value,555)
+ if(res.data && Array.isArray(res.data) && res.data.length>0){
+ companyData.value = res.data
+ const mapData = companyData.value.map(i=>{
+ return {
+ name: i.companyName + '\n' + i.warningCount,
+ value: [i.longitude,i.latitude]
+ }
+ })
+ initChart(mapData)
+ }
+
}else{
ElMessage.warning(res.message)
}
@@ -144,24 +190,10 @@
animationFrame = requestAnimationFrame(scrollAnimation)
}
-const initChart =()=>{
+const initChart =(mapData)=>{
//获取echart对象
let dom = document.getElementById('areaMap')
if (dom) {
- let data = [
- {
- name: "姑苏区",
- value: Math.round(Math.random() * 100)
- },
- {
- name: "虎丘区",
- value: Math.round(Math.random() * 100)
- },
- {
- name: "吴中区",
- value: Math.round(Math.random() * 100)
- },
- ]
//初始化
let myEchart = echarts.init(dom)
//注册地图
@@ -169,6 +201,7 @@
let option = {
geo: {
map: '苏州市',
+ roam: 'scale',
aspectScale: 0.8,
layoutCenter: ['50%', '50%'], //地图位置
layoutSize: '75%',
@@ -233,16 +266,15 @@
}
}
},
- data: data
},
// 区域散点图
{
type: 'effectScatter',
coordinateSystem: 'geo',
- symbolSize: 10,
+ symbolSize: 4,
rippleEffect: {
- period: 3,
- scale: 10,
+ period: 2,
+ scale: 6,
brushType: 'fill'
},
label: {
@@ -251,20 +283,16 @@
position: 'right',
formatter: '{b}',
color: 'yellow',
- fontSize: 12
+ fontSize: 14
}
},
- data: [
- { name: '斜塘街道 11', value: [120.697614, 31.288664] },
- { name: '桑田岛 12', value: [120.807510, 31.350300] },
- { name: '车坊 2', value: [120.627614, 31.338664] }
- ],
+ data: mapData,
itemStyle: {
//坐标点颜色
normal: {
show: true,
- color: 'skyblue',
- shadowBlur: 20,
+ color: 'orange',
+ shadowBlur: 6,
shadowColor: '#fff'
},
emphasis: {
@@ -289,17 +317,20 @@
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;
+ width: 100%;
+ display: flex;
+ align-items: center;
}
:deep(.el-input__wrapper){
height: 28px;
@@ -323,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;
@@ -384,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>
--
Gitblit v1.9.2