优化

OperationMonitoring/src/main/java/com/nmggs/query/common/config/CorsConfig.java

@@ -29,9 +29,19 @@ public class CorsConfig implements WebMvcConfigurer {
         // 设置拦截类
         registry.addInterceptor(filterconfig)
                 .addPathPatterns("/**")
-//                是否允许证书
+                //是否允许证书
                 .excludePathPatterns(
+                        "/LWZXmpayServer**",
+                        "/LWZXmpayDataBacklog**",
+                        "/LWZXbyServer**",
+                        "/LWZXbyDataBacklog**",
+                        "/jtIndex**",
+                        "/indexLoopJT**",
+                        "/etcState**",
+                        "/echartsJT**",
                         "/echarts**",
+                        "/tollStation**",
+                        "/jtConfig**",
                         "/config**",
                         "/subCenterServer**",
                         "/subCenterDataBacklog**",

OperationMonitoring/src/main/java/com/nmggs/query/common/utils/PathUtil.java

@@ -70,6 +70,7 @@ public class PathUtil {
             webPath = webPath + webName;
         }
         applicationPath = webappsPath + "/application.properties";
+        //applicationPath = webappsPath + "/application1.properties";
         applicationTextPath = webappsPath + "/applicationText.properties";
         WebServiceWarPath = TomcatPath + "/WebServiceWar";
         tomcatUserXMLPath = TomcatPath + "/conf/tomcat-users.xml";

OperationMonitoring/src/main/java/com/nmggs/query/controller/NetDataConnectedController.java

@@ -1,14 +1,19 @@
 package com.nmggs.query.controller;
 
-import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.nmggs.query.entity.NetDataConnectedJava;
 import com.nmggs.query.entity.Res;
 import com.nmggs.query.service.NetDataConnectedJavaService;
+import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.bind.annotation.RestController;
 
 import javax.annotation.Resource;
+import java.text.ParseException;
+import java.text.SimpleDateFormat;
+import java.util.Collections;
+import java.util.Date;
 import java.util.List;
 import java.util.Map;
 
@@ -23,30 +28,49 @@ public class NetDataConnectedController {
     private NetDataConnectedJavaService netDataConnectedJavaService;
 
 
+    @GetMapping("/stationServerEcharts")
+    @ResponseBody
+    public List<NetDataConnectedJava> stationServerEcharts(String classDate) {
+        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
+        Date date;
+        try {
+            date = sdf.parse(classDate);
+        } catch (ParseException e) {
+            // 处理日期格式解析异常
+            e.printStackTrace();
+            return Collections.emptyList(); // 返回空列表或抛出异常
+        }
+        return netDataConnectedJavaService.stationServerEcharts(date);
+    }
 
+    @GetMapping("/getCenterConnected")
+    @ResponseBody
+    public List<NetDataConnectedJava> getCenterConnected() {
+        return netDataConnectedJavaService.queryCenterConnected();
+    }
     @PostMapping("/getHRFrontUnitDataBacklog")
     public List<NetDataConnectedJava> getHRFrontUnitDataBacklog() {
         return netDataConnectedJavaService.queryHRFrontUnitDataBacklog();
     }
     @PostMapping("/getYEJLLWFrontUnitDataBacklog")
-    public Page<NetDataConnectedJava> getYEJLLWFrontUnitDataBacklog(@RequestBody Map<String,Object> map) {
-        return netDataConnectedJavaService.queryYEJLLWFrontUnitDataBacklog(map);
+    public List<NetDataConnectedJava> getYEJLLWFrontUnitDataBacklog() {
+        return netDataConnectedJavaService.queryYEJLLWFrontUnitDataBacklog();
     }
     @PostMapping("/getYEJLLDFrontUnitDataBacklog")
-    public Page<NetDataConnectedJava> getYEJLLDFrontUnitDataBacklog(@RequestBody Map<String,Object> map) {
-        return netDataConnectedJavaService.queryYEJLLDFrontUnitDataBacklog(map);
+    public List<NetDataConnectedJava> getYEJLLDFrontUnitDataBacklog() {
+        return netDataConnectedJavaService.queryYEJLLDFrontUnitDataBacklog();
     }
     @PostMapping("/getLWZXFrontUnitDataBacklog")
-    public Page<NetDataConnectedJava> getLWZXFrontUnitDataBacklog(@RequestBody Map<String,Object> map) {
-        return netDataConnectedJavaService.queryLWZXFrontUnitDataBacklog(map);
+    public List<NetDataConnectedJava> getLWZXFrontUnitDataBacklog() {
+        return netDataConnectedJavaService.queryLWZXFrontUnitDataBacklog();
     }
     @PostMapping("/getStationDataBacklog")
-    public Page<NetDataConnectedJava> getStationDataBacklog(@RequestBody Map<String,Object> map) {
-        return netDataConnectedJavaService.queryStationDataBacklog(map);
+    public List<NetDataConnectedJava> getStationDataBacklog() {
+        return netDataConnectedJavaService.queryStationDataBacklog();
     }
     @PostMapping("/getSubCenterDataBacklog")
-    public Page<NetDataConnectedJava> getSubCenterDataBacklog(@RequestBody Map<String,Object> map) {
-        return netDataConnectedJavaService.querySubCenterDataBacklog(map);
+    public List<NetDataConnectedJava> getSubCenterDataBacklog() {
+        return netDataConnectedJavaService.querySubCenterDataBacklog();
     }
 
 
@@ -81,4 +105,25 @@ public class NetDataConnectedController {
         List<NetDataConnectedJava> netDataConnectedJavas = netDataConnectedJavaService.YEJLLDFrontUnitServer(map);
         return Res.success(netDataConnectedJavas);
     }
+    @PostMapping("/queryLWZXmpayServer")
+    public Res queryLWZXmpayServer(@RequestBody Map<String,Object> map) {
+        List<NetDataConnectedJava> netDataConnectedJavas = netDataConnectedJavaService.queryLWZXmpayServer(map);
+        return Res.success(netDataConnectedJavas);
+    }
+    @PostMapping("/queryLWZXbyServer")
+    public Res queryLWZXbyServer(@RequestBody Map<String,Object> map) {
+        List<NetDataConnectedJava> netDataConnectedJavas = netDataConnectedJavaService.queryLWZXbyServer(map);
+        return Res.success(netDataConnectedJavas);
+    }
+    @PostMapping("/getLWZXmpayDataBacklog")
+    public List<NetDataConnectedJava> getLWZXmpayDataBacklog() {
+        return netDataConnectedJavaService.getLWZXmpayDataBacklog();
+    }
+    @PostMapping("/getLWZXbyDataBacklog")
+    public List<NetDataConnectedJava> getLWZXbyDataBacklog() {
+        return netDataConnectedJavaService.getLWZXbyDataBacklog();
+    }
+
+
+
 }

OperationMonitoring/src/main/java/com/nmggs/query/mapper/MonitoringTableJavaMapper.java

@@ -7,6 +7,6 @@ import org.apache.ibatis.annotations.Select;
 
 @Mapper
 public interface MonitoringTableJavaMapper extends BaseMapper<MonitoringTableJava> {
-    @Select("SELECT MAX(ID) FROM MONITORING_TABLE")
+    @Select("SELECT MAX(ID) FROM MONITORING_TABLE_JAVA")
     Integer selectMaxId();
 }

OperationMonitoring/src/main/java/com/nmggs/query/service/NetDataConnectedJavaService.java

@@ -1,8 +1,8 @@
 package com.nmggs.query.service;
 
-import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.nmggs.query.entity.NetDataConnectedJava;
 
+import java.util.Date;
 import java.util.List;
 import java.util.Map;
 
@@ -24,15 +24,27 @@ public interface NetDataConnectedJavaService {
 
     List<NetDataConnectedJava> YEJLLDFrontUnitServer(Map<String, Object> map);
 
-    Page<NetDataConnectedJava> querySubCenterDataBacklog( Map<String,Object> map);
+    List<NetDataConnectedJava> querySubCenterDataBacklog();
 
-    Page<NetDataConnectedJava> queryStationDataBacklog(Map<String, Object> map);
+    List<NetDataConnectedJava> queryStationDataBacklog();
 
     List<NetDataConnectedJava> queryHRFrontUnitDataBacklog();
 
-    Page<NetDataConnectedJava> queryLWZXFrontUnitDataBacklog(Map<String, Object> map);
+    List<NetDataConnectedJava> queryLWZXFrontUnitDataBacklog();
 
-    Page<NetDataConnectedJava> queryYEJLLDFrontUnitDataBacklog(Map<String, Object> map);
+    List<NetDataConnectedJava> queryYEJLLDFrontUnitDataBacklog();
 
-    Page<NetDataConnectedJava> queryYEJLLWFrontUnitDataBacklog(Map<String, Object> map);
+    List<NetDataConnectedJava> queryYEJLLWFrontUnitDataBacklog();
+
+    List<NetDataConnectedJava> queryCenterConnected();
+
+    List<NetDataConnectedJava> stationServerEcharts(Date date);
+
+    List<NetDataConnectedJava> queryLWZXmpayServer(Map<String, Object> map);
+
+    List<NetDataConnectedJava> queryLWZXbyServer(Map<String, Object> map);
+
+    List<NetDataConnectedJava> getLWZXmpayDataBacklog();
+
+    List<NetDataConnectedJava> getLWZXbyDataBacklog();
 }

OperationMonitoring/src/main/java/com/nmggs/query/service/impl/MonitoringTableJavaServiceImpl.java

@@ -3,6 +3,10 @@ package com.nmggs.query.service.impl;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.nmggs.query.common.emnu.Constant;
+import com.nmggs.query.common.utils.DateTimeUtil;
+import com.nmggs.query.common.utils.LogUtil;
+import com.nmggs.query.common.utils.UuidUtil;
 import com.nmggs.query.entity.MonitoringTableJava;
 import com.nmggs.query.mapper.MonitoringTableJavaMapper;
 import com.nmggs.query.service.MonitoringTableJavaService;
@@ -10,6 +14,7 @@ import org.springframework.stereotype.Service;
 
 import javax.annotation.Resource;
 import java.util.ArrayList;
+import java.util.Date;
 import java.util.List;
 
 /**
@@ -21,17 +26,26 @@ import java.util.List;
 public class MonitoringTableJavaServiceImpl implements MonitoringTableJavaService {
     @Resource
     private MonitoringTableJavaMapper monitoringTableJavaMapper;
+
     @Override
-    public String getSqlByConfig(int baseType,int isJt) {
+    public String getSqlByConfig(int baseType, int isJt) {
         StringBuilder sb_sqlResult = new StringBuilder();
         List<String> list_sql = new ArrayList<>();
         QueryWrapper<MonitoringTableJava> queryWrapper = new QueryWrapper<>();
-            queryWrapper.lambda().eq(MonitoringTableJava::getBaseType, baseType)
-                    .in(MonitoringTableJava::getIsJt, isJt,3);
+        queryWrapper.lambda().eq(MonitoringTableJava::getBaseType, baseType)
+                .in(MonitoringTableJava::getIsJt, isJt, 3);
         List<MonitoringTableJava> monitoringTables = monitoringTableJavaMapper.selectList(queryWrapper);
         // 处理查询结果并构建 SQL 语句列表
         for (MonitoringTableJava table : monitoringTables) {
-            String sql = "select '" + table.getMonitoring() + "' as TABLENAME, count(1) as RECS, min(" + table.getMinTime() + ") as MINTIME from " + table.getMonitoring();
+            String sql;
+            String monitoring = table.getMonitoring();
+            if ("EPAY_TRADEDETAIL".equals(monitoring)) {
+                String nowString = DateTimeUtil.getFormateString(DateTimeUtil.addDateDays(new Date(), -1), Constant.YYYY_MM_DD);
+                sql = "select '" + table.getMonitoring() + "' as TABLENAME, count(1) as RECS, min(" + table.getMinTime() + ") as MINTIME from " + table.getMonitoring() + " where " + table.getMinTime() + " =to_date( '"+nowString+"', 'yyyy-MM-dd' )";
+            } else {
+                sql = "select '" + table.getMonitoring() + "' as TABLENAME, count(1) as RECS, min(" + table.getMinTime() + ") as MINTIME from " + table.getMonitoring();
+            }
+
             list_sql.add(sql);
         }
         // 组合 SQL 语句
@@ -44,39 +58,52 @@ public class MonitoringTableJavaServiceImpl implements MonitoringTableJavaServic
 
     @Override
     public Page<MonitoringTableJava> selectMonitoring(int currentPage, int pageSize) {
+        String uuid = UuidUtil.getUuid();
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-分页查询MONITORING_TABLE_JAVA数据", "MonitoringTableJavaServiceImpl-selectMonitoring");
+
         Page<MonitoringTableJava> page = new Page<>(currentPage, pageSize);
         QueryWrapper<MonitoringTableJava> queryWrapper = new QueryWrapper<>();
         queryWrapper.lambda().orderByAsc(MonitoringTableJava::getBaseType);
         page = monitoringTableJavaMapper.selectPage(page, queryWrapper);
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-分页查询MONITORING_TABLE_JAVA数据成功,条数为"+page.getTotal(), "MonitoringTableJavaServiceImpl-selectMonitoring");
         return page;
     }
 
     @Override
     public void addMonitoringTableJava(MonitoringTableJava monitoringTable) {
+        String uuid = UuidUtil.getUuid();
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始新增MONITORING_TABLE_JAVA数据"+monitoringTable, "MonitoringTableJavaServiceImpl-addMonitoringTableJava");
         Integer maxId = monitoringTableJavaMapper.selectMaxId();
         if (maxId == null) {
             maxId = 0;
         }
         monitoringTable.setId(maxId + 1);
         monitoringTableJavaMapper.insert(monitoringTable);
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-新增MONITORING_TABLE_JAVA数据成功", "MonitoringTableJavaServiceImpl-addMonitoringTableJava");
     }
 
     @Override
     public void updateMonitoringTableJava(MonitoringTableJava monitoringTable) {
+        String uuid = UuidUtil.getUuid();
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始更新MONITORING_TABLE_JAVA数据"+monitoringTable, "MonitoringTableJavaServiceImpl-updateMonitoringTableJava");
         MonitoringTableJava info = monitoringTableJavaMapper.selectById(monitoringTable.getId());
         if (info != null) {
             UpdateWrapper<MonitoringTableJava> updateWrapper = new UpdateWrapper<>();
             updateWrapper.eq("id", monitoringTable.getId());
             monitoringTableJavaMapper.update(monitoringTable, updateWrapper);
+            LogUtil.WriteLog_Info("[uuid:" + uuid + "]-更新MONITORING_TABLE_JAVA数据成功", "MonitoringTableJavaServiceImpl-updateMonitoringTableJava");
         }
     }
 
 
     @Override
     public void deleteId(Integer id) {
+        String uuid = UuidUtil.getUuid();
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始删除MONITORING_TABLE_JAVA数据id="+id, "MonitoringTableJavaServiceImpl-deleteId");
         QueryWrapper<MonitoringTableJava> queryWrapper = new QueryWrapper<>();
         queryWrapper.lambda().eq(MonitoringTableJava::getId, id);
         monitoringTableJavaMapper.delete(queryWrapper);
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-删除MONITORING_TABLE_JAVA数据成功", "MonitoringTableJavaServiceImpl-deleteId");
     }
 
     @Override

OperationMonitoring/src/main/java/com/nmggs/query/service/impl/NetDataConnectedJavaServiceImpl.java

@@ -2,7 +2,6 @@ package com.nmggs.query.service.impl;
 
 import com.alibaba.fastjson.JSONObject;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
-import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.nmggs.query.common.emnu.Constant;
 import com.nmggs.query.common.utils.DateTimeUtil;
 import com.nmggs.query.common.utils.LogUtil;
@@ -165,11 +164,9 @@ public class NetDataConnectedJavaServiceImpl implements NetDataConnectedJavaServ
     }
 
     @Override
-    public Page<NetDataConnectedJava> querySubCenterDataBacklog(Map<String, Object> objectMap) {
+    public List<NetDataConnectedJava> querySubCenterDataBacklog() {
         String uuid = UuidUtil.getUuid();
-        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始根据条件" + objectMap + ",查询分中心积压数据信息", "NetDataConnectedJavaServiceImpl-querySubCenterDataBacklog");
-        int currentPage = (int) objectMap.get("currentPage");
-        int pageSize = (int) objectMap.get("pageSize");
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始查询分中心积压数据信息", "NetDataConnectedJavaServiceImpl-querySubCenterDataBacklog");
         String truncSysDateSQL = SqlStringUtil.getTruncSysDateSQL();
         QueryWrapper<NetDataConnectedJava> netdataConnectedQueryWrapper = new QueryWrapper<>();
         netdataConnectedQueryWrapper.lambda().apply(truncSysDateSQL)
@@ -194,7 +191,8 @@ public class NetDataConnectedJavaServiceImpl implements NetDataConnectedJavaServ
             try {
                 Map<String, Object> map = JSONObject.parseObject(data.getDataJson(), Map.class);
                 int sum = map.entrySet().stream()
-                        .filter(entry -> entry.getKey().endsWith("out_port_center_recs"))
+                        .filter(entry -> entry.getKey().endsWith("recs"))
+                        //.filter(entry -> entry.getKey().endsWith("out_port_center_recs"))
                         .mapToInt(entry -> {
                             try {
                                 return Integer.parseInt(entry.getValue().toString());
@@ -209,24 +207,14 @@ public class NetDataConnectedJavaServiceImpl implements NetDataConnectedJavaServ
                 return 0; // 如果解析或计算出现异常，返回 0
             }
         }));
-        int fromIndex = (currentPage - 1) * pageSize;
-        int toIndex = Math.min(fromIndex + pageSize, filteredList.size());
-        List<NetDataConnectedJava> pageData = filteredList.subList(fromIndex, toIndex);
-        Page<NetDataConnectedJava> page = new Page<>();
-        page.setCurrent(currentPage);
-        page.setSize(pageSize);
-        page.setTotal(filteredList.size());
-        page.setRecords(pageData);
-        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-根据条件" + objectMap + ",查询分中心积压数据信息条数"+page.getTotal(), "NetDataConnectedJavaServiceImpl-querySubCenterDataBacklog");
-        return page;
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-查询分中心积压数据信息条数"+filteredList.size(), "NetDataConnectedJavaServiceImpl-querySubCenterDataBacklog");
+        return filteredList;
     }
 
     @Override
-    public Page<NetDataConnectedJava> queryStationDataBacklog(Map<String, Object> objectMap) {
+    public List<NetDataConnectedJava> queryStationDataBacklog() {
         String uuid = UuidUtil.getUuid();
-        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始根据条件" + objectMap + ",查询收费站积压数据信息", "NetDataConnectedJavaServiceImpl-queryStationDataBacklog");
-        int currentPage = (int) objectMap.get("currentPage");
-        int pageSize = (int) objectMap.get("pageSize");
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始查询收费站积压数据信息", "NetDataConnectedJavaServiceImpl-queryStationDataBacklog");
         String truncSysDateSQL = SqlStringUtil.getTruncSysDateSQL();
         QueryWrapper<NetDataConnectedJava> netdataConnectedQueryWrapper = new QueryWrapper<>();
         netdataConnectedQueryWrapper.lambda().apply(truncSysDateSQL)
@@ -251,8 +239,8 @@ public class NetDataConnectedJavaServiceImpl implements NetDataConnectedJavaServ
             try {
                 Map<String, Object> map = JSONObject.parseObject(data.getDataJson(), Map.class);
                 int sum = map.entrySet().stream()
-                        //.filter(entry -> entry.getKey().endsWith("recs"))
-                        .filter(entry -> entry.getKey().endsWith("out_port_center_recs"))
+                        .filter(entry -> entry.getKey().endsWith("recs"))
+                        //.filter(entry -> entry.getKey().endsWith("out_port_center_recs"))
                         .mapToInt(entry -> {
                             try {
                                 return Integer.parseInt(entry.getValue().toString());
@@ -267,16 +255,8 @@ public class NetDataConnectedJavaServiceImpl implements NetDataConnectedJavaServ
                 return 0; // 如果解析或计算出现异常，返回 0
             }
         }));
-        int fromIndex = (currentPage - 1) * pageSize;
-        int toIndex = Math.min(fromIndex + pageSize, filteredList.size());
-        List<NetDataConnectedJava> pageData = filteredList.subList(fromIndex, toIndex);
-        Page<NetDataConnectedJava> page = new Page<>();
-        page.setCurrent(currentPage);
-        page.setSize(pageSize);
-        page.setTotal(filteredList.size());
-        page.setRecords(pageData);
-        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-根据条件" + objectMap + ",查询收费站积压数据信息条数"+page.getTotal(), "NetDataConnectedJavaServiceImpl-queryStationDataBacklog");
-        return page;
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-查询收费站积压数据信息条数"+filteredList.size(), "NetDataConnectedJavaServiceImpl-queryStationDataBacklog");
+        return filteredList;
     }
 
     @Override
@@ -307,11 +287,9 @@ public class NetDataConnectedJavaServiceImpl implements NetDataConnectedJavaServ
     }
 
     @Override
-    public Page<NetDataConnectedJava> queryLWZXFrontUnitDataBacklog(Map<String, Object> objectMap) {
+    public List<NetDataConnectedJava> queryLWZXFrontUnitDataBacklog() {
         String uuid = UuidUtil.getUuid();
-        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始根据条件" + objectMap + ",查询联网中心前置机积压数据信息", "NetDataConnectedJavaServiceImpl-queryLWZXFrontUnitDataBacklog");
-        int currentPage = (int) objectMap.get("currentPage");
-        int pageSize = (int) objectMap.get("pageSize");
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始查询联网中心前置机积压数据信息", "NetDataConnectedJavaServiceImpl-queryLWZXFrontUnitDataBacklog");
         String truncSysDateSQL = SqlStringUtil.getTruncSysDateSQL();
         QueryWrapper<NetDataConnectedJava> netdataConnectedQueryWrapper = new QueryWrapper<>();
         netdataConnectedQueryWrapper.lambda().apply(truncSysDateSQL)
@@ -351,24 +329,14 @@ public class NetDataConnectedJavaServiceImpl implements NetDataConnectedJavaServ
                 return 0; // 如果解析或计算出现异常，返回 0
             }
         }));
-        int fromIndex = (currentPage - 1) * pageSize;
-        int toIndex = Math.min(fromIndex + pageSize, filteredList.size());
-        List<NetDataConnectedJava> pageData = filteredList.subList(fromIndex, toIndex);
-        Page<NetDataConnectedJava> page = new Page<>();
-        page.setCurrent(currentPage);
-        page.setSize(pageSize);
-        page.setTotal(filteredList.size());
-        page.setRecords(pageData);
-        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-根据条件" + objectMap + ",查询联网中心前置机积压数据信息条数"+page.getTotal(), "NetDataConnectedJavaServiceImpl-queryLWZXFrontUnitDataBacklog");
-        return page;
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-查询联网中心前置机积压数据信息条数"+filteredList.size(), "NetDataConnectedJavaServiceImpl-queryLWZXFrontUnitDataBacklog");
+        return filteredList;
     }
 
     @Override
-    public Page<NetDataConnectedJava> queryYEJLLDFrontUnitDataBacklog(Map<String, Object> objectMap) {
+    public List<NetDataConnectedJava> queryYEJLLDFrontUnitDataBacklog() {
         String uuid = UuidUtil.getUuid();
-        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始根据条件" + objectMap + ",查询一二级路路段前置机积压数据信息", "NetDataConnectedJavaServiceImpl-queryYEJLLDFrontUnitDataBacklog");
-        int currentPage = (int) objectMap.get("currentPage");
-        int pageSize = (int) objectMap.get("pageSize");
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始查询一二级路路段前置机积压数据信息", "NetDataConnectedJavaServiceImpl-queryYEJLLDFrontUnitDataBacklog");
         String truncSysDateSQL = SqlStringUtil.getTruncSysDateSQL();
         QueryWrapper<NetDataConnectedJava> netdataConnectedQueryWrapper = new QueryWrapper<>();
         netdataConnectedQueryWrapper.lambda().apply(truncSysDateSQL)
@@ -408,24 +376,14 @@ public class NetDataConnectedJavaServiceImpl implements NetDataConnectedJavaServ
                 return 0; // 如果解析或计算出现异常，返回 0
             }
         }));
-        int fromIndex = (currentPage - 1) * pageSize;
-        int toIndex = Math.min(fromIndex + pageSize, filteredList.size());
-        List<NetDataConnectedJava> pageData = filteredList.subList(fromIndex, toIndex);
-        Page<NetDataConnectedJava> page = new Page<>();
-        page.setCurrent(currentPage);
-        page.setSize(pageSize);
-        page.setTotal(filteredList.size());
-        page.setRecords(pageData);
-        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-根据条件" + objectMap + ",查询一二级路路段前置机积压数据信息条数"+page.getTotal(), "NetDataConnectedJavaServiceImpl-queryYEJLLDFrontUnitDataBacklog");
-        return page;
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-查询一二级路路段前置机积压数据信息条数"+filteredList.size(), "NetDataConnectedJavaServiceImpl-queryYEJLLDFrontUnitDataBacklog");
+        return filteredList;
     }
 
     @Override
-    public Page<NetDataConnectedJava> queryYEJLLWFrontUnitDataBacklog(Map<String, Object> objectMap) {
+    public List<NetDataConnectedJava> queryYEJLLWFrontUnitDataBacklog() {
         String uuid = UuidUtil.getUuid();
-        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始根据条件" + objectMap + ",查询一二级路联网中心前置机积压数据信息", "NetDataConnectedJavaServiceImpl-queryYEJLLWFrontUnitDataBacklog");
-        int currentPage = (int) objectMap.get("currentPage");
-        int pageSize = (int) objectMap.get("pageSize");
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始查询一二级路联网中心前置机积压数据信息", "NetDataConnectedJavaServiceImpl-queryYEJLLWFrontUnitDataBacklog");
         String truncSysDateSQL = SqlStringUtil.getTruncSysDateSQL();
         QueryWrapper<NetDataConnectedJava> netdataConnectedQueryWrapper = new QueryWrapper<>();
         netdataConnectedQueryWrapper.lambda().apply(truncSysDateSQL)
@@ -465,15 +423,193 @@ public class NetDataConnectedJavaServiceImpl implements NetDataConnectedJavaServ
                 return 0; // 如果解析或计算出现异常，返回 0
             }
         }));
-        int fromIndex = (currentPage - 1) * pageSize;
-        int toIndex = Math.min(fromIndex + pageSize, filteredList.size());
-        List<NetDataConnectedJava> pageData = filteredList.subList(fromIndex, toIndex);
-        Page<NetDataConnectedJava> page = new Page<>();
-        page.setCurrent(currentPage);
-        page.setSize(pageSize);
-        page.setTotal(filteredList.size());
-        page.setRecords(pageData);
-        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-根据条件" + objectMap + ",查询一二级路联网中心前置机积压数据信息条数"+page.getTotal(), "NetDataConnectedJavaServiceImpl-queryYEJLLWFrontUnitDataBacklog");
-        return page;
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-查询一二级路联网中心前置机积压数据信息条数"+filteredList.size(), "NetDataConnectedJavaServiceImpl-queryYEJLLWFrontUnitDataBacklog");
+        return filteredList;
+    }
+
+    @Override
+    public List<NetDataConnectedJava> queryCenterConnected() {
+        String truncSysDateSQL = SqlStringUtil.getTruncSysDateSQL();
+        QueryWrapper<NetDataConnectedJava> netdataConnectedQueryWrapper = new QueryWrapper<>();
+        netdataConnectedQueryWrapper.lambda().apply(truncSysDateSQL)
+                .eq(NetDataConnectedJava::getBaseType, 2);
+        List<NetDataConnectedJava> netdataConnectedList = netDataConnectedJavaMapper.selectList(netdataConnectedQueryWrapper);
+        //过滤掉dataJson数据为空的就不展示
+        List<NetDataConnectedJava> filteredList = netdataConnectedList.stream()
+                .filter(data -> data.getDataJson() != null && !data.getDataJson().isEmpty())
+                .collect(Collectors.toList());
+        for (NetDataConnectedJava item : filteredList) {
+            Map<String, Object> map = JSONObject.parseObject(item.getDataJson(), Map.class);
+            map.remove("minDate");
+            map.remove("allrecs");
+            map.remove("fileds");
+            map.remove("gantry_pass_lwcenter_recs");
+            map.remove("gantry_pass_lwcenter_mintime");
+            map.remove("in_port_lwcenter_recs");
+            map.remove("in_port_lwcenter_mintime");
+            map.remove("out_port_lwcenter_recs");
+            map.remove("out_port_lwcenter_mintime");
+            item.setDataJson(new JSONObject(map).toString());
+        }
+        filteredList.sort(Comparator.comparingInt((data) -> {
+            try {
+                Map<String, Object> map = JSONObject.parseObject(data.getDataJson(), Map.class);
+                int sum = map.entrySet().stream()
+                        .filter(entry -> entry.getKey().endsWith("recs"))
+                        .mapToInt(entry -> {
+                            try {
+                                return Integer.parseInt(entry.getValue().toString());
+                            } catch (NumberFormatException e) {
+                                return 0; // 如果转换失败，返回 0
+                            }
+                        })
+                        .sum();
+                return -sum; // 以负数形式排序，使得数量最多的数据排在最前面
+            } catch (Exception e) {
+                e.printStackTrace();
+                return 0; // 如果解析或计算出现异常，返回 0
+            }
+        }));
+        return filteredList;
+    }
+
+    @Override
+    public List<NetDataConnectedJava> stationServerEcharts(Date date) {
+        QueryWrapper<NetDataConnectedJava> queryWrapper = new QueryWrapper<>();
+        queryWrapper.lambda().eq(NetDataConnectedJava::getBaseType, 3)
+                .eq(NetDataConnectedJava::getClassDate, date);
+        return netDataConnectedJavaMapper.selectList(queryWrapper);
+    }
+
+    @Override
+    public List<NetDataConnectedJava> queryLWZXmpayServer(Map<String, Object> map) {
+        Date formatDate;
+        String uuid = UuidUtil.getUuid();
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始根据条件" + map + ",查询联网中心mpay的服务器和数据库信息", "NetDataConnectedJavaServiceImpl-YEJLLDFrontUnitServer");
+        if (ObjectUtils.isNotEmpty(map.get("classDate"))) {
+            String classDate = (String) map.get("classDate");
+            formatDate = DateTimeUtil.getFormatDate(classDate, Constant.YYYY_MM_DD);
+        } else {
+            formatDate = DateTimeUtil.getDateByDay(new Date());
+        }
+        QueryWrapper<NetDataConnectedJava> queryWrapper = new QueryWrapper<>();
+        queryWrapper.lambda().eq(NetDataConnectedJava::getClassDate, formatDate)
+                .eq(NetDataConnectedJava::getBaseType, 7);
+        List<NetDataConnectedJava> netDataConnectedJavas = netDataConnectedJavaMapper.selectList(queryWrapper);
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-根据条件" + map + ",查询联网中心mpay的服务器和数据库信息条数为"+netDataConnectedJavas.size(), "NetDataConnectedJavaServiceImpl-YEJLLDFrontUnitServer");
+        return netDataConnectedJavas;
+    }
+
+    @Override
+    public List<NetDataConnectedJava> queryLWZXbyServer(Map<String, Object> map) {
+        Date formatDate;
+        String uuid = UuidUtil.getUuid();
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始根据条件" + map + ",查询联网中心by的服务器和数据库信息", "NetDataConnectedJavaServiceImpl-YEJLLDFrontUnitServer");
+        if (ObjectUtils.isNotEmpty(map.get("classDate"))) {
+            String classDate = (String) map.get("classDate");
+            formatDate = DateTimeUtil.getFormatDate(classDate, Constant.YYYY_MM_DD);
+        } else {
+            formatDate = DateTimeUtil.getDateByDay(new Date());
+        }
+        QueryWrapper<NetDataConnectedJava> queryWrapper = new QueryWrapper<>();
+        queryWrapper.lambda().eq(NetDataConnectedJava::getClassDate, formatDate)
+                .eq(NetDataConnectedJava::getBaseType, 8);
+        List<NetDataConnectedJava> netDataConnectedJavas = netDataConnectedJavaMapper.selectList(queryWrapper);
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-根据条件" + map + ",查询联网中心by的服务器和数据库信息条数为"+netDataConnectedJavas.size(), "NetDataConnectedJavaServiceImpl-YEJLLDFrontUnitServer");
+        return netDataConnectedJavas;
+    }
+
+    @Override
+    public List<NetDataConnectedJava> getLWZXmpayDataBacklog() {
+        String uuid = UuidUtil.getUuid();
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-开始查询联网中心mpay积压数据信息", "NetDataConnectedJavaServiceImpl-queryYEJLLWFrontUnitDataBacklog");
+        String truncSysDateSQL = SqlStringUtil.getTruncSysDateSQL();
+        QueryWrapper<NetDataConnectedJava> netdataConnectedQueryWrapper = new QueryWrapper<>();
+        netdataConnectedQueryWrapper.lambda().apply(truncSysDateSQL)
+                .eq(NetDataConnectedJava::getBaseType, 7);
+        List<NetDataConnectedJava> netdataConnectedList = netDataConnectedJavaMapper.selectList(netdataConnectedQueryWrapper);
+        //过滤掉dataJson数据为空的就不展示
+        List<NetDataConnectedJava> filteredList = netdataConnectedList.stream()
+                .filter(data -> data.getDataJson() != null && !data.getDataJson().isEmpty())
+                .collect(Collectors.toList());
+        for (NetDataConnectedJava item : filteredList) {
+            Map<String, Object> map = JSONObject.parseObject(item.getDataJson(), Map.class);
+            map.remove("minDate");
+            map.remove("allrecs");
+            map.remove("fileds");
+            // 移除所有键名后缀为"mintime"的记录
+            // 使用迭代器的remove方法安全移除元素
+            //map.entrySet().removeIf(entry -> entry.getKey().endsWith("mintime"));
+            item.setDataJson(new JSONObject(map).toString());
+        }
+
+        filteredList.sort(Comparator.comparingInt((data) -> {
+            try {
+                Map<String, Object> map = JSONObject.parseObject(data.getDataJson(), Map.class);
+                int sum = map.entrySet().stream()
+                        .filter(entry -> entry.getKey().endsWith("recs"))
+                        .mapToInt(entry -> {
+                            try {
+                                return Integer.parseInt(entry.getValue().toString());
+                            } catch (NumberFormatException e) {
+                                return 0; // 如果转换失败，返回 0
+                            }
+                        })
+                        .sum();
+                return -sum; // 以负数形式排序，使得数量最多的数据排在最前面
+            } catch (Exception e) {
+                e.printStackTrace();
+                return 0; // 如果解析或计算出现异常，返回 0
+            }
+        }));
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-查询联网中心mpay积压数据信息条数"+filteredList.size(), "NetDataConnectedJavaServiceImpl-queryYEJLLWFrontUnitDataBacklog");
+        return filteredList;
+    }
+
+    @Override
+    public List<NetDataConnectedJava> getLWZXbyDataBacklog() {
+        String uuid = UuidUtil.getUuid();
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-查询联网中心by积压数据信息", "NetDataConnectedJavaServiceImpl-queryYEJLLWFrontUnitDataBacklog");
+        String truncSysDateSQL = SqlStringUtil.getTruncSysDateSQL();
+        QueryWrapper<NetDataConnectedJava> netdataConnectedQueryWrapper = new QueryWrapper<>();
+        netdataConnectedQueryWrapper.lambda().apply(truncSysDateSQL)
+                .eq(NetDataConnectedJava::getBaseType, 8);
+        List<NetDataConnectedJava> netdataConnectedList = netDataConnectedJavaMapper.selectList(netdataConnectedQueryWrapper);
+        //过滤掉dataJson数据为空的就不展示
+        List<NetDataConnectedJava> filteredList = netdataConnectedList.stream()
+                .filter(data -> data.getDataJson() != null && !data.getDataJson().isEmpty())
+                .collect(Collectors.toList());
+        for (NetDataConnectedJava item : filteredList) {
+            Map<String, Object> map = JSONObject.parseObject(item.getDataJson(), Map.class);
+            map.remove("minDate");
+            map.remove("allrecs");
+            map.remove("fileds");
+            // 移除所有键名后缀为"mintime"的记录
+            // 使用迭代器的remove方法安全移除元素
+            //map.entrySet().removeIf(entry -> entry.getKey().endsWith("mintime"));
+            item.setDataJson(new JSONObject(map).toString());
+        }
+
+        filteredList.sort(Comparator.comparingInt((data) -> {
+            try {
+                Map<String, Object> map = JSONObject.parseObject(data.getDataJson(), Map.class);
+                int sum = map.entrySet().stream()
+                        .filter(entry -> entry.getKey().endsWith("recs"))
+                        .mapToInt(entry -> {
+                            try {
+                                return Integer.parseInt(entry.getValue().toString());
+                            } catch (NumberFormatException e) {
+                                return 0; // 如果转换失败，返回 0
+                            }
+                        })
+                        .sum();
+                return -sum; // 以负数形式排序，使得数量最多的数据排在最前面
+            } catch (Exception e) {
+                e.printStackTrace();
+                return 0; // 如果解析或计算出现异常，返回 0
+            }
+        }));
+        LogUtil.WriteLog_Info("[uuid:" + uuid + "]-查询联网中心by积压数据信息条数"+filteredList.size(), "NetDataConnectedJavaServiceImpl-queryYEJLLWFrontUnitDataBacklog");
+        return filteredList;
     }
 }

OperationMonitoring/src/main/resources/static/index.html

@@ -5,8 +5,8 @@
     <meta charset="UTF-8"/>
     
     <title></title>
-  <script type="module" crossorigin src="./assets/index.14ffa99a.js"></script>
-  <link rel="stylesheet" href="./assets/index.9f035f32.css">
+  <script type="module" crossorigin src="./assets/index.49bec8f4.js"></script>
+  <link rel="stylesheet" href="./assets/index.1136415a.css">
 </head>
 <body>
 <div id="app">

OperationMonitoring/src/main/resources/version/1.0.2.txt

@@ -1,5 +1,4 @@
 序号   日期              版本号       说明
 1     2024年12月04日     1.0.0       初始版本号
 2     2024年12月10日     1.0.1       优化查询及页面
-3     2024年12月12日     1.0.2       分公司和收费站积压数据查询页面按照'out_port_center': 1,'in_port_center': 2,'out_port_lwcenter': 3,'in_port_lwcenter': 4,
-                                     'gantry_pass_center': 5,'gantry_pass_lwcenter': 6,'out_port_etcpre_center': 7,'out_port_etcpre_lwcenter': 8,列的顺序展示数据
+3     2024年12月13日     1.0.2       增加mpay和by页面

OperationMonitoringView/node_modules/.vite/deps/_metadata.json

@@ -1,6 +1,6 @@
 {
   "hash": "de155e33",
-  "browserHash": "75cd3205",
+  "browserHash": "2a7ecd63",
   "optimized": {
     "element-plus/es": {
       "src": "../../element-plus/es/index.mjs",
@@ -301,6 +301,18 @@
       "file": "element-plus_es_locale_lang_zh-cn.js",
       "fileHash": "ff9311ca",
       "needsInterop": false
+    },
+    "element-plus/es/components/menu/style/css": {
+      "src": "../../element-plus/es/components/menu/style/css.mjs",
+      "file": "element-plus_es_components_menu_style_css.js",
+      "fileHash": "93174ba9",
+      "needsInterop": false
+    },
+    "element-plus/es/components/menu-item/style/css": {
+      "src": "../../element-plus/es/components/menu-item/style/css.mjs",
+      "file": "element-plus_es_components_menu-item_style_css.js",
+      "fileHash": "c487fcb5",
+      "needsInterop": false
     }
   },
   "chunks": {

OperationMonitoringView/src/util/api/api.js

@@ -46,6 +46,14 @@ export const getYEJLLWFrontUnitDataBacklog = data => post("/OperationMonitoring/
 //一二级路路段前置机
 export const queryYEJLLDFrontUnitServer = data => post("/OperationMonitoring/queryYEJLLDFrontUnitServer", data)
 export const getYEJLLDFrontUnitDataBacklog = data => post("/OperationMonitoring/getYEJLLDFrontUnitDataBacklog", data)
+//联网中心mpay
+export const queryLWZXmpayServer = data => post("/OperationMonitoring/queryLWZXmpayServer", data)
+export const getLWZXmpayDataBacklog = data => post("/OperationMonitoring/getLWZXmpayDataBacklog", data)
+//联网中心by
+export const queryLWZXbyServer = data => post("/OperationMonitoring/queryLWZXbyServer", data)
+export const getLWZXbyDataBacklog = data => post("/OperationMonitoring/getLWZXbyDataBacklog", data)
+
+
 
 
 //ETC门架运营监控
@@ -88,4 +96,8 @@ export const selectAgoPortStats = data => get("/OperationMonitoring/BbPortStat/s
 //logInfo日志的获取
 export const logInfoList = data => get("/OperationMonitoring/NetdataConnected/logInfoList",data)
 //数据积压历史查询
-export const stationServerEcharts = data => get("/OperationMonitoring/NetdataConnected/stationServerEcharts",data)
+export const stationServerEcharts = data => get("/OperationMonitoring/stationServerEcharts",data)
+
+
+//高路中心数据积压
+export const getCenterConnected = data => get("/OperationMonitoring/getCenterConnected",data)

OperationMonitoringView/src/util/axios/axios.js

@@ -23,8 +23,8 @@ axios.defaults.timeout = 1500000;
 // 请求拦截器
 axios.interceptors.request.use(
     config => {
-         // const token = localStorage.getItem('token');
-        const token = "test";
+         const token = localStorage.getItem('token');
+        // const token = "test";
         if (token == null) {
             try {
                 window.parent.toLogin()

OperationMonitoringView/src/util/router/router.js

@@ -8,6 +8,7 @@ import monitoring from '../../views/Monitoring/monitoring.vue';
 import dataBaseInfo from '../../views/Monitoring/dataBaseInfo.vue';
 import indexLoop from '../../views/loop/indexLoop.vue';
 import config from '../../views/loop/config.vue';
+import configJT from '../../views/loop/configJT.vue';
 import echarts from '../../views/loop/echarts.vue';
 import LWZXFrontUnitServer from '../../views/LWZXFrontUnit/LWZXFrontUnitServer.vue';
 import LWZXFrontUnitDataBacklog from '../../views/LWZXFrontUnit/LWZXFrontUnitDataBacklog.vue';
@@ -24,7 +25,96 @@ import recognitionEcharts from "../../views/EtcOperationEcharts/recognitionEchar
 import laneFlowEcharts from "../../views/EtcOperationEcharts/laneFlowEcharts.vue";
 import outComplexEcharts from "../../views/EtcOperationEcharts/outComplexEcharts.vue";
 import entranceAndExitEcharts from "../../views/EtcOperationEcharts/entranceAndExitEcharts.vue";
+import netRecord from "../../views/EtcOperationEcharts/netRecord.vue";
+import indexLoopJT from '../../views/loop/indexLoopJT.vue';
+import indexLoopJT2 from '../../views/loop/indexLoopJT2.vue';
+import etcState from '../../views/loop/etcState.vue';
+import etcStateJT from '../../views/loop/etcStateJT.vue';
+import echartsJT from '../../views/loop/echartsJT.vue';
+import tollStation from '../../views/loop/tollStation.vue';
+import tollStationJT from '../../views/loop/tollStationJT.vue';
+import jtIndex from '../../views/loop/tab/jtIndex.vue';
+import LWZXmpayServer from '../../views/LWZXmpay/LWZXmpayServer.vue';
+import LWZXmpayDataBacklog from '../../views/LWZXmpay/LWZXmpayDataBacklog.vue';
+import LWZXbyServer from '../../views/LWZXby/LWZXbyServer.vue';
+import LWZXbyDataBacklog from '../../views/LWZXby/LWZXbyDataBacklog.vue';
+
+
+
 const routes = [
+    {
+        path: '/OperationMonitoring/jtIndex',
+        component: jtIndex,
+        children: [
+            {
+                path: '/OperationMonitoring/configJT',
+                component: configJT
+            },
+            {
+                path: '/OperationMonitoring/indexLoopJT',
+                component: indexLoopJT
+            },
+            {
+                path: '/OperationMonitoring/etcStateJT',
+                component: etcStateJT
+            },
+            {
+                path: '/OperationMonitoring/tollStationJT',
+                component: tollStationJT
+            },
+            {
+                path: '/OperationMonitoring/echartsJT',
+                component: echartsJT
+            }
+        ]
+    },
+
+
+
+    {
+        path: '/OperationMonitoring/LWZXmpayServer',
+        component: LWZXmpayServer
+    },
+    {
+        path: '/OperationMonitoring/LWZXmpayDataBacklog',
+        component: LWZXmpayDataBacklog
+    },
+    {
+        path: '/OperationMonitoring/LWZXbyServer',
+        component: LWZXbyServer
+    },
+    {
+        path: '/OperationMonitoring/LWZXbyDataBacklog',
+        component: LWZXbyDataBacklog
+    },
+    {
+        path: '/OperationMonitoring/indexLoopJT',
+        component: indexLoopJT
+    },
+    {
+        path: '/OperationMonitoring/indexLoopJT2',
+        component: indexLoopJT2
+    },
+    {
+        path: '/OperationMonitoring/etcState',
+        component: etcState
+    },
+    {
+        path: '/OperationMonitoring/etcStateJT',
+        component: etcStateJT
+    },
+    {
+        path: '/OperationMonitoring/echartsJT',
+        component: echartsJT
+    },
+    {
+        path: '/OperationMonitoring/tollStation',
+        component: tollStation
+    },
+    {
+        path: '/OperationMonitoring/tollStationJT',
+        component: tollStationJT
+    },
     {
         path: '/OperationMonitoring/echarts',
         component: echarts
@@ -37,6 +127,10 @@ const routes = [
         path: '/OperationMonitoring/boundariesEcharts',
         component: boundariesEcharts
     },
+    {
+        path: '/OperationMonitoring/netRecord',
+        component: netRecord
+    },
     {
         path: '/OperationMonitoring/gantryFlowRateEcharts',
         component: gantryFlowRateEcharts

OperationMonitoringView/src/views/EtcOperationEcharts/boundariesEcharts.vue

@@ -2,29 +2,29 @@
   <div style="display: flex; align-items: flex-start;">
     <div ref="chartDom1" id="ref" style="width: 840px;height:400px;"></div>
     <div class="button-container">
-    <button ref="chartSwitch1" class="chart-switch-button" @click="switchChartType(1)">
-      <span style="font-size: 24px;">&#x1F4CA;</span>
-    </button>
+      <button ref="chartSwitch1" class="chart-switch-button" @click="switchChartType(1)">
+        <span style="font-size: 24px;">&#x1F4CA;</span>
+      </button>
     </div>
     <div ref="chartDom2" id="boundary" style="width: 840px;height:400px;"></div>
     <div class="button-container">
-    <button ref="chartSwitch2" class="chart-switch-button" @click="switchChartType(2)">
-      <span style="font-size: 24px;">&#x1F4CA;</span>
-    </button>
+      <button ref="chartSwitch2" class="chart-switch-button" @click="switchChartType(2)">
+        <span style="font-size: 24px;">&#x1F4CA;</span>
+      </button>
     </div>
   </div>
   <div style="display: flex; align-items: flex-start;">
     <div ref="chartDom3" id="fee" style="width: 840px;height:400px;"></div>
     <div class="button-container">
-    <button ref="chartSwitch3" class="chart-switch-button" @click="switchChartType(3)">
-      <span style="font-size: 24px;">&#x1F4CA;</span>
-    </button>
+      <button ref="chartSwitch3" class="chart-switch-button" @click="switchChartType(3)">
+        <span style="font-size: 24px;">&#x1F4CA;</span>
+      </button>
     </div>
     <div ref="chartDom4" id="feeBoundary" style="width: 840px;height:400px;"></div>
     <div class="button-container">
-    <button ref="chartSwitch4" class="chart-switch-button" @click="switchChartType(4)">
-      <span style="font-size: 24px;">&#x1F4CA;</span>
-    </button>
+      <button ref="chartSwitch4" class="chart-switch-button" @click="switchChartType(4)">
+        <span style="font-size: 24px;">&#x1F4CA;</span>
+      </button>
     </div>
   </div>
 </template>

OperationMonitoringView/src/views/EtcOperationEcharts/netRecord.vue

@@ -0,0 +1,326 @@
+<template>
+  <el-row>
+    <h1>历史积压数据</h1>
+    <el-col :span="24">
+      <div style="padding: 10px 0; display: flex; align-items: center;">
+        <!-- 日期查询 -->
+        <el-form-item label="查询日期">
+          <el-date-picker
+              v-model="classDate"
+              type="date"
+              placeholder="选择日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="width: 180px;">
+          </el-date-picker>
+        </el-form-item>
+        <el-button type="primary" style="margin-left: 0.5%;margin-top: -15px;" @click="queryAllData">
+          <el-icon style="vertical-align: middle;">
+            <i class="el-icon-search"></i>
+          </el-icon>
+          <span style="vertical-align: middle;"> 查询 </span>
+        </el-button>
+      </div>
+      <div>
+        <div class="chart-container">
+          <div id="chart" style="width: 1000px;height:400px;"></div>
+          <div id="traffic" style="width: 1000px;height:400px;"></div>
+        </div>
+        <div id="toll" style="width: 1800px;height:400px;"></div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import pro from "../../util/tool";
+import {queryNetConnected, stationServerEcharts} from "../../util/api/api";
+import * as echarts from 'echarts';
+
+export default {
+  name: "netRecord",
+  data() {
+    return {
+      classDate: pro.dateFormatDay(new Date()),
+      in_port_center_recs: "",
+      out_port_center_recs: "",
+      gantry_pass_center_recs: "",
+      in_port_lwcenter_recs: "",
+      out_port_lwcenter_recs: "",
+      gantry_pass_lwcenter_recs: "",
+      dataJson: [],
+      companyNames: [],
+      inPortData: [],
+      outPortData: [],
+      gantryData: [],
+      chart: null
+    };
+  },
+  mounted() {
+    this.queryAllData();
+  },
+  methods: {
+    queryAllData() {
+      this.netData();
+      this.trafficData();
+      this.tollData();
+    },
+    netData() {
+      queryNetConnected({"classDate": this.classDate}).then(res => {
+        let datas = [];
+        this.companyNames = [];
+        this.inPortData = [];
+        this.outPortData = [];
+        this.gantryData = [];
+        for (const item of res.data) {
+          let itemData = {
+            baseName: item.baseName,
+            data: {},
+            in_port_center_recs: "",
+            out_port_center_recs: "",
+            gantry_pass_center_recs: ""
+          };
+          if (item.dataJson) {
+            const data = JSON.parse(item.dataJson);
+            data.baseName = item.baseName;
+            const companyName = item.baseName;
+            this.companyNames.push(companyName);
+            this.inPortData.push(data.in_port_center_recs);
+            this.outPortData.push(data.out_port_center_recs);
+            this.gantryData.push(data.gantry_pass_center_recs);
+            itemData.data = data;
+            datas.push(itemData);
+            this.dataJson.push(data);
+          }
+        }
+        this.drawChart();
+      }).catch(error => {
+        console.error("查询失败:", error);
+      });
+    },
+    drawChart() {
+      const myChart = echarts.init(document.getElementById('chart'));
+
+      const option = {
+        title: {
+          text: '分公司-联网中心-数据积压',
+          top: '5%',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        legend: {
+          top: '15%',
+          data: ['入口积压数量', '出口积压数量', '门架积压数量']
+        },
+        xAxis: {
+          type: 'category',
+          data: this.companyNames
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '入口积压数量',
+            type: 'line',
+            color: 'blue',
+            data: this.inPortData
+          },
+          {
+            name: '出口积压数量',
+            type: 'line',
+            color: 'green',
+            data: this.outPortData
+          },
+          {
+            name: '门架积压数量',
+            type: 'line',
+            color: '#FFDB5C',
+            data: this.gantryData
+          }
+        ]
+      };
+      myChart.setOption(option);
+    },
+    trafficData() {
+      queryNetConnected({"classDate": this.classDate}).then(res => {
+        let datas = [];
+        this.companyNames = [];
+        this.inPortData = [];
+        this.outPortData = [];
+        this.gantryData = [];
+        for (const item of res.data) {
+          let itemData = {
+            baseName: item.baseName,
+            data: {},
+            in_port_lwcenter_recs: "",
+            out_port_lwcenter_recs: "",
+            gantry_pass_lwcenter_recs: ""
+          };
+          if (item.dataJson) {
+            const data = JSON.parse(item.dataJson);
+            data.baseName = item.baseName;
+            const companyName = item.baseName;
+            this.companyNames.push(companyName);
+            this.inPortData.push(data.in_port_lwcenter_recs);
+            this.outPortData.push(data.out_port_lwcenter_recs);
+            this.gantryData.push(data.gantry_pass_lwcenter_recs);
+            itemData.data = data;
+            datas.push(itemData);
+            this.dataJson.push(data);
+          }
+        }
+        this.initChart();
+      }).catch(error => {
+        console.error("查询失败:", error);
+      });
+    },
+    initChart() {
+      const myChart = echarts.init(document.getElementById('traffic'));
+      const option = {
+        title: {
+          text: '分公司-交通集团-数据积压',
+          top: '5%',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        legend: {
+          top: '15%',
+          data: ['入口积压数量', '出口积压数量', '门架积压数量']
+        },
+        xAxis: {
+          type: 'category',
+          data: this.companyNames
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '入口积压数量',
+            type: 'line',
+            color: 'blue',
+            data: this.inPortData
+          },
+          {
+            name: '出口积压数量',
+            type: 'line',
+            color: 'green',
+            data: this.outPortData
+          },
+          {
+            name: '门架积压数量',
+            type: 'line',
+            color: '#FFDB5C',
+            data: this.gantryData
+          }
+        ]
+      };
+      myChart.setOption(option);
+    },
+    tollData() {
+      stationServerEcharts({"classDate": this.classDate}).then(res => {
+        let datas = [];
+        this.companyNames = [];
+        this.inPortData = [];
+        this.outPortData = [];
+        this.gantryData = [];
+        for (const item of res.data) {
+          let itemData = {
+            baseName: item.baseName,
+            data: {},
+            in_port_center_recs: "",
+            out_port_center_recs: "",
+            gantry_pass_center_recs: ""
+          };
+          if (item.dataJson) {
+            const data = JSON.parse(item.dataJson);
+            data.baseName = item.baseName;
+            const companyName = item.baseName;
+            this.companyNames.push(companyName);
+            this.inPortData.push(data.in_port_center_recs);
+            this.outPortData.push(data.out_port_center_recs);
+            this.gantryData.push(data.gantry_pass_center_recs);
+            itemData.data = data;
+            datas.push(itemData);
+            this.dataJson.push(data);
+          }
+        }
+        this.tollChart();
+      }).catch(error => {
+        console.error("查询失败:", error);
+      });
+    },
+    tollChart() {
+      const myChart = echarts.init(document.getElementById('toll'));
+
+      const option = {
+        title: {
+          text: '收费站-数据积压',
+          top: '5%',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        legend: {
+          top: '15%',
+          data: ['入口积压数量', '出口积压数量', '门架积压数量']
+        },
+        xAxis: {
+          type: 'category',
+          data: this.companyNames
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '入口积压数量',
+            type: 'line',
+            color: 'blue',
+            data: this.inPortData
+          },
+          {
+            name: '出口积压数量',
+            type: 'line',
+            color: 'green',
+            data: this.outPortData
+          },
+          {
+            name: '门架积压数量',
+            type: 'line',
+            color: '#FFDB5C',
+            data: this.gantryData
+          }
+        ]
+      };
+      myChart.setOption(option);
+    },
+  }
+}
+</script>
+
+<style scoped>
+.chart-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.chart-container div {
+  width: 49%;
+}
+</style>

OperationMonitoringView/src/views/HRFrontUnit/HRFrontUnitDataBacklog.vue

@@ -47,11 +47,6 @@ export default {
       monitoringAndTableNames: [],
       tableName: "",
       monitoring: "",
-      searchForm: {
-        total: 0,
-        currentPage: 1,
-        pageSize: 10,
-      },
       tableLoading:false,
       countdownTime: 1800, // 设置初始倒计时时间为1800秒（半小时）
       countdownTimer: null // 存储倒计时定时器

OperationMonitoringView/src/views/LWZXFrontUnit/LWZXFrontUnitDataBacklog.vue

@@ -28,16 +28,6 @@
         </el-table-column>
       </el-table>
     </div>
-    <el-pagination
-        background
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="searchForm.currentPage"
-        :page-sizes="[20, 50, 100]"
-        :page-size="searchForm.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="searchForm.total">
-    </el-pagination>
   </div>
 </template>
 
@@ -54,11 +44,6 @@ export default {
       jsonData: [],
       baseName:'',
       columns:[],
-      searchForm: {
-        total: 0,
-        currentPage: 1,
-        pageSize: 20,
-      },
       monitoringAndTableNames: [],
       tableName: "",
       monitoring: "",
@@ -111,11 +96,11 @@ export default {
     async setNetControl() {
       this.tableLoading = true;
       try {
-        getLWZXFrontUnitDataBacklog(this.searchForm).then(res => {
+        getLWZXFrontUnitDataBacklog().then(res => {
           console.log(res)
-          if (res && res.records && res.records.length > 0) {
+          if (res && res.length > 0) {
             //过滤空的dataJson字段
-            let filteredRecords = res.records.filter(item => item.dataJson && item.dataJson !== '{}');
+            let filteredRecords = res.filter(item => item.dataJson && item.dataJson !== '{}');
             this.jsonData = filteredRecords.map(item => {
               const data = JSON.parse(item.dataJson);
               data.baseName = item.baseName;
@@ -123,12 +108,8 @@ export default {
               this.markNonTodayTimes(data);
               return data;
             });
-            this.searchForm.total = res.total;
-            this.searchForm.currentPage = res.current;
-            this.searchForm.pageSize = res.size;
           } else {
             this.jsonData = [];
-            this.searchForm.total = 0;
             ElMessage.info('没有查询到数据');
           }
           this.fetchColumnConfig();
@@ -218,14 +199,6 @@ export default {
         this.columns = [];
       }
     },
-    handleSizeChange(val) { //页大小改变
-      this.searchForm.pageSize = val;
-      this.setNetControl();
-    },
-    handleCurrentChange(val) { //当前页改变
-      this.searchForm.currentPage = val;
-      this.setNetControl();
-    },
     startCountdown() {
       this.countdownTimer = setInterval(() => {
         if (this.countdownTime > 0) {

OperationMonitoringView/src/views/LWZXby/LWZXbyDataBacklog.vue

@@ -0,0 +1,318 @@
+<template>
+  <div id="app">
+    <el-row>
+      <h2 class="countdown-title">数据更新倒计时:</h2>
+      <div class="countdown-container">
+        <div class="countdown-digit">{{ countdownTimeFormatted[0].value }}</div>
+        <div v-if="countdownTimeFormatted.length > 1 && countdownTimeFormatted[1]" class="colon">:</div>
+        <div class="countdown-digit">{{ countdownTimeFormatted[1].value }}</div>
+      </div>
+    </el-row>
+    <h1>联网中心by-数据积压</h1>
+    <HighRoadCenter/>
+    <div class="table-container" >
+      <el-table :data="jsonData" v-loading="tableLoading" border
+                height="96%"
+      >
+        <el-table-column
+            v-for="column in columns"
+            :key="column.prop"
+            :prop="column.prop" :label="column.label"
+            align="center"
+        >
+          <template v-slot="scope">
+<!--        <span :style="getCellStyle(scope.row, column.prop)">-->
+<!--          {{ scope.row[column.prop] && scope.row[column.prop].value !== undefined ? scope.row[column.prop].value : scope.row[column.prop] }}-->
+<!--        </span>-->
+            <span :class="{'red-text': scope.row[column.prop] && scope.row[column.prop].isToday !== undefined && !scope.row[column.prop].isToday}">
+              {{ scope.row[column.prop] && scope.row[column.prop].value !== undefined ? scope.row[column.prop].value : scope.row[column.prop] }}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import {queryMonitoring, getLWZXbyDataBacklog} from "../../util/api/api";
+import {ElMessage} from "element-plus";
+import pro from "../../util/tool";
+
+export default {
+  name: "LWZXbyDataBacklog",
+  data() {
+    return {
+      today: new Date().toISOString().slice(0, 10), // 格式化今天的日期
+      jsonData: [],
+      baseName:'',
+      columns:[],
+      monitoringAndTableNames: [],
+      tableName: "",
+      monitoring: "",
+      tableLoading:false,
+      countdownTime: 1800, // 设置初始倒计时时间为1800秒（半小时）
+      countdownTimer: null // 存储倒计时定时器
+    };
+  },
+  computed: {
+    // 格式化倒计时时间以便于显示
+    countdownTimeFormatted() {
+      const minutes = Math.floor((this.countdownTime % 3600) / 60);
+      const seconds = Math.floor(this.countdownTime % 60);
+      return [
+        {index: 0, value: minutes.toString().padStart(2, '0')},
+        {index: 1, value: seconds.toString().padStart(2, '0')}
+      ]
+    },
+  },
+  mounted() {
+    this.setNetControl();
+    this.startCountdown();
+    this.fetchTableName().then(() => {
+      this.fetchColumnConfig();
+    })
+  },
+  methods: {
+    getCellStyle(row, prop) {
+      let style = {};
+      // 检查updateDate字段是否不是当天
+      if (prop === 'updateDate' && this.isNotToday(row[prop])) {
+        style.color = 'red';
+      }
+      // 检查数据是否大于1000
+      if (prop !== 'updateDate' && this.isValueGreaterThan1000(row[prop])) {
+        style.color = 'red';
+      }
+      return style;
+    },
+    isNotToday(dateStr) {
+      const date = new Date(dateStr);
+      const today = new Date(this.today);
+      // 比较日期部分是否相同
+      return date.toISOString().slice(0, 10) !== today.toISOString().slice(0, 10);
+    },
+    isValueGreaterThan1000(value) {
+      // 检查值是否大于1000
+      return value > 1000;
+    },
+    async setNetControl() {
+      this.tableLoading = true;
+      try {
+        getLWZXbyDataBacklog().then(res => {
+          console.log(res)
+          if (res  && res.length > 0) {
+            //过滤空的dataJson字段
+            let filteredRecords = res.filter(item => item.dataJson && item.dataJson !== '{}');
+            this.jsonData = filteredRecords.map(item => {
+              const data = JSON.parse(item.dataJson);
+              data.baseName = item.baseName;
+              data.updateDate = item.updateDate;
+              this.markNonTodayTimes(data);
+              return data;
+            });
+          } else {
+            this.jsonData = [];
+            ElMessage.info('没有查询到数据');
+          }
+          this.fetchColumnConfig();
+        })
+      } catch (error) {
+        console.error(error);
+        ElMessage.error('获取数据失败，请稍后重试！')
+      }
+      this.tableLoading = false;
+    },
+    async fetchTableName() {
+      try {
+        const res = await queryMonitoring();
+        if (res.data) {
+          this.tableData = res.data;
+          this.monitoringAndTableNames =res.data
+              .filter(record => record.baseType === 8) // 只保留baseType为8的记录
+              .map(record => ({
+            monitoring: record.monitoring,
+            tableName: record.tableName
+          }));
+        }
+      } catch (error) {
+        console.error('获取监控字段失败:', error);
+        ElMessage.error('获取监控字段失败，请稍后重试！');
+        // 设置默认值
+        this.tableName = '未知';
+      }
+    },
+    async fetchColumnConfig() {
+      if (this.jsonData.length > 0 && this.monitoringAndTableNames.length > 0) {
+        const columnConfig = this.jsonData[0];
+        const keys = Object.keys(columnConfig);
+        // 定义前缀到排序优先级的映射
+        const prefixOrder = {
+          'out_': 1,
+          'in_': 2,
+          'gantry_': 3
+        };
+        // 将baseName单独处理，确保它作为第一列
+        const baseNameKey = 'baseName';
+        const otherKeys = keys.filter(key => key !== baseNameKey);
+
+        // 自定义排序函数
+        const sortedOtherKeys = otherKeys.sort((a, b) => {
+          // 获取两个键名的前缀
+          const prefixA = Object.keys(prefixOrder).find(p => a.startsWith(p));
+          const prefixB = Object.keys(prefixOrder).find(p => b.startsWith(p));
+
+          // 如果两个键名有相同的前缀，按照原始顺序排序
+          if (prefixA === prefixB) {
+            return 0;
+          }
+
+          // 如果一个键名有前缀而另一个没有，将有前缀的键名排在前面
+          if (!prefixA || !prefixB) {
+            return prefixA ? -1 : 1;
+          }
+
+          // 根据前缀的排序优先级进行排序
+          return prefixOrder[prefixA] - prefixOrder[prefixB];
+        });
+
+        // 合并baseName和排序后的其他键
+        const sortedKeys = [baseNameKey, ...sortedOtherKeys];
+        this.columns = sortedKeys.map(key => {
+          let label = key;
+          if (label.indexOf("baseName") !== -1){
+            label = '联网中心by';
+          }else  if (label.indexOf("updateDate") !== -1){
+            label = '更新时间';
+          }
+          const matchedRecord = this.monitoringAndTableNames.find(record =>
+              key.indexOf(record.monitoring) !== -1
+          );
+          if (matchedRecord) {
+            if (key.endsWith('recs')) {
+              label = `${matchedRecord.tableName}`;
+            } else if (key.endsWith('mintime')) {
+              label = `${matchedRecord.tableName}`;
+            }
+          }
+          return {
+            prop: key,
+            label: label
+          };
+        });
+      } else {
+        this.columns = [];
+      }
+    },
+    startCountdown() {
+      this.countdownTimer = setInterval(() => {
+        if (this.countdownTime > 0) {
+          this.countdownTime -= 1;
+        } else {
+          clearInterval(this.countdownTimer);
+          this.countdownTime = 1800; // 重置倒计时时间
+          // 倒计时结束后自动查询
+          this.setNetControl();
+          // 再次启动倒计时
+          this.startCountdown();
+        }
+      }, 1000);
+    },
+    refreshData() {
+      // 刷新页面数据
+      this.setNetControl();
+      //重新启动倒计时
+      this.startCountdown();
+    },
+    beforeDestroy() {
+      if (this.countdownTimer) {
+        clearInterval(this.countdownTimer);
+      }
+    },
+    markNonTodayTimes(rowData) {
+      const today = pro.dateFormatDay(new Date()); // 获取当前日期的格式化字符串
+
+      Object.keys(rowData).forEach((key) => {
+        // 检查是否是mintime字段
+        if (key.endsWith('mintime')) {
+          const dateValue = new Date(rowData[key]);
+          const formattedDate = pro.dateFormatDay(dateValue); // 获取日期的 "YYYY-MM-DD" 格式
+          const isToday = formattedDate === today;
+
+          // 为mintime字段创建包含value和isToday的对象
+          rowData[key] = {
+            value: rowData[key],
+            isToday: isToday
+          };
+          // 检查并设置对应recs字段的isToday属性
+          const recsKey = key.replace('mintime', 'recs');
+          if (recsKey in rowData) {
+            rowData[recsKey] = {
+              value: rowData[recsKey],
+              isToday: isToday // 将recs字段的isToday设置为与mintime字段相同
+            };
+          }
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.table-container {
+  height: 70vh;
+  overflow-y: auto;
+  margin-top: 10px; /* 调整边距 */
+}
+:deep(.my-label) {
+  background: #a0cfff !important;
+}
+:deep(.my-content) {
+  background: #dedfe0;
+}
+.countdown-container {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  margin-top: 20px;
+  position: relative;
+}
+
+.countdown-digit {
+  display: inline-block;
+  margin: 0 5px;
+  font-size: 48px;
+  font-weight: bold;
+  text-align: center;
+  border-radius: 4px;
+  background-color: rgba(128, 128, 128, 0.8);
+  color: #333333;
+  padding: 3px 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  position: relative;
+}
+
+/*添加动画效果，数字翻转*/
+@keyframes flip {
+  from {
+    transform: rotateY(0deg);
+  }
+  to {
+    transform: rotateY(360deg);
+  }
+}
+
+.colon {
+  display: inline-block;
+  font-size: 48px;
+  margin: 0 5px;
+  color: #6b778c;
+}
+.red-text {
+  color: red;
+}
+/*h2 {*/
+/*  color: white;*/
+/*}*/
+</style>

OperationMonitoringView/src/views/LWZXby/LWZXbyServer.vue

@@ -0,0 +1,368 @@
+<template>
+  <el-row>
+    <h2 class="countdown-title">数据更新倒计时:</h2>
+    <div class="countdown-container">
+      <div class="countdown-digit">{{ countdownTimeFormatted[0].value }}</div>
+      <div v-if="countdownTimeFormatted.length > 1 && countdownTimeFormatted[1]" class="colon">:</div>
+      <div class="countdown-digit">{{ countdownTimeFormatted[1].value }}</div>
+    </div>
+    <el-col :span="24">
+      <div style="padding: 10px 0; display: flex; align-items: center;">
+        <!-- 日期查询 -->
+        <el-form-item label="查询日期">
+          <el-date-picker
+              v-model="classDate"
+              type="date"
+              placeholder="选择日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="width: 180px;">
+          </el-date-picker>
+        </el-form-item>
+        <el-button type="primary" style="margin-left: 0.5%;margin-top: -15px;" @click="setNetControl">
+          <el-icon style="vertical-align: middle;">
+            <search/>
+          </el-icon>
+          <span style="vertical-align: middle;"> 查询 </span>
+        </el-button>
+      </div>
+    </el-col>
+  </el-row>
+  <div class="data-container">
+    <!-- 固定标题行 -->
+    <div class="header-row">
+      <h1 class="header-title">联网中心by-服务器</h1>
+      <h1 class="header-title" style="margin-left: 416px">联网中心by-数据库</h1>
+    </div>
+    <div class="scroll-container">
+      <el-row>
+        <el-col :span="12">
+          <div >
+
+          </div>
+          <div class="branch-container">
+            <div>
+              <!-- SRV -->
+              <div style="width: 500px" class="flex-container" border>
+                <div v-for="(item,index) in data" :key="index">
+                  <div style="font-size: 30px;"> {{ item.baseName }}</div>
+                  <el-tooltip  placement="bottom" effect="light" v-for="(items, index) in item.SRV" :key="`srv-${index}`">
+                    <template #content> {{ items.STARTDT }} - {{ items.STOPDT }} </template>
+                    <div class="myClass"
+                         :style="{ backgroundColor: getColor(items.state),width:getWith(items.STOPDT,items.STARTDT) }">
+                    </div>
+                  </el-tooltip>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <!-- DB -->
+        <el-col :span="12">
+          <div id="app">
+          </div>
+          <div class="branch-container">
+            <div style="width: 500px" class="flex-container">
+              <div v-for="(item,index) in data" :key="index">
+                <div style="font-size: 30px;">{{ item.baseName }}</div>
+                <el-tooltip  placement="bottom" effect="light" v-for="(items, index) in item.DB" :key="`db-${index}`">
+                  <template #content> {{ items.STARTDT }} - {{ items.STOPDT }} </template>
+                  <div  class="myClass"
+                        :style="{ backgroundColor: getColor(items.state),width:getWith(items.STOPDT,items.STARTDT) }">
+                  </div>
+                </el-tooltip>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import {queryLWZXbyServer} from "../../util/api/api";
+import moment from "moment";
+import pro from "../../util/tool";
+
+export default {
+  name: 'LWZXbyServer',
+  data() {
+    return {
+      SRV: [],
+      DB: [],
+      connectJson: [],
+      baseName: [],
+      data: [],
+      classDate: moment(new Date()).format('YYYY-MM-DD'),
+      startTime: '',
+      stopTime: '',
+      showTimeData: false,
+      countdownTime: 1800, // 设置初始倒计时时间为1800秒（半小时）
+      countdownTimer: null // 存储倒计时定时器
+    };
+  },
+  computed: {
+    // 格式化倒计时时间以便于显示
+    countdownTimeFormatted() {
+      const minutes = Math.floor((this.countdownTime % 3600) / 60);
+      const seconds = Math.floor(this.countdownTime % 60);
+      return [
+        {index: 0, value: minutes.toString().padStart(2, '0')},
+        {index: 1, value: seconds.toString().padStart(2, '0')}
+      ]
+    },
+  },
+  mounted() {
+    this.setNetControl();
+    this.startCountdown();
+  },
+  methods: {
+    async setNetControl() {
+      try {
+        queryLWZXbyServer({"classDate": this.classDate}).then(res => {
+          let datas = [];
+          for (const item of res.data) {
+            let itemData = {baseName: item.baseName, SRV: [], DB: [], STARTDT: "", STOPDT: "",timeEntries: [],srvFailnum: item.srvFailnum};
+            const data = JSON.parse(item.connectJson);
+            for (let i = 0; i < data.SRV.length; i++) {
+              const srvInfo = data.SRV[i];
+              const state = srvInfo.STATE;
+              const startTime = srvInfo.STARTDT;
+              const stopTime = srvInfo.STOPDT;
+              // 创建时间条目对象并添加到 itemData.timeEntries 数组中
+              itemData.timeEntries.push({
+                state: state,
+                startTime: startTime,
+                stopTime: stopTime
+              });
+              // 为每个SRV创建一个对象，并将其添加到itemData.SRV数组中
+              itemData.SRV.push({
+                "STARTDT":srvInfo.STARTDT,
+                "STOPDT":srvInfo.STOPDT,
+                "state":state
+              });
+            }
+
+            for (let i = 0; i < data.DB.length; i++) {
+              const srvInfo = data.DB[i];
+              const state = srvInfo.STATE;
+              const startTime = srvInfo.STARTDT;
+              const stopTime = srvInfo.STOPDT;
+              itemData.timeEntries.push({
+                state: state,
+                startTime: startTime,
+                stopTime: stopTime
+              });
+              // 为每个SRV创建一个对象，并将其添加到itemData.SRV数组中
+              itemData.DB.push({
+                "STARTDT":srvInfo.STARTDT,
+                "STOPDT":srvInfo.STOPDT,
+                "state":state
+              });
+            }
+            datas.push(itemData);
+            this.baseName = item.baseName;
+            this.connectJson.push(data);
+          }
+          // 按照 srvFailnum 属性对 datas 数组进行排序
+          datas.sort((a, b) => b.srvFailnum - a.srvFailnum);
+          this.data = datas;
+        })
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    getWith(end,start) {
+      let date=new Date()
+      let dateStr=pro.dateFormatDay(date)
+      let todayDate=new Date(dateStr+' 00:00:00')
+      let endD=new Date(end);
+      let startD=new Date(start);
+      return (((endD.getTime()-startD.getTime())/(date.getTime()-todayDate.getTime()))*100).toFixed(2) + '%'
+    },
+    getColor(STATE) {
+      // 根据状态返回颜色
+      return STATE === 1 ? 'red' : 'green';
+    },
+    showTime(item, event) {
+      // 清空之前的时间数据
+      this.startTime = '';
+      this.stopTime = '';
+      this.showTimeData = false;
+
+      // 检查 item 是否存在以及是否包含 timeEntries 属性
+      if (item && item.timeEntries && item.timeEntries.length > 0) {
+        // 根据鼠标悬停的元素的背景颜色（红色或绿色）来确定要显示的时间
+        const color = event.target.style.backgroundColor;
+        for (const entry of item.timeEntries) {
+          if (color === this.getColor(entry.state)) {
+            this.startTime = entry.startTime;
+            this.stopTime = entry.stopTime;
+            this.showTimeData = true;
+            break; // 找到匹配的状态后停止循环
+          }
+        }
+      }
+      // 使用 $nextTick 确保 DOM 已更新
+      this.$nextTick(() => {
+        const timeDisplayEl = this.$refs.timeDisplay;
+        if (timeDisplayEl) {
+          timeDisplayEl.style.display = 'block';
+        }
+      })
+    },
+    hideTime() {
+      this.showTimeData = false;
+      this.startTime = '';
+      this.stopTime = '';
+    },
+    startCountdown() {
+      this.countdownTimer = setInterval(() => {
+        if (this.countdownTime > 0) {
+          this.countdownTime -= 1;
+        } else {
+          clearInterval(this.countdownTimer);
+          this.countdownTime = 1800; // 重置倒计时时间
+          // 倒计时结束后自动查询
+          this.setNetControl();
+          // 再次启动倒计时
+          this.startCountdown();
+        }
+      }, 1000);
+    },
+    refreshData() {
+      // 刷新页面数据
+      this.setNetControl();
+      //重新启动倒计时
+      this.startCountdown();
+    },
+    beforeDestroy() {
+      if (this.countdownTimer) {
+        clearInterval(this.countdownTimer);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.branch-container {
+  display: flex;
+  align-items: center; /* 垂直居中 */
+}
+
+/*.branch-name {*/
+/*  margin-right: 10px; !* 分公司名字和状态指示器之间的间距 *!*/
+/*}*/
+
+/*.status-indicator {*/
+/*  width: 50px; !* 横向长方形的宽度 *!*/
+/*  height: 20px; !* 横向长方形的高度 *!*/
+
+/*  position: relative; !* 以便为渐变背景定位 *!*/
+/*}*/
+
+/*!* 使用线性渐变创建红绿相间的效果 *!*/
+/*.status-indicator::before {*/
+/*  content: '';*/
+/*  position: absolute;*/
+/*  top: 0;*/
+/*  left: 50%; !* 从中间开始渐变 *!*/
+/*  width: 50%; !* 渐变占据一半的宽度 *!*/
+/*  height: 100%;*/
+/*}*/
+
+.myClass {
+  height: 20px;
+  float: left;
+}
+
+.flex-container {
+  display: flex;
+  flex-direction: column; /* 设置Flexbox的主轴为纵向 */
+}
+
+/*.time-display {*/
+/*  position: absolute;*/
+/*  background-color: #fff;*/
+/*  border: 1px solid #ccc;*/
+/*  padding: 10px;*/
+/*  font-size: 12px;*/
+/*  z-index: 1000; !* 确保时间显示在最上层 *!*/
+/*  width: 300px;*/
+/*}*/
+.scroll-container {
+  width: 100%; /* 容器宽度 */
+  height: 530px; /* 容器高度，根据需要调整 */
+  overflow-y: auto; /* 垂直方向滚动 */
+  overflow-x: hidden; /* 隐藏水平方向的滚动条 */
+  border: 1px solid #ccc; /* 容器边框，可选 */
+  padding: 10px; /* 容器内边距，可选 */
+}
+.data-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.header-row {
+  display: flex;
+  width: 100%;
+  margin-bottom: 10px; /* 根据需要调整 */
+}
+/* 标题样式 */
+.header-title {
+  font-size: 40px; /* 根据需要调整 */
+  margin: 0px;
+}
+:deep(.my-label) {
+  background: #a0cfff !important;
+}
+:deep(.my-content) {
+  background: #dedfe0;
+}
+.countdown-container {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  margin-top: 20px;
+  position: relative;
+}
+
+.countdown-digit {
+  display: inline-block;
+  margin: 0 5px;
+  font-size: 48px;
+  font-weight: bold;
+  text-align: center;
+  border-radius: 4px;
+  background-color: rgba(128, 128, 128, 0.8);
+  color: #333333;
+  padding: 3px 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  position: relative;
+}
+
+/*添加动画效果，数字翻转*/
+@keyframes flip {
+  from {
+    transform: rotateY(0deg);
+  }
+  to {
+    transform: rotateY(360deg);
+  }
+}
+
+.colon {
+  display: inline-block;
+  font-size: 48px;
+  margin: 0 5px;
+  color: #6b778c;
+}
+/*h2 {*/
+/*  color: white;*/
+/*}*/
+/*h1{*/
+/*  color: white;*/
+/*}*/
+</style>

OperationMonitoringView/src/views/LWZXmpay/LWZXmpayDataBacklog.vue

@@ -0,0 +1,323 @@
+<template>
+  <div id="app">
+    <el-row>
+      <h2 class="countdown-title">数据更新倒计时:</h2>
+      <div class="countdown-container">
+        <div class="countdown-digit">{{ countdownTimeFormatted[0].value }}</div>
+        <div v-if="countdownTimeFormatted.length > 1 && countdownTimeFormatted[1]" class="colon">:</div>
+        <div class="countdown-digit">{{ countdownTimeFormatted[1].value }}</div>
+      </div>
+    </el-row>
+    <h1>联网中心mpay-数据积压</h1>
+    <HighRoadCenter/>
+    <div class="table-container" >
+      <el-table :data="jsonData" v-loading="tableLoading" border
+                height="96%"
+      >
+        <el-table-column
+            v-for="column in columns"
+            :key="column.prop"
+            :prop="column.prop" :label="column.label"
+            align="center"
+        >
+          <template v-slot="scope">
+<!--        <span :style="getCellStyle(scope.row, column.prop)">-->
+<!--          {{ scope.row[column.prop] && scope.row[column.prop].value !== undefined ? scope.row[column.prop].value : scope.row[column.prop] }}-->
+<!--        </span>-->
+            <span :class="{'red-text': scope.row[column.prop] && scope.row[column.prop].isToday !== undefined && !scope.row[column.prop].isToday}">
+  {{ scope.row[column.prop] && scope.row[column.prop].value !== undefined ? scope.row[column.prop].value : scope.row[column.prop] }}
+</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import {queryMonitoring, getLWZXmpayDataBacklog} from "../../util/api/api";
+import {ElMessage} from "element-plus";
+import pro from "../../util/tool";
+
+export default {
+  name: "LWZXFrontUnitDataBacklog",
+  data() {
+    return {
+      today: new Date().toISOString().slice(0, 10), // 格式化今天的日期
+      jsonData: [],
+      baseName:'',
+      columns:[],
+      monitoringAndTableNames: [],
+      tableName: "",
+      monitoring: "",
+      tableLoading:false,
+      countdownTime: 1800, // 设置初始倒计时时间为1800秒（半小时）
+      countdownTimer: null // 存储倒计时定时器
+    };
+  },
+  computed: {
+    // 格式化倒计时时间以便于显示
+    countdownTimeFormatted() {
+      const minutes = Math.floor((this.countdownTime % 3600) / 60);
+      const seconds = Math.floor(this.countdownTime % 60);
+      return [
+        {index: 0, value: minutes.toString().padStart(2, '0')},
+        {index: 1, value: seconds.toString().padStart(2, '0')}
+      ]
+    },
+  },
+  mounted() {
+    this.setNetControl();
+    this.startCountdown();
+    this.fetchTableName().then(() => {
+      this.fetchColumnConfig();
+    })
+  },
+  methods: {
+    getCellStyle(row, prop) {
+      let style = {};
+      // 检查updateDate字段是否不是当天
+      if (prop === 'updateDate' && this.isNotToday(row[prop])) {
+        style.color = 'red';
+      }
+      // 检查数据是否大于1000
+      if (prop !== 'updateDate' && this.isValueGreaterThan1000(row[prop])) {
+        style.color = 'red';
+      }
+      return style;
+    },
+    isNotToday(dateStr) {
+      const date = new Date(dateStr);
+      const today = new Date(this.today);
+      // 比较日期部分是否相同
+      return date.toISOString().slice(0, 10) !== today.toISOString().slice(0, 10);
+    },
+    isValueGreaterThan1000(value) {
+      // 检查值是否大于1000
+      return value > 1000;
+    },
+    async setNetControl() {
+      this.tableLoading = true;
+      try {
+        getLWZXmpayDataBacklog().then(res => {
+          console.log(res)
+          if (res  && res.length > 0) {
+            //过滤空的dataJson字段
+            let filteredRecords = res.filter(item => item.dataJson && item.dataJson !== '{}');
+            this.jsonData = filteredRecords.map(item => {
+              const data = JSON.parse(item.dataJson);
+              data.baseName = item.baseName;
+              data.updateDate = item.updateDate;
+              this.markNonTodayTimes(data);
+              return data;
+            });
+          } else {
+            this.jsonData = [];
+            ElMessage.info('没有查询到数据');
+          }
+          this.fetchColumnConfig();
+        })
+      } catch (error) {
+        console.error(error);
+        ElMessage.error('获取数据失败，请稍后重试！')
+      }
+      this.tableLoading = false;
+    },
+    async fetchTableName() {
+      try {
+        const res = await queryMonitoring();
+        if (res.data) {
+          this.tableData = res.data;
+          this.monitoringAndTableNames =res.data
+              .filter(record => record.baseType === 7) // 只保留baseType为7的记录
+              .map(record => ({
+            monitoring: record.monitoring,
+            tableName: record.tableName
+          }));
+        }
+      } catch (error) {
+        console.error('获取监控字段失败:', error);
+        ElMessage.error('获取监控字段失败，请稍后重试！');
+        // 设置默认值
+        this.tableName = '未知';
+      }
+    },
+    async fetchColumnConfig() {
+      if (this.jsonData.length > 0 && this.monitoringAndTableNames.length > 0) {
+        const columnConfig = this.jsonData[0];
+        const keys = Object.keys(columnConfig);
+        // 定义前缀到排序优先级的映射
+        const prefixOrder = {
+          'out_port_bill3_bt_recs': 1,
+          'out_port_bill3_bt_mintime': 2,
+          'Out_port_other_div_recs': 3,
+          'Out_port_other_div_mintime': 4,
+          'zgd_out_port_other_bt_recs': 5,
+          'zgd_out_port_other_bt_mintime': 6,
+          'EPAY_TRADEDETAIL_recs': 7,
+          'EPAY_TRADEDETAIL_mintime': 8
+        };
+        // 将baseName单独处理，确保它作为第一列
+        const baseNameKey = 'baseName';
+        const otherKeys = keys.filter(key => key !== baseNameKey);
+
+        // 自定义排序函数
+        const sortedOtherKeys = otherKeys.sort((a, b) => {
+          // 获取两个键名的前缀
+          const prefixA = Object.keys(prefixOrder).find(p => a.startsWith(p));
+          const prefixB = Object.keys(prefixOrder).find(p => b.startsWith(p));
+
+          // 如果两个键名有相同的前缀，按照原始顺序排序
+          if (prefixA === prefixB) {
+            return 0;
+          }
+
+          // 如果一个键名有前缀而另一个没有，将有前缀的键名排在前面
+          if (!prefixA || !prefixB) {
+            return prefixA ? -1 : 1;
+          }
+
+          // 根据前缀的排序优先级进行排序
+          return prefixOrder[prefixA] - prefixOrder[prefixB];
+        });
+
+        // 合并baseName和排序后的其他键
+        const sortedKeys = [baseNameKey, ...sortedOtherKeys];
+        this.columns = sortedKeys.map(key => {
+          let label = key;
+          if (label.indexOf("baseName") !== -1){
+            label = '联网中心mpay';
+          }else  if (label.indexOf("updateDate") !== -1){
+            label = '更新时间';
+          }
+          const matchedRecord = this.monitoringAndTableNames.find(record =>
+              key.indexOf(record.monitoring) !== -1
+          );
+          if (matchedRecord) {
+            if (key.endsWith('recs')) {
+              label = `${matchedRecord.tableName}`;
+            } else if (key.endsWith('mintime')) {
+              label = `${matchedRecord.tableName}`;
+            }
+          }
+          return {
+            prop: key,
+            label: label
+          };
+        });
+      } else {
+        this.columns = [];
+      }
+    },
+    startCountdown() {
+      this.countdownTimer = setInterval(() => {
+        if (this.countdownTime > 0) {
+          this.countdownTime -= 1;
+        } else {
+          clearInterval(this.countdownTimer);
+          this.countdownTime = 1800; // 重置倒计时时间
+          // 倒计时结束后自动查询
+          this.setNetControl();
+          // 再次启动倒计时
+          this.startCountdown();
+        }
+      }, 1000);
+    },
+    refreshData() {
+      // 刷新页面数据
+      this.setNetControl();
+      //重新启动倒计时
+      this.startCountdown();
+    },
+    beforeDestroy() {
+      if (this.countdownTimer) {
+        clearInterval(this.countdownTimer);
+      }
+    },
+    markNonTodayTimes(rowData) {
+      const today = pro.dateFormatDay(new Date()); // 获取当前日期的格式化字符串
+
+      Object.keys(rowData).forEach((key) => {
+        // 检查是否是mintime字段
+        if (key.endsWith('mintime')) {
+          const dateValue = new Date(rowData[key]);
+          const formattedDate = pro.dateFormatDay(dateValue); // 获取日期的 "YYYY-MM-DD" 格式
+          const isToday = formattedDate === today;
+
+          // 为mintime字段创建包含value和isToday的对象
+          rowData[key] = {
+            value: rowData[key],
+            isToday: isToday
+          };
+          // 检查并设置对应recs字段的isToday属性
+          const recsKey = key.replace('mintime', 'recs');
+          if (recsKey in rowData) {
+            rowData[recsKey] = {
+              value: rowData[recsKey],
+              isToday: isToday // 将recs字段的isToday设置为与mintime字段相同
+            };
+          }
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.table-container {
+  height: 70vh;
+  overflow-y: auto;
+  margin-top: 10px; /* 调整边距 */
+}
+:deep(.my-label) {
+  background: #a0cfff !important;
+}
+:deep(.my-content) {
+  background: #dedfe0;
+}
+.countdown-container {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  margin-top: 20px;
+  position: relative;
+}
+
+.countdown-digit {
+  display: inline-block;
+  margin: 0 5px;
+  font-size: 48px;
+  font-weight: bold;
+  text-align: center;
+  border-radius: 4px;
+  background-color: rgba(128, 128, 128, 0.8);
+  color: #333333;
+  padding: 3px 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  position: relative;
+}
+
+/*添加动画效果，数字翻转*/
+@keyframes flip {
+  from {
+    transform: rotateY(0deg);
+  }
+  to {
+    transform: rotateY(360deg);
+  }
+}
+
+.colon {
+  display: inline-block;
+  font-size: 48px;
+  margin: 0 5px;
+  color: #6b778c;
+}
+.red-text {
+  color: red;
+}
+/*h2 {*/
+/*  color: white;*/
+/*}*/
+</style>

OperationMonitoringView/src/views/LWZXmpay/LWZXmpayServer.vue

@@ -0,0 +1,368 @@
+<template>
+  <el-row>
+    <h2 class="countdown-title">数据更新倒计时:</h2>
+    <div class="countdown-container">
+      <div class="countdown-digit">{{ countdownTimeFormatted[0].value }}</div>
+      <div v-if="countdownTimeFormatted.length > 1 && countdownTimeFormatted[1]" class="colon">:</div>
+      <div class="countdown-digit">{{ countdownTimeFormatted[1].value }}</div>
+    </div>
+    <el-col :span="24">
+      <div style="padding: 10px 0; display: flex; align-items: center;">
+        <!-- 日期查询 -->
+        <el-form-item label="查询日期">
+          <el-date-picker
+              v-model="classDate"
+              type="date"
+              placeholder="选择日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="width: 180px;">
+          </el-date-picker>
+        </el-form-item>
+        <el-button type="primary" style="margin-left: 0.5%;margin-top: -15px;" @click="setNetControl">
+          <el-icon style="vertical-align: middle;">
+            <search/>
+          </el-icon>
+          <span style="vertical-align: middle;"> 查询 </span>
+        </el-button>
+      </div>
+    </el-col>
+  </el-row>
+  <div class="data-container">
+    <!-- 固定标题行 -->
+    <div class="header-row">
+      <h1 class="header-title">联网中心mpay-服务器</h1>
+      <h1 class="header-title" style="margin-left: 416px">联网中心mpay-数据库</h1>
+    </div>
+    <div class="scroll-container">
+      <el-row>
+        <el-col :span="12">
+          <div >
+
+          </div>
+          <div class="branch-container">
+            <div>
+              <!-- SRV -->
+              <div style="width: 500px" class="flex-container" border>
+                <div v-for="(item,index) in data" :key="index">
+                  <div style="font-size: 30px;"> {{ item.baseName }}</div>
+                  <el-tooltip  placement="bottom" effect="light" v-for="(items, index) in item.SRV" :key="`srv-${index}`">
+                    <template #content> {{ items.STARTDT }} - {{ items.STOPDT }} </template>
+                    <div class="myClass"
+                         :style="{ backgroundColor: getColor(items.state),width:getWith(items.STOPDT,items.STARTDT) }">
+                    </div>
+                  </el-tooltip>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <!-- DB -->
+        <el-col :span="12">
+          <div id="app">
+          </div>
+          <div class="branch-container">
+            <div style="width: 500px" class="flex-container">
+              <div v-for="(item,index) in data" :key="index">
+                <div style="font-size: 30px;">{{ item.baseName }}</div>
+                <el-tooltip  placement="bottom" effect="light" v-for="(items, index) in item.DB" :key="`db-${index}`">
+                  <template #content> {{ items.STARTDT }} - {{ items.STOPDT }} </template>
+                  <div  class="myClass"
+                        :style="{ backgroundColor: getColor(items.state),width:getWith(items.STOPDT,items.STARTDT) }">
+                  </div>
+                </el-tooltip>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import {queryLWZXmpayServer} from "../../util/api/api";
+import moment from "moment";
+import pro from "../../util/tool";
+
+export default {
+  name: 'LWZXmpayServer',
+  data() {
+    return {
+      SRV: [],
+      DB: [],
+      connectJson: [],
+      baseName: [],
+      data: [],
+      classDate: moment(new Date()).format('YYYY-MM-DD'),
+      startTime: '',
+      stopTime: '',
+      showTimeData: false,
+      countdownTime: 1800, // 设置初始倒计时时间为1800秒（半小时）
+      countdownTimer: null // 存储倒计时定时器
+    };
+  },
+  computed: {
+    // 格式化倒计时时间以便于显示
+    countdownTimeFormatted() {
+      const minutes = Math.floor((this.countdownTime % 3600) / 60);
+      const seconds = Math.floor(this.countdownTime % 60);
+      return [
+        {index: 0, value: minutes.toString().padStart(2, '0')},
+        {index: 1, value: seconds.toString().padStart(2, '0')}
+      ]
+    },
+  },
+  mounted() {
+    this.setNetControl();
+    this.startCountdown();
+  },
+  methods: {
+    async setNetControl() {
+      try {
+        queryLWZXmpayServer({"classDate": this.classDate}).then(res => {
+          let datas = [];
+          for (const item of res.data) {
+            let itemData = {baseName: item.baseName, SRV: [], DB: [], STARTDT: "", STOPDT: "",timeEntries: [],srvFailnum: item.srvFailnum};
+            const data = JSON.parse(item.connectJson);
+            for (let i = 0; i < data.SRV.length; i++) {
+              const srvInfo = data.SRV[i];
+              const state = srvInfo.STATE;
+              const startTime = srvInfo.STARTDT;
+              const stopTime = srvInfo.STOPDT;
+              // 创建时间条目对象并添加到 itemData.timeEntries 数组中
+              itemData.timeEntries.push({
+                state: state,
+                startTime: startTime,
+                stopTime: stopTime
+              });
+              // 为每个SRV创建一个对象，并将其添加到itemData.SRV数组中
+              itemData.SRV.push({
+                "STARTDT":srvInfo.STARTDT,
+                "STOPDT":srvInfo.STOPDT,
+                "state":state
+              });
+            }
+
+            for (let i = 0; i < data.DB.length; i++) {
+              const srvInfo = data.DB[i];
+              const state = srvInfo.STATE;
+              const startTime = srvInfo.STARTDT;
+              const stopTime = srvInfo.STOPDT;
+              itemData.timeEntries.push({
+                state: state,
+                startTime: startTime,
+                stopTime: stopTime
+              });
+              // 为每个SRV创建一个对象，并将其添加到itemData.SRV数组中
+              itemData.DB.push({
+                "STARTDT":srvInfo.STARTDT,
+                "STOPDT":srvInfo.STOPDT,
+                "state":state
+              });
+            }
+            datas.push(itemData);
+            this.baseName = item.baseName;
+            this.connectJson.push(data);
+          }
+          // 按照 srvFailnum 属性对 datas 数组进行排序
+          datas.sort((a, b) => b.srvFailnum - a.srvFailnum);
+          this.data = datas;
+        })
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    getWith(end,start) {
+      let date=new Date()
+      let dateStr=pro.dateFormatDay(date)
+      let todayDate=new Date(dateStr+' 00:00:00')
+      let endD=new Date(end);
+      let startD=new Date(start);
+      return (((endD.getTime()-startD.getTime())/(date.getTime()-todayDate.getTime()))*100).toFixed(2) + '%'
+    },
+    getColor(STATE) {
+      // 根据状态返回颜色
+      return STATE === 1 ? 'red' : 'green';
+    },
+    showTime(item, event) {
+      // 清空之前的时间数据
+      this.startTime = '';
+      this.stopTime = '';
+      this.showTimeData = false;
+
+      // 检查 item 是否存在以及是否包含 timeEntries 属性
+      if (item && item.timeEntries && item.timeEntries.length > 0) {
+        // 根据鼠标悬停的元素的背景颜色（红色或绿色）来确定要显示的时间
+        const color = event.target.style.backgroundColor;
+        for (const entry of item.timeEntries) {
+          if (color === this.getColor(entry.state)) {
+            this.startTime = entry.startTime;
+            this.stopTime = entry.stopTime;
+            this.showTimeData = true;
+            break; // 找到匹配的状态后停止循环
+          }
+        }
+      }
+      // 使用 $nextTick 确保 DOM 已更新
+      this.$nextTick(() => {
+        const timeDisplayEl = this.$refs.timeDisplay;
+        if (timeDisplayEl) {
+          timeDisplayEl.style.display = 'block';
+        }
+      })
+    },
+    hideTime() {
+      this.showTimeData = false;
+      this.startTime = '';
+      this.stopTime = '';
+    },
+    startCountdown() {
+      this.countdownTimer = setInterval(() => {
+        if (this.countdownTime > 0) {
+          this.countdownTime -= 1;
+        } else {
+          clearInterval(this.countdownTimer);
+          this.countdownTime = 1800; // 重置倒计时时间
+          // 倒计时结束后自动查询
+          this.setNetControl();
+          // 再次启动倒计时
+          this.startCountdown();
+        }
+      }, 1000);
+    },
+    refreshData() {
+      // 刷新页面数据
+      this.setNetControl();
+      //重新启动倒计时
+      this.startCountdown();
+    },
+    beforeDestroy() {
+      if (this.countdownTimer) {
+        clearInterval(this.countdownTimer);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.branch-container {
+  display: flex;
+  align-items: center; /* 垂直居中 */
+}
+
+/*.branch-name {*/
+/*  margin-right: 10px; !* 分公司名字和状态指示器之间的间距 *!*/
+/*}*/
+
+/*.status-indicator {*/
+/*  width: 50px; !* 横向长方形的宽度 *!*/
+/*  height: 20px; !* 横向长方形的高度 *!*/
+
+/*  position: relative; !* 以便为渐变背景定位 *!*/
+/*}*/
+
+/*!* 使用线性渐变创建红绿相间的效果 *!*/
+/*.status-indicator::before {*/
+/*  content: '';*/
+/*  position: absolute;*/
+/*  top: 0;*/
+/*  left: 50%; !* 从中间开始渐变 *!*/
+/*  width: 50%; !* 渐变占据一半的宽度 *!*/
+/*  height: 100%;*/
+/*}*/
+
+.myClass {
+  height: 20px;
+  float: left;
+}
+
+.flex-container {
+  display: flex;
+  flex-direction: column; /* 设置Flexbox的主轴为纵向 */
+}
+
+/*.time-display {*/
+/*  position: absolute;*/
+/*  background-color: #fff;*/
+/*  border: 1px solid #ccc;*/
+/*  padding: 10px;*/
+/*  font-size: 12px;*/
+/*  z-index: 1000; !* 确保时间显示在最上层 *!*/
+/*  width: 300px;*/
+/*}*/
+.scroll-container {
+  width: 100%; /* 容器宽度 */
+  height: 530px; /* 容器高度，根据需要调整 */
+  overflow-y: auto; /* 垂直方向滚动 */
+  overflow-x: hidden; /* 隐藏水平方向的滚动条 */
+  border: 1px solid #ccc; /* 容器边框，可选 */
+  padding: 10px; /* 容器内边距，可选 */
+}
+.data-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.header-row {
+  display: flex;
+  width: 100%;
+  margin-bottom: 10px; /* 根据需要调整 */
+}
+/* 标题样式 */
+.header-title {
+  font-size: 40px; /* 根据需要调整 */
+  margin: 0px;
+}
+:deep(.my-label) {
+  background: #a0cfff !important;
+}
+:deep(.my-content) {
+  background: #dedfe0;
+}
+.countdown-container {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  margin-top: 20px;
+  position: relative;
+}
+
+.countdown-digit {
+  display: inline-block;
+  margin: 0 5px;
+  font-size: 48px;
+  font-weight: bold;
+  text-align: center;
+  border-radius: 4px;
+  background-color: rgba(128, 128, 128, 0.8);
+  color: #333333;
+  padding: 3px 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  position: relative;
+}
+
+/*添加动画效果，数字翻转*/
+@keyframes flip {
+  from {
+    transform: rotateY(0deg);
+  }
+  to {
+    transform: rotateY(360deg);
+  }
+}
+
+.colon {
+  display: inline-block;
+  font-size: 48px;
+  margin: 0 5px;
+  color: #6b778c;
+}
+/*h2 {*/
+/*  color: white;*/
+/*}*/
+/*h1{*/
+/*  color: white;*/
+/*}*/
+</style>

OperationMonitoringView/src/views/YEJLLDFrontUint/YEJLLDFrontUnitDataBacklog.vue

@@ -29,16 +29,6 @@
       </el-table-column>
     </el-table>
   </div>
-  <el-pagination
-      background
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-      :current-page="searchForm.currentPage"
-      :page-sizes="[20, 50, 100]"
-      :page-size="searchForm.pageSize"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="searchForm.total">
-  </el-pagination>
 
 </template>
 
@@ -55,11 +45,6 @@ export default {
       baseName:'',
       tableLoading: false,
       columns:[],
-      searchForm: {
-        total: 0,
-        currentPage: 1,
-        pageSize: 20,
-      },
       monitoringAndTableNames: [],
       tableName: "",
       monitoring: "",
@@ -110,11 +95,11 @@ export default {
     },
     async setNetControl() {
       try {
-        getYEJLLDFrontUnitDataBacklog(this.searchForm).then(res => {
+        getYEJLLDFrontUnitDataBacklog().then(res => {
           // console.log('res:', res);
-          if (res && res.records && res.records.length > 0) {
+          if (res  && res.length > 0) {
             //过滤空的dataJson字段
-            let filteredRecords = res.records.filter(item => item.dataJson && item.dataJson !== '{}');
+            let filteredRecords = res.filter(item => item.dataJson && item.dataJson !== '{}');
 
             this.jsonData = filteredRecords.map(item => {
               const data = JSON.parse(item.dataJson);
@@ -127,13 +112,9 @@ export default {
             });
 
             // console.log('=====:', this.jsonData);
-            this.searchForm.total = res.total;
-            this.searchForm.currentPage = res.current;
-            this.searchForm.pageSize = res.size;
             this.fetchColumnConfig();
           } else {
             this.jsonData = [];
-            this.searchForm.total = 0;
             ElMessage.info('没有查询到数据');
           }
         })
@@ -228,14 +209,6 @@ export default {
         clearInterval(this.countdownTimer);
       }
     },
-    handleSizeChange(val) { //页大小改变
-      this.searchForm.pageSize = val;
-      this.setNetControl();
-    },
-    handleCurrentChange(val) { //当前页改变
-      this.searchForm.currentPage = val;
-      this.setNetControl();
-    },
     markNonTodayTimes(rowData) {
       const today = pro.dateFormatDay(new Date()); // 获取当前日期的格式化字符串
 

OperationMonitoringView/src/views/YEJLLWZXFrontUnit/YEJLLWFrontUnitDataBacklog.vue

@@ -27,16 +27,6 @@
         </el-table-column>
       </el-table>
     </div>
-    <el-pagination
-        background
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="searchForm.currentPage"
-        :page-sizes="[20, 50, 100]"
-        :page-size="searchForm.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="searchForm.total">
-    </el-pagination>
   </div>
 </template>
 
@@ -53,11 +43,6 @@ export default {
       jsonData: [],
       columns:[],
       baseName: '',
-      searchForm: {
-        total: 0,
-        currentPage: 1,
-        pageSize: 20,
-      },
       monitoringAndTableNames: [],
       tableName: "",
       monitoring: "",
@@ -110,10 +95,10 @@ export default {
     async setNetControl() {
       this.tableLoading = true;
       try {
-        getYEJLLWFrontUnitDataBacklog(this.searchForm).then(res => {
-          if (res && res.records && res.records.length > 0) {
+        getYEJLLWFrontUnitDataBacklog().then(res => {
+          if (res && res.length > 0) {
             //过滤空的dataJson字段
-            let filteredRecords = res.records.filter(item => item.dataJson && item.dataJson !== '{}');
+            let filteredRecords = res.filter(item => item.dataJson && item.dataJson !== '{}');
             this.jsonData = filteredRecords.map(item => {
               const data = JSON.parse(item.dataJson);
               data.baseName = item.baseName;
@@ -121,12 +106,8 @@ export default {
               this.markNonTodayTimes(data);
               return data;
             });
-            this.searchForm.total = res.total;
-            this.searchForm.currentPage = res.current;
-            this.searchForm.pageSize = res.size;
           } else {
             this.jsonData = [];
-            this.searchForm.total = 0;
             ElMessage.info('没有查询到数据');
           }
           this.fetchColumnConfig();
@@ -185,14 +166,6 @@ export default {
         this.columns = [];
       }
     },
-    handleSizeChange(val) { //页大小改变
-      this.searchForm.pageSize = val;
-      this.setNetControl();
-    },
-    handleCurrentChange(val) { //当前页改变
-      this.searchForm.currentPage = val;
-      this.setNetControl();
-    },
     startCountdown() {
       this.countdownTimer = setInterval(() => {
         if (this.countdownTime > 0) {

OperationMonitoringView/src/views/loop/configJT.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="block">
+    <el-carousel indicator-position="none" height="900px" :autoplay="false">
+      <el-carousel-item v-for="(item,index) in components" :key="index">
+        <component :is="item"></component>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import dataBaseInfo from '../Monitoring/dataBaseInfo.vue';
+import monitoring from '../Monitoring/monitoring.vue';
+
+export default {
+  components: {
+    dataBaseInfo,
+    monitoring
+  },
+  data() {
+    return {
+      currentSlide: 0,
+      components: [
+        'dataBaseInfo',
+        'monitoring'
+      ]
+    };
+  }
+}
+</script>
+<style scoped>
+</style>

OperationMonitoringView/src/views/loop/echarts.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="block">
-    <el-carousel indicator-position="none" height="900px" :autoplay="false">
+    <span class="demonstration"></span>
+    <el-carousel indicator-position="none" height="800px" :autoplay="false">
       <el-carousel-item v-for="(item,index) in components" :key="index">
         <component :is="item"></component>
       </el-carousel-item>
@@ -9,39 +10,29 @@
 </template>
 
 <script>
-import boundariesEcharts from '../EtcOperationEcharts/boundariesEcharts.vue';
-import entranceAndExitEcharts from '../EtcOperationEcharts/entranceAndExitEcharts.vue';
-import gantryFlowRateEcharts from '../EtcOperationEcharts/gantryFlowRateEcharts.vue';
-import laneFlowEcharts from '../EtcOperationEcharts/laneFlowEcharts.vue';
-import outComplexEcharts from '../EtcOperationEcharts/outComplexEcharts.vue';
-import recognitionEcharts from '../EtcOperationEcharts/recognitionEcharts.vue';
-import transactionEcharts from '../EtcOperationEcharts/transactionEcharts.vue';
-
+import gantryFlowRateEcharts from "../EtcOperationEcharts/gantryFlowRateEcharts.vue";
+import transactionEcharts from "../EtcOperationEcharts/transactionEcharts.vue";
+import recognitionEcharts from "../EtcOperationEcharts/recognitionEcharts.vue";
+import outComplexEcharts from "../EtcOperationEcharts/outComplexEcharts.vue";
+import entranceAndExitEcharts from "../EtcOperationEcharts/entranceAndExitEcharts.vue";
+import laneFlowEcharts from "../EtcOperationEcharts/laneFlowEcharts.vue";
 export default {
   components: {
-    boundariesEcharts,
-    entranceAndExitEcharts,
+    recognitionEcharts,
     gantryFlowRateEcharts,
-    laneFlowEcharts,
+    transactionEcharts,
     outComplexEcharts,
-    recognitionEcharts,
-    transactionEcharts
+    entranceAndExitEcharts,
+    laneFlowEcharts
   },
   data() {
     return {
       currentSlide: 0,
-      components: [
-        'boundariesEcharts',
-        'entranceAndExitEcharts',
-        'gantryFlowRateEcharts',
-        'laneFlowEcharts',
-        'outComplexEcharts',
-        'recognitionEcharts',
-        'transactionEcharts'
-      ]
+      components: ['recognitionEcharts', 'transactionEcharts', 'gantryFlowRateEcharts','outComplexEcharts','entranceAndExitEcharts','laneFlowEcharts']
     };
   }
 }
 </script>
 <style scoped>
+
 </style>

OperationMonitoringView/src/views/loop/echartsJT.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="block">
+    <span class="demonstration"></span>
+    <el-carousel indicator-position="none" height="800px" :autoplay="false">
+      <el-carousel-item v-for="(item,index) in components" :key="index">
+        <component :is="item"></component>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import gantryFlowRateEcharts from "../EtcOperationEcharts/gantryFlowRateEcharts.vue";
+import transactionEcharts from "../EtcOperationEcharts/transactionEcharts.vue";
+import recognitionEcharts from "../EtcOperationEcharts/recognitionEcharts.vue";
+import outComplexEcharts from "../EtcOperationEcharts/outComplexEcharts.vue";
+import entranceAndExitEcharts from "../EtcOperationEcharts/entranceAndExitEcharts.vue";
+import laneFlowEcharts from "../EtcOperationEcharts/laneFlowEcharts.vue";
+export default {
+  components: {
+    recognitionEcharts,
+    gantryFlowRateEcharts,
+    transactionEcharts,
+    outComplexEcharts,
+    entranceAndExitEcharts,
+    laneFlowEcharts
+  },
+  data() {
+    return {
+      currentSlide: 0,
+      components: ['recognitionEcharts', 'transactionEcharts', 'gantryFlowRateEcharts','outComplexEcharts','entranceAndExitEcharts','laneFlowEcharts']
+    };
+  }
+}
+</script>
+<style scoped>
+
+</style>

OperationMonitoringView/src/views/loop/etcState.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="block">
+    <span class="demonstration"></span>
+    <el-carousel indicator-position="none" height="800px" :autoplay="false">
+      <el-carousel-item v-for="(item,index) in components" :key="index">
+        <component :is="item"></component>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import boundariesEcharts from "../EtcOperationEcharts/boundariesEcharts.vue";
+import gantryFlowRateEcharts from "../EtcOperationEcharts/gantryFlowRateEcharts.vue";
+import transactionEcharts from "../EtcOperationEcharts/transactionEcharts.vue";
+import recognitionEcharts from "../EtcOperationEcharts/recognitionEcharts.vue";
+export default {
+  components: {
+    boundariesEcharts,
+    gantryFlowRateEcharts,
+    transactionEcharts,
+    recognitionEcharts
+  },
+  data() {
+    return {
+      currentSlide: 0,
+      components: ['boundariesEcharts', 'gantryFlowRateEcharts', 'transactionEcharts', 'recognitionEcharts']
+    };
+  }
+}
+</script>
+<style scoped>
+
+</style>

OperationMonitoringView/src/views/loop/etcStateJT.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="block">
+    <span class="demonstration"></span>
+    <el-carousel indicator-position="none" height="800px" :autoplay="false">
+      <el-carousel-item v-for="(item,index) in components" :key="index">
+        <component :is="item"></component>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import boundariesEcharts from "../EtcOperationEcharts/boundariesEcharts.vue";
+import gantryFlowRateEcharts from "../EtcOperationEcharts/gantryFlowRateEcharts.vue";
+import transactionEcharts from "../EtcOperationEcharts/transactionEcharts.vue";
+import recognitionEcharts from "../EtcOperationEcharts/recognitionEcharts.vue";
+export default {
+  components: {
+    boundariesEcharts,
+    gantryFlowRateEcharts,
+    transactionEcharts,
+    recognitionEcharts
+  },
+  data() {
+    return {
+      currentSlide: 0,
+      components: ['boundariesEcharts', 'gantryFlowRateEcharts', 'transactionEcharts', 'recognitionEcharts']
+    };
+  }
+}
+</script>
+<style scoped>
+
+</style>

OperationMonitoringView/src/views/loop/indexLoop.vue

@@ -21,6 +21,11 @@ import YEJLLWFrontUnitDataBacklog from '../YEJLLWZXFrontUnit/YEJLLWFrontUnitData
 import YEJLLDFrontUnitDataBacklog from '../YEJLLDFrontUint/YEJLLDFrontUnitDataBacklog.vue';
 import subCenterDataBacklog from '../subCenter/subCenterDataBacklog.vue';
 import stationDataBacklog from '../station/stationDataBacklog.vue';
+import LWZXmpayServer from '../LWZXmpay/LWZXmpayServer.vue';
+import LWZXmpayDataBacklog from '../LWZXmpay/LWZXmpayDataBacklog.vue';
+import LWZXbyServer from '../LWZXby/LWZXbyServer.vue';
+import LWZXbyDataBacklog from '../LWZXby/LWZXbyDataBacklog.vue';
+
 
 export default {
   components: {
@@ -30,12 +35,16 @@ export default {
     YEJLLDFrontUnitServer,
     subCenterServer,
     stationServer,
+    LWZXmpayServer,
+    LWZXbyServer,
     LWZXFrontUnitDataBacklog,
     HRFrontUnitDataBacklog,
     YEJLLWFrontUnitDataBacklog,
     YEJLLDFrontUnitDataBacklog,
     subCenterDataBacklog,
-    stationDataBacklog
+    stationDataBacklog,
+    LWZXmpayDataBacklog,
+    LWZXbyDataBacklog
   },
   data() {
     return {
@@ -47,12 +56,16 @@ export default {
         'YEJLLDFrontUnitServer',
         'subCenterServer',
         'stationServer',
+        'LWZXmpayServer',
+        'LWZXbyServer',
         'LWZXFrontUnitDataBacklog',
         'HRFrontUnitDataBacklog',
         'YEJLLWFrontUnitDataBacklog',
         'YEJLLDFrontUnitDataBacklog',
         'subCenterDataBacklog',
-        'stationDataBacklog'
+        'stationDataBacklog',
+        'LWZXmpayDataBacklog',
+        'LWZXbyDataBacklog'
       ]
     };
   }

OperationMonitoringView/src/views/loop/indexLoopJT.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="block">
+    <el-carousel indicator-position="none" height="900px" :autoplay="false">
+      <el-carousel-item v-for="(item,index) in components" :key="index">
+        <component :is="item"></component>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import subCenterServer from '../subCenter/subCenterServer.vue';
+import stationServer from '../station/stationServer.vue';
+import subCenterDataBacklog from '../subCenter/subCenterDataBacklog.vue';
+import stationDataBacklog from '../station/stationDataBacklog.vue';
+import netRecord from '../EtcOperationEcharts/netRecord.vue';
+
+export default {
+  components: {
+    subCenterServer,
+    stationServer,
+    subCenterDataBacklog,
+    stationDataBacklog,
+    netRecord
+  },
+  data() {
+    return {
+      currentSlide: 0,
+      components: [
+        'subCenterServer',
+        'stationServer',
+        'subCenterDataBacklog',
+        'stationDataBacklog',
+          'netRecord'
+      ]
+    };
+  }
+}
+</script>
+<style scoped>
+</style>

OperationMonitoringView/src/views/loop/indexLoopJT2.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="block">
+    <el-carousel indicator-position="none" height="900px" :autoplay="false">
+      <el-carousel-item v-for="(item,index) in components" :key="index">
+        <component :is="item"></component>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import subCenterServer from '../subCenter/subCenterServer.vue';
+import stationServer from '../station/stationServer.vue';
+import subCenterDataBacklog from '../subCenter/subCenterDataBacklog.vue';
+import stationDataBacklog from '../station/stationDataBacklog.vue';
+import netRecord from '../EtcOperationEcharts/netRecord.vue';
+
+export default {
+  components: {
+    subCenterServer,
+    stationServer,
+    subCenterDataBacklog,
+    stationDataBacklog,
+    netRecord
+  },
+  data() {
+    return {
+      currentSlide: 0,
+      components: [
+        'subCenterServer',
+        'stationServer',
+        'subCenterDataBacklog',
+        'stationDataBacklog',
+          'netRecord'
+      ]
+    };
+  }
+}
+</script>
+<style scoped>
+</style>

OperationMonitoringView/src/views/loop/tab/jtIndex.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="container">
+    <div class="left">
+      <el-menu class="menu" @select="handleMenuSelect" router default-active="/OperationMonitoring/indexLoopJT" v-model="tabs">
+        <el-menu-item index="/OperationMonitoring/configJT">
+          <span slot="title">配置监控表</span>
+        </el-menu-item>
+        <el-menu-item index="/OperationMonitoring/indexLoopJT">
+          <span slot="title">主页</span>
+        </el-menu-item>
+        <el-menu-item index="/OperationMonitoring/etcStateJT">
+          <span slot="title">ETC门架运营实时状态</span>
+        </el-menu-item>
+        <el-menu-item index="/OperationMonitoring/tollStationJT">
+          <span slot="title">收费站数据实时监测</span>
+        </el-menu-item>
+        <el-menu-item index="/OperationMonitoring/echartsJT">
+          <span slot="title">质量风险管理</span>
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <div class="right">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "jtIndex",
+  data() {
+    return {
+      tabs: [], // 用于存储标签页数据
+      activeTab: null, // 当前激活的标签页名称
+    };
+  },
+  methods: {
+    // 处理菜单选择，添加标签页
+    handleMenuSelect(index) {
+      const tab = this.tabs.find(t => t.path === index);
+      if (tab) {
+        // 如果标签页已存在，设置为激活状态
+        this.setActiveTab(tab.name);
+      } else {
+        // 如果标签页不存在，创建新标签页
+        const newTab = this.tabs.find(t => t.path === index);
+        if (newTab) {
+          this.tabs.push({ ...newTab, active: true }); // 使用展开运算符复制对象
+          this.activeTab = newTab.name;
+        }
+      }
+    },
+    // 设置激活的标签页
+    setActiveTab(name) {
+      this.activeTab = name;
+      // 确保只有一个标签页是激活状态
+      this.tabs.forEach(tab => {
+        if (tab.name === name) {
+          tab.active = true;
+        } else {
+          tab.active = false;
+        }
+      });
+    },
+    // 删除标签页
+    removeTab(name) {
+      this.tabs = this.tabs.filter(tab => tab.name !== name);
+      // 如果删除的是当前激活的标签页，需要设置一个新的激活标签页
+      if (this.activeTab === name) {
+        const previousTab = this.tabs[this.tabs.length - 1]; // 取最后一个标签页作为新的激活标签页
+        if (previousTab) {
+          this.setActiveTab(previousTab.name);
+        }
+      }
+    }
+  },
+  // 监听路由变化，更新标签页状态
+  watch: {
+    '$route' (to, from) {
+      const tab = this.tabs.find(t => t.path === to.path);
+      if (tab) {
+        this.setActiveTab(tab.name);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  justify-content: space-between; /* 分配元素间的空间，使它们两端对齐 */
+  height: 100vh; /* 高度设为视口高度，确保内容垂直居中 */
+}
+.left {
+  height: 100vh;
+  width: 210px;
+  padding: 5px 5px;
+  background-color: #545c64 !important;
+}
+.menu {
+  height: 100vh;
+  background-color: #545c64 !important;
+  color: #fff;
+  width: 200px;
+  border-right:none ;
+  font-size: 18px;
+}
+::v-deep(.el-menu-item) {
+  color: white;
+  font-size: 16px;
+}
+::v-deep(.el-menu-item.is-active) {
+  background-color: #fff;
+  color: black;
+}
+.right {
+  flex: 1;
+
+}
+.menu .el-menu-item:hover {
+  background-color: #555 !important; /* 自定义hover背景色 */
+  color: #fff !important; /* 自定义hover字体颜色 */
+}
+
+</style>

OperationMonitoringView/src/views/loop/tollStation.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="block">
+    <span class="demonstration"></span>
+    <el-carousel indicator-position="none" height="800px" :autoplay="false">
+      <el-carousel-item v-for="(item,index) in components" :key="index">
+        <component :is="item"></component>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import entranceAndExitEcharts from "../EtcOperationEcharts/entranceAndExitEcharts.vue";
+import outComplexEcharts from "../EtcOperationEcharts/outComplexEcharts.vue";
+import laneFlowEcharts from "../EtcOperationEcharts/laneFlowEcharts.vue";
+export default {
+  components: {
+    outComplexEcharts,
+    entranceAndExitEcharts,
+    laneFlowEcharts
+  },
+  data() {
+    return {
+      currentSlide: 0,
+      components: ['outComplexEcharts', 'entranceAndExitEcharts', 'laneFlowEcharts']
+    };
+  }
+}
+</script>
+<style scoped>
+
+</style>

OperationMonitoringView/src/views/loop/tollStationJT.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="block">
+    <span class="demonstration"></span>
+    <el-carousel indicator-position="none" height="800px" :autoplay="false">
+      <el-carousel-item v-for="(item,index) in components" :key="index">
+        <component :is="item"></component>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import entranceAndExitEcharts from "../EtcOperationEcharts/entranceAndExitEcharts.vue";
+import outComplexEcharts from "../EtcOperationEcharts/outComplexEcharts.vue";
+import laneFlowEcharts from "../EtcOperationEcharts/laneFlowEcharts.vue";
+export default {
+  components: {
+    outComplexEcharts,
+    entranceAndExitEcharts,
+    laneFlowEcharts
+  },
+  data() {
+    return {
+      currentSlide: 0,
+      components: ['outComplexEcharts', 'entranceAndExitEcharts', 'laneFlowEcharts']
+    };
+  }
+}
+</script>
+<style scoped>
+
+</style>

OperationMonitoringView/src/views/station/stationDataBacklog.vue

@@ -13,52 +13,49 @@
     <div class="table-container">
       <el-table :data="jsonData" v-loading="tableLoading" border
                 height="96%"
+                @sort-change="handleSortChange"
       >
         <el-table-column
             v-for="column in columns"
             :key="column.prop"
             :prop="column.prop" :label="column.label"
             align="center"
+            :sortable="column.sortable"
         >
           <template v-slot="scope">
           <span :style="getCellStyle(scope.row, column.prop)">
-          {{ scope.row[column.prop] && scope.row[column.prop].value !== undefined ? scope.row[column.prop].value : scope.row[column.prop] }}
+          {{
+              scope.row[column.prop] && scope.row[column.prop].value !== undefined ? scope.row[column.prop].value : scope.row[column.prop]
+            }}
         </span>
           </template>
         </el-table-column>
       </el-table>
+      <div v-if="currentSortInfo" class="sort-info">
+        当前排序: {{ currentSortInfo }}
+      </div>
     </div>
-    <el-pagination
-        background
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="searchForm.currentPage"
-        :page-sizes="[20, 50, 100]"
-        :page-size="searchForm.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="searchForm.total">
-    </el-pagination>
+
   </div>
 </template>
 
 <script>
 import {getStationDataBacklog, queryMonitoring} from "../../util/api/api";
-import {ElMessage,ElLoading} from "element-plus";
+import {ElMessage, ElLoading} from "element-plus";
 import pro from "../../util/tool";
 
 export default {
   name: "stationDataBacklog",
   data() {
     return {
+      sortProp: '', // 排序属性
+      sortOrder: '正序', // 排序方向
+      currentSortInfo: '', // 用于存储当前排序信息
       today: new Date().toISOString().slice(0, 10), // 格式化今天的日期
       jsonData: [],
       baseName: '',
-      columns:[],
-      searchForm: {
-        total: 0,
-        currentPage: 1,
-        pageSize: 20,
-      },
+      columns: [],
+
       monitoringAndTableNames: [],
       tableName: "",
       monitoring: "",
@@ -68,6 +65,7 @@ export default {
     };
   },
   computed: {
+
     // 格式化倒计时时间以便于显示
     countdownTimeFormatted() {
       const minutes = Math.floor((this.countdownTime % 3600) / 60);
@@ -86,6 +84,64 @@ export default {
     })
   },
   methods: {
+    // 转换jsonData中所有以_recs结尾的属性值为数字
+    convertRecsValuesToNumbers() {
+      this.jsonData.forEach(item => {
+        Object.keys(item).forEach(key => {
+          if (key.endsWith('_recs')) {
+            item[key] = Number(item[key]);
+          }
+        });
+      });
+    },
+    handleSortChange({ column, prop, order }) {
+      this.sortProp = prop;
+      if (order === 'ascending') {
+        this.sortOrder = '正序';
+      } else if (order === 'descending') {
+        this.sortOrder = '倒序';
+      }
+      // 更新当前排序信息
+      this.currentSortInfo = `${column.label} (${this.sortOrder})`;
+
+      // 执行排序逻辑
+      this.jsonData.sort((a, b) => {
+        // 将undefined或null值根据排序方向移动到顶部或底部
+        const isANullOrUndefined = a[prop] === undefined || a[prop] === null || a[prop] === 'undefined';
+        const isBNullOrUndefined = b[prop] === undefined || b[prop] === null || b[prop] === 'undefined';
+
+        if (isANullOrUndefined && !isBNullOrUndefined) {
+          return this.sortOrder === '正序' ? 1 : -1;
+        }
+        if (!isANullOrUndefined && isBNullOrUndefined) {
+          return this.sortOrder === '正序' ? -1 : 1;
+        }
+        if (isANullOrUndefined && isBNullOrUndefined) {
+          return 0;
+        }
+
+        // 比较非undefined或null的值
+        if (typeof a[prop] === 'number' && typeof b[prop] === 'number') {
+          return this.sortOrder === '正序' ? a[prop] - b[prop] : b[prop] - a[prop];
+        }
+
+        let aValue = this.extractNumber(a[prop]);
+        let bValue = this.extractNumber(b[prop]);
+
+        return this.sortOrder === '正序' ? aValue - bValue : bValue - aValue;
+      });
+    },
+
+// 辅助函数，用于从字符串中提取数字
+    extractNumber(value) {
+      if (typeof value === 'string') {
+        const matches = value.match(/\d+/g);
+        return matches ? parseFloat(matches.join('')) : NaN;
+      } else if (typeof value === 'number') {
+        return value;
+      }
+      return NaN;
+    },
     getCellStyle(row, prop) {
       let style = {};
       // 检查updateDate字段是否不是当天
@@ -115,10 +171,10 @@ export default {
         background: 'rgba(255, 255, 255, 0.6)'
       });
       try {
-        getStationDataBacklog(this.searchForm).then(res => {
-          if (res && res.records && res.records.length > 0) {
+        getStationDataBacklog().then(res => {
+          if (res && res.length > 0) {
             //过滤空的dataJson字段
-            let filteredRecords = res.records.filter(item => item.dataJson && item.dataJson !== '{}');
+            let filteredRecords = res.filter(item => item.dataJson && item.dataJson !== '{}');
 
             this.jsonData = filteredRecords.map(item => {
               const data = JSON.parse(item.dataJson);
@@ -127,21 +183,17 @@ export default {
               data.updateDate = item.updateDate;
               return data;
             });
-            this.searchForm.total = res.total;
-            this.searchForm.currentPage = res.current;
-            this.searchForm.pageSize = res.size;
+            this.convertRecsValuesToNumbers(); // 转换_recs结尾的属性值为数字
             this.fetchColumnConfig();
           } else {
             this.jsonData = [];
-            this.searchForm.total = 0;
             ElMessage.info('没有查询到数据');
           }
         })
       } catch (error) {
         console.error(error);
         ElMessage.error('获取数据失败，请稍后重试！ ')
-      }
-      finally {
+      } finally {
         loadingInstance.close(); // 请求结束后关闭加载状态
       }
     },
@@ -150,12 +202,12 @@ export default {
         const res = await queryMonitoring();
         if (res.data) {
           this.tableData = res.data;
-          this.monitoringAndTableNames =res.data
+          this.monitoringAndTableNames = res.data
               .filter(record => record.baseType === 3) // 只保留baseType为3的记录
               .map(record => ({
-            monitoring: record.monitoring,
-            tableName: record.tableName
-          }));
+                monitoring: record.monitoring,
+                tableName: record.tableName
+              }));
         }
       } catch (error) {
         console.error('获取监控字段失败:', error);
@@ -207,13 +259,13 @@ export default {
         // 合并baseName和排序后的其他键
         const sortedKeys = [baseNameKey, ...sortedOtherKeys];
 
-        console.log(sortedKeys);
+        // console.log(sortedKeys);
 
         this.columns = sortedKeys.map(key => {
           let label = key;
-          if (label.indexOf("baseName") !== -1){
+          if (label.indexOf("baseName") !== -1) {
             label = '收费站';
-          } else  if (label.indexOf("updateDate") !== -1){
+          } else if (label.indexOf("updateDate") !== -1) {
             label = '更新时间';
           }
 
@@ -229,21 +281,14 @@ export default {
           }
           return {
             prop: key,
-            label: label
+            label: label,
+            sortable: true // 确保每个列都有sortable属性，并且设置为true
           };
         });
       } else {
         this.columns = [];
       }
     },
-    handleSizeChange(val) { //页大小改变
-      this.searchForm.pageSize = val;
-      this.setNetControl();
-    },
-    handleCurrentChange(val) { //当前页改变
-      this.searchForm.currentPage = val;
-      this.setNetControl();
-    },
     startCountdown() {
       this.countdownTimer = setInterval(() => {
         if (this.countdownTime > 0) {
@@ -286,7 +331,7 @@ export default {
           // };
           // 确保 rowData[key] 是一个对象
           if (typeof rowData[key] !== 'object') {
-            rowData[key] = { value: rowData[key], isToday };
+            rowData[key] = {value: rowData[key], isToday};
           } else {
             rowData[key].isToday = isToday;
           }
@@ -299,7 +344,7 @@ export default {
           //   };
           // }
           if (recsKey in rowData && typeof rowData[recsKey] !== 'object') {
-            rowData[recsKey] = { value: rowData[recsKey], isToday };
+            rowData[recsKey] = {value: rowData[recsKey], isToday};
           } else if (recsKey in rowData) {
             rowData[recsKey].isToday = isToday;
           }
@@ -326,6 +371,7 @@ export default {
   margin-top: 20px;
   position: relative;
 }
+
 /* 添加滚动条的样式 */
 .table-container {
   height: 70vh;
@@ -363,9 +409,11 @@ export default {
   margin: 0 5px;
   color: #6b778c;
 }
+
 .red-text {
   color: red;
 }
+
 /*h2 {*/
 /*  color: white;*/
 /*}*/

OperationMonitoringView/src/views/subCenter/subCenterDataBacklog.vue

@@ -13,12 +13,14 @@
     <div class="table-container">
       <el-table :data="jsonData" v-loading="tableLoading" border
                 height="96%"
+                @sort-change="handleSortChange"
       >
         <el-table-column
             v-for="column in columns"
             :key="column.prop"
             :prop="column.prop" :label="column.label"
             align="center"
+            :sortable="column.sortable"
         >
           <template v-slot="scope">
         <span :style="getCellStyle(scope.row, column.prop)">
@@ -27,17 +29,10 @@
           </template>
         </el-table-column>
       </el-table>
+      <div v-if="currentSortInfo" class="sort-info">
+        当前排序: {{ currentSortInfo }}
+      </div>
     </div>
-    <el-pagination
-        background
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="searchForm.currentPage"
-        :page-sizes="[20, 50, 100]"
-        :page-size="searchForm.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="searchForm.total">
-    </el-pagination>
   </div>
 </template>
 
@@ -50,15 +45,13 @@ export default {
   name: "subCenterDataBacklog",
   data() {
     return {
+      sortProp: '', // 排序属性
+      sortOrder: '正序', // 排序方向
+      currentSortInfo: '', // 用于存储当前排序信息
       today: new Date().toISOString().slice(0, 10), // 格式化今天的日期
       jsonData: [],
       baseName: '',
       columns: [],
-      searchForm: {
-        total: 0,
-        currentPage: 1,
-        pageSize: 20,
-      },
       monitoringAndTableNames: [],
       tableName: "",
       monitoring: "",
@@ -88,6 +81,64 @@ export default {
     })
   },
   methods: {
+    // 转换jsonData中所有以_recs结尾的属性值为数字
+    convertRecsValuesToNumbers() {
+      this.jsonData.forEach(item => {
+        Object.keys(item).forEach(key => {
+          if (key.endsWith('_recs')) {
+            item[key] = Number(item[key]);
+          }
+        });
+      });
+    },
+    handleSortChange({ column, prop, order }) {
+      this.sortProp = prop;
+      if (order === 'ascending') {
+        this.sortOrder = '正序';
+      } else if (order === 'descending') {
+        this.sortOrder = '倒序';
+      }
+      // 更新当前排序信息
+      this.currentSortInfo = `${column.label} (${this.sortOrder})`;
+
+      // 执行排序逻辑
+      this.jsonData.sort((a, b) => {
+        // 将undefined或null值根据排序方向移动到顶部或底部
+        const isANullOrUndefined = a[prop] === undefined || a[prop] === null || a[prop] === 'undefined';
+        const isBNullOrUndefined = b[prop] === undefined || b[prop] === null || b[prop] === 'undefined';
+
+        if (isANullOrUndefined && !isBNullOrUndefined) {
+          return this.sortOrder === '正序' ? 1 : -1;
+        }
+        if (!isANullOrUndefined && isBNullOrUndefined) {
+          return this.sortOrder === '正序' ? -1 : 1;
+        }
+        if (isANullOrUndefined && isBNullOrUndefined) {
+          return 0;
+        }
+
+        // 比较非undefined或null的值
+        if (typeof a[prop] === 'number' && typeof b[prop] === 'number') {
+          return this.sortOrder === '正序' ? a[prop] - b[prop] : b[prop] - a[prop];
+        }
+
+        let aValue = this.extractNumber(a[prop]);
+        let bValue = this.extractNumber(b[prop]);
+
+        return this.sortOrder === '正序' ? aValue - bValue : bValue - aValue;
+      });
+    },
+
+// 辅助函数，用于从字符串中提取数字
+    extractNumber(value) {
+      if (typeof value === 'string') {
+        const matches = value.match(/\d+/g);
+        return matches ? parseFloat(matches.join('')) : NaN;
+      } else if (typeof value === 'number') {
+        return value;
+      }
+      return NaN;
+    },
     getCellStyle(row, prop) {
       let style = {};
       // 检查updateDate字段是否不是当天
@@ -117,12 +168,12 @@ export default {
         background: 'rgba(255, 255, 255, 0.6)'
       });
       try {
-        getSubCenterDataBacklog(this.searchForm).then(res => {
+        getSubCenterDataBacklog().then(res => {
           // console.log(res)
 
-          if (res && res.records && res.records.length > 0) {
+          if (res  && res.length > 0) {
             //过滤空的dataJson字段
-            let filteredRecords = res.records.filter(item => item.dataJson && item.dataJson !== '{}');
+            let filteredRecords = res.filter(item => item.dataJson && item.dataJson !== '{}');
 
             this.jsonData = filteredRecords.map(item => {
               const data = JSON.parse(item.dataJson);
@@ -134,13 +185,10 @@ export default {
               return data;
             });
             // console.log('=====:', this.jsonData);
-            this.searchForm.total = res.total;
-            this.searchForm.currentPage = res.current;
-            this.searchForm.pageSize = res.size;
+            this.convertRecsValuesToNumbers(); // 转换_recs结尾的属性值为数字
             this.fetchColumnConfig();
           } else {
             this.jsonData = [];
-            this.searchForm.total = 0;
             ElMessage.info('没有查询到数据');
           }
         })
@@ -237,21 +285,14 @@ export default {
           }
           return {
             prop: key,
-            label: label
+            label: label,
+            sortable: true // 确保每个列都有sortable属性，并且设置为true
           };
         });
       } else {
         this.columns = [];
       }
     },
-    handleSizeChange(val) { //页大小改变
-      this.searchForm.pageSize = val;
-      this.setNetControl();
-    },
-    handleCurrentChange(val) { //当前页改变
-      this.searchForm.currentPage = val;
-      this.setNetControl();
-    },
     startCountdown() {
       this.countdownTimer = setInterval(() => {
         if (this.countdownTime > 0) {