报警管理

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

View File

@ -38,10 +38,36 @@ public class HomeController extends BaseController {
return success(list); return success(list);
} }
/**
* 今日实时报警信息
* @param date
* @return
*/
@GetMapping("/queryTodayAlarm") @GetMapping("/queryTodayAlarm")
public AjaxResult queryTodayAlarm(String date) { public AjaxResult queryTodayAlarm(String date) {
List<Map<String,Object>> list = homeService.queryTodayAlarm(date); List<Map<String,Object>> list = homeService.queryTodayAlarm(date);
return success(list); 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);
}
} }

View File

@ -92,15 +92,7 @@ public class OilMonitorController extends BaseController {
List<ThAlarm> list = oilMonitorService.listMonitorMap(); List<ThAlarm> list = oilMonitorService.listMonitorMap();
return AjaxResult.success(list); 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));
}
/** /**
* 处理报警信息 * 处理报警信息
*/ */

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 ; private String name ;
/** /**
@ -145,9 +149,7 @@ public class ThAlarm extends BaseEntity {
this.reportId = reportId; this.reportId = reportId;
} }
public String getIsDeal() {
return isDeal;
}
public Long getDeptId() { public Long getDeptId() {
return deptId; return deptId;
@ -165,8 +167,31 @@ public class ThAlarm extends BaseEntity {
this.deptName = deptName; 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() { public Date getStartTime() {

View File

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

View File

@ -17,8 +17,23 @@ public interface HomeMapper {
/** /**
* 查询今日报警信息 * 查询今日报警信息
* @param queryTodayAlarm * @param date
* @return * @return
*/ */
List<Map<String, Object>> queryTodayAlarm(String date); 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);
} }

View File

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

View File

@ -20,4 +20,17 @@ public interface IHomeService {
* @return * @return
*/ */
List<Map<String, Object>> queryTodayAlarm(String date); 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);
} }

View File

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

View File

