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

@@ -38,36 +38,10 @@ 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,7 +92,15 @@ 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,13 +34,9 @@ public class ThAlarm extends BaseEntity {
 
 
     /**
-     *处理状态 1正在 2处理完成
+     *是否处理
      */
-    private Long status;
+    private String isDeal;
-
-    private String fileUrl;
-
-    private String remark;
     private String name ;
 
     /**
@@ -149,7 +145,9 @@ public class ThAlarm extends BaseEntity {
         this.reportId = reportId;
     }
 
-
+    public String getIsDeal() {
+        return isDeal;
+    }
 
     public Long getDeptId() {
         return deptId;
@@ -167,31 +165,8 @@ public class ThAlarm extends BaseEntity {
         this.deptName = deptName;
     }
 
-
+    public void setIsDeal(String isDeal) {
-    public Long getStatus() {
+        this.isDeal = isDeal;
-        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,12 +22,7 @@ public class ThAlramTask extends BaseEntity {
 
     private String reason;
 
-    private Long status;
+    private String isDeal;
-
-    private String fileUrl;
-
-    private String  remark;
-
 
     private String factoryName;
 
@@ -84,30 +79,12 @@ public class ThAlramTask extends BaseEntity {
         this.dealWay = dealWay;
     }
 
-    public Long getStatus() {
+    public String getIsDeal() {
-        return status;
+        return isDeal;
     }
 
-    public void setStats(Long stats) {
+    public void setIsDeal(String isDeal) {
-        this.status = stats;
+        this.isDeal = isDeal;
-    }
-
-    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,23 +17,8 @@ public interface HomeMapper {
 
     /**
      * 查询今日报警信息
-     * @param date
+     * @param queryTodayAlarm
      * @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,7 +66,11 @@ public interface OilMonitorMapper {
      */
     void addAlarmTask(ThAlramTask thAlramTask);
 
-
+    /**
+     * 处理报警信息
+     * @param thAlramTask
+     */
+    void dealAlarm(ThAlramTask thAlramTask);
 
     /**
      * 查询设备历史记录
@@ -114,5 +118,9 @@ 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,17 +20,4 @@ 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,7 +35,12 @@ 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,14 +1,18 @@
 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 {
@@ -31,14 +35,4 @@ 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,28 +79,50 @@ public class OilMonitorServiceImpl implements IOilMonitorService {
     }
 
     @Override
-    @DataScope(deptAlias = "dept",permission="4")
+    @DataScope(deptAlias = "f")
     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());
-       String dealUser=SecurityUtils.getUsername();
+//        oilMonitorMapper.addAlarmTask(thAlramTask);
-        thAlramTask.setDealUser(dealUser);
+        Integer count=oilMonitorMapper.querryDealTotal(thAlramTask.getReportId());
-        thAlramTask.setDealTime(DateUtils.getNowDate());
+
-        oilMonitorMapper.addAlarmTask(thAlramTask);
+        if(count>0){
+            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 = "dept",permission="4")
+    @DataScope(deptAlias = "f")
     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
-     JOIN sys_dept pp ON p.parent_id = pp.dept_id
+    LEFT 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
-     JOIN sys_dept p ON d.dept_id = p.dept_id
+    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')
@@ -39,41 +39,4 @@
 
 
 </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,13 +65,11 @@
         <result property="gbz" column="gbz"/>
         <result property="dealUser" column="deal_user"/>
         <result property="dealWay" column="deal_way"/>
-        <result property="status" column="status"/>
+        <result property="isDeal" column="is_deal"/>
         <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"/>
@@ -238,12 +236,10 @@ 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
@@ -269,7 +265,14 @@ 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>
-            <if test="status != null"> and d.staus=#{status}</if>
+            <choose>
+                <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
@@ -284,32 +287,57 @@ 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="status != null">status,</if>
+            <if test="isDeal != null">is_deal,</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="status != null">#{status},</if>
+            <if test="isDeal != null">#{isDeal},</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,23 +24,14 @@ export function queryTodayAlarm(data) {
 }
 
 
-  // 查询近3日报警数量统计
+  // 查询各个企业vocs排放量统计
-  export function queryAlarmCount(data) {
+export function findEmissionCharts(data) {
-    return request({
+  return request({
-      url: '/home/queryAlarmCount',
+    url: '/exam/findEmissionCharts',
-      method: 'get',
+    method: 'post',
-      params: data
+    data: 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,10 +10,20 @@
       <!-- <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 v-model="queryParams.status" placeholder="请选择处理状态" style="width: 150px;">
+        <el-select
-          <el-option label="正在处理" value="1"></el-option>
+          v-model="queryParams.isDeal"
-          <el-option label="处理完成" value="2"></el-option>
+          clearable
+          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">
@@ -21,27 +31,67 @@
       </el-form-item>
       <el-form-item>
         <span>日期</span>
-        <el-date-picker v-model="dateList" type="daterange" range-separator="至" start-placeholder="开始日期"
+        <el-date-picker
-          end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
+          v-model="dateList"
+          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 type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          type="primary"
+          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 prop="deptName" label="安装企业" header-align="center" align="center" />
+      <el-table-column
-      <el-table-column prop="name" label="设备名称" header-align="center" align="center" />
+        prop="deptName"
-      <el-table-column prop="sn" label="设备编号" header-align="center" align="center" />
+        label="安装企业"
-      <el-table-column prop="reportTime" label="上报时间" header-align="center" align="center" />
+        header-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 prop="ds" label="传感器读数" header-align="center" align="center">
+      <el-table-column
+        prop="ds"
+        label="传感器读数"
+        header-align="center"
+        align="center"
+      >
         <template slot-scope="scope">
           <span style="color: red">
             {{ scope.row.ds }}
@@ -51,7 +101,12 @@
           </span>
         </template>
       </el-table-column>
-      <el-table-column prop="zt" label="报警状态" header-align="center" align="center">
+      <el-table-column
+        prop="zt"
+        label="报警状态"
+        header-align="center"
+        align="center"
+      >
         <template slot-scope="scope">
           <span v-if="scope.row.zt == '一级报警'" style="color: #c00808">
             {{ scope.row.zt }}
@@ -61,100 +116,131 @@
           </span>
         </template>
       </el-table-column>
-
+      <el-table-column
-      <el-table-column prop="isDeal" label="处理状态" header-align="center" align="center">
+        prop="dbz"
+        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 @click="openDetailWindows(scope.row)" v-if="scope.row.status == 1"
+          <span v-if="scope.row.isDeal == '1'" style="color: green"> 是 </span>
-            style="color: orange;text-decoration: underline;cursor: pointer; "> 正在处理 </span>
+          <span v-else style="color: red"> 否 </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
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        prop="reason"
+        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 size="mini" type="text" icon="el-icon-thumb" @click="handleUpdate(scope.row)">下发通知</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-thumb"
+            @click="handleUpdate(scope.row)"
+            >下发通知</el-button
+          >
           <!--v-if="userName == scope.row.dealUser" -->
-          <el-button size="mini" type="text" icon="el-icon-dish-1" @click="handleAlarm(scope.row)">处理报警</el-button>
+          <el-button
-          <el-button size="mini" type="text" icon="el-icon-location-information"
+            size="mini"
-            @click="handleShowMap(scope.row)">查看位置</el-button>
+            type="text"
+            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 @size-change="handleSizeChange" @current-change="handleCurrentChange"
+    <el-pagination
-      :current-page="queryParams.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="queryParams.pageSize"
+      @size-change="handleSizeChange"
-      layout="total, sizes, prev, pager, next, jumper" :total="total">
+      @current-change="handleCurrentChange"
+      :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 :deviceInfo="deviceInfo" v-if="isOpenMsg" :isOpenMsg="isOpenMsg" @closeMsg="closeMsg"></send-msg>
+    <send-msg
+      :deviceInfo="deviceInfo"
+      v-if="isOpenMsg"
+      :isOpenMsg="isOpenMsg"
+      @closeMsg="closeMsg"
+    ></send-msg>
     <!--处理报警-->
-    <deal-alarm :deviceInfo="deviceInfo" v-if="isOpenAlarm" :isOpenAlarm="isOpenAlarm"
+    <deal-alarm
-      @closeAlarm="closeAlarm"></deal-alarm>
+      :deviceInfo="deviceInfo"
+      v-if="isOpenAlarm"
+      :isOpenAlarm="isOpenAlarm"
+      @closeAlarm="closeAlarm"
+    ></deal-alarm>
     <el-dialog :title="mapDialogTitle" :visible.sync="mapDialogVisible" width="30%">
       <div>
-        <baidu-map :center="position" :zoom="16" :scroll-wheel-zoom="true" style="width: auto; height: 40vh"
+        <baidu-map
-          :map-type="currentMapType">
+          :center="position"
-          <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
+          :zoom="16"
+          :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";
@@ -166,8 +252,6 @@ export default {
   dicts: [],
   data() {
     return {
-      detailParams: {},
-      isOpenDetail: false,
       loading: false,
       deviceInfo: {},
       isOpenMsg: false,
@@ -198,7 +282,6 @@ export default {
         endTime: null,
         factoryId: null,
         deptId: null,
-        status: null
       },
       userName: "",
       currentMapType: "BMAP_HYBRID_MAP",
@@ -213,10 +296,6 @@ export default {
     this.init();
   },
   methods: {
-    openDetailWindows(row) {
-      this.detailParams = row
-      this.isOpenDetail = true
-    },
     async init() {
       this.emitChange();
       this.getList();
@@ -308,17 +387,5 @@ 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,45 +1,22 @@
 
 <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="处理状态" prop="status">
+            <el-form-item label="报警原因" >
-            <el-select v-model="queryParams.status" placeholder="请选择处理状态" style="width: 500px;">
+                <el-input v-model="queryParams.reason" placeholder="请输入处理方式" style="width: 500px;"></el-input>
-                <el-option label="正在处理" value="1"></el-option>
+            </el-form-item>
-                <el-option label="处理完成" value="2"></el-option>
+             <el-form-item label="处理方式" prop="dealWay">
-            </el-select>
+                <el-input v-model="queryParams.dealWay" placeholder="请输入处理方式" style="width: 500px;"></el-input>
-        </el-form-item>
+            </el-form-item>
-
+            <el-form-item label="处理时间" prop="dealTime">
-        <!-- 当状态为"正在处理"时显示备注说明 -->
+                <el-date-picker v-model="queryParams.dealTime" type="datetime" :picker-options="pickerOptions"
-        <el-form-item v-if="queryParams.status === '1'" label="备注说明">
+                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
-            <el-input v-model="queryParams.remark" placeholder="请输入备注说明" style="width: 500px;"></el-input>
+                </el-date-picker>
-        </el-form-item>
+            </el-form-item>
-
+           
-        <!-- 当状态为"处理完成"时显示以下内容 -->
+        </el-form>
-        <el-form-item v-if="queryParams.status === '2'" label="报警原因">
+        <div> <el-button class="agreeButton" @click="sendMsg">确定</el-button></div>
-            <el-input v-model="queryParams.reason" placeholder="请输入报警原因" style="width: 500px;" ></el-input>
+    </el-dialog>
-        </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>
-
-
 </template>
   
 <script>
@@ -79,7 +56,6 @@ export default {
     },
     data() {
         return {
-          
             dealRule: {
                 dealTime: [
                     { required: true, message: '请选择处理时间', trigger: 'blur' },
@@ -103,16 +79,11 @@ export default {
                 dealTime: null,
                 reason:null,
                 reportId:null,
-                fileUrl:null,
+                isDeal:'1'
-                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>
-              </template>
+              </el-tooltip>
+            </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>
-              </template>
+              </el-tooltip>
-
+            </template>
-              <div class="left-list1" style="color: rgb(0 255 255);">{{ item.ds }}</div>
+            <template v-else>
-              <div class="left-list1">{{ item.level }}</div>
+              <div class="left-list2">{{ item.sn }}</div>
-            </div>
+            </template>
-          </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>
@@ -52,19 +52,22 @@
     <!-- 下面实时报警信息 -->
     <div class="right-warning-trend">
 
-      <third-title title="近3日报警数量统计"> </third-title>
+
-      <div style="height: 350px;width: 100%;">
+      <third-title title="近3日报警数量统计">
-        <div id="averageVocsEmission" style="height: 350px;width: 100%;" />
+        <div class="title-right-content">
-      </div>
+          <div id="averageVocsEmission" class="average-rainfall-main" />
+        </div>
+      </third-title>
     </div>
 
   </div>
 </template>
 
 <script>
+import bus from '@/utils/bus.js'
 const echarts = require("echarts");
 import ThirdTitle from "./ThirdTitle.vue";
-import { queryTodayAlarm, queryAlarmCount } from "@/api/home";
+import { queryTodayAlarm } from "@/api/home";
 const vocsPotion = {
   backgroundColor: 'rgba(7, 18, 30, 0.4)',
   tooltip: {
@@ -83,7 +86,7 @@ const vocsPotion = {
   grid: {
     top: 10,
     bottom: 10,
-    left: 180,
+    left: 100,
     right: 80
   },
   xAxis: {
@@ -117,7 +120,7 @@ const vocsPotion = {
       }
     },
   },
-  yAxis: [{
+  yAxis: {
     type: 'category',
     axisLine: {
       show: true,
@@ -128,24 +131,13 @@ 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',
@@ -204,43 +196,53 @@ export default {
     },
     //查询排放量统计
     getVocs() {
-      const now = new Date();
+      // findEmissionCharts(this.queryParams).then(response => {
-      const year = now.getFullYear();
+      //   let res = response.data
-      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
+      //   this.vocsList = res
-      const day = String(now.getDate()).padStart(2, '0'); // 保证两位数
+      //   vocsPotion.yAxis[0].data = []
-      const formattedDate = `${year}-${month}-${day}`;
+      //   vocsPotion.series[0].data = []
-      this.alarmList = []
+      //   const factoryList = res.map((item) => {
-      let params = {
+      //     return item.factoryName;
-        date: formattedDate
+      //   });
-      }
+      //   const emissonList = res.map((item) => {
-      queryAlarmCount(params).then(response => {
+      //     return item.emissionTotal;
-        let res = response.data
+      //   });
-        this.vocsList = res
+      //   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);
+      //     }
+      //   }
+      //   vocsPotion.series[1].data = data2;
+      //   this.initEcharts();
+      // });
 
-       vocsPotion.yAxis[0].data = []
+      vocsPotion.yAxis.data = ['***有限公司', '****有限公司', '*****有限公司']
-        vocsPotion.series[0].data = []
+      vocsPotion.series[0].data = [30, 25, 20]
-        const factoryList = res.map((item) => {
+      // vocsPotion.series[1].data =[2343.232,333,3334]
-          return item.factoryName;
+      this.initEcharts();
-        });
+    },
-        const emissonList = res.map((item) => {
+    getCurrentTime() {
-          return item.alarmCount;
+
-        });
+      //获取当前时间并打印
-        vocsPotion.yAxis[0].data = factoryList;
+      let yy = new Date().getFullYear();
-        vocsPotion.series[0].data = emissonList;
+      let mm = new Date().getMonth() + 1;
-        let data2 = [];
+      let dd = new Date().getDate();
-        for (let i = 0; i < emissonList.length; i++) {
+      let hh = new Date().getHours();
-          if (emissonList[i] <= 4) {
+      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
-            data2.push(0);
+      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
-          } else {
+      let time = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
-            data2.push(1);
+      const date = new Date()
-          }
+      this.queryParams.year = date.getFullYear()
-        }
+      this.queryParams.year = Number(this.queryParams.year)
-   
-        this.initEcharts();
-      });
 
     },
 
+
     initEcharts() {
       const dom = document.getElementById('averageVocsEmission');
       const myEchart = echarts.init(dom);
@@ -317,34 +319,23 @@ export default {
     padding: 10px;
     display: flex;
     flex-direction: column;
-
     .left-over {
-      height: 250px;
+        height: 250px;
-      overflow-y: auto;
+        overflow-y: auto;
-      overflow-x: hidden;
+        overflow-x: hidden;
-      width: 100%;
+        width: 100%;
-    }
+      }
-
+      .alert-message {
-    .alert-message {
+    height: 250px;              /* 设置高度 */
-      height: 250px;
+    display: flex;              /* 使用 flexbox 来居中 */
-      /* 设置高度 */
+    align-items: center;        /* 垂直居中 */
-      display: flex;
+    justify-content: center;    /* 水平居中 */
-      /* 使用 flexbox 来居中 */
+    color: gray;                /* 字体颜色为灰色 */
-      align-items: center;
+    font-size: 16px;            /* 可选：设置字体大小 */
-      /* 垂直居中 */
+    text-align: center;         /* 可选：文本居中对齐 */
-      justify-content: center;
+    border-radius: 8px;         /* 可选：圆角 */
-      /* 水平居中 */
+ 
-      color: gray;
+}
-      /* 字体颜色为灰色 */
-      font-size: 16px;
-      /* 可选：设置字体大小 */
-      text-align: center;
-      /* 可选：文本居中对齐 */
-      border-radius: 8px;
-      /* 可选：圆角 */
-
-    }
-
     .left-list {
       text-align: center;
       color: #fff;
@@ -430,8 +421,202 @@ 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

@@ -5,11 +5,11 @@
     <div class="reservoir-top">
       <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引入的组件需要注入到对象中才能使用
@@ -36,152 +36,143 @@ export default {
     ThirdTitle
   },
   created() {
-
+   
   },
 
   mounted() {
-    this.getInfo();
+    this.initChart();
   },
 
   data() {
     //这里存放数据
     return {
-      loadedDataUrl: './static/shandong.json',
+      loadedDataUrl:'./static/shandong.json',
       chart: null,
       // 准备山东省的 geoJSON 数据
       shandongGeoJSON: null,
-      pointData: [
+     points : [
-        { name: '青岛港', deptId: 229, value: [120.345089, 36.109947], list: [] },
+        { name: '青岛港', value: [120.345089,36.109947], list: []},
-        { name: '日照港', deptId: 230, value: [119.561732, 35.382109], list: [] },
+        { name: '日照港', value: [119.561732,35.382109], list: []},
-        { name: '烟台港', deptId: 231, value: [121.40541, 37.562686], list: [] },
+        { name: '烟台港', value: [121.40541,37.562686], list: [] },
-        { name: '渤海湾港', deptId: 232, value: [119.219496, 36.71416], list: [] }
+        { name: '渤海湾港', value: [119.219496,36.71416], list: []}
       ],
-
+   
     };
   },
+
   methods: {
-
+   
-    getInfo() {
-      const now = new Date();
-      // 减去一天
-      now.setDate(now.getDate() - 1);
-      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.pointData.forEach(point => {
-        let params = {
-          date: formattedDate,
-          deptId: point.deptId
-        }
-        queryAvgByGangkou(params).then(response => {
-          point.list = response.data
-        });
-        console.log("this.points{}", this.pointData)
-        this.initChart()
-      })
-    },
     async initChart() {
-      // 获取山东省的 geoJSON 数据
+  // 获取山东省的 geoJSON 数据
-      axios.get(this.loadedDataUrl, {}).then((geoJson) => {
+  axios.get(this.loadedDataUrl, {}).then((geoJson) => {
-        // 注册山东省的地图
+    // 注册山东省的地图
-        echarts.registerMap('shandong', geoJson.data);
+    echarts.registerMap('shandong', geoJson.data);
-        // 初始化 ECharts 实例
+
-        this.chart = echarts.init(this.$refs.chart);
+    // 初始化 ECharts 实例
-        const points = this.pointData
+    this.chart = echarts.init(this.$refs.chart);
-        const option = {
+
-          backgroundColor: '#1b1b1b', // 设置背景色
+    // 地图标注的 4 个点信息（名称、坐标）
-          tooltip: {
+    const points = [
-            trigger: 'item',
+      { name: '青岛港', value: [120.345089, 36.109947], list: [] },
-            formatter: (params) => {
+      { name: '日照港', value: [119.561732, 35.382109], list: [] },
-              if (params.componentType === 'series') {
+      { name: '烟台港', value: [121.40541, 37.562686], list: [] },
-                const point = points.find(p => p.name === params.name);
+      { name: '渤海湾港', value: [119.219496, 36.71416], list: [] }
-                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);">
+    // 动态生成每个点的 list 数据
-          <div style="display: flex; justify-content: space-between; font-weight: bold; color: #333;">
+    points.forEach(point => {
-            <div style="width: 300px;">企业名</div>
+      point.list = Array.from({ length: 10 }, (_, index) => ({
-            <div style="width: 100px;">平均值（昨日）</div>
+        factoryName: `${point.name}工厂${index + 1}`,
-          </div>
+        avgValue: (Math.random() * 100).toFixed(2)
-          <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>
+    // 设置 ECharts 的配置项
-                <div style="width: 100px;">${f.avgValue}</div>
+    const option = {
-              </div>
+      backgroundColor: '#1b1b1b', // 设置背景色
-            `).join('')}
+      tooltip: {
-          </div>
+        trigger: 'item',
-        </div>`;
+        formatter: (params) => {
-                } else {
+          if (params.componentType === 'series') {
-                  // 如果没有数据，返回暂无数据提示
+            const point = points.find(p => p.name === params.name);
-                  return `
+            if (point) {
-        <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);">
+              return `
-          <div style="text-align: center; color: #333; font-weight: bold;">
+                <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>
+                    <div style="width: 200px;">企业名</div>
-        </div>`;
+                    <div style="width: 50px;">平均值</div>
-                }
+                  </div>
-              }
+                  <div style="margin-top: 5px;">
-              return ''; // 返回空以防其他情况
+                    ${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', // 鼠标悬停时的区域颜色
           },
-          geo: {
+        },
-            map: 'shandong', // 使用山东省地图
+      },
-            center: [120.3, 36.1], // 设置地图中心
+      series: [
-            zoom: 2, // 放大地图
+        {
-            roam: true, // 开启缩放和拖动
+          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: false, // 不显示地图标签
+              show: true,
-            },
+              color: '#FFD700', // 鼠标悬停时的标签颜色
-            itemStyle: {
+              fontSize: 16, // 增加悬停时标签的字体大小
-              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);
+  });
+}
 
 
 
 
+  
   }
 };
 </script>
@@ -228,27 +219,17 @@ 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: 1px solid #1da8d2;
+      border-radius: 8px; /* 圆角 */
-      /* 边框颜色 */
+      padding: 15px 25px; /* 内边距 */
-      border-radius: 8px;
+      margin: 5px; /* 外边距 */
-      /* 圆角 */
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
-      padding: 15px 25px;
+      font-size: 18px; /* 字体大小 */
-      /* 内边距 */
+      text-align: center; /* 文本居中 */
-      margin: 5px;
+      transition: all 0.3s ease; /* 动画过渡 */
-      /* 外边距 */
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-      /* 阴影效果 */
-      font-size: 18px;
-      /* 字体大小 */
-      text-align: center;
-      /* 文本居中 */
-      transition: all 0.3s ease;
-      /* 动画过渡 */
     }
 
   }