Merge branch 'main' of http://39.101.199.1:8888/gongjiale/gangkou

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

@@ -38,10 +38,36 @@ public class HomeController extends BaseController {
         return success(list);
     }
 
+    /**
+     * 今日实时报警信息
+     * @param date
+     * @return
+     */
     @GetMapping("/queryTodayAlarm")
     public AjaxResult queryTodayAlarm(String date) {
         List<Map<String,Object>> list = homeService.queryTodayAlarm(date);
         return success(list);
     }
+    /**
+     * 近3日报警数量统计
+     * @param date
+     * @return
+     */
+    @GetMapping("/queryAlarmCount")
+    public AjaxResult queryAlarmCount(String date) {
+        List<Map<String,Object>> list = homeService.queryAlarmCount(date);
+        return success(list);
+    }
+
+    /**
+     * 分港口展示企业平均值
+     * @param date
+     * @return
+     */
+    @GetMapping("/queryAvgByGangkou")
+    public AjaxResult queryAvgByGangkou(String date,Long deptId) {
+        List<Map<String,Object>> list = homeService.queryAvgByGangkou(date,deptId);
+        return success(list);
+    }
 
 }

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

@@ -92,15 +92,7 @@ public class OilMonitorController extends BaseController {
         List<ThAlarm> list = oilMonitorService.listMonitorMap();
         return AjaxResult.success(list);
     }
-    /**
+
-     * 新增报警修复任务
-     */
-    @PostMapping("/addAlarm")
-    public AjaxResult addAlarm(@RequestBody ThAlramTask thAlramTask) {
-        thAlramTask.setCreateBy(SecurityUtils.getUsername());
-        thAlramTask.setCreateTime(DateUtils.getNowDate());
-        return toAjax(oilMonitorService.addAlarm(thAlramTask));
-    }
     /**
      * 处理报警信息
      */

RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/domain/monitor/ThAlarm.java

@@ -34,9 +34,13 @@ public class ThAlarm extends BaseEntity {
 
 
     /**
-     *是否处理
+     *处理状态 1正在 2处理完成
      */
-    private String isDeal;
+    private Long status;
+
+    private String fileUrl;
+
+    private String remark;
     private String name ;
 
     /**
@@ -145,9 +149,7 @@ public class ThAlarm extends BaseEntity {
         this.reportId = reportId;
     }
 
-    public String getIsDeal() {
+
-        return isDeal;
-    }
 
     public Long getDeptId() {
         return deptId;
@@ -165,8 +167,31 @@ public class ThAlarm extends BaseEntity {
         this.deptName = deptName;
     }
 
-    public void setIsDeal(String isDeal) {
+
-        this.isDeal = isDeal;
+    public Long getStatus() {
+        return status;
+    }
+
+    public void setStatus(Long status) {
+        this.status = status;
+    }
+
+    public String getFileUrl() {
+        return fileUrl;
+    }
+
+    public void setFileUrl(String fileUrl) {
+        this.fileUrl = fileUrl;
+    }
+
+    @Override
+    public String getRemark() {
+        return remark;
+    }
+
+    @Override
+    public void setRemark(String remark) {
+        this.remark = remark;
     }
 
     public Date getStartTime() {

RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/domain/monitor/ThAlramTask.java

@@ -22,7 +22,12 @@ public class ThAlramTask extends BaseEntity {
 
     private String reason;
 
-    private String isDeal;
+    private Long status;
+
+    private String fileUrl;
+
+    private String  remark;
+
 
     private String factoryName;
 
@@ -79,12 +84,30 @@ public class ThAlramTask extends BaseEntity {
         this.dealWay = dealWay;
     }
 
-    public String getIsDeal() {
+    public Long getStatus() {
-        return isDeal;
+        return status;
     }
 
-    public void setIsDeal(String isDeal) {
+    public void setStats(Long stats) {
-        this.isDeal = isDeal;
+        this.status = stats;
+    }
+
+    public String getFileUrl() {
+        return fileUrl;
+    }
+
+    public void setFileUrl(String fileUrl) {
+        this.fileUrl = fileUrl;
+    }
+
+    @Override
+    public String getRemark() {
+        return remark;
+    }
+
+    @Override
+    public void setRemark(String remark) {
+        this.remark = remark;
     }
 
     public Date getDealTime() {

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

@@ -17,8 +17,23 @@ public interface HomeMapper {
 
     /**
      * 查询今日报警信息
-     * @param queryTodayAlarm
+     * @param date
      * @return
      */
     List<Map<String, Object>> queryTodayAlarm(String date);
+
+    /**
+     * 近3日报警数量统计
+     * @param date
+     * @return
+     */
+    List<Map<String, Object>> queryAlarmCount(String date);
+
+    /**
+     * 统计该港区下的所有企业平均值
+     * @param date
+     * @param deptId
+     * @return
+     */
+    List<Map<String, Object>> queryAvgByGangkou(String date, Long deptId);
 }

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

@@ -66,11 +66,7 @@ public interface OilMonitorMapper {
      */
     void addAlarmTask(ThAlramTask thAlramTask);
 
-    /**
+
-     * 处理报警信息
-     * @param thAlramTask
-     */
-    void dealAlarm(ThAlramTask thAlramTask);
 
     /**
      * 查询设备历史记录
@@ -118,9 +114,5 @@ public interface OilMonitorMapper {
 
     Integer querryDealTotal(@Param("reportId") Long reportId);
 
-    /**
+
-     *
-     * @param thAlramTask
-     */
-    void dealAlarmAll(ThAlramTask thAlramTask);
 }

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

@@ -20,4 +20,17 @@ public interface IHomeService {
      * @return
      */
     List<Map<String, Object>> queryTodayAlarm(String date);
+
+    /**
+     * 近3日报警数量统计
+     * @param date
+     * @return
+     */
+    List<Map<String, Object>> queryAlarmCount(String date);
+    /**
+     * 分港口展示企业平均值
+     * @param date
+     * @return
+     */
+    List<Map<String, Object>> queryAvgByGangkou(String date, Long deptId);
 }

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

