Merge remote-tracking branch 'origin/deng' into deng
# Conflicts: # src/main/webapp/jsp/user/roleMenu.jsp
This commit is contained in:
@ -28,7 +28,7 @@ public class DateConverter implements Converter {
|
|||||||
try {
|
try {
|
||||||
result = doConvertToDate(value);
|
result = doConvertToDate(value);
|
||||||
} catch (ParseException e) {
|
} catch (ParseException e) {
|
||||||
e.printStackTrace();
|
logger.error("Failed to convert value to Date: " + value, e);
|
||||||
}
|
}
|
||||||
} else if (type == String.class) {
|
} else if (type == String.class) {
|
||||||
result = doConvertToString(value);
|
result = doConvertToString(value);
|
||||||
@ -56,8 +56,7 @@ public class DateConverter implements Converter {
|
|||||||
try {
|
try {
|
||||||
result = new Date(new Long((String) value).longValue());
|
result = new Date(new Long((String) value).longValue());
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
logger.error("Converting from milliseconds to Date fails!");
|
logger.error("Converting from milliseconds to Date fails!", e);
|
||||||
e.printStackTrace();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -12,6 +12,8 @@ import com.sipai.service.accident.AccidentTypeService;
|
|||||||
import com.sipai.service.user.UnitService;
|
import com.sipai.service.user.UnitService;
|
||||||
import com.sipai.tools.CommUtil;
|
import com.sipai.tools.CommUtil;
|
||||||
import net.sf.json.JSONArray;
|
import net.sf.json.JSONArray;
|
||||||
|
import org.slf4j.Logger;
|
||||||
|
import org.slf4j.LoggerFactory;
|
||||||
import org.springframework.stereotype.Controller;
|
import org.springframework.stereotype.Controller;
|
||||||
import org.springframework.ui.Model;
|
import org.springframework.ui.Model;
|
||||||
import org.springframework.web.bind.annotation.ModelAttribute;
|
import org.springframework.web.bind.annotation.ModelAttribute;
|
||||||
@ -26,6 +28,7 @@ import java.util.List;
|
|||||||
@Controller
|
@Controller
|
||||||
@RequestMapping("/accident/accident")
|
@RequestMapping("/accident/accident")
|
||||||
public class AccidentController {
|
public class AccidentController {
|
||||||
|
private static final Logger logger = LoggerFactory.getLogger(AccidentController.class);
|
||||||
@Resource
|
@Resource
|
||||||
private AccidentService accidentService;
|
private AccidentService accidentService;
|
||||||
@Resource
|
@Resource
|
||||||
@ -174,7 +177,7 @@ public class AccidentController {
|
|||||||
this.accidentService.deleteById(idArray[i]);
|
this.accidentService.deleteById(idArray[i]);
|
||||||
}
|
}
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
e.printStackTrace();
|
logger.error("Failed to delete accidents with ids: {}", ids, e);
|
||||||
Result result = Result.failed("删除失败");
|
Result result = Result.failed("删除失败");
|
||||||
model.addAttribute("result", CommUtil.toJson(result));
|
model.addAttribute("result", CommUtil.toJson(result));
|
||||||
return "result";
|
return "result";
|
||||||
|
|||||||
@ -28,6 +28,8 @@ import org.activiti.engine.history.HistoricTaskInstance;
|
|||||||
import org.activiti.engine.impl.pvm.process.ActivityImpl;
|
import org.activiti.engine.impl.pvm.process.ActivityImpl;
|
||||||
import org.activiti.engine.runtime.ProcessInstance;
|
import org.activiti.engine.runtime.ProcessInstance;
|
||||||
import org.activiti.engine.task.Task;
|
import org.activiti.engine.task.Task;
|
||||||
|
import org.slf4j.Logger;
|
||||||
|
import org.slf4j.LoggerFactory;
|
||||||
import org.springframework.stereotype.Controller;
|
import org.springframework.stereotype.Controller;
|
||||||
import org.springframework.ui.Model;
|
import org.springframework.ui.Model;
|
||||||
import org.springframework.web.bind.annotation.ModelAttribute;
|
import org.springframework.web.bind.annotation.ModelAttribute;
|
||||||
@ -45,6 +47,7 @@ import java.util.*;
|
|||||||
@Controller
|
@Controller
|
||||||
@RequestMapping("/accident/reasonableAdvice")
|
@RequestMapping("/accident/reasonableAdvice")
|
||||||
public class ReasonableAdviceController {
|
public class ReasonableAdviceController {
|
||||||
|
private static final Logger logger = LoggerFactory.getLogger(ReasonableAdviceController.class);
|
||||||
@Resource
|
@Resource
|
||||||
private ReasonableAdviceService reasonableAdviceService;
|
private ReasonableAdviceService reasonableAdviceService;
|
||||||
@Resource
|
@Resource
|
||||||
@ -211,7 +214,7 @@ public class ReasonableAdviceController {
|
|||||||
this.reasonableAdviceService.deleteById(idArray[i]);
|
this.reasonableAdviceService.deleteById(idArray[i]);
|
||||||
}
|
}
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
e.printStackTrace();
|
logger.error("Failed to delete reasonable advices with ids: {}", ids, e);
|
||||||
Result result = Result.failed("删除失败");
|
Result result = Result.failed("删除失败");
|
||||||
model.addAttribute("result", CommUtil.toJson(result));
|
model.addAttribute("result", CommUtil.toJson(result));
|
||||||
return "result";
|
return "result";
|
||||||
@ -305,7 +308,7 @@ public class ReasonableAdviceController {
|
|||||||
try {
|
try {
|
||||||
this.reasonableAdviceService.downloadExcel(response,list);
|
this.reasonableAdviceService.downloadExcel(response,list);
|
||||||
} catch (IOException e) {
|
} catch (IOException e) {
|
||||||
e.printStackTrace();
|
logger.error("Failed to download excel for reasonable advice", e);
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@ -325,8 +328,7 @@ public class ReasonableAdviceController {
|
|||||||
try {
|
try {
|
||||||
result =this.reasonableAdviceService.startProcess(reasonableAdvice);
|
result =this.reasonableAdviceService.startProcess(reasonableAdvice);
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
// TODO: handle exception
|
logger.error("Failed to start process for reasonable advice: {}", reasonableAdvice.getId(), e);
|
||||||
e.printStackTrace();
|
|
||||||
}
|
}
|
||||||
String resstr="{\"res\":\""+result+"\",\"id\":\""+reasonableAdvice.getId()+"\"}";
|
String resstr="{\"res\":\""+result+"\",\"id\":\""+reasonableAdvice.getId()+"\"}";
|
||||||
model.addAttribute("result", resstr);
|
model.addAttribute("result", resstr);
|
||||||
@ -403,7 +405,7 @@ public class ReasonableAdviceController {
|
|||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
}catch(Exception e){
|
}catch(Exception e){
|
||||||
e.printStackTrace();
|
logger.error("Failed to compare business unit records", e);
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -588,8 +590,7 @@ public class ReasonableAdviceController {
|
|||||||
}
|
}
|
||||||
this.reasonableAdviceService.updateStatus(businessUnitHandle.getBusinessid(),passstatus);
|
this.reasonableAdviceService.updateStatus(businessUnitHandle.getBusinessid(),passstatus);
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
// TODO: handle exception
|
logger.error("Failed to submit reasonable advice handle: {}", businessUnitHandle.getId(), e);
|
||||||
e.printStackTrace();
|
|
||||||
result=0;
|
result=0;
|
||||||
}
|
}
|
||||||
String resstr="{\"res\":\""+result+"\",\"id\":\""+businessUnitHandle.getId()+"\"}";
|
String resstr="{\"res\":\""+result+"\",\"id\":\""+businessUnitHandle.getId()+"\"}";
|
||||||
|
|||||||
@ -28,6 +28,8 @@ import org.activiti.engine.history.HistoricTaskInstance;
|
|||||||
import org.activiti.engine.impl.pvm.process.ActivityImpl;
|
import org.activiti.engine.impl.pvm.process.ActivityImpl;
|
||||||
import org.activiti.engine.runtime.ProcessInstance;
|
import org.activiti.engine.runtime.ProcessInstance;
|
||||||
import org.activiti.engine.task.Task;
|
import org.activiti.engine.task.Task;
|
||||||
|
import org.slf4j.Logger;
|
||||||
|
import org.slf4j.LoggerFactory;
|
||||||
import org.springframework.stereotype.Controller;
|
import org.springframework.stereotype.Controller;
|
||||||
import org.springframework.ui.Model;
|
import org.springframework.ui.Model;
|
||||||
import org.springframework.web.bind.annotation.ModelAttribute;
|
import org.springframework.web.bind.annotation.ModelAttribute;
|
||||||
@ -45,6 +47,7 @@ import java.util.*;
|
|||||||
@Controller
|
@Controller
|
||||||
@RequestMapping("/accident/roast")
|
@RequestMapping("/accident/roast")
|
||||||
public class RoastController {
|
public class RoastController {
|
||||||
|
private static final Logger logger = LoggerFactory.getLogger(RoastController.class);
|
||||||
@Resource
|
@Resource
|
||||||
private RoastService roastService;
|
private RoastService roastService;
|
||||||
@Resource
|
@Resource
|
||||||
@ -249,7 +252,7 @@ public class RoastController {
|
|||||||
this.roastService.deleteById(idArray[i]);
|
this.roastService.deleteById(idArray[i]);
|
||||||
}
|
}
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
e.printStackTrace();
|
logger.error("Failed to delete roasts with ids: {}", ids, e);
|
||||||
Result result = Result.failed("删除失败");
|
Result result = Result.failed("删除失败");
|
||||||
model.addAttribute("result", CommUtil.toJson(result));
|
model.addAttribute("result", CommUtil.toJson(result));
|
||||||
return "result";
|
return "result";
|
||||||
@ -345,7 +348,7 @@ public class RoastController {
|
|||||||
try {
|
try {
|
||||||
this.roastService.downloadExcel(response, list);
|
this.roastService.downloadExcel(response, list);
|
||||||
} catch (IOException e) {
|
} catch (IOException e) {
|
||||||
e.printStackTrace();
|
logger.error("Failed to download excel for roast", e);
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@ -367,8 +370,7 @@ public class RoastController {
|
|||||||
try {
|
try {
|
||||||
result = this.roastService.startProcess(roast);
|
result = this.roastService.startProcess(roast);
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
// TODO: handle exception
|
logger.error("Failed to start process for roast: {}", roast.getId(), e);
|
||||||
e.printStackTrace();
|
|
||||||
}
|
}
|
||||||
String resstr = "{\"res\":\"" + result + "\",\"id\":\"" + roast.getId() + "\"}";
|
String resstr = "{\"res\":\"" + result + "\",\"id\":\"" + roast.getId() + "\"}";
|
||||||
model.addAttribute("result", resstr);
|
model.addAttribute("result", resstr);
|
||||||
@ -447,7 +449,7 @@ public class RoastController {
|
|||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
e.printStackTrace();
|
logger.error("Failed to compare business unit records", e);
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -636,8 +638,7 @@ public class RoastController {
|
|||||||
}
|
}
|
||||||
this.roastService.updateStatus(businessUnitHandle.getBusinessid(), passstatus);
|
this.roastService.updateStatus(businessUnitHandle.getBusinessid(), passstatus);
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
// TODO: handle exception
|
logger.error("Failed to submit roast handle: {}", businessUnitHandle.getId(), e);
|
||||||
e.printStackTrace();
|
|
||||||
result = 0;
|
result = 0;
|
||||||
}
|
}
|
||||||
String resstr = "{\"res\":\"" + result + "\",\"id\":\"" + businessUnitHandle.getId() + "\"}";
|
String resstr = "{\"res\":\"" + result + "\",\"id\":\"" + businessUnitHandle.getId() + "\"}";
|
||||||
|
|||||||
@ -17,6 +17,8 @@ import com.sipai.service.user.UserService;
|
|||||||
import com.sipai.tools.CommUtil;
|
import com.sipai.tools.CommUtil;
|
||||||
import net.sf.json.JSONObject;
|
import net.sf.json.JSONObject;
|
||||||
import org.apache.commons.fileupload.servlet.ServletFileUpload;
|
import org.apache.commons.fileupload.servlet.ServletFileUpload;
|
||||||
|
import org.slf4j.Logger;
|
||||||
|
import org.slf4j.LoggerFactory;
|
||||||
import org.springframework.stereotype.Controller;
|
import org.springframework.stereotype.Controller;
|
||||||
import org.springframework.ui.Model;
|
import org.springframework.ui.Model;
|
||||||
import org.springframework.web.bind.annotation.ModelAttribute;
|
import org.springframework.web.bind.annotation.ModelAttribute;
|
||||||
@ -39,6 +41,7 @@ import java.util.Map;
|
|||||||
@Controller
|
@Controller
|
||||||
@RequestMapping("/achievement/acceptanceModel")
|
@RequestMapping("/achievement/acceptanceModel")
|
||||||
public class AcceptanceModelController {
|
public class AcceptanceModelController {
|
||||||
|
private static final Logger logger = LoggerFactory.getLogger(AcceptanceModelController.class);
|
||||||
@Resource
|
@Resource
|
||||||
private AcceptanceModelService acceptanceModelService;
|
private AcceptanceModelService acceptanceModelService;
|
||||||
@Resource
|
@Resource
|
||||||
@ -262,7 +265,7 @@ public class AcceptanceModelController {
|
|||||||
file.mkdir();
|
file.mkdir();
|
||||||
}
|
}
|
||||||
}catch (Exception e){
|
}catch (Exception e){
|
||||||
e.printStackTrace();
|
logger.error("Failed to create directory for file conversion: {}", fileforder, e);
|
||||||
}
|
}
|
||||||
|
|
||||||
//开始生成
|
//开始生成
|
||||||
@ -292,7 +295,7 @@ public class AcceptanceModelController {
|
|||||||
ret.put("suc", false);
|
ret.put("suc", false);
|
||||||
}
|
}
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
e.printStackTrace();
|
logger.error("Failed to upload file for acceptance model", e);
|
||||||
ret.put("suc", false);
|
ret.put("suc", false);
|
||||||
ret.put("msg", e.getMessage());
|
ret.put("msg", e.getMessage());
|
||||||
}
|
}
|
||||||
|
|||||||
@ -24,6 +24,8 @@ import org.apache.commons.lang3.StringUtils;
|
|||||||
import org.apache.poi.hssf.usermodel.*;
|
import org.apache.poi.hssf.usermodel.*;
|
||||||
import org.apache.poi.ss.usermodel.*;
|
import org.apache.poi.ss.usermodel.*;
|
||||||
import org.apache.poi.xssf.usermodel.*;
|
import org.apache.poi.xssf.usermodel.*;
|
||||||
|
import org.slf4j.Logger;
|
||||||
|
import org.slf4j.LoggerFactory;
|
||||||
import org.springframework.stereotype.Controller;
|
import org.springframework.stereotype.Controller;
|
||||||
import org.springframework.ui.Model;
|
import org.springframework.ui.Model;
|
||||||
import org.springframework.web.bind.annotation.RequestMapping;
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
@ -51,6 +53,7 @@ import static org.apache.poi.ss.usermodel.CellType.STRING;
|
|||||||
@Controller
|
@Controller
|
||||||
@RequestMapping("/achievement/acceptanceModelCreate")
|
@RequestMapping("/achievement/acceptanceModelCreate")
|
||||||
public class AcceptanceModelCreateController {
|
public class AcceptanceModelCreateController {
|
||||||
|
private static final Logger logger = LoggerFactory.getLogger(AcceptanceModelCreateController.class);
|
||||||
@Resource
|
@Resource
|
||||||
private AcceptanceModelService acceptanceModelService;
|
private AcceptanceModelService acceptanceModelService;
|
||||||
@Resource
|
@Resource
|
||||||
@ -747,7 +750,7 @@ public class AcceptanceModelCreateController {
|
|||||||
file.mkdir();
|
file.mkdir();
|
||||||
}
|
}
|
||||||
}catch (Exception e){
|
}catch (Exception e){
|
||||||
e.printStackTrace();
|
logger.error("Failed to create directory for file conversion: {}", fileforder, e);
|
||||||
}
|
}
|
||||||
|
|
||||||
//开始生成
|
//开始生成
|
||||||
|
|||||||
@ -95,6 +95,8 @@ import javax.servlet.http.HttpServletResponse;
|
|||||||
import javax.xml.stream.XMLInputFactory;
|
import javax.xml.stream.XMLInputFactory;
|
||||||
import javax.xml.stream.XMLStreamException;
|
import javax.xml.stream.XMLStreamException;
|
||||||
import javax.xml.stream.XMLStreamReader;
|
import javax.xml.stream.XMLStreamReader;
|
||||||
|
import java.io.File;
|
||||||
|
import java.io.FileInputStream;
|
||||||
import java.io.IOException;
|
import java.io.IOException;
|
||||||
import java.io.InputStream;
|
import java.io.InputStream;
|
||||||
import java.io.InputStreamReader;
|
import java.io.InputStreamReader;
|
||||||
@ -334,7 +336,7 @@ public class ActivitiController {
|
|||||||
wherestr_search_code=new String(wherestr_search_code.getBytes("ISO-8859-1"),"UTF-8");
|
wherestr_search_code=new String(wherestr_search_code.getBytes("ISO-8859-1"),"UTF-8");
|
||||||
} catch (UnsupportedEncodingException e)
|
} catch (UnsupportedEncodingException e)
|
||||||
{
|
{
|
||||||
e.printStackTrace();
|
logger.error("Failed to encode search parameters", e);
|
||||||
}
|
}
|
||||||
// Page<Object[]> page1 = new Page<Object[]>(PageUtil.PAGE_SIZE);
|
// Page<Object[]> page1 = new Page<Object[]>(PageUtil.PAGE_SIZE);
|
||||||
// int[] pageParams = PageUtil.init(page1, request);
|
// int[] pageParams = PageUtil.init(page1, request);
|
||||||
@ -1034,8 +1036,7 @@ public class ActivitiController {
|
|||||||
|
|
||||||
|
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
// TODO: handle exception
|
logger.error("Failed to process todo task", e);
|
||||||
e.printStackTrace();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1079,7 +1080,7 @@ public class ActivitiController {
|
|||||||
valA = a.getString(KEY_NAME);
|
valA = a.getString(KEY_NAME);
|
||||||
valB = b.getString(KEY_NAME);
|
valB = b.getString(KEY_NAME);
|
||||||
} catch (JSONException e) {
|
} catch (JSONException e) {
|
||||||
e.printStackTrace();
|
logger.error("Failed to get JSON key: {}", KEY_NAME, e);
|
||||||
}
|
}
|
||||||
//是升序还是降序
|
//是升序还是降序
|
||||||
if (is_desc){
|
if (is_desc){
|
||||||
@ -1448,9 +1449,8 @@ public class ActivitiController {
|
|||||||
repositoryService.deleteDeployment(deploymentId, true);
|
repositoryService.deleteDeployment(deploymentId, true);
|
||||||
result=1;
|
result=1;
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
// TODO: handle exception
|
logger.error("Failed to delete deployment: {}", deploymentId, e);
|
||||||
result =0;
|
result =0;
|
||||||
e.printStackTrace();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
model.addAttribute("result", result);
|
model.addAttribute("result", result);
|
||||||
@ -1466,9 +1466,8 @@ public class ActivitiController {
|
|||||||
runtimeService.deleteProcessInstance(processInstanceId,"");
|
runtimeService.deleteProcessInstance(processInstanceId,"");
|
||||||
result=1;
|
result=1;
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
// TODO: handle exception
|
logger.error("Failed to delete process instance: {}", processInstanceId, e);
|
||||||
result =0;
|
result =0;
|
||||||
e.printStackTrace();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
model.addAttribute("result", result);
|
model.addAttribute("result", result);
|
||||||
@ -1490,7 +1489,7 @@ public class ActivitiController {
|
|||||||
try{
|
try{
|
||||||
activityInfos = traceService.traceProcess(processInstanceId,taskId);
|
activityInfos = traceService.traceProcess(processInstanceId,taskId);
|
||||||
}catch(Exception e){
|
}catch(Exception e){
|
||||||
e.printStackTrace();
|
logger.error("Failed to trace process: {}", processInstanceId, e);
|
||||||
}
|
}
|
||||||
return activityInfos;
|
return activityInfos;
|
||||||
}
|
}
|
||||||
@ -1508,7 +1507,7 @@ public class ActivitiController {
|
|||||||
try{
|
try{
|
||||||
activityInfos = traceService.traceProcessByDefinitionId(processDefinitionId);
|
activityInfos = traceService.traceProcessByDefinitionId(processDefinitionId);
|
||||||
}catch(Exception e){
|
}catch(Exception e){
|
||||||
e.printStackTrace();
|
logger.error("Failed to trace process definition: {}", processDefinitionId, e);
|
||||||
}
|
}
|
||||||
return "/activiti/processDefinitionTrace";
|
return "/activiti/processDefinitionTrace";
|
||||||
}
|
}
|
||||||
@ -1571,6 +1570,139 @@ public class ActivitiController {
|
|||||||
return "redirect:/workflow/process-list";
|
return "redirect:/workflow/process-list";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 部署diagrams文件夹下的所有BPMN文件
|
||||||
|
* 支持批量部署指定目录下的流程定义
|
||||||
|
*
|
||||||
|
* @param folderName 文件夹名称(如: leave, dispatch等),为空则部署所有
|
||||||
|
* @return 部署结果
|
||||||
|
*/
|
||||||
|
@RequestMapping(value = "/deployDiagrams.do")
|
||||||
|
public String deployDiagrams(HttpServletRequest request, Model model,
|
||||||
|
@RequestParam(value = "folderName", required = false) String folderName) {
|
||||||
|
int successCount = 0;
|
||||||
|
int failCount = 0;
|
||||||
|
JSONArray resultArray = new JSONArray();
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 获取diagrams目录路径
|
||||||
|
String diagramsPath = request.getSession().getServletContext()
|
||||||
|
.getRealPath("/WEB-INF/classes/diagrams");
|
||||||
|
if (diagramsPath == null) {
|
||||||
|
diagramsPath = this.getClass().getClassLoader()
|
||||||
|
.getResource("diagrams").getPath();
|
||||||
|
}
|
||||||
|
|
||||||
|
File diagramsDir = new File(diagramsPath);
|
||||||
|
if (!diagramsDir.exists() || !diagramsDir.isDirectory()) {
|
||||||
|
model.addAttribute("result", "{\"res\":\"0\",\"msg\":\"diagrams目录不存在\"}");
|
||||||
|
return "result";
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取需要部署的文件夹列表
|
||||||
|
List<File> targetDirs = new ArrayList<File>();
|
||||||
|
if (folderName != null && !folderName.isEmpty()) {
|
||||||
|
File targetDir = new File(diagramsDir, folderName);
|
||||||
|
if (targetDir.exists() && targetDir.isDirectory()) {
|
||||||
|
targetDirs.add(targetDir);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 部署所有子文件夹
|
||||||
|
File[] subDirs = diagramsDir.listFiles(File::isDirectory);
|
||||||
|
if (subDirs != null) {
|
||||||
|
targetDirs.addAll(java.util.Arrays.asList(subDirs));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 遍历部署每个文件夹下的BPMN文件
|
||||||
|
for (File dir : targetDirs) {
|
||||||
|
File[] bpmnFiles = dir.listFiles((d, name) ->
|
||||||
|
name.endsWith(".bpmn") || name.endsWith(".bpmn20.xml"));
|
||||||
|
|
||||||
|
if (bpmnFiles == null || bpmnFiles.length == 0) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (File bpmnFile : bpmnFiles) {
|
||||||
|
try {
|
||||||
|
String fileName = bpmnFile.getName();
|
||||||
|
FileInputStream fis = new FileInputStream(bpmnFile);
|
||||||
|
|
||||||
|
Deployment deployment = repositoryService.createDeployment()
|
||||||
|
.name(fileName.substring(0, fileName.lastIndexOf(".")))
|
||||||
|
.addInputStream(fileName, fis)
|
||||||
|
.deploy();
|
||||||
|
|
||||||
|
fis.close();
|
||||||
|
|
||||||
|
JSONObject deployResult = new JSONObject();
|
||||||
|
deployResult.put("fileName", fileName);
|
||||||
|
deployResult.put("deploymentId", deployment.getId());
|
||||||
|
deployResult.put("deploymentName", deployment.getName());
|
||||||
|
deployResult.put("deploymentTime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss")
|
||||||
|
.format(deployment.getDeploymentTime()));
|
||||||
|
resultArray.add(deployResult);
|
||||||
|
successCount++;
|
||||||
|
|
||||||
|
logger.info("流程部署成功: {} -> {}", fileName, deployment.getId());
|
||||||
|
} catch (Exception e) {
|
||||||
|
failCount++;
|
||||||
|
logger.error("流程部署失败: {}", bpmnFile.getName(), e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (Exception e) {
|
||||||
|
logger.error("部署diagrams文件失败", e);
|
||||||
|
model.addAttribute("result", "{\"res\":\"0\",\"msg\":\"" + e.getMessage() + "\"}");
|
||||||
|
return "result";
|
||||||
|
}
|
||||||
|
|
||||||
|
String result = "{\"res\":\"1\",\"success\":" + successCount + ",\"fail\":" + failCount
|
||||||
|
+ ",\"deployments\":" + resultArray.toString() + "}";
|
||||||
|
model.addAttribute("result", result);
|
||||||
|
return "result";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取diagrams目录下可部署的BPMN文件列表
|
||||||
|
*/
|
||||||
|
@RequestMapping(value = "/getDeployableBpmnFiles.do")
|
||||||
|
public String getDeployableBpmnFiles(HttpServletRequest request, Model model) {
|
||||||
|
JSONArray filesArray = new JSONArray();
|
||||||
|
|
||||||
|
try {
|
||||||
|
String diagramsPath = this.getClass().getClassLoader()
|
||||||
|
.getResource("diagrams").getPath();
|
||||||
|
File diagramsDir = new File(diagramsPath);
|
||||||
|
|
||||||
|
if (diagramsDir.exists() && diagramsDir.isDirectory()) {
|
||||||
|
File[] subDirs = diagramsDir.listFiles(File::isDirectory);
|
||||||
|
if (subDirs != null) {
|
||||||
|
for (File dir : subDirs) {
|
||||||
|
File[] bpmnFiles = dir.listFiles((d, name) ->
|
||||||
|
name.endsWith(".bpmn") || name.endsWith(".bpmn20.xml"));
|
||||||
|
|
||||||
|
if (bpmnFiles != null) {
|
||||||
|
for (File bpmnFile : bpmnFiles) {
|
||||||
|
JSONObject fileInfo = new JSONObject();
|
||||||
|
fileInfo.put("folder", dir.getName());
|
||||||
|
fileInfo.put("fileName", bpmnFile.getName());
|
||||||
|
fileInfo.put("filePath", "diagrams/" + dir.getName() + "/" + bpmnFile.getName());
|
||||||
|
filesArray.add(fileInfo);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (Exception e) {
|
||||||
|
logger.error("获取BPMN文件列表失败", e);
|
||||||
|
}
|
||||||
|
|
||||||
|
model.addAttribute("result", filesArray.toString());
|
||||||
|
return "result";
|
||||||
|
}
|
||||||
|
|
||||||
@RequestMapping(value = "/process/convert-to-model/{processDefinitionId}")
|
@RequestMapping(value = "/process/convert-to-model/{processDefinitionId}")
|
||||||
public String convertToModel(@PathVariable("processDefinitionId") String processDefinitionId)
|
public String convertToModel(@PathVariable("processDefinitionId") String processDefinitionId)
|
||||||
throws UnsupportedEncodingException, XMLStreamException {
|
throws UnsupportedEncodingException, XMLStreamException {
|
||||||
@ -1710,7 +1842,7 @@ public class ActivitiController {
|
|||||||
taskService.claim(taskId, userId);
|
taskService.claim(taskId, userId);
|
||||||
result=1;
|
result=1;
|
||||||
}catch(Exception e){
|
}catch(Exception e){
|
||||||
e.printStackTrace();
|
logger.error("Failed to claim task: {}", taskId, e);
|
||||||
}
|
}
|
||||||
|
|
||||||
model.addAttribute("result", result);
|
model.addAttribute("result", result);
|
||||||
@ -1734,7 +1866,7 @@ public class ActivitiController {
|
|||||||
try{
|
try{
|
||||||
taskService.claim(taskId, userId);
|
taskService.claim(taskId, userId);
|
||||||
}catch(Exception e){
|
}catch(Exception e){
|
||||||
e.printStackTrace();
|
logger.error("Failed to claim task in batch: {}", taskId, e);
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
result++;
|
result++;
|
||||||
|
|||||||
@ -1732,13 +1732,21 @@ public class DataCurveController {
|
|||||||
name = curveRemarkFile.getFilename();
|
name = curveRemarkFile.getFilename();
|
||||||
}
|
}
|
||||||
byte[] bytes = commonFileService.getInputStreamBytes("curve", path);
|
byte[] bytes = commonFileService.getInputStreamBytes("curve", path);
|
||||||
|
if (bytes == null || bytes.length == 0) {
|
||||||
|
response.setHeader("Content-type", "text/html;charset=UTF-8");
|
||||||
|
String data = "文件不存在或已被删除";
|
||||||
|
OutputStream ps = response.getOutputStream();
|
||||||
|
ps.write(data.getBytes("UTF-8"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
InputStream object = new ByteArrayInputStream(bytes);
|
InputStream object = new ByteArrayInputStream(bytes);
|
||||||
byte buf[] = new byte[1024];
|
byte buf[] = new byte[1024];
|
||||||
int length = 0;
|
int length = 0;
|
||||||
|
|
||||||
String fileName = new String(name.getBytes(), "ISO-8859-1");//压缩包中文名称,不然乱码
|
// 使用UTF-8编码处理中文文件名
|
||||||
|
String encodedFileName = java.net.URLEncoder.encode(name, "UTF-8").replaceAll("\\+", "%20");
|
||||||
response.reset();
|
response.reset();
|
||||||
response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
|
response.setHeader("Content-Disposition", "attachment;filename*=UTF-8''" + encodedFileName);
|
||||||
response.setContentType("application/octet-stream");
|
response.setContentType("application/octet-stream");
|
||||||
response.setCharacterEncoding("UTF-8");
|
response.setCharacterEncoding("UTF-8");
|
||||||
OutputStream outputStream = response.getOutputStream();
|
OutputStream outputStream = response.getOutputStream();
|
||||||
|
|||||||
@ -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";
|
||||||
|
|||||||
@ -709,9 +709,9 @@ public class RptCreateController {
|
|||||||
if (rptInfoSetFile != null) {
|
if (rptInfoSetFile != null) {
|
||||||
try {
|
try {
|
||||||
String path = rptInfoSetFile.getAbspath();
|
String path = rptInfoSetFile.getAbspath();
|
||||||
path = path.replaceAll(".xls", "");
|
// path = path.replaceAll("\\.xlsx", "").replaceAll("\\.xls", "");
|
||||||
path = path.replaceAll(".xlsx", "");
|
// String base = this.rptCreateService.convertExceltoHtml(CommUtil.fixRptCreateFileName(path), sheetname, id, layerType, FileNameSpaceEnum.RptInfoSetFile.getNameSpace());
|
||||||
String base = this.rptCreateService.convertExceltoHtml(CommUtil.fixRptCreateFileName(path), sheetname, id, layerType, FileNameSpaceEnum.RptInfoSetFile.getNameSpace());
|
String base = this.rptCreateService.convertExceltoHtml(path, sheetname, id, layerType, FileNameSpaceEnum.RptInfoSetFile.getNameSpace());
|
||||||
//截取掉sheet名 目前只能先截取h2
|
//截取掉sheet名 目前只能先截取h2
|
||||||
String result = subRangeString(base, "<h2>", "</h2>");
|
String result = subRangeString(base, "<h2>", "</h2>");
|
||||||
result = result.replaceAll("<table class=\"t1\">", "<table class=\"t1\" id=\"t1\">");
|
result = result.replaceAll("<table class=\"t1\">", "<table class=\"t1\" id=\"t1\">");
|
||||||
@ -755,30 +755,18 @@ public class RptCreateController {
|
|||||||
if (rptCreate != null) {//报表生成中的预览
|
if (rptCreate != null) {//报表生成中的预览
|
||||||
List<RptInfoSetSheet> list = rptInfoSetSheetService.selectListByWhere("where rptInfoSet_id = '" + rptCreate.getRptsetId() + "'");
|
List<RptInfoSetSheet> list = rptInfoSetSheetService.selectListByWhere("where rptInfoSet_id = '" + rptCreate.getRptsetId() + "'");
|
||||||
try {
|
try {
|
||||||
String sourcePath = "";
|
String sourcePath = rptCreate.getRptname();
|
||||||
byte[] isb = commonFileService.getInputStreamBytes(FileNameSpaceEnum.RptCreateFile.getNameSpace(), CommUtil.fixRptCreateFileName(rptCreate.getRptname() + rptCreate.getId()));
|
byte[] isb = commonFileService.getInputStreamBytes(FileNameSpaceEnum.RptCreateFile.getNameSpace(), CommUtil.fixRptCreateFileName(rptCreate.getRptname() + rptCreate.getId()));
|
||||||
InputStream is = new ByteArrayInputStream(isb);
|
if (isb == null || isb.length == 0) {
|
||||||
String sheets = "";
|
result1 = Result_Report.failed("文件不存在或已被删除");
|
||||||
if (sourcePath.indexOf(".xlsx") > 0) {
|
model.addAttribute("result", CommUtil.toJson(result1));
|
||||||
XSSFWorkbook workBook = new XSSFWorkbook(is);
|
return "result";
|
||||||
for (int i = 0; i < workBook.getNumberOfSheets(); i++) {
|
|
||||||
XSSFSheet sheet = workBook.getSheetAt(i);
|
|
||||||
sheets += sheet.getSheetName() + ",";
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
HSSFWorkbook workBook = new HSSFWorkbook(is);
|
|
||||||
for (int i = 0; i < workBook.getNumberOfSheets(); i++) {
|
|
||||||
HSSFSheet sheet = workBook.getSheetAt(i);
|
|
||||||
sheets += sheet.getSheetName() + ",";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (RptInfoSetSheet entity : list) {
|
|
||||||
sheets = sheets.replace(entity.getSheetName() + ",", "");
|
|
||||||
}
|
}
|
||||||
|
String sheets = getString(isb, sourcePath, list);
|
||||||
result1 = Result_Report.success(Result.SUCCESS, sheets);
|
result1 = Result_Report.success(Result.SUCCESS, sheets);
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
e.printStackTrace();
|
e.printStackTrace();
|
||||||
result1 = Result_Report.failed("获取失败");
|
result1 = Result_Report.failed("获取失败: " + e.getMessage());
|
||||||
}
|
}
|
||||||
} else {//报表配置中的预览
|
} else {//报表配置中的预览
|
||||||
RptInfoSetFile rptInfoSetFile = rptInfoSetFileService.selectById(id);
|
RptInfoSetFile rptInfoSetFile = rptInfoSetFileService.selectById(id);
|
||||||
@ -787,31 +775,36 @@ public class RptCreateController {
|
|||||||
try {
|
try {
|
||||||
String sourcePath = "";
|
String sourcePath = "";
|
||||||
String path = rptInfoSetFile.getAbspath();
|
String path = rptInfoSetFile.getAbspath();
|
||||||
path = path.replaceAll(".xls", "");
|
// path = path.replaceAll("\\.xlsx", "").replaceAll("\\.xls", "");
|
||||||
path = path.replaceAll(".xlsx", "");
|
// byte[] isb = commonFileService.getInputStreamBytes(FileNameSpaceEnum.RptInfoSetFile.getNameSpace(), CommUtil.fixRptCreateFileName(path));
|
||||||
byte[] isb = commonFileService.getInputStreamBytes(FileNameSpaceEnum.RptInfoSetFile.getNameSpace(), CommUtil.fixRptCreateFileName(path));
|
byte[] isb = commonFileService.getInputStreamBytes(FileNameSpaceEnum.RptInfoSetFile.getNameSpace(), path);
|
||||||
|
if (isb == null || isb.length == 0) {
|
||||||
|
result1 = Result_Report.failed("文件不存在或已被删除,请重新上传模板文件");
|
||||||
|
model.addAttribute("result", CommUtil.toJson(result1));
|
||||||
|
return "result";
|
||||||
|
}
|
||||||
InputStream is = new ByteArrayInputStream(isb);
|
InputStream is = new ByteArrayInputStream(isb);
|
||||||
String sheets = "";
|
StringBuilder sheets = new StringBuilder();
|
||||||
if (sourcePath.indexOf(".xlsx") > 0) {
|
if (path.indexOf(".xlsx") > 0) {
|
||||||
XSSFWorkbook workBook = new XSSFWorkbook(is);
|
XSSFWorkbook workBook = new XSSFWorkbook(is);
|
||||||
for (int i = 0; i < workBook.getNumberOfSheets(); i++) {
|
for (int i = 0; i < workBook.getNumberOfSheets(); i++) {
|
||||||
XSSFSheet sheet = workBook.getSheetAt(i);
|
XSSFSheet sheet = workBook.getSheetAt(i);
|
||||||
sheets += sheet.getSheetName() + ",";
|
sheets.append(sheet.getSheetName()).append(",");
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
HSSFWorkbook workBook = new HSSFWorkbook(is);
|
HSSFWorkbook workBook = new HSSFWorkbook(is);
|
||||||
for (int i = 0; i < workBook.getNumberOfSheets(); i++) {
|
for (int i = 0; i < workBook.getNumberOfSheets(); i++) {
|
||||||
HSSFSheet sheet = workBook.getSheetAt(i);
|
HSSFSheet sheet = workBook.getSheetAt(i);
|
||||||
sheets += sheet.getSheetName() + ",";
|
sheets.append(sheet.getSheetName()).append(",");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
for (RptInfoSetSheet entity : list) {
|
for (RptInfoSetSheet entity : list) {
|
||||||
sheets = sheets.replace(entity.getSheetName() + ",", "");
|
sheets = new StringBuilder(sheets.toString().replace(entity.getSheetName() + ",", ""));
|
||||||
}
|
}
|
||||||
result1 = Result_Report.success(Result.SUCCESS, sheets);
|
result1 = Result_Report.success(Result.SUCCESS, sheets.toString());
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
e.printStackTrace();
|
e.printStackTrace();
|
||||||
result1 = Result_Report.failed("获取失败");
|
result1 = Result_Report.failed("获取失败: " + e.getMessage());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -819,6 +812,28 @@ public class RptCreateController {
|
|||||||
return "result";
|
return "result";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private static String getString(byte[] isb, String sourcePath, List<RptInfoSetSheet> list) throws IOException {
|
||||||
|
InputStream is = new ByteArrayInputStream(isb);
|
||||||
|
StringBuilder sheets = new StringBuilder();
|
||||||
|
if (sourcePath.indexOf(".xlsx") > 0) {
|
||||||
|
XSSFWorkbook workBook = new XSSFWorkbook(is);
|
||||||
|
for (int i = 0; i < workBook.getNumberOfSheets(); i++) {
|
||||||
|
XSSFSheet sheet = workBook.getSheetAt(i);
|
||||||
|
sheets.append(sheet.getSheetName()).append(",");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
HSSFWorkbook workBook = new HSSFWorkbook(is);
|
||||||
|
for (int i = 0; i < workBook.getNumberOfSheets(); i++) {
|
||||||
|
HSSFSheet sheet = workBook.getSheetAt(i);
|
||||||
|
sheets.append(sheet.getSheetName()).append(",");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (RptInfoSetSheet entity : list) {
|
||||||
|
sheets = new StringBuilder(sheets.toString().replace(entity.getSheetName() + ",", ""));
|
||||||
|
}
|
||||||
|
return sheets.toString();
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 报表下载
|
* 报表下载
|
||||||
*
|
*
|
||||||
@ -839,13 +854,21 @@ public class RptCreateController {
|
|||||||
name = rptCreate.getRptname() + ".xls";
|
name = rptCreate.getRptname() + ".xls";
|
||||||
}
|
}
|
||||||
byte[] bytes = commonFileService.getInputStreamBytes(FileNameSpaceEnum.RptCreateFile.getNameSpace(), path);
|
byte[] bytes = commonFileService.getInputStreamBytes(FileNameSpaceEnum.RptCreateFile.getNameSpace(), path);
|
||||||
|
if (bytes == null || bytes.length == 0) {
|
||||||
|
response.setHeader("Content-type", "text/html;charset=UTF-8");
|
||||||
|
String data = "文件不存在或已被删除";
|
||||||
|
OutputStream ps = response.getOutputStream();
|
||||||
|
ps.write(data.getBytes("UTF-8"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
InputStream object = new ByteArrayInputStream(bytes);
|
InputStream object = new ByteArrayInputStream(bytes);
|
||||||
byte buf[] = new byte[1024];
|
byte buf[] = new byte[1024];
|
||||||
int length = 0;
|
int length = 0;
|
||||||
|
|
||||||
String fileName = new String(name.getBytes(), "ISO-8859-1");//压缩包中文名称,不然乱码
|
// 使用UTF-8编码处理中文文件名
|
||||||
|
String encodedFileName = java.net.URLEncoder.encode(name, "UTF-8").replaceAll("\\+", "%20");
|
||||||
response.reset();
|
response.reset();
|
||||||
response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
|
response.setHeader("Content-Disposition", "attachment;filename*=UTF-8''" + encodedFileName);
|
||||||
response.setContentType("application/octet-stream");
|
response.setContentType("application/octet-stream");
|
||||||
response.setCharacterEncoding("UTF-8");
|
response.setCharacterEncoding("UTF-8");
|
||||||
OutputStream outputStream = response.getOutputStream();
|
OutputStream outputStream = response.getOutputStream();
|
||||||
@ -1219,6 +1242,7 @@ public class RptCreateController {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取单个 报表详情
|
* 获取单个 报表详情
|
||||||
|
*
|
||||||
* @param request
|
* @param request
|
||||||
* @param model
|
* @param model
|
||||||
* @return
|
* @return
|
||||||
|
|||||||
@ -178,13 +178,22 @@ public class RptInfoSetFileController {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (bytes == null || bytes.length == 0) {
|
||||||
|
response.setHeader("Content-type", "text/html;charset=UTF-8");
|
||||||
|
String data = "文件不存在或已被删除";
|
||||||
|
OutputStream ps = response.getOutputStream();
|
||||||
|
ps.write(data.getBytes("UTF-8"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
InputStream object = new ByteArrayInputStream(bytes);
|
InputStream object = new ByteArrayInputStream(bytes);
|
||||||
byte buf[] = new byte[1024];
|
byte buf[] = new byte[1024];
|
||||||
int length = 0;
|
int length = 0;
|
||||||
|
|
||||||
String fileName = new String(name.getBytes(), "ISO-8859-1");//压缩包中文名称,不然乱码
|
// 使用UTF-8编码处理中文文件名
|
||||||
|
String encodedFileName = java.net.URLEncoder.encode(name, "UTF-8").replaceAll("\\+", "%20");
|
||||||
response.reset();
|
response.reset();
|
||||||
response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
|
response.setHeader("Content-Disposition", "attachment;filename*=UTF-8''" + encodedFileName);
|
||||||
response.setContentType("application/octet-stream");
|
response.setContentType("application/octet-stream");
|
||||||
response.setCharacterEncoding("UTF-8");
|
response.setCharacterEncoding("UTF-8");
|
||||||
OutputStream outputStream = response.getOutputStream();
|
OutputStream outputStream = response.getOutputStream();
|
||||||
|
|||||||
@ -38,6 +38,9 @@ public class MenuController {
|
|||||||
public String showMenuListByCu(HttpServletRequest request,Model model){
|
public String showMenuListByCu(HttpServletRequest request,Model model){
|
||||||
User cu= (User)request.getSession().getAttribute("cu");
|
User cu= (User)request.getSession().getAttribute("cu");
|
||||||
List<Menu> list = this.menuService.getFullPower(cu.getId());
|
List<Menu> list = this.menuService.getFullPower(cu.getId());
|
||||||
|
// if("emp01".equals(cu.getId())){
|
||||||
|
// list = menuService.selectListByWhere(" where 1=1 ");
|
||||||
|
// }
|
||||||
if(list!=null &&list.size()>0){
|
if(list!=null &&list.size()>0){
|
||||||
for(int i=list.size()-1;i>=0;i--){
|
for(int i=list.size()-1;i>=0;i--){
|
||||||
Menu menu=list.get(i);
|
Menu menu=list.get(i);
|
||||||
|
|||||||
@ -754,13 +754,21 @@ public class CameraController {
|
|||||||
name = cameraFile.getFilename();
|
name = cameraFile.getFilename();
|
||||||
}
|
}
|
||||||
byte[] bytes = commonFileService.getInputStreamBytes("cameraimg", path);
|
byte[] bytes = commonFileService.getInputStreamBytes("cameraimg", path);
|
||||||
|
if (bytes == null || bytes.length == 0) {
|
||||||
|
response.setHeader("Content-type", "text/html;charset=UTF-8");
|
||||||
|
String data = "文件不存在或已被删除";
|
||||||
|
OutputStream ps = response.getOutputStream();
|
||||||
|
ps.write(data.getBytes("UTF-8"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
InputStream object = new ByteArrayInputStream(bytes);
|
InputStream object = new ByteArrayInputStream(bytes);
|
||||||
byte buf[] = new byte[1024];
|
byte buf[] = new byte[1024];
|
||||||
int length = 0;
|
int length = 0;
|
||||||
|
|
||||||
String fileName = new String(name.getBytes(), "ISO-8859-1");//压缩包中文名称,不然乱码
|
// 使用UTF-8编码处理中文文件名
|
||||||
|
String encodedFileName = java.net.URLEncoder.encode(name, "UTF-8").replaceAll("\\+", "%20");
|
||||||
response.reset();
|
response.reset();
|
||||||
response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
|
response.setHeader("Content-Disposition", "attachment;filename*=UTF-8''" + encodedFileName);
|
||||||
response.setContentType("application/octet-stream");
|
response.setContentType("application/octet-stream");
|
||||||
response.setCharacterEncoding("UTF-8");
|
response.setCharacterEncoding("UTF-8");
|
||||||
OutputStream outputStream = response.getOutputStream();
|
OutputStream outputStream = response.getOutputStream();
|
||||||
|
|||||||
@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -97,7 +97,7 @@ public enum ProcessType {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public static String getName(String id) {
|
public static String getName(String id) {
|
||||||
for (PatrolType item :PatrolType.values()) {
|
for (ProcessType item :ProcessType.values()) {
|
||||||
if (item.getId().equals(id)) {
|
if (item.getId().equals(id)) {
|
||||||
return item.getName();
|
return item.getName();
|
||||||
}
|
}
|
||||||
@ -106,7 +106,7 @@ public enum ProcessType {
|
|||||||
}
|
}
|
||||||
public static JSONArray toJson() {
|
public static JSONArray toJson() {
|
||||||
JSONArray jsonArray = new JSONArray();
|
JSONArray jsonArray = new JSONArray();
|
||||||
for (PatrolType item :PatrolType.values()) {
|
for (ProcessType item :ProcessType.values()) {
|
||||||
JSONObject jsonObject = new JSONObject();
|
JSONObject jsonObject = new JSONObject();
|
||||||
jsonObject.put("id", item.getId());
|
jsonObject.put("id", item.getId());
|
||||||
jsonObject.put("name", item.getName());
|
jsonObject.put("name", item.getName());
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -16,6 +16,8 @@ import com.sipai.service.user.UserService;
|
|||||||
import com.sipai.tools.CommUtil;
|
import com.sipai.tools.CommUtil;
|
||||||
import com.sipai.tools.FileUtil;
|
import com.sipai.tools.FileUtil;
|
||||||
import io.minio.ObjectStat;
|
import io.minio.ObjectStat;
|
||||||
|
import org.slf4j.Logger;
|
||||||
|
import org.slf4j.LoggerFactory;
|
||||||
import org.springframework.stereotype.Service;
|
import org.springframework.stereotype.Service;
|
||||||
import org.springframework.transaction.annotation.Transactional;
|
import org.springframework.transaction.annotation.Transactional;
|
||||||
import org.springframework.web.multipart.MultipartFile;
|
import org.springframework.web.multipart.MultipartFile;
|
||||||
@ -24,12 +26,88 @@ import javax.annotation.Resource;
|
|||||||
import java.io.ByteArrayOutputStream;
|
import java.io.ByteArrayOutputStream;
|
||||||
import java.io.IOException;
|
import java.io.IOException;
|
||||||
import java.io.InputStream;
|
import java.io.InputStream;
|
||||||
|
import java.io.UnsupportedEncodingException;
|
||||||
import java.text.SimpleDateFormat;
|
import java.text.SimpleDateFormat;
|
||||||
import java.util.Date;
|
import java.util.Date;
|
||||||
import java.util.List;
|
import java.util.List;
|
||||||
|
|
||||||
@Service
|
@Service
|
||||||
public class CommonFileServiceImpl implements CommonFileService {
|
public class CommonFileServiceImpl implements CommonFileService {
|
||||||
|
|
||||||
|
private static final Logger logger = LoggerFactory.getLogger(CommonFileServiceImpl.class);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Safely get the original filename with proper UTF-8 encoding
|
||||||
|
* Detects whether ISO-8859-1 to UTF-8 conversion is needed
|
||||||
|
*
|
||||||
|
* @param item the MultipartFile
|
||||||
|
* @return properly encoded filename
|
||||||
|
*/
|
||||||
|
private String getSafeFileName(MultipartFile item) {
|
||||||
|
String fileName = item.getOriginalFilename();
|
||||||
|
if (fileName == null || fileName.isEmpty()) {
|
||||||
|
return "unknown_file";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if filename contains garbled characters (likely ISO-8859-1 encoded)
|
||||||
|
// If the filename contains replacement characters or mojibake, try to convert
|
||||||
|
try {
|
||||||
|
// Check if already valid UTF-8 (contains Chinese or other UTF-8 characters)
|
||||||
|
byte[] bytes = fileName.getBytes("UTF-8");
|
||||||
|
String reconstructed = new String(bytes, "UTF-8");
|
||||||
|
|
||||||
|
// If the string contains '?' that weren't originally there, it might need conversion
|
||||||
|
// Try ISO-8859-1 to UTF-8 conversion only if the string looks like it needs it
|
||||||
|
boolean needsConversion = false;
|
||||||
|
|
||||||
|
// Check if filename contains typical mojibake patterns (like '???' for Chinese)
|
||||||
|
// or if it's clearly Latin-1 encoded
|
||||||
|
if (fileName.contains("???") || fileName.contains("Ã") || fileName.contains("Â")) {
|
||||||
|
needsConversion = true;
|
||||||
|
} else {
|
||||||
|
// Try to detect if the bytes look like UTF-8 bytes incorrectly interpreted as ISO-8859-1
|
||||||
|
try {
|
||||||
|
String testConvert = new String(fileName.getBytes("ISO-8859-1"), "UTF-8");
|
||||||
|
// If conversion produces valid Chinese characters where there were none, use converted version
|
||||||
|
if (testConvert.matches(".*[\u4e00-\u9fa5].*") && !fileName.matches(".*[\u4e00-\u9fa5].*")) {
|
||||||
|
fileName = testConvert;
|
||||||
|
}
|
||||||
|
} catch (Exception e) {
|
||||||
|
// Conversion failed, keep original
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (UnsupportedEncodingException e) {
|
||||||
|
// Keep original filename
|
||||||
|
}
|
||||||
|
|
||||||
|
return fileName;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate a MinIO-safe object name from original filename
|
||||||
|
* Uses timestamp + UUID to ensure ASCII-only, unique object names
|
||||||
|
* MinIO Java client handles URL encoding internally, so we must NOT pre-encode
|
||||||
|
*
|
||||||
|
* @param originalFileName the original filename (can contain Chinese/special chars)
|
||||||
|
* @param timestamp timestamp prefix for uniqueness
|
||||||
|
* @return MinIO-safe object name (ASCII only)
|
||||||
|
*/
|
||||||
|
private String generateMinioObjectName(String originalFileName, String timestamp) {
|
||||||
|
// Extract file extension
|
||||||
|
String extension = "";
|
||||||
|
int dotIndex = originalFileName.lastIndexOf('.');
|
||||||
|
if (dotIndex > 0 && dotIndex < originalFileName.length() - 1) {
|
||||||
|
extension = originalFileName.substring(dotIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate a safe ASCII-only object name using timestamp + UUID
|
||||||
|
// Do NOT use URL encoding as MinIO client will encode again internally
|
||||||
|
// This avoids double-encoding issues
|
||||||
|
String uuid = CommUtil.getUUID().replace("-", "").substring(0, 8);
|
||||||
|
|
||||||
|
return timestamp + "-" + uuid + extension;
|
||||||
|
}
|
||||||
|
|
||||||
@Resource
|
@Resource
|
||||||
private CommonFileDao commonFileDao;
|
private CommonFileDao commonFileDao;
|
||||||
@Resource
|
@Resource
|
||||||
@ -256,11 +334,10 @@ public class CommonFileServiceImpl implements CommonFileService {
|
|||||||
//minio
|
//minio
|
||||||
@Override
|
@Override
|
||||||
public byte[] getInputStreamBytes(String nameSpace, String filePath) {
|
public byte[] getInputStreamBytes(String nameSpace, String filePath) {
|
||||||
byte[] buffer = null;
|
byte[] buffer = new byte[0];
|
||||||
try {
|
try {
|
||||||
ObjectStat stat = minioTemplate.statObject(nameSpace, filePath);
|
ObjectStat stat = minioTemplate.statObject(nameSpace, filePath);
|
||||||
InputStream in = minioTemplate.getObject(nameSpace, filePath);
|
InputStream in = minioTemplate.getObject(nameSpace, filePath);
|
||||||
in = minioTemplate.getObject(nameSpace, filePath);
|
|
||||||
ByteArrayOutputStream swapStream = new ByteArrayOutputStream();
|
ByteArrayOutputStream swapStream = new ByteArrayOutputStream();
|
||||||
byte[] buff = new byte[(int) stat.length()]; //buff用于存放循环读取的临时数据
|
byte[] buff = new byte[(int) stat.length()]; //buff用于存放循环读取的临时数据
|
||||||
int rc = 0;
|
int rc = 0;
|
||||||
@ -270,7 +347,13 @@ public class CommonFileServiceImpl implements CommonFileService {
|
|||||||
buffer = swapStream.toByteArray(); //in_b为转换之后的结果
|
buffer = swapStream.toByteArray(); //in_b为转换之后的结果
|
||||||
in.close();
|
in.close();
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
e.printStackTrace();
|
// MinIO错误:文件不存在等情况
|
||||||
|
String errorMsg = e.getMessage();
|
||||||
|
if (errorMsg != null && errorMsg.contains("NoSuchKey")) {
|
||||||
|
logger.error("MinIO文件不存在: bucketName={}, objectName={}", nameSpace, filePath);
|
||||||
|
} else {
|
||||||
|
logger.error("获取MinIO文件失败: bucketName={}, objectName={}, 错误: {}", nameSpace, filePath, errorMsg, e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return buffer;
|
return buffer;
|
||||||
}
|
}
|
||||||
@ -286,13 +369,18 @@ public class CommonFileServiceImpl implements CommonFileService {
|
|||||||
*/
|
*/
|
||||||
@Transactional
|
@Transactional
|
||||||
public int updateFile(String masterId, String nameSpace, String tableName, MultipartFile item) {
|
public int updateFile(String masterId, String nameSpace, String tableName, MultipartFile item) {
|
||||||
String fileName = ""; //文件名称
|
String fileName = ""; //文件名称(原始名称,用于显示)
|
||||||
String filePath = ""; //文件存储名称,相同名称在minio中会被覆盖掉
|
String filePath = ""; //文件存储名称(MinIO对象名称),相同名称在minio中会被覆盖掉
|
||||||
int res = 0;
|
int res = 0;
|
||||||
try {
|
try {
|
||||||
fileName = item.getOriginalFilename();
|
// 安全获取文件名(自动检测编码)
|
||||||
|
fileName = getSafeFileName(item);
|
||||||
|
|
||||||
|
// 生成MinIO安全的对象名称
|
||||||
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd-HH-mm-ss");
|
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd-HH-mm-ss");
|
||||||
filePath = dateFormat.format(new Date()) + fileName;
|
String timestamp = dateFormat.format(new Date());
|
||||||
|
filePath = generateMinioObjectName(fileName, timestamp);
|
||||||
|
|
||||||
InputStream in = item.getInputStream();
|
InputStream in = item.getInputStream();
|
||||||
String contentType = item.getContentType();
|
String contentType = item.getContentType();
|
||||||
minioTemplate.makeBucket(nameSpace);
|
minioTemplate.makeBucket(nameSpace);
|
||||||
@ -303,16 +391,16 @@ public class CommonFileServiceImpl implements CommonFileService {
|
|||||||
commonFile.setMasterid(masterId);
|
commonFile.setMasterid(masterId);
|
||||||
// 20210105 YYJ 用于文件表绑定资料节点用字段 tb_doc_file内和masterId一样
|
// 20210105 YYJ 用于文件表绑定资料节点用字段 tb_doc_file内和masterId一样
|
||||||
// commonFile.setPid(masterId);
|
// commonFile.setPid(masterId);
|
||||||
commonFile.setFilename(fileName);
|
commonFile.setFilename(fileName); // 保存原始文件名用于显示
|
||||||
commonFile.setType(contentType);
|
commonFile.setType(contentType);
|
||||||
//minio用相对路径
|
//minio用相对路径
|
||||||
// commonFile.setFilepath(filePath);
|
// commonFile.setFilepath(filePath);
|
||||||
commonFile.setAbspath(filePath);
|
commonFile.setAbspath(filePath); // 保存MinIO对象名称
|
||||||
commonFile.setInsdt(CommUtil.nowDate());
|
commonFile.setInsdt(CommUtil.nowDate());
|
||||||
commonFile.setSize((int) item.getSize());
|
commonFile.setSize((int) item.getSize());
|
||||||
res = this.insertByTable(tableName, commonFile);
|
res = this.insertByTable(tableName, commonFile);
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
e.printStackTrace();
|
logger.error("Failed to update file to MinIO for masterId: {}", masterId, e);
|
||||||
throw new RuntimeException();
|
throw new RuntimeException();
|
||||||
}
|
}
|
||||||
return res;
|
return res;
|
||||||
@ -328,18 +416,19 @@ public class CommonFileServiceImpl implements CommonFileService {
|
|||||||
*/
|
*/
|
||||||
@Transactional
|
@Transactional
|
||||||
public int updateFile_creat(String masterId, String nameSpace, String tableName, MultipartFile item, String uuid) {
|
public int updateFile_creat(String masterId, String nameSpace, String tableName, MultipartFile item, String uuid) {
|
||||||
String fileName = ""; //文件名称
|
String fileName = ""; //文件名称(原始名称,用于显示)
|
||||||
String filePath = ""; //文件存储名称,相同名称在minio中会被覆盖掉
|
String filePath = ""; //文件存储名称(MinIO对象名称),相同名称在minio中会被覆盖掉
|
||||||
int res = 0;
|
int res = 0;
|
||||||
try {
|
try {
|
||||||
fileName = item.getOriginalFilename();
|
// 安全获取文件名(自动检测编码)
|
||||||
// SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd-HH-mm-ss");
|
fileName = getSafeFileName(item);
|
||||||
// filePath = dateFormat.format(new Date()) + fileName;
|
|
||||||
|
|
||||||
fileName = fileName.replace(".xls", "");
|
fileName = fileName.replace(".xls", "");
|
||||||
fileName = fileName.replace(".xlsx", "");
|
fileName = fileName.replace(".xlsx", "");
|
||||||
|
|
||||||
filePath = fileName + uuid + ".xls";
|
// 生成MinIO安全的对象名称:使用uuid(ASCII only)
|
||||||
|
// 不要使用URL编码,MinIO客户端会再次编码导致双重编码问题
|
||||||
|
filePath = uuid + ".xls";
|
||||||
|
|
||||||
InputStream in = item.getInputStream();
|
InputStream in = item.getInputStream();
|
||||||
String contentType = item.getContentType();
|
String contentType = item.getContentType();
|
||||||
@ -351,16 +440,16 @@ public class CommonFileServiceImpl implements CommonFileService {
|
|||||||
commonFile.setMasterid(masterId);
|
commonFile.setMasterid(masterId);
|
||||||
// 20210105 YYJ 用于文件表绑定资料节点用字段 tb_doc_file内和masterId一样
|
// 20210105 YYJ 用于文件表绑定资料节点用字段 tb_doc_file内和masterId一样
|
||||||
// commonFile.setPid(masterId);
|
// commonFile.setPid(masterId);
|
||||||
commonFile.setFilename(fileName);
|
commonFile.setFilename(fileName); // 保存原始文件名用于显示
|
||||||
commonFile.setType(contentType);
|
commonFile.setType(contentType);
|
||||||
//minio用相对路径
|
//minio用相对路径
|
||||||
// commonFile.setFilepath(filePath);
|
// commonFile.setFilepath(filePath);
|
||||||
commonFile.setAbspath(filePath);
|
commonFile.setAbspath(filePath); // 保存MinIO对象名称
|
||||||
commonFile.setInsdt(CommUtil.nowDate());
|
commonFile.setInsdt(CommUtil.nowDate());
|
||||||
commonFile.setSize((int) item.getSize());
|
commonFile.setSize((int) item.getSize());
|
||||||
res = this.insertByTable(tableName, commonFile);
|
res = this.insertByTable(tableName, commonFile);
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
e.printStackTrace();
|
logger.error("Failed to update file (creat) to MinIO for masterId: {}", masterId, e);
|
||||||
throw new RuntimeException();
|
throw new RuntimeException();
|
||||||
}
|
}
|
||||||
return res;
|
return res;
|
||||||
@ -376,13 +465,31 @@ public class CommonFileServiceImpl implements CommonFileService {
|
|||||||
*/
|
*/
|
||||||
@Transactional
|
@Transactional
|
||||||
public int updateFileForFileIn(String masterId, String nameSpace, String tableName, FileIn item) {
|
public int updateFileForFileIn(String masterId, String nameSpace, String tableName, FileIn item) {
|
||||||
String fileName = ""; //文件名称
|
String fileName = ""; //文件名称(原始名称,用于显示)
|
||||||
String filePath = ""; //文件存储名称,相同名称在minio中会被覆盖掉
|
String filePath = ""; //文件存储名称(MinIO对象名称),相同名称在minio中会被覆盖掉
|
||||||
int res = 0;
|
int res = 0;
|
||||||
try {
|
try {
|
||||||
|
// 安全获取文件名(自动检测编码)
|
||||||
fileName = item.getOriginalFilename();
|
fileName = item.getOriginalFilename();
|
||||||
|
if (fileName == null || fileName.isEmpty()) {
|
||||||
|
fileName = "unknown_file";
|
||||||
|
} else {
|
||||||
|
// 检测是否需要进行ISO-8859-1到UTF-8的转换
|
||||||
|
try {
|
||||||
|
String testConvert = new String(fileName.getBytes("ISO-8859-1"), "UTF-8");
|
||||||
|
if (testConvert.matches(".*[\u4e00-\u9fa5].*") && !fileName.matches(".*[\u4e00-\u9fa5].*")) {
|
||||||
|
fileName = testConvert;
|
||||||
|
}
|
||||||
|
} catch (Exception e) {
|
||||||
|
// 转换失败,保持原文件名
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成MinIO安全的对象名称
|
||||||
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd-HH-mm-ss");
|
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd-HH-mm-ss");
|
||||||
filePath = dateFormat.format(new Date()) + fileName;
|
String timestamp = dateFormat.format(new Date());
|
||||||
|
filePath = generateMinioObjectName(fileName, timestamp);
|
||||||
|
|
||||||
InputStream in = item.getInputStream();
|
InputStream in = item.getInputStream();
|
||||||
String contentType = item.getContentType();
|
String contentType = item.getContentType();
|
||||||
minioTemplate.makeBucket(nameSpace);
|
minioTemplate.makeBucket(nameSpace);
|
||||||
@ -393,16 +500,16 @@ public class CommonFileServiceImpl implements CommonFileService {
|
|||||||
commonFile.setMasterid(masterId);
|
commonFile.setMasterid(masterId);
|
||||||
// 20210105 YYJ 用于文件表绑定资料节点用字段 tb_doc_file内和masterId一样
|
// 20210105 YYJ 用于文件表绑定资料节点用字段 tb_doc_file内和masterId一样
|
||||||
// commonFile.setPid(masterId);
|
// commonFile.setPid(masterId);
|
||||||
commonFile.setFilename(fileName);
|
commonFile.setFilename(fileName); // 保存原始文件名用于显示
|
||||||
commonFile.setType(contentType);
|
commonFile.setType(contentType);
|
||||||
//minio用相对路径
|
//minio用相对路径
|
||||||
// commonFile.setFilepath(filePath);
|
// commonFile.setFilepath(filePath);
|
||||||
commonFile.setAbspath(filePath);
|
commonFile.setAbspath(filePath); // 保存MinIO对象名称
|
||||||
commonFile.setInsdt(CommUtil.nowDate());
|
commonFile.setInsdt(CommUtil.nowDate());
|
||||||
commonFile.setSize((int) item.getSize());
|
commonFile.setSize((int) item.getSize());
|
||||||
res = this.insertByTable(tableName, commonFile);
|
res = this.insertByTable(tableName, commonFile);
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
e.printStackTrace();
|
logger.error("Failed to update file (FileIn) to MinIO for masterId: {}", masterId, e);
|
||||||
throw new RuntimeException();
|
throw new RuntimeException();
|
||||||
}
|
}
|
||||||
return res;
|
return res;
|
||||||
|
|||||||
@ -5,6 +5,8 @@ import io.minio.ObjectStat;
|
|||||||
import io.minio.ServerSideEncryption;
|
import io.minio.ServerSideEncryption;
|
||||||
import io.minio.errors.*;
|
import io.minio.errors.*;
|
||||||
import io.minio.messages.Bucket;
|
import io.minio.messages.Bucket;
|
||||||
|
import org.slf4j.Logger;
|
||||||
|
import org.slf4j.LoggerFactory;
|
||||||
import org.springframework.stereotype.Service;
|
import org.springframework.stereotype.Service;
|
||||||
import org.xmlpull.v1.XmlPullParserException;
|
import org.xmlpull.v1.XmlPullParserException;
|
||||||
|
|
||||||
@ -18,16 +20,42 @@ import java.util.Map;
|
|||||||
|
|
||||||
@Service
|
@Service
|
||||||
public class MinioTemplate {
|
public class MinioTemplate {
|
||||||
|
|
||||||
|
private static final Logger logger = LoggerFactory.getLogger(MinioTemplate.class);
|
||||||
|
|
||||||
@Resource
|
@Resource
|
||||||
private MinioClient minioClient;
|
private MinioClient minioClient;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 测试MinIO服务是否可用
|
||||||
|
* @return true-可用 false-不可用
|
||||||
|
*/
|
||||||
|
public boolean testConnection() {
|
||||||
|
try {
|
||||||
|
minioClient.listBuckets();
|
||||||
|
logger.info("MinIO连接测试成功");
|
||||||
|
return true;
|
||||||
|
} catch (InvalidResponseException e) {
|
||||||
|
logger.error("MinIO连接失败: 收到非XML响应。请检查配置的端口是否正确(应为S3 API端口9000,而非Console端口9001)。错误信息: {}", e.getMessage());
|
||||||
|
return false;
|
||||||
|
} catch (Exception e) {
|
||||||
|
logger.error("MinIO连接失败: {}。请确认MinIO服务已启动,配置的endpoint地址和端口正确。", e.getMessage());
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 检查文件存储桶是否存在
|
* 检查文件存储桶是否存在
|
||||||
* @param bucketName
|
* @param bucketName
|
||||||
* @return
|
* @return
|
||||||
*/
|
*/
|
||||||
public boolean bucketExists(String bucketName) throws InvalidKeyException, InvalidBucketNameException, NoSuchAlgorithmException, InsufficientDataException, NoResponseException, ErrorResponseException, InternalException, InvalidResponseException, IOException, XmlPullParserException{
|
public boolean bucketExists(String bucketName) throws InvalidKeyException, InvalidBucketNameException, NoSuchAlgorithmException, InsufficientDataException, NoResponseException, ErrorResponseException, InternalException, InvalidResponseException, IOException, XmlPullParserException{
|
||||||
|
try {
|
||||||
return minioClient.bucketExists(bucketName);
|
return minioClient.bucketExists(bucketName);
|
||||||
|
} catch (InvalidResponseException e) {
|
||||||
|
logger.error("MinIO bucketExists失败: 收到非XML响应。请检查配置的端口是否正确(应为S3 API端口9000,而非Console端口9001)。bucketName: {}", bucketName);
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -36,8 +64,14 @@ public class MinioTemplate {
|
|||||||
* @param bucketName bucket名称
|
* @param bucketName bucket名称
|
||||||
*/
|
*/
|
||||||
public void makeBucket(String bucketName) throws InvalidKeyException, InvalidBucketNameException, NoSuchAlgorithmException, InsufficientDataException, NoResponseException, ErrorResponseException, InternalException, InvalidResponseException, RegionConflictException, IOException, XmlPullParserException {
|
public void makeBucket(String bucketName) throws InvalidKeyException, InvalidBucketNameException, NoSuchAlgorithmException, InsufficientDataException, NoResponseException, ErrorResponseException, InternalException, InvalidResponseException, RegionConflictException, IOException, XmlPullParserException {
|
||||||
|
try {
|
||||||
if (!bucketExists(bucketName)) {
|
if (!bucketExists(bucketName)) {
|
||||||
minioClient.makeBucket(bucketName);
|
minioClient.makeBucket(bucketName);
|
||||||
|
logger.info("成功创建MinIO存储桶: {}", bucketName);
|
||||||
|
}
|
||||||
|
} catch (InvalidResponseException e) {
|
||||||
|
logger.error("MinIO makeBucket失败: 收到非XML响应。请检查配置的端口是否正确(应为S3 API端口9000,而非Console端口9001)。bucketName: {}", bucketName);
|
||||||
|
throw e;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -97,11 +131,12 @@ public class MinioTemplate {
|
|||||||
* @param objectName 文件名称
|
* @param objectName 文件名称
|
||||||
* @param stream 文件流
|
* @param stream 文件流
|
||||||
* @param size 大小
|
* @param size 大小
|
||||||
* @param contextType 类型
|
* @param contentType 类型
|
||||||
*/
|
*/
|
||||||
public void putObject(String bucketName, String objectName, InputStream stream, Long size,
|
public void putObject(String bucketName, String objectName, InputStream stream, Long size,
|
||||||
Map<String, String> headerMap, ServerSideEncryption sse, String contentType) throws Exception {
|
Map<String, String> headerMap, ServerSideEncryption sse, String contentType) throws Exception {
|
||||||
minioClient.putObject(bucketName,objectName,stream,size, headerMap, sse, contentType);
|
minioClient.putObject(bucketName,objectName,stream,size, headerMap, sse, contentType);
|
||||||
|
logger.debug("文件上传成功: bucketName={}, objectName={}", bucketName, objectName);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
@ -249,7 +249,7 @@ public class RptCreateServiceImpl implements RptCreateService {
|
|||||||
converter.setOutputRowNumbers(false);// 不显示行的表头
|
converter.setOutputRowNumbers(false);// 不显示行的表头
|
||||||
|
|
||||||
//重新创建workbook
|
//重新创建workbook
|
||||||
HSSFWorkbook wb = CreatNewWorkBook(sheet, sheetname, id, layerType);
|
HSSFWorkbook wb = CreatNewWorkBook(sheet, sheetname, id, layerType, workBook);
|
||||||
converter.processWorkbook(wb);
|
converter.processWorkbook(wb);
|
||||||
|
|
||||||
writer = new StringWriter();
|
writer = new StringWriter();
|
||||||
@ -283,7 +283,7 @@ public class RptCreateServiceImpl implements RptCreateService {
|
|||||||
converter.setOutputColumnHeaders(false);// 不显示列的表头
|
converter.setOutputColumnHeaders(false);// 不显示列的表头
|
||||||
converter.setOutputRowNumbers(false);// 不显示行的表头
|
converter.setOutputRowNumbers(false);// 不显示行的表头
|
||||||
//重新创建workbook
|
//重新创建workbook
|
||||||
HSSFWorkbook wb = CreatNewWorkBook(sheet, sheetname, id, layerType);
|
HSSFWorkbook wb = CreatNewWorkBook(sheet, sheetname, id, layerType, workBook);
|
||||||
converter.processWorkbook(wb);
|
converter.processWorkbook(wb);
|
||||||
writer = new StringWriter();
|
writer = new StringWriter();
|
||||||
Transformer serializer = TransformerFactory.newInstance().newTransformer();
|
Transformer serializer = TransformerFactory.newInstance().newTransformer();
|
||||||
@ -397,7 +397,7 @@ public class RptCreateServiceImpl implements RptCreateService {
|
|||||||
return list;
|
return list;
|
||||||
}
|
}
|
||||||
|
|
||||||
private HSSFWorkbook CreatNewWorkBook(Sheet sheet, String sheetname, String id, String layerType) throws IOException {
|
private HSSFWorkbook CreatNewWorkBook(Sheet sheet, String sheetname, String id, String layerType, Workbook sourceWorkbook) throws IOException {
|
||||||
// Drawing draw = sheet.createDrawingPatriarch();//初始化批注
|
// Drawing draw = sheet.createDrawingPatriarch();//初始化批注
|
||||||
// Comment comment = draw.createCellComment(new HSSFClientAnchor());
|
// Comment comment = draw.createCellComment(new HSSFClientAnchor());
|
||||||
// comment.setString(new HSSFRichTextString("请在平台上查看备注"));//设置批注内容
|
// comment.setString(new HSSFRichTextString("请在平台上查看备注"));//设置批注内容
|
||||||
@ -458,15 +458,15 @@ public class RptCreateServiceImpl implements RptCreateService {
|
|||||||
cellStyle = wbCreat.createCellStyle();
|
cellStyle = wbCreat.createCellStyle();
|
||||||
|
|
||||||
List<Integer> int1 = getMergedRegionValue(sheetCreat, i, j);
|
List<Integer> int1 = getMergedRegionValue(sheetCreat, i, j);
|
||||||
if (int1 != null && int1.size() > 0) {
|
if (!int1.isEmpty()) {
|
||||||
for (int k = int1.get(0); k <= int1.get(1); k++) {
|
for (int k = int1.get(0); k <= int1.get(1); k++) {
|
||||||
if (row.getCell(k) != null && !row.getCell(k).equals("")) {
|
if (row.getCell(k) != null && !row.getCell(k).equals("")) {
|
||||||
cellStyle.cloneStyleFrom(row.getCell(k).getCellStyle());
|
copyCellStyle(wbCreat, cellStyle, row.getCell(k).getCellStyle(), sourceWorkbook);
|
||||||
rowCreat.createCell(k).setCellStyle(cellStyle);
|
rowCreat.createCell(k).setCellStyle(cellStyle);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
cellStyle.cloneStyleFrom(row.getCell(j).getCellStyle());
|
copyCellStyle(wbCreat, cellStyle, row.getCell(j).getCellStyle(), sourceWorkbook);
|
||||||
rowCreat.createCell(j).setCellStyle(cellStyle);
|
rowCreat.createCell(j).setCellStyle(cellStyle);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -482,13 +482,13 @@ public class RptCreateServiceImpl implements RptCreateService {
|
|||||||
break;
|
break;
|
||||||
case NUMERIC:
|
case NUMERIC:
|
||||||
cellStyle = wbCreat.createCellStyle();
|
cellStyle = wbCreat.createCellStyle();
|
||||||
cellStyle.cloneStyleFrom(row.getCell(j).getCellStyle());
|
copyCellStyle(wbCreat, cellStyle, row.getCell(j).getCellStyle(), sourceWorkbook);
|
||||||
rowCreat.createCell(j).setCellStyle(cellStyle);
|
rowCreat.createCell(j).setCellStyle(cellStyle);
|
||||||
rowCreat.getCell(j).setCellValue(row.getCell(j).getNumericCellValue());
|
rowCreat.getCell(j).setCellValue(row.getCell(j).getNumericCellValue());
|
||||||
break;
|
break;
|
||||||
case FORMULA:
|
case FORMULA:
|
||||||
cellStyle = wbCreat.createCellStyle();
|
cellStyle = wbCreat.createCellStyle();
|
||||||
cellStyle.cloneStyleFrom(row.getCell(j).getCellStyle());
|
copyCellStyle(wbCreat, cellStyle, row.getCell(j).getCellStyle(), sourceWorkbook);
|
||||||
rowCreat.createCell(j).setCellStyle(cellStyle);
|
rowCreat.createCell(j).setCellStyle(cellStyle);
|
||||||
//此处为字体大小样式 不需要 注释即可
|
//此处为字体大小样式 不需要 注释即可
|
||||||
// cellStyle.setFont(headfont);
|
// cellStyle.setFont(headfont);
|
||||||
@ -501,8 +501,7 @@ public class RptCreateServiceImpl implements RptCreateService {
|
|||||||
/**
|
/**
|
||||||
* 下面为获取excle中的小数位
|
* 下面为获取excle中的小数位
|
||||||
*/
|
*/
|
||||||
HSSFCellStyle hssVal = (HSSFCellStyle) row.getCell(j).getCellStyle();
|
String excelValStyle = row.getCell(j).getCellStyle().getDataFormatString();
|
||||||
String excelValStyle = hssVal.getDataFormatString();
|
|
||||||
if (excelValStyle != null && excelValStyle.contains("_")) {
|
if (excelValStyle != null && excelValStyle.contains("_")) {
|
||||||
String result = excelValStyle;
|
String result = excelValStyle;
|
||||||
if (excelValStyle.contains("[Red]")) {
|
if (excelValStyle.contains("[Red]")) {
|
||||||
@ -560,7 +559,7 @@ public class RptCreateServiceImpl implements RptCreateService {
|
|||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
cellStyle = wbCreat.createCellStyle();
|
cellStyle = wbCreat.createCellStyle();
|
||||||
cellStyle.cloneStyleFrom(row.getCell(j).getCellStyle());
|
copyCellStyle(wbCreat, cellStyle, row.getCell(j).getCellStyle(), sourceWorkbook);
|
||||||
rowCreat.createCell(j).setCellStyle(cellStyle);
|
rowCreat.createCell(j).setCellStyle(cellStyle);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -580,6 +579,75 @@ public class RptCreateServiceImpl implements RptCreateService {
|
|||||||
return wbCreat;
|
return wbCreat;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Copy cell style from source (HSSF or XSSF) to target HSSF cell style
|
||||||
|
* This method manually copies style properties to avoid the
|
||||||
|
* "Can only clone from one HSSFCellStyle to another" error
|
||||||
|
*
|
||||||
|
* @param wbCreat the target HSSFWorkbook
|
||||||
|
* @param targetStyle the target HSSFCellStyle to copy to
|
||||||
|
* @param sourceStyle the source CellStyle (can be HSSFCellStyle or XSSFCellStyle)
|
||||||
|
* @param sourceWorkbook the source Workbook (can be HSSFWorkbook or XSSFWorkbook)
|
||||||
|
*/
|
||||||
|
private void copyCellStyle(HSSFWorkbook wbCreat, HSSFCellStyle targetStyle, CellStyle sourceStyle, Workbook sourceWorkbook) {
|
||||||
|
try {
|
||||||
|
// Copy alignment
|
||||||
|
targetStyle.setAlignment(sourceStyle.getAlignment());
|
||||||
|
targetStyle.setVerticalAlignment(sourceStyle.getVerticalAlignment());
|
||||||
|
|
||||||
|
// Copy border
|
||||||
|
targetStyle.setBorderBottom(sourceStyle.getBorderBottom());
|
||||||
|
targetStyle.setBorderLeft(sourceStyle.getBorderLeft());
|
||||||
|
targetStyle.setBorderRight(sourceStyle.getBorderRight());
|
||||||
|
targetStyle.setBorderTop(sourceStyle.getBorderTop());
|
||||||
|
|
||||||
|
// Copy border colors
|
||||||
|
targetStyle.setBottomBorderColor(sourceStyle.getBottomBorderColor());
|
||||||
|
targetStyle.setLeftBorderColor(sourceStyle.getLeftBorderColor());
|
||||||
|
targetStyle.setRightBorderColor(sourceStyle.getRightBorderColor());
|
||||||
|
targetStyle.setTopBorderColor(sourceStyle.getTopBorderColor());
|
||||||
|
|
||||||
|
// Copy fill
|
||||||
|
targetStyle.setFillBackgroundColor(sourceStyle.getFillBackgroundColor());
|
||||||
|
targetStyle.setFillForegroundColor(sourceStyle.getFillForegroundColor());
|
||||||
|
targetStyle.setFillPattern(sourceStyle.getFillPattern());
|
||||||
|
|
||||||
|
// Copy data format
|
||||||
|
if (sourceStyle.getDataFormatString() != null) {
|
||||||
|
DataFormat dataFormat = wbCreat.createDataFormat();
|
||||||
|
targetStyle.setDataFormat(dataFormat.getFormat(sourceStyle.getDataFormatString()));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Copy font - get font from source workbook and create equivalent in target workbook
|
||||||
|
try {
|
||||||
|
Font sourceFont = sourceWorkbook.getFontAt(sourceStyle.getFontIndex());
|
||||||
|
if (sourceFont != null) {
|
||||||
|
Font newFont = wbCreat.createFont();
|
||||||
|
newFont.setFontName(sourceFont.getFontName());
|
||||||
|
newFont.setFontHeightInPoints(sourceFont.getFontHeightInPoints());
|
||||||
|
newFont.setBold(sourceFont.getBold());
|
||||||
|
newFont.setItalic(sourceFont.getItalic());
|
||||||
|
newFont.setUnderline(sourceFont.getUnderline());
|
||||||
|
newFont.setColor(sourceFont.getColor());
|
||||||
|
targetStyle.setFont(newFont);
|
||||||
|
}
|
||||||
|
} catch (Exception fontEx) {
|
||||||
|
// If font copy fails, use default font
|
||||||
|
}
|
||||||
|
|
||||||
|
// Copy other properties
|
||||||
|
targetStyle.setHidden(sourceStyle.getHidden());
|
||||||
|
targetStyle.setLocked(sourceStyle.getLocked());
|
||||||
|
targetStyle.setWrapText(sourceStyle.getWrapText());
|
||||||
|
targetStyle.setIndention(sourceStyle.getIndention());
|
||||||
|
targetStyle.setRotation(sourceStyle.getRotation());
|
||||||
|
|
||||||
|
} catch (Exception e) {
|
||||||
|
// If style copy fails, just use default style
|
||||||
|
// This prevents the entire process from failing
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* excel97中颜色转化为uof颜色
|
* excel97中颜色转化为uof颜色
|
||||||
*
|
*
|
||||||
|
|||||||
@ -118,8 +118,8 @@ public class RptLogServiceImpl implements RptLogService {
|
|||||||
/*
|
/*
|
||||||
* 传到minio
|
* 传到minio
|
||||||
*/
|
*/
|
||||||
|
String rptname = path.replaceAll("\\.xlsx", "").replaceAll("\\.xls", "");
|
||||||
try {
|
try {
|
||||||
String rptname = path.replaceAll(".xls", "");
|
|
||||||
String showname = rptname;
|
String showname = rptname;
|
||||||
InputStream stream = null;
|
InputStream stream = null;
|
||||||
//获取类加载的根路径
|
//获取类加载的根路径
|
||||||
|
|||||||
@ -250,7 +250,9 @@ public class SafetyFilesService implements CommService<SafetyFiles> {
|
|||||||
int len = 0;
|
int len = 0;
|
||||||
byte[] buffer = new byte[1024];
|
byte[] buffer = new byte[1024];
|
||||||
ServletOutputStream out = response.getOutputStream();
|
ServletOutputStream out = response.getOutputStream();
|
||||||
response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(file.getOriginalFileName(), "UTF-8"));
|
// 使用UTF-8编码处理中文文件名
|
||||||
|
String encodedFileName = URLEncoder.encode(file.getOriginalFileName(), "UTF-8").replaceAll("\\+", "%20");
|
||||||
|
response.setHeader("Content-Disposition", "attachment;filename*=UTF-8''" + encodedFileName);
|
||||||
response.getOutputStream();
|
response.getOutputStream();
|
||||||
while ((len = input.read(buffer)) > 0) {
|
while ((len = input.read(buffer)) > 0) {
|
||||||
out.write(buffer, 0, len);
|
out.write(buffer, 0, len);
|
||||||
|
|||||||
@ -1,3 +1,13 @@
|
|||||||
minio.endPoint=http://122.51.194.184:19000
|
#minio.endPoint=http://122.51.194.184:19000
|
||||||
minio.accessKey=minio
|
#minio.accessKey=minio
|
||||||
minio.secretKey=BHwChyGLt8FkaA7H
|
#minio.secretKey=BHwChyGLt8FkaA7H
|
||||||
|
|
||||||
|
# MinIO配置说明:
|
||||||
|
# - 端口9000: S3 API端口(程序访问使用此端口)
|
||||||
|
# - 端口9001: Console端口(Web管理界面)
|
||||||
|
# 请确保MinIO服务已启动,并根据实际情况修改endpoint地址
|
||||||
|
|
||||||
|
# 本地开发环境配置
|
||||||
|
minio.endPoint=http://127.0.0.1:9000
|
||||||
|
minio.accessKey=minioadmin
|
||||||
|
minio.secretKey=minioadmin
|
||||||
|
|||||||
@ -2,11 +2,11 @@
|
|||||||
#\u9879\u76EE\u662F\u5426\u4F7F\u7528mqtt 0\uFF1A\u542F\u52A8 1\uFF1A\u7981\u7528
|
#\u9879\u76EE\u662F\u5426\u4F7F\u7528mqtt 0\uFF1A\u542F\u52A8 1\uFF1A\u7981\u7528
|
||||||
mqtt.status=0
|
mqtt.status=0
|
||||||
#tcp
|
#tcp
|
||||||
mqtt.host_tcp=tcp://127.0.0.1:1883
|
mqtt.host_tcp=tcp://122.51.194.184:1883
|
||||||
#websocket
|
#websocket
|
||||||
mqtt.host_ws=ws://127.0.0.1:8083/mqtt
|
mqtt.host_ws=ws://122.51.194.184:8083/mqtt
|
||||||
#http
|
#http
|
||||||
mqtt.host_http=http://127.0.0.1:18083
|
mqtt.host_http=http://122.51.194.184:18083
|
||||||
#\u00E7\u0094\u00A8\u00E6\u0088\u00B7\u00E5\u0090\u008D
|
#\u00E7\u0094\u00A8\u00E6\u0088\u00B7\u00E5\u0090\u008D
|
||||||
mqtt.username=dmbroker
|
mqtt.username=dmbroker
|
||||||
#\u00E5\u00AF\u0086\u00E7\u00A0\u0081
|
#\u00E5\u00AF\u0086\u00E7\u00A0\u0081
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -494,93 +494,11 @@ function getMpPic() {
|
|||||||
function initMenu() {
|
function initMenu() {
|
||||||
var menu = $('#menu');
|
var menu = $('#menu');
|
||||||
|
|
||||||
// 定义一个内部函数来执行DOM操作添加菜单
|
|
||||||
var appendS223Menu = function() {
|
|
||||||
var $menu = $('#menu');
|
|
||||||
|
|
||||||
// 查找“纳管企业清单”所在的菜单项
|
|
||||||
// 情况1: 一级菜单,名称在 span 中
|
|
||||||
var $targetSpan = $menu.find("span").filter(function() {
|
|
||||||
return $(this).text().trim() === '纳管企业清单';
|
|
||||||
});
|
|
||||||
|
|
||||||
var $targetLi = null;
|
|
||||||
|
|
||||||
if ($targetSpan.length > 0) {
|
|
||||||
$targetLi = $targetSpan.closest('li');
|
|
||||||
} else {
|
|
||||||
// 情况2: 二级菜单,名称直接在 a 标签中(可能是文本节点)
|
|
||||||
var $targetLink = $menu.find('a').filter(function() {
|
|
||||||
// 克隆节点,移除子元素(如图标),只获取自身的文本
|
|
||||||
return $(this).clone().children().remove().end().text().trim() === '纳管企业清单';
|
|
||||||
});
|
|
||||||
if ($targetLink.length > 0) {
|
|
||||||
$targetLi = $targetLink.closest('li');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if ($targetLi && $targetLi.length > 0) {
|
|
||||||
var $treeviewMenu = $targetLi.find('> .treeview-menu');
|
|
||||||
|
|
||||||
// 确保 treeview-menu 存在
|
|
||||||
if ($treeviewMenu.length === 0) {
|
|
||||||
$treeviewMenu = $('<ul class="treeview-menu"></ul>');
|
|
||||||
$targetLi.append($treeviewMenu);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查是否已经添加过,防止重复添加
|
|
||||||
// 注意:新菜单项可能直接是文本,也可能包含 i 标签
|
|
||||||
var exists = false;
|
|
||||||
$treeviewMenu.find('li').each(function() {
|
|
||||||
if ($(this).text().indexOf('新源头GIS管理') > -1) {
|
|
||||||
exists = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!exists) {
|
|
||||||
// 根据层级决定样式,通常二级或三级菜单项不需要 span 包裹文字,或者保持一致
|
|
||||||
// 这里的样式参考了 menuitems.jsp 中的 Level 3: <li><a ...><i ...></i> Name</a></li>
|
|
||||||
// 使用 addTab 函数而不是 refreshPage,以支持在 tab 页中打开(如果系统支持)或者在当前 iframe 打开
|
|
||||||
// 检查 addTab 是否存在,如果存在则使用它,否则回退到 refreshPage
|
|
||||||
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,这会刷新整个页面。
|
|
||||||
// 如果目标是内嵌,我们应该寻找 iframe 的加载方式。
|
|
||||||
// 查看 comm.js 其他部分,发现有 refreshPage(url) 实现为 location.replace(url)。
|
|
||||||
// 如果要内嵌,通常是设置某个 iframe 的 src。
|
|
||||||
// 假设主内容区域是一个 iframe,或者支持通过 data-url 加载。
|
|
||||||
// 暂时使用 refreshPage,但确认它是在当前窗口(iframe)中加载,而不是弹出新窗口。
|
|
||||||
// 用户反馈说“不要新开特么弹窗”,可能是指 window.open 或者 target="_blank"。
|
|
||||||
// refreshPage 使用 location.replace,是在当前窗口打开。
|
|
||||||
// 如果当前窗口是整个 index 页面,那就会刷新整个页面。
|
|
||||||
// 如果是 SPA 或者 iframe 架构,我们需要找到正确的方法。
|
|
||||||
|
|
||||||
// 观察 menuitems.jsp,发现二级菜单使用 addTab('${cumcl2.id}','${cumcl2.name}','${cumcl2.location}')
|
|
||||||
// 所以我们应该优先使用 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);
|
|
||||||
|
|
||||||
// 确保父菜单是展开状态(可选)
|
|
||||||
// $targetLi.addClass('active menu-open');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (sessionStorage.menu != undefined) {
|
if (sessionStorage.menu != undefined) {
|
||||||
$('#menu').html(sessionStorage.menu);
|
$('#menu').html(sessionStorage.menu);
|
||||||
|
|
||||||
// 即使是缓存加载,也尝试添加新菜单
|
// 更新大屏菜单的onclick事件,确保使用全屏功能
|
||||||
appendS223Menu();
|
updateBigScreenMenuEvents();
|
||||||
|
|
||||||
if (sessionStorage.m1 != undefined) {
|
if (sessionStorage.m1 != undefined) {
|
||||||
$('#' + sessionStorage.m1).addClass('treeview active menu-open')
|
$('#' + sessionStorage.m1).addClass('treeview active menu-open')
|
||||||
@ -594,29 +512,8 @@ function initMenu() {
|
|||||||
//return;
|
//return;
|
||||||
} else {
|
} else {
|
||||||
$.post(ext.contextPath + "/user/showMenuListByCu.do", {}, function (result) {
|
$.post(ext.contextPath + "/user/showMenuListByCu.do", {}, function (result) {
|
||||||
var bigScreenHtml = '<li class="treeview">' +
|
|
||||||
'<a href="#">' +
|
|
||||||
'<i class="fa fa-desktop"></i> <span>大屏展示</span>' +
|
|
||||||
'<span class="pull-right-container">' +
|
|
||||||
'<i class="fa fa-angle-left pull-right"></i>' +
|
|
||||||
'</span>' +
|
|
||||||
'</a>' +
|
|
||||||
'<ul class="treeview-menu">' +
|
|
||||||
'<li><a href="javascript:void(0);" onclick="window.open(\'' + ext.contextPath + '/jsp/bigScreen.jsp\', \'_blank\');"><i class="fa fa-circle-o"></i> 水厂大屏</a></li>' +
|
|
||||||
'<li><a href="javascript:void(0);" onclick="window.open(\'' + ext.contextPath + '/jsp/bigScreen2.jsp\', \'_blank\');"><i class="fa fa-circle-o"></i> 区域管线大屏</a></li>' +
|
|
||||||
'<li><a href="javascript:void(0);" onclick="window.open(\'' + ext.contextPath + '/jsp/bigScreen3.jsp\', \'_blank\');"><i class="fa fa-circle-o"></i> 排污户大屏</a></li>' +
|
|
||||||
'</ul>' +
|
|
||||||
'</li>';
|
|
||||||
result = result + bigScreenHtml;
|
|
||||||
// 替换源头GIS管理页面链接为JSP
|
|
||||||
result = result.replace('newSourceGISPage.html', 'newSourceGISPage.jsp');
|
|
||||||
result = result.replace('newGIS.html', 'newSourceGISPage.jsp');
|
|
||||||
|
|
||||||
$('#menu').html(result);
|
$('#menu').html(result);
|
||||||
|
|
||||||
// 在设置HTML后执行DOM注入
|
|
||||||
appendS223Menu();
|
|
||||||
|
|
||||||
sessionStorage.setItem("menu", $('#menu').html()); // 保存修改后的HTML到sessionStorage
|
sessionStorage.setItem("menu", $('#menu').html()); // 保存修改后的HTML到sessionStorage
|
||||||
|
|
||||||
if (sessionStorage.m1 != undefined) {
|
if (sessionStorage.m1 != undefined) {
|
||||||
@ -652,6 +549,51 @@ function initMenuScroll(menu) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 获取浏览器当前缩放比例
|
||||||
|
* @returns 100为100%
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* 打开全屏窗口
|
||||||
|
* @param url 页面URL
|
||||||
|
*/
|
||||||
|
function openFullScreenWindow(url) {
|
||||||
|
// 打开新窗口,使用屏幕全部尺寸
|
||||||
|
var width = screen.width;
|
||||||
|
var height = screen.height;
|
||||||
|
var newWindow = window.open(url, '_blank',
|
||||||
|
'width=' + width + ',height=' + height +
|
||||||
|
',top=0,left=0,menubar=no,toolbar=no,location=no,status=no,resizable=yes,scrollbars=no');
|
||||||
|
|
||||||
|
// 尝试让新窗口获得焦点
|
||||||
|
if (newWindow) {
|
||||||
|
newWindow.focus();
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新大屏菜单的点击事件,确保使用全屏功能
|
||||||
|
* 用于处理缓存菜单的情况
|
||||||
|
*/
|
||||||
|
function updateBigScreenMenuEvents() {
|
||||||
|
// 查找所有大屏菜单项并更新onclick事件
|
||||||
|
$('#menu a').each(function() {
|
||||||
|
var text = $(this).text().trim();
|
||||||
|
var url = '';
|
||||||
|
if (text === '水厂大屏') {
|
||||||
|
url = ext.contextPath + '/jsp/bigScreen.jsp';
|
||||||
|
} else if (text === '区域管线大屏') {
|
||||||
|
url = ext.contextPath + '/jsp/bigScreen2.jsp';
|
||||||
|
} else if (text === '排污户大屏') {
|
||||||
|
url = ext.contextPath + '/jsp/bigScreen3.jsp';
|
||||||
|
}
|
||||||
|
if (url) {
|
||||||
|
$(this).attr('href', 'javascript:void(0);');
|
||||||
|
$(this).attr('onclick', 'openFullScreenWindow(\'' + url + '\');');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
/** 获取浏览器当前缩放比例
|
/** 获取浏览器当前缩放比例
|
||||||
* @returns 100为100%
|
* @returns 100为100%
|
||||||
*/
|
*/
|
||||||
|
|||||||
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,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%;
|
||||||
@ -16,55 +24,665 @@
|
|||||||
.screen-container {
|
.screen-container {
|
||||||
width: 6500px;
|
width: 6500px;
|
||||||
height: 1800px;
|
height: 1800px;
|
||||||
background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png');
|
background-image: url('<%=request.getContextPath()%>/IMG/screen1.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;
|
||||||
|
}
|
||||||
|
/* 全屏提示遮罩 */
|
||||||
|
.fullscreen-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.9);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 9999;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content h2 {
|
||||||
|
font-size: 48px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #46F2FF;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content p {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #7ef3ff;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content .icon {
|
||||||
|
font-size: 80px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="screen-container">
|
<!-- 全屏提示遮罩 -->
|
||||||
<!-- <div class="val-6040">6040</div>
|
<div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">
|
||||||
<div class="val-4197">4197</div>
|
<div class="tip-content">
|
||||||
<div class="val-12356">12356</div> -->
|
<div class="icon">🖥️</div>
|
||||||
|
<h2>点击进入全屏展示</h2>
|
||||||
|
<p>按 ESC 键可退出全屏</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screen-container">
|
||||||
|
<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%" /> -->
|
||||||
|
<img src='<%=request.getContextPath()%>/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 enterFullscreen() {
|
||||||
|
var elem = document.documentElement;
|
||||||
|
if (elem.requestFullscreen) {
|
||||||
|
elem.requestFullscreen();
|
||||||
|
} else if (elem.webkitRequestFullscreen) { /* Safari */
|
||||||
|
elem.webkitRequestFullscreen();
|
||||||
|
} else if (elem.msRequestFullscreen) { /* IE11 */
|
||||||
|
elem.msRequestFullscreen();
|
||||||
|
}
|
||||||
|
// 隐藏提示遮罩
|
||||||
|
document.getElementById('fullscreenOverlay').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听全屏状态变化
|
||||||
|
document.addEventListener('fullscreenchange', function() {
|
||||||
|
var overlay = document.getElementById('fullscreenOverlay');
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
// 退出全屏时显示提示
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.addEventListener('webkitfullscreenchange', function() {
|
||||||
|
var overlay = document.getElementById('fullscreenOverlay');
|
||||||
|
if (!document.webkitFullscreenElement) {
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -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,16 +107,60 @@
|
|||||||
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;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
/* 全屏提示遮罩 */
|
||||||
|
.fullscreen-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.9);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 9999;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content h2 {
|
||||||
|
font-size: 48px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #46F2FF;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content p {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #7ef3ff;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content .icon {
|
||||||
|
font-size: 80px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- 全屏提示遮罩 -->
|
||||||
|
<div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">
|
||||||
|
<div class="tip-content">
|
||||||
|
<div class="icon">🖥️</div>
|
||||||
|
<h2>点击进入全屏展示</h2>
|
||||||
|
<p>按 ESC 键可退出全屏</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<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 +198,179 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// 进入全屏函数
|
||||||
|
function enterFullscreen() {
|
||||||
|
var elem = document.documentElement;
|
||||||
|
if (elem.requestFullscreen) {
|
||||||
|
elem.requestFullscreen();
|
||||||
|
} else if (elem.webkitRequestFullscreen) {
|
||||||
|
elem.webkitRequestFullscreen();
|
||||||
|
} else if (elem.msRequestFullscreen) {
|
||||||
|
elem.msRequestFullscreen();
|
||||||
|
}
|
||||||
|
document.getElementById('fullscreenOverlay').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听全屏状态变化
|
||||||
|
document.addEventListener('fullscreenchange', function() {
|
||||||
|
var overlay = document.getElementById('fullscreenOverlay');
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.addEventListener('webkitfullscreenchange', function() {
|
||||||
|
var overlay = document.getElementById('fullscreenOverlay');
|
||||||
|
if (!document.webkitFullscreenElement) {
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
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 +381,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 +449,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,97 +465,150 @@
|
|||||||
|
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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 {
|
||||||
@ -264,44 +269,110 @@
|
|||||||
z-index: 100;
|
z-index: 100;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
/* 全屏提示遮罩 */
|
||||||
|
.fullscreen-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.9);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 9999;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content h2 {
|
||||||
|
font-size: 48px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #46F2FF;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content p {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #7ef3ff;
|
||||||
|
}
|
||||||
|
.fullscreen-overlay .tip-content .icon {
|
||||||
|
font-size: 80px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- 全屏提示遮罩 -->
|
||||||
|
<div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">
|
||||||
|
<div class="tip-content">
|
||||||
|
<div class="icon">🖥️</div>
|
||||||
|
<h2>点击进入全屏展示</h2>
|
||||||
|
<p>按 ESC 键可退出全屏</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<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 +390,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,12 +406,38 @@
|
|||||||
var currentFocusIndex = 0;
|
var currentFocusIndex = 0;
|
||||||
var rotationTimer = null;
|
var rotationTimer = null;
|
||||||
|
|
||||||
|
// 进入全屏函数
|
||||||
|
function enterFullscreen() {
|
||||||
|
var elem = document.documentElement;
|
||||||
|
if (elem.requestFullscreen) {
|
||||||
|
elem.requestFullscreen();
|
||||||
|
} else if (elem.webkitRequestFullscreen) {
|
||||||
|
elem.webkitRequestFullscreen();
|
||||||
|
} else if (elem.msRequestFullscreen) {
|
||||||
|
elem.msRequestFullscreen();
|
||||||
|
}
|
||||||
|
document.getElementById('fullscreenOverlay').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听全屏状态变化
|
||||||
|
document.addEventListener('fullscreenchange', function() {
|
||||||
|
var overlay = document.getElementById('fullscreenOverlay');
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.addEventListener('webkitfullscreenchange', function() {
|
||||||
|
var overlay = document.getElementById('fullscreenOverlay');
|
||||||
|
if (!document.webkitFullscreenElement) {
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
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);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -372,40 +469,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();
|
||||||
@ -434,10 +541,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 +565,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 +587,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 +850,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,12 +862,12 @@
|
|||||||
// 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");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -691,19 +875,21 @@
|
|||||||
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);
|
||||||
@ -743,16 +929,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 +946,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>
|
||||||
|
|||||||
@ -4,20 +4,6 @@
|
|||||||
function searchMenu(){
|
function searchMenu(){
|
||||||
var search_name = $('#search_name_menu').val();
|
var search_name = $('#search_name_menu').val();
|
||||||
$.post(ext.contextPath+"/user/showMenuListByCu.do" , {search_name:search_name}, function(result) {
|
$.post(ext.contextPath+"/user/showMenuListByCu.do" , {search_name:search_name}, function(result) {
|
||||||
var bigScreenHtml = '<li class="treeview">' +
|
|
||||||
'<a href="#">' +
|
|
||||||
'<i class="fa fa-desktop"></i> <span>大屏展示</span>' +
|
|
||||||
'<span class="pull-right-container">' +
|
|
||||||
'<i class="fa fa-angle-left pull-right"></i>' +
|
|
||||||
'</span>' +
|
|
||||||
'</a>' +
|
|
||||||
'<ul class="treeview-menu">' +
|
|
||||||
'<li><a href="javascript:void(0);" onclick="window.open(\'' + ext.contextPath + '/jsp/bigScreen.jsp\', \'_blank\');"><i class="fa fa-circle-o"></i> 水厂大屏</a></li>' +
|
|
||||||
'<li><a href="javascript:void(0);" onclick="window.open(\'' + ext.contextPath + '/jsp/bigScreen2.jsp\', \'_blank\');"><i class="fa fa-circle-o"></i> 区域管线大屏</a></li>' +
|
|
||||||
'<li><a href="javascript:void(0);" onclick="window.open(\'' + ext.contextPath + '/jsp/bigScreen3.jsp\', \'_blank\');"><i class="fa fa-circle-o"></i> 排污户大屏</a></li>' +
|
|
||||||
'</ul>' +
|
|
||||||
'</li>';
|
|
||||||
result = result + bigScreenHtml;
|
|
||||||
$('#menu').html(result);
|
$('#menu').html(result);
|
||||||
sessionStorage.setItem("menu",result);
|
sessionStorage.setItem("menu",result);
|
||||||
var $li=$('#menu').find("li:first");
|
var $li=$('#menu').find("li:first");
|
||||||
|
|||||||
@ -7,9 +7,9 @@
|
|||||||
<title>源头GIS管理</title>
|
<title>源头GIS管理</title>
|
||||||
|
|
||||||
<!-- Bootstrap CSS -->
|
<!-- Bootstrap CSS -->
|
||||||
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||||
<!-- DateRangePicker CSS -->
|
<!-- DateRangePicker CSS -->
|
||||||
<link rel="stylesheet" href="../../plugins/bootstrap-daterangepicker/daterangepicker.css">
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
html, body {
|
html, body {
|
||||||
@ -198,25 +198,25 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="drawer-sidebar">
|
<div class="drawer-sidebar">
|
||||||
<div class="drawer-nav-item active" onclick="switchTab('tab-sewage', this)">
|
<div class="drawer-nav-item active" onclick="switchTab('tab-sewage', this)">
|
||||||
<img src="../../IMG/icon_wsc.png" class="drawer-nav-icon">污水厂
|
<img src="<%=request.getContextPath()%>/IMG/icon_wsc.png" class="drawer-nav-icon">污水厂
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer-nav-item" onclick="switchTab('tab-pump', this)">
|
<div class="drawer-nav-item" onclick="switchTab('tab-pump', this)">
|
||||||
<img src="../../IMG/icon_bz.png" class="drawer-nav-icon">泵站
|
<img src="<%=request.getContextPath()%>/IMG/icon_bz.png" class="drawer-nav-icon">泵站
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer-nav-item" onclick="switchTab('tab-company', this)">
|
<div class="drawer-nav-item" onclick="switchTab('tab-company', this)">
|
||||||
<img src="../../IMG/icon_qy.png" class="drawer-nav-icon">企业
|
<img src="<%=request.getContextPath()%>/IMG/icon_qy.png" class="drawer-nav-icon">企业
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer-nav-item" onclick="switchTab('tab-pipeline', this)">
|
<div class="drawer-nav-item" onclick="switchTab('tab-pipeline', this)">
|
||||||
<img src="../../IMG/icon_gd.png" class="drawer-nav-icon">管道
|
<img src="<%=request.getContextPath()%>/IMG/icon_gd.png" class="drawer-nav-icon">管道
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer-nav-item" onclick="switchTab('tab-well', this)">
|
<div class="drawer-nav-item" onclick="switchTab('tab-well', this)">
|
||||||
<img src="../../IMG/icon_gj.png" class="drawer-nav-icon">管井
|
<img src="<%=request.getContextPath()%>/IMG/icon_gj.png" class="drawer-nav-icon">管井
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer-nav-item" onclick="switchTab('tab-plan', this)">
|
<div class="drawer-nav-item" onclick="switchTab('tab-plan', this)">
|
||||||
<img src="../../IMG/icon_jh.png" class="drawer-nav-icon">巡检计划
|
<img src="<%=request.getContextPath()%>/IMG/icon_jh.png" class="drawer-nav-icon">巡检计划
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer-nav-item" onclick="switchTab('tab-record', this)">
|
<div class="drawer-nav-item" onclick="switchTab('tab-record', this)">
|
||||||
<img src="../../IMG/icon_jl.png" class="drawer-nav-icon">巡检记录
|
<img src="<%=request.getContextPath()%>/IMG/icon_jl.png" class="drawer-nav-icon">巡检记录
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer-content">
|
<div class="drawer-content">
|
||||||
@ -342,32 +342,18 @@
|
|||||||
|
|
||||||
<div class="well well-sm" style="background: white; border: none; box-shadow: none; padding: 0;">
|
<div class="well well-sm" style="background: white; border: none; box-shadow: none; padding: 0;">
|
||||||
<div class="query-form-group">
|
<div class="query-form-group">
|
||||||
<label>时间范围</label>
|
<label>企业名称/合同编号</label>
|
||||||
<div style="display: flex; align-items: center;">
|
|
||||||
<div class="input-group date">
|
|
||||||
<input type="text" class="form-control input-sm" id="company-time-start" value="2026-01-09 00:00">
|
|
||||||
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
|
|
||||||
</div>
|
|
||||||
<span style="margin: 0 5px;">~</span>
|
|
||||||
<div class="input-group date">
|
|
||||||
<input type="text" class="form-control input-sm" id="company-time-end" value="2026-02-09 17:15">
|
|
||||||
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="query-form-group">
|
|
||||||
<label>企业名称</label>
|
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input type="text" class="form-control" placeholder="请输入企业名称">
|
<input type="text" class="form-control" id="company-search-name" placeholder="请输入企业名称或合同编号">
|
||||||
<span class="input-group-btn">
|
<span class="input-group-btn">
|
||||||
<button class="btn btn-primary" type="button"><i class="glyphicon glyphicon-search"></i> 查询</button>
|
<button class="btn btn-primary" type="button" onclick="searchCompany()"><i class="glyphicon glyphicon-search"></i> 查询</button>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin-bottom: 10px;">
|
<div style="margin-bottom: 10px;">
|
||||||
<label><input type="checkbox" checked> 显示标注</label>
|
<label><input type="checkbox" checked id="company-show-label"> 显示标注</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="max-height: 500px; overflow-y: auto;">
|
<div style="max-height: 500px; overflow-y: auto;">
|
||||||
@ -375,13 +361,16 @@
|
|||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th width="40">序号</th>
|
<th width="40">序号</th>
|
||||||
<th>编号</th>
|
<th>合同编号</th>
|
||||||
<th>名称</th>
|
<th>公司名称</th>
|
||||||
<th>地址</th>
|
<th>地址</th>
|
||||||
<th>污水厂编号</th>
|
<th>所属区域</th>
|
||||||
<th>排放编号</th>
|
<th>所属泵站</th>
|
||||||
<th>日排放量</th>
|
<th>排污许可证编号</th>
|
||||||
<th>日排放点位</th>
|
<th>所属行业</th>
|
||||||
|
<th>实际日排量</th>
|
||||||
|
<th>已关联点位</th>
|
||||||
|
<th>已录入数据</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody id="company-table-body">
|
<tbody id="company-table-body">
|
||||||
@ -636,8 +625,8 @@
|
|||||||
<div id="map-container"></div>
|
<div id="map-container"></div>
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
|
<script src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
|
||||||
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
<script src="<%=request.getContextPath()%>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
<!-- Tianditu Map API -->
|
<!-- Tianditu Map API -->
|
||||||
<!-- 704ebaecb29ce869b41f7d64a88919bc -->
|
<!-- 704ebaecb29ce869b41f7d64a88919bc -->
|
||||||
@ -735,7 +724,30 @@
|
|||||||
var records = [];
|
var records = [];
|
||||||
var markers = [];
|
var markers = [];
|
||||||
|
|
||||||
// Mock API Function
|
// 获取上下文路径
|
||||||
|
var contextPath = '<%=request.getContextPath()%>';
|
||||||
|
|
||||||
|
// 真实API请求函数
|
||||||
|
function apiRequest(url, params) {
|
||||||
|
console.log('API Request:', contextPath + url, params);
|
||||||
|
return new Promise(function(resolve, reject) {
|
||||||
|
$.ajax({
|
||||||
|
url: contextPath + url,
|
||||||
|
type: 'POST',
|
||||||
|
data: params || {},
|
||||||
|
success: function(data) {
|
||||||
|
console.log('API Response:', url, data);
|
||||||
|
resolve(data);
|
||||||
|
},
|
||||||
|
error: function(xhr, status, error) {
|
||||||
|
console.error('API Request Error:', url, error);
|
||||||
|
reject(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock API Function (保留用于没有真实接口的数据)
|
||||||
function mockApiRequest(url, params) {
|
function mockApiRequest(url, params) {
|
||||||
return new Promise(function(resolve, reject) {
|
return new Promise(function(resolve, reject) {
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
@ -826,15 +838,15 @@
|
|||||||
resolve(wls);
|
resolve(wls);
|
||||||
} else if (url === '/api/plan/list') {
|
} else if (url === '/api/plan/list') {
|
||||||
resolve([
|
resolve([
|
||||||
{ id: 1, name: "金山一车间周检", status: "启用", duration: "2小时", interval: "每周", start: "2026-02-01", end: "2026-12-31" },
|
{ id: 1, name: "金山一车间周检", status: "启用", duration: "2小时", interval: "每周", startTime: "2026-02-01", endTime: "2026-12-31" },
|
||||||
{ id: 2, name: "泵站日常巡检", status: "启用", duration: "4小时", interval: "每日", start: "2026-02-01", end: "2026-12-31" },
|
{ id: 2, name: "泵站日常巡检", status: "启用", duration: "4小时", interval: "每日", startTime: "2026-02-01", endTime: "2026-12-31" },
|
||||||
{ id: 3, name: "管网全面排查", status: "停用", duration: "3天", interval: "每季度", start: "2026-01-01", end: "2026-03-31" }
|
{ id: 3, name: "管网全面排查", status: "停用", duration: "3天", interval: "每季度", startTime: "2026-01-01", endTime: "2026-03-31" }
|
||||||
]);
|
]);
|
||||||
} else if (url === '/api/record/list') {
|
} else if (url === '/api/record/list') {
|
||||||
resolve([
|
resolve([
|
||||||
{ id: 1, name: "金山一车间周检", status: "已完成", planStart: "2026-02-03 09:00", planEnd: "2026-02-03 11:00", actualEnd: "2026-02-03 10:45" },
|
{ id: 1, taskName: "金山一车间周检", status: "已完成", planStartTime: "2026-02-03 09:00", planEndTime: "2026-02-03 11:00", actualTime: "2026-02-03 10:45" },
|
||||||
{ id: 2, name: "泵站日常巡检", status: "已完成", planStart: "2026-02-08 08:00", planEnd: "2026-02-08 12:00", actualEnd: "2026-02-08 11:30" },
|
{ id: 2, taskName: "泵站日常巡检", status: "已完成", planStartTime: "2026-02-08 08:00", planEndTime: "2026-02-08 12:00", actualTime: "2026-02-08 11:30" },
|
||||||
{ id: 3, name: "泵站日常巡检", status: "进行中", planStart: "2026-02-11 08:00", planEnd: "2026-02-11 12:00", actualEnd: "-" }
|
{ id: 3, taskName: "泵站日常巡检", status: "进行中", planStartTime: "2026-02-11 08:00", planEndTime: "2026-02-11 12:00", actualTime: "-" }
|
||||||
]);
|
]);
|
||||||
} else {
|
} else {
|
||||||
reject("Unknown API Endpoint");
|
reject("Unknown API Endpoint");
|
||||||
@ -843,44 +855,220 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize Data
|
// 加载企业数据(排污源)
|
||||||
function loadData() {
|
// 接口字段参考 Sewage 实体类和 sewageList.jsp
|
||||||
Promise.all([
|
function loadCompanyData() {
|
||||||
mockApiRequest('/api/sewage/list'),
|
return apiRequest('/sparepart/sewage/getList.do', {
|
||||||
mockApiRequest('/api/pump/list'),
|
page: 1,
|
||||||
mockApiRequest('/api/company/list'),
|
rows: 1000,
|
||||||
mockApiRequest('/api/pipeline/list'),
|
sort: 'contract_order',
|
||||||
mockApiRequest('/api/well/list'),
|
order: 'asc'
|
||||||
mockApiRequest('/api/plan/list'),
|
}).then(function(data) {
|
||||||
mockApiRequest('/api/record/list'),
|
// 接口返回格式: {total: xxx, rows: [...]}
|
||||||
]).then(function(results) {
|
var list = data.rows || [];
|
||||||
sources = results[0];
|
console.log('企业接口返回数据条数:', list.length);
|
||||||
pumpStations = results[1];
|
companies = list.map(function(items) {
|
||||||
companies = results[2];
|
const item = items.company;
|
||||||
pipelines = results[3];
|
// 解析经纬度 (格式: "经度" 或 "经度,纬度")
|
||||||
wells = results[4];
|
var lng = null, lat = null;
|
||||||
plans = results[5];
|
if (item.longitudeLatitude) {
|
||||||
records = results[6];
|
var coords = String(item.longitudeLatitude).split(',');
|
||||||
|
if (coords.length >= 2) {
|
||||||
// Initialize View with default tab (Sewage)
|
lng = parseFloat(coords[0]);
|
||||||
initSewageTable();
|
lat = parseFloat(coords[1]);
|
||||||
initMarkers('sewage');
|
} else if (coords.length === 1) {
|
||||||
|
lng = parseFloat(coords[0]);
|
||||||
// Initialize other tables but they are hidden
|
}
|
||||||
initPumpTable();
|
}
|
||||||
initCompanyTable();
|
// 如果经纬度不完整,从 company 对象获取
|
||||||
initPipelineTable();
|
if ((!lng || !lat) && item.company) {
|
||||||
initWellTable();
|
lng = lng || item.company.longitude;
|
||||||
initPlanTable();
|
lat = lat || item.company.latitude;
|
||||||
initRecordTable();
|
}
|
||||||
|
return {
|
||||||
|
id: item.id,
|
||||||
|
// 合同编号
|
||||||
|
contractNumber: item.contractNumber || '',
|
||||||
|
// 公司名称
|
||||||
|
name: item.name || '',
|
||||||
|
// 地址
|
||||||
|
address: item.address || '',
|
||||||
|
// 所属区域 (company.name)
|
||||||
|
areaName: item.company ? (item.company.name || '') : '',
|
||||||
|
// 所属泵站ID
|
||||||
|
processSectionId: item.processSectionId || '',
|
||||||
|
// 所属泵站名称 (processSection为null时显示空)
|
||||||
|
processSectionName: item.processSection ? (item.processSection.name || '') : '',
|
||||||
|
// 排污许可证编号
|
||||||
|
permitNum: item.permitNum || '',
|
||||||
|
// 排放编号
|
||||||
|
ventNum: item.ventNum || '',
|
||||||
|
// 所属行业
|
||||||
|
trade: item.trade || '',
|
||||||
|
// 实际日排量(吨/天)
|
||||||
|
displacement: item.displacement ? (item.displacement + '吨/天') : '-',
|
||||||
|
// 统一社会信用代码
|
||||||
|
societyNumber: item.societyNumber || '',
|
||||||
|
// 管网所有权单位
|
||||||
|
city: item.city || '',
|
||||||
|
// 联系人
|
||||||
|
username: item.username || '',
|
||||||
|
// 电话
|
||||||
|
phone: item.phone || '',
|
||||||
|
// 经纬度
|
||||||
|
longitudeLatitude: item.longitudeLatitude || '',
|
||||||
|
// 已关联点位
|
||||||
|
point: item._point ? '是' : '否',
|
||||||
|
// 已录入数据
|
||||||
|
input: item._input ? '是' : '否',
|
||||||
|
// 地图坐标
|
||||||
|
lng: lng,
|
||||||
|
lat: lat,
|
||||||
|
// 保留原始数据
|
||||||
|
_raw: item
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return companies;
|
||||||
}).catch(function(err) {
|
}).catch(function(err) {
|
||||||
console.error("Failed to load data:", err);
|
console.error('加载企业数据失败:', err);
|
||||||
alert("数据加载失败,请重试");
|
return [];
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Call loadData instead of inline data definitions
|
// 加载泵站数据(工艺段)
|
||||||
|
function loadPumpData() {
|
||||||
|
return apiRequest('/user/processSection/getProcessSection4Select.do', {
|
||||||
|
companyId: 'JSBZ' // 根据排污源信息页面传参
|
||||||
|
}).then(function(data) {
|
||||||
|
console.log('泵站接口返回原始数据:', data, '类型:', typeof data);
|
||||||
|
// 确保data是数组
|
||||||
|
var dataList = data;
|
||||||
|
if (typeof data === 'string') {
|
||||||
|
try {
|
||||||
|
dataList = JSON.parse(data);
|
||||||
|
} catch(e) {
|
||||||
|
console.error('解析泵站数据失败:', e);
|
||||||
|
dataList = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 接口返回格式: [{id: xxx, text: xxx}, ...] 或 [{text: xxx}, ...]
|
||||||
|
pumpStations = (dataList || []).map(function(item, index) {
|
||||||
|
return {
|
||||||
|
id: item.id || ('pump_' + index),
|
||||||
|
name: item.text || item.name || '',
|
||||||
|
code: item.id || '',
|
||||||
|
level: '-',
|
||||||
|
flow: '-',
|
||||||
|
status: '-',
|
||||||
|
time: '-',
|
||||||
|
// 泵站暂无坐标信息,使用默认位置
|
||||||
|
lng: 121.320000 + index * 0.01,
|
||||||
|
lat: 30.760000 - index * 0.005
|
||||||
|
};
|
||||||
|
});
|
||||||
|
console.log('泵站数据处理后:', pumpStations);
|
||||||
|
return pumpStations;
|
||||||
|
}).catch(function(err) {
|
||||||
|
console.error('加载泵站数据失败:', err);
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize Data - 只加载默认Tab(污水厂)的数据
|
||||||
|
function loadData() {
|
||||||
|
// 初始加载污水厂数据
|
||||||
|
mockApiRequest('/api/sewage/list').then(function(data) {
|
||||||
|
sources = data;
|
||||||
|
initSewageTable();
|
||||||
|
initMarkers('sewage');
|
||||||
|
}).catch(function(err) {
|
||||||
|
console.error("Failed to load sewage data:", err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据加载状态标记
|
||||||
|
var dataLoaded = {
|
||||||
|
sewage: true, // 初始已加载
|
||||||
|
pump: false,
|
||||||
|
company: false,
|
||||||
|
pipeline: false,
|
||||||
|
well: false,
|
||||||
|
plan: false,
|
||||||
|
record: false
|
||||||
|
};
|
||||||
|
|
||||||
|
// 按Tab类型加载数据
|
||||||
|
function loadTabData(type) {
|
||||||
|
// 如果数据已加载,直接返回
|
||||||
|
if (dataLoaded[type]) {
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
|
||||||
|
var loadPromise;
|
||||||
|
|
||||||
|
switch(type) {
|
||||||
|
case 'pump':
|
||||||
|
loadPromise = loadPumpData().then(function(data) {
|
||||||
|
console.log('loadTabData pump 接收数据:', data);
|
||||||
|
pumpStations = data;
|
||||||
|
console.log('pumpStations 赋值后:', pumpStations);
|
||||||
|
initPumpTable();
|
||||||
|
dataLoaded.pump = true;
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'company':
|
||||||
|
loadPromise = loadCompanyData().then(function(data) {
|
||||||
|
console.log('loadTabData company 接收数据:', data);
|
||||||
|
companies = data;
|
||||||
|
console.log('companies 赋值后:', companies);
|
||||||
|
initCompanyTable();
|
||||||
|
dataLoaded.company = true;
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'pipeline':
|
||||||
|
loadPromise = mockApiRequest('/api/pipeline/list').then(function(data) {
|
||||||
|
pipelines = data;
|
||||||
|
initPipelineTable();
|
||||||
|
dataLoaded.pipeline = true;
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'well':
|
||||||
|
loadPromise = mockApiRequest('/api/well/list').then(function(data) {
|
||||||
|
wells = data;
|
||||||
|
initWellTable();
|
||||||
|
dataLoaded.well = true;
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'plan':
|
||||||
|
loadPromise = mockApiRequest('/api/plan/list').then(function(data) {
|
||||||
|
plans = data;
|
||||||
|
initPlanTable();
|
||||||
|
dataLoaded.plan = true;
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'record':
|
||||||
|
loadPromise = mockApiRequest('/api/record/list').then(function(data) {
|
||||||
|
records = data;
|
||||||
|
initRecordTable();
|
||||||
|
dataLoaded.record = true;
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
|
||||||
|
return loadPromise.catch(function(err) {
|
||||||
|
console.error('加载' + type + '数据失败:', err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Call loadData for initial tab
|
||||||
loadData();
|
loadData();
|
||||||
|
|
||||||
function initMarkers(dataType) {
|
function initMarkers(dataType) {
|
||||||
@ -954,35 +1142,35 @@
|
|||||||
console.log('currentType', currentType)
|
console.log('currentType', currentType)
|
||||||
if (currentType === 'well') {
|
if (currentType === 'well') {
|
||||||
var icon = new T.Icon({
|
var icon = new T.Icon({
|
||||||
iconUrl: "../../IMG/wsgj.png",
|
iconUrl: "<%=request.getContextPath()%>/IMG/wsgj.png",
|
||||||
iconSize: new T.Point(10, 10),
|
iconSize: new T.Point(10, 10),
|
||||||
iconAnchor: new T.Point(15, 15)
|
iconAnchor: new T.Point(15, 15)
|
||||||
});
|
});
|
||||||
marker = new T.Marker(point, {icon: icon});
|
marker = new T.Marker(point, {icon: icon});
|
||||||
} else if (currentType === 'pipeline-node') {
|
} else if (currentType === 'pipeline-node') {
|
||||||
var icon = new T.Icon({
|
var icon = new T.Icon({
|
||||||
iconUrl: "../../IMG/icon_gd.png",
|
iconUrl: "<%=request.getContextPath()%>/IMG/icon_gd.png",
|
||||||
iconSize: new T.Point(18, 18),
|
iconSize: new T.Point(18, 18),
|
||||||
iconAnchor: new T.Point(15, 15)
|
iconAnchor: new T.Point(15, 15)
|
||||||
});
|
});
|
||||||
marker = new T.Marker(point, {icon: icon});
|
marker = new T.Marker(point, {icon: icon});
|
||||||
} else if (currentType === 'pump') {
|
} else if (currentType === 'pump') {
|
||||||
var icon = new T.Icon({
|
var icon = new T.Icon({
|
||||||
iconUrl: "../../IMG/icon_bz.png",
|
iconUrl: "<%=request.getContextPath()%>/IMG/icon_bz.png",
|
||||||
iconSize: new T.Point(18, 18),
|
iconSize: new T.Point(18, 18),
|
||||||
iconAnchor: new T.Point(15, 15)
|
iconAnchor: new T.Point(15, 15)
|
||||||
});
|
});
|
||||||
marker = new T.Marker(point, {icon: icon});
|
marker = new T.Marker(point, {icon: icon});
|
||||||
} else if (currentType === 'company') {
|
} else if (currentType === 'company') {
|
||||||
var icon = new T.Icon({
|
var icon = new T.Icon({
|
||||||
iconUrl: "../../IMG/icon_qy.png",
|
iconUrl: "<%=request.getContextPath()%>/IMG/icon_qy.png",
|
||||||
iconSize: new T.Point(18, 18),
|
iconSize: new T.Point(18, 18),
|
||||||
iconAnchor: new T.Point(15, 15)
|
iconAnchor: new T.Point(15, 15)
|
||||||
});
|
});
|
||||||
marker = new T.Marker(point, {icon: icon});
|
marker = new T.Marker(point, {icon: icon});
|
||||||
} else if (currentType === 'sewage') {
|
} else if (currentType === 'sewage') {
|
||||||
var icon = new T.Icon({
|
var icon = new T.Icon({
|
||||||
iconUrl: "../../IMG/icon_wsc.png",
|
iconUrl: "<%=request.getContextPath()%>/IMG/icon_wsc.png",
|
||||||
iconSize: new T.Point(18, 18),
|
iconSize: new T.Point(18, 18),
|
||||||
iconAnchor: new T.Point(15, 15)
|
iconAnchor: new T.Point(15, 15)
|
||||||
});
|
});
|
||||||
@ -1151,27 +1339,32 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function initPumpTable() {
|
function initPumpTable() {
|
||||||
|
console.log('initPumpTable 被调用, pumpStations:', pumpStations);
|
||||||
var tbody = document.getElementById('pump-table-body');
|
var tbody = document.getElementById('pump-table-body');
|
||||||
var html = '';
|
console.log('tbody 元素:', tbody);
|
||||||
pumpStations.forEach(function(station, index) {
|
if (!tbody) {
|
||||||
var rowClass = index % 2 === 0 ? '' : 'active'; // stripe effect
|
console.error('找不到 pump-table-body 元素!');
|
||||||
// Add soft blue background for some rows as in screenshot
|
return;
|
||||||
if (index % 2 !== 0) {
|
|
||||||
// bootstrap 'active' class adds a grey background, let's use custom style if needed,
|
|
||||||
// but 'active' or 'info' class is standard bootstrap.
|
|
||||||
// The screenshot shows light blue stripes.
|
|
||||||
rowClass = 'info';
|
|
||||||
}
|
}
|
||||||
|
var html = '';
|
||||||
|
if (!pumpStations || pumpStations.length === 0) {
|
||||||
|
console.warn('pumpStations 为空或长度为0');
|
||||||
|
tbody.innerHTML = '<tr><td colspan="6" class="text-center">暂无数据</td></tr>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
pumpStations.forEach(function(station, index) {
|
||||||
|
var rowClass = index % 2 === 0 ? '' : 'info';
|
||||||
|
|
||||||
html += '<tr class="' + rowClass + '">';
|
html += '<tr class="' + rowClass + '">';
|
||||||
html += '<td class="text-center">' + (index + 1) + '</td>';
|
html += '<td class="text-center">' + (index + 1) + '</td>';
|
||||||
html += '<td style="font-weight:bold;">' + station.name + '</td>';
|
html += '<td style="font-weight:bold;">' + (station.name || '-') + '</td>';
|
||||||
html += '<td class="text-right">' + station.level + '</td>';
|
html += '<td class="text-right">' + (station.level || '-') + '</td>';
|
||||||
html += '<td class="text-right">' + station.flow + '</td>';
|
html += '<td class="text-right">' + (station.flow || '-') + '</td>';
|
||||||
html += '<td class="text-center">' + station.status + '</td>';
|
html += '<td class="text-center">' + (station.status || '-') + '</td>';
|
||||||
html += '<td class="text-center">' + station.time + '</td>';
|
html += '<td class="text-center">' + (station.time || '-') + '</td>';
|
||||||
html += '</tr>';
|
html += '</tr>';
|
||||||
});
|
});
|
||||||
|
console.log('生成的表格HTML长度:', html.length);
|
||||||
tbody.innerHTML = html;
|
tbody.innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1222,29 +1415,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
initMarkers();
|
// initMarkers() 和表格初始化在 loadData() 完成后调用
|
||||||
initPumpTable();
|
// 不要在这里单独调用,否则会使用空数据
|
||||||
initSewageTable();
|
|
||||||
|
|
||||||
// Mock Data for Companies
|
// 数据定义 (pipelines 和 wells) 已在 loadData() 中加载
|
||||||
var companies = [
|
// 如果需要默认数据,请在 loadData() 的 mockApiRequest 中配置
|
||||||
{ id: 1, code: "JSALQY01", name: "福达(上海)食品有限公司", address: "上海市金山区工业区金...", sewageNo: "JS2C", dischargeNo: "AL9654501", discharge: "717m³", point: "AL9654501_CSLL", lng: 121.320000, lat: 30.730000 },
|
|
||||||
{ id: 2, code: "JSALQY02", name: "上海嘉乐股份有限公司", address: "上海市金山区亭林镇...", sewageNo: "MM_AL11_C", dischargeNo: "AL9654502", discharge: "1010m³", point: "AL9654502_CSLL", lng: 121.330000, lat: 30.740000 },
|
|
||||||
];
|
|
||||||
|
|
||||||
// Mock Data for Pipelines
|
|
||||||
var pipelines = [
|
|
||||||
{ id: 1, name: "", diameter: "0", length: "0", startDepth: "0", endDepth: "0", startElev: "0", endElev: "0", invertElev: "0", path: [[121.3400, 30.7400], [121.3410, 30.7410]] },
|
|
||||||
{ id: 2, name: "", diameter: "1600", length: "72.0223546", startDepth: "0.149", endDepth: "0.251", startElev: "5.649", endElev: "5.451", invertElev: "0.2", path: [[121.3410, 30.7410], [121.3430, 30.7430]] },
|
|
||||||
{ id: 3, name: "", diameter: "200", length: "11.1513874", startDepth: "0.251", endDepth: "3.035", startElev: "5.451", endElev: "5.335", invertElev: "1.643", path: [[121.3430, 30.7430], [121.3440, 30.7440]] },
|
|
||||||
];
|
|
||||||
|
|
||||||
// Mock Data for Wells
|
|
||||||
var wells = [
|
|
||||||
{ id: 1, name: "BWS1", depth: "8.15", bottomElev: "-3.963", groundElev: "0", spec: "", lng: "3420414.23109246", lat: "340424.84811152", mapLng: "121.3410", mapLat: "30.7410" },
|
|
||||||
{ id: 2, name: "BWS2", depth: "8.15", bottomElev: "-3.619", groundElev: "0", spec: "", lng: "3420475.77946245", lat: "340408.18952986", mapLng: "121.3420", mapLat: "30.7420" },
|
|
||||||
{ id: 3, name: "BWS3", depth: "7.15", bottomElev: "-2.414", groundElev: "0", spec: "", lng: "3420467.51573462", lat: "340548.72770082", mapLng: "121.3430", mapLat: "30.7430" },
|
|
||||||
];
|
|
||||||
|
|
||||||
// ---------------------------------------------------------
|
// ---------------------------------------------------------
|
||||||
// 坐标转换处理
|
// 坐标转换处理
|
||||||
@ -1273,26 +1448,49 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function initCompanyTable() {
|
function initCompanyTable() {
|
||||||
|
console.log('initCompanyTable 被调用, companies:', companies);
|
||||||
var tbody = document.getElementById('company-table-body');
|
var tbody = document.getElementById('company-table-body');
|
||||||
|
console.log('company-table-body 元素:', tbody);
|
||||||
|
if (!tbody) {
|
||||||
|
console.error('找不到 company-table-body 元素!');
|
||||||
|
return;
|
||||||
|
}
|
||||||
var html = '';
|
var html = '';
|
||||||
|
if (!companies || companies.length === 0) {
|
||||||
|
console.warn('companies 为空或长度为0');
|
||||||
|
tbody.innerHTML = '<tr><td colspan="11" class="text-center">暂无数据</td></tr>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
companies.forEach(function(item, index) {
|
companies.forEach(function(item, index) {
|
||||||
var rowClass = index % 2 === 0 ? '' : 'active';
|
var rowClass = index % 2 === 0 ? '' : 'info';
|
||||||
if (index % 2 !== 0) rowClass = 'info';
|
|
||||||
|
|
||||||
html += '<tr class="' + rowClass + '">';
|
html += '<tr class="' + rowClass + '" onclick="selectCompany(' + index + ')" style="cursor: pointer;">';
|
||||||
html += '<td class="text-center">' + (index + 1) + '</td>';
|
html += '<td class="text-center">' + (index + 1) + '</td>';
|
||||||
html += '<td>' + item.code + '</td>';
|
html += '<td>' + (item.contractNumber || '-') + '</td>';
|
||||||
html += '<td>' + item.name + '</td>';
|
html += '<td>' + (item.name || '-') + '</td>';
|
||||||
html += '<td>' + item.address + '</td>';
|
html += '<td>' + (item.address || '-') + '</td>';
|
||||||
html += '<td class="text-center">' + item.sewageNo + '</td>';
|
html += '<td class="text-center">' + (item.areaName || '-') + '</td>';
|
||||||
html += '<td class="text-center">' + item.dischargeNo + '</td>';
|
html += '<td class="text-center">' + (item.processSectionName || '-') + '</td>';
|
||||||
html += '<td class="text-right">' + item.discharge + '</td>';
|
html += '<td class="text-center">' + (item.permitNum || '-') + '</td>';
|
||||||
html += '<td>' + item.point + '</td>';
|
html += '<td class="text-center">' + (item.trade || '-') + '</td>';
|
||||||
|
html += '<td class="text-right">' + (item.displacement || '-') + '</td>';
|
||||||
|
html += '<td class="text-center">' + (item.point || '-') + '</td>';
|
||||||
|
html += '<td class="text-center">' + (item.input || '-') + '</td>';
|
||||||
html += '</tr>';
|
html += '</tr>';
|
||||||
});
|
});
|
||||||
|
console.log('生成的企业表格HTML长度:', html.length);
|
||||||
tbody.innerHTML = html;
|
tbody.innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 选择企业在地图上定位
|
||||||
|
function selectCompany(index) {
|
||||||
|
var item = companies[index];
|
||||||
|
if (item && item.lng && item.lat) {
|
||||||
|
map.panTo(new T.LngLat(item.lng, item.lat));
|
||||||
|
map.setZoom(15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function initPipelineTable() {
|
function initPipelineTable() {
|
||||||
var tbody = document.getElementById('pipeline-table-body');
|
var tbody = document.getElementById('pipeline-table-body');
|
||||||
var html = '';
|
var html = '';
|
||||||
@ -1351,25 +1549,11 @@
|
|||||||
tbody.innerHTML = html;
|
tbody.innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
initCompanyTable();
|
// initCompanyTable(), initPipelineTable(), initWellTable() 已在 loadData() 完成后调用
|
||||||
initPipelineTable();
|
// 不要在这里重复调用
|
||||||
initWellTable();
|
|
||||||
|
|
||||||
// Mock Data for Plans
|
// plans 和 records 数据已在 loadData() 中通过 mockApiRequest 加载
|
||||||
var plans = [
|
// 不要在这里重复定义,否则会覆盖已加载的数据
|
||||||
{ id: 1, name: "金山一车间日常巡检", status: "启用", duration: "2小时", interval: "1天", startTime: "2026-01-01", endTime: "2026-12-31" },
|
|
||||||
{ id: 2, name: "泵站设备专项检查", status: "启用", duration: "4小时", interval: "7天", startTime: "2026-02-01", endTime: "2026-06-30" },
|
|
||||||
{ id: 3, name: "管网防汛排查", status: "停用", duration: "8小时", interval: "30天", startTime: "2026-05-01", endTime: "2026-09-30" },
|
|
||||||
{ id: 4, name: "排污口突击检查", status: "启用", duration: "3小时", interval: "15天", startTime: "2026-03-15", endTime: "2026-09-15" }
|
|
||||||
];
|
|
||||||
|
|
||||||
// Mock Data for Records
|
|
||||||
var records = [
|
|
||||||
{ id: 1, taskName: "金山一车间日常巡检", status: "已完成", planStartTime: "09:00", planEndTime: "11:00", actualTime: "10:45" },
|
|
||||||
{ id: 2, taskName: "泵站设备专项检查", status: "未完成", planStartTime: "14:00", planEndTime: "17:30", actualTime: "--" },
|
|
||||||
{ id: 3, taskName: "金山一车间日常巡检", status: "已完成", planStartTime: "09:00", planEndTime: "10:50", actualTime: "10:30" },
|
|
||||||
{ id: 4, taskName: "管网防汛排查", status: "进行中", planStartTime: "10:00", planEndTime: "16:00", actualTime: "--" }
|
|
||||||
];
|
|
||||||
|
|
||||||
function initPlanTable() {
|
function initPlanTable() {
|
||||||
var tbody = document.getElementById('plan-table-body');
|
var tbody = document.getElementById('plan-table-body');
|
||||||
@ -1419,8 +1603,8 @@
|
|||||||
tbody.innerHTML = html;
|
tbody.innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
initPlanTable();
|
// initPlanTable() 和 initRecordTable() 已在 loadData() 完成后调用
|
||||||
initRecordTable();
|
// 不要在这里重复调用
|
||||||
|
|
||||||
// Drawer Logic
|
// Drawer Logic
|
||||||
function toggleDrawer() {
|
function toggleDrawer() {
|
||||||
@ -1474,6 +1658,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function switchTab(tabId, navItem) {
|
function switchTab(tabId, navItem) {
|
||||||
|
console.log('switchTab 被调用, tabId:', tabId);
|
||||||
// Update Nav Items
|
// Update Nav Items
|
||||||
var navItems = document.querySelectorAll('.drawer-nav-item');
|
var navItems = document.querySelectorAll('.drawer-nav-item');
|
||||||
navItems.forEach(function(item) {
|
navItems.forEach(function(item) {
|
||||||
@ -1488,29 +1673,37 @@
|
|||||||
});
|
});
|
||||||
document.getElementById(tabId).classList.add('active');
|
document.getElementById(tabId).classList.add('active');
|
||||||
|
|
||||||
// Update Map Markers based on Tab ID
|
// 根据Tab ID确定数据类型
|
||||||
var type = 'sewage';
|
var type = 'sewage';
|
||||||
if (tabId === 'tab-pump') type = 'pump';
|
if (tabId === 'tab-pump') type = 'pump';
|
||||||
else if (tabId === 'tab-company') type = 'company';
|
else if (tabId === 'tab-company') type = 'company';
|
||||||
else if (tabId === 'tab-well') type = 'well';
|
else if (tabId === 'tab-well') type = 'well';
|
||||||
else if (tabId === 'tab-pipeline') type = 'pipeline';
|
else if (tabId === 'tab-pipeline') type = 'pipeline';
|
||||||
|
else if (tabId === 'tab-plan') type = 'plan';
|
||||||
|
else if (tabId === 'tab-record') type = 'record';
|
||||||
|
|
||||||
|
console.log('确定的数据类型 type:', type);
|
||||||
|
|
||||||
|
// 加载该Tab的数据,然后更新地图
|
||||||
|
loadTabData(type).then(function() {
|
||||||
|
console.log('loadTabData 完成, type:', type);
|
||||||
initMarkers(type);
|
initMarkers(type);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<!-- jQuery -->
|
<!-- jQuery -->
|
||||||
<script src="../../node_modules/jquery-ui/external/jquery/jquery.js"></script>
|
<script src="<%=request.getContextPath()%>/node_modules/jquery-ui/external/jquery/jquery.js"></script>
|
||||||
<!-- Bootstrap JS -->
|
<!-- Bootstrap JS -->
|
||||||
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
<script src="<%=request.getContextPath()%>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
<!-- Moment.js -->
|
<!-- Moment.js -->
|
||||||
<script src="../../plugins/bootstrap-daterangepicker/moment.min.js"></script>
|
<script src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"></script>
|
||||||
<!-- DateRangePicker -->
|
<!-- DateRangePicker -->
|
||||||
<script src="../../plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
|
<script src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
// Initialize DateRangePicker for time range inputs
|
// Initialize DateRangePicker for time range inputs (移除了 company-time 相关)
|
||||||
$('#sewage-time-start, #sewage-time-end, #pump-time-start, #pump-time-end, #company-time-start, #company-time-end').daterangepicker({
|
$('#sewage-time-start, #sewage-time-end, #pump-time-start, #pump-time-end').daterangepicker({
|
||||||
singleDatePicker: true,
|
singleDatePicker: true,
|
||||||
timePicker: true,
|
timePicker: true,
|
||||||
timePicker24Hour: true,
|
timePicker24Hour: true,
|
||||||
|
|||||||
@ -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;
|
||||||
@ -172,7 +176,6 @@
|
|||||||
top: 300px;
|
top: 300px;
|
||||||
left: 2700px;
|
left: 2700px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -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,261 +320,294 @@
|
|||||||
</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();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
@ -147,113 +163,149 @@
|
|||||||
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,97 +400,150 @@
|
|||||||
|
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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 {
|
||||||
@ -273,35 +278,62 @@
|
|||||||
<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>
|
||||||
|
|
||||||
@ -340,7 +372,7 @@
|
|||||||
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);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -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();
|
||||||
@ -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,12 +797,12 @@
|
|||||||
// 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");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -691,19 +810,21 @@
|
|||||||
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);
|
||||||
@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user