首页部分开发

RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/controller/HomeController.java

@@ -0,0 +1,47 @@
+package com.ruoyi.project.oil.controller;
+
+import com.ruoyi.framework.web.controller.BaseController;
+import com.ruoyi.framework.web.domain.AjaxResult;
+import com.ruoyi.project.oil.service.IHomeService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.List;
+import java.util.Map;
+
+import static com.ruoyi.framework.web.domain.AjaxResult.success;
+
+/**
+ * 首页
+ */
+@RestController
+@RequestMapping("/home")
+public class HomeController extends BaseController {
+    @Autowired
+    private IHomeService homeService;
+    /**
+     * 查询设备数量情况
+     */
+    @GetMapping("/queryDeviceCount")
+    public AjaxResult queryDeviceCount() {
+        Map<String,Object> list = homeService.queryDeviceCount();
+        return success(list);
+    }
+    /**
+     * 查询各企业设备总数
+     */
+    @GetMapping("/queryDeviceByFactory")
+    public AjaxResult queryDeviceByFactory() {
+        List<Map<String,Object>> list = homeService.queryDeviceByFactory();
+        return success(list);
+    }
+
+    @GetMapping("/queryTodayAlarm")
+    public AjaxResult queryTodayAlarm(String date) {
+        List<Map<String,Object>> list = homeService.queryTodayAlarm(date);
+        return success(list);
+    }
+
+}

RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/mapper/HomeMapper.java

@@ -0,0 +1,24 @@
+package com.ruoyi.project.oil.mapper;
+
+import java.util.List;
+import java.util.Map;
+
+public interface HomeMapper {
+    /**
+     * 查询设备数量情况
+     * @return
+     */
+    public Map<String, Object> queryDeviceCount() ;
+
+    /**
+     * 查询各企业设备总数
+     */
+    List<Map<String, Object>> queryDeviceByFactory();
+
+    /**
+     * 查询今日报警信息
+     * @param queryTodayAlarm
+     * @return
+     */
+    List<Map<String, Object>> queryTodayAlarm(String date);
+}

RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/IHomeService.java

@@ -0,0 +1,23 @@
+package com.ruoyi.project.oil.service;
+
+import java.util.List;
+import java.util.Map;
+
+public interface IHomeService {
+    /**
+     * 查询设备数量情况
+     */
+    Map<String, Object> queryDeviceCount();
+    /**
+     * 查询各企业设备总数
+     */
+
+    List<Map<String, Object>> queryDeviceByFactory();
+
+    /**
+     * 查询今日报警信息
+     * @param date
+     * @return
+     */
+    List<Map<String, Object>> queryTodayAlarm(String date);
+}

RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/impl/HomeServiceImpl.java

@@ -0,0 +1,38 @@
+package com.ruoyi.project.oil.service.impl;
+
+import com.ruoyi.framework.web.domain.AjaxResult;
+import com.ruoyi.project.oil.domain.SendInfo;
+import com.ruoyi.project.oil.mapper.HomeMapper;
+import com.ruoyi.project.oil.service.IHomeService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+
+import java.util.List;
+import java.util.Map;
+
+import static com.ruoyi.framework.web.domain.AjaxResult.success;
+
+@Service
+public class HomeServiceImpl implements IHomeService {
+
+    @Autowired
+    private HomeMapper homeMapper;
+
+
+    @Override
+    public Map<String, Object> queryDeviceCount() {
+        return homeMapper.queryDeviceCount();
+    }
+
+    @Override
+    public List<Map<String, Object>> queryDeviceByFactory() {
+        return homeMapper.queryDeviceByFactory();
+    }
+
+    @Override
+    public List<Map<String, Object>> queryTodayAlarm(String queryTodayAlarm) {
+        return homeMapper.queryTodayAlarm(queryTodayAlarm);
+    }
+}

RuoYi-Vue-Oracle/src/main/resources/application.yml

@@ -73,15 +73,15 @@ spring:
   # redis 配置
   redis:
     # 地址
-   # host: 192.168.31.105
+    host: 192.168.31.105
-    host: 127.0.0.1
+   # host: 127.0.0.1
     # 端口，默认为6379
     port: 6379
     # 数据库索引
     database: 0
     # 密码
-    password: 123456
+  #  password: 123456
-    #password: admin123!
+    password: admin123!
     # 连接超时时间
     timeout: 10s
     lettuce:

