111

web/package-lock.json

@@ -1549,9 +1549,9 @@
 			}
 		},
 		"@vitejs/plugin-vue": {
-			"version": "1.6.0",
-			"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.6.0.tgz",
-			"integrity": "sha512-n3i8htn8pTg9M+kM3cnEfsPZx/6ngInlTroth6fA1LQTJq5aTVQ8ggaE5pPoAy9vCgHPtcaXMzwpldhqRAkebQ==",
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.9.4.tgz",
+			"integrity": "sha512-0CZqaCoChriPTTtGkERy1LGPcYjGFpi2uYRhBPIkqJqUGV5JnJFhQAgh6oH9j5XZHfrRaisX8W0xSpO4T7S78A==",
 			"dev": true
 		},
 		"@vue/babel-helper-vue-jsx-merge-props": {
@@ -1848,6 +1848,44 @@
 					"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
 					"dev": true
 				},
+				"ansi-styles": {
+					"version": "4.3.0",
+					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"color-convert": "^2.0.1"
+					}
+				},
+				"chalk": {
+					"version": "4.1.2",
+					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+					"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"ansi-styles": "^4.1.0",
+						"supports-color": "^7.1.0"
+					}
+				},
+				"color-convert": {
+					"version": "2.0.1",
+					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"color-name": "~1.1.4"
+					}
+				},
+				"color-name": {
+					"version": "1.1.4",
+					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+					"dev": true,
+					"optional": true
+				},
 				"debug": {
 					"version": "4.3.2",
 					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -1863,6 +1901,25 @@
 					"integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
 					"dev": true
 				},
+				"has-flag": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+					"dev": true,
+					"optional": true
+				},
+				"loader-utils": {
+					"version": "2.0.1",
+					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.1.tgz",
+					"integrity": "sha512-g4miPa9uUrZz4iElkaVJgDFwKJGh8aQGM7pUL4ejXl6cu7kSb30seQOVGNMP6sW8j7DW77X68hJZ+GM7UGhXeQ==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"big.js": "^5.2.2",
+						"emojis-list": "^3.0.0",
+						"json5": "^2.1.2"
+					}
+				},
 				"ms": {
 					"version": "2.1.2",
 					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -1877,6 +1934,28 @@
 					"requires": {
 						"minipass": "^3.1.1"
 					}
+				},
+				"supports-color": {
+					"version": "7.2.0",
+					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"has-flag": "^4.0.0"
+					}
+				},
+				"vue-loader-v16": {
+					"version": "npm:[email protected]",
+					"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.2.tgz",
+					"integrity": "sha512-Nkq+z9mAsMEK+qkXgK+9Ia7D8w9uu9j4ut0IMT5coMfux3rCgIp1QBB1CYwY0M34A1nRMSONEaWXxAAw6xSl/Q==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"chalk": "^4.1.0",
+						"hash-sum": "^2.0.0",
+						"loader-utils": "^2.0.0"
+					}
 				}
 			}
 		},
@@ -11615,87 +11694,6 @@
 				}
 			}
 		},
