codeHtml.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. <!--扫码展示-->
  2. <template>
  3. <div id="codeHtml"
  4. v-loading="loading">
  5. <div class="w-e-text w-e-text-box" v-html="text" v-if="type==1"></div>
  6. <div v-if="type==2" class="pdf-max-box">
  7. <!--<pdf-->
  8. <!--ref="pdf"-->
  9. <!--:src="src"-->
  10. <!--v-for="i in numPages"-->
  11. <!--:key="i"-->
  12. <!--:page="i"-->
  13. <!--&gt;-->
  14. <!--</pdf>-->
  15. <pdf
  16. ref="pdf"
  17. :src="form.content"
  18. v-for="i in numPages"
  19. :key="i"
  20. :page="i"
  21. >
  22. </pdf>
  23. </div>
  24. <div class="w-e-text" v-html="text" v-if="type==3"></div>
  25. </div>
  26. </template>
  27. <script>
  28. import { hazard_book_lookUp,safe_book,hazardLookUp } from "@/api/codeHtml/index";
  29. import pdf from 'vue-pdf'
  30. export default {
  31. components:{
  32. pdf
  33. },
  34. name: "codeHtml",
  35. data() {
  36. return {
  37. //状态数据相关
  38. code:"",
  39. type:"",
  40. //富文本相关
  41. text:"",
  42. //pdf相关
  43. numPages: null, // pdf 总页数
  44. form:{},
  45. src: '', // pdf文件地址
  46. // 加载样式
  47. loading:false,
  48. };
  49. },
  50. created() {
  51. },
  52. mounted(){
  53. this.code = this.$route.query.code;
  54. this.type = this.$route.query.type;
  55. if(this.$route.query.code&&this.$route.query.type){
  56. this.loading = true;
  57. if(this.$route.query.type==1){
  58. //查询危险化学品详情
  59. this.hazard_book_lookUp(this.$route.query.code);
  60. }else if(this.$route.query.type==2){
  61. //查询安全管理制度
  62. this.safe_book(this.$route.query.code);
  63. }else if(this.$route.query.type==3){
  64. //查询危险源
  65. this.hazardLookUp(this.$route.query.code);
  66. }
  67. }
  68. },
  69. methods: {
  70. //加载接口
  71. hazard_book_lookUp(id){
  72. hazard_book_lookUp(id).then( data => {
  73. this.text = unescape(data.data.content);
  74. this.loading = false;
  75. });
  76. },
  77. safe_book(id){
  78. safe_book(id).then( data => {
  79. this.form.content = window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + '/' + unescape(data.data.content);
  80. this.getNumPages();
  81. });
  82. },
  83. hazardLookUp(id){
  84. hazardLookUp(id).then( data => {
  85. this.text = unescape(data.data.content);
  86. // let list = this.text.split('font-size:');
  87. // let newText = "";
  88. // for (let i=0;i<list.length;i++){
  89. // if(
  90. // (list[i][0] == '0' || list[i][0] == '1' || list[i][0] == '2' || list[i][0] == '3' || list[i][0] == '4' || list[i][0] == '5' || list[i][0] == '6' || list[i][0] == '7' || list[i][0] == '8' || list[i][0] == '9')&&
  91. // (list[i][1] == 'p')&&
  92. // (list[i][2] == 'x')
  93. // ){
  94. // let num = this.accMul(parseInt(list[i][0]),6);
  95. // num = num>140?140:num;
  96. // let textNew = list[i].slice(1)
  97. // newText = newText + 'font-size:'+num+textNew;
  98. // }else if(
  99. // (list[i][0] == ' ')&&
  100. // (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
  101. // (list[i][2] == 'p')&&
  102. // (list[i][3] == 'x')
  103. // ){
  104. // let num = this.accMul(parseInt(list[i][1]),6);
  105. // num = num>140?140:num;
  106. // let textNew = list[i].slice(2)
  107. // newText = newText + 'font-size:'+num+textNew;
  108. // }else if(
  109. // (list[i][0] == '0' || list[i][0] == '1' || list[i][0] == '2' || list[i][0] == '3' || list[i][0] == '4' || list[i][0] == '5' || list[i][0] == '6' || list[i][0] == '7' || list[i][0] == '8' || list[i][0] == '9')&&
  110. // (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
  111. // (list[i][2] == 'p')&&
  112. // (list[i][3] == 'x')
  113. // ){
  114. // let num = this.accMul(parseInt(list[i][0]+list[i][1]),6);
  115. // num = num>140?140:num;
  116. // let textNew = list[i].slice(2)
  117. // newText = newText + 'font-size:'+num+textNew;
  118. // }else if(
  119. // (list[i][0] == ' ')&&
  120. // (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
  121. // (list[i][2] == '0' || list[i][2] == '1' || list[i][2] == '2' || list[i][2] == '3' || list[i][2] == '4' || list[i][2] == '5' || list[i][2] == '6' || list[i][2] == '7' || list[i][2] == '8' || list[i][2] == '9')&&
  122. // (list[i][3] == 'p')&&
  123. // (list[i][4] == 'x')
  124. // ){
  125. // let num = this.accMul(parseInt(list[i][1]+list[i][2]),6);
  126. // num = num>140?140:num;
  127. // let textNew = list[i].slice(3)
  128. // newText = newText + 'font-size:'+num+textNew;
  129. // }else if(
  130. // (list[i][0] == '0' || list[i][0] == '1' || list[i][0] == '2' || list[i][0] == '3' || list[i][0] == '4' || list[i][0] == '5' || list[i][0] == '6' || list[i][0] == '7' || list[i][0] == '8' || list[i][0] == '9')&&
  131. // (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
  132. // (list[i][2] == '0' || list[i][2] == '1' || list[i][2] == '2' || list[i][2] == '3' || list[i][2] == '4' || list[i][2] == '5' || list[i][2] == '6' || list[i][2] == '7' || list[i][2] == '8' || list[i][2] == '9')&&
  133. // (list[i][3] == 'p')&&
  134. // (list[i][4] == 'x')
  135. // ){
  136. // let num = this.accMul(parseInt(list[i][0]+list[i][1]+list[i][2]),6);
  137. // num = num>140?140:num;
  138. // let textNew = list[i].slice(3)
  139. // newText = newText + 'font-size:'+num+textNew;
  140. // }else if(
  141. // (list[i][0] == ' ')&&
  142. // (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
  143. // (list[i][2] == '0' || list[i][2] == '1' || list[i][2] == '2' || list[i][2] == '3' || list[i][2] == '4' || list[i][2] == '5' || list[i][2] == '6' || list[i][2] == '7' || list[i][2] == '8' || list[i][2] == '9')&&
  144. // (list[i][3] == '0' || list[i][3] == '1' || list[i][3] == '2' || list[i][3] == '3' || list[i][3] == '4' || list[i][3] == '5' || list[i][3] == '6' || list[i][3] == '7' || list[i][3] == '8' || list[i][3] == '9')&&
  145. // (list[i][4] == 'p')&&
  146. // (list[i][5] == 'x')
  147. // ){
  148. // let num = this.accMul(parseInt(list[i][1]+list[i][2]+list[i][3]),6);
  149. // num = num>140?140:num;
  150. // let textNew = list[i].slice(4)
  151. // newText = newText + 'font-size:'+num+textNew;
  152. // }else{
  153. // newText = newText + list[i]
  154. // }
  155. // }
  156. // list = newText.split('line-height:');
  157. // newText = "";
  158. // for (let i=0;i<list.length;i++){
  159. // if(
  160. // (list[i][0] == '0' || list[i][0] == '1' || list[i][0] == '2' || list[i][0] == '3' || list[i][0] == '4' || list[i][0] == '5' || list[i][0] == '6' || list[i][0] == '7' || list[i][0] == '8' || list[i][0] == '9')&&
  161. // (list[i][1] == 'p')&&
  162. // (list[i][2] == 'x')
  163. // ){
  164. // let num = this.accMul(parseInt(list[i][0]),6);
  165. // num = num>140?140:num;
  166. // let textNew = list[i].slice(1)
  167. // newText = newText + 'line-height:'+num+textNew;
  168. // }else if(
  169. // (list[i][0] == ' ')&&
  170. // (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
  171. // (list[i][2] == 'p')&&
  172. // (list[i][3] == 'x')
  173. // ){
  174. // let num = this.accMul(parseInt(list[i][1]),6);
  175. // num = num>140?140:num;
  176. // let textNew = list[i].slice(2)
  177. // newText = newText + 'line-height:'+num+textNew;
  178. // }else if(
  179. // (list[i][0] == '0' || list[i][0] == '1' || list[i][0] == '2' || list[i][0] == '3' || list[i][0] == '4' || list[i][0] == '5' || list[i][0] == '6' || list[i][0] == '7' || list[i][0] == '8' || list[i][0] == '9')&&
  180. // (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
  181. // (list[i][2] == 'p')&&
  182. // (list[i][3] == 'x')
  183. // ){
  184. // let num = this.accMul(parseInt(list[i][0]+list[i][1]),6);
  185. // num = num>140?140:num;
  186. // let textNew = list[i].slice(2)
  187. // newText = newText + 'line-height:'+num+textNew;
  188. // }else if(
  189. // (list[i][0] == ' ')&&
  190. // (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
  191. // (list[i][2] == '0' || list[i][2] == '1' || list[i][2] == '2' || list[i][2] == '3' || list[i][2] == '4' || list[i][2] == '5' || list[i][2] == '6' || list[i][2] == '7' || list[i][2] == '8' || list[i][2] == '9')&&
  192. // (list[i][3] == 'p')&&
  193. // (list[i][4] == 'x')
  194. // ){
  195. // let num = this.accMul(parseInt(list[i][1]+list[i][2]),6);
  196. // num = num>140?140:num;
  197. // let textNew = list[i].slice(3)
  198. // newText = newText + 'line-height:'+num+textNew;
  199. // }else if(
  200. // (list[i][0] == '0' || list[i][0] == '1' || list[i][0] == '2' || list[i][0] == '3' || list[i][0] == '4' || list[i][0] == '5' || list[i][0] == '6' || list[i][0] == '7' || list[i][0] == '8' || list[i][0] == '9')&&
  201. // (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
  202. // (list[i][2] == '0' || list[i][2] == '1' || list[i][2] == '2' || list[i][2] == '3' || list[i][2] == '4' || list[i][2] == '5' || list[i][2] == '6' || list[i][2] == '7' || list[i][2] == '8' || list[i][2] == '9')&&
  203. // (list[i][3] == 'p')&&
  204. // (list[i][4] == 'x')
  205. // ){
  206. // let num = this.accMul(parseInt(list[i][0]+list[i][1]+list[i][2]),6);
  207. // num = num>140?140:num;
  208. // let textNew = list[i].slice(3)
  209. // newText = newText + 'line-height:'+num+textNew;
  210. // }else if(
  211. // (list[i][0] == ' ')&&
  212. // (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
  213. // (list[i][2] == '0' || list[i][2] == '1' || list[i][2] == '2' || list[i][2] == '3' || list[i][2] == '4' || list[i][2] == '5' || list[i][2] == '6' || list[i][2] == '7' || list[i][2] == '8' || list[i][2] == '9')&&
  214. // (list[i][3] == '0' || list[i][3] == '1' || list[i][3] == '2' || list[i][3] == '3' || list[i][3] == '4' || list[i][3] == '5' || list[i][3] == '6' || list[i][3] == '7' || list[i][3] == '8' || list[i][3] == '9')&&
  215. // (list[i][4] == 'p')&&
  216. // (list[i][5] == 'x')
  217. // ){
  218. // let num = this.accMul(parseInt(list[i][1]+list[i][2]+list[i][3]),6);
  219. // num = num>140?140:num;
  220. // let textNew = list[i].slice(4)
  221. // newText = newText + 'line-height:'+num+textNew;
  222. // }else{
  223. // newText = newText + list[i]
  224. // }
  225. // }
  226. // this.$set(this,'text',newText);
  227. this.loading = false;
  228. });
  229. },
  230. getNumPages() {
  231. let loadingTask = pdf.createLoadingTask(this.form.content)
  232. loadingTask.promise.then(pdf => {
  233. this.numPages = pdf.numPages;
  234. this.loading = false;
  235. }).catch(err => {
  236. console.error('pdf 加载失败', err);
  237. })
  238. },
  239. //pdf方法
  240. changePdfPage (val) {
  241. if (val === 0 && this.currentPage > 1) {
  242. this.currentPage--
  243. }
  244. if (val === 1 && this.currentPage < this.pageCount) {
  245. this.currentPage++
  246. }
  247. },
  248. // pdf加载时
  249. loadPdfHandler (e) {
  250. this.currentPage = 1 // 加载的时候先加载第一页
  251. },
  252. accMul(arg1,arg2){
  253. var m=0,s1=arg1.toString(),s2=arg2.toString();
  254. try{m+=s1.split(".")[1].length}catch(e){}
  255. try{m+=s2.split(".")[1].length}catch(e){}
  256. return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
  257. },
  258. }
  259. };
  260. </script>
  261. <style lang="scss">
  262. #codeHtml{
  263. video{
  264. width:100%!important;
  265. /*object-fit: fill;*/
  266. height:100%!important;
  267. /*display: block;*/
  268. }
  269. img{
  270. width:100%!important;
  271. height:100%!important;
  272. /*width:1500px;*/
  273. /*margin:20px 200px;*/
  274. }
  275. }
  276. </style>
  277. <style scoped lang="scss">
  278. #codeHtml {
  279. height:100%;
  280. overflow:hidden;
  281. display: flex;
  282. flex-direction: column;
  283. font-size:16px;
  284. *{
  285. margin:0;
  286. padding:0;
  287. }
  288. .pdf-max-box{
  289. flex:1;
  290. overflow-y: scroll;
  291. }
  292. .top-button-box{
  293. width:100%;
  294. display: flex;
  295. .null-p{
  296. flex:1;
  297. }
  298. }
  299. .w-e-text{
  300. flex:1;
  301. overflow-x: hidden;
  302. overflow-y: scroll;
  303. padding:8px;
  304. font-size:16px;
  305. }
  306. .w-e-text.table::-webkit-scrollbar{
  307. width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  308. height: 4px;
  309. }
  310. .w-e-text.table::-webkit-scrollbar-thumb{
  311. border-radius: 5px;
  312. -webkit-box-shadow: inset 0 0 5px #999;
  313. background: #fff;
  314. }
  315. .w-e-text.table::-webkit-scrollbar-track{
  316. -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
  317. border-radius: 0;
  318. background: rgba(255,255,255,0);
  319. }
  320. }
  321. </style>