fix():修改窗口支持25和36屏幕，修改播放器延时问题

王鑫
1 parent b39a4d77
Showing 26 changed files with 2431 additions and 1648 deletions
pom.xml
src/main/java/com/genersoft/iot/vmp/conf/security/WebSecurityConfig.java
src/main/java/com/genersoft/iot/vmp/service/IUserService.java
src/main/java/com/genersoft/iot/vmp/service/impl/StremProxyService1078Impl.java
src/main/java/com/genersoft/iot/vmp/service/impl/UserServiceImpl.java
src/main/java/com/genersoft/iot/vmp/utils/HttpClientUtil.java
src/main/java/com/genersoft/iot/vmp/vmanager/bean/UsLogin.java
src/main/java/com/genersoft/iot/vmp/vmanager/jt1078/platform/Jt1078OfCarController.java
src/main/java/com/genersoft/iot/vmp/vmanager/jt1078/platform/config/ThreadPoolTaskExecutorConfig.java
src/main/java/com/genersoft/iot/vmp/vmanager/jt1078/platform/config/TuohuaConfigBean.java
src/main/java/com/genersoft/iot/vmp/vmanager/jt1078/platform/handler/HttpClientUtil.java
src/main/java/com/genersoft/iot/vmp/vmanager/user/UserController.java
src/main/resources/application-wx-local.yml
web_src/build/webpack.base.conf.js
web_src/config/index.js
web_src/index.html
web_src/package.json
web_src/src/App.vue
web_src/src/components/CarouselConfig.vue
web_src/src/components/CloudRecord.vue
@@ -95,6 +95,12 @@
     </profiles>
     <dependencies>
+        <!-- httpclient -->
+        <dependency>
+            <groupId>commons-httpclient</groupId>
+            <artifactId>commons-httpclient</artifactId>
+            <version>3.1</version>
+        </dependency>
         <!-- https://mvnrepository.com/artifact/commons-net/commons-net -->
         <dependency>
             <groupId>commons-net</groupId>
@@ -84,6 +84,7 @@ public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
             matchers.add("/api/device/query/snap/**");
             matchers.add("/record_proxy/*/**");
             matchers.add("/api/emit");
+            matchers.add("/api/user/getInfo");
             matchers.add("/favicon.ico");
             matchers.add("/api/jt1078/query/test1");
             matchers.add("/api/jt1078/query/test");
@@ -123,7 +124,7 @@ public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
                 .authorizeRequests()
                 .requestMatchers(CorsUtils::isPreFlightRequest).permitAll()
                 .antMatchers(userSetting.getInterfaceAuthenticationExcludes().toArray(new String[0])).permitAll()
-                .antMatchers("/api/user/login", "/index/hook/**", "/swagger-ui/**", "/doc.html").permitAll()
+                .antMatchers("/api/user/login","/api/user/getInfo", "/index/hook/**", "/swagger-ui/**", "/doc.html").permitAll()
                 .anyRequest().authenticated()
                 .and()
                 .addFilterBefore(new IpWhitelistFilter(), BasicAuthenticationFilter.class)
@@ -26,4 +26,6 @@ public interface IUserService {
     PageInfo<User> getUsers(int page, int count);
     int changePushKey(int id, String pushKey);
+
+    User selectUserByUserName(String username);
 }