@@ -35,12 +35,7 @@ public interface IOilMonitorService {
      */
     List<ThAlarm> listAlarm(ThAlarm thAlarm);
 
-    /**
+
-     * 新增报警修复任务
-     * @param thAlramTask
-     * @return
-     */
-    int addAlarm(ThAlramTask thAlramTask);
 
     /**
      * 处理报警信息

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

@@ -1,18 +1,14 @@
 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 {
@@ -35,4 +31,14 @@ public class HomeServiceImpl implements IHomeService {
     public List<Map<String, Object>> queryTodayAlarm(String queryTodayAlarm) {
         return homeMapper.queryTodayAlarm(queryTodayAlarm);
     }
+
+    @Override
+    public List<Map<String, Object>> queryAlarmCount(String date) {
+        return homeMapper.queryAlarmCount(date);
+    }
+
+    @Override
+    public List<Map<String, Object>> queryAvgByGangkou(String date, Long deptId) {
+        return homeMapper.queryAvgByGangkou(date,deptId);
+    }
 }

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

@@ -79,50 +79,28 @@ public class OilMonitorServiceImpl implements IOilMonitorService {
     }
 
     @Override
-    @DataScope(deptAlias = "f")
+    @DataScope(deptAlias = "dept",permission="4")
     public List<ThAlarm> listAlarm(ThAlarm thAlarm) {
         List<ThAlarm> list=oilMonitorMapper.listAlarm(thAlarm);
-//        list.forEach(map->{
-//            Double lng= Double.valueOf(map.getLongitude());
-//            Double lat= Double.valueOf(map.getLatitude());
-//            double[] zuobiao= CoordinateTransformUtil.wgs84tobd09(lng,lat);
-//            map.setLng(zuobiao[0]);
-//            map.setLat(zuobiao[1]);
-//
-//        });
         return list;
     }
 
-    @Override
+
-    public int addAlarm(ThAlramTask thAlramTask) {
-        oilMonitorMapper.deleteAlarmTaskBYReportId(thAlramTask.getReportId());
-        oilMonitorMapper.addAlarmTask(thAlramTask);
-        return 1;
-    }
 
     @Override
     @DataScope(deptAlias = "f")
     public int dealAlarm(ThAlramTask thAlramTask) {
-//        oilMonitorMapper.deleteAlarmTaskBYReportId(thAlramTask.getReportId());
+        oilMonitorMapper.deleteAlarmTaskBYReportId(thAlramTask.getReportId());
-//        oilMonitorMapper.addAlarmTask(thAlramTask);
+       String dealUser=SecurityUtils.getUsername();
-        Integer count=oilMonitorMapper.querryDealTotal(thAlramTask.getReportId());
+        thAlramTask.setDealUser(dealUser);
-
+        thAlramTask.setDealTime(DateUtils.getNowDate());
-        if(count>0){
+        oilMonitorMapper.addAlarmTask(thAlramTask);
-            oilMonitorMapper.dealAlarm(thAlramTask);
-        }else{
-            logger.info("数量：{}count", count);
-            thAlramTask.setDealUser(SecurityUtils.getUsername());
-            thAlramTask.setCreateTime(DateUtils.getNowDate());
-            thAlramTask.setCreateBy(SecurityUtils.getUsername());
-            thAlramTask.setIsDeal("1");
-            oilMonitorMapper.dealAlarmAll(thAlramTask);
-        }
 
         return 1;
     }
 
     @Override
-    @DataScope(deptAlias = "f")
+    @DataScope(deptAlias = "dept",permission="4")
     public List<ThAlarm> listAlarmHistory(ThAlarm thAlarm) {
         List<ThAlarm> list=oilMonitorMapper.listAlarmHistory(thAlarm);
         return list;

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

@@ -19,7 +19,7 @@
     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
+     JOIN sys_dept pp ON p.parent_id = pp.dept_id
     GROUP BY p.dept_name, pp.dept_name
 </select>
 
@@ -31,7 +31,7 @@
     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
+     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')
@@ -39,4 +39,41 @@
 
 
 </select>
+
+<select id="queryAlarmCount" resultType="java.util.Map">
+    SELECT
+    p.dept_name AS "factoryName",
+    sum(CASE WHEN r.zt = '一级报警' OR r.zt = '二级报警' THEN 1 ELSE 0 END) AS "alarmCount"
+    FROM
+    th_device d
+    LEFT JOIN
+    th_device_report r ON d.sn = r.sn
+    JOIN
+    sys_dept p ON d.dept_id = p.dept_id
+    WHERE
+     r.REPORT_TIME >= TO_DATE(#{date}, 'YYYY-MM-DD') - 3
+     AND r.REPORT_TIME &lt; TO_DATE(#{date}, 'YYYY-MM-DD') + 1
+    GROUP BY
+    p.dept_name
+    HAVING
+    SUM(CASE WHEN r.zt = '一级报警' OR r.zt = '二级报警' THEN 1 ELSE 0 END) > 0
+    order by sum(CASE WHEN r.zt = '一级报警' OR r.zt = '二级报警' THEN 1 ELSE 0 END)
+</select>
+
+<select id="queryAvgByGangkou" resultType="java.util.Map">
+    SELECT
+    ROUND(AVG(TO_NUMBER(r.ds)), 4)    AS "avgValue",
+    dp.dept_name AS "factoryName"
+    FROM th_device_report r
+    LEFT JOIN th_device d ON d.sn = r.sn
+    JOIN sys_dept dp ON dp.dept_id = d.dept_id
+    WHERE r.sn IN (SELECT d.sn
+    FROM th_device d
+    LEFT JOIN sys_dept p ON d.dept_id = p.dept_id
+    WHERE d.dept_id IN (SELECT dept_id
+    FROM sys_dept START WITH dept_id = #{deptId}
+    CONNECT BY PRIOR dept_id = parent_id))
+    AND   r.REPORT_TIME = TO_DATE(#{date}, 'YYYY-MM-DD')
+    group by dp.dept_name
+</select>
 </mapper>

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

@@ -65,11 +65,13 @@
         <result property="gbz" column="gbz"/>
         <result property="dealUser" column="deal_user"/>
         <result property="dealWay" column="deal_way"/>
-        <result property="isDeal" column="is_deal"/>
+        <result property="status" column="status"/>
         <result property="dealTime" column="deal_time"/>
         <result property="reason" column="reason"/>
         <result property="deptId" column="dept_id"/>
         <result property="deptName" column="dept_name"/>
+        <result property="fileUrl" column="file_url"/>
+        <result property="remark" column="remark"/>
     </resultMap>
     <resultMap type="com.ruoyi.project.oil.domain.monitor.ThAlarmEchart" id="ThAlarmEchartResult">
         <result property="level1" column="level1"/>
@@ -236,10 +238,12 @@ select t.id,t. name,t.unit_no,t.system_no,t.status,t.sn,t.file_url,t.note,t.crea
         dept.dept_name,
         d.id as dealId,
         d.deal_way,
-        d.is_deal,
         d.deal_time,
         d.reason,
-        d.deal_user
+        d.deal_user,
+        d.status,
+        d.remark,
+        d.file_url
         FROM
         th_device_report
         LEFT JOIN th_device t ON th_device_report.sn = t.sn
@@ -265,14 +269,7 @@ select t.id,t. name,t.unit_no,t.system_no,t.status,t.sn,t.file_url,t.note,t.crea
             <if test="sn != null">and th_device_report.sn= #{sn}</if>
             <if test="name != null">and t.name like concat(concat('%',#{name, jdbcType=VARCHAR}),'%')</if>
             <if test="dealUser != null">and d.deal_user like concat(concat('%',#{dealUser, jdbcType=VARCHAR}),'%')</if>
-            <choose>
+            <if test="status != null"> and d.staus=#{status}</if>
-                <when test="isDeal=='1'.toString()">
-                    and d.is_deal='1'
-                </when>
-                <when test="isDeal=='0'.toString()">
-                    and (d.is_deal is null or d.is_deal='0')
-                </when>
-            </choose>
         </where>
         ${params.dataScope}
         order by th_device_report.report_time desc
@@ -287,57 +284,32 @@ select t.id,t. name,t.unit_no,t.system_no,t.status,t.sn,t.file_url,t.note,t.crea
         <trim prefix="(" suffix=")" suffixOverrides=",">
             <if test="reportId != null">report_id,</if>
             <if test="dealUser != null">deal_user,</if>
-            <if test="isDeal != null">is_deal,</if>
+            <if test="status != null">status,</if>
             <if test="createBy != null">create_by,</if>
             <if test="createTime != null">create_time,</if>
-
+            <if test="fileUrl != null">file_url,</if>
+            <if test="remark != null">remark,</if>
+            <if test="dealTime != null">deal_time,</if>
+            <if test="reason != null">reason,</if>
+            <if test="dealWay != null">deal_way,</if>
         </trim>
         <trim prefix="values (" suffix=")" suffixOverrides=",">
 
             <if test="reportId != null">#{reportId},</if>
             <if test="dealUser != null">#{dealUser},</if>
-            <if test="isDeal != null">#{isDeal},</if>
+            <if test="status != null">#{status},</if>
             <if test="createBy != null">#{createBy},</if>
             <if test="createTime != null">#{createTime},</if>
+            <if test="fileUrl != null">#{fileUrl},</if>
+            <if test="remark != null">#{remark},</if>
+            <if test="dealTime != null">#{dealTime},</if>
+            <if test="reason != null">#{reason},</if>
+            <if test="dealWay != null">#{dealWay},</if>
 
         </trim>
     </insert>
 
-    <update id="dealAlarm">
-        update th_device_deal
-        <trim prefix="SET" suffixOverrides=",">
-            <if test="dealUser != null">deal_user = #{dealUser},</if>
-            <if test="dealWay != null">deal_way = #{dealWay},</if>
-            <if test="dealTime != null">deal_time=#{dealTime},</if>
-            <if test="isDeal != null">is_deal=#{isDeal},</if>
-            <if test="reason != null">reason=#{reason},</if>
-        </trim>
-        where id = #{dealId}
-    </update>
-    <update id="dealAlarmAll">
-        insert into  th_device_deal
-        <trim prefix="(" suffix=")" suffixOverrides=",">
-            <if test="reportId != null">report_id,</if>
-            <if test="dealUser != null">deal_user,</if>
-            <if test="isDeal != null">is_deal,</if>
-            <if test="createBy != null">create_by,</if>
-            <if test="createTime != null">create_time,</if>
-            <if test="reason != null">reason,</if>
-            <if test="dealWay != null">deal_way,</if>
-            <if test="dealTime != null">deal_time,</if>
-        </trim>
-        <trim prefix="values (" suffix=")" suffixOverrides=",">
 
-            <if test="reportId != null">#{reportId},</if>
-            <if test="dealUser != null">#{dealUser},</if>
-            <if test="isDeal != null">#{isDeal},</if>
-            <if test="createBy != null">#{createBy},</if>
-            <if test="createTime != null">#{createTime},</if>
-            <if test="reason != null">#{reason},</if>
-            <if test="dealWay != null">#{dealWay},</if>
-            <if test="dealTime != null">#{dealTime},</if>
-        </trim>
-    </update>
 
     <select id="listAlarmHistory" resultMap="AlarmResult">
         SELECT

ruoyi-ui/src/api/home.js

@@ -24,14 +24,23 @@ export function queryTodayAlarm(data) {
 }
 
 
-  // 查询各个企业vocs排放量统计
+  // 查询近3日报警数量统计
-export function findEmissionCharts(data) {
+  export function queryAlarmCount(data) {
-  return request({
+    return request({
-    url: '/exam/findEmissionCharts',
+      url: '/home/queryAlarmCount',
-    method: 'post',
+      method: 'get',
-    data: data
+      params: data
-  })
+    })
-}
+  }
+    // 查询地图平均值
+    export function queryAvgByGangkou(data) {
+      return request({
+        url: '/home/queryAvgByGangkou',
+        method: 'get',
+        params: data
+      })
+    }
+  
 
 //发送消息
 export function sendMessage(data) {

ruoyi-ui/src/views/alarmMonitor/bound/index.vue

@@ -10,20 +10,10 @@
       <!-- <el-form-item label="设备编号" prop="sn">
           <el-input v-model="queryParams.sn"></el-input>
         </el-form-item> -->
-      <el-form-item label="是否处理">
+      <el-form-item label="处理状态">
-        <el-select
+        <el-select v-model="queryParams.status" placeholder="请选择处理状态" style="width: 150px;">
-          v-model="queryParams.isDeal"
+          <el-option label="正在处理" value="1"></el-option>
-          clearable
+          <el-option label="处理完成" value="2"></el-option>
-          filterable
-          placeholder="请选择"
-        >
-          <el-option
-            v-for="item in isExamSelect"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="处理人用户名" prop="dealUser">
@@ -31,67 +21,27 @@
       </el-form-item>
       <el-form-item>
         <span>日期</span>
-        <el-date-picker
+        <el-date-picker v-model="dateList" type="daterange" range-separator="至" start-placeholder="开始日期"
-          v-model="dateList"
+          end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
-          type="daterange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          format="yyyy-MM-dd HH:mm:ss"
-          value-format="yyyy-MM-dd HH:mm:ss"
-        >
         </el-date-picker>
       </el-form-item>
 
       <el-form-item>
-        <el-button
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          type="primary"
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          icon="el-icon-search"
-          size="mini"
-          @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-          >重置</el-button
-        >
       </el-form-item>
     </el-form>
 
     <el-table v-loading="loading" :data="dataList" height="700px">
-      <el-table-column
+      <el-table-column prop="deptName" label="安装企业" header-align="center" align="center" />
-        prop="deptName"
+      <el-table-column prop="name" label="设备名称" header-align="center" align="center" />
-        label="安装企业"
+      <el-table-column prop="sn" label="设备编号" header-align="center" align="center" />
-        header-align="center"
+      <el-table-column prop="reportTime" label="上报时间" header-align="center" align="center" />
-        align="center"
-      />
-      <el-table-column
-        prop="name"
-        label="设备名称"
-        header-align="center"
-        align="center"
-      />
-      <el-table-column
-        prop="sn"
-        label="设备编号"
-        header-align="center"
-        align="center"
-      />
-      <el-table-column
-        prop="reportTime"
-        label="上报时间"
-        header-align="center"
-        align="center"
-      />
       <!-- <el-table-column prop="wd" label="设备温度" header-align="center" align="center"/>
         <el-table-column prop="yl" label="设备压力" header-align="center" align="center"/> -->
       <!-- <el-table-column prop="zl" label="传感器类型" header-align="center" align="center" /> -->
       <!-- <el-table-column prop="lc" label="量程" header-align="center" align="center" /> -->
-      <el-table-column
+      <el-table-column prop="ds" label="传感器读数" header-align="center" align="center">
-        prop="ds"
-        label="传感器读数"
-        header-align="center"
-        align="center"
-      >
         <template slot-scope="scope">
           <span style="color: red">
             {{ scope.row.ds }}
@@ -101,12 +51,7 @@
           </span>
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column prop="zt" label="报警状态" header-align="center" align="center">
-        prop="zt"
-        label="报警状态"
-        header-align="center"
-        align="center"
-      >
         <template slot-scope="scope">
           <span v-if="scope.row.zt == '一级报警'" style="color: #c00808">
             {{ scope.row.zt }}
@@ -116,131 +61,100 @@
           </span>
         </template>
       </el-table-column>
-      <el-table-column
+
-        prop="dbz"
+      <el-table-column prop="isDeal" label="处理状态" header-align="center" align="center">
-        label="低报值"
-        header-align="center"
-        align="center"
-      />
-      <el-table-column
-        prop="gbz"
-        label="高报值"
-        header-align="center"
-        align="center"
-      />
-      <el-table-column
-        prop="isDeal"
-        label="是否处理"
-        header-align="center"
-        align="center"
-      >
         <template slot-scope="scope">
-          <span v-if="scope.row.isDeal == '1'" style="color: green"> 是 </span>
+          <span @click="openDetailWindows(scope.row)" v-if="scope.row.status == 1"
-          <span v-else style="color: red"> 否 </span>
+            style="color: orange;text-decoration: underline;cursor: pointer; "> 正在处理 </span>
+          <span @click="openDetailWindows(scope.row)" v-else-if="scope.row.status == 2"
+            style="color: green;text-decoration: underline;cursor: pointer;"> 处理完成 </span>
+          <span v-else style="color: red"> 未处理 </span>
         </template>
       </el-table-column>
-      <el-table-column
+
-        prop="reason"
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        label="报警原因"
-        header-align="center"
-        align="center"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="dealUser"
-        label="处理人"
-        header-align="center"
-        align="center"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="dealWay"
-        label="处理方式"
-        header-align="center"
-        align="center"
-      >
-      </el-table-column>
-      <el-table-column label="处理时间" align="center" prop="dealTime" />
-      <el-table-column
-        label="操作"
-        align="center"
-        class-name="small-padding fixed-width"
-      >
         <template slot-scope="scope">
-          <el-button
+          <el-button size="mini" type="text" icon="el-icon-thumb" @click="handleUpdate(scope.row)">下发通知</el-button>
-            size="mini"
-            type="text"
-            icon="el-icon-thumb"
-            @click="handleUpdate(scope.row)"
-            >下发通知</el-button
-          >
           <!--v-if="userName == scope.row.dealUser" -->
-          <el-button
+          <el-button size="mini" type="text" icon="el-icon-dish-1" @click="handleAlarm(scope.row)">处理报警</el-button>
-            size="mini"
+          <el-button size="mini" type="text" icon="el-icon-location-information"
-            type="text"
+            @click="handleShowMap(scope.row)">查看位置</el-button>
-            icon="el-icon-dish-1"
-            @click="handleAlarm(scope.row)"
-            >处理报警</el-button
-          >
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-location-information"
-            @click="handleShowMap(scope.row)"
-            >查看位置</el-button
-          >
         </template>
       </el-table-column>
     </el-table>
 
     <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
         @pagination="handleQuery" /> -->
-    <el-pagination
+    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
+      :current-page="queryParams.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="queryParams.pageSize"
-      @current-change="handleCurrentChange"
+      layout="total, sizes, prev, pager, next, jumper" :total="total">
-      :current-page="queryParams.pageNum"
-      :page-sizes="[10, 20, 30, 50]"
-      :page-size="queryParams.pageSize"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="total"
-    >
     </el-pagination>
     <!--发送通知-->
-    <send-msg
+    <send-msg :deviceInfo="deviceInfo" v-if="isOpenMsg" :isOpenMsg="isOpenMsg" @closeMsg="closeMsg"></send-msg>
-      :deviceInfo="deviceInfo"
-      v-if="isOpenMsg"
-      :isOpenMsg="isOpenMsg"
-      @closeMsg="closeMsg"
-    ></send-msg>
     <!--处理报警-->
-    <deal-alarm
+    <deal-alarm :deviceInfo="deviceInfo" v-if="isOpenAlarm" :isOpenAlarm="isOpenAlarm"
-      :deviceInfo="deviceInfo"
+      @closeAlarm="closeAlarm"></deal-alarm>
-      v-if="isOpenAlarm"
-      :isOpenAlarm="isOpenAlarm"
-      @closeAlarm="closeAlarm"
-    ></deal-alarm>
     <el-dialog :title="mapDialogTitle" :visible.sync="mapDialogVisible" width="30%">
       <div>
-        <baidu-map
+        <baidu-map :center="position" :zoom="16" :scroll-wheel-zoom="true" style="width: auto; height: 40vh"
-          :center="position"
+          :map-type="currentMapType">
-          :zoom="16"
+          <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
-          :scroll-wheel-zoom="true"
-          style="width: auto; height: 40vh"
-          :map-type="currentMapType"
-        >
-          <bm-map-type
-            :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
-            anchor="BMAP_ANCHOR_TOP_LEFT"
-          ></bm-map-type>
           <bm-marker :position="position"></bm-marker>
         </baidu-map>
       </div>
     </el-dialog>
+    <!--处理详情-->
+    <el-dialog title="处理详情" :visible.sync="isOpenDetail" width="50%">
+      <div>
+            <el-form :model="detailParams" label-width="130px">
+                <!-- 处理状态 -->
+                <el-form-item>
+                    <h3>处理状态</h3>
+                    <p>{{ detailParams.status === '1' ? '正在处理' : '处理完成' }}</p>
+                </el-form-item>
+                
+                <!-- 报警信息 -->
+                <el-form-item>
+                    <h3>报警信息</h3>
+                    <p>报警上报时间: <strong>{{ detailParams.reportTime }}</strong></p>
+                    <p>报警值: <strong>{{ detailParams.ds }}</strong></p>
+                </el-form-item>
+
+                <!-- 处理过程 -->
+                <el-form-item>
+                    <h3>处理过程</h3>
+                    <p>处理时间: <strong>{{ detailParams.dealTime }}</strong></p>
+                </el-form-item>
+
+                <!-- 如果状态为 1 (正在处理) 展示处理人、备注 -->
+                <el-form-item v-if="detailParams.status === '1'">
+                    <h3>处理信息</h3>
+                    <p>处理人: <strong>{{ detailParams.dealUser }}</strong></p>
+                    <p>备注: <strong>{{ detailParams.remark }}</strong></p>
+                </el-form-item>
+
+                <el-form-item v-if="detailParams.fileUrl != null">
+                    <h3>相关图片</h3>
+                    <image-preview :src="detailParams.fileUrl" :width="50" :height="50" />
+                </el-form-item>
+               
+                <!-- 如果状态为 2 (处理完成) 展示报警原因、处理人、处理方式 -->
+                <el-form-item v-if="detailParams.status === '2'">
+                    <h3>处理结果</h3>
+                    <p>报警原因: <strong>{{ detailParams.reason }}</strong></p>
+                    <p>处理人: <strong>{{ detailParams.dealUser }}</strong></p>
+                    <p>处理方式: <strong>{{ detailParams.dealWay }}</strong></p>
+                </el-form-item>
+            </el-form>
+            
+           
+        </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import store from "@/store";
+
 import { listAlarm } from "@/api/demostrate/monitor";
 import sendMsg from "@/views/demostrate/alarm/sendMsg";
 import dealAlarm from "@/views/demostrate/alarm/dealAlarm";
@@ -252,6 +166,8 @@ export default {
   dicts: [],
   data() {
     return {
+      detailParams: {},
+      isOpenDetail: false,
       loading: false,
       deviceInfo: {},
       isOpenMsg: false,
@@ -282,6 +198,7 @@ export default {
         endTime: null,
         factoryId: null,
         deptId: null,
+        status: null
       },
       userName: "",
       currentMapType: "BMAP_HYBRID_MAP",
@@ -296,6 +213,10 @@ export default {
     this.init();
   },
   methods: {
+    openDetailWindows(row) {
+      this.detailParams = row
+      this.isOpenDetail = true
+    },
     async init() {
       this.emitChange();
       this.getList();
@@ -387,5 +308,17 @@ export default {
     }
   }
 }
+h3 {
+    margin-bottom: 5px; /* 标题与内容之间的间距 */
+    color: #409EFF; /* 标题颜色 */
+}
 
