Home Explore Help
Register Sign In
seimin
/
zuel-itsm-3.0.2
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

巡检打印

seimin 3 years ago
parent
46fc9500c1
commit
f07d84358b
5 changed files with 367 additions and 61 deletions
Split View Show Diff Stats
  1. 18 60
      assets/js/controllers/inspect/inspectReportCtrl.js
  2. 180 0
      assets/js/script/print/print.js
  3. 52 0
      assets/js/script/print/unitChange.js
  4. 114 0
      assets/views/inspect/inspectReport.html
  5. 3 1
      index.html

+ 18 - 60
assets/js/controllers/inspect/inspectReportCtrl.js
View File 

@@ -65,68 +65,26 @@ app.controller("inspectReportCtrl", [
65 65 
     // }
66 66 
     // 打印
67 67 
     $scope.print = function () {
68 
-      ///.ui-grid-viewport
69 
-      var docHead = document.head.outerHTML; //.ui-grid-viewport
70 
-      console.log(docHead);
71 
-      var printContents = document.querySelector(".grid").outerHTML;
72 
-      console.log(printContents);
73 
-      var winAttr =
74 
-        "location=yes, statusbar=no, menubar=no, titlebar=no, toolbar=no,dependent=no, width=865, height=600, resizable=yes, screenX=200, screenY=200, personalbar=no, scrollbars=yes";
68 
+      console.log(Print);
69 
+      Print("#print", {
70 
+        padding:'5 5',
71 
+        afterprint: () => {},
72 
+        cancel: () => {},
73 
+      });
74 
+      // 保证打印正好铺满A4高度
75 
+      let A4height = 297; // A4高度297mm
76 
+      let ctxpage = document.querySelectorAll(".fm");
77 
+      ctxpage.forEach((i, k) => {
78 
+        let eachpage_mm = px2mm(i.clientHeight); // 单位px转mm
79 
+        console.log(k + "页高度px:", i.clientHeight, "高度mm:", eachpage_mm);
75 80
76 
-      var newWin = window.open("", "_blank", winAttr);
77 
-      var writeDoc = newWin.document;
78 
-      writeDoc.open();
79 
-      writeDoc.write(
80 
-        `<!doctype html>
81 
-          ${docHead}
82 
-          <body onLoad="window.print()">
83 
-          <style>
84 
-          .ui-grid-row{
85 
-            margin-top:0!important;
86 
-          }
87 
-          .ui-grid-canvas{
88 
-            height:auto!important;
89 
-          }
90 
-          .ui-grid-viewport{
91 
-            width:100%!important;
92 
-            height:100%!important;
93 
-          }
94 
-          .ui-grid-header-viewport{
95 
-            width:100%!important;
96 
-          }
97 
-          .xj_img {
98 
-            width: 50px;
99 
-            height: 100px;
100 
-            object-fit: cover;
101 
-            margin: 0 2px;
102 
-            cursor: pointer;
103 
-          }
104 
-          [ui-grid-cell] .ui-grid-cell-contents {
105 
-              display: flex;
106 
-              align-items: center;
107 
-              justify-content: center;
108 
-              white-space:normal;
109 
-          }
110 
-        [ui-grid-cell] .ui-grid-cell-contents .inspectPar {
111 
-            overflow: auto;
112 
-            display: flex;
113 
-            align-items: center;
114 
-            justify-content: center;
115 
-            white-space:normal;
116 
-            flex-wrap: wrap;
117 
-            height: 100%;
81 
+        //高度大于A4,则按比例缩小打印区域
82 
+        if (eachpage_mm > A4height) {
83 
+          let zoom = A4height / eachpage_mm;
84 
+          console.log(k + "页zoom:", zoom);
85 
+          i.style.zoom = zoom;
118 86 
         }
119 
-        [ui-grid-cell] .ui-grid-cell-contents .inspectPar p{
120 
-            text-align: justify;
121 
-            width: 100%;
122 
-            margin: 0;
123 
-        }</style>
124 
-        ${printContents}
125 
-        </body>
126 
-        </html>`
127 
-      );
128 
-      writeDoc.close();
129 
-      newWin.focus();
87 
+      });
130 88 
     };
131 89
132 90 
     //获取计划主题和批次号，级联

+ 180 - 0
assets/js/script/print/print.js
View File 

@@ -0,0 +1,180 @@
1 
+/***** iframe打印
2 
+ * @param dom            打印区域的class, id
3 
+ * @param options.margin  控制页眉页脚, 默认 4mm
4 
+ * @param options.padding 打印边距, 默认 '0 0'
5 
+ * @method options.afterprint 打印结束后回调
6 
+ * @method options.cancel 取消打印后回调
7 
+ *
8 
+ * **/
9 
+
10 
+
11 
+ const Print = function(dom, options) {
12 
+    if (!(this instanceof Print)) return new Print(dom, options);
13 
+
14 
+    this.options = this.extend(
15 
+      {
16 
+        noPrint: ".no-print",
17 
+      },
18 
+      options
19 
+    );
20 
+
21 
+    if (typeof dom === "string") {
22 
+      this.dom = document.querySelector(dom);
23 
+    } else {
24 
+      this.isDOM(dom);
25 
+      this.dom = this.isDOM(dom) ? dom : dom.$el;
26 
+    }
27 
+
28 
+    this.init();
29 
+  };
30 
+  Print.prototype = {
31 
+    init: function() {
32 
+      var content = this.getStyle() + this.getHtml();
33 
+      this.writeIframe(content);
34 
+    },
35 
+    extend: function(obj, obj2) {
36 
+      for (var k in obj2) {
37 
+        obj[k] = obj2[k];
38 
+      }
39 
+      return obj;
40 
+    },
41 
+
42 
+    getStyle: function() {
43 
+      var str = "",
44 
+        styles = document.querySelectorAll("style,link");
45 
+      for (var i = 0; i < styles.length; i++) {
46 
+        str += styles[i].outerHTML;
47 
+      }
48 
+
49 
+
50 
+
51 
+      str +=
52 
+      "<style>" +
53 
+      (this.options.noPrint ? this.options.noPrint : ".no-print") +
54 
+      "{display:none;}</style>";
55 
+
56 
+      str += `<style>
57 
+      @media print {
58 
+        @page { margin: ${this.options.margin || '4mm'}; padding: ${this.options.padding || '0 0'}; width:210mm;height:290mm}
59 
+        body {
60 
+          -webkit-print-color-adjust:exact;-moz-print-color-adjust:exact;-ms-print-color-adjust:exact;print-color-adjust:exact;
61 
+        }
62 
+      }
63 
+      </style>`;
64 
+
65 
+
66 
+      return str;
67 
+    },
68 
+
69 
+    getHtml: function() {
70 
+      var inputs = document.querySelectorAll("input");
71 
+      var textareas = document.querySelectorAll("textarea");
72 
+      var selects = document.querySelectorAll("select");
73 
+
74 
+      for (var k = 0; k < inputs.length; k++) {
75 
+        if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
76 
+          if (inputs[k].checked == true) {
77 
+            inputs[k].setAttribute("checked", "checked");
78 
+          } else {
79 
+            inputs[k].removeAttribute("checked");
80 
+          }
81 
+        } else if (inputs[k].type == "text") {
82 
+          inputs[k].setAttribute("value", inputs[k].value);
83 
+        } else {
84 
+          inputs[k].setAttribute("value", inputs[k].value);
85 
+        }
86 
+      }
87 
+
88 
+      for (var k2 = 0; k2 < textareas.length; k2++) {
89 
+        if (textareas[k2].type == "textarea") {
90 
+          textareas[k2].innerHTML = textareas[k2].value;
91 
+        }
92 
+      }
93 
+
94 
+      for (var k3 = 0; k3 < selects.length; k3++) {
95 
+        if (selects[k3].type == "select-one") {
96 
+          var child = selects[k3].children;
97 
+          for (var i in child) {
98 
+            if (child[i].tagName == "OPTION") {
99 
+              if (child[i].selected == true) {
100 
+                child[i].setAttribute("selected", "selected");
101 
+              } else {
102 
+                child[i].removeAttribute("selected");
103 
+              }
104 
+            }
105 
+          }
106 
+        }
107 
+      }
108 
+
109 
+      return this.dom.outerHTML;
110 
+    },
111 
+
112 
+    writeIframe: function(content) {
113 
+      var w,
114 
+        doc,
115 
+        iframe = document.createElement("iframe"),
116 
+        f = document.body.appendChild(iframe);
117 
+      iframe.id = "myIframe";
118 
+      iframe.setAttribute(
119 
+        "style",
120 
+        "position:absolute;width:0;height:0;top:-10px;left:-10px;"
121 
+      );
122 
+
123 
+      w = f.contentWindow || f.contentDocument;
124 
+      doc = f.contentDocument || f.contentWindow.document;
125 
+      doc.open();
126 
+      doc.write(content);
127 
+      doc.close();
128 
+      var _this = this;
129 
+
130 
+      iframe.onload = function() {
131 
+        w.onbeforeprint = _this.options.beforeprint;
132 
+        w.onafterprint = _this.options.afterprint;
133 
+        // iframe.contentWindow.print();
134 
+        _this.toPrint(w);
135 
+        setTimeout(function() {
136 
+          document.body.removeChild(iframe);
137 
+        }, 100);
138 
+      };
139 
+    },
140 
+
141 
+    toPrint: function(frameWindow) {
142 
+      var _t = this;
143 
+      try {
144 
+        setTimeout(function() {
145 
+          frameWindow.focus();
146 
+          try {
147 
+            if (!frameWindow.document.execCommand("print", false, null)) {
148 
+
149 
+              frameWindow.print();
150 
+            }
151 
+          } catch (e) {
152 
+
153 
+            frameWindow.print();
154 
+          }
155 
+          frameWindow.close();
156 
+          typeof _t.options.cancel === "function" && _t.options.cancel();
157 
+          frameWindow.onbeforeprint = null;
158 
+          frameWindow.onafterprint = null;
159 
+        }, 10);
160 
+      } catch (err) {
161 
+        console.log("err", err);
162 
+      }
163 
+    },
164 
+
165 
+    isDOM:
166 
+      typeof HTMLElement === "object"
167 
+        ? function(obj) {
168 
+            return obj instanceof HTMLElement;
169 
+          }
170 
+        : function(obj) {
171 
+            return (
172 
+              obj &&
173 
+              typeof obj === "object" &&
174 
+              obj.nodeType === 1 &&
175 
+              typeof obj.nodeName === "string"
176 
+            );
177 
+          },
178 
+  };
179 
+//   export default Print
180 
+

+ 52 - 0
assets/js/script/print/unitChange.js
View File 

@@ -0,0 +1,52 @@
1 
+//  px <-> mm  单位互相转换
2 
+
3 
+/**
4 
+ * 获取DPI 每英寸像素点
5 
+ * @returns {Array}
6 
+ */
7 
+ let conversion_getDPI = function() {
8 
+    var DPI = 0;
9 
+    if (window.screen.deviceXDPI) {
10 
+      DPI = window.screen.deviceXDPI;
11 
+    } else {
12 
+      var tmpNode = document.createElement("DIV");
13 
+      tmpNode.style.cssText =
14 
+        "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
15 
+      document.body.appendChild(tmpNode);
16 
+      DPI = parseInt(tmpNode.offsetWidth);
17 
+      tmpNode.parentNode.removeChild(tmpNode);
18 
+    }
19 
+    return DPI;
20 
+  };
21 
+
22 
+  // 1 英寸=25.4 毫米
23 
+
24 
+  /**
25 
+   * px转换为mm
26 
+   * @param value
27 
+   * @returns {number}
28 
+   */
29 
+  let px2mm = function(value) {
30 
+    var inch = value / conversion_getDPI();
31 
+    var c_value = inch * 25.4;
32 
+    //      console.log(c_value);
33 
+    return c_value;
34 
+  };
35 
+
36 
+  /**
37 
+   * mm转换为px
38 
+   * @param value
39 
+   * @returns {number}
40 
+   */
41 
+  let mm2px = function(value) {
42 
+    var inch = value / 25.4;
43 
+    var c_value = inch * conversion_getDPI();
44 
+    //      console.log(c_value);
45 
+    return c_value;
46 
+  };
47 
+//   export default {
48 
+//       mm2px,
49 
+//       px2mm
50 
+//   };
51 
+
52 
+

+ 114 - 0
assets/views/inspect/inspectReport.html
View File 

@@ -130,4 +130,118 @@
130 130 
       ></div>
131 131 
     </div>
132 132 
   </div>
133 
+  <!-- 打印区域 -->
134 
+  <div style="display: none;">
135 
+    <div id="print">
136 
+      <style>
137 
+        #print{
138 
+          width: 250mm;
139 
+          background-color: #fff;
140 
+          margin: 0 auto;
141 
+        }
142 
+        #print .fm{
143 
+          height: 100%;
144 
+          display: flex;
145 
+          flex-direction: column;
146 
+          justify-content: space-between;
147 
+          align-items: center;
148 
+        }
149 
+        #print .fm h1{
150 
+          font-size: 80px;
151 
+          margin-top: 40mm;
152 
+        }
153 
+        #print .fm h2{
154 
+          -webkit-writing-mode: vertical-rl;
155 
+          writing-mode: vertical-rl;
156 
+          font-size: 60px;
157 
+        }
158 
+        #print .fm h3{
159 
+          font-size: 18px;
160 
+          margin-left: auto;
161 
+          margin-right: 5mm;
162 
+          margin-bottom: 5mm;
163 
+        }
164 
+        #print table{
165 
+          width: 100%;
166 
+          border: 1px solid #000;
167 
+          border-collapse: collapse;
168 
+        }
169 
+        #print td,th{
170 
+          text-align: center;
171 
+          border: 1px solid #000;
172 
+          padding: 21px 2px;
173 
+          word-break: break-all;
174 
+        }
175 
+        #print .td{
176 
+          display: flex;
177 
+          align-items: center;
178 
+          justify-content: center;
179 
+          white-space:normal;
180 
+        }
181 
+        #print .td .inspectPar{
182 
+          overflow: auto;
183 
+          display: flex;
184 
+          align-items: center;
185 
+          justify-content: center;
186 
+          white-space:normal;
187 
+          flex-wrap: wrap;
188 
+          height: 100%;
189 
+        }
190 
+        #print .td .inspectPar p{
191 
+          text-align: justify;
192 
+          width: 100%;
193 
+          margin: 0;
194 
+        }
195 
+        #print .xj_img {
196 
+          width: 50px;
197 
+          height: 100px;
198 
+          object-fit: cover;
199 
+          margin: 0 2px;
200 
+          cursor: pointer;
201 
+        }
202 
+      </style>
203 
+      <div class="fm">
204 
+        <h1>巡&nbsp;&nbsp;检&nbsp;&nbsp;报&nbsp;&nbsp;告</h1>
205 
+        <h2>{{queryList.title?queryList.title.title.split('').join('&nbsp;&nbsp;'):''}}</h2>
206 
+        <h3>批次号：{{queryList.batchNo?queryList.batchNo.name:''}}</h2>
207 
+      </div>
208 
+      <table>
209 
+        <tr>
210 
+          <th width="5%">序号</th>
211 
+          <th width="11%">日期</th>
212 
+          <th width="8%">巡检类型</th>
213 
+          <th width="28%">巡检项</th>
214 
+          <th width="22%">巡检图片</th>
215 
+          <th width="10%">整改意见</th>
216 
+          <th width="8%">巡检人</th>
217 
+          <th width="8%">地址</th>
218 
+        </tr>
219 
+        <tr ng-repeat="(index,data) in myData">
220 
+          <td>{{index + 1}}</td>
221 
+          <td>{{data.startTime | date:"yyyy-MM-dd HH:mm:ss"}}</td>
222 
+          <td>{{data.type}}</td>
223 
+          <td>
224 
+            <div class="td">
225 
+              <div class="inspectPar">
226 
+                <p ng-repeat="item in data.xj_items">
227 
+                  <span ng-if="item.key == 'sdCheckEnable7'||item.key == 'sdCheckEnable11'||item.key == 'sdCheckEnable12'">{{item.name}}：{{item.value=="false"?"否":"是"}}</span>
228 
+                  <span ng-if="item.key != 'sdCheckEnable7'&&item.key != 'sdCheckEnable11'&&item.key != 'sdCheckEnable12'">{{item.name}}：{{item.value=="false"?"异常":"正常"}}</span>
229 
+                </p>
230 
+              </div>
231 
+            </div>
232 
+          </td>
233 
+          <td>
234 
+            <img class="xj_img" ng-click="seePic(data,imageurl)" ng-repeat="(index,imageurl) in data.filePath" ng-src="{{imageurl}}"/>
235 
+          </td>
236 
+          <td>
237 
+            <div class="td">
238 
+              <div class="inspectPar"><p>{{data.model.descriptionTextarea}}</p></div>
239 
+            </div>
240 
+          </td>
241 
+          <td>{{data.userName}}</td>
242 
+          <td>{{data.address}}</td>
243 
+        </tr>
244 
+      </table>
245 
+    </div>
246 
+  </div>
133 247 
 </div>

+ 3 - 1
index.html
View File 

@@ -74,7 +74,9 @@
74 74 
 <body ng-controller="AppCtrl">
75 75 
     <input class="form-control" id="casUserId" ng-model="casUserId" ng-show=false>
76 76 
     <div ui-view id="app" ng-class="{'app-mobile' : app.isMobile, 'app-navbar-fixed' : app.layout.isNavbarFixed, 'app-sidebar-fixed' : app.layout.isSidebarFixed, 'app-sidebar-closed':app.layout.isSidebarClosed, 'app-login-open':app.isLoginFixed, 'app-footer-fixed':app.layout.isFooterFixed, 'app-login-data':logindata}"></div>
77 
-
77 
+    <!-- print -->
78 
+    <script src="./assets/js/script/print/print.js"></script>
79 
+    <script src="./assets/js/script/print/unitChange.js"></script>
78 80 
     <!-- jQuery -->
79 81 
     <script src="assets/js/directives/jquery.js"></script>
80 82 
     <!-- <script src="../bower_components/jquery/dist/jquery.min.js"></script> -->