xzzn/SIPAIIS_WMS_JSSW
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

官网管理对接、大屏更新

Browse Source
This commit is contained in:
Rue Ji
2026-03-05 00:35:31 +08:00
parent 96605402a5
commit 258d3d7c13
14 changed files with 4186 additions and 3068 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/main/java/com/sipai/controller/pipeline/PipelineDataController.java
View File

@ -74,7 +74,7 @@ public class PipelineDataController {
@RequestMapping("/delete.do") @RequestMapping("/delete.do")
public String dodelete(HttpServletRequest request, Model model, public String dodelete(HttpServletRequest request, Model model,
@RequestParam(value = "id") String id) { @RequestParam(value = "id") Long id) {
int result = this.pipelineDataService.deleteById(id); int result = this.pipelineDataService.deleteById(id);
model.addAttribute("result", result); model.addAttribute("result", result);
return "result"; return "result";
@ -83,15 +83,14 @@ public class PipelineDataController {
@RequestMapping("/deletes.do") @RequestMapping("/deletes.do")
public String dodeletes(HttpServletRequest request, Model model, public String dodeletes(HttpServletRequest request, Model model,
@RequestParam(value = "ids") String ids) { @RequestParam(value = "ids") String ids) {
ids = ids.replace(",", "','"); int result = this.pipelineDataService.deleteByWhere("where id in (" + ids + ")");
int result = this.pipelineDataService.deleteByWhere("where id in ('" + ids + "')");
model.addAttribute("result", result); model.addAttribute("result", result);
return "result"; return "result";
} }
@RequestMapping("/edit.do") @RequestMapping("/edit.do")
public String doedit(HttpServletRequest request, Model model, public String doedit(HttpServletRequest request, Model model,
@RequestParam(value = "id") String id) { @RequestParam(value = "id") Long id) {
PipelineData pipelineData = this.pipelineDataService.selectById(id); PipelineData pipelineData = this.pipelineDataService.selectById(id);
model.addAttribute("pipelineData", pipelineData); model.addAttribute("pipelineData", pipelineData);
return "/pipeline/pipelineDataEdit"; return "/pipeline/pipelineDataEdit";
@ -109,7 +108,7 @@ public class PipelineDataController {
@RequestMapping("/view.do") @RequestMapping("/view.do")
public String doview(HttpServletRequest request, Model model, public String doview(HttpServletRequest request, Model model,
@RequestParam(value = "id") String id) { @RequestParam(value = "id") Long id) {
PipelineData pipelineData = this.pipelineDataService.selectById(id); PipelineData pipelineData = this.pipelineDataService.selectById(id);
model.addAttribute("pipelineData", pipelineData); model.addAttribute("pipelineData", pipelineData);
return "/pipeline/pipelineDataView"; return "/pipeline/pipelineDataView";

15
src/main/java/com/sipai/dao/base/CommDaoImpl.java
View File

@ -49,6 +49,14 @@ public class CommDaoImpl<T> implements CommDao<T> {
T o = getSqlSession().selectOne(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t); T o = getSqlSession().selectOne(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t);
return o; return o;
} }
/**
* 根据ID查询（Long类型）
*/
public T selectByPrimaryKey(Long t){
T o = getSqlSession().selectOne(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t);
return o;
}
/** /**
* wxp为activiti测试修改 * wxp为activiti测试修改
* @param t * @param t
@ -62,6 +70,13 @@ public class CommDaoImpl<T> implements CommDao<T> {
return getSqlSession().delete(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t); return getSqlSession().delete(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t);
} }
/**
* 根据ID删除（Long类型）
*/
public int deleteByPrimaryKey(Long t) {
return getSqlSession().delete(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t);
}
public int insert(T t){ public int insert(T t){
return getSqlSession().insert(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t); return getSqlSession().insert(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t);
} }

42
src/main/java/com/sipai/mapper/pipeline/PipelineDataMapper.xml
View File

@ -16,32 +16,30 @@
id, pipeline_name, diameter_mm, length_m, start_burial_depth_m, end_burial_depth_m, id, pipeline_name, diameter_mm, length_m, start_burial_depth_m, end_burial_depth_m,
start_ground_elevation_m, end_ground_elevation_m, pipeline_invert_elevation_m start_ground_elevation_m, end_ground_elevation_m, pipeline_invert_elevation_m
</sql> </sql>
<select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.String" > <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Long" >
select select
<include refid="Base_Column_List" /> <include refid="Base_Column_List" />
from pipeline_data from tb_pipeline_data
where id = #{id,jdbcType=VARCHAR} where id = #{id,jdbcType=BIGINT}
</select> </select>
<delete id="deleteByPrimaryKey" parameterType="java.lang.String" > <delete id="deleteByPrimaryKey" parameterType="java.lang.Long" >
delete from pipeline_data delete from tb_pipeline_data
where id = #{id,jdbcType=VARCHAR} where id = #{id,jdbcType=BIGINT}
</delete> </delete>
<insert id="insert" parameterType="com.sipai.entity.pipeline.PipelineData" > <insert id="insert" parameterType="com.sipai.entity.pipeline.PipelineData" useGeneratedKeys="true" keyProperty="id" >
insert into pipeline_data (id, pipeline_name, diameter_mm, insert into tb_pipeline_data (pipeline_name, diameter_mm,
length_m, start_burial_depth_m, end_burial_depth_m, length_m, start_burial_depth_m, end_burial_depth_m,
start_ground_elevation_m, end_ground_elevation_m, start_ground_elevation_m, end_ground_elevation_m,
pipeline_invert_elevation_m) pipeline_invert_elevation_m)
values (#{id,jdbcType=VARCHAR}, #{pipelineName,jdbcType=VARCHAR}, #{diameterMm,jdbcType=DECIMAL}, values (#{pipelineName,jdbcType=VARCHAR}, #{diameterMm,jdbcType=DECIMAL},
#{lengthM,jdbcType=DECIMAL}, #{startBurialDepthM,jdbcType=DECIMAL}, #{endBurialDepthM,jdbcType=DECIMAL}, #{lengthM,jdbcType=DECIMAL}, #{startBurialDepthM,jdbcType=DECIMAL}, #{endBurialDepthM,jdbcType=DECIMAL},
#{startGroundElevationM,jdbcType=DECIMAL}, #{endGroundElevationM,jdbcType=DECIMAL}, #{startGroundElevationM,jdbcType=DECIMAL}, #{endGroundElevationM,jdbcType=DECIMAL},
#{pipelineInvertElevationM,jdbcType=DECIMAL}) #{pipelineInvertElevationM,jdbcType=DECIMAL})
</insert> </insert>
<insert id="insertSelective" parameterType="com.sipai.entity.pipeline.PipelineData" > <insert id="insertSelective" parameterType="com.sipai.entity.pipeline.PipelineData" useGeneratedKeys="true" keyProperty="id" >
insert into pipeline_data insert into tb_pipeline_data
<trim prefix="(" suffix=")" suffixOverrides="," > <trim prefix="(" suffix=")" suffixOverrides="," >
<if test="id != null" >
id,
</if>
<if test="pipelineName != null" > <if test="pipelineName != null" >
pipeline_name, pipeline_name,
</if> </if>
@ -68,9 +66,7 @@
</if> </if>
</trim> </trim>
<trim prefix="values (" suffix=")" suffixOverrides="," > <trim prefix="values (" suffix=")" suffixOverrides="," >
<if test="id != null" >
#{id,jdbcType=VARCHAR},
</if>
<if test="pipelineName != null" > <if test="pipelineName != null" >
#{pipelineName,jdbcType=VARCHAR}, #{pipelineName,jdbcType=VARCHAR},
</if> </if>
@ -98,7 +94,7 @@
</trim> </trim>
</insert> </insert>
<update id="updateByPrimaryKeySelective" parameterType="com.sipai.entity.pipeline.PipelineData" > <update id="updateByPrimaryKeySelective" parameterType="com.sipai.entity.pipeline.PipelineData" >
update pipeline_data update tb_pipeline_data
<set > <set >
<if test="pipelineName != null" > <if test="pipelineName != null" >
pipeline_name = #{pipelineName,jdbcType=VARCHAR}, pipeline_name = #{pipelineName,jdbcType=VARCHAR},
@ -125,10 +121,10 @@
pipeline_invert_elevation_m = #{pipelineInvertElevationM,jdbcType=DECIMAL}, pipeline_invert_elevation_m = #{pipelineInvertElevationM,jdbcType=DECIMAL},
</if> </if>
</set> </set>
where id = #{id,jdbcType=VARCHAR} where id = #{id,jdbcType=BIGINT}
</update> </update>
<update id="updateByPrimaryKey" parameterType="com.sipai.entity.pipeline.PipelineData" > <update id="updateByPrimaryKey" parameterType="com.sipai.entity.pipeline.PipelineData" >
update pipeline_data update tb_pipeline_data
set pipeline_name = #{pipelineName,jdbcType=VARCHAR}, set pipeline_name = #{pipelineName,jdbcType=VARCHAR},
diameter_mm = #{diameterMm,jdbcType=DECIMAL}, diameter_mm = #{diameterMm,jdbcType=DECIMAL},
length_m = #{lengthM,jdbcType=DECIMAL}, length_m = #{lengthM,jdbcType=DECIMAL},
@ -137,17 +133,17 @@
start_ground_elevation_m = #{startGroundElevationM,jdbcType=DECIMAL}, start_ground_elevation_m = #{startGroundElevationM,jdbcType=DECIMAL},
end_ground_elevation_m = #{endGroundElevationM,jdbcType=DECIMAL}, end_ground_elevation_m = #{endGroundElevationM,jdbcType=DECIMAL},
pipeline_invert_elevation_m = #{pipelineInvertElevationM,jdbcType=DECIMAL} pipeline_invert_elevation_m = #{pipelineInvertElevationM,jdbcType=DECIMAL}
where id = #{id,jdbcType=VARCHAR} where id = #{id,jdbcType=BIGINT}
</update> </update>
<select id="selectListByWhere" parameterType="java.lang.String" resultMap="BaseResultMap"> <select id="selectListByWhere" parameterType="java.lang.String" resultMap="BaseResultMap">
select select
<include refid="Base_Column_List" /> <include refid="Base_Column_List" />
from pipeline_data from tb_pipeline_data
${where} ${where}
</select> </select>
<delete id="deleteByWhere" parameterType="java.lang.String"> <delete id="deleteByWhere" parameterType="java.lang.String">
delete from delete from
pipeline_data tb_pipeline_data
${where} ${where}
</delete> </delete>
</mapper> </mapper>

14
src/main/java/com/sipai/service/pipeline/PipelineDataService.java
View File

@ -19,11 +19,25 @@ public class PipelineDataService implements CommService<PipelineData> {
return pipelineData; return pipelineData;
} }
/**
* 根据ID查询（Long类型）
*/
public PipelineData selectById(Long id) {
return pipelineDataDao.selectByPrimaryKey(id);
}
@Override @Override
public int deleteById(String id) { public int deleteById(String id) {
return pipelineDataDao.deleteByPrimaryKey(id); return pipelineDataDao.deleteByPrimaryKey(id);
} }
/**
* 根据ID删除（Long类型）
*/
public int deleteById(Long id) {
return pipelineDataDao.deleteByPrimaryKey(id);
}
@Override @Override
public int save(PipelineData pipelineData) { public int save(PipelineData pipelineData) {
return pipelineDataDao.insert(pipelineData); return pipelineDataDao.insert(pipelineData);

8
src/main/resources/redis.properties
View File

@ -1,10 +1,10 @@
#redis<69><73><EFBFBD><EFBFBD> #redis<69><73><EFBFBD><EFBFBD>
#redis.host=122.51.194.184 redis.host=122.51.194.184
redis.host=127.0.0.1 # redis.host=127.0.0.1
#<23><><EFBFBD><EFBFBD>single <20><>Ⱥcluster #<23><><EFBFBD><EFBFBD>single <20><>Ⱥcluster
redis.mode=single redis.mode=single
#redis.port=26739 redis.port=26739
redis.port=6379 # redis.port=6379
redis.password=Aa112211 redis.password=Aa112211
redis.maxIdle=100 redis.maxIdle=100
redis.maxActive=300 redis.maxActive=300

11
src/main/webapp/JS/comm.js
View File

@ -532,9 +532,9 @@ function initMenu() {
// 注意：新菜单项可能直接是文本，也可能包含 i 标签 // 注意：新菜单项可能直接是文本，也可能包含 i 标签
var exists = false; var exists = false;
$treeviewMenu.find('li').each(function() { $treeviewMenu.find('li').each(function() {
if ($(this).text().indexOf('新源头GIS管理') > -1) { // if ($(this).text().indexOf('管道管理') > -1) {
exists = true; // exists = true;
} // }
}); });
if (!exists) { if (!exists) {
@ -545,9 +545,6 @@ function initMenu() {
var newMenuHtml = ''; var newMenuHtml = '';
if (typeof addTab === 'function') { if (typeof addTab === 'function') {
// 假设 addTab(id, name, url) // 假设 addTab(id, name, url)
// /jsp/pipeline/pipelineDataList.jsp
// newMenuHtml = '<li><a href="javascript:void(0);" onclick="addTab(\'newSourceGIS\', \'新源头GIS管理\', \'/jsp/visual/newSourceGISPage.jsp\')"><i class="fa fa-map-marker"></i> 新源头GIS管理</a></li>';
newMenuHtml = '<li><a href="javascript:void(0);" onclick="addTab(\'pipelineDataList\', \'管道管理\', \'/jsp/pipeline/pipelineDataList.jsp\')"><i class="fa fa-map-marker"></i> 管道管理</a></li>';
} else { } else {
// 如果没有 addTab，尝试使用 iframe 加载或者直接跳转（但在框架内） // 如果没有 addTab，尝试使用 iframe 加载或者直接跳转（但在框架内）
// refreshPage 通常是 location.replace，这会刷新整个页面。 // refreshPage 通常是 location.replace，这会刷新整个页面。
@ -565,8 +562,6 @@ function initMenu() {
// 所以我们应该优先使用 addTab。 // 所以我们应该优先使用 addTab。
// 如果 addTab 未定义（可能在 index.jsp 中定义），我们尝试模拟它。 // 如果 addTab 未定义（可能在 index.jsp 中定义），我们尝试模拟它。
// 由于 comm.js 被 index.jsp 引用，addTab 应该可用。 // 由于 comm.js 被 index.jsp 引用，addTab 应该可用。
// newMenuHtml = '<li><a href="javascript:void(0);" onclick="if(typeof addTab === \'function\'){addTab(\'newSourceGIS\', \'新源头GIS管理\', \'/jsp/visual/newSourceGISPage.jsp\');}else{refreshPage(\'' + ext.contextPath + '/jsp/visual/newSourceGISPage.jsp\');}"><i class="fa fa-map-marker"></i> 新源头GIS管理</a></li>';
newMenuHtml = '<li><a href="javascript:void(0);" onclick="if(typeof addTab === \'function\'){addTab(\'pipelineDataList\', \'管道管理\', \'/jsp/pipeline/pipelineDataList.jsp\');}else{refreshPage(\'' + ext.contextPath + '/jsp/pipeline/pipelineDataList.jsp\');}"><i class="fa fa-map-marker"></i> 管道管理</a></li>';
} }
$treeviewMenu.append(newMenuHtml); $treeviewMenu.append(newMenuHtml);

BIN
src/main/webapp/WEB-INF/lib/sqljdbc4-4.0.jar Normal file
View File

Binary file not shown.

607
src/main/webapp/jsp/bigScreen.jsp
View File

@ -1,11 +1,19 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>水厂大屏展示</title> <title>水厂大屏展示</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script>
<!-- <script
type="text/javascript"
src="../../node_modules/jquery/dist/jquery.min.js"
></script>
<script type="text/javascript" src="../../JS/echarts3.0.js"></script> -->
<style> <style>
body, html { body,
html {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -17,54 +25,595 @@
width: 6500px; width: 6500px;
height: 1800px; height: 1800px;
background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png'); background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png');
/* background-image: url('../../IMG/screen1-1.png'); */ /* background-image: url("../../IMG/screen1.png"); */
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
} }
/* Specific Position for Data 6040 */ /* Specific Position for Data 6040 */
.val-6040 { .slqs {
position: absolute; position: absolute;
top: 335px;
left: 209px;
width: 121px; width: 121px;
height: 62px; height: 62px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
font-family: 'Gilroy', 'DIN Alternate', 'Arial Narrow', sans-serif; font-family: "Gilroy", "DIN Alternate", "Arial Narrow", sans-serif;
font-weight: 900; font-weight: 900;
font-size: 50px; font-size: 50px;
z-index: 10; z-index: 10;
text-align: center; text-align: center;
line-height: 62px; line-height: 62px;
} }
.val-4197 { .slqs-jinri {
top: 335px;
left: 209px;
}
.slqs-zuori {
top: 335px; top: 335px;
left: 592px; left: 592px;
width: fit-content;
height: fit-content;
display: inline-flex;
place-content: flex-start;
place-items: flex-end;
gap: 8px;
} }
.val-12356 { .slqs-benyue {
top: 335px; top: 335px;
left: 975px; left: 975px;
width: fit-content;
height: fit-content;
display: inline-flex;
place-content: flex-start;
place-items: flex-end;
gap: 8px;
} }
.ncl-val {
position: absolute;
width: 76px;
height: 36px;
display: flex;
align-items: center;
text-align: right;
color: rgba(255, 255, 255, 1);
font-family: Gilroy;
font-weight: 500;
font-size: 36px;
line-height: 36px;
}
.ncl-val1 {
top: 1168px;
left: 318px;
}
.ncl-val2 {
top: 1168px;
left: 653px;
}
.ncl-val3 {
top: 1168px;
left: 1023px;
}
.ncl2 {
position: absolute;
top: 1310px;
left: 66px;
width: 1077px;
height: 440px;
}
#ncl-chart {
width: 100%;
height: 100%;
}
.seven-days-sl {
position: absolute;
top: 591px;
left: 66px;
width: 1077px;
height: 400px;
}
#seven-days-chart {
width: 100%;
height: 100%;
}
.quality-table {
position: absolute;
top: 630px;
left: 1183px;
width: 975px;
}
.quality-table table {
width: 100%;
border-collapse: collapse;
color: #7ef3ff;
font-size: 27px;
text-align: center;
background: transparent;
}
.quality-table th,
.quality-table td {
border: 1px solid rgba(0, 163, 255, 0.4);
padding: 16px 23px;
}
.quality-table th {
color: #ffffff;
font-size: 27px;
font-weight: 600;
}
.quality-table td:first-child {
color: #ffffff;
text-align: left;
padding-left: 12px;
}
.quality-table td:last-child {
color: rgba(255, 255, 255, 0.6);
}
.quality-chart {
position: absolute;
top: 1380px;
left: 1183px;
width: 975px;
height: 370px;
}
#quality-chart {
width: 100%;
height: 100%;
}
/* 药耗 */
.yaohao {
position: absolute;
top: 343px;
width: 94px;
height: 56px;
display: flex;
align-items: center;
text-align: right;
color: rgba(255, 255, 255, 1);
font-family: Gilroy;
font-weight: 700;
font-size: 40px;
line-height: 56px;
}
.yaohao1 {
left: 1317px;
}
.yaohao2 {
left: 1652px;
}
.yaohao3 {
left: 2056px;
}
.Middle3 {
width: 2100px;
position: absolute;
top: 300px;
left: 2700px;
}
</style> </style>
</head> </head>
<body> <body>
<div class="screen-container"> <div class="screen-container">
<!-- <div class="val-6040">6040</div> <div class="left">
<div class="val-4197">4197</div> <div>
<div class="val-12356">12356</div> --> <div class="slqs slqs-jinri">6040</div>
<div class="slqs slqs-zuori">4197</div>
<div class="slqs slqs-benyue">12356</div>
</div> </div>
</body>
<!-- 七日水量 -->
<div class="seven-days-sl">
<div id="seven-days-chart"></div>
</div>
<!-- 泥处理指标 -->
<div class="ncl">
<div class="ncl1">
<div class="ncl-val ncl-val1">0</div>
<div class="ncl-val ncl-val2">200</div>
<div class="ncl-val ncl-val3">4.89</div>
</div>
<div class="ncl2">
<div id="ncl-chart"></div>
</div>
</div>
</div>
<div class="Middle">
<div class="Middle1">
<!-- 药耗 -->
<div>
<div class="yaohao yaohao1">300</div>
<div class="yaohao yaohao2">200</div>
<div class="yaohao yaohao3">1</div>
</div>
<!-- 质量指标 表格 -->
<div class="quality-table">
<table>
<thead>
<tr>
<th>参数</th>
<th>当前值</th>
<th>平均值</th>
<th>最高</th>
<th>最低</th>
<th>指标</th>
</tr>
</thead>
<tbody>
<tr>
<td>COD (mg/L)</td>
<td>13.186</td>
<td>12.996</td>
<td>14.666</td>
<td>11.92</td>
<td>0.000–20.000</td>
</tr>
<tr>
<td>TP (mg/L)</td>
<td>13.186</td>
<td>12.996</td>
<td>14.666</td>
<td>11.92</td>
<td>0.000–20.000</td>
</tr>
<tr>
<td>NH3–N (mg/L)</td>
<td>13.186</td>
<td>12.996</td>
<td>14.666</td>
<td>11.92</td>
<td>0.000–20.000</td>
</tr>
<tr>
<td>TN (mg/L)</td>
<td>13.186</td>
<td>12.996</td>
<td>14.666</td>
<td>11.92</td>
<td>0.000–20.000</td>
</tr>
<tr>
<td>PH (mg/L)</td>
<td>13.186</td>
<td>12.996</td>
<td>14.666</td>
<td>11.92</td>
<td>0.000–20.000</td>
</tr>
<tr>
<td>SS</td>
<td>13.186</td>
<td>12.996</td>
<td>14.666</td>
<td>11.92</td>
<td>0.000–20.000</td>
</tr>
<tr>
<td>温度(℃)</td>
<td>13.186</td>
<td>12.996</td>
<td>14.666</td>
<td>11.92</td>
<td>0.000–20.000</td>
</tr>
</tbody>
</table>
</div>
<div class="quality-chart">
<div id="quality-chart"></div>
</div>
</div>
<div class="Middle2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- 中间图表 -->
<div class="Middle3">
<img src="../../IMG/monitor.png" style="width: 100%; height: 100%" />
</div>
<div class="Middle4">
<!-- 进水 -->
<div></div>
<!-- 出水 -->
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- 视频 -->
<div class="right"></div>
</div>
<script>
$(function () {
var chartDom = document.getElementById("seven-days-chart");
if (!chartDom) return;
var myChart = echarts.init(chartDom);
var dataAxis = [
"11-10",
"11-11",
"11-12",
"11-13",
"11-14",
"11-15",
"11-16",
"11-17",
];
var data = [5200, 4300, 4200, 4300, 6800, 5200, 7400, 5600];
var option = {
backgroundColor: "transparent",
grid: {
left: 60,
right: 40,
top: 40,
bottom: 40,
},
legend: {
data: ["处理水量"],
right: 10,
top: 0,
textStyle: {
color: "#9BE8FF",
fontSize: 25,
},
},
xAxis: {
type: "category",
data: dataAxis,
axisLine: {
lineStyle: { color: "#2C3E50" },
},
axisTick: { show: false },
axisLabel: {
color: "#B7C9E2",
fontSize: 25,
},
},
yAxis: {
type: "value",
max: 10000,
splitNumber: 5,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
color: "#B7C9E2",
fontSize: 18,
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.15)",
type: "dashed",
},
},
},
dataZoom: [{ type: "inside" }],
series: [
{
name: "处理水量",
type: "bar",
barWidth: 20,
data: data,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#46F2FF" },
{ offset: 1, color: "#0B4DB5" },
]),
shadowColor: "rgba(0, 0, 0, 0.3)",
shadowBlur: 10,
},
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#6af8ff" },
{ offset: 1, color: "#1560d6" },
]),
},
},
},
{
type: "bar",
barGap: "-100%",
data: (function () {
var yMax = 10000;
var shadow = [];
for (var i = 0; i < data.length; i++) {
shadow.push(yMax);
}
return shadow;
})(),
itemStyle: { normal: { color: "rgba(0,0,0,0.05)" } },
silent: true,
},
],
};
myChart.setOption(option);
var zoomSize = 6;
myChart.on("click", function (params) {
var startIndex = Math.max(
params.dataIndex - Math.floor(zoomSize / 2),
0,
);
var endIndex = Math.min(
params.dataIndex + Math.floor(zoomSize / 2),
data.length - 1,
);
myChart.dispatchAction({
type: "dataZoom",
startValue: dataAxis[startIndex],
endValue: dataAxis[endIndex],
});
});
var nclDom = document.getElementById("ncl-chart");
if (nclDom) {
var nclChart = echarts.init(nclDom, "dark");
var nclData = [120, 160, 90, 250, 170, 340, 280, 330, 80, 260];
var nclOption = {
backgroundColor: "transparent",
grid: {
left: 60,
right: 40,
top: 40,
bottom: 40,
},
legend: {
data: ["实际小时排泥量"],
right: 10,
top: 0,
textStyle: {
color: "#9BE8FF",
fontSize: 25,
},
},
xAxis: {
type: "category",
data: [
"2:00",
"4:00",
"6:00",
"8:00",
"10:00",
"12:00",
"14:00",
"16:00",
"18:00",
"20:00",
],
boundaryGap: false,
axisLine: {
lineStyle: { color: "#2C3E50" },
},
axisTick: { show: false },
axisLabel: {
color: "#B7C9E2",
fontSize: 25,
},
},
yAxis: {
type: "value",
max: 500,
splitNumber: 5,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
color: "#B7C9E2",
fontSize: 25,
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.15)",
type: "dashed",
},
},
},
series: [
{
name: "实际小时排泥量",
type: "line",
smooth: true,
symbol: "none",
lineStyle: { normal: { width: 2 } },
itemStyle: { normal: { color: "#46F2FF" } },
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(70, 242, 255, 0.45)" },
{ offset: 1, color: "rgba(11, 77, 181, 0.05)" },
]),
opacity: 1,
},
},
data: nclData,
},
],
};
nclChart.setOption(nclOption);
window.addEventListener("resize", function () {
nclChart.resize();
});
}
window.addEventListener("resize", function () {
myChart.resize();
});
var qualityDom = document.getElementById("quality-chart");
if (qualityDom) {
var qualityChart = echarts.init(qualityDom);
var qualityData = [8, 13, 9, 14, 21, 14, 18];
var qualityOption = {
backgroundColor: "transparent",
grid: {
left: 60,
right: 40,
top: 40,
bottom: 40,
},
legend: {
data: ["水质量"],
right: 10,
top: 0,
textStyle: {
color: "#9BE8FF",
fontSize: 25,
},
},
xAxis: {
type: "category",
data: ["11", "12", "13", "14", "15", "16", "17"],
boundaryGap: false,
axisLine: {
lineStyle: { color: "#2C3E50" },
},
axisTick: { show: false },
axisLabel: {
color: "#B7C9E2",
fontSize: 25,
},
},
yAxis: {
type: "value",
max: 25,
splitNumber: 5,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
color: "#B7C9E2",
fontSize: 25,
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.15)",
type: "dashed",
},
},
},
series: [
{
name: "水质量",
type: "line",
smooth: true,
symbol: "none",
lineStyle: { normal: { width: 2 } },
itemStyle: { normal: { color: "#46F2FF" } },
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(70, 242, 255, 0.45)" },
{ offset: 1, color: "rgba(11, 77, 181, 0.05)" },
]),
opacity: 1,
},
},
data: qualityData,
},
],
};
qualityChart.setOption(qualityOption);
window.addEventListener("resize", function () {
qualityChart.resize();
});
}
});
</script>
</body>
</html> </html>