-		"vue-loader-v16": {
-			"version": "npm:[email protected]",
-			"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
-			"integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
-			"dev": true,
-			"optional": true,
-			"requires": {
-				"chalk": "^4.1.0",
-				"hash-sum": "^2.0.0",
-				"loader-utils": "^2.0.0"
-			},
-			"dependencies": {
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"chalk": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-					"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true,
-					"optional": true
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true,
-					"optional": true
-				},
-				"loader-utils": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-					"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"big.js": "^5.2.2",
-						"emojis-list": "^3.0.0",
-						"json5": "^2.1.2"
-					}
-				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				}
-			}
-		},
 		"vue-particle-line": {
 			"version": "0.1.4",
 			"resolved": "https://registry.npmjs.org/vue-particle-line/-/vue-particle-line-0.1.4.tgz",

web/src/router/index.js

@@ -13,6 +13,11 @@ const routes = [{
   path: '/login',
   name: 'Login',
   component: () => import('@/view/login/index.vue')
+},
+{
+  path: '/proInfo',
+  name: 'ProInfo',
+  component: () => import('@/view/problemInfo/ProInfo.vue')
 }
 ]
 

web/src/utils/print.js

@@ -0,0 +1,130 @@
+// 打印类属性、方法定义
+/* eslint-disable */
+const Print = function (dom, options) {
+  if (!(this instanceof Print)) return new Print(dom, options);
+
+  this.options = this.extend({
+    'noPrint': '.no-print'
+  }, options);
+
+  if ((typeof dom) === "string") {
+    this.dom = document.querySelector(dom);
+  } else {
+    this.isDOM(dom)
+    this.dom = this.isDOM(dom) ? dom : dom.$el;
+  }
+
+  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>";
+    str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";
+    return str;
+  },
+
+  getHtml: function () {
+    var inputs = document.querySelectorAll('input');
+    var textareas = document.querySelectorAll('textarea');
+    var selects = document.querySelectorAll('select');
+
+    for (var k = 0; k < inputs.length; k++) {
+      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)
+      } else {
+        inputs[k].setAttribute('value', inputs[k].value)
+      }
+    }
+
+    for (var k2 = 0; k2 < textareas.length; k2++) {
+      if (textareas[k2].type == 'textarea') {
+        textareas[k2].innerHTML = textareas[k2].value
+      }
+    }
+
+    for (var k3 = 0; k3 < selects.length; k3++) {
+      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;";
+    iframe.setAttribute('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();
+    var _this = this
+    iframe.onload = function(){
+      _this.toPrint(w);
+      setTimeout(function () {
+        document.body.removeChild(iframe)
+      }, 100)
+    }
+  },
+
+  toPrint: function (frameWindow) {
+    try {
+      setTimeout(function () {
+        frameWindow.focus();
+        try {
+          if (!frameWindow.document.execCommand('print', false, null)) {
+            frameWindow.print();
+          }
+        } catch (e) {
+          frameWindow.print();
+        }
+        frameWindow.close();
+      }, 10);
+    } catch (err) {
+      console.log('err', err);
+    }
+  },
+  isDOM: (typeof HTMLElement === 'object') ?
+    function (obj) {
+      return obj instanceof HTMLElement;
+    } :
+    function (obj) {
+      return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
+    }
+};
+
+export default Print

web/src/view/layout/aside/index.vue

