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/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