modify

css/index.css

@@ -13,6 +13,27 @@ input {
 .text-left {
   text-align: left;
 }
+/* 溢出滚动样式 */
+.summary ::-webkit-scrollbar {
+  height: 7px !important;
+  width: 7px !important;
+}
+/*定义了滚动条滑块的样式*/
+.summary ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  border-style: dashed;
+  background-color: #28BEFC;
+  border-color: #e2242400;
+  border-width: 1.5px;
+  background-clip: padding-box;
+}
+/*定义了轨道的样式*/
+.summary ::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0);
+}
 @font-face {
   font-family: electronicFont;
   src: url(../font/DS-DIGIT.TTF);
@@ -97,7 +118,7 @@ header .filterSec {
   border: 1px solid rgba(25, 140, 186, 0.5);
   background: rgba(8, 26, 50, 0.6);
   padding: 0 0.5375rem;
-  margin-bottom: 0.275rem;
+  margin-bottom: 0.2rem;
 }
 .panel::before {
   position: absolute;
@@ -311,10 +332,13 @@ a.button text {
   align-items: top;
 }
 .summary div:first-child {
-  width: 0.75rem;
+  width: 0.85rem;
 }
 .summary div:last-child {
-  width: calc(100% - 0.2rem);
+  width: calc(100% - 0.85rem);
+  padding-right: 0.2rem;
+  height: 0.5rem;
+  overflow: auto;
 }
 .summary p {
   line-height: 1.3;
@@ -361,7 +385,7 @@ a.button text {
   font-size: 14px;
   width: 100%;
   height: 90%;
-  z-index: 1;
+  z-index: -1;
 }
 .exportBox table,
 .exportBox table tr th,
@@ -381,14 +405,14 @@ a.button text {
   display: block;
   background: #1f2833;
   color: #fff;
-  text-align: center;
   height: calc(100% - 1rem);
   overflow: auto;
   padding: 15px;
 }
-.exportBox .title {
+.exportBox h3.title {
   text-align: center;
   background: #1f2833;
+  font-size: 16px;
 }
 .exportBox section {
   padding-bottom: 30px;
@@ -399,30 +423,24 @@ a.button text {
 }
 .exportBox section .innerChart {
   width: 100%;
-  height: 180px;
+  height: 220px;
   padding: 10px 0;
 }
 .exportBox section .summary2 {
   display: flex;
-  text-align: left;
   margin: 0 10px;
   line-height: 1.5;
 }
-.exportBox section .summary2 div:first-child {
+.exportBox section .summary2 > div:first-child {
   width: 60px;
 }
-.exportBox section .summary2 div:last-child {
+.exportBox section .summary2 > div:last-child {
   width: calc(100% - 30px);
 }
 .exportBox section .big-tit {
-  font-size: 16px;
-  text-align: left;
   padding: 10px 0;
   background: #1f2833;
 }
-.exportBox section h4.big-tit {
-  font-size: 14px;
-}
 .exportBox .section1 {
   background: #1f2833;
 }

css/index.less

@@ -15,6 +15,35 @@ select,input{
   text-align:left
 }
 
+/* 溢出滚动样式 */
+
+.summary ::-webkit-scrollbar {
+  height: 7px !important;
+  width: 7px !important;
+}
+
+
+/*定义了滚动条滑块的样式*/
+
+.summary ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  border-style: dashed;
+  background-color: #28BEFC;
+  border-color: #e2242400;
+  border-width: 1.5px;
+  background-clip: padding-box;
+}
+
+
+/*定义了轨道的样式*/
+
+.summary ::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0);
+}
+
 
 
 
@@ -115,7 +144,7 @@ header {
   border: 1px solid rgba(25, 140, 186, 0.5);
   background: rgba(8,26,50,0.60);
   padding: 0 .5375rem ;
-  margin-bottom: .275rem;
+  margin-bottom: .2rem;
 }
 
 .panel::before {
@@ -367,6 +396,7 @@ a.button {
    width:100%;
    margin-top:.1rem;
    height: .825rem;
+  //  overflow-y:auto;
    padding:  .15rem;
    background-image:url(../images/summary-bg.png) ;
    background-size:100% 100%;
@@ -375,10 +405,14 @@ a.button {
    align-items:top;
    
    div:first-child{
-    width: .75rem;
+    width: .85rem;
+    
    }
    div:last-child{
-    width: calc(100% - .2rem);
+    width: calc(100% - .85rem);
+    padding-right:.2rem;
+    height: .5rem;
+    overflow: auto;
    }
    p{
      line-height: 1.3
@@ -440,7 +474,7 @@ a.button {
   width: 100%;
   height: 90%;
   // background:#aaa;
-  z-index: 1;
+  z-index: -1;
 
   table,
   table tr th,
@@ -460,16 +494,16 @@ a.button {
       display: block;
       background: #1f2833;
       color: #fff;
-      text-align: center;
       height: calc(100% - 1rem);
       overflow: auto;
       // margin-top: 30px;
       padding: 15px;
   }
 
-  .title {
+  h3.title {
       text-align: center;
-      background: #1f2833
+      background: #1f2833;
+      font-size:16px
   }
   section {
     padding-bottom:30px;
@@ -479,36 +513,31 @@ a.button {
     }
     .innerChart{
       width:100%;
-      height:180px;
+      height:220px;
       // background:#fff;
       padding:10px 0;
     }
     .summary2{
       display:flex;
-      text-align:left;
       margin:0 10px;
       line-height:1.5;
-      div:first-child {
+      >div:first-child {
           width:60px;
       }
-      div:last-child {
+      >div:last-child {
         width: calc(100% - 30px );
     }
     }
     .big-tit {
-      font-size: 16px;
-      text-align: left;
       padding: 10px 0;
       background: #1f2833;
      
   }
-  h4.big-tit{
-    font-size: 14px;
-  }
  
 }
   .section1 {
       background: #1f2833
   }
   
-}
+}
+

eleFireIndex.html

@@ -7,9 +7,6 @@
     <title>杨浦二期（电气火灾）</title>
     <link rel="stylesheet" href="layui/css/layui.css">
     <link rel="stylesheet" href="css/index.css" />
-    <style>
-
-    </style>
 
 </head>
 
@@ -17,75 +14,77 @@
 
     <div class="exportBox">
         <div class="exportContainer" id="printArea">
-            <h2 class="title" style="text-align:center">电气火灾隐患分析报告</h2>
+
+            <h3 style="text-align:center">电气火灾隐患分析报告</h3>
 
             <section class="section">
-                <h3 class="big-tit">1 基本情况</h3>
+                <h4 class="big-tit">1 基本情况</h4>
 
                 <div>
                     <h4 class="big-tit">1.1 项目情况</h4>
-                    <table width="100%">
+                    <table width="100%" border=1 style="text-align: center;border-collapse: collapse;
+                    border-spacing: 0;">
                         <tr>
-                            <th>单位名称</th>
+                            <td>单位名称</td>
                             <td colspan="5">中建广场</td>
 
                         </tr>
                         <tr>
-                            <th>进场日期</th>
+                            <td>进场日期</td>
                             <td>2018-12-26 </td>
-                            <th>完工日期</th>
+                            <td>完工日期</td>
                             <td>2019-01-22</td>
-                            <th>验收日期</th>
+                            <td>验收日期</td>
                             <td>2019-01-25</td>
                         </tr>
                     </table>
-                    <p class="table-sub">表1：基本情况</p>
+                    <p class="table-sub" style="text-align:center">表1：基本情况</p>
                 </div>
 
                 <div>
                     <h4 class="big-tit">1.2 安装设备清单</h4>
-                    <table width="100%">
+                    <table width="100%" border=1 style="text-align: center;border-collapse: collapse;
+                    border-spacing: 0;">
                         <tr>
-                            <th>设备名称</th>
-                            <th>设备位置</th>
-                            <th>设备编号</th>
-                            <th>备注</th>
+                            <td>设备名称</td>
+                            <td>设备位置</td>
+                            <td>设备编号</td>
+                            <td>备注</td>
                         </tr>
-                        <tr style="text-align:center;">
+                        <tr>
                             <td>1-8层电气火灾</td>
                             <td>1楼配电间内</td>
                             <td>11902191670097</td>
                             <td></td>
                         </tr>
-                        <tr style="text-align:center;">
+                        <tr>
                             <td>9-16层电气火灾</td>
                             <td>1楼配电间内</td>
                             <td>11902191670033</td>
                             <td></td>
                         </tr>
-                        <tr style="text-align:center;">
+                        <tr>
                             <td>电梯（备用）电气火灾</td>
                             <td>1楼配电间内</td>
                             <td>11902191670058</td>
                             <td></td>
                         </tr>
-                        <tr style="text-align:center;">
+                        <tr>
                             <td>公灯2电气火灾</td>
                             <td>1楼配电间内</td>
                             <td>11902191670069</td>
                             <td></td>
                         </tr>
                     </table>
-                    <p class="table-sub">表2：安装设备清单</p>
+                    <p class="table-sub" style="text-align:center">表2：安装设备清单</p>
                 </div>
 
 
                 <div class="text-left">
                     <h4 class="big-tit">1.3 统计时段</h4>
-                    <p>统计起始日期：2020-12-01</p>
-                    <p>统计截止日期：2020-12-31</p>
-                    <p>统计时段时长：31</p>
-                    <p>数据来源及方法：1.执行时输入的时间；2.程序定死</p>
+                    <div>统计起始日期：2020-12-01</div>
+                    <div>统计截止日期：2020-12-31</div>
+                    <div>统计时段时长：31</div>
                 </div>
 
 
@@ -93,40 +92,55 @@
             </section>
 
             <section class="">
-                <h3 class="big-tit">2 数据统计计算</h3>
-                <table width="100%">
+                <h4 class="big-tit">2 数据统计计算</h4>
+                <table width="100%" border=1 style="text-align: center;border-collapse: collapse;
+                border-spacing: 0;">
                     <tr>
-                        <th>报警总数</th>
-                        <th>处理数</th>
-                        <th>未处理数</th>
+                        <td>报警总数</td>
+                        <td>处理数</td>
+                        <td>未处理数</td>
+                        <td>处置率</td>
+                        <td>备注</td>
                     </tr>
                     <tr>
                         <td>1568</td>
                         <td>1300</td>
                         <td>268</td>
+                        <td>30%</td>
+                        <td>备注信息</td>
                     </tr>
                 </table>
 
-                <p class="table-sub">表3：数据统计计算</p>
+                <p class="table-sub" style="text-align:center">表3：数据统计计算</p>
             </section>
 
             <section class="divergence">
-                <h3 class="big-tit">3 数据离散率挖掘</h3>
+                <h4 class="big-tit">3 数据离散率挖掘</h4>
                 <h4 class="big-tit">3.1 三相电压</h4>
-                <div class="chart1 innerChart"></div>
+                <div id="divergenceChart1" class="innerChart"></div>
+                <img id="divergenceChart1_img" style="width:100%;display:none;">
+
                 <h4 class="big-tit">3.2 三相电流</h4>
-                <div class="chart2 innerChart"></div>
+                <div id="divergenceChart2" class=" innerChart"></div>
+                <img id="divergenceChart2_img" style="width:100%;display:none;">
+
                 <h4 class="big-tit">3.3 三相温度</h4>
-                <div class="chart3 innerChart"></div>
+                <div id="divergenceChart3" class=" innerChart"></div>
+                <img id="divergenceChart3_img" style="width:100%;display:none;">
+
                 <h4 class="big-tit">3.4 漏电电流</h4>
-                <div class="chart4 innerChart"></div>
+                <div id="divergenceChart4" class=" innerChart"></div>
+                <img id="divergenceChart4_img" style="width:100%;display:none;">
+
                 <div class="summary2">
                     <div>
                         <p>结论：</p>
                     </div>
                     <div>
-                        <p>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
-                        <p>2、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
+                        <div>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</div>
+                        <div>2、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</div>
+                        <div>3、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</div>
+                        <div>4、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</div>
                     </div>
                 </div>
 
@@ -134,39 +148,52 @@
 
 
             <section class="oldAnalysis">
-                <h3 class="big-tit">4 电老化分析</h3>
+                <h4 class="big-tit">4 电老化分析</h4>
+
                 <h4 class="big-tit">4.1 异常设备监控电缆数据</h4>
-                <div class="innerChart chart1"></div>
-                <h4 class="big-tit">4.1 漏电告警数据</h4>
-                <div class="innerChart chart2"></div>
+                <div id="oldAnalysisChart1" class="innerChart"></div>
+                <img id="oldAnalysisChart1_img" style="width:100%;display:none;">
+
+                <h4 class="big-tit">4.2 漏电告警数据</h4>
+                <div id="oldAnalysisChart2" class="innerChart"></div>
+                <img id="oldAnalysisChart2_img" style="width:100%;display:none;">
+
                 <div class="summary2">
                     <div>
                         <p>结论：</p>
                     </div>
                     <div>
-                        <p>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
+                        <div>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</div>
                     </div>
                 </div>
 
             </section>
 
             <section class="hotAnalysis">
-                <h3 class="big-tit">5 热老化分析</h3>
+                <h4 class="big-tit">5 热老化分析</h4>
+
+                <div id="hotAnalysisChart1" class="innerChart"></div>
+                <img id="hotAnalysisChart1_img" style="width:100%;display:none;">
+
 
-                <div class="innerChart chart1"></div>
                 <div class="summary2">
                     <div>
                         <p>结论：</p>
                     </div>
                     <div>
-                        <p>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
+                        <div>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</div>
                     </div>
                 </div>
 
             </section>
 
+
+
+
         </div>
     </div>
+
+
     <div class="page-container">
         <header>
             <h1>分析报告及数据可视化</h1>
@@ -178,7 +205,7 @@
                     <option value="2">建筑二</option>
                 </select>
                 <span>时间</span>
-                <div class="layui-inline"><input type="text" id="chooseTime" class="layui-input test-item"></div>
+                <div class="layui-inline"><input type="text" id="chooseTime" class="layui-input test-item" value="2021-03"></div>
 
                 <a class="button">
                     <img src="images/export-icon.svg" alt="">
@@ -244,6 +271,8 @@
                             <div>
                                 <p>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
                                 <p>2、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
+                                <p>3、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
+                                <p>4、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
                             </div>
                         </div>
                         <div class="panel-footer"></div>
@@ -273,7 +302,7 @@
                             </div>
                             <div>
                                 <p>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
-                                <p>2、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
+                                <p>2、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
                             </div>
                         </div>
                         <div class="panel-footer"></div>
@@ -308,1234 +337,28 @@
     </div>
 
 
-
     <script src="js/flexible.js"></script>
 
     <script src="js/jquery.js"></script>
-
-
     <script src="layui/layui.js"></script>
-
     <script src="js/echarts.min.js"></script>
     <script src="js/echarts-gl.min.js"></script>
 
     <script src="js/eleFire.js"></script>
-    <!-- <script src="js/eleFireInner.js"></script> -->
-
-    <script src="js/html2canvas.min.js"></script>
-    <script src="js/canvas2image.js"></script>
-    <!-- <script src="js/exporting.js"></script> -->
-
-
-
-    <script src="js/print.js"></script>
+    <script src="js/eleFireInner.js"></script>
 
 
     <script>
-        // 折线图定制 (数据离散率挖掘1)
-        (function() {
-            var sortData = [{
-                    sortName: "三相电压",
-                    data: [
-                        // 两个数组是因为有两条线
-                        [30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 200, 180, 79, 82, 64, 43, 60, 19, 82, 64, 43, 60, 19, 34],
-                        [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
-                        [400, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
-                    ]
-                },
-
-            ];
-
-            var xData = function() {
-                var data = [];
-                for (var i = 1; i < 31; i++) {
-                    data.push(i);
-                }
-                return data;
-            }();
-
-            // 1. 实例化对象
-            var myChart = echarts.init(document.querySelector(".divergence .chart1"));
-
-
-
-            // 2.指定配置
-            var option = {
-
-                color: [{
-
-                        colorStops: [{
-                            offset: 0,
-                            color: '#F9860C' // 0% 处的颜色
-                        }, {
-                            offset: 1,
-                            color: '#fff' // 100% 处的颜色
-                        }],
-
-                    },
-
-                    {
-
-                        colorStops: [{
-                            offset: 0,
-                            color: '#07E1F1' // 0% 处的颜色
-                        }, {
-                            offset: 1,
-                            color: '#0456CB' // 100% 处的颜色
-                        }],
-
-                    },
-
-                    {
-
-                        colorStops: [{
-                            offset: 0,
-                            color: '#11F90C' // 0% 处的颜色
-                        }, {
-                            offset: 1,
-                            color: '#3FC713' // 100% 处的颜色
-                        }],
-
-                    }
-
-                ],
-
-                tooltip: {
-                    trigger: "axis",
-                    textStyle: {
-                        align: 'left' //图例左对齐
-                    },
-                    backgroundColor: '#12DFE0',
-                    formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：2021年3月{b}日'
-
-                },
-                legend: {
-                    // 如果series 对象有name 值，则 legend可以不用写data
-                    itemGap: 20,
-                    itemHeight: 2,
-                    itemWidth: 15,
-                    icon: 'rect',
-                    textStyle: {
-                        color: "#fff"
-                    },
-                    top: "bottom",
-                },
-                grid: {
-                    top: "0%",
-                    left: "1%",
-                    right: "1%",
-                    bottom: "15%",
-                    show: true, // 显示边框
-                    borderWidth: '0', //去除边框
-                    containLabel: true // 包含刻度文字在内
-                },
-
-                xAxis: {
-                    type: "category",
-                    boundaryGap: false,
-                    data: xData,
-                    axisTick: {
-                        show: false // 去除刻度线
-                    },
-                    axisLabel: {
-                        color: "#AADDFF" // 文本颜色
-                    },
-                    axisLine: {
-                        lineStyle: {
-                            color: 'rgba(255,255,255,.3)'
-                        }
-                    },
-                    splitNumber: 8,
-                    splitLine: {
-                        show: false
-                    },
-                    splitArea: {
-                        show: true,
-                        areaStyle: {
-                            color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
-                        }
-                    }
-                },
-
-                yAxis: {
-                    type: "value",
-                    axisTick: {
-                        show: false // 去除刻度线
-                    },
-                    axisLabel: {
-                        show: false // 去除文本
-                    },
-                    axisLine: {
-                        show: false // 去除轴线
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: "#012f4a" // 分割线颜色
-                        }
-                    }
-                },
-                series: [{
-                    symbol: "none",
-                    name: "方差",
-                    type: "line",
-                    data: sortData[0].data[0]
-                }, {
-                    symbol: "none",
-                    name: "标准差",
-                    type: "line",
-                    data: sortData[0].data[1]
-                }, {
-                    symbol: "none",
-                    name: "平均值",
-                    type: "line",
-                    data: sortData[0].data[2]
-                }]
-            };
-
-            myChart.setOption(option);
-
-
-            window.addEventListener("resize", function() {
-                myChart.resize();
-            });
-        })();
-        // 数据离散率挖掘2
-        (function() {
-            var sortData = [{
-                    sortName: "三相电流",
-                    data: [
-                        // 两个数组是因为有两条线
-                        [143, 19, 34, 40, 64, 191, 324, 290, 330, 310, 131, 165, 123, 178, 21, 82, 64, 43, 60, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ],
-                        [24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
-                        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
-                    ]
-                },
-
-            ];
-
-            var xData = function() {
-                var data = [];
-                for (var i = 1; i < 31; i++) {
-                    data.push(i);
-                }
-                return data;
-            }();
-
-            // 1. 实例化对象
-            var myChart = echarts.init(document.querySelector(".divergence .chart2"));
-            // 2.指定配置
-            var option = {
-
-                color: [{
-
-                        colorStops: [{
-                            offset: 0,
-                            color: '#F9860C' // 0% 处的颜色
-                        }, {
-                            offset: 1,
-                            color: '#fff' // 100% 处的颜色
-                        }],
-
-                    },
-
-                    {
-
-                        colorStops: [{
-                            offset: 0,
-                            color: '#07E1F1' // 0% 处的颜色
-                        }, {
-                            offset: 1,
-                            color: '#0456CB' // 100% 处的颜色
-                        }],
-
-                    },
-
-                    {
-
-                        colorStops: [{
-                            offset: 0,
-                            color: '#11F90C' // 0% 处的颜色
-                        }, {
-                            offset: 1,
-                            color: '#3FC713' // 100% 处的颜色
-                        }],
-
-                    }
-
-                ],
-
-                tooltip: {
-                    trigger: "axis",
-                    textStyle: {
-                        align: 'left' //图例左对齐
-                    },
-                    backgroundColor: '#12DFE0',
-                    formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：2021年3月{b}日'
-
-                },
-                legend: {
-                    // 如果series 对象有name 值，则 legend可以不用写data
-                    itemGap: 20,
-                    itemHeight: 2,
-                    itemWidth: 15,
-                    icon: 'rect',
-                    textStyle: {
-                        color: "#fff"
-                    },
-                    top: "bottom",
-                },
-                grid: {
-                    top: "0%",
-                    left: "1%",
-                    right: "1%",
-                    bottom: "15%",
-                    show: true, // 显示边框
-                    borderWidth: '0', //去除边框
-                    containLabel: true // 包含刻度文字在内
-                },
-
-                xAxis: {
-                    type: "category",
-                    boundaryGap: false,
-                    data: xData,
-                    axisTick: {
-                        show: false // 去除刻度线
-                    },
-                    axisLabel: {
-                        color: "#AADDFF" // 文本颜色
-                    },
-                    axisLine: {
-                        lineStyle: {
-                            color: 'rgba(255,255,255,.3)'
-                        }
-                    },
-                    splitNumber: 8,
-                    splitLine: {
-                        show: false
-                    },
-                    splitArea: {
-                        show: true,
-                        areaStyle: {
-                            color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
-                        }
-                    }
-                },
-
-                yAxis: {
-                    type: "value",
-                    axisTick: {
-                        show: false // 去除刻度线
-                    },
-                    axisLabel: {
-                        show: false // 去除文本
-                    },
-                    axisLine: {
-                        show: false // 去除轴线
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: "#012f4a" // 分割线颜色
-                        }
-                    }
-                },
-                series: [{
-                    symbol: "none",
-                    name: "方差",
-                    type: "line",
-                    data: sortData[0].data[0]
-                }, {
-                    symbol: "none",
-                    name: "标准差",
-                    type: "line",
-                    data: sortData[0].data[1]
-                }, {
-                    symbol: "none",
-                    name: "平均值",
-                    type: "line",
-                    data: sortData[0].data[2]
-                }]
-            };
-
-            myChart.setOption(option);
-            window.addEventListener("resize", function() {
-                myChart.resize();
-            });
-        })();
-
-        // 数据离散率挖掘3
-        (function() {
-            var sortData = [{
-                    sortName: "三相电流",
-                    data: [
-                        // 两个数组是因为有两条线
-                        [24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
-                        [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
-                        [131, 165, 123, 178, 21, 82, 64, 43, 60, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ]
-                    ]
-                },
-
-            ];
-
-            var xData = function() {
-                var data = [];
-                for (var i = 1; i < 31; i++) {
-                    data.push(i);
-                }
-                return data;
-            }();
-
-            // 1. 实例化对象
-            var myChart = echarts.init(document.querySelector(".divergence .chart3"));
-            // 2.指定配置
-            var option = {
-
-                color: [{
-
-                        colorStops: [{
-                            offset: 0,
-                            color: '#F9860C' // 0% 处的颜色
-                        }, {
-                            offset: 1,
-                            color: '#fff' // 100% 处的颜色
-                        }],
-
-                    },
-
-                    {
-
-                        colorStops: [{
-                            offset: 0,
-                            color: '#07E1F1' // 0% 处的颜色
-                        }, {
-                            offset: 1,
-                            color: '#0456CB' // 100% 处的颜色
-                        }],
-
-                    },
-
-                    {
-
-                        colorStops: [{
-                            offset: 0,
-                            color: '#11F90C' // 0% 处的颜色
-                        }, {
-                            offset: 1,
-                            color: '#3FC713' // 100% 处的颜色
-                        }],
-
-                    }
-
-                ],
-
-                tooltip: {
-                    trigger: "axis",
-                    textStyle: {
-                        align: 'left' //图例左对齐
-                    },
-                    backgroundColor: '#12DFE0',
-                    formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：2021年3月{b}日'
-
-                },
-                legend: {
-                    // 如果series 对象有name 值，则 legend可以不用写data
-                    itemGap: 20,
-                    itemHeight: 2,
-                    itemWidth: 15,
-                    icon: 'rect',
-                    textStyle: {
-                        color: "#fff"
-                    },
-                    top: "bottom",
-                },
-                grid: {
-                    top: "0%",
-                    left: "1%",
-                    right: "1%",
-                    bottom: "15%",
-                    show: true, // 显示边框
-                    borderWidth: '0', //去除边框
-                    containLabel: true // 包含刻度文字在内
-                },
-
-                xAxis: {
-                    type: "category",
-                    boundaryGap: false,
-                    data: xData,
-                    axisTick: {
-                        show: false // 去除刻度线
-                    },
-                    axisLabel: {
-                        color: "#AADDFF" // 文本颜色
-                    },
-                    axisLine: {
-                        lineStyle: {
-                            color: 'rgba(255,255,255,.3)'
-                        }
-                    },
-                    splitNumber: 8,
-                    splitLine: {
-                        show: false
-                    },
-                    splitArea: {
-                        show: true,
-                        areaStyle: {
-                            color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
-                        }
-                    }
-                },
-
-                yAxis: {
-                    type: "value",
-                    axisTick: {
-                        show: false // 去除刻度线
-                    },
-                    axisLabel: {
-                        show: false // 去除文本
-                    },
-                    axisLine: {
-                        show: false // 去除轴线
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: "#012f4a" // 分割线颜色
-                        }
-                    }
-                },
-                series: [{
-                    symbol: "none",
-                    name: "方差",
-                    type: "line",
-                    data: sortData[0].data[0]
-                }, {
-                    symbol: "none",
-                    name: "标准差",
-                    type: "line",
-                    data: sortData[0].data[1]
-                }, {
-                    symbol: "none",
-                    name: "平均值",
-                    type: "line",
-                    data: sortData[0].data[2]
-                }]
-            };
-
-            myChart.setOption(option);
-            window.addEventListener("resize", function() {
-                myChart.resize();
-            });
-        })();
-
-        // 数据离散率挖掘4
-        (function() {
-            var sortData = [{
-                    sortName: "三相电流",
-                    data: [
-                        // 两个数组是因为有两条线
-                        [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ],
-                        [120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
-                        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
-                    ]
-                },
-
-            ];
-
-            var xData = function() {
-                var data = [];
-                for (var i = 1; i < 31; i++) {
-                    data.push(i);
-                }
-                return data;
-            }();
-
-            // 1. 实例化对象
-            var myChart = echarts.init(document.querySelector(".divergence .chart4"));
-            // 2.指定配置
-            var option = {
-
-                color: [{
-
-                        colorStops: [{
-                            offset: 0,
-                            color: '#F9860C' // 0% 处的颜色
-                        }, {
-                            offset: 1,
-                            color: '#fff' // 100% 处的颜色
-                        }],
-
-                    },
-
-                    {
-
-                        colorStops: [{
-                            offset: 0,
-                            color: '#07E1F1' // 0% 处的颜色
-                        }, {
-                            offset: 1,
-                            color: '#0456CB' // 100% 处的颜色
-                        }],
-
-                    },
-
-                    {
-
-                        colorStops: [{
-                            offset: 0,
-                            color: '#11F90C' // 0% 处的颜色
-                        }, {
-                            offset: 1,
-                            color: '#3FC713' // 100% 处的颜色
-                        }],
-
-                    }
-
-                ],
-
-                tooltip: {
-                    trigger: "axis",
-                    textStyle: {
-                        align: 'left' //图例左对齐
-                    },
-                    backgroundColor: '#12DFE0',
-                    formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：2021年3月{b}日'
-
-                },
-                legend: {
-                    // 如果series 对象有name 值，则 legend可以不用写data
-                    itemGap: 20,
-                    itemHeight: 2,
-                    itemWidth: 15,
-                    icon: 'rect',
-                    textStyle: {
-                        color: "#fff"
-                    },
-                    top: "bottom",
-                },
-                grid: {
-                    top: "0%",
-                    left: "1%",
-                    right: "1%",
-                    bottom: "15%",
-                    show: true, // 显示边框
-                    borderWidth: '0', //去除边框
-                    containLabel: true // 包含刻度文字在内
-                },
-
-                xAxis: {
-                    type: "category",
-                    boundaryGap: false,
-                    data: xData,
-                    axisTick: {
-                        show: false // 去除刻度线
-                    },
-                    axisLabel: {
-                        color: "#AADDFF" // 文本颜色
-                    },
-                    axisLine: {
-                        lineStyle: {
-                            color: 'rgba(255,255,255,.3)'
-                        }
-                    },
-                    splitNumber: 8,
-                    splitLine: {
-                        show: false
-                    },
-                    splitArea: {
-                        show: true,
-                        areaStyle: {
-                            color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
-                        }
-                    }
-                },
-
-                yAxis: {
-                    type: "value",
-                    axisTick: {
-                        show: false // 去除刻度线
-                    },
-                    axisLabel: {
-                        show: false // 去除文本
-                    },
-                    axisLine: {
-                        show: false // 去除轴线
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: "#012f4a" // 分割线颜色
-                        }
-                    }
-                },
-                series: [{
-                    symbol: "none",
-                    name: "方差",
-                    type: "line",
-                    data: sortData[0].data[0]
-                }, {
-                    symbol: "none",
-                    name: "标准差",
-                    type: "line",
-                    data: sortData[0].data[1]
-                }, {
-                    symbol: "none",
-                    name: "平均值",
-                    type: "line",
-                    data: sortData[0].data[2]
-                }]
-            };
-
-            myChart.setOption(option);
-            window.addEventListener("resize", function() {
-                myChart.resize();
-            });
-        })();
-
-        // 折线图定制 (电老化分析1)
-        (function() {
-
-            var sortData = [{
-                    sortName: "异常设备",
-                    data: [
-                        // 两个数组是因为有两条线
-                        [24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
-                        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
-                    ]
-                },
-
-            ];
-
-            var xData = function() {
-                var data = [];
-                for (var i = 1; i < 31; i++) {
-                    data.push(i);
-                }
-                return data;
-            }();
-
-            // 1. 实例化对象
-            var myChart = echarts.init(document.querySelector(".oldAnalysis .chart1"));
-            // 2.指定配置
-            var option = {
-
-                color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
-                tooltip: {
-                    trigger: "axis",
-                    textStyle: {
-                        align: 'left' //图例左对齐
-                    },
-                    backgroundColor: '#12DFE0',
-                    formatter: '{a0}: {c0}<br />{a1}: {c1}<br />时间：2021年3月{b}日'
-
-                },
-                legend: {
-                    // 如果series 对象有name 值，则 legend可以不用写data
-                    itemGap: 20,
-                    itemHeight: 2,
-                    itemWidth: 15,
-                    icon: 'rect',
-                    textStyle: {
-                        color: "#fff"
-                    },
-                    top: "bottom",
-                },
-                grid: {
-                    top: "0%",
-                    left: "1%",
-                    right: "1%",
-                    bottom: "15%",
-                    show: true, // 显示边框
-                    borderWidth: '0', //去除边框
-                    containLabel: true // 包含刻度文字在内
-                },
-
-                xAxis: {
-                    type: "category",
-                    boundaryGap: false,
-                    data: xData,
-                    axisTick: {
-                        show: false // 去除刻度线
-                    },
-                    axisLabel: {
-                        color: "#AADDFF" // 文本颜色
-                    },
-                    axisLine: {
-                        show: false // 去除轴线
-                    }
-                },
-
-                yAxis: {
-                    type: "value",
-                    axisTick: {
-                        show: false // 去除刻度线
-                    },
-                    axisLabel: {
-                        show: false // 去除文本
-                    },
-                    axisLine: {
-                        show: false // 去除轴线
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: "#012f4a" // 分割线颜色
-                        }
-                    }
-                },
-                series: [{
-                    symbol: "none",
-                    name: "电流",
-                    type: "line",
-                    smooth: true, // true 可以让我们的折线显示带有弧度
-                    areaStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(
-                                0,
-                                0,
-                                0,
-                                1, [{
-                                    offset: 0,
-                                    color: "rgba(255,156,0, 0.4)"
-                                }, {
-                                    offset: 0.8,
-                                    color: "rgba(255,156,0, 0.3)"
-                                }],
-                                false
-                            ),
-                            shadowColor: "rgba(0, 0, 0, 0.1)"
-                        }
-                    },
-
-
-                    data: sortData[0].data[0]
-                }, {
-                    symbol: "none",
-                    name: "电压",
-                    type: "line",
-                    smooth: true,
-                    areaStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(
-                                0,
-                                0,
-                                0,
-                                1, [{
-                                    offset: 0,
-                                    color: "rgba(0,150,255,0.5)"
-                                }, {
-                                    offset: 0.8,
-                                    color: "rgba(0,150,255, 0.1)"
-                                }],
-                                false
-                            ),
-                            shadowColor: "rgba(0, 0, 0, 0.1)"
-                        }
-                    },
-
-                    data: sortData[0].data[1]
-                }]
-            };
-
-            myChart.setOption(option);
-            window.addEventListener("resize", function() {
-                myChart.resize();
-            });
-
-        })();
-        // 折线图定制 (电老化分析2)
-        (function() {
-
-            var sortData = [{
-                sortName: "漏电告警",
-                data: [
-                    // 两个数组是因为有两条线
-                    [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
-                    [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ]
-                ]
-            }];
-
-            var xData = function() {
-                var data = [];
-                for (var i = 1; i < 31; i++) {
-                    data.push(i);
-                }
-                return data;
-            }();
-
-            // 1. 实例化对象
-            var myChart = echarts.init(document.querySelector(".oldAnalysis .chart2"));
-            // 2.指定配置
-            var option = {
-
-                color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
-                tooltip: {
-                    trigger: "axis",
-                    textStyle: {
-                        align: 'left' //图例左对齐
-                    },
-                    backgroundColor: '#12DFE0',
-                    formatter: '{a0}: {c0}<br />{a1}: {c1}<br />时间：2021年3月{b}日'
-
-                },
-                legend: {
-                    // 如果series 对象有name 值，则 legend可以不用写data
-                    itemGap: 20,
-                    itemHeight: 2,
-                    itemWidth: 15,
-                    icon: 'rect',
-                    textStyle: {
-                        color: "#fff"
-                    },
-                    top: "bottom",
-                },
-                grid: {
-                    top: "0%",
-                    left: "1%",
-                    right: "1%",
-                    bottom: "15%",
-                    show: true, // 显示边框
-                    borderWidth: '0', //去除边框
-                    containLabel: true // 包含刻度文字在内
-                },
-
-                xAxis: {
-                    type: "category",
-                    boundaryGap: false,
-                    data: xData,
-                    axisTick: {
-                        show: false // 去除刻度线
-                    },
-                    axisLabel: {
-                        color: "#AADDFF" // 文本颜色
-                    },
-                    axisLine: {
-                        show: false // 去除轴线
-                    }
-                },
-
-                yAxis: {
-                    type: "value",
-                    axisTick: {
-                        show: false // 去除刻度线
-                    },
-                    axisLabel: {
-                        show: false // 去除文本
-                    },
-                    axisLine: {
-                        show: false // 去除轴线
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: "#012f4a" // 分割线颜色
-                        }
-                    }
-                },
-                series: [{
-                    symbol: "none",
-                    name: "电流",
-                    type: "line",
-                    smooth: true, // true 可以让我们的折线显示带有弧度
-                    areaStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(
-                                0,
-                                0,
-                                0,
-                                1, [{
-                                    offset: 0,
-                                    color: "rgba(255,156,0, 0.4)"
-                                }, {
-                                    offset: 0.8,
-                                    color: "rgba(255,156,0, 0.3)"
-                                }],
-                                false
-                            ),
-                            shadowColor: "rgba(0, 0, 0, 0.1)"
-                        }
-                    },
-
-
-                    data: sortData[0].data[0]
-                }, {
-                    symbol: "none",
-                    name: "电压",
-                    type: "line",
-                    smooth: true,
-                    areaStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(
-                                0,
-                                0,
-                                0,
-                                1, [{
-                                    offset: 0,
-                                    color: "rgba(0,150,255,0.5)"
-                                }, {
-                                    offset: 0.8,
-                                    color: "rgba(0,150,255, 0.1)"
-                                }],
-                                false
-                            ),
-                            shadowColor: "rgba(0, 0, 0, 0.1)"
-                        }
-                    },
-
-                    data: sortData[0].data[1]
-                }]
-            };
-
-            myChart.setOption(option);
-            window.addEventListener("resize", function() {
-                myChart.resize();
-            });
-        })();
-
-
-        // 折线图定制 (热老化分析)
-        (function() {
-
-            var sortData = [{
-                data: [
-                    // 三个数组是因为有3条线
-                    [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
-                    [24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
-                    [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
-                ]
-            }];
-
-            var xData = function() {
-                var data = [];
-                for (var i = 1; i < 31; i++) {
-                    data.push(i);
-                }
-                return data;
-            }();
-
-            // 1. 实例化对象
-            var myChart = echarts.init(document.querySelector(".hotAnalysis .chart1"));
-            // 2.指定配置
-            var option = {
-
-                color: ["#05EEE7", "#9999FF", "#FE92B3"], // 通过这个color修改三条线的颜色
-                tooltip: {
-                    trigger: "axis",
-                    textStyle: {
-                        align: 'left' //图例左对齐
-                    },
-                    backgroundColor: '#12DFE0',
-                    formatter: '{a0}: {c0}°C<br />{a1}: {c1}°C<br />{a2}: {c2}°C<br />时间：2021年3月{b}日'
-
-                },
-                legend: {
-                    // 如果series 对象有name 值，则 legend可以不用写data
-                    itemGap: 20,
-                    itemHeight: 2,
-                    itemWidth: 15,
-                    icon: 'rect',
-                    textStyle: {
-                        color: "#fff"
-                    },
-                    top: "bottom",
-                },
-                grid: {
-                    top: "0%",
-                    left: "1%",
-                    right: "1%",
-                    bottom: "15%",
-                    show: true, // 显示边框
-                    borderWidth: '0', //去除边框
-                    containLabel: true // 包含刻度文字在内
-                },
-
-                xAxis: {
-                    type: "category",
-                    boundaryGap: false,
-                    data: xData,
-                    axisTick: {
-                        show: false // 去除刻度线
-                    },
-                    axisLabel: {
-                        color: "#AADDFF" // 文本颜色
-                    },
-                    axisLine: {
-                        show: false // 去除轴线
-                    }
-                },
-
-                yAxis: {
-                    type: "value",
-                    axisTick: {
-                        show: false // 去除刻度线
-                    },
-                    axisLabel: {
-                        show: false // 去除文本
-                    },
-                    axisLine: {
-                        show: false // 去除轴线
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: "#012f4a" // 分割线颜色
-                        }
-                    }
-                },
-                series: [{
-                    symbol: "none",
-                    name: "线缆产生的温度",
-                    type: "line",
-                    smooth: true, // true 可以让我们的折线显示带有弧度
-                    areaStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(
-                                0,
-                                0,
-                                0,
-                                1, [{
-                                    offset: 0,
-                                    color: "rgba(5,238,231,.6)"
-                                }, {
-                                    offset: 0.8,
-                                    color: "rgba(5,238,231, 0.4)"
-                                }],
-                                false
-                            ),
-                        }
-                    },
-
-                    data: sortData[0].data[0]
-                }, {
-                    symbol: "none",
-                    name: "环境温度",
-                    type: "line",
-                    smooth: true,
-                    areaStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(
-                                0,
-                                0,
-                                0,
-                                1, [{
-                                    offset: 0,
-                                    color: "rgba(153,153,255,.6)"
-                                }, {
-                                    offset: 0.8,
-                                    color: "rgba(153,153,255, 0.4)"
-                                }],
-                                false
-                            ),
-                        }
-                    },
-
-                    data: sortData[0].data[1]
-                }, {
-                    symbol: "none",
-                    name: "线缆温度",
-                    type: "line",
-                    smooth: true,
-                    areaStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(
-                                0,
-                                0,
-                                0,
-                                1, [{
-                                    offset: 0,
-                                    color: "rgba(255,147,180,.6)"
-                                }, {
-                                    offset: 0.8,
-                                    color: "rgba(255,147,180, 0.4)"
-                                }],
-                                false
-                            ),
-                        }
-                    },
-
-                    data: sortData[0].data[2]
-                }]
-            };
-
-            myChart.setOption(option);
-            window.addEventListener("resize", function() {
-                myChart.resize();
-            });
-
-
-        })();
-    </script>
-
-
-    <script>
-        var print_detail = function() {
-            alert(1)
-            var div1_label1 = document.getElementById('printArea').innerHTML;
-            // var div2_label1 = document.getElementById('div2_label1').innerHTML;
-            var hkey_key;
-            var hkey_root = 'HKEY_CURRENT_USER';
-            var hkey_path = '\\Software\\Micorsoft\\Internet Explorer\\PageSetup\\';
-            var print_win = window.open('打印窗口', '_blank');
-            var div = document.createElement('div');
-            div.setAttribute('width', '100%');
-            div.setAttribute('height', '100%');
-            var div_print = document.createElement('div');
-            div_print.setAttribute('style', 'width:595px;height:842px;padding:20px;margin:0px auto 0px auto');
-            div_print.innerHTML = div1_label1;
-            div.appendChild(div_print);
-            //		var div_print1 = document.createElement('div');
-            //		div_print1.setAttribute('style', 'width:595px;height:842px;padding:20px;margin:0px auto 0px auto');
-            //		div_print1.innerHTML=div2_label1;
-            //		div.appendChild(div_print1);
-
-            print_win.document.write(div.innerHTML);
-            print_win.document.close();
-            try {
-                var RegWsh = new ActiveXObject('WScript.Shell');
-                hkey_key = 'header';
-                RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '');
-                hkey_key = 'footer';
-                RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '');
-            } catch (e) {}
-            print_win.print();
-            print_win.close();
-        }
-
-
-
         layui.use('laydate', function() {
             var laydate = layui.laydate;
             ///年月选择器
             laydate.render({
                 elem: '#chooseTime',
-                type: 'month'
+                type: 'month',
+                trigger: 'click' //呼出事件改成click
             });
 
         });