@@ -66,7 +66,7 @@ export default {
     selectMenuItem(index, _, ele) {
       const query = {}
       const params = {}
-      ele.route.parameters &&
+      ele?.route?.parameters &&
       ele.route.parameters.map(item => {
         if (item.type === 'query') {
           query[item.key] = item.value

web/src/view/problemInfo/proInfo.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="show" id="print"  ref="print">
+    <div class="no-print" style="text-align: center">
+      <el-button class="no-print" type="small" style="float: bottom" icon="el-icon-download" size="mini" @click="printBtn">打印保存页面</el-button>
+    </div>
+    <el-form :model="formData" label-position="right" label-width="80px" >
+      <el-card class="box-card">
+        <el-descriptions title="基本信息" border :column="2">
+          <el-descriptions-item label="发布人">{{ formData.oper }}</el-descriptions-item>
+          <el-descriptions-item label="站点名称">{{ formData.siteName }}</el-descriptions-item>
+          <el-descriptions-item label="站点位置">{{ formData.position }}</el-descriptions-item>
+          <el-descriptions-item label="站点类型">{{ formData.siteType }}</el-descriptions-item>
+          <el-descriptions-item label="处理状态">
+            <el-tag v-show="formData.status == 'Untreated'" type="warning">未处理</el-tag>
+            <el-tag v-show="formData.status == 'Processed'" type="success">已处理</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="责任部门">{{ formData.department }}</el-descriptions-item>
+          <el-descriptions-item span="2" label="问题备注">{{ formData.remark }}</el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+      <el-card class="box-card">
+        <el-descriptions title="问题列表" :column="1" direction="vertical">
+          <el-descriptions-item v-for="item in formData.matter.split('|')">
+            {{ matterList[item] != undefined ? matterList[item].label : '' }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+      <el-card class="box-card">
+        <el-descriptions title="问题图片/视频" direction="vertical" :column="1">
+          <el-descriptions-item label="问题图片">
+            <span v-show="formData.imgList.length<1">无图片</span>
+            <img
+                v-for="img in formData.imgList"
+                style="width: 260px; height: 240px;padding-left: 1px"
+                :src="img"
+            >
+          </el-descriptions-item>
+          <el-descriptions-item label="问题视频">
+            <span v-show="formData.video.length<1">无视频</span>
+            <video
+                v-show="formData.video.length>0"
+                style="object-fit:fill"
+                controls
+                width="400"
+                height="240"
+                :src="formData.video"
+            >
+              您的浏览器不支持Video标签。
+            </video>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+      <el-card v-show="formData.status=='Processed'" class="box-card">
+        <el-descriptions title="处理结果" :column="1" border direction="vertical">
+          <el-descriptions-item label="处理人">{{ formData.handler }}</el-descriptions-item>
+          <el-descriptions-item label="处理内容">{{ formData.handText }}</el-descriptions-item>
+          <el-descriptions-item label="处理图片">
+            <img
+                v-for="img in formData.handImgList"
+                style="width: 260px; height: 240px;padding-left: 1px"
+                :src="img"
+            />
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { findProblemInfo } from '@/api/problemInfo'
+import Print from '@/utils/print'
+export default {
+  name: 'ProInfo',
+  data() {
+    return {
+      matterList: [],
+      formData: {
+        oper: 0,
+        handler: 0,
+        imgs: '',
+        imgList: [],
+        handImgList: [],
+        video: '',
+        siteId: 0,
+        position: '',
+        matter: '',
+        siteType: '',
+        remark: '',
+        status: '',
+        handImgs: '',
+        handText: '',
+        department: '',
+      }
+    }
+  },
+  async created() {
+    const res = await findProblemInfo({ID: this.$route.query.Id})
+    if (res.code === 0) {
+      this.formData = res.data.reproblemInfo
+      if (this.formData.imgs.length > 0) {
+        this.formData.imgList = this.formData.imgs.split('|')
+      } else {
+        this.formData.imgList = []
+      }
+      if (this.formData.handImgs.length > 0) {
+        this.formData.handImgList = this.formData.handImgs.split('|')
+      } else {
+        this.formData.handImgList = []
+      }
+      this.matterList = res.data.reproblemInfo.matterList.sysDictionaryDetails
+      this.dialogFormVisible = true
+    }
+  },
+  methods: {
+    printBtn() {
+      Print(this.$refs.print)
+      // window.print()
+      return
+    }
+  }
+}
+</script>
+
+<style scoped>
+@media print {
+  .print_hide {
+    display: none;
+  }
+
+  .print_content {
+    margin-top: 20px !important;
+  }
+}
+.box-card {
+  margin-bottom: 3px;
+}
+</style>

web/src/view/problemInfo/problemInfo.vue

@@ -4,18 +4,20 @@
       <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
         <el-form-item label="站点类型">
           <el-select v-model="searchInfo.siteType" clearable placeholder="请选择">
-            <el-option v-for="item in this.siteType" :label="item.label" :value="item.value"/>
+            <el-option v-for="item in siteType" :label="item.label" :value="item.value"/>
           </el-select>
         </el-form-item>
         <el-form-item label="处理状态">
           <el-select v-model="searchInfo.status" clearable placeholder="请选择">
-            <el-option label="已处理" value="0"></el-option>
-            <el-option label="未处理" value="1"></el-option>
+            <el-option label="已处理" value="Processed"/>
+            <el-option label="未处理" value="Untreated"/>
           </el-select>
         </el-form-item>
         <el-form-item>
           <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
-          <el-button class="excel-btn" size="small" type="primary" icon="el-icon-download" @click="handleExcelExport()">导出</el-button>
+          <el-button class="excel-btn" size="small" type="primary" icon="el-icon-download" @click="handleExcelExport()">
+            导出
+          </el-button>
           <el-popover v-model:visible="deleteVisible" placement="top" width="160">
             <p>确定要删除吗？</p>
             <div style="text-align: right; margin: 0">
@@ -50,10 +52,15 @@
       <el-table-column label="责任部门" prop="department" width="120"/>
       <el-table-column label="操作">
         <template #default="scope">
-          <el-button size="small" type="primary" class="table-button"
-                     @click="updateProblemInfo(scope.row)">查看详情
+          <el-button
+              size="small"
+              type="primary"
+              class="table-button"
+              @click="updateProblemInfo(scope.row)"
+          >查看详情
           </el-button>
           <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteRow(scope.row)">删除</el-button>
+          <el-button type="small" icon="el-icon-download" size="mini" @click="handlePdf(scope.row)">导出为pdf</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -67,7 +74,7 @@
         @current-change="handleCurrentChange"
         @size-change="handleSizeChange"
     />
-    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="问题详情">
+    <el-dialog ref="problemInfo" v-model="dialogFormVisible" id="problemInfo" :before-close="closeDialog" title="问题详情">
       <el-form :model="formData" label-position="right" label-width="80px">
         <el-card class="box-card">
           <el-descriptions title="基本信息" border :column="2">
@@ -80,13 +87,13 @@
               <el-tag v-show="formData.status == 'Processed'" type="success">已处理</el-tag>
             </el-descriptions-item>
             <el-descriptions-item label="责任部门">{{ formData.department }}</el-descriptions-item>
-            <el-descriptions-item span="2"  label="问题备注">{{ formData.remark }}</el-descriptions-item>
+            <el-descriptions-item span="2" label="问题备注">{{ formData.remark }}</el-descriptions-item>
           </el-descriptions>
         </el-card>
         <el-card class="box-card">
           <el-descriptions title="问题列表" :column="1" direction="vertical">
             <el-descriptions-item v-for="item in formData.matter.split('|')">
-              {{ this.matterList[item] != undefined ? this.matterList[item].label : '' }}
+              {{ matterList[item] != undefined ? matterList[item].label : '' }}
             </el-descriptions-item>
           </el-descriptions>
         </el-card>
@@ -96,18 +103,25 @@
               <el-image
                   style="width: 260px; height: 240px"
                   :src="(formData.imgList.length>0?formData.imgList[0]:'')"
-                  :preview-src-list="formData.imgList">
-              </el-image>
+                  :preview-src-list="formData.imgList"
+              />
             </el-descriptions-item>
             <el-descriptions-item label="问题视频">
               <span v-show="formData.video.length<1">无视频</span>
-              <video style="object-fit:fill" controls width="400" height="240" v-show="formData.video.length>0" :src="formData.video">
+              <video
+                  v-show="formData.video.length>0"
+                  style="object-fit:fill"
+                  controls
+                  width="400"
+                  height="240"
+                  :src="formData.video"
+              >
                 您的浏览器不支持Video标签。
               </video>
             </el-descriptions-item>
           </el-descriptions>
         </el-card>
-        <el-card class="box-card" v-show="formData.status=='Processed'">
+        <el-card v-show="formData.status=='Processed'" class="box-card">
           <el-descriptions title="处理结果" :column="1" border direction="vertical">
             <el-descriptions-item label="处理人">{{ formData.handler }}</el-descriptions-item>
             <el-descriptions-item label="处理内容">{{ formData.handText }}</el-descriptions-item>
@@ -115,8 +129,8 @@
               <el-image
                   style="width: 260px; height: 240px"
                   :src="(formData.handImgList.length>0?formData.handImgList[0]:'')"
-                  :preview-src-list="formData.handImgList">
-              </el-image>
+                  :preview-src-list="formData.handImgList"
+              />
             </el-descriptions-item>
           </el-descriptions>
         </el-card>
@@ -195,6 +209,11 @@ export default {
         this.deleteProblemInfo(row)
       })
     },
+    async handlePdf(row) {
+      const href = window.location.origin
+      const params = `/#/proInfo?Id=${row.ID}`
+      window.open(href + params, '_blank','width=1200,height=1000,location=no,toolbar=no,status=no,scrollbars=yes,titlebar=no,')
+    },
     async onDelete() {
       const ids = []
       if (this.multipleSelection.length === 0) {
@@ -236,7 +255,7 @@ export default {
         } else {
           this.formData.handImgList = []
         }
-        this.matterList = await getDict('site_' + this.formData.siteId)
+        this.matterList = res.data.reproblemInfo.matterList.sysDictionaryDetails
         this.dialogFormVisible = true
       }
     },