数量检测提交2-检测协议实现

czt

2026-01-08 4c58f8f132adf830917b6b8f49f8c8de87aaf748

 fzzy-igdss-web/src/main/resources/templates/security/quantity.html

@@ -22,24 +22,24 @@
                    <h2>实时监控画面</h2>
                    <div class="layui-row layui-col-space10">
                        <div class="layui-inline">
                            <label class="layui-form-label">仓库列表</label>
                            <label class="layui-form-label">设备列表</label>
                            <select id="select-camera" class="layui-form-select w-select">
                                <option>请选择……</option>
                                <option th:each="camera:${listCamera}" th:value="${camera.id}" th:text="${camera.name}"></option>
                                <option th:each="camera:${listCamera}" th:value="${camera.depotId}" th:text="${camera.name}"></option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- 双视频展示区域 -->
                    <div class="video-container" id="video-container" style="grid-template-columns: 1fr;">
                        <!-- 热成像视频画面 -->
                        <div class="video-box" id="thermal-video">
                            <div class="video-label">
                                <i class="layui-icon layui-icon-camera-fill"></i> 热成像视频
                            </div>
                            <div id="divPlugin2">
                                <img th:src="@{/img/web/security/p-snap.jpg}" alt="热成像实时画面">
                    <div class="video-container" id="video-container" style="grid-template-columns: 1fr;min-height: 610px;">
<!--                        &lt;!&ndash; 热成像视频画面 &ndash;&gt;-->
<!--                        <div class="video-box" id="thermal-video">-->
<!--                            <div class="video-label">-->
<!--                                <i class="layui-icon layui-icon-camera-fill"></i>-->
<!--                            </div>-->
                            <div id="divPlugin2" style="height: 100%">
                                <img th:src="@{/img/web/security/p-snap.jpg}" alt="">
                            </div>
                            <!-- 温度标记点
                            <div class="temp-mark" title="异常高温点: 32°C">
@@ -63,28 +63,40 @@
                            </div>
                            -->
                            
                        </div>
<!--                        </div>-->
                    </div>

                    <!-- 简化的视频控制工具栏-->
                    <div style="margin-top: 15px; text-align: center; background-color: #f5f5f5; padding: 10px; border-radius: 4px;">
                        <button class="layui-btn layui-btn-default layui-btn-sm">
                           上移 <i class="layui-icon layui-icon-up"></i>
                        <button class="layui-btn layui-btn-default layui-btn-sm" onmousedown="ptzControl(1);"
                                onmouseup="moveStop();">
                            上移 <i class="layui-icon layui-icon-up"></i>
                        </button>
                        <button class="layui-btn layui-btn-default layui-btn-sm">
                           下移 <i class="layui-icon layui-icon-down"></i>
                        <button class="layui-btn layui-btn-default layui-btn-sm" onmousedown="ptzControl(2);"
                                onmouseup="moveStop();">
                            下移 <i class="layui-icon layui-icon-down"></i>
                        </button>
                        <button class="layui-btn layui-btn-default layui-btn-sm">
                           左移 <i class="layui-icon layui-icon-left"></i>
                        <button class="layui-btn layui-btn-default layui-btn-sm" onmousedown="ptzControl(3);"
                                onmouseup="moveStop();">
                            左移 <i class="layui-icon layui-icon-left"></i>
                        </button>
                        <button class="layui-btn layui-btn-default layui-btn-sm">
                           右移 <i class="layui-icon layui-icon-right"></i>
                        <button class="layui-btn layui-btn-default layui-btn-sm" onmousedown="ptzControl(4);"
                                onmouseup="moveStop();">
                            右移 <i class="layui-icon layui-icon-right"></i>
                        </button>
                        <button class="layui-btn layui-btn-default layui-btn-sm">
                           加倍 <i class="layui-icon layui-icon-addition"></i>
                        <button class="layui-btn layui-btn-default layui-btn-sm" onmousedown="ptzControl(10);"
                                onmouseup="zoomStop();">
                            变焦大 <i class="layui-icon layui-icon-addition"></i>
                        </button>
                        <button class="layui-btn layui-btn-default layui-btn-sm">
                           减倍 <i class="layui-icon layui-icon-subtraction"></i>
                        <button class="layui-btn layui-btn-default layui-btn-sm" onmousedown="ptzControl(9);"
                                onmouseup="zoomStop();">
                            变焦小 <i class="layui-icon layui-icon-subtraction"></i>
                        </button>
                        <button class="layui-btn layui-btn-default layui-btn-sm" onclick="checkStart()">
                            开始检测 <i class="layui-icon layui-icon-subtraction"></i>
                        </button>
                        <button class="layui-btn layui-btn-default layui-btn-sm" onclick="checkStop()">
                            停止检测 <i class="layui-icon layui-icon-subtraction"></i>
                        </button>
                    </div>