-
-        $("#btnPrint").click(function() {
-            // $("#printArea").printArea();
-            // print_detail()
-
-
-            Print('#printArea', {
-                onStart: function() {
-                    console.log('onStart', new Date())
-                },
-                onEnd: function() {
-                    console.log('onEnd', new Date())
-                }
-            })
-
-
-        });
-
-
-
-        // $("#btnPrint").click(function() {
-        //     Print('body', {
-        //         onStart: function() {
-        //             console.log('onStart', new Date())
-        //         },
-        //         onEnd: function() {
-        //             console.log('onEnd', new Date())
-        //         }
-        //     })
-
-        // });
     </script>
 </body>
 

js/canvas2image.js

@@ -1,235 +0,0 @@
-/*
- * Canvas2Image v0.1
- * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk
- * MIT License [http://www.opensource.org/licenses/mit-license.php]
- */
- 
-var Canvas2Image = (function() {
- 
-	// check if we have canvas support
-	var bHasCanvas = false;
-	var oCanvas = document.createElement("canvas");
-	if (oCanvas.getContext("2d")) {
-		bHasCanvas = true;
-	}
- 
-	// no canvas, bail out.
-	if (!bHasCanvas) {
-		return {
-			saveAsBMP : function(){},
-			saveAsPNG : function(){},
-			saveAsJPEG : function(){}
-		}
-	}
- 
-	var bHasImageData = !!(oCanvas.getContext("2d").getImageData);
-	var bHasDataURL = !!(oCanvas.toDataURL);
-	var bHasBase64 = !!(window.btoa);
- 
-	var strDownloadMime = "image/octet-stream";
- 
-	// ok, we're good
-	var readCanvasData = function(oCanvas) {
-		var iWidth = parseInt(oCanvas.width);
-		var iHeight = parseInt(oCanvas.height);
-		return oCanvas.getContext("2d").getImageData(0,0,iWidth,iHeight);
-	}
- 
-	// base64 encodes either a string or an array of charcodes
-	var encodeData = function(data) {
-		var strData = "";
-		if (typeof data == "string") {
-			strData = data;
-		} else {
-			var aData = data;
-			for (var i=0;i<aData.length;i++) {
-				strData += String.fromCharCode(aData[i]);
-			}
-		}
-		return btoa(strData);
-	}
- 
-	// creates a base64 encoded string containing BMP data
-	// takes an imagedata object as argument
-	var createBMP = function(oData) {
-		var aHeader = [];
-	
-		var iWidth = oData.width;
-		var iHeight = oData.height;
- 
-		aHeader.push(0x42); // magic 1
-		aHeader.push(0x4D); 
-	
-		var iFileSize = iWidth*iHeight*3 + 54; // total header size = 54 bytes
-		aHeader.push(iFileSize % 256); iFileSize = Math.floor(iFileSize / 256);
-		aHeader.push(iFileSize % 256); iFileSize = Math.floor(iFileSize / 256);
-		aHeader.push(iFileSize % 256); iFileSize = Math.floor(iFileSize / 256);
-		aHeader.push(iFileSize % 256);
- 
-		aHeader.push(0); // reserved
-		aHeader.push(0);
-		aHeader.push(0); // reserved
-		aHeader.push(0);
- 
-		aHeader.push(54); // dataoffset
-		aHeader.push(0);
-		aHeader.push(0);
-		aHeader.push(0);
- 
-		var aInfoHeader = [];
-		aInfoHeader.push(40); // info header size
-		aInfoHeader.push(0);
-		aInfoHeader.push(0);
-		aInfoHeader.push(0);
- 
-		var iImageWidth = iWidth;
-		aInfoHeader.push(iImageWidth % 256); iImageWidth = Math.floor(iImageWidth / 256);
-		aInfoHeader.push(iImageWidth % 256); iImageWidth = Math.floor(iImageWidth / 256);
-		aInfoHeader.push(iImageWidth % 256); iImageWidth = Math.floor(iImageWidth / 256);
-		aInfoHeader.push(iImageWidth % 256);
-	
-		var iImageHeight = iHeight;
-		aInfoHeader.push(iImageHeight % 256); iImageHeight = Math.floor(iImageHeight / 256);
-		aInfoHeader.push(iImageHeight % 256); iImageHeight = Math.floor(iImageHeight / 256);
-		aInfoHeader.push(iImageHeight % 256); iImageHeight = Math.floor(iImageHeight / 256);
-		aInfoHeader.push(iImageHeight % 256);
-	
-		aInfoHeader.push(1); // num of planes
-		aInfoHeader.push(0);
-	
-		aInfoHeader.push(24); // num of bits per pixel
-		aInfoHeader.push(0);
-	
-		aInfoHeader.push(0); // compression = none
-		aInfoHeader.push(0);
-		aInfoHeader.push(0);
-		aInfoHeader.push(0);
-	
-		var iDataSize = iWidth*iHeight*3; 
-		aInfoHeader.push(iDataSize % 256); iDataSize = Math.floor(iDataSize / 256);
-		aInfoHeader.push(iDataSize % 256); iDataSize = Math.floor(iDataSize / 256);
-		aInfoHeader.push(iDataSize % 256); iDataSize = Math.floor(iDataSize / 256);
-		aInfoHeader.push(iDataSize % 256); 
-	
-		for (var i=0;i<16;i++) {
-			aInfoHeader.push(0);	// these bytes not used
-		}
-	
-		var iPadding = (4 - ((iWidth * 3) % 4)) % 4;
- 
-		var aImgData = oData.data;
- 
-		var strPixelData = "";
-		var y = iHeight;
-		do {
-			var iOffsetY = iWidth*(y-1)*4;
-			var strPixelRow = "";
-			for (var x=0;x<iWidth;x++) {
-				var iOffsetX = 4*x;
- 
-				strPixelRow += String.fromCharCode(aImgData[iOffsetY+iOffsetX+2]);
-				strPixelRow += String.fromCharCode(aImgData[iOffsetY+iOffsetX+1]);
-				strPixelRow += String.fromCharCode(aImgData[iOffsetY+iOffsetX]);
-			}
-			for (var c=0;c<iPadding;c++) {
-				strPixelRow += String.fromCharCode(0);
-			}
-			strPixelData += strPixelRow;
-		} while (--y);
- 
-		var strEncoded = encodeData(aHeader.concat(aInfoHeader)) + encodeData(strPixelData);
- 
-		return strEncoded;
-	}
- 
- 
-	// sends the generated file to the client
-	var saveFile = function(strData) {
-		document.location.href = strData;
-	}
- 
-	var makeDataURI = function(strData, strMime) {
-		return "data:" + strMime + ";base64," + strData;
-	}
- 
-	// generates a <img> object containing the imagedata
-	var makeImageObject = function(strSource) {
-		var oImgElement = document.createElement("img");
-		oImgElement.src = strSource;
-		return oImgElement;
-	}
- 
-	var scaleCanvas = function(oCanvas, iWidth, iHeight) {
-		if (iWidth && iHeight) {
-			var oSaveCanvas = document.createElement("canvas");
-			oSaveCanvas.width = iWidth;
-			oSaveCanvas.height = iHeight;
-			oSaveCanvas.style.width = iWidth+"px";
-			oSaveCanvas.style.height = iHeight+"px";
- 
-			var oSaveCtx = oSaveCanvas.getContext("2d");
- 
-			oSaveCtx.drawImage(oCanvas, 0, 0, oCanvas.width, oCanvas.height, 0, 0, iWidth, iHeight);
-			return oSaveCanvas;
-		}
-		return oCanvas;
-	}
- 
-	return {
- 
-		saveAsPNG : function(oCanvas, bReturnImg, iWidth, iHeight) {
-			if (!bHasDataURL) {
-				return false;
-			}
-			var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight);
-			var strData = oScaledCanvas.toDataURL("image/png");
-			if (bReturnImg) {
-				return makeImageObject(strData);
-			} else {
-				saveFile(strData.replace("image/png", strDownloadMime));
-			}
-			return true;
-		},
- 
-		saveAsJPEG : function(oCanvas, bReturnImg, iWidth, iHeight) {
-			if (!bHasDataURL) {
-				return false;
-			}
- 
-			var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight);
-			var strMime = "image/jpeg";
-			var strData = oScaledCanvas.toDataURL(strMime);
-	
-			// check if browser actually supports jpeg by looking for the mime type in the data uri.
-			// if not, return false
-			if (strData.indexOf(strMime) != 5) {
-				return false;
-			}
- 
-			if (bReturnImg) {
-				return makeImageObject(strData);
-			} else {
-				saveFile(strData.replace(strMime, strDownloadMime));
-			}
-			return true;
-		},
- 
-		saveAsBMP : function(oCanvas, bReturnImg, iWidth, iHeight) {
-			if (!(bHasImageData && bHasBase64)) {
-				return false;
-			}
- 
-			var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight);
- 
-			var oData = readCanvasData(oScaledCanvas);
-			var strImgData = createBMP(oData);
-			if (bReturnImg) {
-				return makeImageObject(makeDataURI(strImgData, "image/bmp"));
-			} else {
-				saveFile(makeDataURI(strImgData, strDownloadMime));
-			}
-			return true;
-		}
-	};
- 
-})();