@ -1,18 +1,14 @@
package com.ruoyi.project.oil.service.impl; 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.mapper.HomeMapper;
import com.ruoyi.project.oil.service.IHomeService; import com.ruoyi.project.oil.service.IHomeService;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service; 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.List;
import java.util.Map; import java.util.Map;
import static com.ruoyi.framework.web.domain.AjaxResult.success;
@Service @Service
public class HomeServiceImpl implements IHomeService { public class HomeServiceImpl implements IHomeService {
@ -35,4 +31,14 @@ public class HomeServiceImpl implements IHomeService {
public List<Map<String, Object>> queryTodayAlarm(String queryTodayAlarm) { public List<Map<String, Object>> queryTodayAlarm(String queryTodayAlarm) {
return homeMapper.queryTodayAlarm(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);
}
} }

View File

@ -79,50 +79,28 @@ public class OilMonitorServiceImpl implements IOilMonitorService {
} }
@Override @Override
@DataScope(deptAlias = "f") @DataScope(deptAlias = "dept",permission="4")
public List<ThAlarm> listAlarm(ThAlarm thAlarm) { public List<ThAlarm> listAlarm(ThAlarm thAlarm) {
List<ThAlarm> list=oilMonitorMapper.listAlarm(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; return list;
} }
@Override
public int addAlarm(ThAlramTask thAlramTask) {
oilMonitorMapper.deleteAlarmTaskBYReportId(thAlramTask.getReportId());
oilMonitorMapper.addAlarmTask(thAlramTask);
return 1;
}
@Override @Override
@DataScope(deptAlias = "f") @DataScope(deptAlias = "f")
public int dealAlarm(ThAlramTask thAlramTask) { public int dealAlarm(ThAlramTask thAlramTask) {
// oilMonitorMapper.deleteAlarmTaskBYReportId(thAlramTask.getReportId()); oilMonitorMapper.deleteAlarmTaskBYReportId(thAlramTask.getReportId());
// oilMonitorMapper.addAlarmTask(thAlramTask); String dealUser=SecurityUtils.getUsername();
Integer count=oilMonitorMapper.querryDealTotal(thAlramTask.getReportId()); thAlramTask.setDealUser(dealUser);
thAlramTask.setDealTime(DateUtils.getNowDate());
if(count>0){ oilMonitorMapper.addAlarmTask(thAlramTask);
oilMonitorMapper.dealAlarm(thAlramTask);
}else{
logger.info("数量:{}count", count);
thAlramTask.setDealUser(SecurityUtils.getUsername());
thAlramTask.setCreateTime(DateUtils.getNowDate());
thAlramTask.setCreateBy(SecurityUtils.getUsername());
thAlramTask.setIsDeal("1");
oilMonitorMapper.dealAlarmAll(thAlramTask);
}
return 1; return 1;
} }
@Override @Override
@DataScope(deptAlias = "f") @DataScope(deptAlias = "dept",permission="4")
public List<ThAlarm> listAlarmHistory(ThAlarm thAlarm) { public List<ThAlarm> listAlarmHistory(ThAlarm thAlarm) {
List<ThAlarm> list=oilMonitorMapper.listAlarmHistory(thAlarm); List<ThAlarm> list=oilMonitorMapper.listAlarmHistory(thAlarm);
return list; return list;

View File

@ -19,7 +19,7 @@
pp.dept_name AS "gangqu" pp.dept_name AS "gangqu"
FROM th_device d FROM th_device d
LEFT 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 JOIN sys_dept pp ON p.parent_id = pp.dept_id
GROUP BY p.dept_name, pp.dept_name GROUP BY p.dept_name, pp.dept_name
</select> </select>
@ -31,7 +31,7 @@
r.zt AS "level" r.zt AS "level"
FROM th_device d FROM th_device d
LEFT JOIN th_device_report r ON d.sn = r.sn 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 LEFT JOIN sys_dept pp ON p.parent_id = pp.dept_id
WHERE WHERE
r.REPORT_TIME = TO_DATE(#{date}, 'YYYY-MM-DD') r.REPORT_TIME = TO_DATE(#{date}, 'YYYY-MM-DD')
@ -39,4 +39,41 @@
</select> </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> </mapper>

View File

@ -65,11 +65,13 @@
<result property="gbz" column="gbz"/> <result property="gbz" column="gbz"/>
<result property="dealUser" column="deal_user"/> <result property="dealUser" column="deal_user"/>
<result property="dealWay" column="deal_way"/> <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="dealTime" column="deal_time"/>
<result property="reason" column="reason"/> <result property="reason" column="reason"/>
<result property="deptId" column="dept_id"/> <result property="deptId" column="dept_id"/>
<result property="deptName" column="dept_name"/> <result property="deptName" column="dept_name"/>
<result property="fileUrl" column="file_url"/>
<result property="remark" column="remark"/>
</resultMap> </resultMap>
<resultMap type="com.ruoyi.project.oil.domain.monitor.ThAlarmEchart" id="ThAlarmEchartResult"> <resultMap type="com.ruoyi.project.oil.domain.monitor.ThAlarmEchart" id="ThAlarmEchartResult">
<result property="level1" column="level1"/> <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, dept.dept_name,
d.id as dealId, d.id as dealId,
d.deal_way, d.deal_way,
d.is_deal,
d.deal_time, d.deal_time,
d.reason, d.reason,
d.deal_user d.deal_user,
d.status,
d.remark,
d.file_url
FROM FROM
th_device_report th_device_report
LEFT JOIN th_device t ON th_device_report.sn = t.sn 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="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="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="dealUser != null">and d.deal_user like concat(concat('%',#{dealUser, jdbcType=VARCHAR}),'%')</if>
<choose> <if test="status != null"> and d.staus=#{status}</if>
<when test="isDeal=='1'.toString()">
and d.is_deal='1'
</when>
<when test="isDeal=='0'.toString()">
and (d.is_deal is null or d.is_deal='0')
</when>
</choose>
</where> </where>
${params.dataScope} ${params.dataScope}
order by th_device_report.report_time desc 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=","> <trim prefix="(" suffix=")" suffixOverrides=",">
<if test="reportId != null">report_id,</if> <if test="reportId != null">report_id,</if>
<if test="dealUser != null">deal_user,</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="createBy != null">create_by,</if>
<if test="createTime != null">create_time,</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>
<trim prefix="values (" suffix=")" suffixOverrides=","> <trim prefix="values (" suffix=")" suffixOverrides=",">
<if test="reportId != null">#{reportId},</if> <if test="reportId != null">#{reportId},</if>
<if test="dealUser != null">#{dealUser},</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="createBy != null">#{createBy},</if>
<if test="createTime != null">#{createTime},</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> </trim>
</insert> </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 id="listAlarmHistory" resultMap="AlarmResult">
SELECT SELECT

View File

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

View File

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

View File

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

View File

@ -52,22 +52,19 @@
<!-- 下面实时报警信息 --> <!-- 下面实时报警信息 -->
<div class="right-warning-trend"> <div class="right-warning-trend">
<third-title title="近3日报警数量统计"> </third-title>
<third-title title="近3日报警数量统计"> <div style="height: 350px;width: 100%;">
<div class="title-right-content"> <div id="averageVocsEmission" style="height: 350px;width: 100%;" />
<div id="averageVocsEmission" class="average-rainfall-main" />
</div> </div>
</third-title>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import bus from '@/utils/bus.js'
const echarts = require("echarts"); const echarts = require("echarts");
import ThirdTitle from "./ThirdTitle.vue"; import ThirdTitle from "./ThirdTitle.vue";
import { queryTodayAlarm } from "@/api/home"; import { queryTodayAlarm, queryAlarmCount } from "@/api/home";
const vocsPotion = { const vocsPotion = {
backgroundColor: 'rgba(7, 18, 30, 0.4)', backgroundColor: 'rgba(7, 18, 30, 0.4)',
tooltip: { tooltip: {
@ -86,7 +83,7 @@ const vocsPotion = {
grid: { grid: {
top: 10, top: 10,
bottom: 10, bottom: 10,
left: 100, left: 180,
right: 80 right: 80
}, },
xAxis: { xAxis: {
@ -120,7 +117,7 @@ const vocsPotion = {
} }
}, },
}, },
yAxis: { yAxis: [{
type: 'category', type: 'category',
axisLine: { axisLine: {
show: true, show: true,
@ -131,13 +128,24 @@ const vocsPotion = {
axisLabel: { axisLabel: {
color: '#35cefc', color: '#35cefc',
fontSize: 14, 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: { axisTick: {
show: false show: false
}, },
data: [] data: []
}, }],
series: [{ series: [{
name: '排放量', name: '排放量',
type: 'bar', type: 'bar',
@ -196,53 +204,43 @@ export default {
}, },
// //
getVocs() { getVocs() {
// findEmissionCharts(this.queryParams).then(response => { const now = new Date();
// let res = response.data const year = now.getFullYear();
// this.vocsList = res const month = String(now.getMonth() + 1).padStart(2, '0'); // 01
// vocsPotion.yAxis[0].data = [] const day = String(now.getDate()).padStart(2, '0'); //
// vocsPotion.series[0].data = [] const formattedDate = `${year}-${month}-${day}`;
// const factoryList = res.map((item) => { this.alarmList = []
// return item.factoryName; let params = {
// }); date: formattedDate
// const emissonList = res.map((item) => { }
// return item.emissionTotal; queryAlarmCount(params).then(response => {
// }); let res = response.data
// vocsPotion.yAxis[0].data = factoryList; this.vocsList = res
// vocsPotion.series[0].data = emissonList;
// let data2 = []; vocsPotion.yAxis[0].data = []
// for (let i = 0; i < emissonList.length; i++) { vocsPotion.series[0].data = []
// if (emissonList[i] <= 4) { const factoryList = res.map((item) => {
// data2.push(0); return item.factoryName;
// } else { });
// data2.push(1); const emissonList = res.map((item) => {
// } return item.alarmCount;
// } });
// vocsPotion.series[1].data = data2; vocsPotion.yAxis[0].data = factoryList;
// this.initEcharts(); 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.yAxis.data = ['***有限公司', '****有限公司', '*****有限公司']
vocsPotion.series[0].data = [30, 25, 20]
// vocsPotion.series[1].data =[2343.232,333,3334]
this.initEcharts(); 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)
}, },
initEcharts() { initEcharts() {
const dom = document.getElementById('averageVocsEmission'); const dom = document.getElementById('averageVocsEmission');
const myEchart = echarts.init(dom); const myEchart = echarts.init(dom);
@ -319,23 +317,34 @@ export default {
padding: 10px; padding: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.left-over { .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 { .left-list {
text-align: center; text-align: center;
color: #fff; color: #fff;
@ -421,202 +430,8 @@ export default {
padding: 10px; padding: 10px;
display: flex; display: flex;
flex-direction: column; 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 { .right-warning-trend:hover {

View File

@ -28,7 +28,7 @@
import store from "@/store"; import store from "@/store";
import ThirdTitle from "./ThirdTitle.vue"; import ThirdTitle from "./ThirdTitle.vue";
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { queryAvgByGangkou } from "@/api/home";
import axios from 'axios' import axios from 'axios'
export default { export default {
//import使 //import使
@ -40,7 +40,7 @@ export default {
}, },
mounted() { mounted() {
this.initChart(); this.getInfo();
}, },
data() { data() {
@ -50,44 +50,45 @@ export default {
chart: null, chart: null,
// geoJSON // geoJSON
shandongGeoJSON: null, shandongGeoJSON: null,
points : [ pointData: [
{ name: '青岛港', value: [120.345089,36.109947], list: []}, { name: '青岛港', deptId: 229, value: [120.345089, 36.109947], list: [] },
{ name: '日照港', value: [119.561732,35.382109], list: []}, { name: '日照港', deptId: 230, value: [119.561732, 35.382109], list: [] },
{ name: '烟台港', value: [121.40541,37.562686], list: [] }, { name: '烟台港', deptId: 231, value: [121.40541, 37.562686], list: [] },
{ name: '渤海湾港', value: [119.219496,36.71416], list: []} { name: '渤海湾港', deptId: 232, value: [119.219496, 36.71416], list: [] }
], ],
}; };
}, },
methods: { methods: {
getInfo() {
const now = new Date();
//
now.setDate(now.getDate() - 1);
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 01
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() { 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 // ECharts
this.chart = echarts.init(this.$refs.chart); this.chart = echarts.init(this.$refs.chart);
const points = this.pointData
// 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 = { const option = {
backgroundColor: '#1b1b1b', // backgroundColor: '#1b1b1b', //
tooltip: { tooltip: {
@ -95,21 +96,29 @@ export default {
formatter: (params) => { formatter: (params) => {
if (params.componentType === 'series') { if (params.componentType === 'series') {
const point = points.find(p => p.name === params.name); const point = points.find(p => p.name === params.name);
if (point) { if (point && point.list && point.list.length > 0) {
return ` 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="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="display: flex; justify-content: space-between; font-weight: bold; color: #333;">
<div style="width: 200px;">企业名</div> <div style="width: 300px;">企业名</div>
<div style="width: 50px;">平均值</div> <div style="width: 100px;">平均值昨日</div>
</div> </div>
<div style="margin-top: 5px;"> <div style="margin-top: 5px;">
${point.list.map(f => ` ${point.list.map(f => `
<div style="display: flex; justify-content: space-between; margin-bottom: 5px; color: #FF8C00;"> <div style="display: flex; justify-content: space-between; margin-bottom: 5px; color: #FF8C00;">
<div style="width: 200px;">${f.factoryName}</div> <div style="width: 300px;">${f.factoryName}</div>
<div style="width: 50px;">${f.avgValue}</div> <div style="width: 100px;">${f.avgValue}</div>
</div> </div>
`).join('')} `).join('')}
</div> </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>`; </div>`;
} }
} }
@ -219,17 +228,27 @@ export default {
// height: 600px; // height: 600px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.beautified-div { .beautified-div {
height: 620px; height: 620px;
background-color: rgba(29, 168, 210, 0.2); /* 背景颜色 */ background-color: rgba(29, 168, 210, 0.2);
border: 1px solid #1da8d2; /* 边框颜色 */ /* 背景颜色 */
border-radius: 8px; /* 圆角 */ border: 1px solid #1da8d2;
padding: 15px 25px; /* 内边距 */ /* 边框颜色 */
margin: 5px; /* 外边距 */ border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */ /* 圆角 */
font-size: 18px; /* 字体大小 */ padding: 15px 25px;
text-align: center; /* 文本居中 */ /* 内边距 */
transition: all 0.3s ease; /* 动画过渡 */ margin: 5px;
/* 外边距 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/* 阴影效果 */
font-size: 18px;
/* 字体大小 */
text-align: center;
/* 文本居中 */
transition: all 0.3s ease;
/* 动画过渡 */
} }
} }