448
src/main/webapp/jsp/bigScreen2.jsp
View File

@ -1,15 +1,20 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page language="java" contentType="text/html; charset=UTF-8"
<!DOCTYPE html> pageEncoding="UTF-8"%>
<!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>区域管线大屏展示</title> <title>区域管线大屏展示</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script>
<!-- <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script> --> <!-- <script
type="text/javascript"
src="../../node_modules/jquery/dist/jquery.min.js"
></script> -->
<!-- <script type="text/javascript" src="../../JS/echarts3.0.js"></script> --> <!-- <script type="text/javascript" src="../../JS/echarts3.0.js"></script> -->
<style> <style>
body, html { body,
html {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -20,7 +25,7 @@
.screen-container { .screen-container {
width: 6500px; width: 6500px;
height: 1800px; height: 1800px;
/* background-image: url('../../IMG/screen2.png'); */ /* background-image: url("../../IMG/screen2.png"); */
background-image: url('<%=request.getContextPath()%>/IMG/screen2.png'); background-image: url('<%=request.getContextPath()%>/IMG/screen2.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -38,9 +43,15 @@
font-size: 60px; font-size: 60px;
} }
.card-1 { left: 1910px; } .card-1 {
.card-2 { left: 2832px; } left: 1910px;
.card-3 { left: 3754px; } }
.card-2 {
left: 2832px;
}
.card-3 {
left: 3754px;
}
.ring-chart-wrapper { .ring-chart-wrapper {
position: absolute; position: absolute;
@ -96,7 +107,12 @@
box-sizing: border-box; box-sizing: border-box;
/* background: rgba(27, 126, 242, 0.6); */ /* background: rgba(27, 126, 242, 0.6); */
} }
#ring-chart-content, #pie-chart-content-2, #gauge-chart-content-3, #gauge-chart-content-4, #bar-chart-content-5, #bar-chart-content-6 { #ring-chart-content,
#pie-chart-content-2,
#gauge-chart-content-3,
#gauge-chart-content-4,
#bar-chart-content-5,
#bar-chart-content-6 {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -104,8 +120,8 @@
height: 100%; height: 100%;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="screen-container"> <div class="screen-container">
<div class="stat-card card-1">53829.5</div> <div class="stat-card card-1">53829.5</div>
<div class="stat-card card-2">2495</div> <div class="stat-card card-2">2495</div>
@ -143,117 +159,153 @@
</div> </div>
<script> <script>
$(document).ready(function() { $(document).ready(function () {
launchIntoFullscreen(document.documentElement); launchIntoFullscreen(document.documentElement);
initPieChart(); initPieChart();
initPieChart2(); initPieChart2();
initGaugeChart('gauge-chart-content-3', 53829.5); initGaugeChart("gauge-chart-content-3", 53829.5);
initGaugeChart('gauge-chart-content-4', 12345.6); initGaugeChart("gauge-chart-content-4", 12345.6);
initBarChart('bar-chart-content-5', [3000, 4500, 1500, 5000, 23000, 1500, 15000, 3000, 4000, 5000, 2000, 1000, 500, 2563, 4000]); initBarChart(
initBarChart('bar-chart-content-6', [2000, 3000, 1000, 4000, 18000, 1000, 12000, 2000, 3000, 4000, 1500, 800, 400, 2000, 3000]); "bar-chart-content-5",
[
3000, 4500, 1500, 5000, 23000, 1500, 15000, 3000, 4000, 5000, 2000,
1000, 500, 2563, 4000,
],
);
initBarChart(
"bar-chart-content-6",
[
2000, 3000, 1000, 4000, 18000, 1000, 12000, 2000, 3000, 4000, 1500,
800, 400, 2000, 3000,
],
);
// Double click to toggle fullscreen // Double click to toggle fullscreen
$('body').on('dblclick', function() { $("body").on("dblclick", function () {
launchIntoFullscreen(document.documentElement); launchIntoFullscreen(document.documentElement);
}); });
}); });
function initPieChart() { function initPieChart() {
var chartDom = document.getElementById('ring-chart-content'); var chartDom = document.getElementById("ring-chart-content");
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option = { var option = {
color: [ color: [
'#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', "#5470c6",
'#00d4ff', '#ffb700', '#2bff89', '#915eff', '#ff7f00' "#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
"#00d4ff",
"#ffb700",
"#2bff89",
"#915eff",
"#ff7f00",
], ],
series: [ series: [
{ {
name: '管线类型统计', name: "管线类型统计",
type: 'pie', type: "pie",
radius: '55%', radius: "55%",
center: ['50%', '50%'], center: ["50%", "50%"],
avoidLabelOverlap: true, avoidLabelOverlap: true,
label: { label: {
show: true, show: true,
position: 'outside', position: "outside",
formatter: '{b}', formatter: "{b}",
fontSize: 14, fontSize: 14,
lineHeight: 20, lineHeight: 20,
align: 'left' align: "left",
}, },
labelLine: { labelLine: {
show: true, show: true,
length: 20, length: 20,
length2: 30, length2: 30,
lineStyle: { lineStyle: {
type: 'solid' type: "solid",
} },
}, },
data: [ data: [
{ value: 335, name: 'II级钢筋混凝土管 承插接口' }, { value: 335, name: "II级钢筋混凝土管 承插接口" },
{ value: 310, name: '焊接钢管 焊接接口' }, { value: 310, name: "焊接钢管 焊接接口" },
{ value: 274, name: '高密度聚乙烯双壁波纹管' }, { value: 274, name: "高密度聚乙烯双壁波纹管" },
{ value: 235, name: '聚乙烯PE管' }, { value: 235, name: "聚乙烯PE管" },
{ value: 200, name: 'II级钢筋混凝土管' }, { value: 200, name: "II级钢筋混凝土管" },
{ value: 180, name: '高密度聚乙烯缠绕管' }, { value: 180, name: "高密度聚乙烯缠绕管" },
{ value: 150, name: '焊接钢管 焊接连接' }, { value: 150, name: "焊接钢管 焊接连接" },
{ value: 140, name: '高密度聚乙烯中空壁缠绕管' }, { value: 140, name: "高密度聚乙烯中空壁缠绕管" },
{ value: 130, name: '钢筋混凝土管' }, { value: 130, name: "钢筋混凝土管" },
{ value: 110, name: '球墨铸铁管' }, { value: 110, name: "球墨铸铁管" },
{ value: 100, name: '预应力钢筒混凝土管' } { value: 100, name: "预应力钢筒混凝土管" },
] ],
} },
] ],
}; };
myChart.setOption(option); myChart.setOption(option);
} }
function initPieChart2() { function initPieChart2() {
var chartDom = document.getElementById('pie-chart-content-2'); var chartDom = document.getElementById("pie-chart-content-2");
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option = { var option = {
color: [ color: [
'#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', "#5470c6",
'#00d4ff', '#ffb700', '#2bff89', '#915eff', '#ff7f00' "#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
"#00d4ff",
"#ffb700",
"#2bff89",
"#915eff",
"#ff7f00",
], ],
series: [ series: [
{ {
name: '管线类型统计2', name: "管线类型统计2",
type: 'pie', type: "pie",
radius: '55%', radius: "55%",
center: ['50%', '50%'], center: ["50%", "50%"],
avoidLabelOverlap: true, avoidLabelOverlap: true,
label: { label: {
show: true, show: true,
position: 'outside', position: "outside",
formatter: '{b}', formatter: "{b}",
fontSize: 14, fontSize: 14,
lineHeight: 20, lineHeight: 20,
align: 'left' align: "left",
}, },
labelLine: { labelLine: {
show: true, show: true,
length: 20, length: 20,
length2: 30, length2: 30,
lineStyle: { lineStyle: {
type: 'solid' type: "solid",
} },
}, },
data: [ data: [
{ value: 335, name: 'II级钢筋混凝土管 承插接口' }, { value: 335, name: "II级钢筋混凝土管 承插接口" },
{ value: 310, name: '焊接钢管 焊接接口' }, { value: 310, name: "焊接钢管 焊接接口" },
{ value: 274, name: '高密度聚乙烯双壁波纹管' }, { value: 274, name: "高密度聚乙烯双壁波纹管" },
{ value: 235, name: '聚乙烯PE管' }, { value: 235, name: "聚乙烯PE管" },
{ value: 200, name: 'II级钢筋混凝土管' }, { value: 200, name: "II级钢筋混凝土管" },
{ value: 180, name: '高密度聚乙烯缠绕管' }, { value: 180, name: "高密度聚乙烯缠绕管" },
{ value: 150, name: '焊接钢管 焊接连接' }, { value: 150, name: "焊接钢管 焊接连接" },
{ value: 140, name: '高密度聚乙烯中空壁缠绕管' }, { value: 140, name: "高密度聚乙烯中空壁缠绕管" },
{ value: 130, name: '钢筋混凝土管' }, { value: 130, name: "钢筋混凝土管" },
{ value: 110, name: '球墨铸铁管' }, { value: 110, name: "球墨铸铁管" },
{ value: 100, name: '预应力钢筒混凝土管' } { value: 100, name: "预应力钢筒混凝土管" },
] ],
} },
] ],
}; };
myChart.setOption(option); myChart.setOption(option);
} }
@ -264,58 +316,65 @@
var option = { var option = {
series: [ series: [
{ {
type: 'gauge', type: "gauge",
startAngle: 180, startAngle: 180,
endAngle: 0, endAngle: 0,
min: 0, min: 0,
max: 300, max: 300,
splitNumber: 6, splitNumber: 6,
radius: '90%', radius: "90%",
center: ['50%', '70%'], center: ["50%", "70%"],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
width: 40, width: 40,
color: [[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [ color: [
{ offset: 0, color: 'rgba(65, 108, 243, 1)' }, [
{ offset: 1, color: 'rgba(0, 68, 160, 1)' } 1,
])]] new echarts.graphic.LinearGradient(0, 0, 1, 0, [
} { offset: 0, color: "rgba(65, 108, 243, 1)" },
{ offset: 1, color: "rgba(0, 68, 160, 1)" },
]),
],
],
},
}, },
pointer: { pointer: {
show: true, show: true,
length: '60%', length: "60%",
width: 6, width: 6,
itemStyle: { itemStyle: {
color: '#00d4ff' color: "#00d4ff",
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
color: '#00d4ff', color: "#00d4ff",
fontSize: 14, fontSize: 14,
distance: -60, distance: -60,
formatter: function (value) { formatter: function (value) {
return value; return value;
} },
}, },
detail: { detail: {
show: true, show: true,
offsetCenter: [0, '40%'], offsetCenter: [0, "40%"],
fontSize: 30, fontSize: 30,
color: '#fff', color: "#fff",
formatter: '{value} m' formatter: "{value} m",
}, },
data: [{ data: [
{
value: value, value: value,
name: '' name: "",
}] },
} ],
] },
],
}; };
// Adjust value if it exceeds max for visual representation (optional) // Adjust value if it exceeds max for visual representation (optional)
@ -325,7 +384,7 @@
// Let's set the gauge pointer to max if value > 300 // Let's set the gauge pointer to max if value > 300
if (value > 300) { if (value > 300) {
option.series[0].data[0].value = 300; // Pointer at max option.series[0].data[0].value = 300; // Pointer at max
option.series[0].detail.formatter = value + ' m'; // Show real value option.series[0].detail.formatter = value + " m"; // Show real value
} }
myChart.setOption(option); myChart.setOption(option);
@ -341,122 +400,175 @@
var option = { var option = {
grid: { grid: {
top: '20%', top: "20%",
left: '3%', left: "3%",
right: '4%', right: "4%",
bottom: '3%', bottom: "3%",
containLabel: true containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: "axis",
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15'], data: [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
],
axisLine: { axisLine: {
lineStyle: { color: "#2C3E50" },
show: true, show: true,
lineStyle: { // lineStyle: {
color: 'rgba(255, 255, 255, 0.3)' // color: 'rgba(255, 255, 255, 0.3)'
} // }
}, },
axisLabel: { axisLabel: {
color: '#fff', color: "#B7C9E2",
fontSize: 14 fontSize: 25,
}, },
axisTick: { // axisTick: {
show: false // show: false
} // }
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
name: '长度(m)', name: "长度(m)",
nameTextStyle: { // nameTextStyle: {
color: '#fff', // color: '#fff',
padding: [0, 0, 0, 20] // padding: [0, 0, 0, 20]
}, // },
axisLine: { // axisLabel: {
show: false // color: '#fff',
}, // fontSize: 14
// },
// splitLine: {
// show: true,
// lineStyle: {
// color: 'rgba(255, 255, 255, 0.1)'
// }
// },
splitNumber: 5,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { axisLabel: {
color: '#fff', color: "#B7C9E2",
fontSize: 14 fontSize: 18,
}, },
splitLine: { splitLine: {
show: true,
lineStyle: { lineStyle: {
color: 'rgba(255, 255, 255, 0.1)' color: "rgba(255,255,255,0.15)",
} type: "dashed",
}
}, },
},
},
dataZoom: [{ type: "inside" }],
series: [ series: [
{ {
data: data, data: data,
type: 'bar', type: "bar",
barWidth: '40%', barWidth: "40%",
// itemStyle: {
// color: '#FF9900',
// borderColor: '#FF9900',
// borderWidth: 1
// },
itemStyle: { itemStyle: {
color: '#FF9900', normal: {
borderColor: '#FF9900', color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
borderWidth: 1 { offset: 0, color: "#46F2FF" },
{ offset: 1, color: "#0B4DB5" },
]),
shadowColor: "rgba(0, 0, 0, 0.3)",
shadowBlur: 10,
}, },
markPoint: {
symbol: 'pin',
symbolSize: 50,
label: {
show: true,
color: '#fff',
fontSize: 12
}, },
emphasis: {
itemStyle: { itemStyle: {
color: '#FF9900' color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#6af8ff" },
{ offset: 1, color: "#1560d6" },
]),
}, },
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
}, },
markLine: { // markPoint: {
symbol: 'none', // symbol: 'pin',
data: [ // symbolSize: 50,
{ yAxis: 2563.31, name: 'Average' } // label: {
// show: true,
// color: '#fff',
// fontSize: 12
// },
// itemStyle: {
// color: '#FF9900'
// },
// data: [
// { type: 'max', name: 'Max' },
// { type: 'min', name: 'Min' }
// ]
// },
// markLine: {
// symbol: 'none',
// data: [
// { yAxis: 2563.31, name: 'Average' }
// ],
// label: {
// show: true,
// position: 'end',
// formatter: '{c}',
// color: '#FF9900'
// },
// lineStyle: {
// type: 'dotted',
// color: '#FF9900'
// }
// }
},
// {
// type: 'bar',
// barGap: '-100%',
// data: (function(){ var yMax = 10000; var shadow=[]; for (var i=0;i<data.length;i++){shadow.push(yMax);} return shadow; })(),
// itemStyle: { normal: { color: 'rgba(0,0,0,0.05)' } },
// silent: true
// }
], ],
label: {
show: true,
position: 'end',
formatter: '{c}',
color: '#FF9900'
},
lineStyle: {
type: 'dotted',
color: '#FF9900'
}
}
}
]
}; };
myChart.setOption(option); myChart.setOption(option);
} }
function launchIntoFullscreen(element) { function launchIntoFullscreen(element) {
if(element.requestFullscreen) { if (element.requestFullscreen) {
element.requestFullscreen(); element.requestFullscreen();
} else if(element.mozRequestFullScreen) { } else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen(); element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) { } else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(); element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) { } else if (element.msRequestFullscreen) {
element.msRequestFullscreen(); element.msRequestFullscreen();
} }
} }
function exitFullscreen() { function exitFullscreen() {
if(document.exitFullscreen) { if (document.exitFullscreen) {
document.exitFullscreen(); document.exitFullscreen();
} else if(document.mozCancelFullScreen) { } else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen(); document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) { } else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen(); document.webkitExitFullscreen();
} }
} }
</script> </script>
</body> </body>
</html> </html>

