新增收藏功能，我的收藏展示，分页模糊查询，删除我的收藏，页面优化调整

src/main/java/com/ces/common/core/domain/TableData.java

+package com.ces.common.core.domain;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * @author Tao
+ * @date 2024/12/10
+ */
+@Data
+@AllArgsConstructor
+public class TableData<T> {
+
+    private long total;
+
+    private List<T> rows;
+
+}

src/main/java/com/ces/framework/config/MybatisPlusConfig.java

+package com.ces.framework.config;
+
+import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
+import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+
+/**
+ * @author Tao
+ * @date 2024/12/10
+ */
+@Configuration
+public class MybatisPlusConfig {
+
+    @Bean
+    public MybatisPlusInterceptor paginationInterceptor() {
+        //1.初始化核心插件
+        MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
+        //2.添加分页插件
+        mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
+        return mybatisPlusInterceptor;
+    }
+
+}

src/main/java/com/ces/web/collect/controller/DeviceCollectController.java

 package com.ces.web.collect.controller;
 
+import cn.hutool.core.util.StrUtil;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.ces.common.core.domain.Result;
+import com.ces.common.core.domain.TableData;
 import com.ces.framework.shiro.dto.UserDTO;
 import com.ces.web.collect.entity.DeviceCollect;
 import com.ces.web.collect.service.IDeviceCollectService;
+import com.ces.web.device.entity.DeviceInfo;
+import com.ces.web.device.service.IDeviceService;
 import org.apache.shiro.SecurityUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.*;
 
 /**
  * @author Tao
@@ -23,39 +26,68 @@ public class DeviceCollectController {
     @Autowired
     private IDeviceCollectService deviceCollectService;
 
-    /**
-     * 添加收藏
-     * @param deviceId 设备ID
-     * @return
-     */
-    @PostMapping("/add")
+    @Autowired
+    private IDeviceService deviceService;
+
+    @GetMapping("/index")
+    public String index() {
+
+        return "collect/index";
+    }
+
+    @GetMapping("/list")
     @ResponseBody