RuoYi-Vue-Oracle/src/main/resources/mybatis/oil/HomeMapper.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper
+        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.ruoyi.project.oil.mapper.HomeMapper">
+
+<select id="queryDeviceCount" resultType="java.util.Map">
+    SELECT
+    COUNT(CASE WHEN status = 1 THEN 1 END) AS "onlineTotal",
+    COUNT(*) AS "total",
+    COUNT(*) - COUNT(CASE WHEN status = 1 THEN 1 END) AS "offlineTotal"
+    FROM
+    th_device
+</select>
+
+<select id="queryDeviceByFactory" resultType="java.util.Map">
+    SELECT COUNT(d.id) AS "deviceTotal",
+    p.dept_name AS "factoryName",
+    pp.dept_name AS "gangqu"
+    FROM th_device d
+    LEFT JOIN sys_dept p ON d.dept_id = p.dept_id
+    LEFT JOIN sys_dept pp ON p.parent_id = pp.dept_id
+    GROUP BY p.dept_name, pp.dept_name
+</select>
+
+<select id="queryTodayAlarm" resultType="java.util.Map">
+    SELECT d.sn AS "sn",
+    p.dept_name AS "factoryName",
+    pp.dept_name AS "gangqu",
+    r.ds AS "ds",
+    r.zt AS "level"
+    FROM th_device d
+    LEFT JOIN th_device_report r ON d.sn = r.sn
+    LEFT JOIN sys_dept p ON d.dept_id = p.dept_id
+    LEFT JOIN sys_dept pp ON p.parent_id = pp.dept_id
+    WHERE
+    r.REPORT_TIME = TO_DATE(#{date}, 'YYYY-MM-DD')
+    AND (r.zt = '一级报警' OR r.zt = '二级报警')
+
+
+</select>
+</mapper>

ruoyi-ui/src/api/home.js

@@ -1,58 +1,29 @@
 import request from '@/utils/request'
 
-// 获取密封点概况
+// 获取设备状况
-export function countGroupByType(params) {
+export function queryDeviceCount() {
   return request({
-    url: '/point/countGroupByType',
+    url: '/home/queryDeviceCount',
     method: 'get',
-    params:params
+  })
+}
+//查询各企业设备总是
+export function queryDeviceByFactory() {
+  return request({
+    url: '/home/queryDeviceByFactory',
+    method: 'get',
+  })
+}
+//查询今日报警
+export function queryTodayAlarm(data) {
+  return request({
+    url: '/home/queryTodayAlarm',
+    method: 'get',
+    params: data
   })
 }
 
-// 获取各区市的企业情况
-export function aggregateByCity(params) {
-    return request({
-      url: '/factory/aggregateByCity',
-      method: 'get',
-      params:params
-    })
-  }
-  // 查询全市共有多少企业
-export function queryCountFactory(params) {
-    return request({
-      url: '/factory/queryCountFactory',
-      method: 'get',
-      params:params
-    })
-  }
-    // 查询全市企业的经纬度
-export function getAllFactory(params) {
 
-
-    return request({
-      url: '/factory/getAllFactory',
-      method: 'get',
-      params:params
-    })
-  }
-      // 查询企业的设备列表
-export function queryDeviceByFactory(params) {
-
-
-  return request({
-    url: '/app/queryDeviceByFactory',
-    method: 'get',
-    params:params
-  })
-}
-// 查询各个企业检测进度
-export function queryDetectProgress(data) {
-    return request({
-      url: '/exam/queryDetectProgress',
-      method: 'post',
-      data: data
-    })
-  }
   // 查询各个企业vocs排放量统计
 export function findEmissionCharts(data) {
   return request({
@@ -62,91 +33,6 @@ export function findEmissionCharts(data) {
   })
 }
 
-// 查询不合规统计
-export function queryOilNot(data) {
-    return request({
-      url: '/point/queryOilNot',
-      method: 'post',
-      data: data
-    })
-  }
-  // 查询不合规明细
-export function queryOilNotDetail(data) {
-    return request({
-      url: '/point/queryOilNotDetail',
-      method: 'post',
-      data: data
-    })
-  }
-  // 查询建档不合规统计
-export function queryArchivesNot(data) {
-  return request({
-    url: '/point/queryArchivesNot',
-    method: 'post',
-    data: data
-  })
-}
-// 查询建档不合规明细
-export function quertNotArchivesDetail(data) {
-  return request({
-    url: '/point/quertNotArchivesDetail',
-    method: 'post',
-    data: data
-  })
-}
-
-
-    // 查询检测不合规统计
-export function findIllegal(data) {
-  return request({
-    url: '/exam/findIllegal',
-    method: 'post',
-    data: data
-  })
-}
-    // 查询检测不合规明细
-    export function findIllegalByFactoryId(data) {
-      return request({
-        url: '/exam/findIllegalByFactoryId',
-        method: 'post',
-        data: data
-      })
-    }
-    // 查询修复不合规统计
-    export function findRecheckIllegal(data) {
-      return request({
-        url: '/recheck/findIllegal',
-        method: 'post',
-        data: data
-      })
-    }
- // 查询修复不合规明细
- export function findIllegalRecheckByFactoryId(data) {
-  return request({
-    url: '/recheck/findIllegalByFactoryId',
-    method: 'post',
-    data: data
-  })
-}
-
-
-//查询未检测的密封点
-export function queryFailDetect(data) {
-  return request({
-    url: '/ldar/queryFailDetect',
-    method: 'post',
-    data: data
-  })
-}
-//查询未检测的密封点详情
-export function queryFailDetectList(data) {
-  return request({
-    url: '/ldar/queryFailDetectList',
-    method: 'post',
-    data: data
-  })
-}
-
 //发送消息
 export function sendMessage(data) {
   return request({

ruoyi-ui/src/views/home/components/Left.vue

@@ -16,7 +16,7 @@
           <div class="total-title">
             <div class="title-cont">集团共有监测设备</div>
             <div class="area-right" >
-              <template v-for="(item, index) in numTotal.pointTotal">
+              <template v-for="(item, index) in numTotal.total">
                 <p v-if="item == '.'" :key="index">
                   {{ item }}
                 </p>
@@ -27,58 +27,21 @@
           </div>
         </div>
       </div>
+     
       <div class="info-detail">
         <div class="river-ships">
           <div class="ship-describe">
             <p>
-              <span>油气回收在线监测设备</span>
+              <span>厂界在线监测设备在线</span>
-              <span class="num-class" @click="toPoint('0')">{{ numTotal.yqhs}}</span><span>个</span>
+              <span class="num-class" >{{numTotal.onlineTotal}}</span><span>个</span>
             </p>
           </div>
         </div>
         <div class="river-worker">
           <div class="worker-describe">
             <p>
-              <span>在线</span>
+              <span>离线</span>
-              <span class="num-class" @click="toPoint('1')">{{numTotal.yqhs  }}</span>
+              <span class="num-class">{{numTotal.offlineTotal}}</span>
-              <span>个</span>
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="info-detail">
-        <div class="river-ships">
-          <div class="ship-describe">
-            <p>
-              <span>厂内移动式设备</span>
-              <span class="num-class" @click="toPoint('0')">60</span><span>个</span>
-            </p>
-          </div>
-        </div>
-        <div class="river-worker">
-          <div class="worker-describe">
-            <p>
-              <span>在线</span>
-              <span class="num-class" @click="toPoint('1')">57</span>
-              <span>个</span>
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="info-detail">
-        <div class="river-ships">
-          <div class="ship-describe">
-            <p>
-              <span>厂界在线监测设备</span>
-              <span class="num-class" @click="toPoint('0')">44</span><span>个</span>
-            </p>
-          </div>
-        </div>
-        <div class="river-worker">
-          <div class="worker-describe">
-            <p>
-              <span>在线</span>
-              <span class="num-class" @click="toPoint('1')">42</span>
               <span>个</span>
             </p>
           </div>
@@ -90,33 +53,33 @@
 
     <!-- 最下方 检测率概况 -->
     <div class="reservoir-bottom">
-      <third-title title="在线设备分布情况">
+      <third-title title="设备分布情况">
       </third-title>
       <div class="bottom-bottom">
         <div class="left-list">
-          <!-- <div class="left-list1">排行</div> -->
+          <div class="left-list1">港区名称</div>
           <div class="left-list22">企业名称</div>
-          <div class="left-list1">设备类型</div>
+          <!-- <div class="left-list1">设备类型</div> -->
-          <div class="left-list1">设备个数</div>
+          <div class="left-list1">设备总数</div>
         </div>
         <div class="left-over">
           <div class="left-list" v-for="(item, index) in examList">
-
+            <div class="left-list1">{{ item.gangqu }}</div>
             <!-- <a-tooltip> -->
             <!-- <template #title>{{ item.factoryName }}</template> -->
             <template v-if="item.factoryName.length > 11">
               <el-tooltip class="ellipsis" :content="item.factoryName" placement="top">
-                <div class="left-list2" @click="toLdar(item.factoryId)">{{ item.factoryName }}</div>
+                <div class="left-list2">{{ item.factoryName }}</div>
               </el-tooltip>
             </template>
             <template v-else>
-              <div class="left-list2" @click="toLdar(item.factoryId)">{{ item.factoryName }}</div>
+              <div class="left-list2">{{ item.factoryName }}</div>
             </template>
 
 
             <!-- </a-tooltip> -->
-            <div class="left-list1">{{ item.type }}</div>
+           
-            <div class="left-list1">{{ item.num }}</div>
+            <div class="left-list1" style="color: rgb(0 255 255);">{{ item.deviceTotal }}</div>
            
           </div>
         </div>
@@ -126,55 +89,27 @@
 </template>
 
 <script>
-import store from "@/store";
 import ThirdTitle from "./ThirdTitle.vue";
-import { queryDistrict} from "@/api/oil/factory";
 import { NumbersConvertedToArrays } from "@/utils/arrayMethod.js";
-import { countGroupByType, queryDetectProgress } from "@/api/home";
+import { queryDeviceCount,queryDeviceByFactory} from "@/api/home";
-import bus from '@/utils/bus.js'
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
     ThirdTitle
   },
   created() {
-    this.getCurrentTime()
-    bus.$off("changeYearEvent1")
-    bus.$on('changeYearEvent1', (val) => {
-     
-      this.queryParams.year=Number(val)
-  
-      // //查检测率情况
-      this.queryExam();
-
-    })
-    bus.$off("changeDistrict1")
-    bus.$on('changeDistrict1', (val1,val2) => {
-      this.queryParams.districtName = val1
-      this.districtCode = val2
-      if (val1 == '') {
-        this.districtName = '全市'
-      } else {
-        this.districtName = val1
-      }
-
       //查密封点数量
       this.queryPointNum();
-      // //查检测率情况
+      // //查检各企业设备总数
       this.queryExam();
-    })
   },
   destroyed() {
 
   },
 
   mounted() {
-    // let roles=store.getters.roles
+ 
-    // roles.forEach((val)=>{
+    //查设备数量
-    //   if(val=='factory'){
-    //   this.queryParams.factoryId=store.getters.user.factoryId
-    //   }})
-    //查密封点数量
     this.queryPointNum();
     // //查检测率情况
     this.queryExam();
@@ -183,22 +118,13 @@ export default {
   data() {
     //这里存放数据
     return {
-      districtCode:'',
-      districtName: '全市',
-      queryParams: {
-        year: undefined,
-        startTime: undefined,
-        endTime: undefined,
-        districtName: undefined,
-        factoryId: undefined,
-      },
       time: '',
       dateTimer: '',
       //密封点概况
       numTotal: {
-        pointTotal: [],
+        total: [],
-        staticPointTotal: 0,
+        onlineTotal: 0,
-        dynamicPointTotal: 0.
+        offlineTotal: 0.
       },
       //检测率概况
       examList: [],
@@ -207,71 +133,24 @@ export default {
   },
 
   methods: {
-    //跳转到ldar统计页面
-    toLdar(val) {
-
-      this.$router.push({
-        path: '/ledrquery',
-        query: {
-          factoryId: val,
-          year:this.queryParams.year
-        }
-      })
-    },
-    //跳转到密封点查询页面
-    toPoint(val){
-      this.$router.push({
-        path: '/examquery/pointquery',
-        query: {
-          districtCode: this.districtCode,
-          isStaticsPoint:val
-        }
-      }) 
-    },
-    getCurrentTime() {
-
-      //获取当前时间并打印
-      let yy = new Date().getFullYear();
-      let mm = new Date().getMonth() + 1;
-      let dd = new Date().getDate();
-      let hh = new Date().getHours();
-      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
-      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
-      let time = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
-      const date = new Date()
-      this.queryParams.year = date.getFullYear()
-      this.queryParams.year = Number(this.queryParams.year)
    
 
-    },
+    //查询数量
-
-    //查询全市密封点数量
     async queryPointNum() {
-      // countGroupByType(this.queryParams).then(response => {
+      queryDeviceCount(this.queryParams).then(response => {
-      //   this.numTotal.pointTotal = NumbersConvertedToArrays(response.data.pointTotal);
+        this.numTotal.total = NumbersConvertedToArrays(response.data.total);
-      //   this.numTotal.staticPointTotal = response.data.staticPointTotal;
+        this.numTotal.onlineTotal = response.data.onlineTotal;
-      //   this.numTotal.dynamicPointTotal = response.data.dynamicPointTotal;
+        this.numTotal.offlineTotal = response.data.offlineTotal;
-      // });
+      });
-      let toal=145
+ 
-      this.numTotal.pointTotal = NumbersConvertedToArrays(toal);
-        this.numTotal.yqhs = 41;
-        this.numTotal.cnyds = 60;
-        this.numTotal.cjzx = 44;
     },
+    //查询各企业数量
     queryExam() {
-      // this.examList = []
+      this.examList = []
-      // queryDetectProgress(this.queryParams).then(response => {
+      queryDeviceByFactory(this.queryParams).then(response => {
-      //   this.examList = response.data
+        this.examList = response.data
-      // });
+      });
-      this.examList = [{'factoryName':'***有限公司',type:'油气回收',num:'20'},
+      
-      {'factoryName':'***有限公司',type:'厂内移动式',num:'18'},
-      {'factoryName':'***有限公司',type:'厂界在线',num:'24'},
-      {'factoryName':'****有限公司',type:'油气回收',num:'14'},
-      {'factoryName':'****有限公司',type:'厂内移动式',num:'13'},
-      {'factoryName':'****有限公司',type:'厂界在线',num:'10'},
-      {'factoryName':'*****有限公司',type:'油气回收',num:'12'},
-      {'factoryName':'*****有限公司',type:'厂内移动式',num:'13'},
-      {'factoryName':'*****有限公司',type:'厂界在线',num:'14'}]
     },
 
   },
@@ -303,7 +182,7 @@ export default {
 .reservoir-survey {
 
 
-  width: 500px;
+  width: 480px;
   height: 100%;
   color: #f0fafa;
   font-size: 16px;
@@ -451,7 +330,7 @@ export default {
           span {
             font-size: 20px;
             //margin: 0 6px;
-            font-family: DinPro-Bold;
+
           }
         }
       }
@@ -646,7 +525,7 @@ export default {
             .num-class {
               cursor: pointer;
               color: #00deff;
-               text-decoration: underline;
+         
               font-size: 18px;
          
             }
@@ -698,16 +577,10 @@ export default {
   }
 
   .reservoir-bottom {
-    //   width: 100%;
-    //  //   height: 3.8rem;
-    //     background: rgba(0, 108, 188, 0.2);
-    //     border-radius: 2px;
-    //     border: 1px solid rgba(0, 108, 188, 0.7);
-    //     display: inline-table;、
     padding: 10px;
     margin-top: 20px;
     width: 100%;
-    height: 424px;
+    height: 544px;
     // height: 525px;
     background: rgba(0, 108, 188, 0.2);
     border-radius: 2px;
@@ -725,7 +598,7 @@ export default {
       display: inline-table;
 
       .left-over {
-        height: 426px;
+        height: 400px;
         overflow-y: auto;
         overflow-x: hidden;
         width: 100%;
@@ -773,19 +646,13 @@ export default {
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
           word-break: break-all;
-          cursor: pointer;
+          
           font-size: 16px;
           float: left;
           width: 180px;
-          color: rgb(0 255 255);
+         // color: rgb(0 255 255);
 
 
-
-          &:hover {
-
-            text-decoration: underline;
-
-          }
         }
 
         .left-list22 {

ruoyi-ui/src/views/home/components/Right.vue

@@ -3,50 +3,61 @@
 
     <!-- 最上面 排放量统计 -->
     <div class="right-info-content">
-      <third-title title="近七日报警数量统计">
+      <third-title title="实时报警信息"> </third-title>
-        <div class="title-right-content">
+      <div >
+        <div class="left-list">
 
+          <div class="left-list22">企业名称</div>
+          <div class="left-list1">设备编号</div>
+          <div class="left-list1">设备读数</div>
+          <div class="left-list1">报警级别</div>
         </div>
-      </third-title>
+        <div class="left-over">
+          <template v-if="alarmList.length>0">
+          <div class="left-list" v-for="(item, index) in alarmList">
 
-      <div id="averageVocsEmission" class="average-rainfall-main" />
+            <template v-if="item.factoryName.length > 11">
+              <el-tooltip class="ellipsis" :content="item.factoryName" placement="top">
+                <div class="left-list2">{{ item.factoryName }}</div>
+              </el-tooltip>
+            </template>
+            <template v-else>
+              <div class="left-list2">{{ item.factoryName }}</div>
+            </template>
 
 
+            <!-- </a-tooltip> -->
+          
+              <template v-if="item.sn.length > 11">
+              <el-tooltip class="ellipsis" :content="item.sn" placement="top">
+                <div class="left-list2">{{ item.sn }}</div>
+              </el-tooltip>
+            </template>
+            <template v-else>
+              <div class="left-list2">{{ item.sn }}</div>
+            </template>
+           
+            <div class="left-list1" style="color: rgb(0 255 255);">{{ item.ds }}</div>
+            <div class="left-list1">{{ item.level }}</div>
+          </div>
+        </template>
+          <template v-else>
+            <div class="alert-message">今日暂无报警</div>
+          </template>
+        </div>
+      </div>
+
     </div>
 
-    <!-- 下面不合规项 -->
+    <!-- 下面实时报警信息 -->
     <div class="right-warning-trend">
-      <third-title title="设备列表统计">
-      </third-title>
-      <div class="danger-total-left">
-        <span :key="tabIdx" v-for="(tabItem, tabIdx) in notComplianceChosseList" class="tab-item"
-          :class="notChosse == tabIdx ? 'tab-active' : ''" @click="changeTabActive1(tabIdx)">{{ tabItem }}</span>
-      </div>
-      <div class="top5-content">
-        <div class="top-list">
-          <div class="list-data-item" v-for="(item, index) in nonComplianceList" :key="index">
-            <div class="item-title">
-              <span class="left-num">{{ index + 1 }}</span>
-              <template v-if="item.factoryName && item.factoryName.length > 11">
-                <el-tooltip class="ellipsis" :content="item.factoryName" placement="top">
-                  <span class="name-text">{{ item.factoryName }} </span>
-                </el-tooltip>
-              </template>
-              <template v-else>
-                <span class="name-text">{{ item.factoryName }} </span>
-              </template>
 
-              <!-- <span class="name-text">{{ item.factoryName }} </span> -->
+
-              <div class="storage-rate-div">
+      <third-title title="近3日报警数量统计">
-                <span class="storage-rate-text" >编号：{{ item.name }}</span>
+        <div class="title-right-content">
-              </div>
+          <div id="averageVocsEmission" class="average-rainfall-main" />
-              <div class="storage-rate-div">
-                <span class="percent-sign-text" >状态：{{ item.status }}</span>
-              </div>
-            </div>
-          </div>
         </div>
-      </div>
+      </third-title>
     </div>
 
   </div>
@@ -56,168 +67,133 @@
 import bus from '@/utils/bus.js'
 const echarts = require("echarts");
 import ThirdTitle from "./ThirdTitle.vue";
-
+import { queryTodayAlarm } from "@/api/home";
-import { queryOilNot, findIllegal, findRecheckIllegal, findEmissionCharts } from "@/api/home";
+const vocsPotion = {
-const vocsPotion= {
+  backgroundColor: 'rgba(7, 18, 30, 0.4)',
-      backgroundColor: 'rgba(7, 18, 30, 0.4)',
+  tooltip: {
-      tooltip: {
+    trigger: 'axis',
-        trigger: 'axis',
+    axisPointer: {
-        axisPointer: {
+      type: 'shadow',
-          type: 'shadow',
+      shadowStyle: {
-          shadowStyle: {
+        color: 'rgba(29,168,210,.3)',
-            color: 'rgba(29,168,210,.3)',
+      }
-          }
+    },
-        },
+    formatter: function (params) {
-        formatter: function (params) {
+      const str = params.length ? params[0].name + ' : ' + params[0].value + ' 个' : '';
-          const str = params.length ? params[0].name + ' : ' + params[0].value + ' 个' : '';
+      return str;
-          return str;
+    },
-        },
+  },
-      },
+  grid: {
-      grid: {
+    top: 10,
-        top: 10,
+    bottom: 10,
-        bottom: 10,
+    left: 100,
-        left: 100,
+    right: 80
-        right: 80
+  },
-      },
+  xAxis: {
-      xAxis: {
+    type: 'value',
-        type: 'value',
+    name: '报警量（个）',
-        name: '报警量（个）',
+    nameTextStyle: {
-        nameTextStyle: {
+      fontSize: 12,
-          fontSize: 12,
+      color: '#1da8d2',
-          color: '#1da8d2',
+      padding: [15, 0, 0, 0]
-          padding: [15, 0, 0, 0]
+    },
-        },
+    axisLabel: {
-        axisLabel: {
+      color: '#35cefc',
-          color: '#35cefc',
+      fontSize: 14,
-          fontSize: 14,
+      margin: 10
-          margin: 10
+    },
-        },
+    axisTick: {
-        axisTick: {
+      show: false
-          show: false
+    },
-        },
+    splitLine: {
-        splitLine: {
+      show: false,
-          show: false,
+      lineStyle: {
-          lineStyle: {
+        color: '#1da8d2',
-            color: '#1da8d2',
+        width: 1,
-            width: 1,
+        type: 'solid'
-            type: 'solid'
+      }
-          }
+    },
-        },
+    axisLine: {
-        axisLine: {
+      show: true,
-          show: true,
+      lineStyle: {
-          lineStyle: {
+        color: '#1da8d2'
-            color: '#1da8d2'
+      }
-          }
+    },
-        },
+  },
-      },
+  yAxis: {
-      yAxis: {
+    type: 'category',
-        type: 'category',
+    axisLine: {
-        axisLine: {
+      show: true,
-          show: true,
+      lineStyle: {
-          lineStyle: {
+        color: '#1da8d2'
-            color: '#1da8d2'
+      }
-          }
+    },
-        },
+    axisLabel: {
-        axisLabel: {
+      color: '#35cefc',
-          color: '#35cefc',
+      fontSize: 14,
-          fontSize: 14,
+      margin: 5
-          margin: 5
+    },
-        },
+    axisTick: {
-        axisTick: {
+      show: false
-          show: false
+    },
-        },
+    data: []
-        data: []
+  },
-      },
+  series: [{
-      series: [{
+    name: '排放量',
-        name: '排放量',
+    type: 'bar',
-        type: 'bar',
+    barWidth: '50%',
-        barWidth: '50%',
+    itemStyle: {
-        itemStyle: {
+      color: 'rgba(74,189,233,.65)'
-          color: 'rgba(74,189,233,.65)'
+    },
-        },
+    label: {
-        label: {
+      show: true,
-          show: true,
+      position: 'insideRight',
-          position: 'insideRight',
+      color: '#fff',
-          color: '#fff',
+      fontSize: '14px'
-          fontSize: '14px'
+    },
-        },
+    data: []
-        data: []
+  }]
-      }]
+};
-    };
 
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
     ThirdTitle
   },
-  created() {
-
-    this.getCurrentTime()
-    bus.$off("changeYearEvent")
-    bus.$on('changeYearEvent', (val) => {
-      this.queryParams.year = Number(val)
-      //查数量
-      this.changeTabActive1(0);
-      //查询排放量统计
-      this.getVocs();
-
-    })
-    
-
-  },
-  destroyed() {
-
-  },
-
   mounted() {
     //查数量
-    this.changeTabActive1(0);
+    this.queryAlarm();
-
-    //ods: {
     //查询排放量统计
     this.getVocs();
   },
   data() {
     //这里存放数据
     return {
-      queryParams: {
+      alarmList: [],
-        year: undefined,
-        startTime: undefined,
-        endTime: undefined,
-        districtName: undefined,
-        factoryId: undefined,
-      },
-      //不合格项数组
-      nonComplianceList: [],
-      selectTabIdx: 0,
-      //不合规项选择
-      notChosse: 0,
-      //不合规项选择
-      notComplianceChosseList: [
-        '油气回收在线监测设备', '厂内移动式设备', '厂界在线监测设备'
-      ],
-
-      top5ListData: [], //top5数据
-      chartTitle: "", //左下角图表标题
-      timeDimensioninput: 1,
-      time: '',
-      dateTimer: '',
-      numTotal: {
-        companyNum: [],
-        noExamNum: 0,
-        examNum: 0.
-      },
-      echartsText: "水库险情",
-      xWarningData: [],//预警水库柱状图横坐标数组
-      warningDataList: [],//预警水库柱状图有险情个数，有告警个数
-      allDataList: [],//预警水库柱状图无险情个数，无告警个数
-      xDangerData: [],//柱状图横坐标数组
-      dangerDataList: [],//柱状图有险情个数
       vocsList: [],
     };
   },
 
   methods: {
+    //查询今日报警列表
+    queryAlarm() {
+      const now = new Date();
+
+      // 获取各个部分
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
+      const day = String(now.getDate()).padStart(2, '0'); // 保证两位数
+
+      const formattedDate = `${year}-${month}-${day}`;
+      this.alarmList = []
+      let params = {
+        date: formattedDate
+      }
+      queryTodayAlarm(params).then(response => {
+        this.alarmList = response.data
+      });
+
+    },
     //查询排放量统计
     getVocs() {
       // findEmissionCharts(this.queryParams).then(response => {
@@ -245,8 +221,8 @@ export default {
       //   this.initEcharts();
       // });
 
-      vocsPotion.yAxis.data =['***有限公司','****有限公司','*****有限公司']
+      vocsPotion.yAxis.data = ['***有限公司', '****有限公司', '*****有限公司']
-      vocsPotion.series[0].data =[30,25,20]
+      vocsPotion.series[0].data = [30, 25, 20]
       // vocsPotion.series[1].data =[2343.232,333,3334]
       this.initEcharts();
     },
@@ -265,58 +241,6 @@ export default {
       this.queryParams.year = Number(this.queryParams.year)
 
     },
-    //查询不合规项
-    queryNot(val) {
-      if (val == 0) {
-  
-        // queryOilNot(this.queryParams).then(response => {
-        //   this.nonComplianceList = response.data
-        // });
-        this.nonComplianceList = [{factoryName:'***有限公司',name:'YQHS0001',status:'正在运行'},{factoryName:'***有限公司',name:'YQHS0002',status:'正在运行'},
-        {factoryName:'***有限公司',name:'YQHS0003',status:'正在运行'},{factoryName:'***有限公司',name:'YQHS0004',status:'正在运行'},
-        {factoryName:'***有限公司',name:'YQHS0005',status:'停用'},{factoryName:'***有限公司',name:'YQHS0006',status:'正在运行'}]
-      } else if (val == 1) {
-        // findIllegal(this.queryParams).then(response => {
-        //   this.nonComplianceList = response.data
-        // });
-        this.nonComplianceList = [{factoryName:'***有限公司',name:'SNYDS0001',status:'正在运行'},{factoryName:'***有限公司',name:'SNYDS0002',status:'正在运行'},
-        {factoryName:'***有限公司',name:'SNYDS0003',status:'正在运行'},{factoryName:'***有限公司',name:'SNYDS0004',status:'正在运行'},
-        {factoryName:'***有限公司',name:'SNYDS0005',status:'正在运行'},{factoryName:'***有限公司',name:'SNYDS0006',status:'正在运行'}]
-      } else {
-        // findRecheckIllegal(this.queryParams).then(response => {
-        //   this.nonComplianceList = response.data
-        // });
-        this.nonComplianceList = [{factoryName:'***有限公司',name:'CJZX0001',status:'检修中'},{factoryName:'***有限公司',name:'CJZX0002',status:'正在运行'},
-        {factoryName:'***有限公司',name:'CJZX0003',status:'正在运行'},{factoryName:'***有限公司',name:'CJZX0004',status:'正在运行'},
-        {factoryName:'***有限公司',name:'YCJZX0005',status:'停用'},{factoryName:'***有限公司',name:'CJZX0006',status:'正在运行'}]
-
-      }
-    },
-    //跳转不合规项页面
-    openNot(item) {
-      // this.$router.push({
-      //   path: '/notcompliance',
-      //   query: {
-      //     factoryId: item.factoryId,
-      //     year: this.queryParams.year,
-      //     type: this.notChosse
-      //   }
-      // })
-      //this.$router.push("")
-    },
-    // 切换
-    changeTabActive(tabIdx) {
-      this.selectTabIdx = tabIdx;
-      if (tabIdx == 0) {
-        this.handleSearch();
-      } else {
-        this.requestHourRainFall();
-      }
-    },
-    changeTabActive1(val) {
-      this.notChosse = val;
-      this.queryNot(val)
-    },
 
 
     initEcharts() {
@@ -331,7 +255,6 @@ export default {
 };
 </script>
 <style lang='scss' scoped>
-
 .top5-content::-webkit-scrollbar {
   width: 6px;
   /*height: 4px;*/
@@ -380,162 +303,14 @@ export default {
 
 .right-survey {
 
-  width: 500px;
+  width: 480px;
   height: 100%;
   color: #f0fafa;
   font-size: 14px;
   display: flex;
   flex-direction: column;
 
-  .danger-total-left {
-    width: 100%;
-    height: 28px;
-    display: flex;
-    flex-direction: row;
 
-    .tab-item {
-      cursor: pointer;
-      padding: 5px 20px;
-      background: #133263;
-      border: #1eafda 1px solid;
-      color: #35cffc;
-      font-size: 14px;
-      font-family: "Microsoft YaHei";
-
-      &:nth-child(2n) {
-        border-left: none;
-      }
-    }
-
-    .tab-active {
-      background: linear-gradient(to left, #1e98cd, #0d284f);
-      color: #fff;
-    }
-
-    .info-header {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      height: 85px;
-      width: 100%;
-      padding-top: 6px;
-      background-color: #236cbb;
-
-      .title-animation {
-        width: 78px;
-        height: 74px;
-        overflow: hidden;
-        margin: 0 10px;
-        text-align: center;
-        position: relative;
-        //   background-image: url("~@/assets/layout/car-bg.png");
-        background-image: url("~@/assets/common/multiScreen/waternum.png");
-        background-size: cover;
-
-        .display-animation {
-          animation: topup50 5s linear infinite;
-        }
-
-        &.bg1 {
-          // background: url("~@/assets/layout/car-bg.png");
-          background-image: url("~@/assets/common/multiScreen/team-bg.png");
-          background-size: cover;
-        }
-
-        .move-img {
-          width: 78px;
-          height: 74px;
-          position: absolute;
-          // background-image: url("~@/assets/layout/car-anime.png");
-          background-image: url("~@/assets/common/multiScreen/water-rick-bg.png");
-          background-size: cover;
-        }
-
-        .title-logo {
-          width: 78px;
-          height: 74px;
-
-          // margin-left: 18px;
-          // margin-top: 16px;
-          &.logo1 {
-            // background: url("~@/assets/layout/road-network-on.png");
-            background: url("~@/assets/common/multiScreen/team_on.png");
-            background-size: cover;
-          }
-
-          &.logo2 {
-            //   background: url("~@/assets/layout/road-network-on.png");
-            background: url("~@/assets/common/multiScreen/team_on.png");
-            background-size: cover;
-          }
-        }
-      }
-
-      .title-cont {
-        width: 140px;
-        font-size: 16px;
-        //margin-bottom: 8px;
-        line-height: 40px;
-      }
-
-      .area-right {
-        display: flex;
-        align-items: center;
-        justify-items: flex-end;
-        padding-right: 20px;
-        color: #bed1df;
-
-        span {
-          width: 28px;
-          height: 20px;
-          line-height: 20px;
-          background: url("~@/assets/common/multiScreen/num_bg.png") 100% 100%;
-          background-size: 100%;
-          text-align: center;
-          font-size: 14px;
-          margin-right: 3px;
-          color: #fff;
-          font-family: DinPro-Bold;
-        }
-
-        .mianJi {
-          margin-top: 6px;
-        }
-
-        p {
-          height: 34px;
-          display: flex;
-          align-items: flex-end;
-          justify-items: center;
-          font-size: 30px;
-        }
-      }
-
-      .total-title {
-        cursor: pointer;
-        display: flex;
-        flex-direction: row;
-      }
-    }
-
-    .handle-num {
-      margin-left: 20px;
-      padding-top: 20px;
-
-      p:first-child {
-        margin-bottom: 10px;
-        font-size: 16px;
-      }
-
-      p:last-child {
-        span {
-          font-size: 14px;
-          //margin: 0 6px;
-          font-family: DinPro-Bold;
-        }
-      }
-    }
-  }
 
   .right-info-content {
     background: rgba(0, 108, 188, 0.2);
@@ -544,238 +319,91 @@ export default {
     padding: 10px;
     display: flex;
     flex-direction: column;
-
+    .left-over {
-    .average-rainfall-main {
+        height: 250px;
-      width: 488px;
+        overflow-y: auto;
-      height: 180px;
+        overflow-x: hidden;
-    }
+        width: 100%;
-
-    .info-headery {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      height: 90px;
-      background-color: #236cbb;
-
-      .title-animation {
-        width: 78px;
-        height: 74px;
-        overflow: hidden;
-        margin: 0 20px;
-        text-align: center;
-        position: relative;
-        //   background-image: url("~@/assets/layout/car-bg.png");
-        background-image: url("~@/assets/common/multiScreen/waternum.png");
-        background-size: cover;
-
-        .display-animation {
-          animation: topup50 5s linear infinite;
-        }
-
-        &.bg1 {
-          // background: url("~@/assets/layout/car-bg.png");
-          background-image: url("~@/assets/common/multiScreen/team-bg.png");
-          background-size: cover;
-        }
-
-        .move-img {
-          width: 78px;
-          height: 74px;
-          position: absolute;
-          // background-image: url("~@/assets/layout/car-anime.png");
-          background-image: url("~@/assets/common/multiScreen/water-rick-bg.png");
-          background-size: cover;
-        }
-
-        .title-logo {
-          width: 70px;
-          height: 70px;
-          margin-left: 4px;
-          margin-top: 10px;
-
-          &.logo2 {
-            // background: url("~@/assets/layout/road-network-on.png");
-            background: url("~@/assets/common/multiScreen/team_on.png");
-            background-size: cover;
-          }
-
-          &.logo1 {
-            //   background: url("~@/assets/layout/road-network-on.png");
-            background: url("~@/assets/common/multiScreen/team_on.png");
-            background-size: cover;
-          }
-        }
       }
+      .alert-message {
+    height: 250px;              /* 设置高度 */
+    display: flex;              /* 使用 flexbox 来居中 */
+    align-items: center;        /* 垂直居中 */
+    justify-content: center;    /* 水平居中 */
+    color: gray;                /* 字体颜色为灰色 */
+    font-size: 16px;            /* 可选：设置字体大小 */
+    text-align: center;         /* 可选：文本居中对齐 */
+    border-radius: 8px;         /* 可选：圆角 */
  
-      .title-cont {
+}
-        width: 90px;
+    .left-list {
-        font-size: 14px;
+      text-align: center;
-        margin-right: 10px;
+      color: #fff;
-      }
+      width: 100%;
-
+      height: 26px;
-      .area-right {
+      margin-right: 10px;
-        display: flex;
+      margin-top: 5px;
-        align-items: center;
-        justify-items: flex-end;
-        padding-right: 20px;
-        color: #bed1df;
-
-        span {
-          width: 28px;
-          height: 40px;
-          line-height: 40px;
-          background: url("~@/assets/common/multiScreen/num_bg.png") 100% 100%;
-          background-size: 100%;
-          text-align: center;
-          font-size: 16px;
-          margin-right: 3px;
-          color: #fff;
-          font-family: "DinPro-Bold";
-        }
-
-        .mianJi {
-          margin-top: 6px;
-        }
-
-        p {
-          height: 34px;
-          display: flex;
-          align-items: flex-end;
-          justify-items: center;
-          font-size: 30px;
-        }
-      }
-
-      .reach-num {
-        width: 111px;
-        height: 100%;
-        background: url("~@/assets/common/multiScreen/river-spilt.png");
-        background-position: center left;
-        background-repeat: no-repeat;
-        padding-left: 20px;
-        padding-top: 8px;
-
-        &>p:first-child {
-          display: flex;
-
-          //margin-bottom:8px;
-          span {
-            color: #ffffff;
-            font-size: 14px;
-          }
-        }
-
-        &>p:nth-child(2) {
-          span:first-child {
-            color: #ffffff;
-            font-size: 14px;
-            font-family: DINPro-Bold;
-          }
-
-          span:last-child {
-            color: #ffffff;
-            font-size: 14px;
-          }
-        }
-
-        &>p:nth-child(3) {
-          //margin-top:6px;
-          background-color: #df1818;
-          width: 63px;
-          height: 26px;
-          border-radius: 2px;
-
-          span:first-child {
-            color: #ffffff;
-            font-size: 14px;
-            font-family: DINPro-Bold;
-          }
-
-          span:last-child {
-            color: #ffffff;
-            font-size: 14px;
-          }
-        }
-      }
-    }
-
-    .info-detail {
-      height: 76px;
-      background-color: rgba(2, 16, 36, 0.4);
       font-size: 16px;
-      flex: 1;
       display: flex;
-      flex-direction: row;
+      justify-content: space-around;
 
-      .river-ships {
+      .left-list1 {
-        background: url("~@/assets/common/multiScreen/ship-spilt.png");
+        font-size: 16x;
-
+        float: left;
-        background-position: center right;
+        width: 20%;
-        background-repeat: no-repeat;
+        height: 30px;
-        padding-left: 32px;
+        line-height: 30px;
-        width: 50%;
+        overflow: hidden;
-        height: 100%;
+        text-overflow: ellipsis;
-        display: flex;
+        white-space: nowrap;
-        flex-direction: row;
+        -webkit-line-clamp: 1;
-
+        -webkit-box-orient: vertical;
-        .ship-describe {
+        word-break: break-all;
-          //margin-top: 12px;
-          margin-left: 16px;
-          line-height: 40px;
-
-          &>p {
-            margin-top: 5px;
-
-            span:first-child {
-              color: #ffffff;
-              font-size: 14px;
-            }
-
-            span:last-child {
-              color: #ffffff;
-              font-size: 14px;
-            }
-
-            .num-class {
-              color: #ffffff;
-              font-size: 16px;
-             }
-          }
-        }
       }
 
-      .river-worker {
+      .left-list2 {
-        width: 50%;
+        height: 30px;
-        height: 100%;
+        line-height: 20px;
-        display: flex;
+        overflow: hidden;
-        flex-direction: row;
+        text-overflow: ellipsis;
-        padding-left: 32px;
+        white-space: nowrap;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
 
-        .worker-describe {
+        font-size: 16px;
-          //margin-top: 12px;
+        float: left;
-          margin-left: 16px;
+        width: 180px;
-          line-height: 40px;
+        // color: rgb(0 255 255);
 
-          &>p {
-            margin-top: 5px;
 
-            span:first-child {
+      }
-              color: #ffffff;
-              font-size: 14px;
-            }
 
-            .num-class {
+      .left-list22 {
-              color: #ffffff;
+        height: 30px;
-              font-size: 16px;
+        line-height: 30px;
-              font-family: DINPro-Bold;
+        overflow: hidden;
-            }
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
+        cursor: pointer;
+        font-size: 16px;
+        float: left;
+        width: 180px;
 
-            span:last-child {
+
-              color: #ffffff;
+      }
-              font-size: 14px;
+
-            }
+      .active-item {
-          }
+        cursor: pointer;
-        }
+        font-size: 14px;
+        float: left;
+        width: 40%;
+        color: rgb(0 255 255);
+        font-weight: bold;
+        text-decoration: underline;
       }
     }
   }
@@ -795,7 +423,7 @@ export default {
     flex-direction: column;
 
     .top5-content {
-      //   height: 160px;
+      height: 360px;
       width: 102%;
       overflow: auto;
       margin-top: 6px;

ruoyi-ui/src/views/home/components/middle.vue

@@ -3,11 +3,13 @@
 
     <!-- 最上面 密封点概况-->
     <div class="reservoir-top">
-      <third-title title="实时报警信息">
+      <third-title title="港口信息">
       </third-title>
     
         <div  class="beautified-div">
-          <div>油气回收在线监测设备</div>
+          <div ref="chart" style="width:100%; height: 600px;"></div>
+          </div>
+          <!-- <div>油气回收在线监测设备</div>
           <dv-scroll-board :config="config" style="width:100%;height:170px" />
         </div>
         <div  class="beautified-div">
@@ -17,7 +19,7 @@
         <div  class="beautified-div">
           <div>厂界在线监测设备</div>
           <dv-scroll-board :config="config2" style="width:100%;height:170px" />
-        </div>    
+        </div>     -->
     </div>
   </div>
 </template>
@@ -25,143 +27,153 @@
 <script>
 import store from "@/store";
 import ThirdTitle from "./ThirdTitle.vue";
-import { queryDistrict } from "@/api/oil/factory";
+import * as echarts from 'echarts';
-import { NumbersConvertedToArrays } from "@/utils/arrayMethod.js";
+
-import { countGroupByType, queryDetectProgress } from "@/api/home";
+import axios from 'axios'
-import bus from '@/utils/bus.js'
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
     ThirdTitle
   },
   created() {
-    this.getCurrentTime()
-    bus.$off("changeYearEvent1")
-    bus.$on('changeYearEvent1', (val) => {
-
-      this.queryParams.year = Number(val)
-
-      // //查检测率情况
-      this.queryExam();
-
-    })
-    bus.$off("changeDistrict1")
-    bus.$on('changeDistrict1', (val1, val2) => {
-      this.queryParams.districtName = val1
-      this.districtCode = val2
-      if (val1 == '') {
-        this.districtName = '全市'
-      } else {
-        this.districtName = val1
-      }
-
-      //查密封点数量
-      this.queryPointNum();
-      // //查检测率情况
-      this.queryExam();
-    })
-  },
-  destroyed() {
    
   },
 
   mounted() {
-    // let roles=store.getters.roles
+    this.initChart();
-    // roles.forEach((val)=>{
-    //   if(val=='factory'){
-    //   this.queryParams.factoryId=store.getters.user.factoryId
-    //   }})
-    //查密封点数量
-    //this.queryPointNum();
-    // //查检测率情况
-    //this.queryExam();
   },
 
   data() {
     //这里存放数据
     return {
-      config: {
+      loadedDataUrl:'./static/shandong.json',
-        header: ['设备编号', '报警时间', '报警值'],
+      chart: null,
-        data: [
+      // 准备山东省的 geoJSON 数据
-          ['YQHS0004', '08:12:02', '100ppm'],
+      shandongGeoJSON: null,
-          ['YQHS0003', '09:13:02', '210ppm'],
+     points : [
-          ['YQHS0006', '10:12:02', '110ppm'],
+        { name: '青岛港', value: [120.345089,36.109947], list: []},
-        ]
+        { name: '日照港', value: [119.561732,35.382109], list: []},
-      },
+        { name: '烟台港', value: [121.40541,37.562686], list: [] },
-      config1: {
+        { name: '渤海湾港', value: [119.219496,36.71416], list: []}
-        header: ['设备编号', '报警时间', '报警值'],
+      ],
-        data: [
-          ['SNYDS0001', '08:12:02', '100ppm'],
-          ['SNYDS0004', '09:13:02', '210ppm'],
-          ['SNYDS0001', '18:12:02', '110ppm'],
-          ['SNYDS0002', '10:12:02', '105ppm'],
-        ]
-      },
-      config2: {
-        header: ['设备编号', '报警时间', '报警值'],
-        data: [
-          ['CJZX0002', '07:00:59', '100ppm'],
-        ]
-      },
-      districtCode: '',
-      districtName: '全市',
-      queryParams: {
-        year: undefined,
-        startTime: undefined,
-        endTime: undefined,
-        districtName: undefined,
-        factoryId: undefined,
-      },
-      time: '',
-      dateTimer: '',
-      //密封点概况
-      numTotal: {
-        pointTotal: [],
-        staticPointTotal: 0,
-        dynamicPointTotal: 0.
-      },
-      //检测率概况
-      examList: [],
    
     };
   },
 
   methods: {
    
+    async initChart() {
+  // 获取山东省的 geoJSON 数据
+  axios.get(this.loadedDataUrl, {}).then((geoJson) => {
+    // 注册山东省的地图
+    echarts.registerMap('shandong', geoJson.data);
 
-    getCurrentTime() {
+    // 初始化 ECharts 实例
+    this.chart = echarts.init(this.$refs.chart);
 
-      //获取当前时间并打印
+    // 地图标注的 4 个点信息（名称、坐标）
-      let yy = new Date().getFullYear();
+    const points = [
-      let mm = new Date().getMonth() + 1;
+      { name: '青岛港', value: [120.345089, 36.109947], list: [] },
-      let dd = new Date().getDate();
+      { name: '日照港', value: [119.561732, 35.382109], list: [] },
-      let hh = new Date().getHours();
+      { name: '烟台港', value: [121.40541, 37.562686], list: [] },
-      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
+      { name: '渤海湾港', value: [119.219496, 36.71416], list: [] }
-      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
+    ];
-      let time = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
+
-      const date = new Date()
+    // 动态生成每个点的 list 数据
-      this.queryParams.year = date.getFullYear()
+    points.forEach(point => {
-      this.queryParams.year = Number(this.queryParams.year)
+      point.list = Array.from({ length: 10 }, (_, index) => ({
+        factoryName: `${point.name}工厂${index + 1}`,
+        avgValue: (Math.random() * 100).toFixed(2)
+      }));
+    });
+
+    // 设置 ECharts 的配置项
+    const option = {
+      backgroundColor: '#1b1b1b', // 设置背景色
+      tooltip: {
+        trigger: 'item',
+        formatter: (params) => {
+          if (params.componentType === 'series') {
+            const point = points.find(p => p.name === params.name);
+            if (point) {
+              return `
+                <div style="width: 250px; padding: 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 8px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);">
+                  <div style="display: flex; justify-content: space-between; font-weight: bold; color: #333;">
+                    <div style="width: 200px;">企业名</div>
+                    <div style="width: 50px;">平均值</div>
+                  </div>
+                  <div style="margin-top: 5px;">
+                    ${point.list.map(f => `
+                      <div style="display: flex; justify-content: space-between; margin-bottom: 5px; color: #FF8C00;">
+                        <div style="width: 200px;">${f.factoryName}</div>
+                        <div style="width: 50px;">${f.avgValue}</div>
+                      </div>
+                    `).join('')}
+                  </div>
+                </div>`;
+            }
+          }
+          return ''; // 返回空以防其他情况
+        }
+      },
+      geo: {
+        map: 'shandong', // 使用山东省地图
+        center: [120.3, 36.1], // 设置地图中心
+        zoom: 2, // 放大地图
+        roam: true, // 开启缩放和拖动
+        label: {
+          show: false, // 不显示地图标签
+        },
+        itemStyle: {
+          areaColor: '#B1D0FC', // 地图区域颜色
+          borderColor: '#111', // 地图边界颜色
+          borderWidth: 1,
+        },
+        emphasis: {
+          itemStyle: {
+            areaColor: '#FFD700', // 鼠标悬停时的区域颜色
+          },
+        },
+      },
+      series: [
+        {
+          name: '港口',
+          type: 'scatter',
+          coordinateSystem: 'geo',
+          data: points,
+          symbolSize: 20, // 标记点的大小
+          itemStyle: {
+            color: '#FFD700', // 使用黄色标记点
+          },
+          label: {
+            show: true,
+            formatter: '{b}', // 标签显示名称
+            position: 'right',
+            color: '#FF8C00', // 橙黄色
+            fontWeight: 'bold', // 加粗
+            fontSize:24,
+          },
+          emphasis: {
+            label: {
+              show: true,
+              color: '#FFD700', // 鼠标悬停时的标签颜色
+              fontSize: 16, // 增加悬停时标签的字体大小
+            },
+          },
+        },
+      ],
+    };
+
+    // 渲染图表
+    this.chart.setOption(option);
+  });
+}
 
 
-    },
 
-    //查询全市密封点数量
-    async queryPointNum() {
-      countGroupByType(this.queryParams).then(response => {
-        this.numTotal.pointTotal = NumbersConvertedToArrays(response.data.pointTotal);
-        this.numTotal.staticPointTotal = response.data.staticPointTotal;
-        this.numTotal.dynamicPointTotal = response.data.dynamicPointTotal;
-      });
-    },
-    queryExam() {
-      this.examList = []
-      queryDetectProgress(this.queryParams).then(response => {
-        this.examList = response.data
-      });
-    },
 
-  },
+  
+  }
 };
 </script>
 <style lang='scss' scoped>
@@ -208,7 +220,7 @@ export default {
     display: flex;
     flex-direction: column;
     .beautified-div {
-      height: 220px;
+      height: 620px;
       background-color: rgba(29, 168, 210, 0.2); /* 背景颜色 */
       border: 1px solid #1da8d2; /* 边框颜色 */
       border-radius: 8px; /* 圆角 */

ruoyi-ui/src/views/home/components/topicHeader.vue

@@ -13,17 +13,14 @@
         <!-- <span>{{ dateStr }}</span> -->
         <span class="time">{{ time }}</span>
       </div>
-      <div class="choose-time">
+     
-        <el-date-picker v-model="chooseYear" type="year" placeholder="选择年" value-format="yyyy" @change="changeYear">
-        </el-date-picker>
-      </div>
     </div>
  
   </div>
 </div></template>
 
 <script>
-import { queryCountFactory } from "@/api/home";
+
 import bus from '@/utils/bus.js'
 export default {
   components: {},
@@ -70,22 +67,10 @@ export default {
     clearInterval(this.dateTimer);
   },
   mounted() {
-    this.queryCount();
+
   },
   methods: {
-    changeYear(val) {
+ 
-      bus.$emit('changeYearEvent', val)
-      bus.$emit('changeYearEvent1', val)
-    },
-    queryCount() {
-      //定制-青岛市
-      let params = {
-        cityCode: ''
-      }
-      queryCountFactory(params).then(response => {
-        this.factoryNum = response.msg
-      });
-    },
 
     updateTime() {
       var date = new Date() // 获取时间