js/eleFire.js

@@ -1,4 +1,13 @@
-// 柱状图1模块
+/* 
+     电气火灾页面echarts配置
+*/
+
+
+
+
+
+
+// 环状饼图定制 （数据统计及时）
 (function() {
     // 实例化对象
     var myChart = echarts.init(document.querySelector(".bar-3d .chart"));
@@ -136,47 +145,16 @@
         // 准备待返回的配置项，把准备好的 legendData、series 传入。
         let option = {
 
-            // globe:{
-            //     baseTexture: "../img/world.jpg",
-            //     heightTexture: "../img/world.jpg",
-            //      displacementScale: 0.04,
-            //     environment: "../img/starfield.jpg",
-            //     shading:"realistic",
-            //     realisticMaterial: {
-            //            roughness: 0.9
-            //        },
-            //     postEffect: {
-            //            enable: true
-            //        },
-            //        light: {
-            //            main: {
-            //                intensity: 5,
-            //                shadow: true
-            //            },
-            //            ambientCubemap: {
-            //                texture: "../img/pisa.hdr",
-            //                diffuseIntensity: 0.2
-            //            }
-            //        }
-            //   },
-
-
-
-
             tooltip: {
+                backgroundColor: '#12DFE0',
                 formatter: params => {
                     if (params.seriesName !== 'mouseoutSeries') {
-                        return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}%`;
+                        // return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}%`;
+                        return `${params.seriesName}: ${option.series[params.seriesIndex].pieData.value}%`;
                     }
                 }
             },
-            // legend: {
-            //     data: legendData,
-            //     textStyle: {
-            //         color: '#fff',
-            //         fontSize: 14
-            //     }
-            // },
+
             xAxis3D: {
                 min: -1,
                 max: 1
@@ -238,10 +216,16 @@
 
 })();
 
-
 // 折线图定制 (数据离散率挖掘)
 (function() {
 
+    function add0(m) { return m < 10 ? '0' + m : m }
+
+    var year = $('#chooseTime').val().slice(0, 4);
+    var month = $('#chooseTime').val().slice(5, 7)
+
+
+
     var sortData = [{
             sortName: "三相电压",
             data: [
@@ -272,10 +256,13 @@
             sortName: "漏电电流",
             data: [
                 // 两个数组是因为有两条线
-                [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ],
-                [120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
+                [143, 19, 34, 40, 64, 191, 324, 290, 330, 310, 131, 165, 123, 178, 21, 82, 64, 43, 60, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ],
+                [24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
                 [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
             ]
+
+
+
         },
     ];
 
@@ -329,10 +316,8 @@
             }
 
         ],
-        // color: ["#FF9C00", "#0096FF", "#11F90C"], // 通过这个color修改两条线的颜色
         // tooltip: {
         //     trigger: "axis",
-        //     // backgroundColor: '#12DFE0',
         //     textStyle: {
         //         align: 'left' //图例左对齐
         //     },
@@ -343,7 +328,9 @@
                 align: 'left' //图例左对齐
             },
             backgroundColor: '#12DFE0',
-            formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：2021年3月{b}日'
+            // formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：2021年3月{b}日',
+            formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：' + year + '-' + month + '-{b}'
+
 
         },
         legend: {

js/eleFireInner.js

@@ -1,16 +1,18 @@
-// 折线图定制 (数据离散率挖掘1)
+/* 
+     电气火灾打印页面  echarts配置 及打印
+*/
+
+
+// 数据离散率挖掘1
 (function() {
     var sortData = [{
-            sortName: "三相电压",
-            data: [
-                // 两个数组是因为有两条线
-                [30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 200, 180, 79, 82, 64, 43, 60, 19, 82, 64, 43, 60, 19, 34],
-                [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
-                [400, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
-            ]
-        },
-
-    ];
+        sortName: "三相电压",
+        data: [
+            [30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 200, 180, 79, 82, 64, 43, 60, 19, 82, 64, 43, 60, 19, 34],
+            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
+            [400, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
+        ]
+    }, ];
 
     var xData = function() {
         var data = [];
@@ -21,12 +23,11 @@
     }();
 
     // 1. 实例化对象
-    var myChart = echarts.init(document.querySelector(".divergence .chart1"));
+    var myChart = echarts.init(document.querySelector("#divergenceChart1"));
     // 2.指定配置
     var option = {
 
         color: [{
-
                 colorStops: [{
                     offset: 0,
                     color: '#F9860C' // 0% 处的颜色
@@ -34,11 +35,9 @@
                     offset: 1,
                     color: '#fff' // 100% 处的颜色
                 }],
-
             },
 
             {
-
                 colorStops: [{
                     offset: 0,
                     color: '#07E1F1' // 0% 处的颜色
@@ -50,7 +49,6 @@
             },
 
             {
-
                 colorStops: [{
                     offset: 0,
                     color: '#11F90C' // 0% 处的颜色
@@ -79,7 +77,7 @@
             itemWidth: 15,
             icon: 'rect',
             textStyle: {
-                color: "#fff"
+                color: "#aaa"
             },
             top: "bottom",
         },
@@ -108,7 +106,6 @@
                     color: 'rgba(255,255,255,.3)'
                 }
             },
-            splitNumber: 8,
             splitLine: {
                 show: false
             },
@@ -121,6 +118,7 @@
         },
 
         yAxis: {
+            splitNumber: 8,
             type: "value",
             axisTick: {
                 show: false // 去除刻度线
@@ -133,7 +131,8 @@
             },
             splitLine: {
                 lineStyle: {
-                    color: "#012f4a" // 分割线颜色
+                    color: "#012f4a", // 分割线颜色
+                    opacity: .2
                 }
             }
         },
@@ -158,9 +157,13 @@
     };
 
     myChart.setOption(option);
-    window.addEventListener("resize", function() {
-        myChart.resize();
-    });
+
+    //echarts赋值到src
+    var img1 = document.getElementById('divergenceChart1_img');
+    setTimeout(function() {
+        img1.src = myChart.getDataURL();
+    }, 1000)
+
 })();
 // 数据离散率挖掘2
 (function() {
@@ -185,7 +188,7 @@
     }();
 
     // 1. 实例化对象
-    var myChart = echarts.init(document.querySelector(".divergence .chart2"));
+    var myChart = echarts.init(document.querySelector("#divergenceChart2"));
     // 2.指定配置
     var option = {
 
@@ -243,7 +246,7 @@
             itemWidth: 15,
             icon: 'rect',
             textStyle: {
-                color: "#fff"
+                color: "#aaa"
             },
             top: "bottom",
         },
@@ -286,6 +289,7 @@
 
         yAxis: {
             type: "value",
+            splitNumber: 8,
             axisTick: {
                 show: false // 去除刻度线
             },
@@ -297,7 +301,8 @@
             },
             splitLine: {
                 lineStyle: {
-                    color: "#012f4a" // 分割线颜色
+                    color: "#012f4a", // 分割线颜色
+                    opacity: .2
                 }
             }
         },
@@ -322,9 +327,12 @@
     };
 
     myChart.setOption(option);
-    window.addEventListener("resize", function() {
-        myChart.resize();
-    });
+
+    //echarts赋值到src
+    var img1 = document.getElementById('divergenceChart2_img');
+    setTimeout(function() {
+        img1.src = myChart.getDataURL();
+    }, 1000)
 })();
 
 // 数据离散率挖掘3
@@ -350,7 +358,7 @@
     }();
 
     // 1. 实例化对象
-    var myChart = echarts.init(document.querySelector(".divergence .chart3"));
+    var myChart = echarts.init(document.querySelector("#divergenceChart3"));
     // 2.指定配置
     var option = {
 
@@ -408,7 +416,7 @@
             itemWidth: 15,
             icon: 'rect',
             textStyle: {
-                color: "#fff"
+                color: "#aaa"
             },
             top: "bottom",
         },
@@ -462,7 +470,8 @@
             },
             splitLine: {
                 lineStyle: {
-                    color: "#012f4a" // 分割线颜色
+                    color: "#012f4a", // 分割线颜色
+                    opacity: .2
                 }
             }
         },
@@ -487,9 +496,11 @@
     };
 
     myChart.setOption(option);