@@ -100,46 +112,46 @@
                <div class="card-body">
                    <div class="record-grid">
                        <!-- 普通视频记录 -->
                        <div class="record-item">
                        <div class="record-item" style="border: 2px solid var(--warning-color);">
                            <div class="record-img">
                                <img th:src="@{/img/web/security/p-snap.jpg}" alt="普通视频记录">
                                <img id="file-img1" th:src="@{/img/web/security/p-snap.jpg}">
                            </div>
                            <div class="record-info">
                                <div class="record-name">粮仓1号</div>
                                <div class="record-time">2025-12-03 10:00</div>
                                <div class="record-name">过程抓拍1</div>
                                <div id="file-time1" class="record-time">2025-12-03 10:00</div>
                            </div>
                        </div>

                        <!-- 热成像视频记录 -->
                        <div class="record-item">
                        <div class="record-item" style="border: 2px solid var(--warning-color);">
                            <div class="record-img">
                                <img th:src="@{/img/web/security/p-snap-red.jpg}" alt="热成像视频记录">
                                <img id="record-img2" th:src="@{/img/web/security/p-snap.jpg}">
                            </div>
                            <div class="record-info">
                                <div class="record-name">粮仓1号</div>
                                <div class="record-time">2025-12-03 10:00</div>
                                <div class="record-name">过程抓拍2</div>
                                <div id="file-time2" class="record-time">2025-12-03 10:00</div>
                            </div>
                        </div>

                        <!-- 异常事件记录 -->
                        <div class="record-item" style="border: 2px solid var(--warning-color);">
                            <div class="record-img">
                                <img th:src="@{/img/web/security/p-snap.jpg}" alt="异常事件记录">
                                <img id="record-img3" th:src="@{/img/web/security/p-snap.jpg}">
                            </div>
                            <div class="record-info">
                                <div class="record-name">粮仓3号</div>
                                <div class="record-time">2025-12-03 14:20</div>
                                <div class="record-name">过程抓拍3</div>
                                <div id="file-time3" class="record-time">2025-12-03 14:20</div>
                            </div>
                        </div>

                        <!-- 热成像视频记录 -->
                        <div class="record-item">
                        <div class="record-item" style="border: 2px solid var(--warning-color);">
                            <div class="record-img">
                                <img th:src="@{/img/web/security/p-snap-red.jpg}" alt="热成像视频记录">
                                <img id="record-img4" th:src="@{/img/web/security/p-snap.jpg}">
                            </div>
                            <div class="record-info">
                                <div class="record-name">粮仓1号</div>
                                <div class="record-time">2025-12-03 10:00</div>
                                <div class="record-name">过程抓拍4</div>
                                <div id="file-time4" class="record-time">2025-12-03 10:00</div>
                            </div>
                        </div>
                    </div>
@@ -154,10 +166,10 @@
            <div class="card">
                <div class="card-header">
                    <h2>数量走势分析</h2>
                    <select class="layui-form-select">
                        <option>近7天</option>
                        <option>近30天</option>
                    </select>
<!--                    <select class="layui-form-select">-->
<!--                        <option>近7天</option>-->
<!--                        <option>近30天</option>-->
<!--                    </select>-->
                </div>
                <div class="card-body">
                    <div style="height: 250px;" id="temperatureChart"></div>