587
src/main/webapp/jsp/bigScreen3.jsp
View File

@ -1,15 +1,20 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page language="java" contentType="text/html; charset=UTF-8"
<!DOCTYPE html> pageEncoding="UTF-8"%>
<!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>排污户大屏展示</title> <title>排污户大屏展示</title>
<!-- <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script> --> <!-- <script
<!-- <script type="text/javascript" src="../../JS/echarts3.0.js"></script> --> type="text/javascript"
src="../../node_modules/jquery/dist/jquery.min.js"
></script>
<script type="text/javascript" src="../../JS/echarts3.0.js"></script> -->
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script>
<style> <style>
body, html { body,
html {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -22,7 +27,7 @@
width: 6500px; width: 6500px;
height: 1800px; height: 1800px;
background-image: url('<%=request.getContextPath()%>/IMG/screen3.png'); background-image: url('<%=request.getContextPath()%>/IMG/screen3.png');
/* background-image: url('../../IMG/screen3.png'); */ /* background-image: url("../../IMG/screen3.png"); */
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
@ -66,7 +71,7 @@
font-size: 48px; font-size: 48px;
font-weight: bold; font-weight: bold;
color: #00eaff; color: #00eaff;
font-family: 'DIN Alternate', sans-serif; font-family: "DIN Alternate", sans-serif;
} }
.stat-unit { .stat-unit {
@ -199,7 +204,7 @@
color: #ffaa00; color: #ffaa00;
font-weight: bold; font-weight: bold;
margin-left: 15px; margin-left: 15px;
font-family: 'DIN Alternate', sans-serif; font-family: "DIN Alternate", sans-serif;
} }
.photo-section { .photo-section {
@ -265,43 +270,70 @@
display: none; display: none;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="screen-container"> <div class="screen-container">
<div class="rank-module-container"> <div class="rank-module-container">
<!-- Statistics --> <!-- Statistics -->
<div class="stats-header"> <div class="stats-header">
<div class="stat-item"> <div class="stat-item">
<div class="stat-label">辖区排污企业总数</div> <div class="stat-label">辖区排污企业总数</div>
<div class="stat-value" id="totalCount">0<span class="stat-unit">家</span></div> <div class="stat-value" id="totalCount">
0<span class="stat-unit">家</span>
</div>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<div class="stat-label">已接入监控</div> <div class="stat-label">已接入监控</div>
<div class="stat-value" style="color: #00ff00;" id="connectedCount">0<span class="stat-unit">家</span></div> <div class="stat-value" style="color: #00ff00" id="connectedCount">
0<span class="stat-unit">家</span>
</div>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<div class="stat-label">正在接入中</div> <div class="stat-label">正在接入中</div>
<div class="stat-value" style="color: #ffaa00;" id="connectingCount">0<span class="stat-unit">家</span></div> <div class="stat-value" style="color: #ffaa00" id="connectingCount">
0<span class="stat-unit">家</span>
</div>
</div> </div>
</div> </div>
<!-- Ranking List --> <!-- Ranking List -->
<div class="ranking-list-wrapper" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;"> <div
<div id="chartRanking" style="flex: 1; width: 100%;"></div> class="ranking-list-wrapper"
style="
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
"
>
<div id="chartRanking" style="flex: 1; width: 100%"></div>
</div> </div>
</div> </div>
<!-- Left Side Detail Module --> <!-- Left Side Detail Module -->
<div class="detail-module-container"> <div class="detail-module-container">
<div class="enterprise-detail-header" id="detailTitle">企业名称加载中...</div> <div class="enterprise-detail-header" id="detailTitle">
企业名称加载中...
</div>
<div class="detail-content"> <div class="detail-content">
<div class="info-section"> <div class="info-section">
<div class="info-item">污水特性: <span id="sewageType">--</span></div> <div class="info-item">
<div class="info-item">当前排污量: <span id="dischargeVolume">--</span></div> 污水特性: <span id="sewageType">--</span>
<div class="info-item">接入状态: <span id="connectionStatus">--</span></div> </div>
<div class="info-item">
当前排污量: <span id="dischargeVolume">--</span>
</div>
<div class="info-item">
接入状态: <span id="connectionStatus">--</span>
</div>
</div> </div>
<div class="photo-section"> <div class="photo-section">
<img id="sitePhoto" src="<%=request.getContextPath()%>/IMG/login/company.png" alt="现场照片" style="width:100%; height:100%; object-fit: cover;"> <img
id="sitePhoto"
src="<%=request.getContextPath()%>/IMG/login/company.png"
alt="现场照片"
style="width: 100%; height: 100%; object-fit: cover"
/>
<div class="photo-label">现场监控画面</div> <div class="photo-label">现场监控画面</div>
</div> </div>
</div> </div>
@ -319,7 +351,7 @@
<!-- New Bar Chart Area --> <!-- New Bar Chart Area -->
<div class="new-bar-chart-container"> <div class="new-bar-chart-container">
<div id="newBarChart" style="width: 100%; height: 100%;"></div> <div id="newBarChart" style="width: 100%; height: 100%"></div>
</div> </div>
</div> </div>
@ -335,34 +367,34 @@
var currentFocusIndex = 0; var currentFocusIndex = 0;
var rotationTimer = null; var rotationTimer = null;
$(document).ready(function() { $(document).ready(function () {
launchIntoFullscreen(document.documentElement); launchIntoFullscreen(document.documentElement);
initData(); initData();
// Double click to toggle fullscreen // Double click to toggle fullscreen
$('body').on('dblclick', function() { $("body").on("dblclick", function () {
launchIntoFullscreen(document.documentElement); launchIntoFullscreen(document.documentElement);
}); });
}); });
function launchIntoFullscreen(element) { function launchIntoFullscreen(element) {
if(element.requestFullscreen) { if (element.requestFullscreen) {
element.requestFullscreen(); element.requestFullscreen();
} else if(element.mozRequestFullScreen) { } else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen(); element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) { } else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(); element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) { } else if (element.msRequestFullscreen) {
element.msRequestFullscreen(); element.msRequestFullscreen();
} }
} }
function exitFullscreen() { function exitFullscreen() {
if(document.exitFullscreen) { if (document.exitFullscreen) {
document.exitFullscreen(); document.exitFullscreen();
} else if(document.mozCancelFullScreen) { } else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen(); document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) { } else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen(); document.webkitExitFullscreen();
} }
} }
@ -372,40 +404,50 @@
var total = 158; var total = 158;
var connected = 124; var connected = 124;
var connecting = 34; var connecting = 34;
$('#totalCount').html(total + '<span class="stat-unit">家</span>'); $("#totalCount").html(total + '<span class="stat-unit">家</span>');
$('#connectedCount').html(connected + '<span class="stat-unit">家</span>'); $("#connectedCount").html(
$('#connectingCount').html(connecting + '<span class="stat-unit">家</span>'); connected + '<span class="stat-unit">家</span>',
);
$("#connectingCount").html(
connecting + '<span class="stat-unit">家</span>',
);
// Generate Enterprises with Details // Generate Enterprises with Details
var enterprises = []; var enterprises = [];
var sewageTypes = ['化学需氧量', '氨氮', '总磷', '重金属', '酸碱废水']; var sewageTypes = ["化学需氧量", "氨氮", "总磷", "重金属", "酸碱废水"];
var connectionStatuses = ['已接入', '接入中']; var connectionStatuses = ["已接入", "接入中"];
for (var i = 1; i <= 50; i++) { for (var i = 1; i <= 50; i++) {
var val = Math.floor(Math.random() * 10000) + 500; var val = Math.floor(Math.random() * 10000) + 500;
enterprises.push({ enterprises.push({
id: i, id: i,
name: '企业-' + i, name: "企业-" + i,
value: val, value: val,
// Details // Details
sewageType: sewageTypes[Math.floor(Math.random() * sewageTypes.length)], sewageType:
connectionStatus: connectionStatuses[Math.floor(Math.random() * connectionStatuses.length)], sewageTypes[Math.floor(Math.random() * sewageTypes.length)],
indicator: val > 8000 ? '超级' : '普通', connectionStatus:
photo: '<%=request.getContextPath()%>/IMG/login/company.png', // Placeholder connectionStatuses[
Math.floor(Math.random() * connectionStatuses.length)
],
indicator: val > 8000 ? "超级" : "普通",
photo: "<%=request.getContextPath()%>/IMG/login/company.png", // Placeholder
// Map Coordinates (Relative % in map container) // Map Coordinates (Relative % in map container)
x: Math.random() * 90 + 5, // 5% to 95% x: Math.random() * 90 + 5, // 5% to 95%
y: Math.random() * 80 + 10, // 10% to 90% y: Math.random() * 80 + 10, // 10% to 90%
// History Data // History Data
instantHistory: generateHistoryData(72), // 3 days * 24 hours instantHistory: generateHistoryData(72), // 3 days * 24 hours
cumulativeHistory: generateHistoryData(14) // 14 days cumulativeHistory: generateHistoryData(14), // 14 days
}); });
} }
allEnterprises = enterprises; allEnterprises = enterprises;
// Init Charts // Init Charts
myChartInstant = echarts.init(document.getElementById('chartInstant')); myChartInstant = echarts.init(document.getElementById("chartInstant"));
myChartCumulative = echarts.init(document.getElementById('chartCumulative')); myChartCumulative = echarts.init(
myChartRanking = echarts.init(document.getElementById('chartRanking')); document.getElementById("chartCumulative"),
);
myChartRanking = echarts.init(document.getElementById("chartRanking"));
// myNewBarChart = echarts.init(document.getElementById('newBarChart')); // myNewBarChart = echarts.init(document.getElementById('newBarChart'));
// renderNewBarChart(); // renderNewBarChart();
@ -426,7 +468,7 @@
function generateHistoryData(count) { function generateHistoryData(count) {
var data = []; var data = [];
for(var k=0; k<count; k++) { for (var k = 0; k < count; k++) {
data.push(Math.floor(Math.random() * 500) + 50); data.push(Math.floor(Math.random() * 500) + 50);
} }
return data; return data;
@ -434,10 +476,14 @@
function updateSortedData(enterprises) { function updateSortedData(enterprises) {
// Sort Descending for Max // Sort Descending for Max
currentMaxData = [...enterprises].sort((a, b) => b.value - a.value).slice(0, 10); currentMaxData = [...enterprises]
.sort((a, b) => b.value - a.value)
.slice(0, 10);
// Sort Ascending for Min // Sort Ascending for Min
currentMinData = [...enterprises].sort((a, b) => a.value - b.value).slice(0, 10); currentMinData = [...enterprises]
.sort((a, b) => a.value - b.value)
.slice(0, 10);
} }
function renderRankingChart() { function renderRankingChart() {
@ -454,13 +500,18 @@
value: item.value, value: item.value,
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
offset: 0, color: '#ff5500' {
}, { offset: 0,
offset: 1, color: '#ffb700' color: "#ff5500",
}]) },
} {
} offset: 1,
color: "#ffb700",
},
]),
},
},
}); });
}); });
@ -471,194 +522,262 @@
value: item.value, value: item.value,
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
offset: 0, color: '#00aa00' {
}, { offset: 0,
offset: 1, color: '#00ff00' color: "#00aa00",
}]) },
} {
} offset: 1,
color: "#00ff00",
},
]),
},
},
}); });
}); });
var option = { var option = {
title: [{ title: [
text: '近30日排污量 TOP 10 (最大)', {
left: '25%', text: "近30日排污量 TOP 10 (最大)",
top: '2%', left: "25%",
textAlign: 'center', top: "2%",
textStyle: { color: '#ffffff', fontSize: 30, fontWeight: 'bold' } textAlign: "center",
}, { textStyle: { color: "#ffffff", fontSize: 30, fontWeight: "bold" },
text: '近30日排污量 TOP 10 (最小)', },
left: '75%', {
top: '2%', text: "近30日排污量 TOP 10 (最小)",
textAlign: 'center', left: "75%",
textStyle: { color: '#ffffff', fontSize: 30, fontWeight: 'bold' } top: "2%",
}], textAlign: "center",
grid: [{ textStyle: { color: "#ffffff", fontSize: 30, fontWeight: "bold" },
top: '12%', },
left: '2%', ],
right: '52%', grid: [
bottom: '5%', {
containLabel: true top: "12%",
}, { left: "2%",
top: '12%', right: "52%",
left: '52%', bottom: "5%",
right: '2%', containLabel: true,
bottom: '5%', },
containLabel: true {
}], top: "12%",
xAxis: [{ left: "52%",
type: 'value', right: "2%",
bottom: "5%",
containLabel: true,
},
],
xAxis: [
{
type: "value",
show: false, show: false,
gridIndex: 0 gridIndex: 0,
}, { },
type: 'value', {
type: "value",
show: false, show: false,
gridIndex: 1 gridIndex: 1,
}], },
yAxis: [{ ],
type: 'category', yAxis: [
{
type: "category",
data: maxNames, data: maxNames,
inverse: true, inverse: true,
axisLabel: { color: '#fff', fontSize: 20 }, axisLabel: { color: "#fff", fontSize: 20 },
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
gridIndex: 0 gridIndex: 0,
}, { },
type: 'category', {
type: "category",
data: minNames, data: minNames,
inverse: true, inverse: true,
axisLabel: { color: '#fff', fontSize: 20 }, axisLabel: { color: "#fff", fontSize: 20 },
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
gridIndex: 1 gridIndex: 1,
}], },
series: [{ ],
name: 'Max', series: [
type: 'bar', {
name: "Max",
type: "bar",
xAxisIndex: 0, xAxisIndex: 0,
yAxisIndex: 0, yAxisIndex: 0,
data: maxValues, data: maxValues,
barWidth: 45, barWidth: 45,
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)', color: "rgba(255, 255, 255, 0.1)",
barBorderRadius: [0, 22, 22, 0] barBorderRadius: [0, 22, 22, 0],
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'right', position: "right",
textStyle: { color: '#ffffff', fontSize: 20 }, textStyle: { color: "#ffffff", fontSize: 20 },
formatter: '{c}' formatter: "{c}",
} },
}, },
itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } }, itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
}, { },
name: 'Min', {
type: 'bar', name: "Min",
type: "bar",
xAxisIndex: 1, xAxisIndex: 1,
yAxisIndex: 1, yAxisIndex: 1,
data: minValues, data: minValues,
barWidth: 45, barWidth: 45,
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)', color: "rgba(255, 255, 255, 0.1)",
barBorderRadius: [0, 22, 22, 0] barBorderRadius: [0, 22, 22, 0],
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'right', position: "right",
textStyle: { color: '#ffffff', fontSize: 20 }, textStyle: { color: "#ffffff", fontSize: 20 },
formatter: '{c}' formatter: "{c}",
} },
}, },
itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } }, itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
}] },
],
}; };
myChartRanking.setOption(option); myChartRanking.setOption(option);
} }
function renderMapPoints() { function renderMapPoints() {
var html = ''; var html = "";
allEnterprises.forEach((item) => { allEnterprises.forEach((item) => {
html += '<div class="map-point ' + (item.value > 8000 ? 'super' : '') + '" id="point-' + item.id + '" style="left:' + item.x + '%; top:' + item.y + '%;" onclick="handleMapClick(' + item.id + ')">'; html +=
'<div class="map-point ' +
(item.value > 8000 ? "super" : "") +
'" id="point-' +
item.id +
'" style="left:' +
item.x +
"%; top:" +
item.y +
'%;" onclick="handleMapClick(' +
item.id +
')">';
html += '<div class="map-tooltip" onclick="event.stopPropagation()">'; // Stop prop to prevent point click html += '<div class="map-tooltip" onclick="event.stopPropagation()">'; // Stop prop to prevent point click
html += '<div class="map-tooltip-row" style="font-weight:bold; color:#00eaff; font-size:22px; margin-bottom:10px; cursor:pointer;" onclick="handleMapClick(' + item.id + ')">' + item.name + '</div>'; html +=
html += '<div class="map-tooltip-row"><span class="map-tooltip-label">瞬时流量:</span><span class="clickable-val" onclick="showHistoryModal(\'instant\', ' + item.id + ')">' + item.value + ' m³/h</span></div>'; '<div class="map-tooltip-row" style="font-weight:bold; color:#00eaff; font-size:22px; margin-bottom:10px; cursor:pointer;" onclick="handleMapClick(' +
html += '<div class="map-tooltip-row"><span class="map-tooltip-label">累计流量:</span><span class="clickable-val" onclick="showHistoryModal(\'cumulative\', ' + item.id + ')">' + (item.value * 24) + ' m³</span></div>'; item.id +
html += '</div>'; ')">' +
html += '</div>'; item.name +
"</div>";
html +=
'<div class="map-tooltip-row"><span class="map-tooltip-label">瞬时流量:</span><span class="clickable-val" onclick="showHistoryModal(\'instant\', ' +
item.id +
')">' +
item.value +
" m³/h</span></div>";
html +=
'<div class="map-tooltip-row"><span class="map-tooltip-label">累计流量:</span><span class="clickable-val" onclick="showHistoryModal(\'cumulative\', ' +
item.id +
')">' +
item.value * 24 +
" m³</span></div>";
html += "</div>";
html += "</div>";
}); });
$('#mapContainer').html(html); $("#mapContainer").html(html);
} }
function closeModal() { function closeModal() {
$('#historyModal').fadeOut(); $("#historyModal").fadeOut();
} }
var modalChartInstance = null; var modalChartInstance = null;
function showHistoryModal(type, id) { function showHistoryModal(type, id) {
var ent = allEnterprises.find(e => e.id === id); var ent = allEnterprises.find((e) => e.id === id);
if(!ent) return; if (!ent) return;
$('#historyModal').css('display', 'flex').hide().fadeIn(); $("#historyModal").css("display", "flex").hide().fadeIn();
if(modalChartInstance) { if (modalChartInstance) {
modalChartInstance.dispose(); modalChartInstance.dispose();
} }
modalChartInstance = echarts.init(document.getElementById('modalChart')); modalChartInstance = echarts.init(
document.getElementById("modalChart"),
);
var title = (type === 'instant' ? '瞬时排污量' : '累计流量') + '历史曲线 - ' + ent.name; var title =
$('#modalTitle').text(title); (type === "instant" ? "瞬时排污量" : "累计流量") +
"历史曲线 - " +
ent.name;
$("#modalTitle").text(title);
var xData, yData, color; var xData, yData, color;
if(type === 'instant') { if (type === "instant") {
xData = []; xData = [];
for(var i=0; i<72; i++) xData.push(i + 'h'); for (var i = 0; i < 72; i++) xData.push(i + "h");
yData = ent.instantHistory; yData = ent.instantHistory;
color = '#ffaa00'; color = "#ffaa00";
} else { } else {
xData = []; xData = [];
for(var j=0; j<14; j++) xData.push('D' + (j+1)); for (var j = 0; j < 14; j++) xData.push("D" + (j + 1));
yData = ent.cumulativeHistory; yData = ent.cumulativeHistory;
color = '#00eaff'; color = "#00eaff";
} }
var option = { var option = {
tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.8)', textStyle: {color: '#fff'} }, tooltip: {
grid: { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true }, trigger: "axis",
backgroundColor: "rgba(0,0,0,0.8)",
textStyle: { color: "#fff" },
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: "10%",
containLabel: true,
},
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: false, boundaryGap: false,
data: xData, data: xData,
axisLabel: { color: '#fff', fontSize: 16 }, axisLabel: { color: "#fff", fontSize: 16 },
axisLine: { lineStyle: { color: '#00eaff' } } axisLine: { lineStyle: { color: "#00eaff" } },
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
axisLabel: { color: '#fff', fontSize: 16 }, axisLabel: { color: "#fff", fontSize: 16 },
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } } splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
}, },
series: [{ series: [
name: type === 'instant' ? '瞬时流量' : '累计流量', {
type: 'line', name: type === "instant" ? "瞬时流量" : "累计流量",
type: "line",
smooth: true, smooth: true,
data: yData, data: yData,
lineStyle: { width: 3, color: color }, lineStyle: { width: 3, color: color },
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
offset: 0, color: color {
}, { offset: 0,
offset: 1, color: 'rgba(0,0,0,0)' color: color,
}])
}, },
itemStyle: { color: color } {
}] offset: 1,
color: "rgba(0,0,0,0)",
},
]),
},
itemStyle: { color: color },
},
],
}; };
modalChartInstance.setOption(option); modalChartInstance.setOption(option);
@ -666,7 +785,7 @@
function handleMapClick(id) { function handleMapClick(id) {
// Find if this enterprise is in currentMaxData // Find if this enterprise is in currentMaxData
var index = currentMaxData.findIndex(e => e.id === id); var index = currentMaxData.findIndex((e) => e.id === id);
if (index !== -1) { if (index !== -1) {
currentFocusIndex = index; currentFocusIndex = index;
updateDetailView(); updateDetailView();
@ -678,32 +797,34 @@
// If clicked item is not in Top 10, we can still show it in Detail View // If clicked item is not in Top 10, we can still show it in Detail View
// But rotation logic might overwrite it next tick. // But rotation logic might overwrite it next tick.
// Let's just show it temporarily. // Let's just show it temporarily.
var enterprise = allEnterprises.find(e => e.id === id); var enterprise = allEnterprises.find((e) => e.id === id);
if(enterprise) { if (enterprise) {
renderDetailContent(enterprise); renderDetailContent(enterprise);
highlightMapPoint(enterprise.id); highlightMapPoint(enterprise.id);
// Clear ranking highlight since it's not in the list (visually) // Clear ranking highlight since it's not in the list (visually)
$('.ranking-row').removeClass('active'); $(".ranking-row").removeClass("active");
} }
} }
} }
function startDataSimulation(enterprises) { function startDataSimulation(enterprises) {
setInterval(function() { setInterval(function () {
// Randomize values // Randomize values
enterprises.forEach(item => { enterprises.forEach((item) => {
item.value += Math.floor(Math.random() * 200) - 100; item.value += Math.floor(Math.random() * 200) - 100;
if(item.value < 0) item.value = 0; if (item.value < 0) item.value = 0;
item.indicator = item.value > 8000 ? '超级' : '普通'; item.indicator = item.value > 8000 ? "超级" : "普通";
// Update Map Point Style // Update Map Point Style
var el = $('#point-' + item.id); var el = $("#point-" + item.id);
if(item.value > 8000) { if (item.value > 8000) {
el.addClass('super'); el.addClass("super");
} else { } else {
el.removeClass('super'); el.removeClass("super");
} }
el.find('.map-tooltip').html(item.name + '<br>排污量: ' + item.value); el.find(".map-tooltip").html(
item.name + "<br>排污量: " + item.value,
);
}); });
updateSortedData(enterprises); updateSortedData(enterprises);
@ -721,15 +842,15 @@
} }
function startRotation() { function startRotation() {
rotationTimer = setInterval(function() { rotationTimer = setInterval(function () {
currentFocusIndex = (currentFocusIndex + 1) % 10; currentFocusIndex = (currentFocusIndex + 1) % 10;
updateDetailView(); updateDetailView();
}, 10000); // Rotate every 5 seconds }, 10000); // Rotate every 5 seconds
} }
function updateDetailView() { function updateDetailView() {
if(!currentMaxData || currentMaxData.length === 0) return; if (!currentMaxData || currentMaxData.length === 0) return;
if(currentFocusIndex >= currentMaxData.length) currentFocusIndex = 0; if (currentFocusIndex >= currentMaxData.length) currentFocusIndex = 0;
var enterprise = currentMaxData[currentFocusIndex]; var enterprise = currentMaxData[currentFocusIndex];
@ -743,16 +864,16 @@
} }
function highlightMapPoint(id) { function highlightMapPoint(id) {
$('.map-point').removeClass('active'); $(".map-point").removeClass("active");
$('#point-' + id).addClass('active'); $("#point-" + id).addClass("active");
} }
function renderDetailContent(enterprise) { function renderDetailContent(enterprise) {
// Update DOM // Update DOM
$('#detailTitle').text(enterprise.name); $("#detailTitle").text(enterprise.name);
$('#sewageType').text(enterprise.sewageType); $("#sewageType").text(enterprise.sewageType);
$('#dischargeVolume').text(enterprise.value + ' m³'); $("#dischargeVolume").text(enterprise.value + " m³");
$('#connectionStatus').text(enterprise.connectionStatus); $("#connectionStatus").text(enterprise.connectionStatus);
renderDetailCharts(enterprise); renderDetailCharts(enterprise);
} }
@ -760,66 +881,90 @@
function renderDetailCharts(enterprise) { function renderDetailCharts(enterprise) {
// Generate X labels // Generate X labels
var hours = []; var hours = [];
for(var i=0; i<72; i++) hours.push(i+'h'); for (var i = 0; i < 72; i++) hours.push(i + "h");
var days = []; var days = [];
for(var j=0; j<14; j++) days.push('D'+(j+1)); for (var j = 0; j < 14; j++) days.push("D" + (j + 1));
// Instant Chart (Line) // Instant Chart (Line)
var optionInstant = { var optionInstant = {
tooltip: { trigger: 'axis' }, tooltip: { trigger: "axis" },
grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true }, grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: "15%",
containLabel: true,
},
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: false, boundaryGap: false,
data: hours, data: hours,
axisLabel: { color: '#ccc' }, axisLabel: { color: "#ccc" },
axisLine: { lineStyle: { color: '#00eaff' } } axisLine: { lineStyle: { color: "#00eaff" } },
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
axisLabel: { color: '#ccc' }, axisLabel: { color: "#ccc" },
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } } splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
}, },
series: [{ series: [
name: '瞬时量', {
type: 'line', name: "瞬时量",
type: "line",
smooth: true, smooth: true,
symbol: 'none', symbol: "none",
sampling: 'average', sampling: "average",
itemStyle: { color: '#00eaff' }, itemStyle: { color: "#00eaff" },
areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(0, 234, 255, 0.5)' }, { offset: 1, color: 'rgba(0, 234, 255, 0)' }]) } }, areaStyle: {
data: enterprise.instantHistory normal: {
}] color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(0, 234, 255, 0.5)" },
{ offset: 1, color: "rgba(0, 234, 255, 0)" },
]),
},
},
data: enterprise.instantHistory,
},
],
}; };
// Cumulative Chart (Bar) // Cumulative Chart (Bar)
var optionCumulative = { var optionCumulative = {
tooltip: { trigger: 'axis' }, tooltip: { trigger: "axis" },
grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true }, grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: "15%",
containLabel: true,
},
xAxis: { xAxis: {
type: 'category', type: "category",
data: days, data: days,
axisLabel: { color: '#ccc' }, axisLabel: { color: "#ccc" },
axisLine: { lineStyle: { color: '#ffaa00' } } axisLine: { lineStyle: { color: "#ffaa00" } },
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
axisLabel: { color: '#ccc' }, axisLabel: { color: "#ccc" },
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } } splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
}, },
series: [{ series: [
name: '累计流量', {
type: 'bar', name: "累计流量",
itemStyle: { normal: { color: '#ffaa00', barBorderRadius: [5, 5, 0, 0] } }, type: "bar",
data: enterprise.cumulativeHistory itemStyle: {
}] normal: { color: "#ffaa00", barBorderRadius: [5, 5, 0, 0] },
},
data: enterprise.cumulativeHistory,
},
],
}; };
myChartInstant.setOption(optionInstant); myChartInstant.setOption(optionInstant);
myChartCumulative.setOption(optionCumulative); myChartCumulative.setOption(optionCumulative);
} }
</script> </script>
</body> </body>
</html>