-    window.addEventListener("resize", function() {
-        myChart.resize();
-    });
+    //echarts赋值到src
+    var img1 = document.getElementById('divergenceChart3_img');
+    setTimeout(function() {
+        img1.src = myChart.getDataURL();
+    }, 1000)
 })();
 
 // 数据离散率挖掘4
@@ -515,7 +526,7 @@
     }();
 
     // 1. 实例化对象
-    var myChart = echarts.init(document.querySelector(".divergence .chart4"));
+    var myChart = echarts.init(document.querySelector("#divergenceChart4"));
     // 2.指定配置
     var option = {
 
@@ -573,7 +584,7 @@
             itemWidth: 15,
             icon: 'rect',
             textStyle: {
-                color: "#fff"
+                color: "#aaa"
             },
             top: "bottom",
         },
@@ -627,7 +638,8 @@
             },
             splitLine: {
                 lineStyle: {
-                    color: "#012f4a" // 分割线颜色
+                    color: "#012f4a", // 分割线颜色
+                    opacity: .2
                 }
             }
         },
@@ -652,12 +664,14 @@
     };
 
     myChart.setOption(option);
-    window.addEventListener("resize", function() {
-        myChart.resize();
-    });
+    //echarts赋值到src
+    var img1 = document.getElementById('divergenceChart4_img');
+    setTimeout(function() {
+        img1.src = myChart.getDataURL();
+    }, 1000)
 })();
 
-// 折线图定制 (电老化分析1)
+// 电老化分析1
 (function() {
 
     var sortData = [{
@@ -680,7 +694,7 @@
     }();
 
     // 1. 实例化对象
-    var myChart = echarts.init(document.querySelector(".oldAnalysis .chart1"));
+    var myChart = echarts.init(document.querySelector("#oldAnalysisChart1"));
     // 2.指定配置
     var option = {
 
@@ -701,7 +715,7 @@
             itemWidth: 15,
             icon: 'rect',
             textStyle: {
-                color: "#fff"
+                color: "#aaa"
             },
             top: "bottom",
         },
@@ -743,7 +757,8 @@
             },
             splitLine: {
                 lineStyle: {
-                    color: "#012f4a" // 分割线颜色
+                    color: "#012f4a", // 分割线颜色
+                    opacity: .2
                 }
             }
         },
@@ -808,12 +823,14 @@
     };
 
     myChart.setOption(option);
-    window.addEventListener("resize", function() {
-        myChart.resize();
-    });
+    var img1 = document.getElementById('oldAnalysisChart1_img');
+    setTimeout(function() {
+        img1.src = myChart.getDataURL();
+    }, 1000)
 
 })();
-// 折线图定制 (电老化分析2)
+
+// 电老化分析2
 (function() {
 
     var sortData = [{
@@ -834,7 +851,7 @@
     }();
 
     // 1. 实例化对象
-    var myChart = echarts.init(document.querySelector(".oldAnalysis .chart2"));
+    var myChart = echarts.init(document.querySelector("#oldAnalysisChart2"));
     // 2.指定配置
     var option = {
 
@@ -855,7 +872,7 @@
             itemWidth: 15,
             icon: 'rect',
             textStyle: {
-                color: "#fff"
+                color: "#aaa"
             },
             top: "bottom",
         },
@@ -897,7 +914,8 @@
             },
             splitLine: {
                 lineStyle: {
-                    color: "#012f4a" // 分割线颜色
+                    color: "#012f4a", // 分割线颜色
+                    opacity: .2
                 }
             }
         },
@@ -962,13 +980,14 @@
     };
 
     myChart.setOption(option);
-    window.addEventListener("resize", function() {
-        myChart.resize();
-    });
+    var img1 = document.getElementById('oldAnalysisChart2_img');
+    setTimeout(function() {
+        img1.src = myChart.getDataURL();
+    }, 1000)
 })();
 
 
-// 折线图定制 (热老化分析)
+// 热老化分析
 (function() {
 
     var sortData = [{
@@ -989,7 +1008,7 @@
     }();
 
     // 1. 实例化对象
-    var myChart = echarts.init(document.querySelector(".hotAnalysis .chart1"));
+    var myChart = echarts.init(document.querySelector("#hotAnalysisChart1"));
     // 2.指定配置
     var option = {
 
@@ -1010,7 +1029,7 @@
             itemWidth: 15,
             icon: 'rect',
             textStyle: {
-                color: "#fff"
+                color: "#aaa"
             },
             top: "bottom",
         },
@@ -1052,7 +1071,8 @@
             },
             splitLine: {
                 lineStyle: {
-                    color: "#012f4a" // 分割线颜色
+                    color: "#012f4a", // 分割线颜色
+                    opacity: .2
                 }
             }
         },
@@ -1141,9 +1161,56 @@
     };
 
     myChart.setOption(option);
