Jelajahi Sumber

waterAnalysisSharingEnginePush waterShare.html 朱俊杰 commit at 2021-02-08

朱俊杰 4 tahun lalu
induk
melakukan
8886c97599

+ 150 - 0
waterAnalysisSharingEnginePush/frontImplementation/waterShare.html

@@ -158,3 +158,153 @@
             <section class="deviceLink device_association">
                 <h4 class="big-tit">4 跨设备数据关联</h4>
 
+                <h4 class="big-tit">4.1 喷淋末端、消火栓与与水泵启停关联</h4>
+                <div id="deviceLinkChart1" class="innerChart"></div>
+                <img id="deviceLinkChart1_img" style="width:100%;display:none;">
+
+                <h4 class="big-tit">4.2 喷淋末端、消火栓与屋顶水箱液位关联</h4>
+                <div id="deviceLinkChart2" class="innerChart"></div>
+                <img id="deviceLinkChart2_img" style="width:100%;display:none;">
+
+                <div class="summary2">
+                    <div>
+                        <p>结论:</p>
+                    </div>
+                    <div class="summaryDetail">
+                        <div>1、请检查绝缘皮出现硬化、裂纹;接触电阻变大,现硬化、裂纹;</div>
+                    </div>
+                </div>
+
+            </section>
+
+            <section class="dataChange data_fluctuation">
+                <h4 class="big-tit">5 数据波动关联</h4>
+
+                <div id="dataChangeChart1" class="innerChart"></div>
+                <img id="dataChangeChart1_img" style="width:100%;display:none;">
+
+                <div class="summary2">
+                    <div>
+                        <p>结论:</p>
+                    </div>
+                    <div class="summaryDetail">
+                        <div>1、请检查绝缘皮出现硬化、裂纹;接触电阻变大,现硬化、裂纹;1、请检查绝缘皮出现硬化、裂纹;接触电阻变大,现硬化、裂纹;1、请检查绝缘皮出现硬化、裂纹;接触电阻变大,现硬化、裂纹;1、请检查绝缘皮出现硬化、裂纹;接触电阻变大,现硬化、裂纹;</div>
+                    </div>
+                </div>
+
+            </section>
+        </div>
+    </div>
+
+    <div class="page-container">
+        <header>
+            <h1>分析报告及数据可视化</h1>
+            <div class="filterSec">
+                <span>建筑</span>
+                <select name="" id="building">
+                    <option value="10246">建筑一</option>
+                    <option value="10062">建筑二</option>
+                </select>
+                <span>时间</span>
+                <div class="layui-inline"><input type="text" id="chooseTime" class="layui-input test-item"></div>
+
+                <a class="button">
+                    <img src="images/export-icon.svg" alt="">
+                    <text id="btnPrint">导出</text>
+                </a>
+            </div>
+
+        </header>
+
+        <section class="mainbox water">
+
+            <div class="topSection">
+                <div class="column">
+                    <div class="panel bar-3d">
+                        <h2>
+                            <img src="images/title-bg.png" alt="">
+                            <span>数据统计计算</span>
+                            <img src="images/title-bg2.png" alt="">
+                            <div class="line"></div>
+                        </h2>
+                        <ul>
+                            <li>
+                                <p class="num total">1568</p>
+                                <p>报警总数</p>
+                            </li>
+                            <li>
+                                <p class="num solved">1300</p>
+                                <p>处理数</p>
+                            </li>
+                            <li>
+                                <p class="num unsolve">268</p>
+                                <p>未处理数</p>
+                            </li>
+                        </ul>
+                        <div class="chart"></div>
+                        <div class="panel-footer"></div>
+                    </div>
+                </div>
+                <div class="column">
+                    <div class="panel line divergence">
+                        <h2>
+                            <img src="images/title-bg.png" alt="">
+                            <span>数据离散率挖掘</span>
+                            <img src="images/title-bg2.png" alt="">
+                            <div class="line"></div>
+                        </h2>
+
+                        <div class="chart"></div>
+
+                        <div class="summary">
+                            <div>
+                                <p>结论:</p>
+                            </div>
+                            <div class="summaryDetail">
+                                <!-- <p>1、请检查绝缘皮出现硬化、裂纹;接触电阻变大,现硬化、裂纹;</p>
+                                <p>2、请检查绝缘皮出现硬化、裂纹;接触电阻变大,现硬化、裂纹;</p> -->
+                            </div>
+                        </div>
+                        <div class="panel-footer"></div>
+                    </div>
+                </div>
+                <div class="column">
+                    <div class="panel bar hiddenCheck">
+                        <h2>
+                            <img src="images/title-bg.png" alt="">
+                            <span>渗漏隐患排查</span>
+                            <img src="images/title-bg2.png" alt="">
+                            <div class="line"></div>
+                        </h2>
+                        <div class="chart"></div>
+                        <div class="summary">
+                            <div>
+                                <p>结论:</p>
+                            </div>
+                            <div class="summaryDetail">
+                                <p>七层喷淋末端到八层喷淋末端之间有渗透或轻微堵塞现象,请及时排查;</p>
+                            </div>
+                        </div>
+                        <div class="panel-footer"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bottomSection">
+                <div class="column">
+                    <div class="panel line device_association">
+                        <h2>
+                            <img src="images/title-bg.png" alt="">
+                            <span>跨设备数据关联</span>
+                            <img src="images/title-bg2.png" alt="">
+                            <div class="line"></div>
+                        </h2>
+                        <div class="tab-line">
+                            <a href="javascript:;" class="active" id="active">喷淋末端、消火栓与水泵启停关联</a>
+                            <a href="javascript:;">喷淋末端、消火栓与屋顶水箱液位关联</a>
+                        </div>
+
+                        <div class="chart"></div>
+
+                        <div class="summary">
+                            <div>