官网管理对接、大屏更新
This commit is contained in:
Rue Ji
@ -74,7 +74,7 @@ public class PipelineDataController {
|
||||
|
||||
@RequestMapping("/delete.do")
|
||||
public String dodelete(HttpServletRequest request, Model model,
|
||||
@RequestParam(value = "id") String id) {
|
||||
@RequestParam(value = "id") Long id) {
|
||||
int result = this.pipelineDataService.deleteById(id);
|
||||
model.addAttribute("result", result);
|
||||
return "result";
|
||||
@ -83,15 +83,14 @@ public class PipelineDataController {
|
||||
@RequestMapping("/deletes.do")
|
||||
public String dodeletes(HttpServletRequest request, Model model,
|
||||
@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);
|
||||
return "result";
|
||||
}
|
||||
|
||||
@RequestMapping("/edit.do")
|
||||
public String doedit(HttpServletRequest request, Model model,
|
||||
@RequestParam(value = "id") String id) {
|
||||
@RequestParam(value = "id") Long id) {
|
||||
PipelineData pipelineData = this.pipelineDataService.selectById(id);
|
||||
model.addAttribute("pipelineData", pipelineData);
|
||||
return "/pipeline/pipelineDataEdit";
|
||||
@ -109,7 +108,7 @@ public class PipelineDataController {
|
||||
|
||||
@RequestMapping("/view.do")
|
||||
public String doview(HttpServletRequest request, Model model,
|
||||
@RequestParam(value = "id") String id) {
|
||||
@RequestParam(value = "id") Long id) {
|
||||
PipelineData pipelineData = this.pipelineDataService.selectById(id);
|
||||
model.addAttribute("pipelineData", pipelineData);
|
||||
return "/pipeline/pipelineDataView";
|
||||
|
||||
@ -49,6 +49,14 @@ public class CommDaoImpl<T> implements CommDao<T> {
|
||||
T o = getSqlSession().selectOne(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t);
|
||||
return o;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据ID查询（Long类型）
|
||||
*/
|
||||
public T selectByPrimaryKey(Long t){
|
||||
T o = getSqlSession().selectOne(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t);
|
||||
return o;
|
||||
}
|
||||
/**
|
||||
* wxp为activiti测试修改
|
||||
* @param t
|
||||
@ -62,6 +70,13 @@ public class CommDaoImpl<T> implements CommDao<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){
|
||||
return getSqlSession().insert(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t);
|
||||
}
|
||||
|
||||
@ -16,32 +16,30 @@
|
||||
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
|
||||
</sql>
|
||||
<select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.String" >
|
||||
<select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Long" >
|
||||
select
|
||||
<include refid="Base_Column_List" />
|
||||
from pipeline_data
|
||||
where id = #{id,jdbcType=VARCHAR}
|
||||
from tb_pipeline_data
|
||||
where id = #{id,jdbcType=BIGINT}
|
||||
</select>
|
||||
<delete id="deleteByPrimaryKey" parameterType="java.lang.String" >
|
||||
delete from pipeline_data
|
||||
where id = #{id,jdbcType=VARCHAR}
|
||||
<delete id="deleteByPrimaryKey" parameterType="java.lang.Long" >
|
||||
delete from tb_pipeline_data
|
||||
where id = #{id,jdbcType=BIGINT}
|
||||
</delete>
|
||||
<insert id="insert" parameterType="com.sipai.entity.pipeline.PipelineData" >
|
||||
insert into pipeline_data (id, pipeline_name, diameter_mm,
|
||||
<insert id="insert" parameterType="com.sipai.entity.pipeline.PipelineData" useGeneratedKeys="true" keyProperty="id" >
|
||||
insert into tb_pipeline_data (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)
|
||||
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},
|
||||
#{startGroundElevationM,jdbcType=DECIMAL}, #{endGroundElevationM,jdbcType=DECIMAL},
|
||||
#{pipelineInvertElevationM,jdbcType=DECIMAL})
|
||||
</insert>
|
||||
<insert id="insertSelective" parameterType="com.sipai.entity.pipeline.PipelineData" >
|
||||
insert into pipeline_data
|
||||
<insert id="insertSelective" parameterType="com.sipai.entity.pipeline.PipelineData" useGeneratedKeys="true" keyProperty="id" >
|
||||
insert into tb_pipeline_data
|
||||
<trim prefix="(" suffix=")" suffixOverrides="," >
|
||||
<if test="id != null" >
|
||||
id,
|
||||
</if>
|
||||
|
||||
<if test="pipelineName != null" >
|
||||
pipeline_name,
|
||||
</if>
|
||||
@ -68,9 +66,7 @@
|
||||
</if>
|
||||
</trim>
|
||||
<trim prefix="values (" suffix=")" suffixOverrides="," >
|
||||
<if test="id != null" >
|
||||
#{id,jdbcType=VARCHAR},
|
||||
</if>
|
||||
|
||||
<if test="pipelineName != null" >
|
||||
#{pipelineName,jdbcType=VARCHAR},
|
||||
</if>
|
||||
@ -98,7 +94,7 @@
|
||||
</trim>
|
||||
</insert>
|
||||
<update id="updateByPrimaryKeySelective" parameterType="com.sipai.entity.pipeline.PipelineData" >
|
||||
update pipeline_data
|
||||
update tb_pipeline_data
|
||||
<set >
|
||||
<if test="pipelineName != null" >
|
||||
pipeline_name = #{pipelineName,jdbcType=VARCHAR},
|
||||
@ -125,10 +121,10 @@
|
||||
pipeline_invert_elevation_m = #{pipelineInvertElevationM,jdbcType=DECIMAL},
|
||||
</if>
|
||||
</set>
|
||||
where id = #{id,jdbcType=VARCHAR}
|
||||
where id = #{id,jdbcType=BIGINT}
|
||||
</update>
|
||||
<update id="updateByPrimaryKey" parameterType="com.sipai.entity.pipeline.PipelineData" >
|
||||
update pipeline_data
|
||||
update tb_pipeline_data
|
||||
set pipeline_name = #{pipelineName,jdbcType=VARCHAR},
|
||||
diameter_mm = #{diameterMm,jdbcType=DECIMAL},
|
||||
length_m = #{lengthM,jdbcType=DECIMAL},
|
||||
@ -137,17 +133,17 @@
|
||||
start_ground_elevation_m = #{startGroundElevationM,jdbcType=DECIMAL},
|
||||
end_ground_elevation_m = #{endGroundElevationM,jdbcType=DECIMAL},
|
||||
pipeline_invert_elevation_m = #{pipelineInvertElevationM,jdbcType=DECIMAL}
|
||||
where id = #{id,jdbcType=VARCHAR}
|
||||
where id = #{id,jdbcType=BIGINT}
|
||||
</update>
|
||||
<select id="selectListByWhere" parameterType="java.lang.String" resultMap="BaseResultMap">
|
||||
select
|
||||
<include refid="Base_Column_List" />
|
||||
from pipeline_data
|
||||
from tb_pipeline_data
|
||||
${where}
|
||||
</select>
|
||||
<delete id="deleteByWhere" parameterType="java.lang.String">
|
||||
delete from
|
||||
pipeline_data
|
||||
tb_pipeline_data
|
||||
${where}
|
||||
</delete>
|
||||
</mapper>
|
||||
|
||||
@ -19,11 +19,25 @@ public class PipelineDataService implements CommService<PipelineData> {
|
||||
return pipelineData;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据ID查询（Long类型）
|
||||
*/
|
||||
public PipelineData selectById(Long id) {
|
||||
return pipelineDataDao.selectByPrimaryKey(id);
|
||||
}
|
||||
|
||||
@Override
|
||||
public int deleteById(String id) {
|
||||
return pipelineDataDao.deleteByPrimaryKey(id);
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据ID删除（Long类型）
|
||||
*/
|
||||
public int deleteById(Long id) {
|
||||
return pipelineDataDao.deleteByPrimaryKey(id);
|
||||
}
|
||||
|
||||
@Override
|
||||
public int save(PipelineData pipelineData) {
|
||||
return pipelineDataDao.insert(pipelineData);
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
#redis<69><73><EFBFBD><EFBFBD>
|
||||
#redis.host=122.51.194.184
|
||||
redis.host=127.0.0.1
|
||||
redis.host=122.51.194.184
|
||||
# redis.host=127.0.0.1
|
||||
#<23><><EFBFBD><EFBFBD>single <20><>Ⱥcluster
|
||||
redis.mode=single
|
||||
#redis.port=26739
|
||||
redis.port=6379
|
||||
redis.port=26739
|
||||
# redis.port=6379
|
||||
redis.password=Aa112211
|
||||
redis.maxIdle=100
|
||||
redis.maxActive=300
|
||||
|
||||
@ -532,9 +532,9 @@ function initMenu() {
|
||||
// 注意：新菜单项可能直接是文本，也可能包含 i 标签
|
||||
var exists = false;
|
||||
$treeviewMenu.find('li').each(function() {
|
||||
if ($(this).text().indexOf('新源头GIS管理') > -1) {
|
||||
exists = true;
|
||||
}
|
||||
// if ($(this).text().indexOf('管道管理') > -1) {
|
||||
// exists = true;
|
||||
// }
|
||||
});
|
||||
|
||||
if (!exists) {
|
||||
@ -545,9 +545,6 @@ function initMenu() {
|
||||
var newMenuHtml = '';
|
||||
if (typeof addTab === 'function') {
|
||||
// 假设 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 {
|
||||
// 如果没有 addTab，尝试使用 iframe 加载或者直接跳转（但在框架内）
|
||||
// refreshPage 通常是 location.replace，这会刷新整个页面。
|
||||
@ -565,8 +562,6 @@ function initMenu() {
|
||||
// 所以我们应该优先使用 addTab。
|
||||
// 如果 addTab 未定义（可能在 index.jsp 中定义），我们尝试模拟它。
|
||||
// 由于 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);
|
||||
|
||||
|
||||
BIN
src/main/webapp/WEB-INF/lib/sqljdbc4-4.0.jar
Normal file
BIN
src/main/webapp/WEB-INF/lib/sqljdbc4-4.0.jar
Normal file
Binary file not shown.
@ -1,70 +1,619 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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>
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto; /* Allow scrolling if window is smaller */
|
||||
background-color: #030829;
|
||||
}
|
||||
.screen-container {
|
||||
width: 6500px;
|
||||
height: 1800px;
|
||||
background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png');
|
||||
/* background-image: url('../../IMG/screen1-1.png'); */
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
/* Specific Position for Data 6040 */
|
||||
.val-6040 {
|
||||
position: absolute;
|
||||
top: 335px;
|
||||
left: 209px;
|
||||
width: 121px;
|
||||
height: 62px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-family: 'Gilroy', 'DIN Alternate', 'Arial Narrow', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 50px;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
line-height: 62px;
|
||||
}
|
||||
.val-4197 {
|
||||
top: 335px;
|
||||
left: 592px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
display: inline-flex;
|
||||
place-content: flex-start;
|
||||
place-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
.val-12356 {
|
||||
top: 335px;
|
||||
left: 975px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
display: inline-flex;
|
||||
place-content: flex-start;
|
||||
place-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto; /* Allow scrolling if window is smaller */
|
||||
background-color: #030829;
|
||||
}
|
||||
.screen-container {
|
||||
width: 6500px;
|
||||
height: 1800px;
|
||||
background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png');
|
||||
/* background-image: url("../../IMG/screen1.png"); */
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
/* Specific Position for Data 6040 */
|
||||
.slqs {
|
||||
position: absolute;
|
||||
width: 121px;
|
||||
height: 62px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-family: "Gilroy", "DIN Alternate", "Arial Narrow", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 50px;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
line-height: 62px;
|
||||
}
|
||||
.slqs-jinri {
|
||||
top: 335px;
|
||||
left: 209px;
|
||||
}
|
||||
.slqs-zuori {
|
||||
top: 335px;
|
||||
left: 592px;
|
||||
}
|
||||
.slqs-benyue {
|
||||
top: 335px;
|
||||
left: 975px;
|
||||
}
|
||||
|
||||
.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>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
<body>
|
||||
<div class="screen-container">
|
||||
<!-- <div class="val-6040">6040</div>
|
||||
<div class="val-4197">4197</div>
|
||||
<div class="val-12356">12356</div> -->
|
||||
<div class="left">
|
||||
<div>
|
||||
<div class="slqs slqs-jinri">6040</div>
|
||||
<div class="slqs slqs-zuori">4197</div>
|
||||
<div class="slqs slqs-benyue">12356</div>
|
||||
</div>
|
||||
|
||||
<!-- 七日水量 -->
|
||||
<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>
|
||||
</body>
|
||||
<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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -179,7 +179,7 @@
|
||||
<div style="float:left;height:50%;width:100%;padding:5px 5px 5px 5px;">
|
||||
<div style="height:100%;width:100%;background-color:#ffffff;">
|
||||
<div class="section-header">
|
||||
上海金山卫污水公司
|
||||
上海金山卫污水公司11
|
||||
</div>
|
||||
<div style="width:20%;height:95%;float:left;">
|
||||
<div style="width:100%;height:25%;float:left;background-color:#cbe3f9;margin:6%;">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user