-    window.addEventListener("resize", function() {
-        myChart.resize();
-    });
+    var img1 = document.getElementById('hotAnalysisChart1_img');
+    setTimeout(function() {
+        img1.src = myChart.getDataURL();
+    }, 1000)
+
+
+})();
 
 
-})();
+// 打印
+(function() {
+
+    $("#btnPrint").click(function() {
+        print_detail()
+    });
+
+    var print_detail = function() {
+
+        //打印前echarts图表转换成图片 start 
+        $('#divergenceChart1_img,#divergenceChart2_img,#divergenceChart3_img,#divergenceChart4_img').show()
+        $('#divergenceChart1,#divergenceChart2,#divergenceChart3,#divergenceChart4').hide()
+        $('#oldAnalysisChart1_img,#oldAnalysisChart2_img').show()
+        $('#oldAnalysisChart1,#oldAnalysisChart2').hide()
+        $('#hotAnalysisChart1_img').show()
+        $('#hotAnalysisChart1').hide()
+            //  end
+
+        var div1_label1 = document.getElementById('printArea').innerHTML;
+        var hkey_key;
+        var hkey_root = 'HKEY_CURRENT_USER';
+        var hkey_path = '\\Software\\Micorsoft\\Internet Explorer\\PageSetup\\';
+        var print_win = window.open('打印窗口', '_blank');
+        var div = document.createElement('div');
+        div.setAttribute('width', '100%');
+        div.setAttribute('height', '100%');
+        var div_print = document.createElement('div');
+        div_print.setAttribute('style', 'width:595px;height:842px;padding:50px 20px;margin:0px auto 0px auto');
+        div_print.innerHTML = div1_label1;
+        div.appendChild(div_print);
+
+        print_win.document.write(div.innerHTML);
+        print_win.document.close();
+        try {
+            var RegWsh = new ActiveXObject('WScript.Shell');
+            hkey_key = 'header';
+            RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '');
+            hkey_key = 'footer';
+            RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '');
+        } catch (e) {}
+        print_win.print();
+        print_win.close();
+    }
+})()

js/exporting.js

@@ -1,37 +0,0 @@
-/*
- Highcharts JS v7.1.2 (2019-06-03)
-
- Exporting module
-
- (c) 2010-2019 Torstein Honsi
-
- License: www.highcharts.com/license
-*/
-(function(f){"object"===typeof module&&module.exports?(f["default"]=f,module.exports=f):"function"===typeof define&&define.amd?define("highcharts/modules/exporting",["highcharts"],function(h){f(h);f.Highcharts=h;return f}):f("undefined"!==typeof Highcharts?Highcharts:void 0)})(function(f){function h(c,C,f,p){c.hasOwnProperty(C)||(c[C]=p.apply(null,f))}f=f?f._modules:{};h(f,"modules/full-screen.src.js",[f["parts/Globals.js"]],function(c){c.FullScreen=function(c){this.init(c.parentNode)};c.FullScreen.prototype=
-{init:function(c){c.requestFullscreen?c.requestFullscreen():c.mozRequestFullScreen?c.mozRequestFullScreen():c.webkitRequestFullscreen?c.webkitRequestFullscreen():c.msRequestFullscreen&&c.msRequestFullscreen()}}});h(f,"mixins/navigation.js",[],function(){return{initUpdate:function(c){c.navigation||(c.navigation={updates:[],update:function(c,f){this.updates.forEach(function(p){p.update.call(p.context,c,f)})}})},addUpdate:function(c,f){f.navigation||this.initUpdate(f);f.navigation.updates.push({update:c,
-context:f})}}});h(f,"modules/exporting.src.js",[f["parts/Globals.js"],f["mixins/navigation.js"]],function(c,f){var h=c.defaultOptions,p=c.doc,A=c.Chart,r=c.addEvent,C=c.removeEvent,D=c.fireEvent,w=c.createElement,E=c.discardElement,t=c.css,n=c.merge,q=c.pick,F=c.objectEach,y=c.extend,J=c.isTouchDevice,z=c.win,H=z.navigator.userAgent,G=c.SVGRenderer,I=c.Renderer.prototype.symbols,K=/Edge\/|Trident\/|MSIE /.test(H),L=/firefox/i.test(H);y(h.lang,{viewFullscreen:"View in full screen",printChart:"Print chart",
-downloadPNG:"Download PNG image",downloadJPEG:"Download JPEG image",downloadPDF:"Download PDF document",downloadSVG:"Download SVG vector image",contextButtonTitle:"Chart context menu"});h.navigation||(h.navigation={});n(!0,h.navigation,{buttonOptions:{theme:{},symbolSize:14,symbolX:12.5,symbolY:10.5,align:"right",buttonSpacing:3,height:22,verticalAlign:"top",width:24}});n(!0,h.navigation,{menuStyle:{border:"1px solid #999999",background:"#ffffff",padding:"5px 0"},menuItemStyle:{padding:"0.5em 1em",
-color:"#333333",background:"none",fontSize:J?"14px":"11px",transition:"background 250ms, color 250ms"},menuItemHoverStyle:{background:"#335cad",color:"#ffffff"},buttonOptions:{symbolFill:"#666666",symbolStroke:"#666666",symbolStrokeWidth:3,theme:{padding:5}}});h.exporting={type:"image/png",url:"https://export.highcharts.com/",printMaxWidth:780,scale:2,buttons:{contextButton:{className:"highcharts-contextbutton",menuClassName:"highcharts-contextmenu",symbol:"menu",titleKey:"contextButtonTitle",menuItems:"viewFullscreen printChart separator downloadPNG downloadJPEG downloadPDF downloadSVG".split(" ")}},
-menuItemDefinitions:{viewFullscreen:{textKey:"viewFullscreen",onclick:function(){this.fullscreen=new c.FullScreen(this.container)}},printChart:{textKey:"printChart",onclick:function(){this.print()}},separator:{separator:!0},downloadPNG:{textKey:"downloadPNG",onclick:function(){this.exportChart()}},downloadJPEG:{textKey:"downloadJPEG",onclick:function(){this.exportChart({type:"image/jpeg"})}},downloadPDF:{textKey:"downloadPDF",onclick:function(){this.exportChart({type:"application/pdf"})}},downloadSVG:{textKey:"downloadSVG",
-onclick:function(){this.exportChart({type:"image/svg+xml"})}}}};c.post=function(b,a,c){var d=w("form",n({method:"post",action:b,enctype:"multipart/form-data"},c),{display:"none"},p.body);F(a,function(a,b){w("input",{type:"hidden",name:b,value:a},null,d)});d.submit();E(d)};y(A.prototype,{sanitizeSVG:function(b,a){var c=b.indexOf("\x3c/svg\x3e")+6,d=b.substr(c);b=b.substr(0,c);a&&a.exporting&&a.exporting.allowHTML&&d&&(d='\x3cforeignObject x\x3d"0" y\x3d"0" width\x3d"'+a.chart.width+'" height\x3d"'+
-a.chart.height+'"\x3e\x3cbody xmlns\x3d"http://www.w3.org/1999/xhtml"\x3e'+d+"\x3c/body\x3e\x3c/foreignObject\x3e",b=b.replace("\x3c/svg\x3e",d+"\x3c/svg\x3e"));b=b.replace(/zIndex="[^"]+"/g,"").replace(/symbolName="[^"]+"/g,"").replace(/jQuery[0-9]+="[^"]+"/g,"").replace(/url\(("|&quot;)(\S+)("|&quot;)\)/g,"url($2)").replace(/url\([^#]+#/g,"url(#").replace(/<svg /,'\x3csvg xmlns:xlink\x3d"http://www.w3.org/1999/xlink" ').replace(/ (|NS[0-9]+\:)href=/g," xlink:href\x3d").replace(/\n/," ").replace(/(fill|stroke)="rgba\(([ 0-9]+,[ 0-9]+,[ 0-9]+),([ 0-9\.]+)\)"/g,
-'$1\x3d"rgb($2)" $1-opacity\x3d"$3"').replace(/&nbsp;/g,"\u00a0").replace(/&shy;/g,"\u00ad");this.ieSanitizeSVG&&(b=this.ieSanitizeSVG(b));return b},getChartHTML:function(){this.styledMode&&this.inlineStyles();return this.container.innerHTML},getSVG:function(b){var a,u,d,f,m,k=n(this.options,b);k.plotOptions=n(this.userOptions.plotOptions,b&&b.plotOptions);u=w("div",null,{position:"absolute",top:"-9999em",width:this.chartWidth+"px",height:this.chartHeight+"px"},p.body);d=this.renderTo.style.width;
-m=this.renderTo.style.height;d=k.exporting.sourceWidth||k.chart.width||/px$/.test(d)&&parseInt(d,10)||(k.isGantt?800:600);m=k.exporting.sourceHeight||k.chart.height||/px$/.test(m)&&parseInt(m,10)||400;y(k.chart,{animation:!1,renderTo:u,forExport:!0,renderer:"SVGRenderer",width:d,height:m});k.exporting.enabled=!1;delete k.data;k.series=[];this.series.forEach(function(a){f=n(a.userOptions,{animation:!1,enableMouseTracking:!1,showCheckbox:!1,visible:a.visible});f.isInternal||k.series.push(f)});this.axes.forEach(function(a){a.userOptions.internalKey||
-(a.userOptions.internalKey=c.uniqueKey())});a=new c.Chart(k,this.callback);b&&["xAxis","yAxis","series"].forEach(function(d){var c={};b[d]&&(c[d]=b[d],a.update(c))});this.axes.forEach(function(b){var d=c.find(a.axes,function(a){return a.options.internalKey===b.userOptions.internalKey}),e=b.getExtremes(),u=e.userMin,e=e.userMax;d&&(void 0!==u&&u!==d.min||void 0!==e&&e!==d.max)&&d.setExtremes(u,e,!0,!1)});d=a.getChartHTML();D(this,"getSVG",{chartCopy:a});d=this.sanitizeSVG(d,k);k=null;a.destroy();E(u);
-return d},getSVGForExport:function(b,a){var c=this.options.exporting;return this.getSVG(n({chart:{borderRadius:0}},c.chartOptions,a,{exporting:{sourceWidth:b&&b.sourceWidth||c.sourceWidth,sourceHeight:b&&b.sourceHeight||c.sourceHeight}}))},getFilename:function(){var b=this.userOptions.title&&this.userOptions.title.text,a=this.options.exporting.filename;if(a)return a;"string"===typeof b&&(a=b.toLowerCase().replace(/<\/?[^>]+(>|$)/g,"").replace(/[\s_]+/g,"-").replace(/[^a-z0-9\-]/g,"").replace(/^[\-]+/g,
-"").replace(/[\-]+/g,"-").substr(0,24).replace(/[\-]+$/g,""));if(!a||5>a.length)a="chart";return a},exportChart:function(b,a){a=this.getSVGForExport(b,a);b=n(this.options.exporting,b);c.post(b.url,{filename:b.filename||this.getFilename(),type:b.type,width:b.width||0,scale:b.scale,svg:a},b.formAttributes)},print:function(){function b(b){(a.fixedDiv?[a.fixedDiv,a.scrollingContainer]:[a.container]).forEach(function(a){b.appendChild(a)})}var a=this,c=[],d=p.body,f=d.childNodes,m=a.options.exporting.printMaxWidth,
-k,e;if(!a.isPrinting){a.isPrinting=!0;a.pointer.reset(null,0);D(a,"beforePrint");if(e=m&&a.chartWidth>m)k=[a.options.chart.width,void 0,!1],a.setSize(m,void 0,!1);[].forEach.call(f,function(a,b){1===a.nodeType&&(c[b]=a.style.display,a.style.display="none")});b(d);setTimeout(function(){z.focus();z.print();setTimeout(function(){b(a.renderTo);[].forEach.call(f,function(a,b){1===a.nodeType&&(a.style.display=c[b])});a.isPrinting=!1;e&&a.setSize.apply(a,k);D(a,"afterPrint")},1E3)},1)}},contextMenu:function(b,
-a,u,d,f,m,k){var e=this,x=e.options.navigation,l=e.chartWidth,v=e.chartHeight,h="cache-"+b,g=e[h],B=Math.max(f,m),n;g||(e.exportContextMenu=e[h]=g=w("div",{className:b},{position:"absolute",zIndex:1E3,padding:B+"px",pointerEvents:"auto"},e.fixedDiv||e.container),n=w("div",{className:"highcharts-menu"},null,g),e.styledMode||t(n,y({MozBoxShadow:"3px 3px 10px #888",WebkitBoxShadow:"3px 3px 10px #888",boxShadow:"3px 3px 10px #888"},x.menuStyle)),g.hideMenu=function(){t(g,{display:"none"});k&&k.setState(0);
-e.openMenu=!1;t(e.renderTo,{overflow:"hidden"});c.clearTimeout(g.hideTimer);D(e,"exportMenuHidden")},e.exportEvents.push(r(g,"mouseleave",function(){g.hideTimer=setTimeout(g.hideMenu,500)}),r(g,"mouseenter",function(){c.clearTimeout(g.hideTimer)}),r(p,"mouseup",function(a){e.pointer.inClass(a.target,b)||g.hideMenu()}),r(g,"click",function(){e.openMenu&&g.hideMenu()})),a.forEach(function(a){"string"===typeof a&&(a=e.options.exporting.menuItemDefinitions[a]);if(c.isObject(a,!0)){var b;a.separator?b=
-w("hr",null,null,n):(b=w("div",{className:"highcharts-menu-item",onclick:function(b){b&&b.stopPropagation();g.hideMenu();a.onclick&&a.onclick.apply(e,arguments)},innerHTML:a.text||e.options.lang[a.textKey]},null,n),e.styledMode||(b.onmouseover=function(){t(this,x.menuItemHoverStyle)},b.onmouseout=function(){t(this,x.menuItemStyle)},t(b,y({cursor:"pointer"},x.menuItemStyle))));e.exportDivElements.push(b)}}),e.exportDivElements.push(n,g),e.exportMenuWidth=g.offsetWidth,e.exportMenuHeight=g.offsetHeight);
-a={display:"block"};u+e.exportMenuWidth>l?a.right=l-u-f-B+"px":a.left=u-B+"px";d+m+e.exportMenuHeight>v&&"top"!==k.alignOptions.verticalAlign?a.bottom=v-d-B+"px":a.top=d+m-B+"px";t(g,a);t(e.renderTo,{overflow:""});e.openMenu=!0},addButton:function(b){var a=this,c=a.renderer,d=n(a.options.navigation.buttonOptions,b),f=d.onclick,m=d.menuItems,k,e,h=d.symbolSize||12;a.btnCount||(a.btnCount=0);a.exportDivElements||(a.exportDivElements=[],a.exportSVGElements=[]);if(!1!==d.enabled){var l=d.theme,v=l.states,
-p=v&&v.hover,v=v&&v.select,g;a.styledMode||(l.fill=q(l.fill,"#ffffff"),l.stroke=q(l.stroke,"none"));delete l.states;f?g=function(b){b&&b.stopPropagation();f.call(a,b)}:m&&(g=function(b){b&&b.stopPropagation();a.contextMenu(e.menuClassName,m,e.translateX,e.translateY,e.width,e.height,e);e.setState(2)});d.text&&d.symbol?l.paddingLeft=q(l.paddingLeft,25):d.text||y(l,{width:d.width,height:d.height,padding:0});a.styledMode||(l["stroke-linecap"]="round",l.fill=q(l.fill,"#ffffff"),l.stroke=q(l.stroke,"none"));
-e=c.button(d.text,0,0,g,l,p,v).addClass(b.className).attr({title:q(a.options.lang[d._titleKey||d.titleKey],"")});e.menuClassName=b.menuClassName||"highcharts-menu-"+a.btnCount++;d.symbol&&(k=c.symbol(d.symbol,d.symbolX-h/2,d.symbolY-h/2,h,h,{width:h,height:h}).addClass("highcharts-button-symbol").attr({zIndex:1}).add(e),a.styledMode||k.attr({stroke:d.symbolStroke,fill:d.symbolFill,"stroke-width":d.symbolStrokeWidth||1}));e.add(a.exportingGroup).align(y(d,{width:e.width,x:q(d.x,a.buttonOffset)}),!0,
-"spacingBox");a.buttonOffset+=(e.width+d.buttonSpacing)*("right"===d.align?-1:1);a.exportSVGElements.push(e,k)}},destroyExport:function(b){var a=b?b.target:this;b=a.exportSVGElements;var f=a.exportDivElements,d=a.exportEvents,h;b&&(b.forEach(function(b,d){b&&(b.onclick=b.ontouchstart=null,h="cache-"+b.menuClassName,a[h]&&delete a[h],a.exportSVGElements[d]=b.destroy())}),b.length=0);a.exportingGroup&&(a.exportingGroup.destroy(),delete a.exportingGroup);f&&(f.forEach(function(b,d){c.clearTimeout(b.hideTimer);
-C(b,"mouseleave");a.exportDivElements[d]=b.onmouseout=b.onmouseover=b.ontouchstart=b.onclick=null;E(b)}),f.length=0);d&&(d.forEach(function(b){b()}),d.length=0)}});G.prototype.inlineToAttributes="fill stroke strokeLinecap strokeLinejoin strokeWidth textAnchor x y".split(" ");G.prototype.inlineBlacklist=[/-/,/^(clipPath|cssText|d|height|width)$/,/^font$/,/[lL]ogical(Width|Height)$/,/perspective/,/TapHighlightColor/,/^transition/,/^length$/];G.prototype.unstyledElements=["clipPath","defs","desc"];A.prototype.inlineStyles=
-function(){function b(b){return b.replace(/([A-Z])/g,function(b,a){return"-"+a.toLowerCase()})}function a(c){function u(a,g){q=v=!1;if(h){for(r=h.length;r--&&!v;)v=h[r].test(g);q=!v}"transform"===g&&"none"===a&&(q=!0);for(r=f.length;r--&&!q;)q=f[r].test(g)||"function"===typeof a;q||m[g]===a&&"svg"!==c.nodeName||e[c.nodeName][g]===a||(-1!==d.indexOf(g)?c.setAttribute(b(g),a):p+=b(g)+":"+a+";")}var g,m,p="",t,q,v,r;if(1===c.nodeType&&-1===k.indexOf(c.nodeName)){g=z.getComputedStyle(c,null);m="svg"===
-c.nodeName?{}:z.getComputedStyle(c.parentNode,null);e[c.nodeName]||(x=l.getElementsByTagName("svg")[0],t=l.createElementNS(c.namespaceURI,c.nodeName),x.appendChild(t),e[c.nodeName]=n(z.getComputedStyle(t,null)),"text"===c.nodeName&&delete e.text.fill,x.removeChild(t));if(L||K)for(var w in g)u(g[w],w);else F(g,u);p&&(g=c.getAttribute("style"),c.setAttribute("style",(g?g+";":"")+p));"svg"===c.nodeName&&c.setAttribute("stroke-width","1px");"text"!==c.nodeName&&[].forEach.call(c.children||c.childNodes,
-a)}}var c=this.renderer,d=c.inlineToAttributes,f=c.inlineBlacklist,h=c.inlineWhitelist,k=c.unstyledElements,e={},x,l,c=p.createElement("iframe");t(c,{width:"1px",height:"1px",visibility:"hidden"});p.body.appendChild(c);l=c.contentWindow.document;l.open();l.write('\x3csvg xmlns\x3d"http://www.w3.org/2000/svg"\x3e\x3c/svg\x3e');l.close();a(this.container.querySelector("svg"));x.parentNode.removeChild(x)};I.menu=function(b,a,c,d){return["M",b,a+2.5,"L",b+c,a+2.5,"M",b,a+d/2+.5,"L",b+c,a+d/2+.5,"M",b,
-a+d-1.5,"L",b+c,a+d-1.5]};I.menuball=function(b,a,c,d){b=[];d=d/3-2;return b=b.concat(this.circle(c-d,a,d,d),this.circle(c-d,a+d+4,d,d),this.circle(c-d,a+2*(d+4),d,d))};A.prototype.renderExporting=function(){var b=this,a=b.options.exporting,c=a.buttons,d=b.isDirtyExporting||!b.exportSVGElements;b.buttonOffset=0;b.isDirtyExporting&&b.destroyExport();d&&!1!==a.enabled&&(b.exportEvents=[],b.exportingGroup=b.exportingGroup||b.renderer.g("exporting-group").attr({zIndex:3}).add(),F(c,function(a){b.addButton(a)}),
-b.isDirtyExporting=!1);r(b,"destroy",b.destroyExport)};r(A,"init",function(){var b=this;b.exporting={update:function(a,c){b.isDirtyExporting=!0;n(!0,b.options.exporting,a);q(c,!0)&&b.redraw()}};f.addUpdate(function(a,c){b.isDirtyExporting=!0;n(!0,b.options.navigation,a);q(c,!0)&&b.redraw()},b)});A.prototype.callbacks.push(function(b){b.renderExporting();r(b,"redraw",b.renderExporting)})});h(f,"masters/modules/exporting.src.js",[],function(){})});
-//# sourceMappingURL=exporting.js.map