@@ -175,43 +187,31 @@
                <div class="card-body" style="max-height: 410px; overflow-y: hidden;">
                    <div class="alert-item accent">
                        <div class="alert-header">
                            <div class="alert-title">检测重量：2590000 KG</div>
                            <div class="alert-time">2025-12-07 10:00</div>
                            <div class="alert-title" id="record_title1">检测重量：---- KG</div>
                            <div class="alert-time" id="record_time1">----</div>
                        </div>
                        <div class="alert-content">检测重量为2590000 KG，实际重量为2550000 KG，误差小于5%。</div>
                        <div style="text-align: right;">
                            <button class="layui-btn layui-btn-xs" style="background-color: var(--primary-color);">查看三维渲染</button>
                        </div>
                        <div class="alert-content" id="record_content1">检测重量为---- KG，实际重量为---- KG，误差小于-%。</div>
                    </div>
                    <div class="alert-item">
                        <div class="alert-header">
                            <div class="alert-title">检测重量：2540000 KG</div>
                            <div class="alert-time">2025-12-06 10:00</div>
                            <div class="alert-title" id="record_title2">检测重量：---- KG</div>
                            <div class="alert-time" id="record_time2">----</div>
                        </div>
                        <div class="alert-content">检测重量为2540000 KG，实际重量为2550000 KG，误差小于5%。</div>
                        <div style="text-align: right;">
                            <button class="layui-btn layui-btn-xs" style="background-color: var(--primary-color);">查看三维渲染</button>
                        <div class="alert-content" id="record_content2">检测重量为---- KG，实际重量为---- KG，误差小于-%。</div>
                    </div>
                    <div class="alert-item blue">
                        <div class="alert-header">
                            <div class="alert-title" id="record_title3">检测重量：---- KG</div>
                            <div class="alert-time" id="record_time3">----</div>
                        </div>
                        <div class="alert-content" id="record_content3">检测重量为---- KG，实际重量为---- KG，误差小于-%。</div>
                    </div>
                    <div class="alert-item gray">
                        <div class="alert-header">
                            <div class="alert-title">检测重量：2510000 KG</div>
                            <div class="alert-time">2025-12-05 10:00</div>
                            <div class="alert-title" id="record_title4">检测重量：---- KG</div>
                            <div class="alert-time" id="record_time4">----</div>
                        </div>
                        <div class="alert-content">检测重量为2510000 KG，实际重量为2550000 KG，误差小于5%。</div>
                        <div style="text-align: right;">
                            <button class="layui-btn layui-btn-xs" style="background-color: var(--primary-color);">查看三维渲染</button>
                        </div>
                    </div>
                    <div class="alert-item gray">
                        <div class="alert-header">
                            <div class="alert-title">检测重量：2560000 KG</div>
                            <div class="alert-time">2025-12-04 10:00</div>
                        </div>
                        <div class="alert-content">检测重量为2560000 KG，实际重量为2550000 KG，误差小于5%。</div>
                        <div style="text-align: right;">
                            <button class="layui-btn layui-btn-xs" style="background-color: var(--primary-color);">查看三维渲染</button>
                        </div>
                        <div class="alert-content" id="record_content4">检测重量为---- KG，实际重量为---- KG，误差小于-%。</div>
                    </div>
                </div>
            </div>
@@ -228,15 +228,15 @@
                        <div class="tool-item-simple" style="height: 65px">
                            <div class="tool-icon-simple"><i class="layui-icon layui-icon-chart"></i></div>
                            <div class="tool-text">
                                <div class="tool-name-simple">温度变化曲线</div>
                                <div class="tool-desc">查看温度变化趋势分析</div>
                            </div>
                                <div class="tool-name-simple">数据报表</div>
                                <div class="tool-desc">查看数据报表分析</div>
                            </div>--
                        </div>
                        <div class="tool-item-simple" style="height: 65px">
                            <div class="tool-icon-simple"><i class="layui-icon layui-icon-print"></i></div>
                            <div class="tool-text">
                                <div class="tool-name-simple">导出分析报告</div>
                                <div class="tool-desc">导出温度数据及分析结果</div>
                                <div class="tool-desc">导出数据数量分析结果</div>
                            </div>
                        </div>
                    </div>
@@ -261,4 +261,5 @@
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/js/plugins/echarts/echarts.min-4.7.js}"></script>
<script th:src="@{/security/quantity.js}"></script>
<script th:src="@{/security/video-control.js}"></script>
</html>