+p {
+    margin: 0; /* 去掉段落的默认边距 */
+    padding: 5px 0; /* 给段落增加上下内边距 */
+}
+
+strong {
+    color: #333; /* 强调文本颜色 */
+}
 </style>

ruoyi-ui/src/views/demostrate/alarm/dealAlarm.vue

@@ -1,22 +1,45 @@
 
 <template>
-    <el-dialog title="处理报警" :visible.sync="openConfig1" :before-close="handleClose">
+ <el-dialog title="处理报警" :visible.sync="openConfig1" :before-close="handleClose">
-        <el-form :model="queryParams" ref="addform" label-width="130px" :rules="dealRule">
+    <el-form :model="queryParams" ref="addform" label-width="130px" :rules="dealRule">
-            <el-form-item label="报警原因" >
+        <el-form-item label="处理状态" prop="status">
-                <el-input v-model="queryParams.reason" placeholder="请输入处理方式" style="width: 500px;"></el-input>
+            <el-select v-model="queryParams.status" placeholder="请选择处理状态" style="width: 500px;">
-            </el-form-item>
+                <el-option label="正在处理" value="1"></el-option>
-             <el-form-item label="处理方式" prop="dealWay">
+                <el-option label="处理完成" value="2"></el-option>
-                <el-input v-model="queryParams.dealWay" placeholder="请输入处理方式" style="width: 500px;"></el-input>
+            </el-select>
-            </el-form-item>
+        </el-form-item>
-            <el-form-item label="处理时间" prop="dealTime">
+
-                <el-date-picker v-model="queryParams.dealTime" type="datetime" :picker-options="pickerOptions"
+        <!-- 当状态为"正在处理"时显示备注说明 -->
-                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
+        <el-form-item v-if="queryParams.status === '1'" label="备注说明">
-                </el-date-picker>
+            <el-input v-model="queryParams.remark" placeholder="请输入备注说明" style="width: 500px;"></el-input>
-            </el-form-item>
+        </el-form-item>
+
+        <!-- 当状态为"处理完成"时显示以下内容 -->
+        <el-form-item v-if="queryParams.status === '2'" label="报警原因">
+            <el-input v-model="queryParams.reason" placeholder="请输入报警原因" style="width: 500px;" ></el-input>
+        </el-form-item>
+        
+        <el-form-item v-if="queryParams.status === '2'" label="处理方式" prop="dealWay">
+            <el-input v-model="queryParams.dealWay" placeholder="请输入处理方式" style="width: 500px;" ></el-input>
+        </el-form-item>
+        
+        <el-form-item label="图片">
+            <image-upload @input="getImage" v-model="queryParams.fileUrl" :limit="1" />
+        </el-form-item>
+
+        <el-form-item v-if="queryParams.status === '2'" label="处理时间" prop="dealTime">
+            <el-date-picker v-model="queryParams.dealTime" type="datetime" :picker-options="pickerOptions"
+                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
+            </el-date-picker>
+        </el-form-item>
+    </el-form>
+
+    <div>
+        <el-button class="agreeButton" @click="sendMsg">确定</el-button>
+    </div>
+</el-dialog>
+
 