js/jquery.PrintArea.min.js

@@ -1,35 +0,0 @@
-(function($) {
-    var printAreaCount = 0;
-    $.fn.printArea = function() {
-        var ele = $(this);
-        var idPrefix = "printArea_";
-        removePrintArea(idPrefix + printAreaCount);
-        printAreaCount++;
-        var iframeId = idPrefix + printAreaCount;
-        var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';
-        iframe = document.createElement('IFRAME');
-        $(iframe).attr({
-            style: iframeStyle,
-            id: iframeId
-        });
-        document.body.appendChild(iframe);
-        var doc = iframe.contentWindow.document;
-        $(document).find("link").filter(function() {
-            return $(this).attr("rel").toLowerCase() == "stylesheet";
-        }).each(
-            function() {
-                doc.write('<link type="text/css" rel="stylesheet" href="' +
-                    $(this).attr("href") + '" >');
-            });
-        doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html() +
-            '</div>');
-        doc.close();
-        var frameWindow = iframe.contentWindow;
-        frameWindow.close();
-        frameWindow.focus();
-        frameWindow.print();
-    }
-    var removePrintArea = function(id) {
-        $("iframe#" + id).remove();
-    };
-})(jQuery);

js/print.js

@@ -1,124 +0,0 @@
-/* @Print.js
- * DH (http://denghao.me)
- * 2017-7-14
- */
-(function(window, document) {
-    var Print = function(dom, options) {
-        if (!(this instanceof Print)) return new Print(dom, options);
-
-        this.options = this.extend({
-            noPrint: '.no-print',
-            onStart: function() {},
-            onEnd: function() {}
-        }, options);
-
-        if ((typeof dom) === "string") {
-            this.dom = document.querySelector(dom);
-        } else {
-            this.dom = dom;
-        }
-
-        this.init();
-    };
-    Print.prototype = {
-        init: function() {
-            var content = this.getStyle() + this.getHtml();
-            this.writeIframe(content);
-        },
-        extend: function(obj, obj2) {
-            for (var k in obj2) {
-                obj[k] = obj2[k];
-            }
-            return obj;
-        },
-
-        getStyle: function() {
-            var str = "",
-                styles = document.querySelectorAll('style,link');
-            for (var i = 0; i < styles.length; i++) {
-                str += styles[i].outerHTML;
-            }
-            str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
-
-            return str;
-        },
-
-        getHtml: function() {
-            var inputs = document.querySelectorAll('input');
-            var textareas = document.querySelectorAll('textarea');
-            var selects = document.querySelectorAll('select');
-
-            for (var k in inputs) {
-                if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
-                    if (inputs[k].checked == true) {
-                        inputs[k].setAttribute('checked', "checked")
-                    } else {
-                        inputs[k].removeAttribute('checked')
-                    }
-                } else if (inputs[k].type == "text") {
-                    inputs[k].setAttribute('value', inputs[k].value)
-                }
-            }
-
-            for (var k2 in textareas) {
-                if (textareas[k2].type == 'textarea') {
-                    textareas[k2].innerHTML = textareas[k2].value
-                }
-            }
-
-            for (var k3 in selects) {
-                if (selects[k3].type == 'select-one') {
-                    var child = selects[k3].children;
-                    for (var i in child) {
-                        if (child[i].tagName == 'OPTION') {
-                            if (child[i].selected == true) {
-                                child[i].setAttribute('selected', "selected")
-                            } else {
-                                child[i].removeAttribute('selected')
-                            }
-                        }
-                    }
-                }
-            }
-
-            return this.dom.outerHTML;
-        },
-
-        writeIframe: function(content) {
-            var w, doc, iframe = document.createElement('iframe'),
-                f = document.body.appendChild(iframe);
-            iframe.id = "myIframe";
-            iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
-
-            w = f.contentWindow || f.contentDocument;
-            doc = f.contentDocument || f.contentWindow.document;
-            doc.open();
-            doc.write(content);
-            doc.close();
-            this.toPrint(w, function() {
-                document.body.removeChild(iframe)
-            });
-        },
-
-        toPrint: function(w, cb) {
-            var _this = this;
-            w.onload = function() {
-                try {
-                    setTimeout(function() {
-                        w.focus();
-                        typeof _this.options.onStart === 'function' && _this.options.onStart();
-                        if (!w.document.execCommand('print', false, null)) {
-                            w.print();
-                        }
-                        typeof _this.options.onEnd === 'function' && _this.options.onEnd();
-                        w.close();
-                        cb && cb()
-                    });
-                } catch (err) {
-                    console.log('err', err);
-                }
-            }
-        }
-    };
-    window.Print = Print;
-}(window, document));

js/water.js

@@ -136,47 +136,16 @@
         // 准备待返回的配置项，把准备好的 legendData、series 传入。
         let option = {
 
-            // globe:{
-            //     baseTexture: "../img/world.jpg",
-            //     heightTexture: "../img/world.jpg",
-            //      displacementScale: 0.04,
-            //     environment: "../img/starfield.jpg",
-            //     shading:"realistic",
-            //     realisticMaterial: {
-            //            roughness: 0.9
-            //        },
-            //     postEffect: {
-            //            enable: true
-            //        },
-            //        light: {
-            //            main: {
-            //                intensity: 5,
-            //                shadow: true
-            //            },
-            //            ambientCubemap: {
-            //                texture: "../img/pisa.hdr",
-            //                diffuseIntensity: 0.2
-            //            }
-            //        }
-            //   },
-
-
-
-
             tooltip: {
+                backgroundColor: '#12DFE0',
                 formatter: params => {
                     if (params.seriesName !== 'mouseoutSeries') {
-                        return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}%`;
+                        // return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}%`;
+                        return `${params.seriesName}: ${option.series[params.seriesIndex].pieData.value}%`;
                     }
                 }
             },
-            // legend: {
-            //     data: legendData,
-            //     textStyle: {
-            //         color: '#fff',
-            //         fontSize: 14
-            //     }
-            // },
+
             xAxis3D: {
                 min: -1,
                 max: 1
@@ -191,7 +160,6 @@
             },
             grid3D: {
 
-
                 show: false,
                 boxHeight: 40,
                 top: '-10%',
@@ -303,10 +271,11 @@
         // color: ["#FF9C00", "#0096FF", "#11F90C"], // 通过这个color修改两条线的颜色
         tooltip: {
             trigger: "axis",
-            // backgroundColor: '#12DFE0',
             textStyle: {
                 align: 'left' //图例左对齐
             },
+            backgroundColor: '#12DFE0',
+            formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：2021年3月{b}日'
 
         },
         legend: {
@@ -416,25 +385,16 @@
         backgroundColor: 'transparent',
         color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'],
         tooltip: {
+            backgroundColor: '#12DFE0',
             //提示框组件
             trigger: 'axis',
-            formatter: function(params) {
-                var relVal = params[0].name;
-                for (var i = 0, l = params.length; i < l; i++) {
-                    relVal += '<br/>';
-                    relVal += '<span style="display:inline-block;margin-right:5px;border-radius:2px;width:9px;height:9px;background-color:' + params[i].color + '"></span>';
-                    relVal += params[i].seriesName + ' : ' + params[i].value;
-                }
-                return relVal;
-            },
+            formatter: '{a0}: {c0}<br />{a1}: {c1}<br />楼层：{b}<br />时间：2021年3月',
             axisPointer: {
                 type: 'shadow',
             },
             textStyle: {
-
                 fontStyle: 'normal',
                 fontFamily: '微软雅黑',
-                fontSize: 12,
             },
         },
         grid: {
@@ -562,9 +522,6 @@
         ],
     };
 
-
-
-
     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);
     window.addEventListener("resize", function() {
@@ -612,6 +569,8 @@
             textStyle: {
                 align: 'left' //图例左对齐
             },
+            backgroundColor: '#12DFE0',
+            formatter: '{a0}: {c0}<br />{a1}: {c1}<br />时间：2021年3月{b}日'
         },
         legend: {
             // 如果series 对象有name 值，则 legend可以不用写data
@@ -766,23 +725,11 @@
             textStyle: {
                 align: 'left' //图例左对齐
             },
-            // backgroundColor: '#12DFE0',
-            // formatter: '{a0}: {c0}<br />{b}'
+            backgroundColor: '#12DFE0',
+            formatter: '{a0}: {c0}<br />楼层：{b}<br />时间：2021年3月'
 
         },
-        legend: false
-            // {
-            //     // 如果series 对象有name 值，则 legend可以不用写data
-            //     itemGap: 20,
-            //     itemHeight: 2,
-            //     itemWidth: 15,
-            //     icon: 'rect',
-            //     textStyle: {
-            //         color: "#fff"
-            //     },
-            //     top: "bottom",
-            // }
-            ,
+        legend: false,
         grid: {
             top: "0%",
             left: "1%",
@@ -791,8 +738,6 @@
             show: true, // 显示边框
             borderWidth: '0', //去除边框
             containLabel: false, // 不包含刻度文字在内
-
-
         },
 
         xAxis: {
@@ -862,415 +807,4 @@
     });
 
 