@@ -66,9 +66,6 @@ public class StremProxyService1078Impl implements StremProxyService1078 {
             if(Objects.nonNull(port)){
 //                VideoServerApp.stopServer(port,httpPort);
             }
-
-
-
             if (Objects.isNull(entity)) {
                 log.info("HttpClientPostEntity is null");
             } else {
@@ -77,12 +74,11 @@ public class StremProxyService1078Impl implements StremProxyService1078 {
             redisTemplate.opsForValue().set("jt1078:count:"+stream,20000,300,TimeUnit.SECONDS);
-//            streamProxyService.del("schedule", stream);
             resultMap.put("code", "1");
             resultMap.put("message", "OK");
             return resultMap;
-        } catch (URISyntaxException | IOException e) {
+        } catch (Exception e) {
             log.error("发送停止推流指令异常;[{}],[{}]", url, msg, e);
             resultMap.put("code", "-20");
@@ -95,4 +95,10 @@ public class UserServiceImpl implements IUserService {
     public int changePushKey(int id, String pushKey) {
         return userMapper.changePushKey(id,pushKey);
     }
+
+    @Override
+    public User selectUserByUserName(String username) {
+
+        return userMapper.getUserByUsername( username);
+    }
 }
+package com.genersoft.iot.vmp.utils;
+
+
+
+import com.alibaba.fastjson2.JSON;
+import org.apache.commons.httpclient.HttpClient;
+import org.apache.commons.httpclient.HttpStatus;
+import org.apache.commons.httpclient.SimpleHttpConnectionManager;
+import org.apache.commons.httpclient.methods.PostMethod;
+import org.apache.commons.httpclient.methods.StringRequestEntity;
+import org.apache.commons.lang3.StringUtils;
+import org.apache.http.HttpEntity;
+import org.apache.http.HttpResponse;
+import org.apache.http.NameValuePair;
+import org.apache.http.client.ClientProtocolException;
+import org.apache.http.client.entity.UrlEncodedFormEntity;
+import org.apache.http.client.methods.CloseableHttpResponse;
+import org.apache.http.client.methods.HttpGet;
+import org.apache.http.client.methods.HttpPost;
+import org.apache.http.entity.StringEntity;
+import org.apache.http.impl.client.CloseableHttpClient;
+import org.apache.http.impl.client.HttpClientBuilder;
+import org.apache.http.impl.client.HttpClients;
+import org.apache.http.message.BasicNameValuePair;
+import org.apache.http.protocol.HTTP;
+import org.apache.http.util.EntityUtils;
+
+import java.io.*;
+import java.lang.reflect.Field;
+import java.net.ConnectException;
+import java.net.HttpURLConnection;
+import java.net.ProtocolException;
+import java.net.URL;
+import java.util.*;
+
+public class HttpClientUtil {
+
+    public static String post(String url, Map<String, String> params) {
+        CloseableHttpClient httpclient = HttpClients.createDefault();
+        HttpPost post = postForm(url, params);
+        String body = null;
+        try {
+            CloseableHttpResponse response2 = httpclient.execute(post);
+            try {
+                HttpEntity entity2 = response2.getEntity();
+                body = EntityUtils.toString(entity2, "UTF-8");
+                EntityUtils.consume(entity2);
+            } finally {
+                response2.close();
+            }
+        } catch (ClientProtocolException e) {
+            // TODO Auto-generated catch block
+            e.printStackTrace();
+        } catch (IOException e) {
+            // TODO Auto-generated catch block
+            e.printStackTrace();
+        } finally {
+            try {
+                httpclient.close();
+            } catch (IOException e) {
+                e.printStackTrace();
+            }
+        }
+
+
+        return body;
+    }
+
+    public static String get(String url) {
+        CloseableHttpClient httpclient = HttpClients.createDefault();
+        HttpGet httpGet = new HttpGet(url);
+        String body = null;
+        try {
+            CloseableHttpResponse response1 = httpclient.execute(httpGet);
+            try {
+                HttpEntity entity1 = response1.getEntity();
+                String charset = EntityUtils.getContentCharSet(entity1);
+                body = EntityUtils.toString(entity1);
+                EntityUtils.consume(entity1);
+            } finally {
+                response1.close();
+            }
+        } catch (ClientProtocolException e) {
+            // TODO Auto-generated catch block
+            e.printStackTrace();
+        } catch (IOException e) {
+            // TODO Auto-generated catch block
+            e.printStackTrace();
+        } finally {
+            try {
+                httpclient.close();
+            } catch (IOException e) {
+                e.printStackTrace();
+            }
+        }
+
+        return body;
+    }
+
+
+    /**
+     * @param url
+     * @param params
+     * @return
+     */
+    private static HttpPost postForm(String url, Map<String, String> params) {
+
+        HttpPost httpost = new HttpPost(url);
+        List<NameValuePair> nvps = new ArrayList<NameValuePair>();
+
+        Set<String> keySet = params.keySet();
+        for (String key : keySet) {
+            nvps.add(new BasicNameValuePair(key, params.get(key)));
+        }
+
+        try {
+            httpost.setEntity(new UrlEncodedFormEntity(nvps, HTTP.UTF_8));
+        } catch (UnsupportedEncodingException e) {
+            e.printStackTrace();
+        }
+
+        return httpost;
+    }
+
+    public static String post(String url, String inMessageXml) {
+
+        System.out.println("url..." + url);
+        System.out.println("inMessageXml..." + inMessageXml);
+        //创建httpclient工具对象
+        HttpClient client = new HttpClient();
+        //创建post请求方法
+        PostMethod myPost = new PostMethod(url);
+        //设置请求超时时间
+        client.setConnectionTimeout(3000 * 1000);
+        String responseString = null;
+        try {
+            //设置请求头部类型
+            myPost.setRequestHeader("Content-Type", "text/xml");
+            myPost.setRequestHeader("charset", "utf-8");
+            //设置请求体，即xml文本内容，一种是直接获取xml内容字符串，一种是读取xml文件以流的形式
+            myPost.setRequestEntity(new StringRequestEntity(inMessageXml, "text/xml", "utf-8"));
+            int statusCode = client.executeMethod(myPost);
+            //只有请求成功200了，才做处理
+            if (statusCode == HttpStatus.SC_OK) {
+                InputStream inputStream = myPost.getResponseBodyAsStream();
+                BufferedReader br = new BufferedReader(new InputStreamReader(inputStream, "utf-8"));
+                StringBuffer stringBuffer = new StringBuffer();
+                String str = "";
+                while ((str = br.readLine()) != null) {
+                    stringBuffer.append(str);
+                }
+                responseString = stringBuffer.toString();
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        } finally {
+            myPost.releaseConnection();
+            ((SimpleHttpConnectionManager) client.getHttpConnectionManager()).shutdown();
+        }
+        return responseString;
+    }
+
+
+    public static String doPost(String url, Object data) {
+
+        String jsonData = JSON.toJSONString(data);
+        //String jsonData = JSONUtils.toJson(data);
+        System.out.println("url..." + url);
+        System.out.println("inMessageXml..." + data);
+
+        CloseableHttpClient httpclient = HttpClientBuilder.create().build();
+        HttpPost post = new HttpPost(url);
+        try {
+            StringEntity s = new StringEntity(jsonData, "utf-8");
+            s.setContentEncoding("UTF-8");
+            s.setContentType("application/json");//发送json数据需要设置contentType
+            post.setEntity(s);
+            HttpResponse res = httpclient.execute(post);
+            if (res.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
+                return EntityUtils.toString(res.getEntity());
+            }
+        } catch (Exception e) {
+            throw new RuntimeException(e);
+        } finally {
+            try {
+                httpclient.close();
+            } catch (IOException e) {
+                e.printStackTrace();
+            }
+        }
+        return null;
+    }
+
+
+    /**
+     * HttpURLConnection方式 模拟Http Get请求
+     *
+     * @param urlStr   请求路径
+     * @param paramMap 请求参数
+     * @return
+     * @throws Exception
+     */
+    public static String get(String urlStr, Map<String, String> paramMap) throws Exception {
+        urlStr = urlStr + "?" + getParamString(paramMap);
+        HttpURLConnection conn = null;
+        try {
+            //创建URL对象
+            URL url = new URL(urlStr);
+            //获取URL连接
+            conn = (HttpURLConnection) url.openConnection();
+            //设置通用的请求属性
+            setHttpUrlConnection(conn, "GET");
+            //建立实际的连接
+            conn.connect();
+            //获取响应的内容
+            return readResponseContent(conn.getInputStream());
+        } finally {
+            if (null != conn)
+                conn.disconnect();
+        }
+    }
+
+
+    /**
+     * HttpURLConnection方式 模拟Http Post请求
+     *
+     * @param urlStr 请求路径
+     * @return
+     * @throws Exception
+     */
+    public static String postMap(String urlStr, Object object) throws Exception {
+        HttpURLConnection conn = null;
+        PrintWriter writer = null;
+
+        try {
+            //创建URL对象
+            URL url = new URL(urlStr);
+            //获取请求参数
+            Map<String, String> params = objectToMap(object);
+            String param = getParamString(params);
+            //获取URL连接
+            System.out.println("requestUrl:" + urlStr);
+            System.out.println("outputStr:" + param);
+            conn = (HttpURLConnection) url.openConnection();
+            //设置通用请求属性
+            setHttpUrlConnection(conn, "POST");
+            //建立实际的连接
+            conn.connect();
+            //将请求参数写入请求字符流中
+            writer = new PrintWriter(conn.getOutputStream());
+            writer.print(param);
+            writer.flush();
+            //读取响应的内容
+            return readResponseContent(conn.getInputStream());
+        } finally {
+            if (null != conn)
+                conn.disconnect();
+            if (null != writer)
+                writer.close();
+        }
+    }
+
+    /**
+     * HttpURLConnection方式 模拟Http Post请求
+     *
+     * @param urlStr 请求路径
+     * @return
+     * @throws Exception
+     */
+    public static String postByMap(String urlStr, Map<String, String> params) throws Exception {
+        HttpURLConnection conn = null;
+        PrintWriter writer = null;
+
+        try {
+            //创建URL对象
+            URL url = new URL(urlStr);
+            //获取请求参数
+            String param = getParamString(params);
+            //获取URL连接
+            System.out.println("requestUrl:" + urlStr);
+            System.out.println("outputStr:" + param);
+            conn = (HttpURLConnection) url.openConnection();
+            //设置通用请求属性
+            setHttpUrlConnection(conn, "POST");
+            //建立实际的连接
+            conn.connect();
+            //将请求参数写入请求字符流中
+            writer = new PrintWriter(conn.getOutputStream());
+            writer.print(param);
+            writer.flush();
+            //读取响应的内容
+            return readResponseContent(conn.getInputStream());
+        } finally {
+            if (null != conn)
+                conn.disconnect();
+            if (null != writer)
+                writer.close();
+        }
+    }
+
+
+    /**
+     * 转换对象为map
+     *
+     * @param object
+     * @param ignore
+     * @return
+     */
+    public static Map<String, String> objectToMap(Object object, String... ignore) {
+        Map<String, String> tempMap = new LinkedHashMap<String, String>();
+        //获取本类的Fields
+        for (Field f : object.getClass().getDeclaredFields()) {
+            if (!f.isAccessible()) {
+                f.setAccessible(true);
+            }
+            boolean ig = false;
+            if (ignore != null && ignore.length > 0) {
+                for (String i : ignore) {
+                    if (i.equals(f.getName())) {
+                        ig = true;
+                        break;
+                    }
+                }
+            }
+            if (ig) {
+                continue;
+            } else {
+                Object o = null;
+                try {
+                    o = f.get(object);
+                } catch (IllegalArgumentException e) {
+                    e.printStackTrace();
+                } catch (IllegalAccessException e) {
+                    e.printStackTrace();
+                }
+                tempMap.put(f.getName(), o == null ? "" : o.toString());
+            }
+        }
+        //获取基类的Fields
+        for (Field f : object.getClass().getFields()) {
+            if (!f.isAccessible()) {
+                f.setAccessible(true);
+            }
+            boolean ig = false;
+            if (ignore != null && ignore.length > 0) {
+                for (String i : ignore) {
+                    if (i.equals(f.getName())) {
+                        ig = true;
+                        break;
+                    }
+                }
+            }
+            if (ig) {
+                continue;
+            } else {
+                Object o = null;
+                try {
+                    o = f.get(object);
+                } catch (IllegalArgumentException e) {
+                    e.printStackTrace();
+                } catch (IllegalAccessException e) {
+                    e.printStackTrace();
+                }
+                tempMap.put(f.getName(), o == null ? "" : o.toString());
+            }
+        }
+        return tempMap;
+    }
+
+    /**
+     * 将参数转为路径字符串
+     *
+     * @param paramMap 参数
+     * @return
+     */
+    private static String getParamString(Map<String, String> paramMap) {
+        if (null == paramMap || paramMap.isEmpty()) {
+            return "";
+        }
+        StringBuilder builder = new StringBuilder();
+        for (String key : paramMap.keySet()) {
+            if (!key.equals("pd")) {
+                if (StringUtils.isNotEmpty(paramMap.get(key))) {
+                    //传入值不为空 拼接字符串
+                    builder.append("&").append(key).append("=").append(paramMap.get(key));
+                } else {
+                    builder.append("&");
+                }
+            }
+
+        }
+        return new String(builder.deleteCharAt(0).toString());
+    }
+
+
+    /**
+     * 读取响应字节流并将之转为字符串
+     *
+     * @param in 要读取的字节流
+     * @return
+     * @throws IOException
+     */
+    private static String readResponseContent(InputStream in) throws IOException {
+        Reader reader = null;
+        StringBuilder content = new StringBuilder();
+        try {
+            reader = new InputStreamReader(in, "utf-8");
+            char[] buffer = new char[1024];
+            int head = 0;
+            while ((head = reader.read(buffer)) > 0) {
+                content.append(new String(buffer, 0, head));
+            }
+            String result = content.toString();
+            System.out.println("readResponseContent.." + result);
+            return result;
+        } finally {
+            if (null != in) {
+                in.close();
+            }
+            if (null != reader) {
+                reader.close();
+            }
+        }
+    }
+
+    /**
+     * 设置Http连接属性
+     *
+     * @param conn http连接
+     * @return
+     * @throws ProtocolException
+     * @throws Exception
+     */
+    private static void setHttpUrlConnection(HttpURLConnection conn,
+                                             String requestMethod) throws ProtocolException {
+        conn.setRequestMethod(requestMethod);
+        conn.setRequestProperty("content-encoding", "UTF-8");
+        conn.setRequestProperty("accept", "application/json");
+        conn.setRequestProperty("Accept-Charset", "UTF-8");
+        conn.setRequestProperty("Accept-Language", "zh-CN");
+
+        conn.setRequestProperty("User-Agent",
+                "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)");
+        conn.setRequestProperty("Proxy-Connection", "Keep-Alive");
+
+        if (null != requestMethod && "POST".equals(requestMethod)) {
+            conn.setDoOutput(true);
+            conn.setDoInput(true);
+        }
+    }
+
+
+    /**
+     * 新http请求
+     *
+     * @param requestUrl
+     * @param requestMethod
+     * @param object
+     * @return
+     */
+    public static String httpRequest(String requestUrl, String requestMethod, Object object) {
+        //获取请求参数
+        Map<String, String> params = objectToMap(object);
+        String outputStr = getParamString(params);
+        System.out.println("requestUrl:" + requestUrl);
+        System.out.println("outputStr:" + outputStr);
+        StringBuffer buffer = new StringBuffer();
+        try {
+            URL url = new URL(requestUrl);
+            HttpURLConnection httpUrlConn = (HttpURLConnection) url.openConnection();
+            httpUrlConn.setDoOutput(true);
+            httpUrlConn.setDoInput(true);
+            httpUrlConn.setUseCaches(false);
+            // 设置请求方式（GET/POST）
+            httpUrlConn.setRequestMethod(requestMethod);
+            httpUrlConn.connect();
+            // 当有数据需要提交时
+            if (null != outputStr) {
+                OutputStream outputStream = httpUrlConn.getOutputStream();
+                // 注意编码格式，防止中文乱码
+                outputStream.write(outputStr.getBytes("UTF-8"));
+                outputStream.close();
+            }
+            // 将返回的输入流转换成字符串
+            InputStream inputStream = httpUrlConn.getInputStream();
+            InputStreamReader inputStreamReader = new InputStreamReader(inputStream, "utf-8");
+            BufferedReader bufferedReader = new BufferedReader(inputStreamReader);
+
+            String str = null;
+            while ((str = bufferedReader.readLine()) != null) {
+                buffer.append(str);
+            }
+            bufferedReader.close();
+            inputStreamReader.close();
+            // 释放资源
+            inputStream.close();
+            inputStream = null;
+            httpUrlConn.disconnect();
+        } catch (ConnectException ce) {
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        System.out.println("返回：" + buffer.toString());
+        return buffer.toString();
+    }
+
+
+}
+package com.genersoft.iot.vmp.vmanager.bean;
+
+
+import org.apache.commons.lang3.builder.ToStringBuilder;
+import org.apache.commons.lang3.builder.ToStringStyle;
+
+/**
+ * 岗位表 sys_post
+ *
+ * @author bsth
+ */
+public class UsLogin {
+    private static final long serialVersionUID = 1L;
+
+    private String token;
+
+    private String sysCode;
+
+    public String getToken() {
+        return token;
+    }
+
+    public void setToken(String token) {
+        this.token = token;
+    }
+
+    public String getSysCode() {
+        return sysCode;
+    }
+
+    public void setSysCode(String sysCode) {
+        this.sysCode = sysCode;
+    }
+
+    @Override
+    public String toString() {
+        return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
+            .append("token", getToken())
+            .append("sysCode", getSysCode())
+            .toString();
+    }
+}
@@ -9,6 +9,7 @@ import com.alibaba.fastjson2.JSON;
 import com.alibaba.fastjson2.JSONArray;
 import com.alibaba.fastjson2.JSONException;
 import com.alibaba.fastjson2.JSONObject;
+import com.genersoft.iot.vmp.common.StreamInfo;
 import com.genersoft.iot.vmp.conf.MediaConfig;
 import com.genersoft.iot.vmp.conf.StreamProxyTask;
 import com.genersoft.iot.vmp.conf.exception.ControllerException;
@@ -17,7 +18,9 @@ import com.genersoft.iot.vmp.conf.security.JwtUtils;
 import com.genersoft.iot.vmp.conf.security.dto.JwtUser;
 import com.genersoft.iot.vmp.jtt1078.app.VideoServerApp;
 import com.genersoft.iot.vmp.jtt1078.publisher.PublishManager;
+import com.genersoft.iot.vmp.jtt1078.subscriber.RTMPPublisher;
 import com.genersoft.iot.vmp.media.zlm.dto.StreamPushItem;
+import com.genersoft.iot.vmp.service.IMediaService;
 import com.genersoft.iot.vmp.service.IStreamPushService;
 import com.genersoft.iot.vmp.service.StremProxyService1078;
 import com.genersoft.iot.vmp.vmanager.bean.ErrorCode;
@@ -50,12 +53,14 @@ import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
+import org.springframework.context.annotation.Bean;
 import org.springframework.core.io.InputStreamResource;
 import org.springframework.data.redis.core.RedisTemplate;
 import org.springframework.http.HttpHeaders;
 import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
 import org.springframework.scheduling.annotation.Scheduled;
+import org.springframework.scheduling.concurrent.ThreadPoolTaskExecutor;
 import org.springframework.util.Base64Utils;
 import org.springframework.web.bind.annotation.*;
 import sun.misc.Signal;
@@ -1146,13 +1151,13 @@ public class Jt1078OfCarController {
     @Nullable
     private StreamContent getStreamContent(String stream) {
-        StreamContent streamContent = this.getStreamContentPlayURL(stream);
+        StreamContent streamContent = getStreamContentPlayURL(stream);
         if (Objects.isNull(streamContent) || StringUtils.isEmpty(streamContent.getWs_flv())) {
             streamContent = new StreamContent();
-            String authKey = this.jt1078ConfigBean.getPushKey();
-            streamContent.setWs_flv(StringUtils.replace(this.jt1078ConfigBean.getWs() + authKey, "{stream}", stream));
-            streamContent.setWss_flv(StringUtils.replace(this.jt1078ConfigBean.getWss() + authKey, "{stream}", stream));
-            streamContent.setFlv(StringUtils.replace(this.jt1078ConfigBean.getDownloadFlv() + authKey, "{stream}", stream));
+            String authKey = jt1078ConfigBean.getPushKey();
+            streamContent.setWs_flv(StringUtils.replace(jt1078ConfigBean.getWs() + authKey, "{stream}", stream));
+            streamContent.setWss_flv(StringUtils.replace(jt1078ConfigBean.getWss() + authKey, "{stream}", stream));
+            streamContent.setFlv(StringUtils.replace(jt1078ConfigBean.getDownloadFlv() + authKey, "{stream}", stream));
         }
         return streamContent;
     }
+package com.genersoft.iot.vmp.vmanager.jt1078.platform.config;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.scheduling.concurrent.ThreadPoolTaskExecutor;
+
+import java.util.concurrent.ThreadPoolExecutor;
+
+/**
+ * 批量播放线程池（优化配置）
+ * @Author WangXin
+ * @Data 2025/12/18
+ * @Version 1.0.0
+ */
+@Configuration
+public class ThreadPoolTaskExecutorConfig {
+
+    @Bean("deviceRequestExecutor")
+    public ThreadPoolTaskExecutor threadPoolTaskExecutor() {
+        ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor();
+        // 核心线程数：降低到50，减少CPU竞争
+        executor.setCorePoolSize(50);
+        // 最大线程数：降低到100
+        executor.setMaxPoolSize(100);
+        // 队列大小：增大到1000，让任务排队而不是创建过多线程
+        executor.setQueueCapacity(1000);
+        // 线程名前缀，方便查日志
+        executor.setThreadNamePrefix("Device-IO-");
+        // 线程空闲时间：20秒后回收（更快释放资源）
+        executor.setKeepAliveSeconds(20);
+        // 拒绝策略：如果满了，由调用者线程执行（防止丢任务）
+        executor.setRejectedExecutionHandler(new ThreadPoolExecutor.CallerRunsPolicy());
+        // 优雅关闭：等待任务完成
+        executor.setWaitForTasksToCompleteOnShutdown(true);
+        executor.setAwaitTerminationSeconds(60);
+        executor.initialize();
+        return executor;
+    }
+
+}
@@ -179,11 +179,11 @@ public class TuohuaConfigBean {
         List<CarData> carData = JSON.parseArray(json, CarData.class);
         int count = 1;
         if (CollectionUtils.isNotEmpty(carData)) {
-            if (StringUtils.equals(profileActive, "wx-local")) {
+            if (StringUtils.equals(profileActive, "local")) {
                 CarData value = carData.get(0);
 //                value.setSim("1030715050");
-                value.setSim2("13450328013");
-                value.setSim("123456789011");
+                value.setSim2("13450328009");
+                value.setSim("3904517427");
                 map.put(value.getSim().replaceAll("^0+", ""), value);
                 if (StringUtils.isNotBlank(value.getSim2())) {
                     map.put(value.getSim2().replaceAll("^0+", ""), value);
@@ -357,11 +357,11 @@ public class TuohuaConfigBean {
         hashMap.put("sim", formatSim(convertStr(ch.get("sim"))));
         hashMap.put("sim2", formatSim(convertStr(ch.get("sim2"))));
         hashMap.put("abnormalStatus", abnormalStatus);
-
-        if (StringUtils.equals(profileActive, "wx-local")) {
+        hashMap.put("carPlate", convertStr(ch.get("carPlate")));
+        if (StringUtils.equals(profileActive, "local")) {
 //            hashMap.put("sim","1030715050");
-            hashMap.put("sim", "3904517445");
-            hashMap.put("sim2", "13450328013");
+            hashMap.put("sim2", "13450328009");
+            hashMap.put("sim", "3904517427");
         }
         return hashMap;
     }
 package com.genersoft.iot.vmp.vmanager.jt1078.platform.handler;
-import com.alibaba.fastjson2.JSON;
 import com.genersoft.iot.vmp.vmanager.jt1078.platform.ben.HttpClientPostEntity;
-import org.apache.commons.collections4.CollectionUtils;
 import org.apache.http.HttpEntity;
 import org.apache.http.NameValuePair;
 import org.apache.http.client.CookieStore;
+import org.apache.http.client.config.RequestConfig;
 import org.apache.http.client.entity.UrlEncodedFormEntity;
 import org.apache.http.client.methods.CloseableHttpResponse;
 import org.apache.http.client.methods.HttpGet;
 import org.apache.http.client.methods.HttpPost;
+import org.apache.http.client.protocol.HttpClientContext;
 import org.apache.http.client.utils.URIBuilder;
 import org.apache.http.entity.StringEntity;
 import org.apache.http.impl.client.BasicCookieStore;
-import org.apache.http.impl.client.DefaultHttpClient;
+import org.apache.http.impl.client.CloseableHttpClient;
+import org.apache.http.impl.client.HttpClients;
+import org.apache.http.impl.conn.PoolingHttpClientConnectionManager;
 import org.apache.http.impl.cookie.BasicClientCookie;
 import org.apache.http.message.BasicNameValuePair;
-import org.apache.http.params.BasicHttpParams;
-import org.apache.http.params.HttpConnectionParams;
 import org.apache.http.util.EntityUtils;
-import org.jetbrains.annotations.NotNull;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.stereotype.Component;
+import javax.annotation.PostConstruct;
 import java.io.IOException;
 import java.net.URI;
-import java.net.URISyntaxException;
-import java.util.*;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+import java.util.Set;
 /**
- * @author liujun
- * @date 2024年10月23日 13:25
+ * 优化后的 HttpClientUtil
+ * 特性：支持连接池、高并发、线程安全
  */
 @Component
 public class HttpClientUtil {
     private static final Logger log = LoggerFactory.getLogger(HttpClientUtil.class);
-    public HttpClientPostEntity doPost(String url, Map<String, String> params,  String jsessionid) throws URISyntaxException, IOException {
-        long startTime = System.currentTimeMillis();
-        // 创建Httpclient对象
-        DefaultHttpClient httpclient = getHttpClient();
-        // 定义请求的参数
-        CookieStore cookieStore1 = combationCookie(jsessionid);
-        httpclient.setCookieStore(cookieStore1);
-        URIBuilder uriBuilder = new URIBuilder(url);
-        URI uri = uriBuilder.build();
-
-        // 创建http GET请求
-        HttpPost httpPost = new HttpPost(uri);
-        List<NameValuePair> paramList = new ArrayList<>();
-        if (params != null && params.size() > 0) {
-            Set<String> keySet = params.keySet();
-            for (String key : keySet) {
-                paramList.add(new BasicNameValuePair(key, params.get(key)));
-            }
-            httpPost.setEntity(new UrlEncodedFormEntity(paramList));
-        }
+    // 核心：保持一个全局单例的 HttpClient
+    private CloseableHttpClient httpClient;
+
+    @PostConstruct
+    public void init() {
+        // 配置连接池
+        PoolingHttpClientConnectionManager cm = new PoolingHttpClientConnectionManager();
+        // 最大连接数 (设为 200，足够大)
+        cm.setMaxTotal(200);
+        // 【关键】每个路由（目标IP）的默认最大连接数
+        // 必须大于 30，否则 30 个并发请求会排队！设置为 100 比较保险
+        cm.setDefaultMaxPerRoute(100);
+
+        // 配置默认请求参数
+        RequestConfig requestConfig = RequestConfig.custom()
+                .setConnectTimeout(3000)         // 连接超时 3s (握手时间)
+                .setSocketTimeout(10000)         // 读取超时 10s (等待设备响应的时间，稍微给长点)
+                .setConnectionRequestTimeout(2000) // 从连接池获取连接的超时时间
+                .build();
+
+        // 创建全局 Client
+        this.httpClient = HttpClients.custom()
+                .setConnectionManager(cm)
+                .setDefaultRequestConfig(requestConfig)
+                .build();
+    }
-        //response 对象
+    /**
+     * 发送 POST 请求 (Form 表单格式)
+     */
+    public HttpClientPostEntity doPost(String url, Map<String, String> params, String jsessionid) {
+        long startTime = System.currentTimeMillis();
         CloseableHttpResponse response = null;
         try {
-            // 执行http get请求
-            response = httpclient.execute(httpPost);
-            // 判断返回状态是否为200
+            URIBuilder uriBuilder = new URIBuilder(url);
+            URI uri = uriBuilder.build();
+            HttpPost httpPost = new HttpPost(uri);
+
+            // 设置参数
+            if (params != null && !params.isEmpty()) {
+                List<NameValuePair> paramList = new ArrayList<>();
+                for (Map.Entry<String, String> entry : params.entrySet()) {
+                    paramList.add(new BasicNameValuePair(entry.getKey(), entry.getValue()));
+                }
+                httpPost.setEntity(new UrlEncodedFormEntity(paramList, "UTF-8"));
+            }
+
+            // 【关键】使用 Context 传递 Cookie，确保线程安全且互不干扰
+            HttpClientContext context = HttpClientContext.create();
+            context.setCookieStore(combationCookie(jsessionid));
+
+            // 执行请求
+            response = httpClient.execute(httpPost, context);
+
             if (response.getStatusLine().getStatusCode() == 200) {
-                return combationReturnObj(response, httpclient,url, null,startTime);
+                return combationReturnObj(response, context.getCookieStore(), url, null, startTime);
+            } else {
+                log.warn("POST请求非200状态: {}, Code: {}", url, response.getStatusLine().getStatusCode());
             }
+        } catch (Exception e) {
+            log.error("POST Form请求异常, url: {}", url, e);
         } finally {
-            if (response != null) {
-                response.close();
-            }
-            httpclient.close();
+            closeResponse(response);
         }
         return null;
     }
-    public HttpClientPostEntity doPost(String url, String requestBody,  String jsessionid) throws URISyntaxException, IOException {
+    /**
+     * 发送 POST 请求 (JSON Body 格式)
+     */
+    public HttpClientPostEntity doPost(String url, String requestBody, String jsessionid) {
         long startTime = System.currentTimeMillis();
-        // 创建Httpclient对象
-        DefaultHttpClient httpclient = getHttpClient();
-        // 定义请求的参数
-        CookieStore cookieStore1 = combationCookie( jsessionid);
+        CloseableHttpResponse response = null;
+        try {
+            URIBuilder uriBuilder = new URIBuilder(url);
+            URI uri = uriBuilder.build();
+            HttpPost httpPost = new HttpPost(uri);
-        httpclient.setCookieStore(cookieStore1);
+            StringEntity stringEntity = new StringEntity(requestBody, "UTF-8");
+            stringEntity.setContentType("application/json");
+            httpPost.setEntity(stringEntity);
-        URIBuilder uriBuilder = new URIBuilder(url);
-        URI uri = uriBuilder.build();
+            // 使用 Context 传递 Cookie
+            HttpClientContext context = HttpClientContext.create();
+            context.setCookieStore(combationCookie(jsessionid));
-        // 创建http POST请求
-        HttpPost httpPost = new HttpPost(uri);
-        StringEntity stringEntity = new StringEntity(requestBody, "UTF-8");
-        stringEntity.setContentType("application/json");
-        httpPost.setEntity(stringEntity);
+            response = httpClient.execute(httpPost, context);
-        //response 对象
-        CloseableHttpResponse response = null;
-        try {
-            // 执行http get请求
-            response = httpclient.execute(httpPost);
-            // 判断返回状态是否为200
             if (response.getStatusLine().getStatusCode() == 200) {
-                return combationReturnObj(response, httpclient,url,requestBody,startTime);
+                return combationReturnObj(response, context.getCookieStore(), url, requestBody, startTime);
+            } else {
+                log.warn("POST请求非200状态: {}, Code: {}", url, response.getStatusLine().getStatusCode());
             }
         } catch (Exception e) {
-            log.error("请求数据异常", e);
+            log.error("POST JSON请求异常, url: {}", url, e);
         } finally {
-            if (response != null) {
-                response.close();
-            }
-            httpclient.close();
+            closeResponse(response);
         }
         return null;
     }
-
-    public CookieStore combationCookie(String jsessionid) {
-        CookieStore cookieStore1 = new BasicCookieStore();
-        // cookieStore1.addCookie(new BasicClientCookie("SECKEY_ABVK", seckeyAbvk));
-        // cookieStore1.addCookie(new BasicClientCookie("BMAP_SECKEY", bmapSeckey));
-        cookieStore1.addCookie(new BasicClientCookie("JSESSIONID", jsessionid));
-
-        CookieStore cookieStore = new BasicCookieStore();
-
-        int size = CollectionUtils.size(cookieStore.getCookies());
-        for (int i = 0; i < size; i++) {
-            cookieStore1.addCookie(cookieStore.getCookies().get(i));
-
-        }
-        return cookieStore1;
-    }
-
-    public HttpClientPostEntity doGet(String url, String jsessionid) throws URISyntaxException, IOException {
+    /**
+     * 发送 GET 请求
+     */
+    public HttpClientPostEntity doGet(String url, String jsessionid) {
         long startTime = System.currentTimeMillis();
-        // 创建Httpclient对象
-        DefaultHttpClient httpclient = getHttpClient();
-        // 定义请求的参数
-        CookieStore cookieStore1 = combationCookie(jsessionid);
-//
-//        httpclient.setCookieStore(cookieStore1);
+        CloseableHttpResponse response = null;
+        try {
+            URIBuilder uriBuilder = new URIBuilder(url);
+            URI uri = uriBuilder.build();
+            HttpGet httpGet = new HttpGet(uri);
-        URIBuilder uriBuilder = new URIBuilder(url);
-        URI uri = uriBuilder.build();
+            // 使用 Context 传递 Cookie
+            HttpClientContext context = HttpClientContext.create();
+            context.setCookieStore(combationCookie(jsessionid));
-        // 创建http GET请求
-        HttpGet httpGet = new HttpGet(uri);
-        httpGet.addHeader("Cookie", jsessionid);
+            response = httpClient.execute(httpGet, context);
-        //response 对象
-        CloseableHttpResponse response = null;
-        try {
-            // 执行http get请求
-            response = httpclient.execute(httpGet);
-            // 判断返回状态是否为200
             if (response.getStatusLine().getStatusCode() == 200) {
-                return combationReturnObj(response, httpclient,url,null,startTime);
+                return combationReturnObj(response, context.getCookieStore(), url, null, startTime);
             }
+        } catch (Exception e) {
+            log.error("GET请求异常, url: {}", url, e);
         } finally {
-            if (response != null) {
-                response.close();
-            }
-            httpclient.close();
+            closeResponse(response);
         }
         return null;
     }
-    public boolean doGetNoResult(String url) throws URISyntaxException, IOException {
-        // 创建Httpclient对象
-        DefaultHttpClient httpclient = getHttpClient();
-        // 定义请求的参数
-//
-//        httpclient.setCookieStore(cookieStore1);
-
-        URIBuilder uriBuilder = new URIBuilder(url);
-        URI uri = uriBuilder.build();
-
-        // 创建http GET请求
-        HttpGet httpGet = new HttpGet(uri);
-
-        //response 对象
+    public boolean doGetNoResult(String url) {
         CloseableHttpResponse response = null;
         try {
-            log.info("url:[{}]",url);
-            // 执行http get请求
-            response = httpclient.execute(httpGet);
-            // 判断返回状态是否为200
-            if (response.getStatusLine().getStatusCode() == 200) {
-                return true;
-            }
+            log.info("url:[{}]", url);
+            HttpGet httpGet = new HttpGet(url);
+            // 注意：这里没有传 cookie，如果需要可以重载
+            response = httpClient.execute(httpGet);
+            return response.getStatusLine().getStatusCode() == 200;
+        } catch (Exception e) {
+            log.error("doGetNoResult异常", e);
         } finally {
-            if (response != null) {
-                response.close();
-            }
-            httpclient.close();
+            closeResponse(response);
         }
         return false;
     }
+    // --- 辅助方法 ---
+
     /**
-     * 检查设备是否注册
-     * @param response
-     * @param httpclient
-     * @param url
-     * @param requestBody
-     * @return
-     * @throws IOException
+     * 构建 CookieStore
      */
-    @NotNull
-    private static HttpClientPostEntity combationReturnObj(CloseableHttpResponse response, DefaultHttpClient httpclient,String url,String requestBody,long startTime) throws IOException {
-        HttpEntity httpEntity = response.getEntity();
+    private CookieStore combationCookie(String jsessionid) {
+        BasicCookieStore cookieStore = new BasicCookieStore();
+        if (jsessionid != null) {
+            // 注意：Cookie 最好设置 Domain 和 Path，否则可能不生效，这里保持原逻辑
+            BasicClientCookie cookie = new BasicClientCookie("JSESSIONID", jsessionid);
+            // 如果知道 domain 最好设置上，例如: cookie.setDomain("192.168.1.100");
+            cookie.setPath("/");
+            cookieStore.addCookie(cookie);
+        }
+        return cookieStore;
+    }
-        CookieStore cookieStore = httpclient.getCookieStore();
+    /**
+     * 处理返回结果
+     */
+    private HttpClientPostEntity combationReturnObj(CloseableHttpResponse response, CookieStore cookieStore, String url, String requestBody, long startTime) throws IOException {
+        HttpEntity httpEntity = response.getEntity();
         String result = EntityUtils.toString(httpEntity, "UTF-8");
         HttpClientPostEntity postEntity = new HttpClientPostEntity();
         postEntity.setCookieStore(cookieStore);
         postEntity.setResultStr(result);
-        log.info("url:{};requestBody:{};response :{}; 耗时: {}s ",url,requestBody,"请求成功",System.currentTimeMillis()-startTime);
+
+        // 确保 Entity 被消耗完，释放连接回池
+        EntityUtils.consume(httpEntity);
+
+        log.info("url:{}; 耗时: {}ms", url, System.currentTimeMillis() - startTime);
         return postEntity;
     }
-
     /**
-     * 获取 HttpClient,主要是封装了超时设置
-     * @return
+     * 安全关闭 Response (注意：不要关闭 httpClient！)
      */
-    public DefaultHttpClient getHttpClient(){
-        BasicHttpParams httpParams = new BasicHttpParams();
-        HttpConnectionParams.setConnectionTimeout(httpParams, 5000);
-        HttpConnectionParams.setSoTimeout(httpParams, 15000);
-        DefaultHttpClient client = new DefaultHttpClient(httpParams);
-        return client;
+    private void closeResponse(CloseableHttpResponse response) {
+        if (response != null) {
+            try {
+                response.close();
+            } catch (IOException e) {
+                // ignore
+            }
+        }
     }
 }
 package com.genersoft.iot.vmp.vmanager.user;
+import com.alibaba.fastjson2.JSON;
+import com.alibaba.fastjson2.JSONObject;
 import com.genersoft.iot.vmp.conf.exception.ControllerException;
 import com.genersoft.iot.vmp.conf.security.JwtUtils;
 import com.genersoft.iot.vmp.conf.security.SecurityUtils;
@@ -9,7 +11,9 @@ import com.genersoft.iot.vmp.service.IUserService;
 import com.genersoft.iot.vmp.storager.mapper.dto.Role;
 import com.genersoft.iot.vmp.storager.mapper.dto.User;
 import com.genersoft.iot.vmp.utils.DateUtil;
+import com.genersoft.iot.vmp.utils.HttpClientUtil;
 import com.genersoft.iot.vmp.vmanager.bean.ErrorCode;
+import com.genersoft.iot.vmp.vmanager.bean.UsLogin;
 import com.genersoft.iot.vmp.vmanager.bean.WVPResult;
 import com.github.pagehelper.PageInfo;
 import io.swagger.v3.oas.annotations.Operation;
@@ -28,6 +32,7 @@ import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import java.time.LocalDateTime;
 import java.util.List;
+import java.util.Map;
 @Tag(name  = "用户管理")
 @RestController
@@ -44,7 +49,6 @@ public class UserController {
     private IRoleService roleService;
     @GetMapping("/login")
-    @PostMapping("/login")
     @Operation(summary = "登录", description = "登录成功后返回AccessToken， 可以从返回值获取到也可以从响应头中获取到，" +
             "后续的请求需要添加请求头 'access-token'或者放在参数里")
@@ -68,6 +72,56 @@ public class UserController {
     }
+    @PostMapping("/getInfo")
+    public User getInfo(@RequestBody Map<String,String> map) {
+        String token = map.get("token");
+        if (token != null) {
+            String sysCode = "SYSUS004";
+            String url = "http://10.10.2.23:8112/prod-api/system/utilitySystem/checkToken";
+//                    //根据自己的网络环境自行选择访问方式
+//                    //外网ip http://118.113.164.50:8112
+//                    /prod-api/system/utilitySystem/checkToken
+//                    //宿主机ip 10.10.2.23:8112
+//                    /prod-api/system/utilitySystem/checkToken
+//                    //容器ip 172.17.0.8:8112
+//                    /prod-api/system/utilitySystem/checkToken
+            UsLogin usLogin = new UsLogin();
+            usLogin.setToken(token);
+            usLogin.setSysCode(sysCode);
+            String dataJsonStr = HttpClientUtil.httpRequest(url, "POST", usLogin);
+
+            JSONObject jsonObject = JSON.parseObject(dataJsonStr);
+            JSONObject dataJson = jsonObject.getJSONObject("data");
+            String resCode = dataJson.getString("code");
+            /**
+             * 登陆校验失败
+             */
+            if ("9999".equals(resCode) || "9998".equals(resCode)) {
+                throw new RuntimeException(jsonObject.getString("msgUser"));
+            }
+
+            /**
+             * 回调数据
+             */
+            JSONObject resDataJson = dataJson.getJSONObject("data");
+            /**
+             * 用户名
+             */
+            String username = resDataJson.getString("userName");
+
+            User user = userService.selectUserByUserName(username);
+
+            if (user == null){
+                throw new RuntimeException("用户不存在");
+            }
+
+            return user;
+        }else {
+            throw new RuntimeException("token无效");
+        }
+    }
+
+
     @PostMapping("/changePassword")
     @Operation(summary = "修改密码", security = @SecurityRequirement(name = JwtUtils.HEADER))
     @Parameter(name = "username", description = "用户名", required = true)
@@ -54,7 +54,7 @@ spring:
             max-lifetime: 1200000                 # 是池中连接关闭后的最长生命周期（以毫秒为单位)
 #[可选] WVP监听的HTTP端口, 网页和接口调用都是这个端口
 server:
-  port: 16030
+  port: 18090
   # [可选] HTTPS配置， 默认不开启
   ssl:
     # [可选] 是否开启HTTPS访问
@@ -185,8 +185,10 @@ tuohua:
       userName: yuanxiaohu
       password: Yxiaohu1.0
       rest:
-        baseURL: http://10.10.2.20:9089/webservice/rest
-        password: bafb2b44a07a02e5e9912f42cd197423884116a8
+#        baseURL: http://10.10.2.20:9089/webservice/rest
+#        password: bafb2b44a07a02e5e9912f42cd197423884116a8
+          baseURL: http://192.168.168.152:9089/webservice/rest
+          password: bafb2b44a07a02e5e9912f42cd197423884116a8
     tree:
       url:
         company: http://${my.ip}:9088/video/tree
@@ -206,10 +208,10 @@ tuohua:
       addPortVal: 0
       pushURL: http://${my.ip}:3333/new/server/{pushKey}/{port}/{httpPort}
       stopPushURL: http://${my.ip}:3333/stop/channel/{pushKey}/{port}/{httpPort}
-      url: http://10.10.2.20:8100/device/{0}
-      new_url: http://10.10.2.20:8100/device
 #      url: http://10.10.2.20:8100/device/{0}
 #      new_url: http://10.10.2.20:8100/device
+      url: http://192.168.168.152:8100/device/{0}
+      new_url: http://192.168.168.152:8100/device
       historyListPort: 9205
       history_upload: 9206
       playHistoryPort: 9201
@@ -40,6 +40,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
+        exclude: /node_modules[\\/]@wchbrad[\\/]vue-easy-tree/,
         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
       },
       {
@@ -11,14 +11,14 @@ module.exports = {
     assetsPublicPath: "/",
     proxyTable: {
       "/debug": {
-        target: "http://127.0.0.1:16030",
+        target: "http://127.0.0.1:18090",
         changeOrigin: true,
         pathRewrite: {
           "^/debug": "/",
         },
       },
       "/static/snap": {
-        target: "http://127.0.0.1:16030",
+        target: "http://127.0.0.1:18090",
         changeOrigin: true,
         // pathRewrite: {
         //   '^/static/snap': '/static/snap'
@@ -10,6 +10,7 @@
   </head>
   <body>
     <script type="text/javascript" src="./static/js/jessibuca/jessibuca.js"></script>
+    <script type="text/javascript" src="./static/EasyPlayer-pro.js"></script>
     <script type="text/javascript" src="./static/js/EasyWasmPlayer.js"></script>
     <script type="text/javascript" src="./static/js/liveplayer-lib.min.js"></script>
     <script type="text/javascript" src="./static/js/ZLMRTCClient.js"></script>
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@liveqing/liveplayer": "^2.7.10",
+    "@wchbrad/vue-easy-tree": "^1.0.13",
     "axios": "^0.24.0",
     "core-js": "^2.6.5",
     "echarts": "^4.9.0",
@@ -24,6 +25,7 @@
     "moment": "^2.29.1",
     "ol": "^6.14.1",
     "postcss-pxtorem": "^5.1.1",
+    "splitpanes": "^2.4.1",
     "uuid": "^8.3.2",
     "v-charts": "^1.19.0",
     "vue": "^2.6.11",
@@ -49,6 +51,7 @@
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^0.28.11",
+    "dayjs": "^1.11.13",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
@@ -35,8 +35,6 @@ export default {
       }catch (e) {
         console.error(e)
       }
-      //如果没有登录状态则跳转到登录页
-      this.$router.push('/login');
     }
   },
@@ -58,6 +56,9 @@ body,
   background-color: #e9eef3;
   height: 100%;
 }
+#app .theme-picker {
+  display: none;
+}
 .el-header,
 .el-footer {
   /* background-color: #b3c0d1; */
+<template>
+  <el-dialog
+    title="轮播策略配置"
+    :visible.sync="visible"
+    width="650px"
+    append-to-body
+    @close="resetForm"
+  >
+    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
+
+      <!-- 1. 轮播范围 -->
+      <el-form-item label="轮播范围" prop="sourceType">
+        <el-radio-group v-model="form.sourceType">
+          <el-radio label="all_online">所有在线设备 (自动同步)</el-radio>
+          <!-- 【修改】开放手动选择 -->
+          <el-radio label="custom">手动选择设备</el-radio>
+        </el-radio-group>
+
+        <!-- 【新增】手动选择的树形控件 -->
+        <div v-show="form.sourceType === 'custom'" class="device-select-box">
+          <el-input
+            placeholder="搜索设备名称(仅搜索已加载节点)"
+            v-model="filterText"
+            size="mini"
+            style="margin-bottom: 5px;">
+          </el-input>
+          <el-tree
+            ref="deviceTree"
+            :props="treeProps"
+            :load="loadNode"
+            lazy
+            show-checkbox
+            node-key="code"
+            height="250px"
+            style="height: 250px; overflow-y: auto; border: 1px solid #dcdfe6; border-radius: 4px; padding: 5px;"
+          ></el-tree>
+        </div>
+
+
+        <div class="tip-text">
+          <i class="el-icon-info"></i>
+          {{ form.sourceType === 'all_online'
+          ? '将自动从左侧设备列表中筛选状态为"在线"的设备进行循环播放。'
+          : '请勾选上方需要轮播的设备或通道。勾选父级设备代表选中其下所有通道。'
+          }}
+          <div style="margin-top: 5px; font-weight: bold; color: #E6A23C;">⚠️ 为保证播放流畅，轮播间隔建议设置为45秒以上</div>
+        </div>
+      </el-form-item>
+
+      <!-- 2. 分屏布局 (保持不变) -->
+      <el-form-item label="分屏布局" prop="layout">
+        <!-- ... 保持不变 ... -->
+        <el-select v-model="form.layout" placeholder="请选择布局" style="width: 100%">
+          <el-option label="四分屏 (2x2)" value="4"></el-option>
+          <el-option label="九分屏 (3x3)" value="9"></el-option>
+          <el-option label="十六分屏 (4x4)" value="16"></el-option>
+          <el-option label="二十五分屏 (5x5)" value="25"></el-option>
+          <el-option label="三十六分屏 (6x6)" value="36"></el-option>
+          <el-option label="1+9 异形屏" value="1+9"></el-option>
+          <el-option label="1+11 异形屏" value="1+11"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <!-- ... 其它配置保持不变 ... -->
+      <el-form-item label="轮播间隔" prop="interval">
+        <el-input-number v-model="form.interval" :min="30" :step="5" step-strictly controls-position="right"></el-input-number>
+        <span class="unit-text">秒</span>
+        <div style="font-size: 12px; color: #909399; margin-top: 5px;">
+          提示：为保证播放流畅，最小间隔30秒，建议设置45秒以上
+        </div>
+      </el-form-item>
+
+      <!-- 执行模式保持不变 -->
+      <el-form-item label="执行模式" prop="runMode">
+        <el-radio-group v-model="form.runMode">
+          <el-radio label="manual">手动控制 (立即开始，手动停止)</el-radio>
+          <el-radio label="schedule">定时计划 (自动启停)</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <!-- 时段选择保持不变 -->
+      <transition name="el-zoom-in-top">
+        <div v-if="form.runMode === 'schedule'" class="schedule-box">
+          <el-form-item label="生效时段" prop="timeRange" label-width="80px" style="margin-bottom: 0">
+            <el-time-picker
+              is-range
+              v-model="form.timeRange"
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              value-format="HH:mm:ss"
+              style="width: 100%"
+            >
+            </el-time-picker>
+          </el-form-item>
+        </div>
+      </transition>
+
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">关 闭</el-button>
+      <el-button type="primary" @click="handleSave">确认并启动</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "CarouselConfig",
+  // 【新增】接收父组件传来的设备树数据
+  props: {
+    deviceTreeData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    // 定义一个自定义校验函数
+    const validateTimeRange = (rule, value, callback) => {
+      if (!value || value.length !== 2) {
+        return callback(new Error('请选择生效时段'));
+      }
+
+      // 1. 辅助函数：将 HH:mm:ss 转为秒
+      const toSeconds = (str) => {
+        const [h, m, s] = str.split(':').map(Number);
+        return h * 3600 + m * 60 + s;
+      };
+
+      const start = toSeconds(value[0]);
+      const end = toSeconds(value[1]);
+      let duration = end - start;
+
+      // 处理跨天情况 (例如 23:00 到 01:00)
+      if (duration < 0) {
+        duration += 24 * 3600;
+      }
+
+      // 2. 核心校验：时长必须大于间隔
+      if (duration < this.form.interval) {
+        return callback(new Error(`时段跨度(${duration}s) 不能小于 轮播间隔(${this.form.interval}s)`));
+      }
+
+      callback();
+    };
+    return {
+      visible: false,
+      filterText: '',
+      form: {
+        sourceType: 'all_online',
+        layout: '16',
+        interval: 60, // 默认60秒
+        runMode: 'manual',
+        timeRange: ['08:00:00', '18:00:00'],
+        selectedDevices: [] // 存储选中的设备
+      },
+      treeProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: (data) => data.type === '5' // 假设 type 5 是通道(叶子)
+      },
+      rules: { interval: [
+          { required: true, message: '间隔不能为空' },
+          { type: 'number', min: 30, message: '间隔最少为30秒，以确保视频流有足够时间加载' }
+        ],
+        timeRange: [
+          { required: true, validator: validateTimeRange, trigger: 'change' } // 使用自定义校验
+        ]
+      }
+    };
+  },
+  watch: {
+    // 监听搜索框
+    filterText(val) {
+      // 添加安全检查，防止树未挂载时报错
+      if (this.$refs.deviceTree) {
+        this.$refs.deviceTree.filter(val);
+      }
+    }
+  },
+  methods: {
+    loadNode(node, resolve) {
+      // 1. 根节点：直接返回 props 中的 deviceTreeData
+      if (node.level === 0) {
+        return resolve(this.deviceTreeData);
+      }
+
+      // 2. 非根节点
+      const data = node.data;
+
+      // 如果已经有子节点（可能在左侧列表已经加载过），直接返回
+      if (data.children && data.children.length > 0) {
+        return resolve(data.children);
+      } else {
+        // 其他情况（如已经是通道）
+        resolve([]);
+      }
+    },
+    open(currentConfig) {
+      this.visible = true;
+      if (currentConfig) {
+        this.form = { ...currentConfig };
+        // 如果是手动模式，需要回显选中状态
+        if (this.form.sourceType === 'custom' && this.form.selectedDevices) {
+          this.$nextTick(() => {
+            // 只勾选叶子节点，element-ui会自动勾选父节点
+            const keys = this.form.selectedDevices.map(d => d.code);
+            this.$refs.deviceTree.setCheckedKeys(keys);
+          })
+        }
+      }
+    },
+    async handleSave() {
+      console.log('🔴 [DEBUG] handleSave 被调用');
+      
+      this.$refs.form.validate(async valid => {
+        console.log('🔴 [DEBUG] 表单校验结果:', valid);
+        
+        if (valid) {
+          console.log('[CarouselConfig] 校验通过，准备保存配置');
+          const config = { ...this.form };
+          console.log('🔴 [DEBUG] 配置对象创建完成:', config);
+
+          if (config.sourceType === 'custom') {
+            console.log('🔴 [DEBUG] 进入自定义模式分支');
+            // 添加安全检查
+            if (!this.$refs.deviceTree) {
+              console.error('🔴 [DEBUG] deviceTree 未找到');
+              this.$message.error("设备树未加载完成，请稍后再试");
+              return;
+            }
+            
+            console.log('🔴 [DEBUG] 准备获取选中节点');
+            // 获取所有勾选的节点（包括设备和通道）
+            const checkedNodes = this.$refs.deviceTree.getCheckedNodes();
+            console.log(`[CarouselConfig] 选中节点数: ${checkedNodes.length}`);
+            console.log('🔴 [DEBUG] 选中节点:', checkedNodes);
+
+            // 校验
+            if (checkedNodes.length === 0) {
+              console.warn('🔴 [DEBUG] 未选中任何节点');
+              this.$message.warning("请至少选择一个设备或通道！");
+              return;
+            }
+            config.selectedNodes = checkedNodes;
+          }
+
+          console.log('[CarouselConfig] 准备发送配置:', config);
+          console.log('🔴 [DEBUG] 即将发送 save 事件');
+          
+          // 让出主线程，避免阻塞UI
+          await this.$nextTick();
+          console.log('🔴 [DEBUG] nextTick 完成');
+          
+          this.$emit('save', config);
+          console.log('🔴 [DEBUG] save 事件已发送');
+          
+          this.visible = false;
+          console.log('🔴 [DEBUG] 对话框已关闭');
+        } else {
+          console.warn('[CarouselConfig] 表单校验失败');
+        }
+      });
+      
+      console.log('🔴 [DEBUG] handleSave 执行完毕（validate 是异步的）');
+    },
+    resetForm() {
+      this.filterText = '';
+    }
+  }
+};
+</script>
+
+<style scoped>
+.device-select-box {
+  margin-top: 10px;
+}
+/* 其他样式保持不变 */
+</style>
@@ -102,7 +102,7 @@
 <script>
 import uiHeader from '../layout/UiHeader.vue'
 import MediaServer from './service/MediaServer'
-import easyPlayer from './common/easyPlayer.vue'
+import easyPlayer from './common/EasyPlayer.vue'
 import moment  from 'moment'
 import axios from "axios";
@@ -135,7 +135,7 @@
 <script>
   // TODO 根据查询的时间列表设置滑轨的最大值与最小值，
 	import uiHeader from '../layout/UiHeader.vue'
-	import player from './common/easyPlayer.vue'
+	import player from './common/EasyPlayer.vue'
   import moment  from 'moment'
   import axios from "axios";
 	export default {
 <template>
-  <div v-loading="loading" id="devicePosition" style="width:100vw; height: 91vh">
-    <el-container v-loading="loading" style="height: 91vh;" element-loading-text="拼命加载中">
-      <el-aside width="300px" style="background-color: #ffffff">
-        <device1078-tree :tree-data="sourceValue" @node-click="nodeClick"></device1078-tree>
-      </el-aside>
-      <el-container>
-        <el-header height="5vh" style="text-align: left;font-size: 17px;line-height:5vh;width:90%">
-          <el-tag size="small" style="margin-left: 15px;" v-if="simNodeData">
-            <span v-if="channelData">{{`设备：${simNodeData.code} - 通道：${channelData.name}`}}</span>
-            <span v-else>{{`设备：${simNodeData.code}`}}</span>
-          </el-tag>
-          <el-tag size="small" style="margin-left: 15px;" v-if="playerIdx >= 0">下一个播放窗口 : {{ playerIdx + 1 }}</el-tag>
-          <i class="el-icon-s-platform btn" :class="{active:spilt==1}" @click="spiltClickFun(1)"/>
-          <i class="el-icon-menu btn" :class="{active:spilt==4}" @click="spiltClickFun(4)"/>
-          <i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spiltClickFun(9)"/>
-          <i class="el-icon-full-screen btn" :class="{active:spilt==16}" @click="spiltClickFun(16)"/>
-          <el-button size="mini" style="margin-left: 15px;" @click="oneClickPlayback()">一键播放</el-button>
-          <el-button size="mini" style="margin-left: 15px;" @click="closeSelectItem()">关闭选中</el-button>
-          <el-button size="mini" style="margin-left: 15px;" @click="closeSelectCarItem()">一键关闭</el-button>
-          <el-button size="mini" style="margin-left: 15px;" @click="inspectionsDialog" v-if="patrolValue" type="danger">
-            视屏巡查中
-          </el-button>
-          <el-button size="mini" style="margin-left: 15px;" @click="inspectionsDialog" v-else>视屏巡查</el-button>
-        </el-header>
-        <el-main style="padding: 0;">
-            <!-- 视频播放器 -->
-            <playerListComponent
-              ref="playListComponent"
-              @playerClick="handleClick"
-              :video-url="videoUrl"
-              v-model="spilt" style="width: 100%; height: 100%;"
-            ></playerListComponent>
-        </el-main>
-      </el-container>
-    </el-container>
-
-    <div id="carRMenu" class="rMenu">
-      <ul>
-        <li id="m_add" @click="oneClickPlayback();">一键播放视频</li>
-        <li id="m_del" @click="closeSelectCarItem();">一键关闭选中车辆流</li>
-      </ul>
-    </div>
-
-    <div id="channelCarRMenu" class="rMenu">
-      <ul>
-        <li id="m_add" @click="oneClickPlayback();">一键播放视频</li>
-        <li id="m_del" @click="closeSelectCarItem();">一键关闭选中车辆流</li>
-      </ul>
-    </div>
-
-    <el-dialog title="视屏巡查设置" width="600" append-to-body
-               :close-on-click-modal="false"
-               :visible.sync="showVideoDialog" v-loading="loading">
-      <el-card class="box-card">
-        <tree-transfer
-          :disabled="patrolValue"
-          style="text-align: left; display: inline-block;"
-          :to_data="targetValue"
-          :defaultExpandedKeys="expandedKeys"
-          node_key="id"
-          :filter="true"
-          :title="['源列表', '巡查列表']"
-          :from_data="sourceValue"
-          :defaultProps="treeProps"
-          :filter-node="filterNode"
-          class="inspections-tree"
-          height="500px">
-        </tree-transfer>
-      </el-card>
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span style="font-size: math">巡查时间间隔</span>
-        </div>
-        <el-time-select
-          v-model="timerTime"
-          :picker-options="{
-            start: '00:30',
-            step: '00:30',
-            end: '5:00'
-          }"
-          placeholder="选择巡查时间"
-          :disabled="patrolValue">
-        </el-time-select>
-      </el-card>
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span style="font-size: math">巡查宫格数量</span>
+  <el-container>
+    <!-- 侧边栏：设备树 -->
+    <el-aside v-show="sidebarState">
+      <vehicleList
+        @tree-loaded="handleTreeLoaded"
+        @node-click="nodeClick"
+        @node-contextmenu="nodeContextmenu"
+        @mouseover.native="showTooltip"
+        @mouseout.native="hideTooltip"
+        @click.native="hideTooltip"
+        @contextmenu.native="hideTooltip"
+      />
+
+      <!-- 右键菜单 -->
+      <el-dropdown ref="contextMenu" @command="handleCommand">
+        <span class="el-dropdown-link"></span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="playback">一键播放</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </el-aside>
+
+    <el-container>
+      <el-header style="height: 5%;">
+        <!-- 左侧折叠按钮 -->
+        <i :class="sidebarState ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
+           @click="updateSidebarState"
+           style="font-size: 20px;margin-right: 10px; cursor: pointer;"
+        />
+
+        <!-- 分屏选择与通用控制 -->
+        <window-num-select v-model="windowNum"></window-num-select>
+        <el-button type="danger" size="mini" @click="closeAllVideo">全部关闭</el-button>
+        <el-button type="warning" size="mini" @click="closeVideo"> 关 闭</el-button>
+        <el-button type="primary" size="mini" icon="el-icon-full-screen" @click="toggleFullscreen"></el-button>
+
+        <!-- 轮播控制按钮 -->
+        <el-button type="success" size="mini" icon="el-icon-timer" @click="openCarouselConfig">
+          {{ isCarouselRunning ? '停止轮播' : '轮播设置' }}
+        </el-button>
+
+        <!-- 轮播状态提示区 -->
+        <div v-if="isCarouselRunning" style="margin-left: 10px; font-size: 12px; display: flex; align-items: center;">
+          <span v-if="isWithinSchedule" style="color: #67C23A;">
+            <i class="el-icon-loading"></i>
+            轮播运行中 <span style="font-size: 10px; opacity: 0.8;">(预加载模式)</span>
+          </span>
+          <span v-else style="color: #E6A23C;">
+            <i class="el-icon-time"></i>
+            轮播待机中 (等待生效时段)
+          </span>
         </div>
-        <el-select v-model="patrolCell" placeholder="placeholder" :disabled="patrolValue">
-          <el-option
-            v-for="item in patrolCellList"
-            :key="item"
-            :label="item"
-            :value="item">
-          </el-option>
-        </el-select>
-      </el-card>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="danger" v-if="patrolValue" @click="closeInspections">关闭</el-button>
-        <el-button type="primary" v-else @click="openInspections">开启</el-button>
-        <el-button @click="showVideoDialog = false">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
+
+        <!-- 右侧信息 -->
+        <span class="header-right-info">{{ `下一个播放窗口 : ${windowClickIndex}` }}</span>
+      </el-header>
+
+      <!-- 轮播配置弹窗 -->
+      <carousel-config
+        ref="carouselConfig"
+        :device-tree-data="deviceTreeData"
+        @save="startCarousel"
+      ></carousel-config>
+
+      <!-- 视频播放主区域 -->
+      <el-main ref="videoMain">
+        <playerListComponent
+          ref="playListComponent"
+          @playerClick="handleClick"
+          :video-url="videoUrl"
+          :videoDataList="videoDataList"
+          v-model="windowNum"
+          style="width: 100%; height: 100%;"
+        ></playerListComponent>
+      </el-main>
+    </el-container>
+  </el-container>
 </template>
+
 <script>
 import tree from "vue-giant-tree";
 import uiHeader from "../layout/UiHeader.vue";
@@ -111,1247 +85,682 @@ import playerListComponent from &#39;./common/PlayerListComponent.vue&#39;;
 import player from './common/JessVideoPlayer.vue';
 import DeviceTree from './common/DeviceTree.vue'
 import treeTransfer from "el-tree-transfer";
-import {parseTime} from "../../utils/ruoyi";
 import Device1078Tree from "./JT1078Components/deviceList/Device1078Tree.vue";
-import userService from "./service/UserService";
+import VehicleList from "./JT1078Components/deviceList/VehicleList.vue";
+import WindowNumSelect from "./WindowNumSelect.vue";
+import CarouselConfig from "./CarouselConfig.vue";
 export default {
   name: "live",
   components: {
+    WindowNumSelect,
     playerListComponent,
     Device1078Tree,
+    VehicleList,
+    CarouselConfig,
     uiHeader, player, DeviceTree, tree, treeTransfer
   },
   data() {
     return {
-      //车辆列表过滤
-      filterText: '',
-      //穿梭框巡查数据-----------↓
-      //穿梭框默认展开
-      expandedKeys: [],
-      // 批次获取器
-      batchFetcher: null,
-      //源列表数据
-      sourceValue: [],
-      //原始sim列表 （sim对象）
-      simList: [],
-      //目标列表数据
-      targetValue: [],
-      //巡查播放原始列表
-      lastTargetValue: [],
-      //巡查过滤列表 （sim）
-      lastTargetValueFilter: [],
-      //现在正在播放的列表
-      nowPlayArray: [],
-      //prop参数
-      treeProps: {
-        children: 'children',
-        label: 'name',
-        disabled: 'disabled',
-      },
-      //巡查按钮
-      patrolValue: false,
-      //巡查宫格数量
-      patrolCell: 9,
-      //巡查宫格下拉框数据
-      patrolCellList: [1, 4, 9, 12],
-      //巡查时间
-      timerTime: '00:30',
-      //巡查定时器
-      fetchInterval: null,
-      //上线车辆
-      onlineCar: new Map(),
-      //车辆数据定时器
-      carInfoTimeout: null,
-      //车载key集合
-      onlineCarKeys: [],
-      //树节点对象
-      simNodeData: null,
-      videoUrl: [],
-      videoUrlHistory: "",
-      spilt: 1,//分屏
+      // --- UI 状态 ---
+      isFullscreen: false,
+      sidebarState: true,
+      windowNum: '4',
+      windowClickIndex: 1,
       windowClickData: null,
-      playerIdx: 0,//激活播放器
-      updateLooper: 0, //数据刷新轮训标志
-      count: 15,
-      historyLoadingFlag: true,
-      total: 0,
-      startTime: '',
-      endTime: '',
-      //channel
-      loading: false,
-      device: null,
-      nodes: [],
-      carPlayTimer: null,
-      carTreeNode: null,
-      ztreeObj: null,
-      ztreeNode: null,
-      fullscreenLoading: true,
-      fullscreenLoadingStyle: '',
-      showVideoDialog: false,
-      historyPlayListHtml: '',
-      hisotoryPlayFlag: false,
-      downloadURL: null,
-      rightMenuId: null,
-      channelData: null,
-      port: -1,
-      httpPort: -1,
-      stream: "",
-      sim: "",
-      channel: "",
-      setting: {
-        callback: {
-          beforeExpand: this.beforeExpand
-        },
-        check: {
-          enable: false,
-        },
-        edit: {
-          enable: false,
-        }
-      },
-      defaultProps: {
-        children: 'children',
-        label: 'title',
-        name: 'title',
-        isLeaf: 'spread',
-        nameIsHTML: true,
-        view: {
-          nameIsHTML: true
-        }
-      },
+      rightClickNode: null,
+      tooltipVisible: false,
+
+      // --- 播放数据 ---
+      videoUrl: [],
+      videoDataList: [],
+      deviceTreeData: [],
+      deviceList: [
+        "600201", "600202", "600203", "600204", "600205",
+        "601101", "601102", "601103", "601104", "CS-010",
+      ],
+
+      // --- 轮播核心状态 ---
+      isCarouselRunning: false,
+      isWithinSchedule: true,
+      carouselConfig: null,
+      carouselTimer: null,
+
+      // 流式缓冲相关变量
+      carouselDeviceList: [],
+      channelBuffer: [],
+      deviceCursor: 0,
     };
   },
   mounted() {
-    let that = this;
-    that.initTreeData();
-  },
-  created() {
-    this.checkPlayByParam();
-    this.getCarInfoBuffer()
+    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
+    window.addEventListener('beforeunload', this.handleBeforeUnload);
   },
   beforeDestroy() {
-    if (!this.isEmpty(this.timer)) {
-      clearInterval(this.timer);
-    }
-    if (!this.isEmpty(this.updateLooper)){
-      clearTimeout(this.updateLooper);
-    }
-    if (!this.isEmpty(this.carPlayTimer)) {
-      clearTimeout(this.carPlayTimer);
-    }
+    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
+    window.removeEventListener('beforeunload', this.handleBeforeUnload);
+    this.stopCarousel();
   },
-  computed: {
-    liveStyle() {
-      let style = {width: '99%', height: '99%'}
-      switch (this.spilt) {
-        case 4:
-          style = {width: '49%', height: '49%'}
-          break
-        case 9:
-          style = {width: '32%', height: '32%'}
-          break
-        case 12:
-          style = {width: '24.5%', height: '32%'}
-          break
-      }
-      this.$nextTick(() => {
-        for (let i = 0; i < this.spilt; i++) {
-          const player = this.$refs.player
-          player && player[i] && player[i].updatePlayerDomSize()
-        }
-      })
-      return style
+  // 路由离开守卫
+  beforeRouteLeave(to, from, next) {
+    if (this.isCarouselRunning) {
+      this.$confirm('当前视频轮播正在进行中，离开页面将停止轮播，是否确认离开？', '提示', {
+        confirmButtonText: '确定离开',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.stopCarousel();
+        next();
+      }).catch(() => next(false));
+    } else {
+      next();
     }
   },
-  watch: {
-    spilt(newValue) {
-      console.log("切换画幅;" + newValue)
-      let that = this
-      for (let i = 1; i <= newValue; i++) {
-        if (!that.$refs['player' + i]) {
-          continue
-        }
-        this.$nextTick(() => {
-          if (that.$refs['player' + i] instanceof Array) {
-            that.$refs['player' + i][0].resize()
-          } else {
-            that.$refs['player' + i].resize()
-          }
-        })
-      }
-      window.localStorage.setItem('split', newValue)
-    },
-    '$route.fullPath': 'checkPlayByParam'
-  },
-  destroyed() {
-
-  },
   methods: {
-    /**
-     * 视频窗口点击传值
-     * @param data 该窗口的数据
-     * @param index 该窗口的下标
-     * @param len 窗口总数
-     */
-    handleClick(data, index, len) {
-      console.log(index)
-      this.playerIdx = index
-      this.windowClickData = data
-    },
-    /**
-     * 统计树节点下一级有多少在线数量
-     */
-    statisticsOnline(data) {
-      for (let i in data) {
-        console.log(data[i].abnormalStatus === undefined && data[i].children && data[i].children.length > 0)
-        if (data[i].abnormalStatus === undefined && data[i].children && data[i].children.length > 0) {
-          data[i].onlineData = data[i].children.filter(item => item.abnormalStatus === 1);
-        }
+    // ==========================================
+    // 1. 拦截与权限控制
+    // ==========================================
+    handleBeforeUnload(e) {
+      if (this.isCarouselRunning) {
+        e.preventDefault();
+        e.returnValue = '轮播正在运行，确定要离开吗？';
+      }
+    },
+
+    async checkCarouselPermission(actionName) {
+      if (!this.isCarouselRunning) return true;
+      try {
+        await this.$confirm(
+          `当前【视频轮播】正在运行中。\n进行"${actionName}"操作将停止轮播，是否继续？`,
+          '轮播运行提示',
+          { confirmButtonText: '停止轮播并继续', cancelButtonText: '取消', type: 'warning' }
+        );
+        this.stopCarousel();
+        return true;
+      } catch (e) {
+        this.$message.info("已取消操作，轮播继续运行");
+        return false;
       }
     },
-    /**
-     * 树点击事件
-     */
-    nodeClick(data, node) {
-      if (data.children && data.children.length > 0 && data.abnormalStatus) {
-        this.simNodeData = data
-        this.channelData = null
-      } else if (data.parent.abnormalStatus === 10){
-        this.$message.error("设备未接入SIM卡")
-      } else if (data.parent.abnormalStatus === 20){
-        this.$message.error("设备不在线")
-      } else if (data.children === undefined) {
-        let playerIdx = this.playerIdx;
-        this.simNodeData = node.parent.data
-        this.channelData = data
-        this.openPlay(data, playerIdx++);
-        if (playerIdx > (this.spilt - 1)){
-          this.playerIdx = 0
+
+    // ==========================================
+    // 2. 轮播核心逻辑 (预加载 + 无限循环)
+    // ==========================================
+
+    getChannels(data) {
+      // (保持原有逻辑不变)
+      let nvrLabels, rmLabels;
+      if (data.sim2) {
+        if (this.deviceList.includes(data.name)) {
+          nvrLabels = ['中门', '', '车前', '驾驶舱', '', '前车厢', '', '360'];
         } else {
-          this.playerIdx = playerIdx
+          nvrLabels = ['中门', '', '车前', '驾驶舱', '前门', '前车厢', '后车厢', '360'];
         }
+        rmLabels = [];
       } else {
-        console.log(data)
-        this.$message.error("设备状态异常")
+        nvrLabels = ['ADAS', 'DSM', '路况', '司机', '整车前', '中门', '倒车', '前门客流', '后面客流'];
+        rmLabels = [];
       }
+      return [
+        ...nvrLabels.map((label, index) => label ? `${data.id}_${data.sim}_${index + 1}` : null).filter(Boolean),
+        ...rmLabels.map((label, index) => label ? `${data.id}_${data.sim2}_${index + 1}` : null).filter(Boolean)
+      ];
     },
-    /**
-     * 模糊查询树
-     */
-    filterNode(value, data) {
-      console.log(data)
-      if (!value) return true;
-      return this.findSearKey(data, value)
-    },
-    /**
-     * 递归搜索父级是否包含关键字
-     */
-    findSearKey(node, key) {
-      if (node.name.indexOf(key) !== -1) {
-        return true;
+
+    openCarouselConfig() {
+      if (this.isCarouselRunning) {
+        this.stopCarousel();
       } else {
-        if (node.parent === undefined || node.parent === null) {
-          return false;
-        } else {
-          return this.findSearKey(node.parent, key);
-        }
+        this.$refs.carouselConfig.open(this.carouselConfig);
       }
     },
+
     /**
-     * 处理返回的tree数据
+     * 启动轮播
      */
-    processingTreeData(data, pid, parent) {
-      for (let i in data) {
-        data[i].pid = pid
-        data[i].parent = parent;
-        if (data[i].children || (Array.isArray(data[i].children) && data[i].abnormalStatus === undefined)) {
-          this.processingTreeData(data[i].children, data[i].id, data[i]);
-        } else {
-          data[i].name = data[i].code
-          if (data[i].abnormalStatus !== 1) {
-            data[i].disabled = true;
-            let targetValue = this.targetValue;
-            if (targetValue.length > 0) {
-              this.disableItemsByName(targetValue, data[i].name);
+    async startCarousel(config) {
+      this.carouselConfig = config;
+      // 1. 收集设备
+      let deviceNodes = [];
+      if (config.sourceType === 'all_online') {
+        const findOnlineDevices = (nodes) => {
+          if (!Array.isArray(nodes)) return;
+          nodes.forEach(node => {
+            if (node.abnormalStatus !== undefined && node.children && node.abnormalStatus === 1) {
+              deviceNodes.push(node);
             }
-          }
-          this.addChannels(data[i])
-        }
+            if (node.children) findOnlineDevices(node.children);
+          });
+        };
+        findOnlineDevices(this.deviceTreeData);
+      } else if (config.sourceType === 'custom') {
+        const selected = config.selectedNodes || [];
+        deviceNodes = selected.filter(n => n.abnormalStatus !== undefined && n.children);
+      }
+
+      if (deviceNodes.length === 0) {
+        this.$message.warning("没有可轮播的在线设备");
+        return;
       }
+
+      // 2. 初始化状态
+      this.carouselDeviceList = deviceNodes;
+      this.channelBuffer = [];
+      this.deviceCursor = 0;
+      this.isCarouselRunning = true;
+      this.isWithinSchedule = true;
+
+      this.$message.success(`轮播启动，覆盖 ${deviceNodes.length} 台设备`);
+
+      // 3. 立即执行第一轮播放
+      await this.executeFirstRound();
     },
+
     /**
-     * 原始sim列表数据 （用来验证视屏巡查车辆是否在线）
-     * @param data 查询后台树列表
+     * 执行第一轮 (不等待，立即播放)
      */
-    processingSimList(data) {
-      if (data && data.length > 0) {
-        for (let i in data) {
-          if (data[i].children === undefined && data[i].abnormalStatus) {
-            this.simList.push(data[i]);
-          } else if (data[i].children && data[i].children.length > 0) {
-            this.processingSimList(data[i].children);
-          }
-        }
+    async executeFirstRound() {
+      // 切换到配置的布局
+      if (this.windowNum !== this.carouselConfig.layout) {
+        this.windowNum = this.carouselConfig.layout;
+      }
+
+      // 获取第一批数据
+      const batchData = await this.fetchNextBatchData();
+      if (batchData && batchData.urls) {
+        this.videoUrl = batchData.urls;
+        this.videoDataList = batchData.infos;
+        // 启动后续的循环
+        this.runCarouselLoop();
+      } else {
+        this.$message.warning("获取首轮播放数据失败，尝试继续运行...");
+        this.runCarouselLoop(); // 即使失败也尝试进入循环
       }
     },
+
     /**
-     * 处理巡查列表数据
+     * 轮播循环调度器 (预加载核心)
      */
-    disableItemsByName(arr, targetName) {
-      arr.forEach(item => {
-        // 检查当前项是否是对象并且包含 name 属性且值为 targetName
-        if (item && typeof item === 'object' && item.name === targetName) {
-          item.disabled = true;
-        }
-        // 如果当前项有 children 属性且是数组，则递归调用自身
-        if (item && Array.isArray(item.children)) {
-          this.disableItemsByName(item.children, targetName);
+    runCarouselLoop() {
+      if (!this.isCarouselRunning) return;
+
+      const config = this.carouselConfig;
+      // 检查时间段
+      if (config.runMode === 'schedule') {
+        const isInTime = this.checkTimeRange(config.timeRange[0], config.timeRange[1]);
+        this.isWithinSchedule = isInTime;
+        if (!isInTime) {
+          // 不在时间段，清屏并等待 10秒再检查
+          if (this.videoUrl.some(u => u)) this.closeAllVideoNoConfirm();
+          this.carouselTimer = setTimeout(() => this.runCarouselLoop(), 10000);
+          return;
         }
-      });
-    },
-    /**
-     * 查询车辆信息
-     */
-    getCarInfoBuffer() {
-      this.loading = true;
-      this.getCarInfo()
-    },
-    getCarInfo() {
-      console.log()
-      this.$axios({
-        method: 'get',
-        url: `/api/jt1078/query/car/tree/${userService.getUser().role.authority == 0?'all':userService.getUser().role.authority}`,
-      }).then(res => {
-        if (res && res.data && res.data.data) {
-          if (res.data.data.code == 1) {
-            //处理数据
-            this.simList = []
-            this.processingSimList(res.data.data.result)
-            this.processingTreeData(res.data.data.result, 0);
-            this.statisticsOnline(res.data.data.result)
-            console.log(res.data.data.result)
-            this.sourceValue = res.data.data.result;
-            this.loading = false
-            //定时更新数据
-            let this_ = this
-            this.carInfoTimeout = setTimeout(function () {
-              this_.getCarInfo()
-            }, 45000);
-          } else if (res.data.data.message) {
-            this.$message.error(res.data.data.message);
+      } else {
+        this.isWithinSchedule = true;
+      }
+
+      // 计算时间: 间隔时间，提前 15s 请求（优化预加载时间）
+      const intervalSeconds = Math.max(config.interval, 30); // 最小间隔30秒，给足够时间
+      const preLoadSeconds = 15; // 提前15秒开始请求，确保流有足够时间推上来
+      const waitTimeForFetch = (intervalSeconds - preLoadSeconds) * 1000;
+      const waitTimeForSwitch = preLoadSeconds * 1000;
+
+      // 步骤 1: 等待到预加载时间点
+      this.carouselTimer = setTimeout(async () => {
+        if (!this.isCarouselRunning) return;
+
+        console.log(`[轮播] 预加载下一批数据...`);
+        
+        // 显示加载提示
+        const loadingMsg = this.$message({
+          type: 'info',
+          message: '正在预加载下一批视频...',
+          duration: preLoadSeconds * 1000,
+          showClose: false
+        });
+        
+        // 步骤 2: 向后端请求下一批地址 (后端秒回，但流还没好)
+        const nextBatch = await this.fetchNextBatchData();
+        
+        loadingMsg.close();
+
+        // 步骤 3: 拿到地址后，等待流推上来 (补足剩下的时间)
+        this.carouselTimer = setTimeout(() => {
+          if (!this.isCarouselRunning) return;
+
+          if (nextBatch && nextBatch.urls) {
+            console.log('[轮播] 切换画面');
+            // 更新布局 (防止用户中途改了)
+            if (this.windowNum !== this.carouselConfig.layout) {
+              this.windowNum = this.carouselConfig.layout;
+            }
+            // 切换数据 -> 触发播放器复用逻辑
+            this.videoUrl = nextBatch.urls;
+            this.videoDataList = nextBatch.infos;
+            
+            this.$message.success('已切换到下一批视频');
+          } else {
+            this.$message.warning('预加载失败，将在下一轮重试');
           }
-        } else {
-          this.$message.error("请求错误，请刷新再试");
-        }
-        this.loading = false
-      }).catch(error => {
-        this.$message.error(error.message);
-      })
-    },
-    /**
-     * 打开巡查设置悬浮框
-     */
-    inspectionsDialog() {
-      this.showVideoDialog = true
+
+          // 递归进入下一轮
+          this.runCarouselLoop();
+
+        }, waitTimeForSwitch);
+
+      }, waitTimeForFetch);
     },
+
     /**
-     * 添加通道
+     * 核心：获取下一批数据 (分批加载优化)
      */
-    addChannels(data) {
-      console.log(data)
-      if (data.sim2){
-        let nvr_labels = ['中门','','车前','驾驶舱','前门','前车厢','后车厢','360'];
-        //'ADAS','DSM','前门客流','中门客流','360前','360后','360左','360右'
-        let rm_labels = [];
-        let children = [];
-        for (let i in nvr_labels) {
-          if (nvr_labels[i] === ''){
-            continue
+    async fetchNextBatchData() {
+      // 1. 确定当前需要的通道数
+      let pageSize = parseInt(this.carouselConfig.layout);
+      const layoutMap = { '1+5': 6, '1+7': 8, '1+9': 10, '1+11': 12 };
+      if (layoutMap[this.carouselConfig.layout]) pageSize = layoutMap[this.carouselConfig.layout];
+
+      // 2. 补货逻辑：填充 channelBuffer
+      let loopSafety = 0;
+      const maxLoops = 50;
+
+      while (this.channelBuffer.length < pageSize && loopSafety < maxLoops) {
+        loopSafety++;
+
+        // 游标归零重置逻辑
+        if (this.deviceCursor >= this.carouselDeviceList.length) {
+          console.log('[轮播缓冲] 列表循环，重置游标...');
+          this.deviceCursor = 0;
+          this.rebuildOnlineList(); // 刷新在线列表
+
+          if (this.carouselDeviceList.length === 0) {
+            console.warn('[轮播] 无在线设备，无法补货');
+            break;
           }
-          children.push({
-            id: `${data.id}_${data.sim}_${Number(i) + Number(1)}`,
-            pid: data.id,
-            name: nvr_labels[i],
-            disabled: data.disabled,
-            parent: data
-          })
         }
-        for (let i in rm_labels) {
-          if (rm_labels[i] === ''){
-            continue
+
+        const BATCH_SIZE = 10; // 增加批次大小以提高效率
+        let batchCodes = [];
+
+        // 提取一批设备
+        for (let i = 0; i < BATCH_SIZE; i++) {
+          if (this.deviceCursor >= this.carouselDeviceList.length) break;
+          const device = this.carouselDeviceList[this.deviceCursor];
+          if (device && device.abnormalStatus === 1) {
+            batchCodes.push(device);
           }
-          children.push({
-            id: `${data.id}_${data.sim2}_${Number(i) + Number(1)}`,
-            pid: data.id,
-            name: rm_labels[i],
-            disabled: data.disabled,
-            parent: data
-          })
+          this.deviceCursor++;
         }
-        data.children = children;
-      }else {
-        let labels = ['ADAS', 'DSM', '路况', '司机', '整车前', '中门', '倒车', '前门客流', '后面客流'];
-        let children = [];
-        for (let i in labels) {
-          children.push({
-            id: `${data.id}_${data.sim}_${Number(i) + Number(1)}`,
-            pid: data.id,
-            name: labels[i],
-            disabled: data.disabled,
-            parent: data
-          })
+
+        // 解析通道放入 Buffer
+        if (batchCodes.length > 0) {
+          batchCodes.forEach(device => {
+            try {
+              const codes = this.getChannels(device);
+              if (codes && codes.length > 0) this.channelBuffer.push(...codes);
+            } catch (e) {}
+          });
         }
-        data.children = children;
-      }
-    },
-    /**
-     * 巡查时间转换器
-     */
-    timerTimeConvertor() {
-      switch (this.timerTime) {
-        case "00:30":
-          return 30000
-        case "01:00":
-          return 30000 * 2
-        case "01:30":
-          return 30000 * 3
-        case "02:00":
-          return 30000 * 4
-        case "02:30":
-          return 30000 * 5
-        case "03:00":
-          return 30000 * 6
-        case "03:30":
-          return 30000 * 7
-        case "04:00":
-          return 30000 * 8
-        case "04:30":
-          return 30000 * 9
-        case "05:00":
-          return 30000 * 10
-        default:
-          return null
-      }
-    },
-    /**
-     * 巡查开启按钮
-     */
-    openInspections() {
-      let time = this.timerTimeConvertor();
-      this.spilt = this.patrolCell;
-      if (time == null) {
-        this.$message.error("时间选择错误 ==> [ " + this.timerTime + " ]")
-        console.log("时间选择结果为 ===> [ " + time + " ]")
-      }
-      let targetValue = this.targetValue;
-      if (targetValue === undefined || targetValue === null || targetValue.length === 0) {
-        this.$message.error("未选择巡查对象")
-        return
-      }
-      this.startFetching(time)
-      this.showVideoDialog = false
-    },
-    /**
-     * 巡查树数组只获取最后一级的一维数组
-     * @param array 原数组
-     */
-    getLastElementsOfInnerArrays(array) {
-      const result = [];
-      //递归取值
-      function traverse(arr) {
-        for (let item of arr) {
-          let children = item.children;
-          if (children !== undefined && Array.isArray(children)) {
-            traverse(children);
-          } else if (children === undefined) {
-            result.push(item)
-          } else {
-            console.log("数据格式有误 ==> { " + item + " }")
+
+        if (this.channelBuffer.length >= pageSize) break;
+      }
+
+      // 3. 如果 Buffer 还是空的
+      if (this.channelBuffer.length === 0) return null;
+
+      // 4. 从 Buffer 取出数据
+      const currentBatch = this.channelBuffer.splice(0, pageSize);
+
+      // 提取 ID
+      const streamList = currentBatch
+        .map(c => c.replaceAll('_', '-'))
+        .map(code => code.substring(code.indexOf('-') + 1));
+
+      // 5. 分批请求后端以减轻压力
+      const BATCH_REQUEST_SIZE = 12; // 每批最多12路
+      let allResults = [];
+      
+      // 如果总数超过BATCH_REQUEST_SIZE，则分批请求
+      if (streamList.length > BATCH_REQUEST_SIZE) {
+        console.log(`[轮播] 总共 ${streamList.length} 路视频，将分批请求`);
+        
+        for (let i = 0; i < streamList.length; i += BATCH_REQUEST_SIZE) {
+          const batch = streamList.slice(i, i + BATCH_REQUEST_SIZE);
+          console.log(`[轮播] 请求第 ${Math.floor(i/BATCH_REQUEST_SIZE)+1} 批，共 ${batch.length} 路`);
+          
+          try {
+            const res = await this.fetchBatchData(batch);
+            if (res && res.data && res.data.data) {
+              allResults.push(...res.data.data);
+            }
+            // 每批之间短暂休息以避免服务器压力过大
+            await new Promise(resolve => setTimeout(resolve, 200));
+          } catch (e) {
+            console.error(`[轮播] 第 ${Math.floor(i/BATCH_REQUEST_SIZE)+1} 批请求失败:`, e);
           }
         }
-      }
-      //开启递归取值
-      traverse(array);
-      return result;
-    },
-    /**
-     * 巡查关闭按钮
-     */
-    closeInspections() {
-      this.stopPatrol()
-      this.patrolValue = false
-      clearInterval(this.fetchInterval);
-      let nowPlayArray = this.nowPlayArray;
-      for (let index in nowPlayArray) {
-        this.setPlayUrl(null, index)
-      }
-    },
-    /**
-     * 后台关闭视频巡查
-     */
-    stopPatrol() {
-      this.$axios({
-        method: 'get',
-        url: `/api/jt1078/query/stopPatrol/request/io`,
-      }).then((res) => {
-        if (res.data.code === 0) {
-          this.$message.success("视频巡查已关闭")
-        } else {
-          this.$message.error("视频巡查已关闭失败, 请联系管理员");
-        }
-      });
-    },
-    /**
-     * 后台开启视频巡查
-     */
-    startPatrol(data) {
-      this.$axios({
-        method: 'post',
-        url: `/api/jt1078/query/startPatrol/request/io`,
-        data: data,
-        headers: {
-          'Content-Type': 'application/json', // 设置请求头
-        }
-      }).then((res) => {
-        if (res.data.code === 0) {
-          console.log("视频巡查已开启 ===》 " + res.data.msg)
-          this.$message.success("视频巡查已开启");
-        } else {
-          console.log("视频巡查开启失败 ===》 " + res.data.msg)
-          this.$message.error("视频巡查开启失败, 请联系管理员");
-        }
-      });
-    },
-    /**
-     * 巡查对话框取消按钮
-     */
-    cancel() {
-      this.loading = true;
-      this.targetValue = [];
-      this.timerTime = '00:30'
-    },
-    /**
-     * 开启推流视频播放
-     */
-    openPlay(data, idxTmp, fun) {
-      console.log("开启视频播放入参数据 ===》 [ " + data + " ]")
-      let id = data.id;
-      if (id === undefined || id === null) {
-        console.log("id 内容为 :" + id)
-        return;
-      }
-      console.log("id 内容为 :" + id)
-      let arr = id.split('_');
-      if (arr === undefined || arr === null || arr.length !== 3) {
-        console.log("split 内容为 :" + arr)
-        return;
-      }
-      this.$axios({
-        method: 'get',
-        url: '/api/jt1078/query/send/request/io/' + arr[1] + '/' + arr[2]
-      }).then(res => {
-        if (res.data.code === 0 && res.data.data) {
-          let videoUrl;
-          this.downloadURL = res.data.data.flv;
-          if (location.protocol === "https:") {
-            videoUrl = res.data.data.wss_flv;
-          } else {
-            videoUrl = res.data.data.ws_flv;
-          }
-          data.playUrl = videoUrl;
-          this.setPlayUrl(videoUrl, idxTmp);
-        } else {
-          if (!this.isEmpty(res.data.data) && !this.isEmpty(res.data.data.msg)) {
-            this.$message.error(res.data.data.msg);
-          } else {
-            this.$message.error(res.data.msg);
+      } else {
+        // 少量数据直接请求
+        try {
+          const res = await this.fetchBatchData(streamList);
+          if (res && res.data && res.data.data) {
+            allResults = res.data.data;
           }
+        } catch (e) {
+          console.error('[轮播] 批量请求失败:', e);
         }
-        if (fun) {
-          fun();
-        }
-      })
-    },
-    /**
-     * 批量开启推流视频播放
-     * @param data 视频推流参数集合 Array
-     */
-    // openBatchPlay(data) {
-    //   if (data === undefined || !Array.isArray(data)) {
-    //     return;
-    //   }
-    //   console.log("批量开启推流视频播放 ----》"+data)
-    //   let index = 0;
-    //   this.cycleBatchPlay(data, index)
-    // },
-    cycleBatchPlay(data, index) {
-      if (data === undefined || data[index] === undefined) {
-        return;
-      }
-      let this_i = this
-      this.openPlay(data[index], Number(index), function () {
-        index++
-        this_i.cycleBatchPlay(data, index)
-      });
-    },
-    /**
-     * 发送请求验证车辆是否在线
-     * @param item
-     * @returns {boolean|*}
-     */
-    checkStatus(item) {
-      if (this.lastTargetValueFilter.includes(item)) {
-        return true
-      }
-      if (this.simList) {
-        let find = this.simList.find(simData => simData.sim === item && simData.abnormalStatus !== 1);
-        //没找到则为离线 反之在线
-        console.log("find ===> " + find)
-        let f = (find === undefined)
-        if (f) {
-          this.lastTargetValueFilter.push(item)
-        }
-        return !f
       }
-      return true; // 直接返回预定义的在线状态
-    },
-    /**
-     * 批量验证车辆在线情况
-     * @param items
-     * @returns {*}
-     */
-    validateItemsOnline(items) {
-      // 检查所有提供的 items 是否在线，并返回过滤后的在线 items
-      const onlineItems = items.filter(item => this.checkStatus(item.id.split('_')[1]));
-      if (onlineItems.length !== items.length) {
-        console.warn("有车辆下线");
+
+      // 6. 整合结果
+      const urls = new Array(pageSize).fill('');
+      const infos = new Array(pageSize).fill(null);
+
+      if (allResults.length > 0) {
+        allResults.forEach((item, i) => {
+          if (i < currentBatch.length && item) {
+            urls[i] = item.ws_flv;
+            infos[i] = {
+              code: currentBatch[i],
+              name: `通道 ${i+1}`,
+              videoUrl: item.ws_flv
+            };
+          }
+        });
       }
-      this.nowPlayArray = items;
-      return onlineItems;
-    },
-    /**
-     * 循环从数组中取出一定数量的值
-     * @param array 原数组
-     * @param batchSize 取出的数量
-     * @returns {function(): *[]} 取出的结果
-     */
-    // createBatchFetcher(array, batchSize) {
-    //   let currentIndex = 0;
-    //   array = array.slice(); // 创建数组副本以避免修改原始数组
-    //   return function fetchNextBatch() {
-    //     const result = [];
-    //     for (let i = 0; i < batchSize; i++) {
-    //       if (currentIndex >= array.length) {
-    //         currentIndex = 0; // 当达到数组末尾时重置索引
-    //       }
-    //       result.push(array[currentIndex]);
-    //       currentIndex++;
-    //     }
-    //     return result;
-    //   };
-    // },
-    createBatchFetcher(array, batchSize) {
-      let currentIndex = 0;
-      const originalArray = array.slice(); // 创建原始数组副本
-
-      return function fetchNextBatch() {
-        const result = [];
-        for (let i = 0; i < batchSize && currentIndex < originalArray.length; i++) {
-          result.push(originalArray[currentIndex]);
-          currentIndex++;
-        }
-        return result;
-      };
+      
+      console.log(`[轮播] 成功获取 ${allResults.length}/${pageSize} 路视频地址`);
+      return { urls, infos };
     },
+
     /**
-     * 开启视频巡查
-     * @param items 选择巡查的对象
-     * @param time
+     * 分批请求数据
      */
-    startFetching(time) {
-      this.lastTargetValue = this.getLastElementsOfInnerArrays(this.targetValue);
-      console.log("targetValue ===> " + this.targetValue);
-      console.log("lastTargetValue ===> " + this.lastTargetValue);
-      if (!this.patrolValue && this.lastTargetValue.length > 0) {
-        // 在初始化 batchFetcher 之前验证 items 是否全部在线
-        this.lastTargetValue = this.validateItemsOnline(this.lastTargetValue);
-        if (this.lastTargetValue.length === 0) {
-          console.warn("【车辆全部下线】请重新选择");
-          return;
+    async fetchBatchData(streamList) {
+      // 请求后端 (优化点：增加重试机制和超时时间)
+      let retryCount = 0;
+      const maxRetries = 2;
+      
+      while (retryCount <= maxRetries) {
+        try {
+          const res = await this.$axios({
+            method: 'post',
+            url: '/api/jt1078/query/beachSend/request/io',
+            data: streamList,
+            timeout: 30000 // 增加超时时间到30秒，支持大批量请求
+          });
+          return res;
+        } catch (e) {
+          retryCount++;
+          if (retryCount > maxRetries) {
+            console.error(`预加载请求失败，已重试${maxRetries}次`, e);
+            this.$message.error('批量加载失败，请检查网络或设备状态');
+            return null;
+          }
+          console.warn(`请求失败，${retryCount * 2}秒后重试... (第${retryCount}/${maxRetries}次)`);
+          await new Promise(resolve => setTimeout(resolve, retryCount * 2000)); // 递增延迟重试：2秒、4秒
         }
-        this.startPatrol(this.lastTargetValue)
-        this.batchFetcher = this.createBatchFetcher(this.lastTargetValue, this.spilt);
-        // 立即执行一次 fetchNextBatch 并等待其完成
-        let data = this.fetchNextBatch();
-        console.log(parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}') + " 视频巡查数组 ===》 " + data);
-        this.beachSendIORequest(this.convertBeachList(data));
-        // 设置定时器以定期获取批次
-        this.fetchInterval = setInterval(() => {
-          let data = this.fetchNextBatch();
-          console.log(parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}') + " 视频巡查数组 ===》 " + data);
-          this.beachSendIORequest(this.convertBeachList(data));
-        }, time);
-        this.patrolValue = true;
-      }
-    },
-    /**
-     * 数组转换 （方便批量发送请求）
-     */
-    convertBeachList(data) {
-      if (data && data.length > 0) {
-        return data.map(item => item.id.split('_').slice(1).join('-'))
       }
     },
+
     /**
-     * 更新巡查播放列表
+     * 重建在线列表
      */
-    fetchNextBatch() {
-      // 在每次获取批次前验证在线状态
-      const updatedItems = this.validateItemsOnline(this.lastTargetValue);
-      if (updatedItems.length === 0) {
-        this.$message.error("车辆已全部下线，已关闭 【视屏巡查】")
-        this.stopFetching();
-        return
-      }
-      if (updatedItems.length !== this.lastTargetValue.length) {
-        // 更新 items 和 batchFetcher
-        this.lastTargetValue = updatedItems;
-        this.batchFetcher = this.createBatchFetcher(updatedItems, this.spilt);
+    rebuildOnlineList() {
+      let newDeviceNodes = [];
+      if (this.carouselConfig.sourceType === 'all_online') {
+        const findOnlineDevices = (nodes) => {
+          if (!Array.isArray(nodes)) return;
+          nodes.forEach(node => {
+            if (node.abnormalStatus !== undefined && node.children && node.abnormalStatus === 1) {
+              newDeviceNodes.push(node);
+            }
+            if (node.children) findOnlineDevices(node.children);
+          });
+        };
+        findOnlineDevices(this.deviceTreeData);
+      } else {
+        const selected = this.carouselConfig.selectedNodes || [];
+        newDeviceNodes = selected.filter(n => n.abnormalStatus !== undefined && n.abnormalStatus === 1);
       }
-      const batch = this.batchFetcher();
-      this.nowPlayArray = batch;
-      return batch
+      this.carouselDeviceList = newDeviceNodes;
     },
-    /**
-     * 关闭视频巡查
-     */
-    stopFetching() {
-      if (this.isFetching) {
-        clearInterval(this.fetchInterval);
-        this.fetchInterval = null;
-        this.isFetching = false;
+
+    stopCarousel() {
+      this.isCarouselRunning = false;
+      if (this.carouselTimer) {
+        clearTimeout(this.carouselTimer);
+        this.carouselTimer = null;
       }
+      this.$message.info("轮播已停止");
     },
-    destroy(idx) {
-      this.clear(idx.substring(idx.length - 1))
+
+    closeAllVideoNoConfirm() {
+      this.videoUrl = [];
+      this.videoDataList = [];
     },
-    treeChannelClick(device, data, isCatalog) {
-      if (data.channelId && !isCatalog) {
-        if (device.online === 0) {
-          this.$message.error('设备离线!不允许点播');
-          this.closeLoading();
-          return false;
-        } else {
-          this.isSendDevicePush(data, this.patrolValue);
-        }
-      }
+
+    checkTimeRange(startStr, endStr) {
+      const now = new Date();
+      const current = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
+      const parse = (str) => {
+        const [h, m, s] = str.split(':').map(Number);
+        return h * 3600 + m * 60 + s;
+      };
+      return current >= parse(startStr) && current <= parse(endStr);
     },
-    contextMenuEvent: function (device, event, data, isCatalog) {
+
+    // ==========================================
+    // 3. 常规操作
+    // ==========================================
+    handleTreeLoaded(data) {
+      this.deviceTreeData = data;
     },
-    isSendDevicePush(itemData, patrolValue) {
-      if (patrolValue) {
-        this.videoPatrolStart(itemData);
-      } else {
-        this.sendDevicePush(itemData);
+
+    async nodeClick(data, node) {
+      if (!(await this.checkCarouselPermission('播放视频'))) return;
+      if (data.abnormalStatus === undefined && data.children === undefined) {
+        if (!(await this.checkCarouselPermission('切换播放'))) return;
+        this.getPlayStream(data);
       }
     },
-    //通知设备上传媒体流
-    sendDevicePush(itemData, fun) {
-      this.save(itemData)
-      let deviceId = itemData.deviceId;
-      let channelId = itemData.channelId;
-      if (this.isEmpty(deviceId)) {
-        this.$message.error("没有获取到sim卡，请检查设备是否接入");
-        this.closeLoading();
-        if (fun) {
-          fun();
-        }
-        return;
-      }
-      console.log("通知设备推流1：" + deviceId + " : " + channelId);
-      let idxTmp = this.playerIdx
+
+    getPlayStream(data) {
+      let stream = data.code.replace('-', '_');
+      let currentIdx = this.windowClickIndex;
+      let arr = stream.split("_");
+      // 单路播放默认主码流(0)
       this.$axios({
         method: 'get',
-        url: '/api/jt1078/query/send/request/io/' + deviceId + '/' + channelId
+        url: `/api/jt1078/query/send/request/io/${arr[1]}/${arr[2]}`
       }).then(res => {
-        console.log(res)
-        if (res.data.code === 0 && res.data.data) {
-          let videoUrl;
-          this.port = res.data.data.port;
-          this.httpPort = res.data.data.httpPort;
-          this.stream = res.data.data.stream;
-          console.log(res.data.data);
-          if (!this.isEmpty(res.data.data)) {
-            this.downloadURL = res.data.data.flv;
-            if (location.protocol === "https:") {
-              videoUrl = res.data.data.wss_flv;
-            } else {
-              videoUrl = res.data.data.ws_flv;
-            }
-            console.log(videoUrl);
-            itemData.playUrl = videoUrl;
-            this.setPlayUrl(videoUrl, idxTmp);
-          }
+        if (res.data.code === 0) {
+          const url = res.data.data.ws_flv;
+          const idx = currentIdx - 1;
+          this.$set(this.videoUrl, idx, url);
+          data['videoUrl'] = url;
+          this.$set(this.videoDataList, idx, data);
+
+          let nextIndex = currentIdx + 1;
+          const max = parseInt(this.windowNum) || 4;
+          if (nextIndex > max) nextIndex = 1;
+          this.windowClickIndex = nextIndex;
         } else {
           this.$message.error(res.data.msg);
         }
-        if (fun) {
-          fun();
-        }
-      }).catch(function (e) {
-        if (fun) {
-          fun();
-        }
-      }).finally(() => {
-        this.closeLoading();
       });
     },
-    /**
-     * 播放器赋值
-     * @param url 播放内容路径
-     * @param idx 播放的id
-     */
-    setPlayUrl(url, idx) {
-      this.$refs.playListComponent.setPlayUrl(url, idx)
-    },
-    checkPlayByParam() {
-      let {deviceId, channelId} = this.$route.query
-      if (deviceId && channelId) {
-        this.sendDevicePush({deviceId, channelId})
-      }
-    },
-    shot(e) {
-      console.log(e)
-      // send({code:'image',data:e})
-      var base64ToBlob = function (code) {
-        let parts = code.split(';base64,');
-        let contentType = parts[0].split(':')[1];
-        let raw = window.atob(parts[1]);
-        let rawLength = raw.length;
-        let uInt8Array = new Uint8Array(rawLength);
-        for (let i = 0; i < rawLength; ++i) {
-          uInt8Array[i] = raw.charCodeAt(i);
-        }
-        return new Blob([uInt8Array], {
-          type: contentType
-        });
-      };
-      let aLink = document.createElement('a');
-      let blob = base64ToBlob(e); //new Blob([content]);
-      let evt = document.createEvent("HTMLEvents");
-      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
-      aLink.download = '截图';
-      aLink.href = URL.createObjectURL(blob);
-      aLink.click();
-    },
-    save(item) {
-      let dataStr = window.localStorage.getItem('playData') || '[]'
-      let data = JSON.parse(dataStr);
-      data[this.playerIdx] = item
-      window.localStorage.setItem('playData', JSON.stringify(data))
-    },
-    clear(idx) {
-      let dataStr = window.localStorage.getItem('playData') || '[]'
-      let data = JSON.parse(dataStr);
-      data[idx - 1] = null;
-      console.log(data);
-      window.localStorage.setItem('playData', JSON.stringify(data))
-    },
-    initTreeData() {
-      this.showLoading();
-      this.$axios({
-        method: 'get',
-        url: `/api/jt1078/query/company/tree`,
-      }).then((res) => {
-        if (res && res.data && res.data.data) {
-          if (res.data.data.code == 1) {
-            let data = res.data.data.result;
-            this.initDate(this.nodes, data);
-          } else if (res.data.data.message) {
-            this.$message.error(res.data.data.message);
-          }
-        } else {
-          this.$message.error("请求错误，请刷新再试");
+    // 优化后的右键播放
+    async handleCommand(command) {
+      if (command === 'playback') {
+        if (!(await this.checkCarouselPermission('切换设备播放'))) return;
+        if (!this.rightClickNode) {
+          this.$message.warning("请选择播放设备");
+          return;
         }
-        this.closeLoading();
-      });
-    },
-    initDate(nodes, datas) {
-      if (nodes && datas) {
-        let len = datas.length;
-        for (let i = 0; i < len; i++) {
-          if (null == datas[i].id || undefined == datas[i].id || "" == datas[i].id) {
-            continue;
-          }
-          let node = this.combationNodeValue(datas[i].name, datas[i].id, datas[i].type, true, datas[i].sim, datas[i].abnormalStatus)
-          nodes.push(node);
-          if (datas[i].children) {
-            node.children = [];
-            this.initDate(node.children, datas[i].children);
+
+        const nodeData = this.rightClickNode.data;
+        // 清空当前画面
+        this.videoUrl = [];
+        this.videoDataList = [];
+
+        const doPlay = (channels) => {
+          if (!channels || channels.length === 0) {
+            this.$message.warning("该设备下没有可用通道");
+            return;
           }
-        }
-      }
-    },
-    combationNodeValue(name, id, type, isParent, sim, abnormalStatus) {
-      if (this.isEmpty(sim)) {
-        sim = "";
-      }
-      if (abnormalStatus >= 10 && abnormalStatus < 20) {
-        name = "<view style='color:red'>" + name + "</view>";
-      } else if (abnormalStatus >= 20 && abnormalStatus < 30) {
-        name = "<view style='color:#ccc'>" + name + "</view>";
-      }
-      return {
-        name: name,
-        id: id,
-        abnormalStatus: abnormalStatus,
-        sim: sim,
-        type: type,
-        isParent: isParent,
-      }
-    },
-    onClick(evt, treeId, treeNode) {
-      this.combationChildNode(treeNode);
-    },
-    beforeExpand(treeId, treeNode) {
-      return true;
-    },
-    combationChildNode(treeNo) {
-      this.ztreeNode = treeNo;
-      if (treeNo.seachChild && (treeNo.seachChild == 'true')) {
-        return;
-      }
-      this.showLoading();
-      if (treeNo.type == 401 || treeNo.type == '401') {
-        let device = new Object();
-        if (this.isEmpty(treeNo.online)) {
-          treeNo.online = 1;
-        }
-        device.online = treeNo.online;
-        if (this.spilt == 1) {
-          this.videoUrl = []
-        }
-        this.closeLoading();
-        let pageObj = this;
-        if (!this.isEmpty(this.sim) && !this.channel && this.sim != treeNo.sim && this.channel != treeNo.id) {
-          let data = new Object();
-          data.channelId = treeNo.id;
-          data.sim = treeNo.sim;
-          data.deviceId = treeNo.sim;
-          this.sim = treeNo.sim;
-          this.channel = treeNo.id;
-          console.log("stop");
-          this.sendIORequestStop(data.sim, data.channelId, function () {
-            let flag = pageObj.treeChannelClick(device, data, false);
-            if (false == flag) {
-              treeNo.online = 0;
-            }
+
+          // 自动适配布局
+          const count = channels.length;
+          if (count <= 1) this.windowNum = '1';
+          else if (count <= 4) this.windowNum = '4';
+          else if (count <= 9) this.windowNum = '9';
+          else if (count <= 16) this.windowNum = '16';
+          else if (count <= 25) this.windowNum = '25';
+          else this.windowNum = '36'; // 最大支持36
+
+          this.$nextTick(() => {
+            const streamList = channels
+              .map(c => c.code.replaceAll('_', '-'))
+              .map(code => code.substring(code.indexOf('-') + 1));
+
+            this.$axios({
+              method: 'post',
+              url: '/api/jt1078/query/beachSend/request/io',
+              data: streamList,
+              headers: { 'Content-Type': 'application/json' }
+            }).then(res => {
+              const streamData = res.data.data;
+              if (streamData && streamData.length > 0) {
+                let urls = streamData.map(item => item.ws_flv);
+                // 填充数据
+                urls.forEach((url, i) => {
+                  this.$set(this.videoUrl, i, url);
+                  const channelInfo = { ...channels[i], videoUrl: url };
+                  this.$set(this.videoDataList, i, channelInfo);
+                });
+                this.$message.success(`成功播放 ${streamData.length} 路视频`);
+              } else {
+                this.$message.warning("服务器未返回流地址");
+              }
+            }).catch(err => {
+              console.error("播放失败", err);
+              this.$message.error("播放请求失败");
+            });
           });
+        };
+
+        if (nodeData.children && nodeData.children.length > 0) {
+          doPlay(nodeData.children);
         } else {
-          let data = new Object();
-          data.channelId = treeNo.id;
-          data.sim = treeNo.sim;
-          data.deviceId = treeNo.sim;
-          this.sim = treeNo.sim;
-          this.channel = treeNo.id;
-
-          let flag = pageObj.treeChannelClick(device, data, false);
-          if (false == flag) {
-            treeNo.online = 0;
-          }
+          // 假设这里需要异步加载子节点，如果是同步的可以直接忽略 else
+          const channels = nodeData.children || [];
+          doPlay(channels);
         }
-      } else if (treeNo.type == 301 || treeNo.type == '301') {
-        this.addChannel(treeNo);
-        this.carTreeNode = treeNo;
-        this.channel = null;
-      } else if (treeNo.type == 2 || treeNo.type == '2') {
-        this.requestChildNode(treeNo);
-        this.sim = null;
-        this.channel = null;
-        this.carTreeNode = null;
-      } else {
-        this.carTreeNode = null;
-        this.sim = null;
-        this.channel = null;
-        this.closeLoading();
       }
     },
-    /**
-     * 添加通道
-     */
-    addChannel(treeNo) {
-      let labels = ['ADAS', 'DSM', '路况', '司机', '整车前', '中门', '倒车', '前门客流', '后面客流'];
-      let children = [];
-      let len = labels.length;
-      let i = 0;
-      let pageObj = this;
-      for (; i < len; i++) {
-        console.log(treeNo.abnormalStatus + "==========================>" + i);
-        let node = this.combationNodeValue(labels[i], i + 1, 401, false, treeNo.sim, treeNo.abnormalStatus);
-        node.sim = treeNo.sim;
-        node.zbh = treeNo.name;
-        node.id = i + 1;
-        children.push(node);
-      }
-      this.ztreeObj.addNodes(treeNo, 0, children, true);
-      treeNo.seachChild = 'true';
-      pageObj.sim = treeNo.sim;
-      this.closeLoading();
-    },
-    requestChildNode(treeNo) {
-      if (treeNo.spread === 'false' || !treeNo.spread) {
-        let id = treeNo.id;
-        this.$axios({
-          method: 'get',
-          url: `/api/jt1078/query/car/tree/` + id,
-        }).then((res) => {
-          if (res && res.data && res.data.data) {
-            if (res.data.data.code == 1) {
-              let children = [];
-              this.initDate(children, res.data.data.result);
-              this.ztreeObj.addNodes(treeNo, -1, children, true);
-              treeNo.seachChild = 'true';
-              let _this = this;
-              this.carPlayTimer = setTimeout(function () {
-                _this.requestChildNode1();
-              }, 15000);
-            } else if (res.data.data.message) {
-              this.$message.error(res.data.data.message);
-            }
-          } else {
-            this.$message.error("请求错误，请刷新再试");
-          }
-          this.closeLoading();
+
+    async closeAllVideo() {
+      if (!(await this.checkCarouselPermission('关闭所有视频'))) return;
+      if (this.videoUrl.some(u => u)) {
+        this.$confirm('确认全部关闭直播 ？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
         })
+          .then(() => {
+            this.videoUrl = [];
+            this.videoDataList = [];
+          }).catch(() => {
+        });
+      } else {
+        this.$message.error('没有可以关闭的视频');
       }
     },
-    requestChildNode1() {
-      this.$axios({
-        method: 'get',
-        url: `/api/jt1078/query/car/tree/` + 100,
-      }).then((res) => {
-        if (res && res.data && res.data.data) {
-          if (res.data.data.code == 1) {
-            this.refreshRequestRefresh(res.data.data.result);
-          } else if (res.data.data.message) {
-            this.$message.error(res.data.data.message);
-          }
-        } else {
-          this.$message.error("请求错误，请刷新再试");
-        }
-      })
-    },
-    refreshRequestRefresh(nodes) {
-      if (nodes) {
-        let length = nodes.length;
-        for (let i = 0; i < length; i++) {
-          let findNode = this.ztreeObj.getNodeByParam("id", nodes[i].id + "", null);
-          if (findNode) {
-            findNode.name = nodes[i].name;
-            if (findNode.type == 301 || findNode.type == '301') {
-              findNode.name = nodes[i].name;
-            } else {
-              findNode.name = nodes[i].name;
-            }
-            this.ztreeObj.updateNode(findNode);
-            if (nodes[i].children) {
-              this.refreshRequestRefresh(nodes[i].children);
-            }
-          }
-        }
+    async closeVideo() {
+      if (!(await this.checkCarouselPermission('关闭当前窗口'))) return;
+      const idx = Number(this.windowClickIndex) - 1;
+      if (this.videoUrl && this.videoUrl[idx]) {
+        // 设置为null而不是空字符串,确保播放器完全销毁
+        this.$set(this.videoUrl, idx, null);
+        this.$set(this.videoDataList, idx, null);
+      } else {
+        this.$message.warning(`当前窗口 [${this.windowClickIndex}] 没有正在播放的视频`);
       }
     },
-    showLoading() {
-      this.loading = true;
-      this.fullscreenLoading = true;
-      // this.fullscreenLoadingStyle ='display:block';
-    },
-    closeLoading() {
-      this.loading = false;
-      //this.fullscreenLoadingStyle ='display:none';
-      this.fullscreenLoading = false;
-      console.log("已经关闭");
-    },
-    sendIORequestStop(sim, channel, fun) {
-      if (this.isEmpty(sim) || this.isEmpty(channel)) {
-        console.log("sim:" + sim + ";channel:" + channel);
-        if (fun) {
-          fun();
-        }
-        return;
-      }
-      this.videoUrl = [''];
-      this.$axios({
-        method: 'get',
-        url: `/api/jt1078/query/send/stop/io/` + sim + "/" + channel + "/" + this.stream + "/" + this.port + "/" + this.httpPort,
-      }).then((res) => {
-        console.log(res);
-        if (fun) {
-          fun();
-        }
-      });
-    },
-    isEmpty(val) {
-      return null == val || undefined == val || "" == val;
-    },
-    close() {
-      let pageObj = this;
-      this.showLoading();
-      this.historyPlayListHtml = null;
-      this.startTime = null;
-      this.endTime = null;
-      if (this.hisotoryPlayFlag) {
-        this.sendIORequestStop(this.sim, this.channel, function () {
-          pageObj.showVideoDialog = false;
-          pageObj.videoUrl = [''];
-          pageObj.closeLoading();
-          console.log("关闭弹窗");
-        });
+
+    toggleFullscreen() {
+      const element = this.$refs.videoMain.$el;
+      if (!this.isFullscreen) {
+        if (element.requestFullscreen) element.requestFullscreen();
+        else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen();
       } else {
-        pageObj.showVideoDialog = false;
-        pageObj.closeLoading();
+        if (document.exitFullscreen) document.exitFullscreen();
+        else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
       }
     },
-    /**
-     * 视频一键播放
-     */
-    oneClickPlayback() {
-      if (this.isEmpty(this.simNodeData)) {
-        this.$message.error('请选择车辆');
-        return;
-      }
-      if (this.isEmpty(this.simNodeData.abnormalStatus)) {
-        this.$message.error('请检查车辆状态');
-        return;
-      }
-      if (this.simNodeData.abnormalStatus != 1) {
-        this.$message.error('车辆设备离线，请检查设备');
-        return;
-      }
-      if (this.isEmpty(this.simNodeData.sim)) {
-        this.$message.error('无法获取SIM卡信息，请检查设备');
-        return;
-      }
-      let children = this.simNodeData.children;
-      if (children && children.length > 0){
-        this.spilt = 9;
-        let data = []
-        let count = 1;
-        for (let i in children) {
-          let split = children[i].id.split("_");
-          if (split.length === 3){
-            data.push(`${split[1]}-${split[2]}`)
-            if (count++ === this.spilt){
-              break
-            }
-          }
-        }
-        if (data.length === 0){
-          this.$message.error("该设备无通道播放")
-          return;
-        }
-        this.beachSendIORequest(data);
-      }else {
-        this.$message.error("该设备无通道播放")
-      }
-
+    handleFullscreenChange() {
+      this.isFullscreen = !!document.fullscreenElement;
     },
-    /**
-     * 批量发送推流请求
-     * @param data
-     */
-    beachSendIORequest(data) {
-      console.log(data)
-      this.$axios({
-        method: 'post',
-        url: '/api/jt1078/query/beachSend/request/io',
-        data: data,
-        headers: {
-          'Content-Type': 'application/json', // 设置请求头
-        }
-      }).then(
-        res => {
-          let dataList = res.data.data;
-          console.log(dataList);
-          if (res.data.code == 0 && dataList != null && dataList.length >= 0) {
-            for (let i in dataList) {
-              this.$refs.playListComponent.setPlayUrl(dataList[i].ws_flv, i)
-            }
-          } else {
-            this.$message.error(res.data.msg);
-          }
-        }
-      )
+    updateSidebarState() {
+      this.sidebarState = !this.sidebarState;
+      this.$refs.playListComponent.updateGridTemplate(this.windowNum);
     },
-    // playOneAllChannel(channel) {
-    //   if (channel == 9) {
-    //     return;
-    //   }
-    //   let item = new Object();
-    //   item.deviceId = this.sim;
-    //   item.channelId = 1 + channel;
-    //   this.playerIdx = channel;
-    //
-    //   this.sendDevicePush(item);
-    // },
-    spiltClickFun(val) {
-      this.spilt = val;
-      if (val - 1 < this.playerIdx) {
-        this.playerIdx = val - 1;
-      }
+    handleClick(data, index) {
+      this.windowClickIndex = index + 1;
+      this.windowClickData = data;
     },
-    closeSelectItem() {
-      console.log("============================>" + this.playerIdx);
-      this.setPlayUrl(null, this.playerIdx)
+    showTooltip() {
+      this.tooltipVisible = true;
     },
-    closeSelectCarItem() {
-      for (let index = 0; index < 9; index++) {
-        this.setPlayUrl(null, index)
-      }
+    hideTooltip() {
+      this.tooltipVisible = false;
     },
-    showRMenu(event) {
-      if (this.isEmpty(this.rightMenuId)) {
-        return;
+    nodeContextmenu(event, data, node) {
+      if (data.abnormalStatus !== undefined && data.children) {
+        this.rightClickNode = node;
+        event.preventDefault();
+        const menu = this.$refs.contextMenu;
+        menu.show();
+        menu.$el.style.position = 'fixed';
+        menu.$el.style.left = `${event.clientX}px`;
+        menu.$el.style.top = `${event.clientY}px`;
       }
-      let carMenu = document.getElementById(this.rightMenuId);
-      carMenu.setAttribute("style", "display:block");
-
-      let x = event.clientX;
-      let y = event.clientY;
-      carMenu.setAttribute("style", "display:block;top:" + y + "px;left:" + x + "px");
-      document.addEventListener("click", this.hideMenu);
-      console.log(this.rightMenuId);
     },
-    hideMenu() {
-      if (this.isEmpty(this.rightMenuId)) {
-        return;
-      }
-      let carMenu = document.getElementById(this.rightMenuId);
-      carMenu.setAttribute("style", "display:none");
-      this.rightMenuId = null;
-    }
   }
 };
 </script>
+
 <style scoped>
-.inspections-tree >>> .el-tree {
-  padding-bottom: 22px;
+.el-header {
+  background-color: #B3C0D1;
+  color: #333;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 20px;
 }
-.device-list-tree >>> .el-tree {
-  padding-bottom: 13px;
+.header-right-info {
+  margin-left: auto;
+  font-weight: bold;
+  font-size: 14px;
 }
-.device-list-tree >>> .el-tree-node__content {
-  padding-bottom: 13px;
-  height: 20px;
+.el-aside {
+  background-color: white;
+  color: #333;
+  text-align: center;
+  height: 100%;
+  width: 20%;
+  padding: 10px;
+  margin-right: 1px;
 }
 .el-main {
-  background-color: rgba(0, 0, 0, 0.84);
+  background-color: rgba(0, 0, 0, 0.95);
   color: #333;
   text-align: center;
   line-height: 160px;
@@ -1359,165 +768,35 @@ export default {
   margin-left: 1px;
 }
-.device-tree-main-box {
-  text-align: left;
-}
-
-.btn {
-  margin: 0 10px;
-}
-
-.btn:hover {
-  color: #409EFF;
-}
-
-.btn.active {
-  color: #409EFF;
+body > .el-container {
+  margin-bottom: 40px;
 }
-.redborder {
-  border: 2px solid red !important;
+.el-container {
+  height: 90vh;
 }
-.play-box {
-  background-color: #000000;
-  border: 2px solid #505050;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.el-container:nth-child(5) .el-aside, .el-container:nth-child(6) .el-aside {
+  line-height: 260px;
 }
-.historyListLi {
-  width: 97%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  padding: 3px;
-  margin-bottom: 6px;
-  border: 1px solid #000000;
+.el-dropdown-link {
+  display: none;
 }
-.historyListDiv {
-  height: 80vh;
+.el-container:nth-child(7) .el-aside {
   width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
+  line-height: 320px;
 }
-/* 菜单的样式 */
-.rMenu {
-  position: absolute;
-  top: 0;
-  display: none;
-  margin: 0;
+.el-main:fullscreen, .el-main:-webkit-full-screen {
+  background-color: black;
+  width: 100vw;
+  height: 100vh;
   padding: 0;
-  text-align: left;
-  border: 1px solid #BFBFBF;
-  border-radius: 3px;
-  background-color: #EEE;
-  box-shadow: 0 0 10px #AAA;
-}
-
-.rMenu li {
-  width: 170px;
-  list-style: none outside none;
-  cursor: default;
-  color: #666;
-  margin-left: -20px;
-}
-
-.rMenu li:hover {
-  color: #EEE;
-  background-color: #666;
-}
-
-li#menu-item-delete, li#menu-item-rename {
-  margin-top: 1px;
-}
-
-.videoList {
+  margin: 0;
   display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-}
-
-.video-item {
-  position: relative;
-  width: 15rem;
-  height: 10rem;
-  margin-right: 1rem;
-  background-color: #000000;
+  flex-direction: column;
+  overflow: hidden;
 }
-
-.video-item-img {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  width: 100%;
-  height: 100%;
-}
-
-.video-item-img:after {
-  content: "";
-  display: inline-block;
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  width: 3rem;
-  height: 3rem;
-  background-image: url("../assets/loading.png");
-  background-size: cover;
-  background-color: #000000;
-}
-
-.video-item-title {
-  position: absolute;
-  bottom: 0;
-  color: #000000;
-  background-color: #ffffff;
-  line-height: 1.5rem;
-  padding: 0.3rem;
-  width: 14.4rem;
-}
-
-.baidumap {
-  width: 100%;
-  height: 100%;
-  border: none;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-}
-
-/* 去除百度地图版权那行字 和 百度logo */
-.baidumap > .BMap_cpyCtrl {
-  display: none !important;
-}
-
-.baidumap > .anchorBL {
-  display: none !important;
-}
-
-.scroll-container {
-  max-height: 85vh; /* 设置最大高度为85%的视口高度 */
-  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
-  overflow-x: hidden; /* 隐藏水平滚动条 */
-}
-
-.transfer-footer {
-  margin-left: 20px;
-  padding: 6px 5px;
-}
-
-
 </style>
 <template>
-  <div style="width: 2000px">
-    <el-container v-loading="loading" style="height: 93vh;" element-loading-text="拼命加载中">
-      <el-aside width="400px" style="background-color: #ffffff;height: 100%;">
-        <el-main style="padding: 0;width: 100%;height: 68%;background: white;margin-bottom: 10px">
-          <device1078-tree :tree-data="sourceValue" @node-click="nodeClick"></device1078-tree>
-        </el-main>
-        <el-footer style="width: 100%;height: 30%;background: grey">
-          <el-form ref="form" class="historyButton" style="padding-top: 20px">
-            <el-form-item label="设备信息"  style="color: white;text-align: left;">
-              <el-tag effect="dark" v-if="sim_channel_data">
-                {{ `车辆：${sim_channel_data.pid} 通道：${sim_channel_data.name}` }}
-              </el-tag>
-              <el-tag effect="dark" v-else>
-                请选择车辆通道
-              </el-tag>
-            </el-form-item>
-            <el-form-item label="日期"  style="color: white;">
-              <el-date-picker
-                v-model="date"
-                align="right"
-                type="date"
-                style="width: 70%;"
-                placeholder="选择日期"
-                :picker-options="pickerOptions">
-              </el-date-picker>
-            </el-form-item>
-            <el-form-item label="时间"  style="color: white;">
-              <el-time-picker
-                is-range
-                v-model="timeList"
-                style="width: 70%;"
-                range-separator="至"
-                start-placeholder="开始时间"
-                end-placeholder="结束时间"
-                placeholder="选择时间范围">
-              </el-time-picker>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="searchHistoryTimer" style="width: 70%;">搜索</el-button>
-            </el-form-item>
-          </el-form>
-        </el-footer>
-      </el-aside>
-      <el-container style="height: 93vh;">
-        <el-main style="padding: 0;height: 65%;">
-          <div class="scroll-container"
-               style="width: 100%;height: 99%;display: flex;flex-wrap: wrap;background-color: #000;">
-            <div style="width: 99%;height: 99%;display: flex;flex-wrap: wrap;background-color: #000;">
-              <div v-if="!videoUrl[0]" style="color: #ffffff;font-size: 30px;font-weight: bold;"></div>
-              <player ref="player" v-else :initial-play-url="videoUrl[0]"
-                      style="width: 100%;height: 99%;"/>
-            </div>
+  <el-container style="height: 90vh; flex-direction: column;">
+    <!-- Main Container with SplitPanels -->
+    <el-main class="layout-main">
+      <splitpanes class="splitpanes-container" >
+        <!-- 左侧面板 -->
+        <pane :size="20" min-size="10px" class="aside-pane" resizable>
+          <device1078-tree :tree-data="sourceValue" style="width: 100%;" @node-click="nodeClick"></device1078-tree>
+        </pane>
+
+        <!-- 右侧主内容 -->
+        <pane :size="86" class="main-pane"
+              v-loading="loading"
+              element-loading-text="拼命加载中"
+              element-loading-spinner="el-icon-loading"
+              element-loading-background="rgba(0, 0, 0, 0.8)" >
+          <div class="content-main">
+              <historical-record-form style="text-align:left" :inline="true" v-show="showSearch" :query-params="queryParams"
+                                      @handleQuery="handleQuery"
+              />
+              <el-row v-if="deviceData || channelData" :gutter="10" class="mb8">
+                <el-col :span="1.5">
+                  <el-tag
+                    effect="dark">
+                    {{ deviceTitle }}
+                  </el-tag>
+                </el-col>
+              </el-row>
+              <history-search-table ref="historySearchTable" style="height: 100%;" :table-data="historyData"
+                                                @playHistoryVideo="clickHistoricalPlay"
+                                                @uploadHistoryVideo="uploadHistoryVideo"/>
+              <history-play-dialog ref="historyPlayDialog" />
           </div>
-        </el-main>
-        <el-footer style="width: 100%;height: 30%;background-color: white">
-          <history-search-table :table-data="historyData"
-                                @playHistoryVideo="clickHistoricalPlay"
-                                @uploadHistoryVideo="uploadHistoryVideo"/>
-        </el-footer>
-      </el-container>
-    </el-container>
-  </div>
+        </pane>
+      </splitpanes>
+    </el-main>
+  </el-container>
+
 </template>
 <script>
@@ -68,22 +43,36 @@
 //例如：import 《组件名称》 from '《组件路径》,
 import player from "./common/JessVideoPlayer.vue";
 import CarTree from "./JT1078Components/cascader/CarTree.vue";
-import {parseTime} from "../../utils/ruoyi";
 import HistoricalData from "./JT1078Components/historical/HistoricalDataTree.vue";
 import HistoryList from "./JT1078Components/HistoryData.vue";
 import Device1078Tree from "./JT1078Components/deviceList/Device1078Tree.vue";
+import HistoryPlayDialog from "./JT1078Components/HistoryPlayDialog.vue";
+import HistoricalRecordForm from "./JT1078Components/HistoryRecordFrom.vue";
 import HistorySearchTable from "./JT1078Components/HistorySearchTable.vue";
 import userService from "./service/UserService";
+import { Splitpanes, Pane } from 'splitpanes'
+import {parseTime} from "../../utils/ruoyi";
 export default {
   //import引入的组件需要注入到对象中才能使用"
-  components: {HistorySearchTable, HistoryList, Device1078Tree, HistoricalData, CarTree, player},
+  components: {
+    HistoryPlayDialog,
+    HistorySearchTable, HistoryList, Device1078Tree, HistoricalData, CarTree, player,HistoricalRecordForm, Splitpanes, Pane},
   props: {},
   data() {
     //这里存放数据"
     return {
       //列表定时器
       timer: null,
+      open: false,
+      videoUrlData: {
+        startTime: '',
+        endTime: '',
+        sim: '',
+        channel: '',
+        device: '',
+        channelName: '',
+      },
       //历史视频列表定时器
       historyTimer: null,
       historyData: [],
@@ -97,7 +86,26 @@ export default {
       loading: false,
       //sim号和通道号，格式为：sim-channel
       sim_channel: null,
-      sim_channel_data:  null,
+      channelData:  null,
+      nodeChannelData: null,
+      deviceData: null,
+      deviceTitle: '',
+      showSearch: true,
+      queryParams: {
+        time: this.getTodayRange(),
+      },
+      deviceList: [
+      "600201",
+      "600202",
+      "600203",
+      "600204",
+      "600205",
+      "601101",
+      "601102",
+      "601103",
+      "601104",
+      "CS-010",
+      ],
       //日期快捷选择
       pickerOptions: {
         disabledDate(time) {
@@ -130,30 +138,94 @@ export default {
       //选中的日期
       date: null,
       historyPlayListHtml: '',
-      videoUrl: []
+      videoUrl: [],
+      deviceNode: null,
     };
   },
   //计算属性 类似于data概念",
   computed: {},
   //监控data中的数据变化",
-  watch: {},
+  watch: {
+    deviceNode(val) {
+      this.deviceNode = val
+      this.$refs.historySearchTable.deviceNode = val
+    }
+  },
   //方法集合",
   methods: {
     /**
+     * 初始时间值
+     */
+    getTodayRange() {
+      const startOfToday = new Date()
+      startOfToday.setHours(0, 0, 0, 0) // 设置时间为今天0点
+      const endOfToday = new Date()
+      endOfToday.setHours(23, 59, 59, 999) // 设置时间为今天23点59分59秒999毫秒
+      return [startOfToday, endOfToday]
+    },
+    /**
      * 树点击事件
      */
     nodeClick(data, node) {
-      if (data.children === undefined && data) {
+      if (data) {
         let split = data.id.split("_");
+        this.deviceNode = node
+        this.nodeChannelData = {};
+        let nodeChannelDataList = [];
         if (split.length === 3) {
           this.sim_channel = split[1] + '_' + split[2]
-          this.sim_channel_data = data
-          console.log(data)
-        } else {
+          this.channelData = data
+          this.deviceTitle = `车辆:${data.pid} 通道:${data.name}`
+          let children = node.parent.data.children;
+          for (let i in children){
+            const nodeChannelData = children[i];
+            let ids = nodeChannelData.id.split("_");
+            if (ids.length === 3){
+              nodeChannelData.deviceId = ids[0];
+              nodeChannelData.channelId = ids[2];
+              nodeChannelDataList.push(nodeChannelData)
+            }
+          }
+          this.nodeChannelData = nodeChannelDataList.reduce((map, item) => {
+            // 以id为键，当前项为值
+            map[item.channelId] = item;
+            return map;
+          }, {});
+        }
+        // else if (data.children && data.children.length > 0 && data.abnormalStatus){
+        //   this.sim_channel = data.sim + '_0'
+        //   this.deviceData = data
+        //   this.deviceTitle = `车辆:${data.name} 全部通道`
+        //   let children = node.data.children;
+        //   for (let i in children){
+        //     const nodeChannelData = children[i];
+        //     let ids = nodeChannelData.id.split("_");
+        //     if (ids.length === 3){
+        //       nodeChannelData.deviceId = ids[0];
+        //       nodeChannelData.channelId = ids[2];
+        //       nodeChannelDataList.push(nodeChannelData)
+        //     }
+        //   }
+        //   this.nodeChannelData = nodeChannelDataList.reduce((map, item) => {
+        //     // 以id为键，当前项为值
+        //     map[item.channelId] = item;
+        //     return map;
+        //   }, {});
+        // }
+        else {
           console.log("node click ==> ", data)
         }
       }
     },
+    handleQuery(queryParams) {
+      let pageNum = this.queryParams.pageNum;
+      let pageSize = this.queryParams.pageSize;
+      console.log("handleQuery ==> ", queryParams)
+      this.queryParams = queryParams
+      this.queryParams.pageNum = pageNum
+      this.queryParams.pageSize = pageSize
+      this.searchHistoryList()
+    },
     /**
      * 查询车辆信息
      */
@@ -224,8 +296,36 @@ export default {
      * 添加通道
      */
     addChannels(data) {
-      console.log(data)
-      if (data.sim2){
+      if (this.deviceList && data.sim2 && this.deviceList.includes(data.name)){
+        let nvr_labels = ['中门','','车前','驾驶舱','','前车厢','','360'];
+        let rm_labels = [];
+        let children = [];
+        for (let i in nvr_labels) {
+          if (nvr_labels[i] === ''){
+            continue
+          }
+          children.push({
+            id: `${data.id}_${data.sim}_${Number(i) + Number(1)}`,
+            pid: data.id,
+            name: nvr_labels[i],
+            disabled: data.disabled,
+            parent: data
+          })
+        }
+        for (let i in rm_labels) {
+          if (rm_labels[i] === ''){
+            continue
+          }
+          children.push({
+            id: `${data.id}_${data.sim2}_${Number(i) + Number(1)}`,
+            pid: data.id,
+            name: rm_labels[i],
+            disabled: data.disabled,
+            parent: data
+          })
+        }
+        data.children = children;
+      }else if (this.deviceList &&  data.sim2 && !this.deviceList.includes(data.name)){
         let nvr_labels = ['中门','','车前','驾驶舱','前门','前车厢','后车厢','360'];
         //'ADAS','DSM','前门客流','中门客流','360前','360后','360左','360右'
         let rm_labels = [];
@@ -304,19 +404,29 @@ export default {
      * 点击播放视频
      */
     clickHistoricalPlay(data) {
+      console.log("点击播放视频 ===》 ",data)
       this.playHistoryItem(data)
     },
+    openDialog(){
+      this.$refs.historyPlayDialog.updateOpen(true)
+      this.$refs.historyPlayDialog.data ={
+        videoUrl: "",
+        startTime: "",
+        endTime: "",
+        deviceId: "",
+        channelName: "",
+        channel: ""
+      }
+    },
     /**
      * 上传历史视频
      */
     uploadHistoryVideo(data){
-      console.log("开始上传视频 ===》 ",data)
       this.loading = true
       this.$axios({
         method: 'get',
         url: '/api/jt1078/query/history/uploading/' + data.name
       }).then(res => {
-        console.log("上传视频 ==》 ",res)
         this.$message.success("视频开始上传,请等待")
         this.searchHistoryList()
         this.loading = false
@@ -333,15 +443,12 @@ export default {
      * 搜索历史视频
      */
     searchHistoryList() {
-      this.getDateTime();
       let simChannel = this.sim_channel;
-      console.log(this.sim_channel)
       if (this.isEmpty(simChannel)) {
         this.$message.error('请选择车辆');
         return;
       }
       let split = simChannel.split('_');
-      console.log("simChannel:", simChannel)
       let sim = split[0];
       if (this.isEmpty(sim)) {
         this.$message.error('无法获取SIM卡信息，请检查设备');
@@ -352,22 +459,25 @@ export default {
         this.$message.error('请选择通道');
         return;
       }
-      console.log(channel);
-      if (this.isEmpty(this.startTime) || this.isEmpty(this.endTime)) {
+      if (!this.queryParams.time) {
         this.$message.error('请选择开始和结束时间');
         return;
       }
+      this.loading = true;
       this.$axios({
         method: 'get',
-        url: '/api/jt1078/query/history/list/' + sim + '/' + channel + "/" + this.startTime + "/" + this.endTime
+        url: '/api/jt1078/query/history/list/' + sim + '/' + channel + "/" + parseTime(this.queryParams.time[0], '{y}-{m}-{d} {h}:{i}:{s}') + "/" + parseTime(this.queryParams.time[1], '{y}-{m}-{d} {h}:{i}:{s}')
       }).then(res => {
           let items = res.data.data.obj.data.items;
           if (res && res.data && res.data.data && res.data.data.obj && res.data.data.code == 1 && res.data.data.obj.data && items) {
             for (let i in items) {
               items[i].disabled = false;
               items[i].countdown = 10;
+              items[i].channelName = this.nodeChannelData[items[i].channel] ? this.nodeChannelData[items[i].channel].name : `通道${Number(items[i].channel)}`
+              items[i].deviceId = this.deviceData? this.deviceData.name : this.channelData.pid
             }
             this.historyData = items;
+            console.log("历史列表 ===》 ",items)
           } else if (res && res.data && res.data.data && res.data.data.msg) {
             this.$message.error(res.data.data.msg);
           } else if (items === undefined) {
@@ -377,7 +487,7 @@ export default {
               clearInterval(this.historyTimer)
             }
           }
-        this.loading = false
+          this.loading = false
       }).catch(error => {
         console.log(error)
         this.loading = false
@@ -386,13 +496,17 @@ export default {
       })
     },
     /**
+     * 获取设备通道
+     */
+    getDeviceChannelMap() {
+
+    },
+    /**
      * 时间转换
      */
     getDateTime() {
       let date = this.date;
       let timeList = this.timeList;
-      console.log("date ", date)
-      console.log("timeList ", timeList)
       if (this.isEmpty(date)) {
         this.$message.error("请选择日期")
         return false;
@@ -414,8 +528,6 @@ export default {
       endTime.setDate(day);
       startTime = parseTime(startTime, '{y}-{m}-{d} {h}:{i}:{s}');
       endTime = parseTime(endTime, '{y}-{m}-{d} {h}:{i}:{s}');
-      console.log("startTime:" + startTime)
-      console.log("endTime:" + endTime)
       this.startTime = startTime;
       this.endTime = endTime;
       return true
@@ -425,6 +537,7 @@ export default {
      */
     playHistoryItem(e) {
       this.videoUrl = [];
+      this.loading = true
       this.$axios({
         method: 'get',
         url: '/api/jt1078/query/send/request/io/history/' + e.sim + '/' + e.channel + "/" + e.startTime + "/" + e.endTime + "/" + e.channelMapping
@@ -441,15 +554,22 @@ export default {
           this.httpPort = res.data.data.httpPort;
           this.stream = res.data.data.stream;
           this.videoUrlHistory = videoUrl1;
-
           let itemData = new Object();
           itemData.deviceId = this.sim;
           itemData.channelId = this.channel;
           itemData.playUrl = videoUrl1;
-          console.log(this.playerIdx);
           this.setPlayUrl(videoUrl1, 0);
           this.hisotoryPlayFlag = true;
-
+          this.$refs.historyPlayDialog.updateOpen(true)
+          this.$refs.historyPlayDialog.data ={
+            videoUrl: this.videoUrlHistory,
+            startTime: e.startTime,
+            endTime: e.endTime,
+            deviceId: e.deviceId,
+            channelName: e.channelName,
+            channel: e.channel,
+            sim: e.sim
+          }
         } else if (res.data.data && res.data.data.msg) {
           this.$message.error(res.data.data.msg);
         } else if (res.data.msg) {
@@ -457,7 +577,7 @@ export default {
         } else if (res.msg) {
           this.$message.error(res.msg);
         }
-        this.closeLoading();
+        this.loading = false
       })
     },
     /**
@@ -474,8 +594,6 @@ export default {
     },
     shot(e) {
-      // console.log(e)
-      // send({code:'image',data:e})
       var base64ToBlob = function (code) {
         let parts = code.split(';base64,');
         let contentType = parts[0].split(':')[1];
@@ -498,14 +616,12 @@ export default {
       aLink.click();
     },
     destroy(idx) {
-      console.log(idx);
       this.clear(idx.substring(idx.length - 1))
     },
     createdPlay() {
       if (flvjs.isSupported()) {
         // var videoDom = document.getElementById('myVideo')
-        console.log(this.videoUrlHistory);
         let videoDom = this.$refs.myVideo
         // 创建一个播放器实例
         var player = flvjs.createPlayer({
@@ -637,6 +753,74 @@ li#menu-item-delete, li#menu-item-rename {
 }
 </style>
 <style>
+.layout-header {
+  background-color: #f5f7fa;
+  padding: 15px;
+  text-align: center;
+  font-weight: bold;
+}
+
+.layout-main {
+  flex: 1;
+  padding: 0;
+  margin: 0;
+}
+
+.splitpanes-container {
+  height: 100%;
+  display: flex;
+}
+
+.aside-pane {
+  background-color: #d3dce6;
+  overflow: auto;
+  padding: 0px;
+}
+
+.search-input {
+  margin-bottom: 10px;
+}
+
+.aside-list {
+  padding-left: 0;
+}
+
+.main-pane {
+  background-color: #ffffff;
+  overflow: auto;
+  padding: 20px;
+}
+
+.content-main {
+  background-color: #f9f9f9;
+  padding: 10px;
+  border-radius: 4px;
+  width: 100%;
+}
+
+.layout-footer {
+  background-color: #f5f7fa;
+  text-align: center;
+  font-size: 12px;
+  color: #666;
+}
+
+/* Splitpane 拖拽条样式 */
+/* .splitpanes__splitter {
+  width: 5px;
+  background-color: #ccc;
+  cursor: col-resize;
+}
+.splitpanes__splitter:hover {
+  background-color: #888;
+} */
+
+.splitpanes__pane {
+  display: flex;
+  justify-content: center;
+  font-family: Helvetica, Arial, sans-serif;
+  color: rgba(255, 255, 255, 0.6);
+}
 .videoList {
   display: flex;
   flex-wrap: wrap;
+<template>
+  <el-dialog
+    :close-on-click-modal="true"
+    :title="`${data.deviceId} 设备 - ${data.channelName} 历史视频回放`"
+    :visible.sync="open"
+    width="90%"
+    center
+    :before-close="handleClose"
+    class="history-dialog-center">
+    <el-container>
+      <el-main>
+        <el-card class="box-card" shadow="always" :body-style="{ height: '95%' }">
+          <div class='main-play'>
+            <video-player :class="`video`" ref="player"
+                          :initial-play-url="videoUrl" style="width: 100%;height: 100%;"
+                          @getTime="getTime"
+            ></video-player>
+          </div>
+        </el-card>
+      </el-main>
+    </el-container>
+    <el-footer>
+      <div>
+        <TimeLine
+          ref="time_line"
+          @change="changeDate"
+          :width="width"
+          :mark-time="markTime"
+          :time-range="time_range"
+          :isAutoPlay="isAutoPlay"
+          :startMeddleTime="startMeddleTime"
+          @click="clickCanvas"
+        />
+      </div>
+    </el-footer>
+    <span slot="footer" class="dialog-footer">
+    <el-button @click="handleClose">取 消</el-button>
+  </span>
+  </el-dialog>
+</template>
+
+<script>
+import videoPlayer from "../common/JessVideoPlayer.vue";
+import TimeLine from './TimeLineCanvas.vue'
+import dayjs from 'dayjs'
+import {formattedTime} from "../../../utils/dateFormate";
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+export default {
+  name: "HistoryPlayDialog",
+  //import引入的组件需要注入到对象中才能使用"
+  components: {TimeLine, videoPlayer},
+  props: {
+  },
+  data() {
+    //这里存放数据"
+    return {
+      data:{},
+      videoUrl: null,
+      isAutoPlay: false,
+      width: "100%",
+      startMeddleTime: null,
+      startTime: null,
+      endTime: null,
+      time_range: [],
+      markTime: [],
+      form: {
+        code: '',
+        startTime: '',
+        endTime: '',
+      },
+      channelList: [],
+      pickerOptions: {},
+      open: false,
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {
+    data(val) {
+      console.log('播放数据', val)
+      this.videoUrl = val.videoUrl
+      this.startMeddleTime = val.startTime
+      this.startTime = val.startTime
+      this.endTime = val.endTime
+      this.time_range = [val.startTime, val.endTime]
+      this.markTime = [
+        {
+          beginTime: val.startTime,
+          endTime: val.endTime,
+          bgColor: "green",
+          text: "有视频",
+        },
+      ]
+      this.form.startTime = this.startTime
+      this.form.endTime = this.endTime
+    },
+  },
+  //方法集合",
+  methods: {
+    getTime(time) {
+      // console.log('当前视频帧',time)
+    },
+    updateOpen(flag){
+      this.open = flag
+    },
+    clickCanvas(date) {
+      this.$axios({
+        method: 'get',
+        url: '/api/jt1078/query/send/request/io/history/' + this.data.sim + '/' + this.data.channel + "/" + this.data.startTime + "/" + date + "/" + undefined
+      }).then(res => {
+        if (res.data && res.data.data && res.data.data.data) {
+          let videoUrl1;
+          if (location.protocol === "https:") {
+            videoUrl1 = res.data.data.data.wss_flv;
+          } else {
+            videoUrl1 = res.data.data.data.ws_flv;
+          }
+          this.videoUrl = videoUrl1;
+        } else if (res.data.data && res.data.data.msg) {
+          this.$message.error(res.data.data.msg);
+        } else if (res.data.msg) {
+          this.$message.error(res.data.msg);
+        } else if (res.msg) {
+          this.$message.error(res.msg);
+        }
+      })
+    },
+    changeDate(date, status) {
+      console.log("选择时间：" + date + "  播放状态：" + status);
+    },
+    handleClose(){
+      this.open = false
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+.el-header {
+  background-color: #B3C0D1;
+  color: #333;
+  text-align: center;
+  line-height: 60px;
+}
+
+.el-footer {
+  background-color: #B3C0D1;
+  color: #333;
+  text-align: center;
+  line-height: 60px;
+}
+
+.el-aside {
+  background-color: #D3DCE6;
+  color: #333;
+  text-align: center;
+  line-height: 200px;
+  height: 75vh;
+}
+
+.el-main {
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  background-color: #E9EEF3;
+  color: #333;
+  text-align: center;
+  line-height: 160px;
+  height: 80vh;
+}
+
+body > .el-container {
+  margin-bottom: 40px;
+}
+
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
+
+.main-play {
+  width: 100%;
+  height: 100%;
+  background-color: black;
+}
+
+.box-card {
+  width: 80%;
+  height: 100%;
+}
+/* 在现有样式基础上添加 */
+.history-dialog-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0 !important;
+}
+
+.history-dialog-center .el-dialog {
+  margin: 0 auto !important;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.history-dialog-center .el-dialog__body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+</style>
+<template>
+  <div>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item>
+        <el-date-picker
+          v-model="queryParams.time"
+          type="datetimerange"
+          :picker-options="pickerOptions"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          align="right"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh-right" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+export default {
+  name: "HistoricalRecordForm",
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {
+    queryParams: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    //这里存放数据"
+    return {
+      // 显示搜索条件
+      showSearch: true,
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      }
+    }
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    handleQuery() {
+      this.$emit('handleQuery', this.queryParams)
+    },
+    resetQuery() {
+      this.queryParams.time = this.getYesterdayRange()
+    },
+    refreshQuery() {
+      this.$emit('refreshQuery', this.queryParams)
+    },
+    getYesterdayRange() {
+      const today = new Date(); // 获取当前日期
+      const yesterday = new Date(today); // 复制当前日期
+      yesterday.setDate(today.getDate() - 1); // 设置为昨天
+
+      // 昨天的开始时间（00:00:00.000）
+      const startOfYesterday = new Date(yesterday);
+      startOfYesterday.setHours(0, 0, 0, 0);
+
+      // 昨天的结束时间（23:59:59.999）
+      const endOfYesterday = new Date(yesterday);
+      endOfYesterday.setHours(23, 59, 59, 999);
+
+      return [startOfYesterday, endOfYesterday];
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.resetQuery()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+}
+</script>
+<style scoped>
+
+</style>
@@ -4,11 +4,11 @@
       v-if="tableData.length > 0"
       ref="singleTable"
       :data="tableData"
-      :header-cell-style="{ textAlign: 'center' ,height:'20px',lineHeight:'20px' }"
+      :header-cell-style="{ textAlign: 'center' ,height:'100%',lineHeight:'100%' }"
       border
+      height="calc(100% - 100px)"
       highlight-current-row
       @current-change="handleCurrentChange"
-      height="250"
       style="width: 100%;text-align: center">
       <el-table-column
         type="index"
@@ -23,6 +23,16 @@
         label="名称">
       </el-table-column>
       <el-table-column
+        property="deviceId"
+        align="center"
+        label="设备">
+      </el-table-column>
+      <el-table-column
+        property="channelName"
+        align="center"
+        label="通道名称">
+      </el-table-column>
+      <el-table-column
         align="center"
         label="日期">
         <template slot-scope="scope">
@@ -65,6 +75,7 @@
 //例如：import 《组件名称》 from '《组件路径》,
   export default {
     //import引入的组件需要注入到对象中才能使用"
+    name: "historySearchTable",
     components: {},
     props: {
       tableData: {