gongjiale
/
gangkou
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

报警管理

This commit is contained in:
gongjiale 2024-10-13 22:55:40 +08:00
parent ced5c8b162
commit 5a677d6820
17 changed files with 614 additions and 735 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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);
}
}

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

@ -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));
}
/**
* 处理报警信息
*/

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

@ -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() {

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

@ -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() {
return isDeal;
public Long getStatus() {
return status;
}
public void setIsDeal(String isDeal) {
this.isDeal = isDeal;
public void setStats(Long stats) {
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() {

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

@ -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);
}

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

@ -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);
}

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

@ -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);
}

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

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

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

@ -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);
}
}

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

@ -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.addAlarmTask(thAlramTask);
Integer count=oilMonitorMapper.querryDealTotal(thAlramTask.getReportId());
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);
}
oilMonitorMapper.deleteAlarmTaskBYReportId(thAlramTask.getReportId());
String dealUser=SecurityUtils.getUsername();
thAlramTask.setDealUser(dealUser);
thAlramTask.setDealTime(DateUtils.getNowDate());
oilMonitorMapper.addAlarmTask(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;

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

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

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

@ -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>
<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>
<if test="status != null"> and d.staus=#{status}</if>
</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

25
ruoyi-ui/src/api/home.js
View File

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

273
ruoyi-ui/src/views/alarmMonitor/bound/index.vue
View File

@ -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-select
v-model="queryParams.isDeal"
clearable
filterable
placeholder="请选择"
>
<el-option
v-for="item in isExamSelect"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
<el-form-item label="处理状态">
<el-select v-model="queryParams.status" placeholder="请选择处理状态" style="width: 150px;">
<el-option label="正在处理" value="1"></el-option>
<el-option label="处理完成" value="2"></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
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 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 icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
<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
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="deptName" label="安装企业" 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 }}
@ -101,12 +51,7 @@
</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 }}
@ -116,131 +61,100 @@
</span>
</template>
</el-table-column>
<el-table-column
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"
>
<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 v-else style="color: red"> 否 </span>
<span @click="openDetailWindows(scope.row)" v-if="scope.row.status == 1"
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"
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"
>
<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
size="mini"
type="text"
icon="el-icon-location-information"
@click="handleShowMap(scope.row)"
>查看位置</el-button
>
<el-button size="mini" 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"
: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 @size-change="handleSizeChange" @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"
@closeAlarm="closeAlarm"
></deal-alarm>
<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"
:map-type="currentMapType"
>
<bm-map-type
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
anchor="BMAP_ANCHOR_TOP_LEFT"
></bm-map-type>
<baidu-map :center="position" :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";
@ -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>

65
ruoyi-ui/src/views/demostrate/alarm/dealAlarm.vue
View File