-})();
-
-
-
-
-
-
-
-
-// 饼形图定制
-// 折线图定制
-// (function() {
-//     // 基于准备好的dom，初始化echarts实例
-//     var myChart = echarts.init(document.querySelector(".pie .chart"));
-
-//     option = {
-//         tooltip: {
-//             trigger: "item",
-//             formatter: "{a} <br/>{b}: {c} ({d}%)",
-//             position: function(p) {
-//                 //其中p为当前鼠标的位置
-//                 return [p[0] + 10, p[1] - 10];
-//             }
-//         },
-//         legend: {
-//             top: "90%",
-//             itemWidth: 10,
-//             itemHeight: 10,
-//             data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
-//             textStyle: {
-//                 color: "rgba(255,255,255,.5)",
-//                 fontSize: "12"
-//             }
-//         },
-//         series: [{
-//             name: "年龄分布",
-//             type: "pie",
-//             center: ["50%", "42%"],
-//             radius: ["40%", "60%"],
-//             color: [
-//                 "#065aab",
-//                 "#066eab",
-//                 "#0682ab",
-//                 "#0696ab",
-//                 "#06a0ab",
-//                 "#06b4ab",
-//                 "#06c8ab",
-//                 "#06dcab",
-//                 "#06f0ab"
-//             ],
-//             label: { show: false },
-//             labelLine: { show: false },
-//             data: [
-//                 { value: 1, name: "0岁以下" },
-//                 { value: 4, name: "20-29岁" },
-//                 { value: 2, name: "30-39岁" },
-//                 { value: 2, name: "40-49岁" },
-//                 { value: 1, name: "50岁以上" }
-//             ]
-//         }]
-//     };
-
-//     // 使用刚指定的配置项和数据显示图表。
-//     myChart.setOption(option);
-//     window.addEventListener("resize", function() {
-//         myChart.resize();
-//     });
-
-//     // 点击切换显示数据
-//     $(".line h2").on("click", "a", function() {
-//         // 点击a之后，根据当前的a的索引号，找到对应的yearData的数据
-//         var obj = yearData[$(this).index()];
-//         option.series[0].data = obj.data[0];
-//         option.series[1].data = obj.data[1];
-//         // 重新渲染数据
-//         myChart.setOption(option);
-//     });
-// })();
-
-
-
-// 折线图 优秀作品
-// (function() {
-//     // 基于准备好的dom，初始化echarts实例
-//     var myChart = echarts.init(document.querySelector(".line1 .chart"));
-
-//     option = {
-//         tooltip: {
-//             trigger: "axis",
-//             axisPointer: {
-//                 lineStyle: {
-//                     color: "#dddc6b"
-//                 }
-//             }
-//         },
-//         legend: {
-//             top: "0%",
-//             textStyle: {
-//                 color: "rgba(255,255,255,.5)",
-//                 fontSize: "12"
-//             }
-//         },
-//         grid: {
-//             left: "10",
-//             top: "30",
-//             right: "10",
-//             bottom: "10",
-//             containLabel: true
-//         },
-
-//         xAxis: [{
-//                 type: "category",
-//                 boundaryGap: false,
-//                 axisLabel: {
-//                     textStyle: {
-//                         color: "rgba(255,255,255,.6)",
-//                         fontSize: 12
-//                     }
-//                 },
-//                 axisLine: {
-//                     lineStyle: {
-//                         color: "rgba(255,255,255,.2)"
-//                     }
-//                 },
-
-//                 data: [
-//                     "01",
-//                     "02",
-//                     "03",
-//                     "04",
-//                     "05",
-//                     "06",
-//                     "07",
-//                     "08",
-//                     "09",
-//                     "11",
-//                     "12",
-//                     "13",
-//                     "14",
-//                     "15",
-//                     "16",
-//                     "17",
-//                     "18",
-//                     "19",
-//                     "20",
-//                     "21",
-//                     "22",
-//                     "23",
-//                     "24",
-//                     "25",
-//                     "26",
-//                     "27",
-//                     "28",
-//                     "29",
-//                     "30"
-//                 ]
-//             },
-//             {
-//                 axisPointer: { show: false },
-//                 axisLine: { show: false },
-//                 position: "bottom",
-//                 offset: 20
-//             }
-//         ],
-
-//         yAxis: [{
-//             type: "value",
-//             axisTick: { show: false },
-//             axisLine: {
-//                 lineStyle: {
-//                     color: "rgba(255,255,255,.1)"
-//                 }
-//             },
-//             axisLabel: {
-//                 textStyle: {
-//                     color: "rgba(255,255,255,.6)",
-//                     fontSize: 12
-//                 }
-//             },
-
-//             splitLine: {
-//                 lineStyle: {
-//                     color: "rgba(255,255,255,.1)"
-//                 }
-//             }
-//         }],
-//         series: [{
-//                 name: "播放量",
-//                 type: "line",
-//                 smooth: true,
-//                 symbol: "circle",
-//                 symbolSize: 5,
-//                 showSymbol: false,
-//                 lineStyle: {
-//                     normal: {
-//                         color: "#0184d5",
-//                         width: 2
-//                     }
-//                 },
-//                 areaStyle: {
-//                     normal: {
-//                         color: new echarts.graphic.LinearGradient(
-//                             0,
-//                             0,
-//                             0,
-//                             1, [{
-//                                     offset: 0,
-//                                     color: "rgba(1, 132, 213, 0.4)"
-//                                 },
-//                                 {
-//                                     offset: 0.8,
-//                                     color: "rgba(1, 132, 213, 0.1)"
-//                                 }
-//                             ],
-//                             false
-//                         ),
-//                         shadowColor: "rgba(0, 0, 0, 0.1)"
-//                     }
-//                 },
-//                 itemStyle: {
-//                     normal: {
-//                         color: "#0184d5",
-//                         borderColor: "rgba(221, 220, 107, .1)",
-//                         borderWidth: 12
-//                     }
-//                 },
-//                 data: [
-//                     30,
-//                     40,
-//                     30,
-//                     40,
-//                     30,
-//                     40,
-//                     30,
-//                     60,
-//                     20,
-//                     40,
-//                     20,
-//                     40,
-//                     30,
-//                     40,
-//                     30,
-//                     40,
-//                     30,
-//                     40,
-//                     30,
-//                     60,
-//                     20,
-//                     40,
-//                     20,
-//                     40,
-//                     30,
-//                     60,
-//                     20,
-//                     40,
-//                     20,
-//                     40
-//                 ]
-//             },
-//             {
-//                 name: "转发量",
-//                 type: "line",
-//                 smooth: true,
-//                 symbol: "circle",
-//                 symbolSize: 5,
-//                 showSymbol: false,
-//                 lineStyle: {
-//                     normal: {
-//                         color: "#00d887",
-//                         width: 2
-//                     }
-//                 },
-//                 areaStyle: {
-//                     normal: {
-//                         color: new echarts.graphic.LinearGradient(
-//                             0,
-//                             0,
-//                             0,
-//                             1, [{
-//                                     offset: 0,
-//                                     color: "rgba(0, 216, 135, 0.4)"
-//                                 },
-//                                 {
-//                                     offset: 0.8,
-//                                     color: "rgba(0, 216, 135, 0.1)"
-//                                 }
-//                             ],
-//                             false
-//                         ),
-//                         shadowColor: "rgba(0, 0, 0, 0.1)"
-//                     }
-//                 },
-//                 itemStyle: {
-//                     normal: {
-//                         color: "#00d887",
-//                         borderColor: "rgba(221, 220, 107, .1)",
-//                         borderWidth: 12
-//                     }
-//                 },
-//                 data: [
-//                     50,
-//                     30,
-//                     50,
-//                     60,
-//                     10,
-//                     50,
-//                     30,
-//                     50,
-//                     60,
-//                     40,
-//                     60,
-//                     40,
-//                     80,
-//                     30,
-//                     50,
-//                     60,
-//                     10,
-//                     50,
-//                     30,
-//                     70,
-//                     20,
-//                     50,
-//                     10,
-//                     40,
-//                     50,
-//                     30,
-//                     70,
-//                     20,
-//                     50,
-//                     10,
-//                     40
-//                 ]
-//             }
-//         ]
-//     };
-
-//     // 使用刚指定的配置项和数据显示图表。
-//     myChart.setOption(option);
-//     window.addEventListener("resize", function() {
-//         myChart.resize();
-//     });
-// })();
-
-// 点位分布统计模块
-// (function() {
-//     // 1. 实例化对象
-//     var myChart = echarts.init(document.querySelector(".pie1  .chart"));
-//     // 2. 指定配置项和数据
-//     var option = {
-//         legend: {
-//             top: "90%",
-//             itemWidth: 10,
-//             itemHeight: 10,
-//             textStyle: {
-//                 color: "rgba(255,255,255,.5)",
-//                 fontSize: "12"
-//             }
-//         },
-//         tooltip: {
-//             trigger: "item",
-//             formatter: "{a} <br/>{b} : {c} ({d}%)"
-//         },
-//         // 注意颜色写的位置
-//         color: [
-//             "#006cff",
-//             "#60cda0",
-//             "#ed8884",
-//             "#ff9f7f",
-//             "#0096ff",
-//             "#9fe6b8",
-//             "#32c5e9",
-//             "#1d9dff"
-//         ],
-//         series: [{
-//             name: "点位统计",
-//             type: "pie",
-//             // 如果radius是百分比则必须加引号
-//             radius: ["10%", "70%"],
-//             center: ["50%", "42%"],
-//             roseType: "radius",
-//             data: [
-//                 { value: 20, name: "云南" },
-//                 { value: 26, name: "北京" },
-//                 { value: 24, name: "山东" },
-//                 { value: 25, name: "河北" },
-//                 { value: 20, name: "江苏" },
-//                 { value: 25, name: "浙江" },
-//                 { value: 30, name: "深圳" },
-//                 { value: 42, name: "广东" }
-//             ],
-//             // 修饰饼形图文字相关的样式 label对象
-//             label: {
-//                 fontSize: 10
-//             },
-//             // 修饰引导线样式
-//             labelLine: {
-//                 // 连接到图形的线长度
-//                 length: 10,
-//                 // 连接到文字的线长度
-//                 length2: 10
-//             }
-//         }]
-//     };
-
-//     // 3. 配置项和数据给我们的实例化对象
-//     myChart.setOption(option);
-//     // 4. 当我们浏览器缩放的时候，图表也等比例缩放
-//     window.addEventListener("resize", function() {
-//         // 让我们的图表调用 resize这个方法
-//         myChart.resize();
-//     });
-// })();
+})();

js/waterInner.js