2
src/main/webapp/jsp/main_JS_Company.jsp
View File

@ -179,7 +179,7 @@
<div style="float:left;height:50%;width:100%;padding:5px 5px 5px 5px;"> <div style="float:left;height:50%;width:100%;padding:5px 5px 5px 5px;">
<div style="height:100%;width:100%;background-color:#ffffff;"> <div style="height:100%;width:100%;background-color:#ffffff;">
<div class="section-header"> <div class="section-header">
上海金山卫污水公司 上海金山卫污水公司11
</div> </div>
<div style="width:20%;height:95%;float:left;"> <div style="width:20%;height:95%;float:left;">
<div style="width:100%;height:25%;float:left;background-color:#cbe3f9;margin:6%;"> <div style="width:100%;height:25%;float:left;background-color:#cbe3f9;margin:6%;">

298
src/main/webapp/jsp/z_bigScreen/bigScreen1.html
View File

@ -1,13 +1,17 @@
<!-- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> --> <!-- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> -->
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>水厂大屏展示</title> <title>水厂大屏展示</title>
<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script> <script
type="text/javascript"
src="../../node_modules/jquery/dist/jquery.min.js"
></script>
<script type="text/javascript" src="../../JS/echarts3.0.js"></script> <script type="text/javascript" src="../../JS/echarts3.0.js"></script>
<style> <style>
body, html { body,
html {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -19,7 +23,7 @@
width: 6500px; width: 6500px;
height: 1800px; height: 1800px;
/* background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png'); */ /* background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png'); */
background-image: url('../../IMG/screen1.png'); background-image: url("../../IMG/screen1.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
@ -30,7 +34,7 @@
width: 121px; width: 121px;
height: 62px; height: 62px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
font-family: 'Gilroy', 'DIN Alternate', 'Arial Narrow', sans-serif; font-family: "Gilroy", "DIN Alternate", "Arial Narrow", sans-serif;
font-weight: 900; font-weight: 900;
font-size: 50px; font-size: 50px;
z-index: 10; z-index: 10;
@ -142,7 +146,7 @@
} }
/* 药耗 */ /* 药耗 */
.yaohao{ .yaohao {
position: absolute; position: absolute;
top: 343px; top: 343px;
width: 94px; width: 94px;
@ -172,10 +176,9 @@
top: 300px; top: 300px;
left: 2700px; left: 2700px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="screen-container"> <div class="screen-container">
<div class="left"> <div class="left">
<div> <div>
@ -300,7 +303,7 @@
<!-- 中间图表 --> <!-- 中间图表 -->
<div class="Middle3"> <div class="Middle3">
<img src="../../IMG/monitor.png" style="width:100%;height:100%;" /> <img src="../../IMG/monitor.png" style="width: 100%; height: 100%" />
</div> </div>
<div class="Middle4"> <div class="Middle4">
@ -317,265 +320,298 @@
</div> </div>
<!-- 视频 --> <!-- 视频 -->
<div class="right"> <div class="right"></div>
</div>
</div> </div>
<script> <script>
$(function() { $(function () {
var chartDom = document.getElementById('seven-days-chart'); var chartDom = document.getElementById("seven-days-chart");
if (!chartDom) return; if (!chartDom) return;
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var dataAxis = ['11-10', '11-11', '11-12', '11-13', '11-14', '11-15', '11-16', '11-17']; var dataAxis = [
"11-10",
"11-11",
"11-12",
"11-13",
"11-14",
"11-15",
"11-16",
"11-17",
];
var data = [5200, 4300, 4200, 4300, 6800, 5200, 7400, 5600]; var data = [5200, 4300, 4200, 4300, 6800, 5200, 7400, 5600];
var option = { var option = {
backgroundColor: 'transparent', backgroundColor: "transparent",
grid: { grid: {
left: 60, left: 60,
right: 40, right: 40,
top: 40, top: 40,
bottom: 40 bottom: 40,
}, },
legend: { legend: {
data: ['处理水量'], data: ["处理水量"],
right: 10, right: 10,
top: 0, top: 0,
textStyle: { textStyle: {
color: '#9BE8FF', color: "#9BE8FF",
fontSize: 25 fontSize: 25,
} },
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: dataAxis, data: dataAxis,
axisLine: { axisLine: {
lineStyle: { color: '#2C3E50' } lineStyle: { color: "#2C3E50" },
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
color: '#B7C9E2', color: "#B7C9E2",
fontSize: 25 fontSize: 25,
} },
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
max: 10000, max: 10000,
splitNumber: 5, splitNumber: 5,
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
color: '#B7C9E2', color: "#B7C9E2",
fontSize: 18 fontSize: 18,
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(255,255,255,0.15)', color: "rgba(255,255,255,0.15)",
type: 'dashed' type: "dashed",
}
}
}, },
dataZoom: [ },
{ type: 'inside' } },
], dataZoom: [{ type: "inside" }],
series: [ series: [
{ {
name: '处理水量', name: "处理水量",
type: 'bar', type: "bar",
barWidth: 20, barWidth: 20,
data: data, data: data,
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#46F2FF' }, { offset: 0, color: "#46F2FF" },
{ offset: 1, color: '#0B4DB5' } { offset: 1, color: "#0B4DB5" },
]), ]),
shadowColor: 'rgba(0, 0, 0, 0.3)', shadowColor: "rgba(0, 0, 0, 0.3)",
shadowBlur: 10 shadowBlur: 10,
} },
}, },
emphasis: { emphasis: {
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#6af8ff' }, { offset: 0, color: "#6af8ff" },
{ offset: 1, color: '#1560d6' } { offset: 1, color: "#1560d6" },
]) ]),
} },
} },
}, },
{ {
type: 'bar', type: "bar",
barGap: '-100%', barGap: "-100%",
data: (function(){ var yMax = 10000; var shadow=[]; for (var i=0;i<data.length;i++){shadow.push(yMax);} return shadow; })(), data: (function () {
itemStyle: { normal: { color: 'rgba(0,0,0,0.05)' } }, var yMax = 10000;
silent: true var shadow = [];
for (var i = 0; i < data.length; i++) {
shadow.push(yMax);
} }
] return shadow;
})(),
itemStyle: { normal: { color: "rgba(0,0,0,0.05)" } },
silent: true,
},
],
}; };
myChart.setOption(option); myChart.setOption(option);
var zoomSize = 6; var zoomSize = 6;
myChart.on('click', function(params) { myChart.on("click", function (params) {
var startIndex = Math.max(params.dataIndex - Math.floor(zoomSize / 2), 0); var startIndex = Math.max(
var endIndex = Math.min(params.dataIndex + Math.floor(zoomSize / 2), data.length - 1); params.dataIndex - Math.floor(zoomSize / 2),
0,
);
var endIndex = Math.min(
params.dataIndex + Math.floor(zoomSize / 2),
data.length - 1,
);
myChart.dispatchAction({ myChart.dispatchAction({
type: 'dataZoom', type: "dataZoom",
startValue: dataAxis[startIndex], startValue: dataAxis[startIndex],
endValue: dataAxis[endIndex] endValue: dataAxis[endIndex],
}); });
}); });
var nclDom = document.getElementById('ncl-chart'); var nclDom = document.getElementById("ncl-chart");
if (nclDom) { if (nclDom) {
var nclChart = echarts.init(nclDom, 'dark'); var nclChart = echarts.init(nclDom, "dark");
var nclData = [120, 160, 90, 250, 170, 340, 280, 330, 80, 260]; var nclData = [120, 160, 90, 250, 170, 340, 280, 330, 80, 260];
var nclOption = { var nclOption = {
backgroundColor: 'transparent', backgroundColor: "transparent",
grid: { grid: {
left: 60, left: 60,
right: 40, right: 40,
top: 40, top: 40,
bottom: 40 bottom: 40,
}, },
legend: { legend: {
data: ['实际小时排泥量'], data: ["实际小时排泥量"],
right: 10, right: 10,
top: 0, top: 0,
textStyle: { textStyle: {
color: '#9BE8FF', color: "#9BE8FF",
fontSize: 25 fontSize: 25,
} },
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: ['2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'], data: [
"2:00",
"4:00",
"6:00",
"8:00",
"10:00",
"12:00",
"14:00",
"16:00",
"18:00",
"20:00",
],
boundaryGap: false, boundaryGap: false,
axisLine: { axisLine: {
lineStyle: { color: '#2C3E50' } lineStyle: { color: "#2C3E50" },
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
color: '#B7C9E2', color: "#B7C9E2",
fontSize: 25 fontSize: 25,
} },
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
max: 500, max: 500,
splitNumber: 5, splitNumber: 5,
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
color: '#B7C9E2', color: "#B7C9E2",
fontSize: 25 fontSize: 25,
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(255,255,255,0.15)', color: "rgba(255,255,255,0.15)",
type: 'dashed' type: "dashed",
} },
} },
}, },
series: [ series: [
{ {
name: '实际小时排泥量', name: "实际小时排泥量",
type: 'line', type: "line",
smooth: true, smooth: true,
symbol: 'none', symbol: "none",
lineStyle: { normal: { width: 2 } }, lineStyle: { normal: { width: 2 } },
itemStyle: { normal: { color: '#46F2FF' } }, itemStyle: { normal: { color: "#46F2FF" } },
areaStyle: { normal: { areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(70, 242, 255, 0.45)' }, { offset: 0, color: "rgba(70, 242, 255, 0.45)" },
{ offset: 1, color: 'rgba(11, 77, 181, 0.05)' } { offset: 1, color: "rgba(11, 77, 181, 0.05)" },
]), ]),
opacity: 1 opacity: 1,
}}, },
data: nclData },
} data: nclData,
] },
],
}; };
nclChart.setOption(nclOption); nclChart.setOption(nclOption);
window.addEventListener('resize', function() { window.addEventListener("resize", function () {
nclChart.resize(); nclChart.resize();
}); });
} }
window.addEventListener('resize', function() { window.addEventListener("resize", function () {
myChart.resize(); myChart.resize();
}); });
var qualityDom = document.getElementById('quality-chart'); var qualityDom = document.getElementById("quality-chart");
if (qualityDom) { if (qualityDom) {
var qualityChart = echarts.init(qualityDom); var qualityChart = echarts.init(qualityDom);
var qualityData = [8, 13, 9, 14, 21, 14, 18]; var qualityData = [8, 13, 9, 14, 21, 14, 18];
var qualityOption = { var qualityOption = {
backgroundColor: 'transparent', backgroundColor: "transparent",
grid: { grid: {
left: 60, left: 60,
right: 40, right: 40,
top: 40, top: 40,
bottom: 40 bottom: 40,
}, },
legend: { legend: {
data: ['水质量'], data: ["水质量"],
right: 10, right: 10,
top: 0, top: 0,
textStyle: { textStyle: {
color: '#9BE8FF', color: "#9BE8FF",
fontSize: 25 fontSize: 25,
} },
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: ['11', '12', '13', '14', '15', '16', '17'], data: ["11", "12", "13", "14", "15", "16", "17"],
boundaryGap: false, boundaryGap: false,
axisLine: { axisLine: {
lineStyle: { color: '#2C3E50' } lineStyle: { color: "#2C3E50" },
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
color: '#B7C9E2', color: "#B7C9E2",
fontSize: 25 fontSize: 25,
} },
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
max: 25, max: 25,
splitNumber: 5, splitNumber: 5,
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
color: '#B7C9E2', color: "#B7C9E2",
fontSize: 25 fontSize: 25,
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(255,255,255,0.15)', color: "rgba(255,255,255,0.15)",
type: 'dashed' type: "dashed",
} },
} },
}, },
series: [ series: [
{ {
name: '水质量', name: "水质量",
type: 'line', type: "line",
smooth: true, smooth: true,
symbol: 'none', symbol: "none",
lineStyle: { normal: { width: 2 } }, lineStyle: { normal: { width: 2 } },
itemStyle: { normal: { color: '#46F2FF' } }, itemStyle: { normal: { color: "#46F2FF" } },
areaStyle: { normal: { areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(70, 242, 255, 0.45)' }, { offset: 0, color: "rgba(70, 242, 255, 0.45)" },
{ offset: 1, color: 'rgba(11, 77, 181, 0.05)' } { offset: 1, color: "rgba(11, 77, 181, 0.05)" },
]), ]),
opacity: 1 opacity: 1,
}}, },
data: qualityData },
} data: qualityData,
] },
],
}; };
qualityChart.setOption(qualityOption); qualityChart.setOption(qualityOption);
window.addEventListener('resize', function() { window.addEventListener("resize", function () {
qualityChart.resize(); qualityChart.resize();
}); });
} }
}); });
</script> </script>
</body> </body>
</html> </html>