@ -1,22 +1,45 @@
<template>
<el-dialog title="处理报警" :visible.sync="openConfig1" :before-close="handleClose">
<el-form :model="queryParams" ref="addform" label-width="130px" :rules="dealRule">
<el-form-item label="报警原因" >
<el-input v-model="queryParams.reason" placeholder="请输入处理方式" style="width: 500px;"></el-input>
</el-form-item>
<el-form-item label="处理方式" prop="dealWay">
<el-input v-model="queryParams.dealWay" placeholder="请输入处理方式" style="width: 500px;"></el-input>
</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-date-picker>
</el-form-item>
</el-form>
<div> <el-button class="agreeButton" @click="sendMsg">确定</el-button></div>
</el-dialog>
<el-dialog title="处理报警" :visible.sync="openConfig1" :before-close="handleClose">
<el-form :model="queryParams" ref="addform" label-width="130px" :rules="dealRule">
<el-form-item label="处理状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择处理状态" style="width: 500px;">
<el-option label="正在处理" value="1"></el-option>
<el-option label="处理完成" value="2"></el-option>
</el-select>
</el-form-item>
<!-- 当状态为"正在处理"时显示备注说明 -->
<el-form-item v-if="queryParams.status === '1'" label="备注说明">
<el-input v-model="queryParams.remark" placeholder="请输入备注说明" style="width: 500px;"></el-input>
</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>
</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 => {

393
ruoyi-ui/src/views/home/components/Right.vue
View File

@ -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">
<div class="left-list" v-for="(item, index) in alarmList">
<template v-if="alarmList.length > 0">
<div class="left-list" v-for="(item, index) in alarmList">
<template v-if="item.factoryName.length > 11">
<el-tooltip class="ellipsis" :content="item.factoryName" placement="top">
<template v-if="item.factoryName.length > 11">
<el-tooltip class="ellipsis" :content="item.factoryName" placement="top">
<div class="left-list2">{{ item.factoryName }}</div>
</el-tooltip>
</template>
<template v-else>
<div class="left-list2">{{ item.factoryName }}</div>
</el-tooltip>
</template>
<template v-else>
<div class="left-list2">{{ item.factoryName }}</div>
</template>
</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 v-else>
<div class="left-list2">{{ item.sn }}</div>
</template>
<div class="left-list1" style="color: rgb(0 255 255);">{{ item.ds }}</div>
<div class="left-list1">{{ item.level }}</div>
</div>
</template>
</template>
<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,22 +52,19 @@
<!-- 下面实时报警信息 -->
<div class="right-warning-trend">
<third-title title="近3日报警数量统计">
<div class="title-right-content">
<div id="averageVocsEmission" class="average-rainfall-main" />
</div>
</third-title>
<third-title title="近3日报警数量统计"> </third-title>
<div style="height: 350px;width: 100%;">
<div id="averageVocsEmission" style="height: 350px;width: 100%;" />
</div>
</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 => {
// let res = response.data
// this.vocsList = res
// vocsPotion.yAxis[0].data = []
// vocsPotion.series[0].data = []
// const factoryList = res.map((item) => {
// return item.factoryName;
// });
// const emissonList = res.map((item) => {
// return item.emissionTotal;
// });
// 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();
// });
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
const day = String(now.getDate()).padStart(2, '0'); // 保证两位数
const formattedDate = `${year}-${month}-${day}`;
this.alarmList = []
let params = {
date: formattedDate
}
queryAlarmCount(params).then(response => {
let res = response.data
this.vocsList = res
vocsPotion.yAxis.data = ['***有限公司', '****有限公司', '*****有限公司']
vocsPotion.series[0].data = [30, 25, 20]
// vocsPotion.series[1].data =[2343.232,333,3334]
this.initEcharts();
},
getCurrentTime() {
//获取当前时间并打印
let yy = new Date().getFullYear();
let mm = new Date().getMonth() + 1;
let dd = new Date().getDate();
let hh = new Date().getHours();
let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
let time = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
const date = new Date()
this.queryParams.year = date.getFullYear()
this.queryParams.year = Number(this.queryParams.year)
vocsPotion.yAxis[0].data = []
vocsPotion.series[0].data = []
const factoryList = res.map((item) => {
return item.factoryName;
});
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();
});
},
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; /* 可选：圆角 */
}
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 {

271
ruoyi-ui/src/views/home/components/middle.vue
View File

@ -5,11 +5,11 @@
<div class="reservoir-top">
<third-title title="港口信息">
</third-title>
<div class="beautified-div">
<div ref="chart" style="width:100%; height: 600px;"></div>
</div>
<!-- <div>油气回收在线监测设备</div>
<div class="beautified-div">
<div ref="chart" style="width:100%; height: 600px;"></div>
</div>
<!-- <div>油气回收在线监测设备</div>
<dv-scroll-board :config="config" style="width:100%;height:170px" />
</div>
<div class="beautified-div">
@ -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,143 +36,152 @@ export default {
ThirdTitle
},
created() {
},
mounted() {
this.initChart();
this.getInfo();
},
data() {
//这里存放数据
return {
loadedDataUrl:'./static/shandong.json',
loadedDataUrl: './static/shandong.json',
chart: null,
// 准备山东省的 geoJSON 数据
shandongGeoJSON: null,
points : [
{ name: '青岛港', value: [120.345089,36.109947], list: []},
{ name: '日照港', value: [119.561732,35.382109], list: []},
{ name: '烟台港', value: [121.40541,37.562686], list: [] },
{ name: '渤海湾港', value: [119.219496,36.71416], list: []}
pointData: [
{ name: '青岛港', deptId: 229, value: [120.345089, 36.109947], list: [] },
{ name: '日照港', deptId: 230, value: [119.561732, 35.382109], list: [] },
{ name: '烟台港', deptId: 231, value: [121.40541, 37.562686], list: [] },
{ name: '渤海湾港', deptId: 232, value: [119.219496, 36.71416], list: [] }
],
};
},
methods: {
async initChart() {
// 获取山东省的 geoJSON 数据
axios.get(this.loadedDataUrl, {}).then((geoJson) => {
// 注册山东省的地图
echarts.registerMap('shandong', geoJson.data);
// 初始化 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 地图标注的 4 个点信息（名称、坐标）
const points = [
{ name: '青岛港', value: [120.345089, 36.109947], list: [] },
{ 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 ''; // 返回空以防其他情况
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
}
},
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', // 鼠标悬停时的区域颜色
queryAvgByGangkou(params).then(response => {
point.list = response.data
});
console.log("this.points{}", this.pointData)
this.initChart()
})
},
async initChart() {
// 获取山东省的 geoJSON 数据
axios.get(this.loadedDataUrl, {}).then((geoJson) => {
// 注册山东省的地图
echarts.registerMap('shandong', geoJson.data);
// 初始化 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
const points = this.pointData
const option = {
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 ''; // 返回空以防其他情况
}
},
},
},
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: {
geo: {
map: 'shandong', // 使用山东省地图
center: [120.3, 36.1], // 设置地图中心
zoom: 2, // 放大地图
roam: true, // 开启缩放和拖动
label: {
show: true,
color: '#FFD700', // 鼠标悬停时的标签颜色
fontSize: 16, // 增加悬停时标签的字体大小
show: false, // 不显示地图标签
},
itemStyle: {
areaColor: '#B1D0FC', // 地图区域颜色
borderColor: '#111', // 地图边界颜色
borderWidth: 1,
},
emphasis: {
itemStyle: {
areaColor: '#FFD700', // 鼠标悬停时的区域颜色
},
},
},
},
],
};
series: [
{
name: '港口',
type: 'scatter',
coordinateSystem: 'geo',
data: points,
symbolSize: 20, // 标记点的大小
itemStyle: {
color: '#FFD700', // 使用黄色标记点
},
label: {
show: true,
formatter: '{b}', // 标签显示名称
position: 'right',
color: '#FF8C00', // 橙黄色
fontWeight: 'bold', // 加粗
fontSize: 24,
},
emphasis: {
label: {
show: true,
color: '#FFD700', // 鼠标悬停时的标签颜色
fontSize: 16, // 增加悬停时标签的字体大小
},
},
},
],
};
// 渲染图表
this.chart.setOption(option);
});
}
// 渲染图表
this.chart.setOption(option);
});
}
}
};
</script>
@ -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); /* 背景颜色 */
border: 1px solid #1da8d2; /* 边框颜色 */
border-radius: 8px; /* 圆角 */
padding: 15px 25px; /* 内边距 */
margin: 5px; /* 外边距 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
font-size: 18px; /* 字体大小 */
text-align: center; /* 文本居中 */
transition: all 0.3s ease; /* 动画过渡 */
background-color: rgba(29, 168, 210, 0.2);
/* 背景颜色 */
border: 1px solid #1da8d2;
/* 边框颜色 */
border-radius: 8px;
/* 圆角 */
padding: 15px 25px;
/* 内边距 */
margin: 5px;
/* 外边距 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/* 阴影效果 */
font-size: 18px;
/* 字体大小 */
text-align: center;
/* 文本居中 */
transition: all 0.3s ease;
/* 动画过渡 */
}
}