@@ -0,0 +1,775 @@
+/* 
+     水系统打印页面echarts配置 及打印
+*/
+
+
+// 数据离散率挖掘1
+(function() {
+    var sortData = [{
+
+        data: [
+            [30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 200, 180, 79, 82, 64, 43, 60, 19, 82, 64, 43, 60, 19, 34],
+            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
+            [400, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
+        ]
+    }, ];
+
+    var xData = function() {
+        var data = [];
+        for (var i = 1; i < 31; i++) {
+            data.push(i);
+        }
+        return data;
+    }();
+
+    // 1. 实例化对象
+    var myChart = echarts.init(document.querySelector("#divergenceChart1"));
+    // 2.指定配置
+    var option = {
+
+        color: [{
+
+                colorStops: [{
+                    offset: 0,
+                    color: '#F9860C' // 0% 处的颜色
+                }, {
+                    offset: 1,
+                    color: '#fff' // 100% 处的颜色
+                }],
+
+            },
+
+            {
+                colorStops: [{
+                    offset: 0,
+                    color: '#07E1F1' // 0% 处的颜色
+                }, {
+                    offset: 1,
+                    color: '#0456CB' // 100% 处的颜色
+                }],
+
+            },
+
+            {
+                colorStops: [{
+                    offset: 0,
+                    color: '#11F90C' // 0% 处的颜色
+                }, {
+                    offset: 1,
+                    color: '#3FC713' // 100% 处的颜色
+                }],
+
+            }
+
+        ],
+
+        tooltip: {
+            trigger: "axis",
+            textStyle: {
+                align: 'left' //图例左对齐
+            },
+            backgroundColor: '#12DFE0',
+            formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：2021年3月{b}日'
+
+        },
+        legend: {
+            // 如果series 对象有name 值，则 legend可以不用写data
+            itemGap: 20,
+            itemHeight: 2,
+            itemWidth: 15,
+            icon: 'rect',
+            textStyle: {
+                color: "#aaa"
+            },
+            top: "bottom",
+        },
+        grid: {
+            top: "0%",
+            left: "1%",
+            right: "1%",
+            bottom: "15%",
+            show: true, // 显示边框
+            borderWidth: '0', //去除边框
+            containLabel: true // 包含刻度文字在内
+        },
+
+        xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                color: "#AADDFF" // 文本颜色
+            },
+            axisLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,.3)'
+                }
+            },
+            splitNumber: 8,
+            splitLine: {
+                show: false
+            },
+            splitArea: {
+                show: true,
+                areaStyle: {
+                    color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
+                }
+            }
+        },
+
+        yAxis: {
+            splitNumber: 8,
+            type: "value",
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                show: false // 去除文本
+            },
+            axisLine: {
+                show: false // 去除轴线
+            },
+            splitLine: {
+                lineStyle: {
+                    color: "#012f4a", // 分割线颜色
+                    opacity: .2
+                }
+            }
+        },
+        series: [{
+                symbol: "none",
+                name: "方差",
+                type: "line",
+                data: sortData[0].data[0]
+            },
+            {
+                symbol: "none",
+                name: "标准差",
+                type: "line",
+                data: sortData[0].data[1]
+            }, {
+                symbol: "none",
+                name: "平均值",
+                type: "line",
+                data: sortData[0].data[2]
+            }
+        ]
+    };
+
+    myChart.setOption(option);
+
+    //echarts赋值到src
+    var img1 = document.getElementById('divergenceChart1_img');
+    setTimeout(function() {
+        img1.src = myChart.getDataURL();
+    }, 1000)
+
+})();
+
+
+// 渗漏隐患排查1
+(function() {
+    // 基于准备好的dom，初始化echarts实例
+    var myChart = echarts.init(document.querySelector("#hiddenCheckChart1"));
+    var xData = ['三到四层', '四到五层', '七到八层', '三到四层', '四到五层', '七到八层', '八到九层', '九到十层', '三到四层', '四到五层', '七到八层', '八到九层', '九到十层', '三到四层', '四到五层', '七到八层', '八到九层'];
+
+    var option = {
+        backgroundColor: 'transparent',
+        color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'],
+        tooltip: {
+            //提示框组件
+            trigger: 'axis',
+            formatter: function(params) {
+                var relVal = params[0].name;
+                for (var i = 0, l = params.length; i < l; i++) {
+                    relVal += '<br/>';
+                    relVal += '<span style="display:inline-block;margin-right:5px;border-radius:2px;width:9px;height:9px;background-color:' + params[i].color + '"></span>';
+                    relVal += params[i].seriesName + ' : ' + params[i].value;
+                }
+                return relVal;
+            },
+            axisPointer: {
+                type: 'shadow',
+            },
+            textStyle: {
+
+                fontStyle: 'normal',
+                fontFamily: '微软雅黑',
+                fontSize: 12,
+            },
+        },
+        grid: {
+            left: '0',
+            right: '0',
+            bottom: '40',
+            top: '0',
+            containLabel: true,
+        },
+        legend: {
+            // 如果series 对象有name 值，则 legend可以不用写data
+            itemGap: 20,
+            itemHeight: 2,
+            itemWidth: 15,
+            icon: 'rect',
+            textStyle: {
+                color: "#AAA"
+            },
+            top: "bottom",
+        },
+
+        xAxis: [{
+            type: 'category',
+            //	boundaryGap: true,//坐标轴两边留白
+            data: xData,
+            axisLabel: {
+                interval: 0,
+                rotate: 340,
+                // formatter: function(val) {
+                //     return val.split("").join("\n");
+                // }, //横轴信息文字竖直显示
+                textStyle: {
+                    color: '#AAA',
+                    fontStyle: 'normal',
+                    fontFamily: '微软雅黑',
+                    fontSize: 12,
+                },
+            },
+
+            axisTick: {
+                //坐标轴刻度相关设置。
+                show: false,
+            },
+            axisLine: {
+                //坐标轴轴线相关设置
+
+            },
+            splitLine: {
+                //坐标轴在 grid 区域中的分隔线。
+                show: false,
+            },
+        }, ],
+        yAxis: [{
+            type: 'value',
+
+            axisLabel: false,
+            axisLine: {
+                show: false,
+            },
+            axisTick: {
+                show: false,
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: "#012f4a", // 分割线颜色
+                    opacity: .2
+                }
+            },
+            boundaryGap: ['0', '10%'],
+        }],
+        series: [{
+                name: '正常',
+                type: 'bar',
+                data: [400, 180, 40, 30, 31, 400, 180, 40, 30, 31, 400, 180, 40, 30, 31, 400, 180, 40, 30, 31, 400, 180, 40, 30, 31],
+                barMaxWidth: '11',
+                itemStyle: {
+                    borderColor: "#0096FF",
+                },
+                barGap: '50%',
+            },
+            {
+                name: '实际',
+                type: 'bar',
+                data: [500, 200, 50, 60, 36, 500, 200, 50, 60, 36, 500, 200, 50, 60, 36, 500, 200, 50, 60, 36, 500, 200, 50, 60, 36],
+                barMaxWidth: '11',
+                itemStyle: {
+                    borderColor: "#FF9C00",
+                },
+
+            },
+
+        ],
+    };
+
+    myChart.setOption(option);
+
+    //echarts赋值到src
+    var img1 = document.getElementById('hiddenCheckChart1_img');
+    setTimeout(function() {
+        img1.src = myChart.getDataURL();
+    }, 1000)
+
+})();
+
+
+// 跨设备数据关联1
+(function() {
+
+    var sortData = [{
+        sortName: "喷淋末端与水泵启停关联",
+        data: [
+            // 两个数组是因为有两条线
+            [24, 52, 60, 70, 80, 30, 95, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
+            [40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 85, 80, 75, 70, 65, 60, 55, 50, 45, 40, 70, 80, 75, 70, 65, 60, 55, 50, 45, 40, ]
+        ]
+    }];
+
+    var xData = function() {
+        var data = [];
+        for (var i = 1; i < 31; i++) {
+            data.push(i);
+        }
+        return data;
+    }();
+
+    // 1. 实例化对象
+    var myChart = echarts.init(document.querySelector("#deviceLinkChart1"));
+    // 2.指定配置
+    var option = {
+
+        color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
+        tooltip: {
+            trigger: "axis",
+            textStyle: {
+                align: 'left' //图例左对齐
+            },
+        },
+        legend: {
+            // 如果series 对象有name 值，则 legend可以不用写data
+            itemGap: 20,
+            itemHeight: 2,
+            itemWidth: 15,
+            icon: 'rect',
+            textStyle: {
+                color: "#aaa"
+            },
+            top: "bottom",
+        },
+        grid: {
+            top: "0%",
+            left: "1%",
+            right: "1%",
+            bottom: "15%",
+            show: true, // 显示边框
+            borderWidth: '0', //去除边框
+            containLabel: true // 包含刻度文字在内
+        },
+
+        xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                color: "#AADDFF" // 文本颜色
+            },
+            axisLine: {
+                show: false // 去除轴线
+            }
+        },
+
+        yAxis: {
+            type: "value",
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                show: false // 去除文本
+            },
+            axisLine: {
+                show: false // 去除轴线
+            },
+            lineStyle: {
+                color: "#012f4a", // 分割线颜色
+                opacity: .2
+            }
+        },
+        series: [{
+                symbol: "none",
+                name: "水泵启动",
+                type: "line",
+                smooth: true, // true 可以让我们的折线显示带有弧度
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1, [{
+                                    offset: 0,
+                                    color: "rgba(255,156,0, 0.4)"
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(255,156,0, 0.3)"
+                                }
+                            ],
+                            false
+                        ),
+                        shadowColor: "rgba(0, 0, 0, 0.1)"
+                    }
+                },
+
+
+                data: sortData[0].data[0]
+            },
+            {
+                symbol: "none",
+                name: "水泵停止",
+                type: "line",
+                smooth: true,
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1, [{
+                                    offset: 0,
+                                    color: "rgba(0,150,255,0.5)"
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(0,150,255, 0.1)"
+                                }
+                            ],
+                            false
+                        ),
+                        shadowColor: "rgba(0, 0, 0, 0.1)"
+                    }
+                },
+
+                data: sortData[0].data[1]
+            }
+        ]
+    };
+
+    myChart.setOption(option);
+    var img1 = document.getElementById('deviceLinkChart1_img');
+    setTimeout(function() {
+        img1.src = myChart.getDataURL();
+    }, 1000)
+
+})();
+
+// 跨设备数据关联2
+(function() {
+    var sortData = [{
+        sortName: "试验消火栓与屋顶水箱液位关联",
+        data: [
+            // 两个数组是因为有两条线
+            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
+            [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ]
+        ]
+    }];
+
+    var xData = function() {
+        var data = [];
+        for (var i = 1; i < 31; i++) {
+            data.push(i);
+        }
+        return data;
+    }();
+
+    // 1. 实例化对象
+    var myChart = echarts.init(document.querySelector("#deviceLinkChart2"));
+    // 2.指定配置
+    var option = {
+
+        color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
+        tooltip: {
+            trigger: "axis",
+            textStyle: {
+                align: 'left' //图例左对齐
+            },
+        },
+        legend: {
+            // 如果series 对象有name 值，则 legend可以不用写data
+            itemGap: 20,
+            itemHeight: 2,
+            itemWidth: 15,
+            icon: 'rect',
+            textStyle: {
+                color: "#aaa"
+            },
+            top: "bottom",
+        },
+        grid: {
+            top: "0%",
+            left: "1%",
+            right: "1%",
+            bottom: "15%",
+            show: true, // 显示边框
+            borderWidth: '0', //去除边框
+            containLabel: true // 包含刻度文字在内
+        },
+
+        xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                color: "#AADDFF" // 文本颜色
+            },
+            axisLine: {
+                show: false // 去除轴线
+            }
+        },
+
+        yAxis: {
+            type: "value",
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                show: false // 去除文本
+            },
+            axisLine: {
+                show: false // 去除轴线
+            },
+            splitLine: {
+                lineStyle: {
+                    color: "#012f4a", // 分割线颜色
+                    opacity: .2
+                }
+            }
+        },
+        series: [{
+                symbol: "none",
+                name: "水泵启动",
+                type: "line",
+                smooth: true, // true 可以让我们的折线显示带有弧度
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1, [{
+                                    offset: 0,
+                                    color: "rgba(255,156,0, 0.4)"
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(255,156,0, 0.3)"
+                                }
+                            ],
+                            false
+                        ),
+                        shadowColor: "rgba(0, 0, 0, 0.1)"
+                    }
+                },
+
+
+                data: sortData[0].data[0]
+            },
+            {
+                symbol: "none",
+                name: "水泵停止",
+                type: "line",
+                smooth: true,
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1, [{
+                                    offset: 0,
+                                    color: "rgba(0,150,255,0.5)"
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(0,150,255, 0.1)"
+                                }
+                            ],
+                            false
+                        ),
+                        shadowColor: "rgba(0, 0, 0, 0.1)"
+                    }
+                },
+
+                data: sortData[0].data[1]
+            }
+        ]
+    };
+
+    myChart.setOption(option);
+    var img1 = document.getElementById('deviceLinkChart2_img');
+    setTimeout(function() {
+        img1.src = myChart.getDataURL();
+    }, 1000)
+})();
+
+
+// 数据波动关联
+(function() {
+
+    var sortData = [{
+        data: [
+            [30, 70, 100, 120, 130, 190, 200, 230, 120, 100, 90, 80, 59, 30],
+        ]
+    }];
+
+    var xData = ['一到二层', '二到三层', '三到四层', '四到五层', '五到六层', '六到七层', '七到八层', '八到九层', '九到十层', '十到十一层', '十一到十二层', '十二到十三层']
+        // 1. 实例化对象
+    var myChart = echarts.init(document.querySelector("#dataChangeChart1"));
+    // 2.指定配置
+    var option = {
+
+        color: ["#FE92B3"], // 通过这个color修改三条线的颜色
+        tooltip: {
+            trigger: "axis",
+            textStyle: {
+                align: 'left' //图例左对齐
+            },
+            // backgroundColor: '#12DFE0',
+            // formatter: '{a0}: {c0}<br />{b}'
+
+        },
+        legend: false,
+        grid: {
+            top: "0%",
+            left: "1%",
+            right: "1%",
+            bottom: "1%",
+            show: true, // 显示边框
+            borderWidth: '0', //去除边框
+            containLabel: true, // 不包含刻度文字在内
+        },
+
+        xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                color: "#AADDFF", // 文本颜色
+                interval: 0,
+                rotate: 340,
+                // formatter: function(val) {
+                //     return val.split("").join("\n");
+                // }, //横轴信息文字竖直显示
+            },
+            axisLine: {
+                show: false // 去除轴线
+            }
+        },
+
+        yAxis: {
+            splitNumber: 8,
+            type: "value",
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                show: false // 去除文本
+            },
+            axisLine: {
+                show: false // 去除轴线
+            },
+            splitLine: {
+                lineStyle: {
+                    color: "#012f4a", // 分割线颜色
+                    opacity: .2
+                }
+            }
+        },
+        series: [{
+            symbol: "none",
+            name: "异常水压值",
+            type: "line",
+            smooth: true,
+            areaStyle: {
+                normal: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1, [{
+                                offset: 0,
+                                color: "rgba(255,147,180,.6)"
+                            },
+                            {
+                                offset: 0.8,
+                                color: "rgba(255,147,180, 0.4)"
+                            }
+                        ],
+                        false
+                    ),
+                }
+            },
+
+            data: sortData[0].data[0]
+        }]
+    };
+
+    myChart.setOption(option);
+    var img1 = document.getElementById('dataChangeChart1_img');
+    setTimeout(function() {
+        img1.src = myChart.getDataURL();
+    }, 1000)
+
+
+})();
+
+
+// 打印
+(function() {
+
+    $("#btnPrint").click(function() {
+        print_detail()
+    });
+
+    var print_detail = function() {
+
+        //打印前echarts图表转换成图片 start   
+        $('#divergenceChart1_img').show()
+        $('#divergenceChart1').hide()
+
+        $('#hiddenCheckChart1_img').show()
+        $('#hiddenCheckChart1').hide()
+
+        $('#deviceLinkChart1_img,#deviceLinkChart2_img').show()
+        $('#deviceLinkChart1,#deviceLinkChart2').hide()
+
+        $('#dataChangeChart1_img').show()
+        $('#dataChangeChart1').hide()
+            //  end
+
+        var div1_label1 = document.getElementById('printArea').innerHTML;
+        var hkey_key;
+        var hkey_root = 'HKEY_CURRENT_USER';
+        var hkey_path = '\\Software\\Micorsoft\\Internet Explorer\\PageSetup\\';
+        var print_win = window.open('打印窗口', '_blank');
+        var div = document.createElement('div');
+        div.setAttribute('width', '100%');
+        div.setAttribute('height', '100%');
+        var div_print = document.createElement('div');
+        div_print.setAttribute('style', 'width:595px;height:842px;padding:50px 20px;margin:0px auto 0px auto');
+        div_print.innerHTML = div1_label1;
+        div.appendChild(div_print);
+
+        print_win.document.write(div.innerHTML);
+        print_win.document.close();
+        try {
+            var RegWsh = new ActiveXObject('WScript.Shell');
+            hkey_key = 'header';
+            RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '');
+            hkey_key = 'footer';
+            RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '');
+        } catch (e) {}
+        print_win.print();
+        print_win.close();
+    }
+})()

waterIndex.html

@@ -12,154 +12,339 @@
 
 <body>
 
-    <header>
-        <h1>分析报告及数据可视化</h1>
-        <div class="filterSec">
-            <span>建筑</span>
-            <select name="">
-                <option value="">请选择</option>
-                <option value="1">建筑一</option>
-                <option value="2">建筑二</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>导出</text>
-            </a>
-        </div>
+    <div class="exportBox">
+        <div class="exportContainer" id="printArea">
+
+            <h3 style="text-align:center">水系统隐患分析报告</h3>
+
+            <section class="section">
+                <h4 class="big-tit">1 基本情况</h4>
 
-    </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>
+                    <h4 class="big-tit">1.1 项目情况</h4>
+                    <table width="100%" border=1 style="text-align: center;border-collapse: collapse;
+                    border-spacing: 0;">
+                        <tr>
+                            <td>单位名称</td>
+                            <td colspan="5">中建广场</td>
+
+                        </tr>
+                        <tr>
+                            <td>进场日期</td>
+                            <td>2018-12-26 </td>
+                            <td>完工日期</td>
+                            <td>2019-01-22</td>
+                            <td>验收日期</td>
+                            <td>2019-01-25</td>
+                        </tr>
+                    </table>
+                    <p class="table-sub" style="text-align:center">表1：基本情况</p>
                 </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>
-                            <p>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
-                            <p>2、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
-                        </div>
+
+                <div>
+                    <h4 class="big-tit">1.2 安装设备清单</h4>
+                    <table width="100%" border=1 style="text-align: center;border-collapse: collapse;
+                    border-spacing: 0;">
+                        <tr>
+                            <td>设备名称</td>
+                            <td>设备位置</td>
+                            <td>设备编号</td>
+                            <td>备注</td>
+                        </tr>
+                        <tr>
+                            <td>1-8层电气火灾</td>
+                            <td>1楼配电间内</td>
+                            <td>11902191670097</td>
+                            <td></td>
+                        </tr>
+                        <tr>
+                            <td>9-16层电气火灾</td>
+                            <td>1楼配电间内</td>
+                            <td>11902191670033</td>
+                            <td></td>
+                        </tr>
+                        <tr>
+                            <td>电梯（备用）电气火灾</td>
+                            <td>1楼配电间内</td>
+                            <td>11902191670058</td>
+                            <td></td>
+                        </tr>
+                        <tr>
+                            <td>公灯2电气火灾</td>
+                            <td>1楼配电间内</td>
+                            <td>11902191670069</td>
+                            <td></td>
+                        </tr>
+                    </table>
+                    <p class="table-sub" style="text-align:center">表2：安装设备清单</p>
+                </div>
+
+
+                <div class="text-left">
+                    <h4 class="big-tit">1.3 统计时段</h4>
+                    <div>统计起始日期：2020-12-01</div>
+                    <div>统计截止日期：2020-12-31</div>
+                    <div>统计时段时长：31</div>
+                </div>
+
+
+
+            </section>
+
+            <section class="">
+                <h4 class="big-tit">2 数据统计计算</h4>
+                <table width="100%" border=1 style="text-align: center;border-collapse: collapse;
+                border-spacing: 0;">
+                    <tr>
+                        <td>报警总数</td>
+                        <td>处理数</td>
+                        <td>未处理数</td>
+                        <td>处置率</td>
+                        <td>备注</td>
+                    </tr>
+                    <tr>
+                        <td>1568</td>
+                        <td>1300</td>
+                        <td>268</td>
+                        <td>30%</td>
+                        <td>备注信息</td>
+                    </tr>
+                </table>
+
+                <p class="table-sub" style="text-align:center">表3：数据统计计算</p>
+            </section>
+
+            <section class="divergence">
+                <h4 class="big-tit">3 数据离散率挖掘</h4>
+                <div id="divergenceChart1" class="innerChart"></div>
+                <img id="divergenceChart1_img" style="width:100%;display:none;">
+
+                <div class="summary2">
+                    <div>
+                        <p>结论：</p>
+                    </div>
+                    <div>
+                        <div>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</div>
+                        <div>2、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</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>
-                            <p>七层喷淋末端到八层喷淋末端之间有渗透或轻微堵塞现象，请及时 排查；</p>
-                        </div>
+
+            </section>
+
+            <section class="divergence">
+                <h4 class="big-tit">4 渗漏隐患排查</h4>
+                <div id="hiddenCheckChart1" class="innerChart" style="height:240px"></div>
+                <img id="hiddenCheckChart1_img" style="width:100%;display:none;">
+
+
+
+                <div class="summary2">
+                    <div>
+                        <p>结论：</p>
+                    </div>
+                    <div>
+                        <div>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</div>
+                        <div>2、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</div>
                     </div>
-                    <div class="panel-footer"></div>
                 </div>
-            </div>
+
+            </section>
+
+
+
+            <section class="deviceLink">
+                <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>
+                        <div>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</div>
+                    </div>
+                </div>
+
+            </section>
+
+            <section class="dataChange">
+                <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>
+                        <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="">
+                    <option value="">请选择</option>
+                    <option value="1">建筑一</option>
+                    <option value="2">建筑二</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>
 
-        <div class="bottomSection">
-            <div class="column">
-                <div class="panel line oldAnalysis">
-                    <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">喷淋末端与水泵启停关联</a>
-                        <a href="javascript:;">试验消火栓与屋顶水箱液位关联</a>
+        <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="chart"></div>
 
-                    <div class="summary">
-                        <div>
-                            <p>结论：</p>
+                        <div class="summary">
+                            <div>
+                                <p>结论：</p>
+                            </div>
+                            <div>
+                                <p>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
+                                <p>2、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
+                            </div>
                         </div>
-                        <div>
-                            <p>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
-                            <p>2、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
+                        <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>
+                                <p>七层喷淋末端到八层喷淋末端之间有渗透或轻微堵塞现象，请及时 排查；</p>
+                            </div>
                         </div>
+                        <div class="panel-footer"></div>
                     </div>
-                    <div class="panel-footer"></div>
                 </div>
             </div>
-            <div class="column">
-                <div class="panel line hotAnalysis">
-                    <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 class="bottomSection">
+                <div class="column">
+                    <div class="panel line oldAnalysis">
+                        <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">喷淋末端与水泵启停关联</a>
+                            <a href="javascript:;">试验消火栓与屋顶水箱液位关联</a>
                         </div>
-                        <div>
-                            <p>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；2、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
 
+                        <div class="chart"></div>
+
+                        <div class="summary">
+                            <div>
+                                <p>结论：</p>
+                            </div>
+                            <div>
+                                <p>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
+                                <p>2、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
+                            </div>
                         </div>
+                        <div class="panel-footer"></div>
+                    </div>
+                </div>
+                <div class="column">
+                    <div class="panel line hotAnalysis">
+                        <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>
+                                <p>1、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；2、请检查绝缘皮出现硬化、裂纹；接触电阻变大，现硬化、裂纹；</p>
+
+                            </div>
+                        </div>
+                        <div class="panel-footer"></div>
                     </div>
-                    <div class="panel-footer"></div>
                 </div>
             </div>
-        </div>
 
-    </section>
+        </section>
+    </div>
+
+
 
     <script src="js/flexible.js"></script>
     <script src="js/jquery.js"></script>
@@ -167,9 +352,11 @@
 
     <script src="js/echarts.min.js"></script>
     <script src="js/echarts-gl.min.js"></script>
+
+
     <script src="js/water.js"></script>
+    <script src="js/waterInner.js"></script>
     <script>
-        loadingFunnel();
         layui.use('laydate', function() {
             var laydate = layui.laydate;