448
src/main/webapp/jsp/z_bigScreen/bigScreen2.html
View File

@ -1,15 +1,20 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page language="java" contentType="text/html; charset=UTF-8"
<!DOCTYPE html> pageEncoding="UTF-8"%>
<!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>区域管线大屏展示</title> <title>区域管线大屏展示</title>
<!-- <script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script> --> <!-- <script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script> -->
<!-- <script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script> --> <!-- <script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script> -->
<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script> <script
type="text/javascript"
src="../../node_modules/jquery/dist/jquery.min.js"
></script>
<script type="text/javascript" src="../../JS/echarts3.0.js"></script> <script type="text/javascript" src="../../JS/echarts3.0.js"></script>
<style> <style>
body, html { body,
html {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -20,7 +25,7 @@
.screen-container { .screen-container {
width: 6500px; width: 6500px;
height: 1800px; height: 1800px;
background-image: url('../../IMG/screen2.png'); background-image: url("../../IMG/screen2.png");
/* background-image: url('<%=request.getContextPath()%>/IMG/screen2.png'); */ /* background-image: url('<%=request.getContextPath()%>/IMG/screen2.png'); */
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -38,9 +43,15 @@
font-size: 60px; font-size: 60px;
} }
.card-1 { left: 1910px; } .card-1 {
.card-2 { left: 2832px; } left: 1910px;
.card-3 { left: 3754px; } }
.card-2 {
left: 2832px;
}
.card-3 {
left: 3754px;
}
.ring-chart-wrapper { .ring-chart-wrapper {
position: absolute; position: absolute;
@ -96,7 +107,12 @@
box-sizing: border-box; box-sizing: border-box;
/* background: rgba(27, 126, 242, 0.6); */ /* background: rgba(27, 126, 242, 0.6); */
} }
#ring-chart-content, #pie-chart-content-2, #gauge-chart-content-3, #gauge-chart-content-4, #bar-chart-content-5, #bar-chart-content-6 { #ring-chart-content,
#pie-chart-content-2,
#gauge-chart-content-3,
#gauge-chart-content-4,
#bar-chart-content-5,
#bar-chart-content-6 {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -104,8 +120,8 @@
height: 100%; height: 100%;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="screen-container"> <div class="screen-container">
<div class="stat-card card-1">53829.5</div> <div class="stat-card card-1">53829.5</div>
<div class="stat-card card-2">2495</div> <div class="stat-card card-2">2495</div>
@ -143,117 +159,153 @@
</div> </div>
<script> <script>
$(document).ready(function() { $(document).ready(function () {
launchIntoFullscreen(document.documentElement); launchIntoFullscreen(document.documentElement);
initPieChart(); initPieChart();
initPieChart2(); initPieChart2();
initGaugeChart('gauge-chart-content-3', 53829.5); initGaugeChart("gauge-chart-content-3", 53829.5);
initGaugeChart('gauge-chart-content-4', 12345.6); initGaugeChart("gauge-chart-content-4", 12345.6);
initBarChart('bar-chart-content-5', [3000, 4500, 1500, 5000, 23000, 1500, 15000, 3000, 4000, 5000, 2000, 1000, 500, 2563, 4000]); initBarChart(
initBarChart('bar-chart-content-6', [2000, 3000, 1000, 4000, 18000, 1000, 12000, 2000, 3000, 4000, 1500, 800, 400, 2000, 3000]); "bar-chart-content-5",
[
3000, 4500, 1500, 5000, 23000, 1500, 15000, 3000, 4000, 5000, 2000,
1000, 500, 2563, 4000,
],
);
initBarChart(
"bar-chart-content-6",
[
2000, 3000, 1000, 4000, 18000, 1000, 12000, 2000, 3000, 4000, 1500,
800, 400, 2000, 3000,
],
);
// Double click to toggle fullscreen // Double click to toggle fullscreen
$('body').on('dblclick', function() { $("body").on("dblclick", function () {
launchIntoFullscreen(document.documentElement); launchIntoFullscreen(document.documentElement);
}); });
}); });
function initPieChart() { function initPieChart() {
var chartDom = document.getElementById('ring-chart-content'); var chartDom = document.getElementById("ring-chart-content");
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option = { var option = {
color: [ color: [
'#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', "#5470c6",
'#00d4ff', '#ffb700', '#2bff89', '#915eff', '#ff7f00' "#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
"#00d4ff",
"#ffb700",
"#2bff89",
"#915eff",
"#ff7f00",
], ],
series: [ series: [
{ {
name: '管线类型统计', name: "管线类型统计",
type: 'pie', type: "pie",
radius: '55%', radius: "55%",
center: ['50%', '50%'], center: ["50%", "50%"],
avoidLabelOverlap: true, avoidLabelOverlap: true,
label: { label: {
show: true, show: true,
position: 'outside', position: "outside",
formatter: '{b}', formatter: "{b}",
fontSize: 14, fontSize: 14,
lineHeight: 20, lineHeight: 20,
align: 'left' align: "left",
}, },
labelLine: { labelLine: {
show: true, show: true,
length: 20, length: 20,
length2: 30, length2: 30,
lineStyle: { lineStyle: {
type: 'solid' type: "solid",
} },
}, },
data: [ data: [
{ value: 335, name: 'II级钢筋混凝土管 承插接口' }, { value: 335, name: "II级钢筋混凝土管 承插接口" },
{ value: 310, name: '焊接钢管 焊接接口' }, { value: 310, name: "焊接钢管 焊接接口" },
{ value: 274, name: '高密度聚乙烯双壁波纹管' }, { value: 274, name: "高密度聚乙烯双壁波纹管" },
{ value: 235, name: '聚乙烯PE管' }, { value: 235, name: "聚乙烯PE管" },
{ value: 200, name: 'II级钢筋混凝土管' }, { value: 200, name: "II级钢筋混凝土管" },
{ value: 180, name: '高密度聚乙烯缠绕管' }, { value: 180, name: "高密度聚乙烯缠绕管" },
{ value: 150, name: '焊接钢管 焊接连接' }, { value: 150, name: "焊接钢管 焊接连接" },
{ value: 140, name: '高密度聚乙烯中空壁缠绕管' }, { value: 140, name: "高密度聚乙烯中空壁缠绕管" },
{ value: 130, name: '钢筋混凝土管' }, { value: 130, name: "钢筋混凝土管" },
{ value: 110, name: '球墨铸铁管' }, { value: 110, name: "球墨铸铁管" },
{ value: 100, name: '预应力钢筒混凝土管' } { value: 100, name: "预应力钢筒混凝土管" },
] ],
} },
] ],
}; };
myChart.setOption(option); myChart.setOption(option);
} }
function initPieChart2() { function initPieChart2() {
var chartDom = document.getElementById('pie-chart-content-2'); var chartDom = document.getElementById("pie-chart-content-2");
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option = { var option = {
color: [ color: [
'#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', "#5470c6",
'#00d4ff', '#ffb700', '#2bff89', '#915eff', '#ff7f00' "#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
"#00d4ff",
"#ffb700",
"#2bff89",
"#915eff",
"#ff7f00",
], ],
series: [ series: [
{ {
name: '管线类型统计2', name: "管线类型统计2",
type: 'pie', type: "pie",
radius: '55%', radius: "55%",
center: ['50%', '50%'], center: ["50%", "50%"],
avoidLabelOverlap: true, avoidLabelOverlap: true,
label: { label: {
show: true, show: true,
position: 'outside', position: "outside",
formatter: '{b}', formatter: "{b}",
fontSize: 14, fontSize: 14,
lineHeight: 20, lineHeight: 20,
align: 'left' align: "left",
}, },
labelLine: { labelLine: {
show: true, show: true,
length: 20, length: 20,
length2: 30, length2: 30,
lineStyle: { lineStyle: {
type: 'solid' type: "solid",
} },
}, },
data: [ data: [
{ value: 335, name: 'II级钢筋混凝土管 承插接口' }, { value: 335, name: "II级钢筋混凝土管 承插接口" },
{ value: 310, name: '焊接钢管 焊接接口' }, { value: 310, name: "焊接钢管 焊接接口" },
{ value: 274, name: '高密度聚乙烯双壁波纹管' }, { value: 274, name: "高密度聚乙烯双壁波纹管" },
{ value: 235, name: '聚乙烯PE管' }, { value: 235, name: "聚乙烯PE管" },
{ value: 200, name: 'II级钢筋混凝土管' }, { value: 200, name: "II级钢筋混凝土管" },
{ value: 180, name: '高密度聚乙烯缠绕管' }, { value: 180, name: "高密度聚乙烯缠绕管" },
{ value: 150, name: '焊接钢管 焊接连接' }, { value: 150, name: "焊接钢管 焊接连接" },
{ value: 140, name: '高密度聚乙烯中空壁缠绕管' }, { value: 140, name: "高密度聚乙烯中空壁缠绕管" },
{ value: 130, name: '钢筋混凝土管' }, { value: 130, name: "钢筋混凝土管" },
{ value: 110, name: '球墨铸铁管' }, { value: 110, name: "球墨铸铁管" },
{ value: 100, name: '预应力钢筒混凝土管' } { value: 100, name: "预应力钢筒混凝土管" },
] ],
} },
] ],
}; };
myChart.setOption(option); myChart.setOption(option);
} }
@ -264,58 +316,65 @@
var option = { var option = {
series: [ series: [
{ {
type: 'gauge', type: "gauge",
startAngle: 180, startAngle: 180,
endAngle: 0, endAngle: 0,
min: 0, min: 0,
max: 300, max: 300,
splitNumber: 6, splitNumber: 6,
radius: '90%', radius: "90%",
center: ['50%', '70%'], center: ["50%", "70%"],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
width: 40, width: 40,
color: [[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [ color: [
{ offset: 0, color: 'rgba(65, 108, 243, 1)' }, [
{ offset: 1, color: 'rgba(0, 68, 160, 1)' } 1,
])]] new echarts.graphic.LinearGradient(0, 0, 1, 0, [
} { offset: 0, color: "rgba(65, 108, 243, 1)" },
{ offset: 1, color: "rgba(0, 68, 160, 1)" },
]),
],
],
},
}, },
pointer: { pointer: {
show: true, show: true,
length: '60%', length: "60%",
width: 6, width: 6,
itemStyle: { itemStyle: {
color: '#00d4ff' color: "#00d4ff",
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
color: '#00d4ff', color: "#00d4ff",
fontSize: 14, fontSize: 14,
distance: -60, distance: -60,
formatter: function (value) { formatter: function (value) {
return value; return value;
} },
}, },
detail: { detail: {
show: true, show: true,
offsetCenter: [0, '40%'], offsetCenter: [0, "40%"],
fontSize: 30, fontSize: 30,
color: '#fff', color: "#fff",
formatter: '{value} m' formatter: "{value} m",
}, },
data: [{ data: [
{
value: value, value: value,
name: '' name: "",
}] },
} ],
] },
],
}; };
// Adjust value if it exceeds max for visual representation (optional) // Adjust value if it exceeds max for visual representation (optional)
@ -325,7 +384,7 @@
// Let's set the gauge pointer to max if value > 300 // Let's set the gauge pointer to max if value > 300
if (value > 300) { if (value > 300) {
option.series[0].data[0].value = 300; // Pointer at max option.series[0].data[0].value = 300; // Pointer at max
option.series[0].detail.formatter = value + ' m'; // Show real value option.series[0].detail.formatter = value + " m"; // Show real value
} }
myChart.setOption(option); myChart.setOption(option);
@ -341,122 +400,175 @@
var option = { var option = {
grid: { grid: {
top: '20%', top: "20%",
left: '3%', left: "3%",
right: '4%', right: "4%",
bottom: '3%', bottom: "3%",
containLabel: true containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: "axis",
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15'], data: [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
],
axisLine: { axisLine: {
lineStyle: { color: "#2C3E50" },
show: true, show: true,
lineStyle: { // lineStyle: {
color: 'rgba(255, 255, 255, 0.3)' // color: 'rgba(255, 255, 255, 0.3)'
} // }
}, },
axisLabel: { axisLabel: {
color: '#fff', color: "#B7C9E2",
fontSize: 14 fontSize: 25,
}, },
axisTick: { // axisTick: {
show: false // show: false
} // }
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
name: '长度(m)', name: "长度(m)",
nameTextStyle: { // nameTextStyle: {
color: '#fff', // color: '#fff',
padding: [0, 0, 0, 20] // padding: [0, 0, 0, 20]
}, // },
axisLine: { // axisLabel: {
show: false // color: '#fff',
}, // fontSize: 14
// },
// splitLine: {
// show: true,
// lineStyle: {
// color: 'rgba(255, 255, 255, 0.1)'
// }
// },
splitNumber: 5,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { axisLabel: {
color: '#fff', color: "#B7C9E2",
fontSize: 14 fontSize: 18,
}, },
splitLine: { splitLine: {
show: true,
lineStyle: { lineStyle: {
color: 'rgba(255, 255, 255, 0.1)' color: "rgba(255,255,255,0.15)",
} type: "dashed",
}
}, },
},
},
dataZoom: [{ type: "inside" }],
series: [ series: [
{ {
data: data, data: data,
type: 'bar', type: "bar",
barWidth: '40%', barWidth: "40%",
// itemStyle: {
// color: '#FF9900',
// borderColor: '#FF9900',
// borderWidth: 1
// },
itemStyle: { itemStyle: {
color: '#FF9900', normal: {
borderColor: '#FF9900', color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
borderWidth: 1 { offset: 0, color: "#46F2FF" },
{ offset: 1, color: "#0B4DB5" },
]),
shadowColor: "rgba(0, 0, 0, 0.3)",
shadowBlur: 10,
}, },
markPoint: {
symbol: 'pin',
symbolSize: 50,
label: {
show: true,
color: '#fff',
fontSize: 12
}, },
emphasis: {
itemStyle: { itemStyle: {
color: '#FF9900' color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#6af8ff" },
{ offset: 1, color: "#1560d6" },
]),
}, },
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
}, },
markLine: { // markPoint: {
symbol: 'none', // symbol: 'pin',
data: [ // symbolSize: 50,
{ yAxis: 2563.31, name: 'Average' } // label: {
// show: true,
// color: '#fff',
// fontSize: 12
// },
// itemStyle: {
// color: '#FF9900'
// },
// data: [
// { type: 'max', name: 'Max' },
// { type: 'min', name: 'Min' }
// ]
// },
// markLine: {
// symbol: 'none',
// data: [
// { yAxis: 2563.31, name: 'Average' }
// ],
// label: {
// show: true,
// position: 'end',
// formatter: '{c}',
// color: '#FF9900'
// },
// lineStyle: {
// type: 'dotted',
// color: '#FF9900'
// }
// }
},
// {
// type: 'bar',
// barGap: '-100%',
// data: (function(){ var yMax = 10000; var shadow=[]; for (var i=0;i<data.length;i++){shadow.push(yMax);} return shadow; })(),
// itemStyle: { normal: { color: 'rgba(0,0,0,0.05)' } },
// silent: true
// }
], ],
label: {
show: true,
position: 'end',
formatter: '{c}',
color: '#FF9900'
},
lineStyle: {
type: 'dotted',
color: '#FF9900'
}
}
}
]
}; };
myChart.setOption(option); myChart.setOption(option);
} }
function launchIntoFullscreen(element) { function launchIntoFullscreen(element) {
if(element.requestFullscreen) { if (element.requestFullscreen) {
element.requestFullscreen(); element.requestFullscreen();
} else if(element.mozRequestFullScreen) { } else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen(); element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) { } else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(); element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) { } else if (element.msRequestFullscreen) {
element.msRequestFullscreen(); element.msRequestFullscreen();
} }
} }
function exitFullscreen() { function exitFullscreen() {
if(document.exitFullscreen) { if (document.exitFullscreen) {
document.exitFullscreen(); document.exitFullscreen();
} else if(document.mozCancelFullScreen) { } else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen(); document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) { } else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen(); document.webkitExitFullscreen();
} }
} }
</script> </script>
</body> </body>
</html> </html>