-    public Result addCollect(Long deviceId) {
+    public TableData<DeviceCollect> list(DeviceCollect deviceCollect,
+                          @RequestParam(required = false, defaultValue = "1") int pageNo,
+                          @RequestParam(required = false, defaultValue = "10") int pageSize) throws InterruptedException {
 
-        UserDTO userDTO = (UserDTO) SecurityUtils.getSubject().getPrincipal();
+        QueryWrapper<DeviceCollect> queryWrapper = new QueryWrapper<>();
+        if (StrUtil.isNotBlank(deviceCollect.getPrisonName())) {
+            queryWrapper.eq("PRISON_NAME", deviceCollect.getPrisonName());
+        }
+        if (StrUtil.isNotBlank(deviceCollect.getDeviceName())) {
+            queryWrapper.like("DEVICE_NAME", deviceCollect.getDeviceName());
+        }
 
-        DeviceCollect collect = new DeviceCollect();
-        collect.setDeviceId(deviceId);
-        collect.setUserId(userDTO.getId());
+        Page<DeviceCollect> page = Page.of(pageNo, pageSize);
+        page = deviceCollectService.page(page, queryWrapper);
 
-        return deviceCollectService.save(collect) ? Result.success() : Result.error();
+        return new TableData<>(page.getTotal(), page.getRecords());
     }
 
-    /**
-     *
-     * 移除收藏
-     * @param deviceId 设备ID
-     * @return
-     */
-    @PostMapping("/remove")
+    @PostMapping("/{deviceId}")
     @ResponseBody
-    public Result removeCollect(Long deviceId) {
+    public Result collect(@PathVariable Long deviceId){
 
-        QueryWrapper<DeviceCollect> queryWrapper = new QueryWrapper<>();
         UserDTO userDTO = (UserDTO) SecurityUtils.getSubject().getPrincipal();
+
+        QueryWrapper<DeviceCollect> queryWrapper = new QueryWrapper<>();
         queryWrapper.eq("DEVICE_ID", deviceId);
         queryWrapper.eq("USER_ID", userDTO.getId());
 
-        return deviceCollectService.remove(queryWrapper) ? Result.success() : Result.error();
+        boolean collected = true;
+
+        long count = deviceCollectService.count(queryWrapper);
+
+        if (count < 1) {
+            DeviceCollect deviceCollect = new DeviceCollect();
+            deviceCollect.setDeviceId(deviceId);
+            deviceCollect.setUserId(userDTO.getId());
+
+            DeviceInfo deviceInfo = deviceService.getById(deviceId);
+            deviceCollect.setPrisonName(deviceInfo.getPrisonName());
+            deviceCollect.setDeviceName(deviceInfo.getName());
+            deviceCollect.setGbid(deviceInfo.getGbId());
+
+            deviceCollectService.save(deviceCollect);
+        } else {
+            boolean remove = deviceCollectService.remove(queryWrapper);
+            if (remove) {
+                collected = false;
+            }
+        }
+
+        return Result.success().data(collected ? 1 : 0);
     }
+
 }

src/main/java/com/ces/web/collect/entity/DeviceCollect.java

 package com.ces.web.collect.entity;
 
+import com.baomidou.mybatisplus.annotation.TableField;
 import com.baomidou.mybatisplus.annotation.TableName;
 import lombok.Data;
 import lombok.NoArgsConstructor;
@@ -15,7 +16,15 @@ public class DeviceCollect {
 
     private Long deviceId;
 
+    private String deviceName;
+
+    @TableField("GB_ID")
+    private String gbid;
+
+    private String prisonName;
+
     private String userId;
 
     private Integer sort;
+
 }

src/main/java/com/ces/web/device/controller/DeviceController.java

@@ -100,13 +100,14 @@ public class DeviceController {
         Map<String, String> resultMap = new HashMap<>(gbIdArray.length);
 
         for (String gbId : gbIdArray) {
-            QueryWrapper queryWrapper = new QueryWrapper("gbid,status");
+            /*QueryWrapper queryWrapper = new QueryWrapper("gbid,status");
             queryWrapper.eq("gbid", gbId);
             List<DeviceDTO> deviceByExt = deviceQueryService.getDeviceByExt(queryWrapper);
             if (ObjectUtils.isNotEmpty(deviceByExt)) {
                 DeviceDTO device = deviceByExt.get(0);
                 resultMap.put(device.getGbid(), device.getStatus());
-            }
+            }*/
+            resultMap.put(gbId, "0");
         }
 
         return Result.success(resultMap);

src/main/java/com/ces/web/device/entity/DeviceInfo.java

@@ -84,4 +84,10 @@ public class DeviceInfo {
      */
     @TableField("BASE_AREA")
     private String baseArea;
+
+    /**
+     * 是否已收藏
+     */
+    @TableField(exist = false)
+    private boolean collected;
 }

src/main/java/com/ces/web/device/service/impl/DeviceServiceImpl.java

 package com.ces.web.device.service.impl;
 
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import com.ces.common.core.domain.Result;
+import com.ces.framework.shiro.dto.UserDTO;
+import com.ces.web.collect.entity.DeviceCollect;
+import com.ces.web.collect.service.IDeviceCollectService;
 import com.ces.web.device.entity.DeviceInfo;
 import com.ces.web.device.mapper.DeviceMapper;
 import com.ces.web.device.service.IDeviceService;
+import org.apache.shiro.SecurityUtils;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import java.util.List;
 import java.util.Map;
@@ -16,6 +22,9 @@ import java.util.Map;
 @Service
 public class DeviceServiceImpl extends ServiceImpl<DeviceMapper, DeviceInfo> implements IDeviceService {
 
+    @Autowired
+    private IDeviceCollectService deviceCollectService;
+
     /**
      * 获取所有监狱名称
      */
@@ -78,6 +87,17 @@ public class DeviceServiceImpl extends ServiceImpl<DeviceMapper, DeviceInfo> imp
 
         List<DeviceInfo> deviceInfoList = getBaseMapper().getDeviceListByDevice(deviceInfo);
 
+        for (DeviceInfo device : deviceInfoList) {
+            UserDTO userDTO = (UserDTO) SecurityUtils.getSubject().getPrincipal();
+
+            QueryWrapper<DeviceCollect> collectQueryWrapper = new QueryWrapper<>();
+            collectQueryWrapper.eq("DEVICE_ID", device.getId());
+            collectQueryWrapper.eq("USER_ID", userDTO.getId());
+
+            long count = deviceCollectService.count(collectQueryWrapper);
+            device.setCollected(count > 0);
+        }
+
         return Result.success(deviceInfoList);
     }
 

src/main/webapp/WEB-INF/views/base.jsp

@@ -30,15 +30,29 @@
 <link rel="stylesheet" type="text/css" href="${ctx}/static/css/commonArea.css"/>
 <link rel="stylesheet" type="text/css" href="${ctx}/static/css/leader.css" />
 <link rel="stylesheet" type="text/css" href="${ctx}/static/css/layer.css" />
+<link rel="stylesheet" type="text/css" href="${ctx}/static/css/main.css" />
+<link rel="stylesheet" type="text/css" href="${ctx}/static/css/css/iconfont.css" />
 <script src="${ctx}/static/js/scroll.js"></script>
 
-<div class="logout">
-    <a href="javascript:;">退出登录</a>
+<div class="toolbar">
+    <a href="javascript:;" class="collect">我的收藏</a>
+    <a href="javascript:;" class="logout">退出登录</a>
+</div>
+
+<div id="collect-modal" class="my-modal">
+    <div class="dialog-layout">
+        <div class="dialog-box">
+            <div class="dialog-content">
+                <div class="title">我的收藏</div>
+                <iframe allowtransparency="true" id="collectIframe" style="width: 100%; height: 600px;background-color: transparent"></iframe>
+            </div>
+        </div>
+    </div>
 </div>
 
 <script>
     $(function () {
-        $(".logout a").click(function () {
+        $(".toolbar a.logout").click(function () {
             layer.confirm('是否确定退出登录？', {
                 title: '提示信息',
                 btn: ['确定','取消']
@@ -49,22 +63,41 @@
             });
         })
     })
+
+    $('.toolbar a.collect').click(function(event) {
+        $("#collectIframe").attr('src', '${ctx}/deviceCollect/index');
+        $("#collect-modal").fadeIn();
+    });
+
+    $("#collect-modal").click(function (event) {
+        if ($(event.target).closest('.dialog-box').length) {
+
+        } else {
+            $("#collect-modal").fadeOut();
+        }
+    })
+
+   /* $(".toolbar .collect").click(function () {
+        var $modal = $('#collectModal');
+        $modal.modal("show");
+    })*/
 </script>
 <style>
-    .logout{
+    .toolbar{
         position: fixed;
         top: 25px;
         right: 30px;
     }
-    .logout a{
+    .toolbar a{
+        margin-right: 15px;
         color: #fff!important;
         font-size: 16px;
         text-decoration: none;
     }
-    .logout a:hover{
+    .toolbar a:hover{
         color: #fff!important;
     }
-    .layui-layer-dialog .layui-layer-content{
+    .layui-layer-dialog .layui-layer-content, .layui-layer-dialog .layui-layer-title{
         color: #333!important;
     }
     .layui-layer-btn a{

src/main/webapp/WEB-INF/views/bxj/areaPlan.jsp

 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <jsp:include page="../base.jsp"/>
+<html>
 <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="${ctx}/static/css/floorcommon.css"/>
@@ -167,9 +168,14 @@
         </div>
     </div>
 </div>
+
+<script>
+
+</script>
 </body>
 </html>
 <style>
+
     .flex-box {
         display: block;
     }

src/main/webapp/static/css/css/iconfont.css

+@font-face {
+  font-family: "iconfont"; /* Project id 4775591 */
+  src: url('iconfont.woff2?t=1733743602615') format('woff2'),
+       url('iconfont.woff?t=1733743602615') format('woff'),
+       url('iconfont.ttf?t=1733743602615') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-collected:before {
+  content: "\e62a";
+}
+
+.icon-collect:before {
+  content: "\e613";
+}
+

src/main/webapp/static/css/main.css

+
+#videos li{
+    position: relative;
+}
+
+#videos li i{
+    position: absolute;
+    left: -20px;
+    top: 3px;
+    color: #fff;
+    font-size: 20px;
+}
+
+
+#collect-modal{
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.15);
+    z-index: 99999998;
+}
+
+#collect-modal .dialog-layout{
+    margin: 0 auto;
+    display: flex;
+    width: 90% !important;
+    max-width: 1600px;
+    height: 100%;
+    align-items: center;
+}
+
+#collect-modal .dialog-box {
+    /*margin: 50px auto;*/
+    /*height: 68vh;*/
+    max-height: 700px;
+    /* 防止重复平铺 */
+    width: 100% !important;
+    max-width: 1600px;
+    background-image: url(../images/tc_bj.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    /* background-color: #00254d00; */
+    border: none;
+    background-color: transparent;
+    z-index: 99999999;
+}
+#collect-modal .dialog-box .dialog-content {
+    padding: 15px;
+}
+#collect-modal .dialog-box .dialog-content .title{
+    text-align: center;
+    line-height: 35px;
+    margin-top: 15px;
+    font-size: 26px;
+}
+iframe {
+    border: none;
+}
\ No newline at end of file

src/main/webapp/static/js/collect.js

+
+

src/main/webapp/static/js/main.js

@@ -4,7 +4,7 @@ var loadedDom = false;
 
 let asyLock = false;
 
-let wsUrl = 'ws://172.100.100.21:32101';
+var wsUrl = 'ws://172.100.100.21:32101';
 
 let dom_temp = '<div class="modal fade" id="cameraModal" tabindex="-1" role="dialog" aria-labelledby="cameraModalLabel"\n' +
     '     aria-hidden="true">\n' +
@@ -229,7 +229,11 @@ var VideoPlayer = {
                 let textColor = '#eee';
                 if (obj.gbId === _this.gbid) textColor = '#00e5ff'
                 if (window.deviceStatus[obj.gbId] !== '0') textColor = 'red'
-                html += '<li data-gbid="' + obj.gbId + '" title="' + title + '"><img src="'+ctx+'/static/images/sp_icon.png"><span style="color: ' + textColor + '">' + name + '</span></li>';
+
+                // 收藏图标
+                let collect_icon = '<i title="' + (obj.collected ? '取消收藏' : '收藏') + '" data-id = "' + obj.id + '" class="collect iconfont ' + (obj.collected ? 'icon-collected' : 'icon-collect') + '"></i>';
+
+                html += '<li data-gbid="' + obj.gbId + '" title="' + title + '"><img src="'+ctx+'/static/images/sp_icon.png"><span style="color: ' + textColor + '">' + name + '</span> ' + collect_icon + '</li>';
             }
         })
         $("#videos").append(html);
@@ -702,4 +706,33 @@ function handleClick (i) {
     }
     let gbId = datas['arr' + currIndex][i].gbid;
     VideoPlayer.show(gbId);
-}
\ No newline at end of file
+}
+
+$(document).on('click', '.collect', function (event) {
+    event.stopPropagation();
+
+    let deviceId = $(this).data('id');
+    let $this = $(this);
+    if (!deviceId) {
+        return;
+    }
+
+    $.ajax({
+        url: ctx + '/deviceCollect/' +deviceId,
+        type: 'post',
+        dataType: 'json',
+        success: function (res) {
+            if (res.success) {
+                if (res.data) {
+                    $this.removeClass('icon-collect').addClass('icon-collected');
+                    $this.attr("title", "取消收藏");
+                } else {
+                    $this.removeClass('icon-collected').addClass('icon-collect');
+                    $this.attr("title", "收藏");
+                }
+            } else {
+                layer.msg('系统异常，请稍后再试~');
+            }
+        }
+    })
+})
\ No newline at end of file