-        </el-form>
-        <div> <el-button class="agreeButton" @click="sendMsg">确定</el-button></div>
-    </el-dialog>
 </template>
   
 <script>
@@ -56,6 +79,7 @@ export default {
     },
     data() {
         return {
+          
             dealRule: {
                 dealTime: [
                     { required: true, message: '请选择处理时间', trigger: 'blur' },
@@ -79,11 +103,16 @@ export default {
                 dealTime: null,
                 reason:null,
                 reportId:null,
-                isDeal:'1'
+                fileUrl:null,
+                remark:null,
+                status:'',
             },
         }
     },
     methods: {
+        getImage(data){
+            this.queryParams.fileUrl = data
+        },
         sendMsg() {
         
             this.$refs["addform"].validate(valid => {

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

@@ -4,7 +4,7 @@
     <!-- 最上面 排放量统计 -->
     <div class="right-info-content">
       <third-title title="实时报警信息"> </third-title>
-      <div >
+      <div>
         <div class="left-list">
 
           <div class="left-list22">企业名称</div>
@@ -13,34 +13,34 @@
           <div class="left-list1">报警级别</div>
         </div>
         <div class="left-over">
-          <template v-if="alarmList.length>0">
+          <template v-if="alarmList.length > 0">
-          <div class="left-list" v-for="(item, index) in alarmList">
+            <div class="left-list" v-for="(item, index) in alarmList">
 
-            <template v-if="item.factoryName.length > 11">
+              <template v-if="item.factoryName.length > 11">
-              <el-tooltip class="ellipsis" :content="item.factoryName" placement="top">
+                <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>
-              </el-tooltip>
+              </template>
-            </template>
-            <template v-else>
-              <div class="left-list2">{{ item.factoryName }}</div>
-            </template>
 
 
-            <!-- </a-tooltip> -->
+              <!-- </a-tooltip> -->
 
               <template v-if="item.sn.length > 11">
-              <el-tooltip class="ellipsis" :content="item.sn" placement="top">
+                <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>
-              </el-tooltip>
+              </template>
-            </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" style="color: rgb(0 255 255);">{{ item.ds }}</div>
-            <div class="left-list1">{{ item.level }}</div>
+              <div class="left-list1">{{ item.level }}</div>
-          </div>
+            </div>
-        </template>
+          </template>
           <template v-else>
             <div class="alert-message">今日暂无报警</div>
           </template>
@@ -52,22 +52,19 @@
     <!-- 下面实时报警信息 -->
     <div class="right-warning-trend">
 
-
+      <third-title title="近3日报警数量统计"> </third-title>
-      <third-title title="近3日报警数量统计">
+      <div style="height: 350px;width: 100%;">
-        <div class="title-right-content">
+        <div id="averageVocsEmission" style="height: 350px;width: 100%;" />
-          <div id="averageVocsEmission" class="average-rainfall-main" />
+      </div>
-        </div>
-      </third-title>
     </div>
 
   </div>
 </template>
 
 <script>
-import bus from '@/utils/bus.js'
 const echarts = require("echarts");
 import ThirdTitle from "./ThirdTitle.vue";
-import { queryTodayAlarm } from "@/api/home";
+import { queryTodayAlarm, queryAlarmCount } from "@/api/home";
 const vocsPotion = {
   backgroundColor: 'rgba(7, 18, 30, 0.4)',
   tooltip: {
@@ -86,7 +83,7 @@ const vocsPotion = {
   grid: {
     top: 10,
     bottom: 10,
-    left: 100,
+    left: 180,
     right: 80
   },
   xAxis: {
@@ -120,7 +117,7 @@ const vocsPotion = {
       }
     },
   },
-  yAxis: {
+  yAxis: [{
     type: 'category',
     axisLine: {
       show: true,
@@ -131,13 +128,24 @@ const vocsPotion = {
     axisLabel: {
       color: '#35cefc',
       fontSize: 14,
-      margin: 5
+      margin: 5,
+      // 截断长标签并加省略号
+      formatter: function (value) {
+        let maxLength = 10;  // 每行最多显示10个字符
+        if (value.length > maxLength) {
+          return value.slice(0, maxLength) + '...'; // 截断并加省略号
+        }
+        return value;
+      },
+      rich: {
+        // 可选：你可以在这里进一步自定义富文本样式
+      }
     },
     axisTick: {
       show: false
     },
     data: []
-  },
+  }],
   series: [{
     name: '排放量',
     type: 'bar',
@@ -196,53 +204,43 @@ export default {
     },
     //查询排放量统计
     getVocs() {
-      // findEmissionCharts(this.queryParams).then(response => {
+      const now = new Date();
-      //   let res = response.data
+      const year = now.getFullYear();
-      //   this.vocsList = res
+      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
-      //   vocsPotion.yAxis[0].data = []
+      const day = String(now.getDate()).padStart(2, '0'); // 保证两位数
-      //   vocsPotion.series[0].data = []
+      const formattedDate = `${year}-${month}-${day}`;
-      //   const factoryList = res.map((item) => {
+      this.alarmList = []
-      //     return item.factoryName;
+      let params = {
-      //   });
+        date: formattedDate
-      //   const emissonList = res.map((item) => {
+      }
-      //     return item.emissionTotal;
+      queryAlarmCount(params).then(response => {
-      //   });
+        let res = response.data
-      //   vocsPotion.yAxis[0].data = factoryList;
+        this.vocsList = res
-      //   vocsPotion.series[0].data = emissonList;
-      //   let data2 = [];
-      //   for (let i = 0; i < emissonList.length; i++) {
-      //     if (emissonList[i] <= 4) {
-      //       data2.push(0);
-      //     } else {
-      //       data2.push(1);
-      //     }
-      //   }
-      //   vocsPotion.series[1].data = data2;
-      //   this.initEcharts();
-      // });
 
-      vocsPotion.yAxis.data = ['***有限公司', '****有限公司', '*****有限公司']
+       vocsPotion.yAxis[0].data = []
-      vocsPotion.series[0].data = [30, 25, 20]
+        vocsPotion.series[0].data = []
-      // vocsPotion.series[1].data =[2343.232,333,3334]
+        const factoryList = res.map((item) => {
-      this.initEcharts();
+          return item.factoryName;
-    },
+        });
-    getCurrentTime() {
+        const emissonList = res.map((item) => {
+          return item.alarmCount;
+        });
+        vocsPotion.yAxis[0].data = factoryList;
+        vocsPotion.series[0].data = emissonList;
+        let data2 = [];
+        for (let i = 0; i < emissonList.length; i++) {
+          if (emissonList[i] <= 4) {
+            data2.push(0);
+          } else {
+            data2.push(1);
+          }
+        }
    
-      //获取当前时间并打印
+        this.initEcharts();
-      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)
 
     },
 
-
     initEcharts() {
       const dom = document.getElementById('averageVocsEmission');
       const myEchart = echarts.init(dom);
@@ -319,23 +317,34 @@ export default {
     padding: 10px;
     display: flex;
     flex-direction: column;
-    .left-over {
-        height: 250px;
-        overflow-y: auto;
-        overflow-x: hidden;
-        width: 100%;
-      }
-      .alert-message {
-    height: 250px;              /* 设置高度 */
-    display: flex;              /* 使用 flexbox 来居中 */
-    align-items: center;        /* 垂直居中 */
-    justify-content: center;    /* 水平居中 */
-    color: gray;                /* 字体颜色为灰色 */
-    font-size: 16px;            /* 可选：设置字体大小 */
-    text-align: center;         /* 可选：文本居中对齐 */
-    border-radius: 8px;         /* 可选：圆角 */
 
-}
+    .left-over {
+      height: 250px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      width: 100%;
+    }
+
+    .alert-message {
+      height: 250px;
+      /* 设置高度 */
+      display: flex;
+      /* 使用 flexbox 来居中 */
+      align-items: center;
+      /* 垂直居中 */
+      justify-content: center;
+      /* 水平居中 */
+      color: gray;
+      /* 字体颜色为灰色 */
+      font-size: 16px;
+      /* 可选：设置字体大小 */
+      text-align: center;
+      /* 可选：文本居中对齐 */
+      border-radius: 8px;
+      /* 可选：圆角 */
+
+    }
+
     .left-list {
       text-align: center;
       color: #fff;
@@ -421,202 +430,8 @@ export default {
     padding: 10px;
     display: flex;
     flex-direction: column;
+    height: 402px;
 
-    .top5-content {
-      height: 360px;
-      width: 102%;
-      overflow: auto;
-      margin-top: 6px;
-
-      .top-list {
-        height: calc(100vh - 550px);
-        //height: 390px;
-        width: 99%;
-        margin-top: 10px;
-
-        .list-data-item {
-          //height: 169px;
-          margin-top: 5px;
-          width: 100%;
-          background: rgba(2, 16, 36, 0.4);
-
-          .item-title {
-            cursor: pointer;
-            width: 100%;
-            height: 46px;
-            background: linear-gradient(to right,
-                rgb(37, 196, 255, 0.3),
-                rgb(37, 196, 255, 0));
-
-            .storage-rate-div {
-              margin-left: 10px;
-              // margin-left: auto;
-              // margin-right: 10px;
-              line-height: 20px;
-              cursor: pointer;
-
-              .storage-rate-text {
-                text-decoration: underline;
-                color: #00deff;
-                // color: #ffffff;
-                font-size: 16px;
-              }
-
-              .percent-sign-text {
-                font-size: 16px;
-                font-family: "MircosoftYaHei";
-                color: rgb(255, 255, 255, 0.7);
-              }
-            }
-
-            display: flex;
-            flex-direction: row;
-            padding-top: 8px;
-
-            .left-num {
-              padding-left: 0;
-              text-align: center;
-              font-size: 14px;
-              color: white;
-              color: #fff;
-              width: 30px;
-              height: 30px;
-              background: url("~@/assets/common/multiScreen/index-no-water.png") no-repeat;
-              margin-left: 10px;
-              line-height: 30px;
-            }
-
-            .name-text {
-              width: 130px;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              -webkit-line-clamp: 1;
-              margin-left: 8px;
-              font-size: 14px;
-              font-family: "MircosoftYaHei";
-              font-weight: bold;
-              color: #ffffff;
-              line-height: 28px;
-            }
-          }
-
-          .reservoir-type {
-            width: 100%;
-            height: 45px;
-            display: flex;
-            flex-direction: row;
-            line-height: 45px;
-            padding-top: 10px;
-            padding-left: 10px;
-
-            span {
-              font-size: 16px;
-              color: #ffffff;
-            }
-
-            .reservoir-type1 {
-              width: 68px;
-              height: 26px;
-              background-color: rgba(230, 137, 34, 0.8);
-              border-radius: 2px;
-              line-height: 26px;
-              text-align: center;
-            }
-
-            .reservoir-ty {
-              width: 200px;
-              height: 26px;
-              border-radius: 2px;
-              line-height: 26px;
-              text-align: center;
-            }
-
-            .reservoir-type2 {
-              width: 68px;
-              height: 26px;
-              margin-left: 10px;
-              background-color: rgba(230, 137, 34, 0.8);
-              border-radius: 2px;
-              line-height: 26px;
-              text-align: center;
-
-              .reservoir-type2-name {
-                width: 68px;
-                color: #756e6e;
-                overflow: hidden;
-                /*超出部分隐藏*/
-                text-overflow: ellipsis;
-                /*超出部分显示省略号*/
-                white-space: nowrap;
-                /*规定段落中的文本不进行换行 */
-              }
-            }
-
-            .storage-rate-div1 {
-              margin-left: auto;
-              margin-right: 10px;
-              line-height: 20px;
-
-              .storage-rate-text {
-                color: #8c8585;
-                font-size: 14px;
-              }
-
-              .percent-sign-text {
-                font-size: 16px;
-                font-family: "MircosoftYaHei";
-                color: rgba(140, 118, 118, 0.7);
-              }
-            }
-          }
-
-          .water-level {
-            height: 78px;
-            width: 100%;
-            display: flex;
-            flex-direction: row;
-            background: #14375f;
-            position: relative;
-
-            .situation-total-charts {
-              width: 150px;
-              height: 78px;
-              margin-right: 20px;
-            }
-
-            .chart-info-text {
-              position: absolute;
-              left: 35px;
-              top: 20px;
-              display: flex;
-              flex-direction: column;
-              text-align: center;
-
-              .chart-num-text {
-                font-size: 14px;
-                font-weight: bold;
-
-                &::after {
-                  content: "m";
-                  font-size: 16px;
-                }
-              }
-            }
-
-            .title-text-content {
-              line-height: 28px;
-              margin-top: 10px;
-
-              .limit-text {
-                color: rgba(223, 24, 24, 0.8)
-              }
-            }
-
-          }
-        }
-      }
-    }
   }
 
   .right-warning-trend:hover {

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

@@ -6,10 +6,10 @@
       <third-title title="港口信息">
       </third-title>
 
-        <div  class="beautified-div">
+      <div class="beautified-div">
-          <div ref="chart" style="width:100%; height: 600px;"></div>
+        <div ref="chart" style="width:100%; height: 600px;"></div>
-          </div>
+      </div>
-          <!-- <div>油气回收在线监测设备</div>
+      <!-- <div>油气回收在线监测设备</div>
           <dv-scroll-board :config="config" style="width:100%;height:170px" />
         </div>
         <div  class="beautified-div">
@@ -28,7 +28,7 @@
 import store from "@/store";
 import ThirdTitle from "./ThirdTitle.vue";
 import * as echarts from 'echarts';
-
+import { queryAvgByGangkou } from "@/api/home";
 import axios from 'axios'
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -40,134 +40,143 @@ export default {
   },
 
   mounted() {
-    this.initChart();
+    this.getInfo();
   },
 
   data() {
     //这里存放数据
     return {
-      loadedDataUrl:'./static/shandong.json',
+      loadedDataUrl: './static/shandong.json',
       chart: null,
       // 准备山东省的 geoJSON 数据
       shandongGeoJSON: null,
-     points : [
+      pointData: [
-        { name: '青岛港', value: [120.345089,36.109947], list: []},
+        { name: '青岛港', deptId: 229, value: [120.345089, 36.109947], list: [] },
-        { name: '日照港', value: [119.561732,35.382109], list: []},
+        { name: '日照港', deptId: 230, value: [119.561732, 35.382109], list: [] },
-        { name: '烟台港', value: [121.40541,37.562686], list: [] },
+        { name: '烟台港', deptId: 231, value: [121.40541, 37.562686], list: [] },
-        { name: '渤海湾港', value: [119.219496,36.71416], list: []}
+        { name: '渤海湾港', deptId: 232, value: [119.219496, 36.71416], list: [] }
       ],
 
     };
   },
-
   methods: {
 
-    async initChart() {
+    getInfo() {
-  // 获取山东省的 geoJSON 数据
+      const now = new Date();
-  axios.get(this.loadedDataUrl, {}).then((geoJson) => {
+      // 减去一天
-    // 注册山东省的地图
+      now.setDate(now.getDate() - 1);
-    echarts.registerMap('shandong', geoJson.data);
+      const year = now.getFullYear();
-
+      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1 
-    // 初始化 ECharts 实例
+      const day = String(now.getDate()).padStart(2, '0'); // 保证两位数 
-    this.chart = echarts.init(this.$refs.chart);
+      const formattedDate = `${year}-${month}-${day}`;
-
+      this.pointData.forEach(point => {
-    // 地图标注的 4 个点信息（名称、坐标）
+        let params = {
-    const points = [
+          date: formattedDate,
-      { name: '青岛港', value: [120.345089, 36.109947], list: [] },
+          deptId: point.deptId
-      { name: '日照港', value: [119.561732, 35.382109], list: [] },
-      { name: '烟台港', value: [121.40541, 37.562686], list: [] },
-      { name: '渤海湾港', value: [119.219496, 36.71416], list: [] }
-    ];
-
-    // 动态生成每个点的 list 数据
-    points.forEach(point => {
-      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 ''; // 返回空以防其他情况
         }
-      },
+        queryAvgByGangkou(params).then(response => {
-      geo: {
+          point.list = response.data
-        map: 'shandong', // 使用山东省地图
+        });
-        center: [120.3, 36.1], // 设置地图中心
+        console.log("this.points{}", this.pointData)
-        zoom: 2, // 放大地图
+        this.initChart()
-        roam: true, // 开启缩放和拖动
+      })
-        label: {
+    },
-          show: false, // 不显示地图标签
+    async initChart() {
-        },
+      // 获取山东省的 geoJSON 数据
-        itemStyle: {
+      axios.get(this.loadedDataUrl, {}).then((geoJson) => {
-          areaColor: '#B1D0FC', // 地图区域颜色
+        // 注册山东省的地图
-          borderColor: '#111', // 地图边界颜色
+        echarts.registerMap('shandong', geoJson.data);
-          borderWidth: 1,
+        // 初始化 ECharts 实例
-        },
+        this.chart = echarts.init(this.$refs.chart);
-        emphasis: {
+        const points = this.pointData
-          itemStyle: {
+        const option = {
-            areaColor: '#FFD700', // 鼠标悬停时的区域颜色
+          backgroundColor: '#1b1b1b', // 设置背景色
+          tooltip: {
+            trigger: 'item',
+            formatter: (params) => {
+              if (params.componentType === 'series') {
+                const point = points.find(p => p.name === params.name);
+                if (point && point.list && point.list.length > 0) {
+                  return `
+        <div style="width: 400px; 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: 300px;">企业名</div>
+            <div style="width: 100px;">平均值（昨日）</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: 300px;">${f.factoryName}</div>
+                <div style="width: 100px;">${f.avgValue}</div>
+              </div>
+            `).join('')}
+          </div>
+        </div>`;
+                } else {
+                  // 如果没有数据，返回暂无数据提示
+                  return `
+        <div style="width: 400px; padding: 10px; background-color: rgba(255, 100, 100, 0.9); border-radius: 8px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);">
+          <div style="text-align: center; color: #333; font-weight: bold;">
+            暂无数据
+          </div>
+        </div>`;
+                }
+              }
+              return ''; // 返回空以防其他情况
+            }
           },
-        },
+          geo: {
-      },
+            map: 'shandong', // 使用山东省地图
-      series: [
+            center: [120.3, 36.1], // 设置地图中心
-        {
+            zoom: 2, // 放大地图
-          name: '港口',
+            roam: true, // 开启缩放和拖动
-          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,
+              show: false, // 不显示地图标签
-              color: '#FFD700', // 鼠标悬停时的标签颜色
+            },
-              fontSize: 16, // 增加悬停时标签的字体大小
+            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);
+        this.chart.setOption(option);
-  });
+      });
-}
+    }
 
 
 
@@ -219,17 +228,27 @@ export default {
     // height: 600px;
     display: flex;
     flex-direction: column;
+
     .beautified-div {
       height: 620px;
-      background-color: rgba(29, 168, 210, 0.2); /* 背景颜色 */
+      background-color: rgba(29, 168, 210, 0.2);
-      border: 1px solid #1da8d2; /* 边框颜色 */
+      /* 背景颜色 */
-      border-radius: 8px; /* 圆角 */
+      border: 1px solid #1da8d2;
-      padding: 15px 25px; /* 内边距 */
+      /* 边框颜色 */
-      margin: 5px; /* 外边距 */
+      border-radius: 8px;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+      /* 圆角 */
-      font-size: 18px; /* 字体大小 */
+      padding: 15px 25px;
-      text-align: center; /* 文本居中 */
+      /* 内边距 */
-      transition: all 0.3s ease; /* 动画过渡 */
+      margin: 5px;
+      /* 外边距 */
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      /* 阴影效果 */
+      font-size: 18px;
+      /* 字体大小 */
+      text-align: center;
+      /* 文本居中 */
+      transition: all 0.3s ease;
+      /* 动画过渡 */
     }
 
   }