585
src/main/webapp/jsp/z_bigScreen/bigScreen3.html
View File

@ -1,15 +1,20 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page language="java" contentType="text/html; charset=UTF-8"
<!DOCTYPE html> pageEncoding="UTF-8"%>
<!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>排污户大屏展示</title> <title>排污户大屏展示</title>
<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script> <script
type="text/javascript"
src="../../node_modules/jquery/dist/jquery.min.js"
></script>
<script type="text/javascript" src="../../JS/echarts3.0.js"></script> <script type="text/javascript" src="../../JS/echarts3.0.js"></script>
<!-- <script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script> --> <!-- <script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script> -->
<!-- <script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script> --> <!-- <script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script> -->
<style> <style>
body, html { body,
html {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -22,7 +27,7 @@
width: 6500px; width: 6500px;
height: 1800px; height: 1800px;
/* background-image: url('<%=request.getContextPath()%>/IMG/screen3.png'); */ /* background-image: url('<%=request.getContextPath()%>/IMG/screen3.png'); */
background-image: url('../../IMG/screen3.png'); background-image: url("../../IMG/screen3.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
@ -66,7 +71,7 @@
font-size: 48px; font-size: 48px;
font-weight: bold; font-weight: bold;
color: #00eaff; color: #00eaff;
font-family: 'DIN Alternate', sans-serif; font-family: "DIN Alternate", sans-serif;
} }
.stat-unit { .stat-unit {
@ -199,7 +204,7 @@
color: #ffaa00; color: #ffaa00;
font-weight: bold; font-weight: bold;
margin-left: 15px; margin-left: 15px;
font-family: 'DIN Alternate', sans-serif; font-family: "DIN Alternate", sans-serif;
} }
.photo-section { .photo-section {
@ -265,43 +270,70 @@
display: none; display: none;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="screen-container"> <div class="screen-container">
<div class="rank-module-container"> <div class="rank-module-container">
<!-- Statistics --> <!-- Statistics -->
<div class="stats-header"> <div class="stats-header">
<div class="stat-item"> <div class="stat-item">
<div class="stat-label">辖区排污企业总数</div> <div class="stat-label">辖区排污企业总数</div>
<div class="stat-value" id="totalCount">0<span class="stat-unit">家</span></div> <div class="stat-value" id="totalCount">
0<span class="stat-unit">家</span>
</div>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<div class="stat-label">已接入监控</div> <div class="stat-label">已接入监控</div>
<div class="stat-value" style="color: #00ff00;" id="connectedCount">0<span class="stat-unit">家</span></div> <div class="stat-value" style="color: #00ff00" id="connectedCount">
0<span class="stat-unit">家</span>
</div>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<div class="stat-label">正在接入中</div> <div class="stat-label">正在接入中</div>
<div class="stat-value" style="color: #ffaa00;" id="connectingCount">0<span class="stat-unit">家</span></div> <div class="stat-value" style="color: #ffaa00" id="connectingCount">
0<span class="stat-unit">家</span>
</div>
</div> </div>
</div> </div>
<!-- Ranking List --> <!-- Ranking List -->
<div class="ranking-list-wrapper" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;"> <div
<div id="chartRanking" style="flex: 1; width: 100%;"></div> class="ranking-list-wrapper"
style="
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
"
>
<div id="chartRanking" style="flex: 1; width: 100%"></div>
</div> </div>
</div> </div>
<!-- Left Side Detail Module --> <!-- Left Side Detail Module -->
<div class="detail-module-container"> <div class="detail-module-container">
<div class="enterprise-detail-header" id="detailTitle">企业名称加载中...</div> <div class="enterprise-detail-header" id="detailTitle">
企业名称加载中...
</div>
<div class="detail-content"> <div class="detail-content">
<div class="info-section"> <div class="info-section">
<div class="info-item">污水特性: <span id="sewageType">--</span></div> <div class="info-item">
<div class="info-item">当前排污量: <span id="dischargeVolume">--</span></div> 污水特性: <span id="sewageType">--</span>
<div class="info-item">接入状态: <span id="connectionStatus">--</span></div> </div>
<div class="info-item">
当前排污量: <span id="dischargeVolume">--</span>
</div>
<div class="info-item">
接入状态: <span id="connectionStatus">--</span>
</div>
</div> </div>
<div class="photo-section"> <div class="photo-section">
<img id="sitePhoto" src="<%=request.getContextPath()%>/IMG/login/company.png" alt="现场照片" style="width:100%; height:100%; object-fit: cover;"> <img
id="sitePhoto"
src="<%=request.getContextPath()%>/IMG/login/company.png"
alt="现场照片"
style="width: 100%; height: 100%; object-fit: cover"
/>
<div class="photo-label">现场监控画面</div> <div class="photo-label">现场监控画面</div>
</div> </div>
</div> </div>
@ -319,7 +351,7 @@
<!-- New Bar Chart Area --> <!-- New Bar Chart Area -->
<div class="new-bar-chart-container"> <div class="new-bar-chart-container">
<div id="newBarChart" style="width: 100%; height: 100%;"></div> <div id="newBarChart" style="width: 100%; height: 100%"></div>
</div> </div>
</div> </div>
@ -335,34 +367,34 @@
var currentFocusIndex = 0; var currentFocusIndex = 0;
var rotationTimer = null; var rotationTimer = null;
$(document).ready(function() { $(document).ready(function () {
launchIntoFullscreen(document.documentElement); launchIntoFullscreen(document.documentElement);
initData(); initData();
// Double click to toggle fullscreen // Double click to toggle fullscreen
$('body').on('dblclick', function() { $("body").on("dblclick", function () {
launchIntoFullscreen(document.documentElement); launchIntoFullscreen(document.documentElement);
}); });
}); });
function launchIntoFullscreen(element) { function launchIntoFullscreen(element) {
if(element.requestFullscreen) { if (element.requestFullscreen) {
element.requestFullscreen(); element.requestFullscreen();
} else if(element.mozRequestFullScreen) { } else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen(); element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) { } else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(); element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) { } else if (element.msRequestFullscreen) {
element.msRequestFullscreen(); element.msRequestFullscreen();
} }
} }
function exitFullscreen() { function exitFullscreen() {
if(document.exitFullscreen) { if (document.exitFullscreen) {
document.exitFullscreen(); document.exitFullscreen();
} else if(document.mozCancelFullScreen) { } else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen(); document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) { } else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen(); document.webkitExitFullscreen();
} }
} }
@ -372,40 +404,50 @@
var total = 158; var total = 158;
var connected = 124; var connected = 124;
var connecting = 34; var connecting = 34;
$('#totalCount').html(total + '<span class="stat-unit">家</span>'); $("#totalCount").html(total + '<span class="stat-unit">家</span>');
$('#connectedCount').html(connected + '<span class="stat-unit">家</span>'); $("#connectedCount").html(
$('#connectingCount').html(connecting + '<span class="stat-unit">家</span>'); connected + '<span class="stat-unit">家</span>',
);
$("#connectingCount").html(
connecting + '<span class="stat-unit">家</span>',
);
// Generate Enterprises with Details // Generate Enterprises with Details
var enterprises = []; var enterprises = [];
var sewageTypes = ['化学需氧量', '氨氮', '总磷', '重金属', '酸碱废水']; var sewageTypes = ["化学需氧量", "氨氮", "总磷", "重金属", "酸碱废水"];
var connectionStatuses = ['已接入', '接入中']; var connectionStatuses = ["已接入", "接入中"];
for (var i = 1; i <= 50; i++) { for (var i = 1; i <= 50; i++) {
var val = Math.floor(Math.random() * 10000) + 500; var val = Math.floor(Math.random() * 10000) + 500;
enterprises.push({ enterprises.push({
id: i, id: i,
name: '企业-' + i, name: "企业-" + i,
value: val, value: val,
// Details // Details
sewageType: sewageTypes[Math.floor(Math.random() * sewageTypes.length)], sewageType:
connectionStatus: connectionStatuses[Math.floor(Math.random() * connectionStatuses.length)], sewageTypes[Math.floor(Math.random() * sewageTypes.length)],
indicator: val > 8000 ? '超级' : '普通', connectionStatus:
photo: '<%=request.getContextPath()%>/IMG/login/company.png', // Placeholder connectionStatuses[
Math.floor(Math.random() * connectionStatuses.length)
],
indicator: val > 8000 ? "超级" : "普通",
photo: "<%=request.getContextPath()%>/IMG/login/company.png", // Placeholder
// Map Coordinates (Relative % in map container) // Map Coordinates (Relative % in map container)
x: Math.random() * 90 + 5, // 5% to 95% x: Math.random() * 90 + 5, // 5% to 95%
y: Math.random() * 80 + 10, // 10% to 90% y: Math.random() * 80 + 10, // 10% to 90%
// History Data // History Data
instantHistory: generateHistoryData(72), // 3 days * 24 hours instantHistory: generateHistoryData(72), // 3 days * 24 hours
cumulativeHistory: generateHistoryData(14) // 14 days cumulativeHistory: generateHistoryData(14), // 14 days
}); });
} }
allEnterprises = enterprises; allEnterprises = enterprises;
// Init Charts // Init Charts
myChartInstant = echarts.init(document.getElementById('chartInstant')); myChartInstant = echarts.init(document.getElementById("chartInstant"));
myChartCumulative = echarts.init(document.getElementById('chartCumulative')); myChartCumulative = echarts.init(
myChartRanking = echarts.init(document.getElementById('chartRanking')); document.getElementById("chartCumulative"),
);
myChartRanking = echarts.init(document.getElementById("chartRanking"));
// myNewBarChart = echarts.init(document.getElementById('newBarChart')); // myNewBarChart = echarts.init(document.getElementById('newBarChart'));
// renderNewBarChart(); // renderNewBarChart();
@ -426,7 +468,7 @@
function generateHistoryData(count) { function generateHistoryData(count) {
var data = []; var data = [];
for(var k=0; k<count; k++) { for (var k = 0; k < count; k++) {
data.push(Math.floor(Math.random() * 500) + 50); data.push(Math.floor(Math.random() * 500) + 50);
} }
return data; return data;
@ -434,10 +476,14 @@
function updateSortedData(enterprises) { function updateSortedData(enterprises) {
// Sort Descending for Max // Sort Descending for Max
currentMaxData = [...enterprises].sort((a, b) => b.value - a.value).slice(0, 10); currentMaxData = [...enterprises]
.sort((a, b) => b.value - a.value)
.slice(0, 10);
// Sort Ascending for Min // Sort Ascending for Min
currentMinData = [...enterprises].sort((a, b) => a.value - b.value).slice(0, 10); currentMinData = [...enterprises]
.sort((a, b) => a.value - b.value)
.slice(0, 10);
} }
function renderRankingChart() { function renderRankingChart() {
@ -454,13 +500,18 @@
value: item.value, value: item.value,
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
offset: 0, color: '#ff5500' {
}, { offset: 0,
offset: 1, color: '#ffb700' color: "#ff5500",
}]) },
} {
} offset: 1,
color: "#ffb700",
},
]),
},
},
}); });
}); });
@ -471,194 +522,262 @@
value: item.value, value: item.value,
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
offset: 0, color: '#00aa00' {
}, { offset: 0,
offset: 1, color: '#00ff00' color: "#00aa00",
}]) },
} {
} offset: 1,
color: "#00ff00",
},
]),
},
},
}); });
}); });
var option = { var option = {
title: [{ title: [
text: '近30日排污量 TOP 10 (最大)', {
left: '25%', text: "近30日排污量 TOP 10 (最大)",
top: '2%', left: "25%",
textAlign: 'center', top: "2%",
textStyle: { color: '#ffffff', fontSize: 30, fontWeight: 'bold' } textAlign: "center",
}, { textStyle: { color: "#ffffff", fontSize: 30, fontWeight: "bold" },
text: '近30日排污量 TOP 10 (最小)', },
left: '75%', {
top: '2%', text: "近30日排污量 TOP 10 (最小)",
textAlign: 'center', left: "75%",
textStyle: { color: '#ffffff', fontSize: 30, fontWeight: 'bold' } top: "2%",
}], textAlign: "center",
grid: [{ textStyle: { color: "#ffffff", fontSize: 30, fontWeight: "bold" },
top: '12%', },
left: '2%', ],
right: '52%', grid: [
bottom: '5%', {
containLabel: true top: "12%",
}, { left: "2%",
top: '12%', right: "52%",
left: '52%', bottom: "5%",
right: '2%', containLabel: true,
bottom: '5%', },
containLabel: true {
}], top: "12%",
xAxis: [{ left: "52%",
type: 'value', right: "2%",
bottom: "5%",
containLabel: true,
},
],
xAxis: [
{
type: "value",
show: false, show: false,
gridIndex: 0 gridIndex: 0,
}, { },
type: 'value', {
type: "value",
show: false, show: false,
gridIndex: 1 gridIndex: 1,
}], },
yAxis: [{ ],
type: 'category', yAxis: [
{
type: "category",
data: maxNames, data: maxNames,
inverse: true, inverse: true,
axisLabel: { color: '#fff', fontSize: 20 }, axisLabel: { color: "#fff", fontSize: 20 },
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
gridIndex: 0 gridIndex: 0,
}, { },
type: 'category', {
type: "category",
data: minNames, data: minNames,
inverse: true, inverse: true,
axisLabel: { color: '#fff', fontSize: 20 }, axisLabel: { color: "#fff", fontSize: 20 },
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
gridIndex: 1 gridIndex: 1,
}], },
series: [{ ],
name: 'Max', series: [
type: 'bar', {
name: "Max",
type: "bar",
xAxisIndex: 0, xAxisIndex: 0,
yAxisIndex: 0, yAxisIndex: 0,
data: maxValues, data: maxValues,
barWidth: 45, barWidth: 45,
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)', color: "rgba(255, 255, 255, 0.1)",
barBorderRadius: [0, 22, 22, 0] barBorderRadius: [0, 22, 22, 0],
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'right', position: "right",
textStyle: { color: '#ffffff', fontSize: 20 }, textStyle: { color: "#ffffff", fontSize: 20 },
formatter: '{c}' formatter: "{c}",
} },
}, },
itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } }, itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
}, { },
name: 'Min', {
type: 'bar', name: "Min",
type: "bar",
xAxisIndex: 1, xAxisIndex: 1,
yAxisIndex: 1, yAxisIndex: 1,
data: minValues, data: minValues,
barWidth: 45, barWidth: 45,
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)', color: "rgba(255, 255, 255, 0.1)",
barBorderRadius: [0, 22, 22, 0] barBorderRadius: [0, 22, 22, 0],
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'right', position: "right",
textStyle: { color: '#ffffff', fontSize: 20 }, textStyle: { color: "#ffffff", fontSize: 20 },
formatter: '{c}' formatter: "{c}",
} },
}, },
itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } }, itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
}] },
],
}; };
myChartRanking.setOption(option); myChartRanking.setOption(option);
} }
function renderMapPoints() { function renderMapPoints() {
var html = ''; var html = "";
allEnterprises.forEach((item) => { allEnterprises.forEach((item) => {
html += '<div class="map-point ' + (item.value > 8000 ? 'super' : '') + '" id="point-' + item.id + '" style="left:' + item.x + '%; top:' + item.y + '%;" onclick="handleMapClick(' + item.id + ')">'; html +=
'<div class="map-point ' +
(item.value > 8000 ? "super" : "") +
'" id="point-' +
item.id +
'" style="left:' +
item.x +
"%; top:" +
item.y +
'%;" onclick="handleMapClick(' +
item.id +
')">';
html += '<div class="map-tooltip" onclick="event.stopPropagation()">'; // Stop prop to prevent point click html += '<div class="map-tooltip" onclick="event.stopPropagation()">'; // Stop prop to prevent point click
html += '<div class="map-tooltip-row" style="font-weight:bold; color:#00eaff; font-size:22px; margin-bottom:10px; cursor:pointer;" onclick="handleMapClick(' + item.id + ')">' + item.name + '</div>'; html +=
html += '<div class="map-tooltip-row"><span class="map-tooltip-label">瞬时流量:</span><span class="clickable-val" onclick="showHistoryModal(\'instant\', ' + item.id + ')">' + item.value + ' m³/h</span></div>'; '<div class="map-tooltip-row" style="font-weight:bold; color:#00eaff; font-size:22px; margin-bottom:10px; cursor:pointer;" onclick="handleMapClick(' +
html += '<div class="map-tooltip-row"><span class="map-tooltip-label">累计流量:</span><span class="clickable-val" onclick="showHistoryModal(\'cumulative\', ' + item.id + ')">' + (item.value * 24) + ' m³</span></div>'; item.id +
html += '</div>'; ')">' +
html += '</div>'; item.name +
"</div>";
html +=
'<div class="map-tooltip-row"><span class="map-tooltip-label">瞬时流量:</span><span class="clickable-val" onclick="showHistoryModal(\'instant\', ' +
item.id +
')">' +
item.value +
" m³/h</span></div>";
html +=
'<div class="map-tooltip-row"><span class="map-tooltip-label">累计流量:</span><span class="clickable-val" onclick="showHistoryModal(\'cumulative\', ' +
item.id +
')">' +
item.value * 24 +
" m³</span></div>";
html += "</div>";
html += "</div>";
}); });
$('#mapContainer').html(html); $("#mapContainer").html(html);
} }
function closeModal() { function closeModal() {
$('#historyModal').fadeOut(); $("#historyModal").fadeOut();
} }
var modalChartInstance = null; var modalChartInstance = null;
function showHistoryModal(type, id) { function showHistoryModal(type, id) {
var ent = allEnterprises.find(e => e.id === id); var ent = allEnterprises.find((e) => e.id === id);
if(!ent) return; if (!ent) return;
$('#historyModal').css('display', 'flex').hide().fadeIn(); $("#historyModal").css("display", "flex").hide().fadeIn();
if(modalChartInstance) { if (modalChartInstance) {
modalChartInstance.dispose(); modalChartInstance.dispose();
} }
modalChartInstance = echarts.init(document.getElementById('modalChart')); modalChartInstance = echarts.init(
document.getElementById("modalChart"),
);
var title = (type === 'instant' ? '瞬时排污量' : '累计流量') + '历史曲线 - ' + ent.name; var title =
$('#modalTitle').text(title); (type === "instant" ? "瞬时排污量" : "累计流量") +
"历史曲线 - " +
ent.name;
$("#modalTitle").text(title);
var xData, yData, color; var xData, yData, color;
if(type === 'instant') { if (type === "instant") {
xData = []; xData = [];
for(var i=0; i<72; i++) xData.push(i + 'h'); for (var i = 0; i < 72; i++) xData.push(i + "h");
yData = ent.instantHistory; yData = ent.instantHistory;
color = '#ffaa00'; color = "#ffaa00";
} else { } else {
xData = []; xData = [];
for(var j=0; j<14; j++) xData.push('D' + (j+1)); for (var j = 0; j < 14; j++) xData.push("D" + (j + 1));
yData = ent.cumulativeHistory; yData = ent.cumulativeHistory;
color = '#00eaff'; color = "#00eaff";
} }
var option = { var option = {
tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.8)', textStyle: {color: '#fff'} }, tooltip: {
grid: { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true }, trigger: "axis",
backgroundColor: "rgba(0,0,0,0.8)",
textStyle: { color: "#fff" },
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: "10%",
containLabel: true,
},
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: false, boundaryGap: false,
data: xData, data: xData,
axisLabel: { color: '#fff', fontSize: 16 }, axisLabel: { color: "#fff", fontSize: 16 },
axisLine: { lineStyle: { color: '#00eaff' } } axisLine: { lineStyle: { color: "#00eaff" } },
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
axisLabel: { color: '#fff', fontSize: 16 }, axisLabel: { color: "#fff", fontSize: 16 },
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } } splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
}, },
series: [{ series: [
name: type === 'instant' ? '瞬时流量' : '累计流量', {
type: 'line', name: type === "instant" ? "瞬时流量" : "累计流量",
type: "line",
smooth: true, smooth: true,
data: yData, data: yData,
lineStyle: { width: 3, color: color }, lineStyle: { width: 3, color: color },
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
offset: 0, color: color {
}, { offset: 0,
offset: 1, color: 'rgba(0,0,0,0)' color: color,
}])
}, },
itemStyle: { color: color } {
}] offset: 1,
color: "rgba(0,0,0,0)",
},
]),
},
itemStyle: { color: color },
},
],
}; };
modalChartInstance.setOption(option); modalChartInstance.setOption(option);
@ -666,7 +785,7 @@
function handleMapClick(id) { function handleMapClick(id) {
// Find if this enterprise is in currentMaxData // Find if this enterprise is in currentMaxData
var index = currentMaxData.findIndex(e => e.id === id); var index = currentMaxData.findIndex((e) => e.id === id);
if (index !== -1) { if (index !== -1) {
currentFocusIndex = index; currentFocusIndex = index;
updateDetailView(); updateDetailView();
@ -678,32 +797,34 @@
// If clicked item is not in Top 10, we can still show it in Detail View // If clicked item is not in Top 10, we can still show it in Detail View
// But rotation logic might overwrite it next tick. // But rotation logic might overwrite it next tick.
// Let's just show it temporarily. // Let's just show it temporarily.
var enterprise = allEnterprises.find(e => e.id === id); var enterprise = allEnterprises.find((e) => e.id === id);
if(enterprise) { if (enterprise) {
renderDetailContent(enterprise); renderDetailContent(enterprise);
highlightMapPoint(enterprise.id); highlightMapPoint(enterprise.id);
// Clear ranking highlight since it's not in the list (visually) // Clear ranking highlight since it's not in the list (visually)
$('.ranking-row').removeClass('active'); $(".ranking-row").removeClass("active");
} }
} }
} }
function startDataSimulation(enterprises) { function startDataSimulation(enterprises) {
setInterval(function() { setInterval(function () {
// Randomize values // Randomize values
enterprises.forEach(item => { enterprises.forEach((item) => {
item.value += Math.floor(Math.random() * 200) - 100; item.value += Math.floor(Math.random() * 200) - 100;
if(item.value < 0) item.value = 0; if (item.value < 0) item.value = 0;
item.indicator = item.value > 8000 ? '超级' : '普通'; item.indicator = item.value > 8000 ? "超级" : "普通";
// Update Map Point Style // Update Map Point Style
var el = $('#point-' + item.id); var el = $("#point-" + item.id);
if(item.value > 8000) { if (item.value > 8000) {
el.addClass('super'); el.addClass("super");
} else { } else {
el.removeClass('super'); el.removeClass("super");
} }
el.find('.map-tooltip').html(item.name + '<br>排污量: ' + item.value); el.find(".map-tooltip").html(
item.name + "<br>排污量: " + item.value,
);
}); });
updateSortedData(enterprises); updateSortedData(enterprises);
@ -721,15 +842,15 @@
} }
function startRotation() { function startRotation() {
rotationTimer = setInterval(function() { rotationTimer = setInterval(function () {
currentFocusIndex = (currentFocusIndex + 1) % 10; currentFocusIndex = (currentFocusIndex + 1) % 10;
updateDetailView(); updateDetailView();
}, 10000); // Rotate every 5 seconds }, 10000); // Rotate every 5 seconds
} }
function updateDetailView() { function updateDetailView() {
if(!currentMaxData || currentMaxData.length === 0) return; if (!currentMaxData || currentMaxData.length === 0) return;
if(currentFocusIndex >= currentMaxData.length) currentFocusIndex = 0; if (currentFocusIndex >= currentMaxData.length) currentFocusIndex = 0;
var enterprise = currentMaxData[currentFocusIndex]; var enterprise = currentMaxData[currentFocusIndex];
@ -743,16 +864,16 @@
} }
function highlightMapPoint(id) { function highlightMapPoint(id) {
$('.map-point').removeClass('active'); $(".map-point").removeClass("active");
$('#point-' + id).addClass('active'); $("#point-" + id).addClass("active");
} }
function renderDetailContent(enterprise) { function renderDetailContent(enterprise) {
// Update DOM // Update DOM
$('#detailTitle').text(enterprise.name); $("#detailTitle").text(enterprise.name);
$('#sewageType').text(enterprise.sewageType); $("#sewageType").text(enterprise.sewageType);
$('#dischargeVolume').text(enterprise.value + ' m³'); $("#dischargeVolume").text(enterprise.value + " m³");
$('#connectionStatus').text(enterprise.connectionStatus); $("#connectionStatus").text(enterprise.connectionStatus);
renderDetailCharts(enterprise); renderDetailCharts(enterprise);
} }
@ -760,66 +881,90 @@
function renderDetailCharts(enterprise) { function renderDetailCharts(enterprise) {
// Generate X labels // Generate X labels
var hours = []; var hours = [];
for(var i=0; i<72; i++) hours.push(i+'h'); for (var i = 0; i < 72; i++) hours.push(i + "h");
var days = []; var days = [];
for(var j=0; j<14; j++) days.push('D'+(j+1)); for (var j = 0; j < 14; j++) days.push("D" + (j + 1));
// Instant Chart (Line) // Instant Chart (Line)
var optionInstant = { var optionInstant = {
tooltip: { trigger: 'axis' }, tooltip: { trigger: "axis" },
grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true }, grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: "15%",
containLabel: true,
},
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: false, boundaryGap: false,
data: hours, data: hours,
axisLabel: { color: '#ccc' }, axisLabel: { color: "#ccc" },
axisLine: { lineStyle: { color: '#00eaff' } } axisLine: { lineStyle: { color: "#00eaff" } },
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
axisLabel: { color: '#ccc' }, axisLabel: { color: "#ccc" },
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } } splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
}, },
series: [{ series: [
name: '瞬时量', {
type: 'line', name: "瞬时量",
type: "line",
smooth: true, smooth: true,
symbol: 'none', symbol: "none",
sampling: 'average', sampling: "average",
itemStyle: { color: '#00eaff' }, itemStyle: { color: "#00eaff" },
areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(0, 234, 255, 0.5)' }, { offset: 1, color: 'rgba(0, 234, 255, 0)' }]) } }, areaStyle: {
data: enterprise.instantHistory normal: {
}] color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(0, 234, 255, 0.5)" },
{ offset: 1, color: "rgba(0, 234, 255, 0)" },
]),
},
},
data: enterprise.instantHistory,
},
],
}; };
// Cumulative Chart (Bar) // Cumulative Chart (Bar)
var optionCumulative = { var optionCumulative = {
tooltip: { trigger: 'axis' }, tooltip: { trigger: "axis" },
grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true }, grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: "15%",
containLabel: true,
},
xAxis: { xAxis: {
type: 'category', type: "category",
data: days, data: days,
axisLabel: { color: '#ccc' }, axisLabel: { color: "#ccc" },
axisLine: { lineStyle: { color: '#ffaa00' } } axisLine: { lineStyle: { color: "#ffaa00" } },
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
axisLabel: { color: '#ccc' }, axisLabel: { color: "#ccc" },
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } } splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
}, },
series: [{ series: [
name: '累计流量', {
type: 'bar', name: "累计流量",
itemStyle: { normal: { color: '#ffaa00', barBorderRadius: [5, 5, 0, 0] } }, type: "bar",
data: enterprise.cumulativeHistory itemStyle: {
}] normal: { color: "#ffaa00", barBorderRadius: [5, 5, 0, 0] },
},
data: enterprise.cumulativeHistory,
},
],
}; };
myChartInstant.setOption(optionInstant); myChartInstant.setOption(optionInstant);
myChartCumulative.setOption(optionCumulative); myChartCumulative.setOption(optionCumulative);
} }
</script> </script>
</body> </body>
</html>