diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseList.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseList.vue
index a5cae60f5..6e291a5a3 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseList.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseList.vue
@@ -162,7 +162,9 @@
       titleClick(item) {
         let newUrl = this.$router.resolve({
           path: '/problemKnowledgeBaseView',
-          query: {}
+          query: {
+            id: item.id
+          }
         })
         window.open(newUrl.href, '_blank')
       }
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseView.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseView.vue
index 2d85b178d..c90f35272 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseView.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseView.vue
@@ -21,30 +21,23 @@
 
               <span class="text-field-right"
                     :title="queryForm[item.value]" v-else>
-                {{queryForm[item.value]}}fdgdgdfg
+                {{queryForm[item.value]}}
               </span>
             </div>
           </div>
-          <div class="content">
-            sfdsfdsf的防控流感的飞机过来看的结果东法兰克感觉地方给了地方国家的分开两个就地方孤苦伶仃附件给领导反馈
-            独守空房了就收到付款了的角色发看来都是风景但是考虑附件第三方库老师积分迪斯科浪费绝对是分类的课时费
-            是反抗拉萨的飞机罗斯福就点十六分就但是发
-            迪斯科浪费电视机分厘卡的设计分类的水库附近的说服力但是积分的历史房价多少发了多少给京东方管理看豆腐干豆腐干看
-            a fjsd fklsdjfk s是否考虑技术的反抗类毒素就发的撒开了房间但是发离开打扫房间是开了房间都是老师JFK了的身份圣诞快乐就是的反抗类毒素解放迪斯科浪费是
-            考虑到房价打开拉萨附近分离技术的领导是否打开拉萨范德萨发了开始就发的考虑是否就但是考虑发及代理商开发就十分大师傅看
-          </div>
+          <div class="content" v-html="queryForm.content"></div>
           <div class="content-icon">
               <span class="content-icon-text">
                     <a-icon class="icon" type="eye"/>
-                    <span>123456</span>
+                    <span>{{this.queryForm.browsingHistoryCount}}</span>
               </span>
-            <span class="content-icon-text">
-                <a-icon class="icon" type="like"/>
-                 <span>123456</span>
+            <span class="content-icon-text" @click="likeClick()">
+                <a-icon class="icon" :class="{'icon-active':this.isPraise}" type="like"/>
+                 <span>{{this.queryForm.praiseCount}}</span>
               </span>
-            <span class="content-icon-text">
-                <a-icon class="icon" type="star"/>
-                 <span>123456</span>
+            <span class="content-icon-text" @click="starClick()">
+                <a-icon class="icon" :class="{'icon-active':this.isCollect}" type="star"/>
+                 <span>{{this.queryForm.collectCount}}</span>
               </span>
           </div>
           <div class="box-text">
@@ -107,7 +100,8 @@
 
 <script>
   import viewFileModel from '@/components/viewFileModel/index'
-  import { getAction, postAction, downloadFile } from '@/api/manage'
+  import { getAction, postAction, downloadFile, putAction } from '@/api/manage'
+  import { mapGetters } from 'vuex'
 
   export default {
     name: 'problemKnowledgeBaseView',
@@ -119,35 +113,114 @@
         standardContentList: [
           {
             title: this.$t('problemClassification'),
-            value: ''
+            value: 'problemType'
           },
           {
             title: this.$t('market'),
-            value: ''
+            value: 'targetMarket'
           },
           {
             title: this.$t('standardNo'),
-            value: ''
+            value: 'standNumber'
           },
           {
             title: this.$t('standardName'),
-            value: ''
+            value: 'title'
           },
           {
             title: this.$t('enclosure'),
             type: 2,
-            value: ''
+            value: 'accessoryFile'
           }
         ],
         queryForm: {},
         formInline: {},
-        rules: {}
+        rules: {},
+        isPraise: false,
+        isCollect: false
       }
     },
     mounted() {
       document.title = this.$t('applicableInstructionsMarketList')
+      this.viewAdd()
+      this.queryById()
     },
     methods: {
+      ...mapGetters(['userInfo']),
+      queryById() {
+        let query = {
+          id: this.$route.query.id
+        }
+        getAction('/problemKnowledgeBase/problemKnowledgeBaseEO/queryById', query).then((res) => {
+          if (res.success) {
+            this.queryForm = res.result || {}
+            this.queryForm = { ...this.queryForm }
+            if (this.formInline.showPermissions == 'Privacy') {
+              this.isDisplay = true
+            } else {
+              this.isDisplay = false
+            }
+            if (this.queryForm.praiseEO && this.queryForm.praiseEO.praiseStatus == 'Praise') {
+              this.isPraise = true
+            } else {
+              this.isPraise = false
+            }
+            if (this.queryForm.collectEO && this.queryForm.collectEO.collectStatus == 'Collect') {
+              this.isCollect = true
+            } else {
+              this.isCollect = false
+            }
+          } else {
+            this.formInline = {}
+          }
+        })
+      },
+      viewAdd() {
+        let query = {
+          problemKnowledgeBaseId: this.$route.query.id,
+          browsingUserId: this.userInfo().id
+        }
+        postAction('/problemKnowledgeBase/problemKnowledgeBaseBrowsingHistoryEO/add', query).then((res) => {
+        })
+      },
+      likeClick() {
+        let praiseStatus = ''
+        this.isPraise = !this.isPraise
+        if (this.isPraise) {
+          praiseStatus = 'Praise'
+          this.queryForm.praiseCount = this.queryForm.praiseCount + 1
+        } else {
+          praiseStatus = 'Cancel praise'
+          this.queryForm.praiseCount = this.queryForm.praiseCount - 1
+        }
+        let query = {
+          problemKnowledgeBaseId: this.$route.query.id,
+          praiseUserId: this.userInfo().id,
+          praiseStatus: praiseStatus,
+          id: this.queryForm.praiseEO ? this.queryForm.praiseEO.id : undefined
+        }
+        putAction('/problemKnowledgeBase/problemKnowledgeBasePraiseEO/edit', query).then((res) => {
+        })
+      },
+      starClick() {
+        let collectStatus = ''
+        this.isCollect = !this.isCollect
+        if (this.isCollect) {
+          collectStatus = 'Collect'
+          this.queryForm.collectCount = this.queryForm.collectCount + 1
+        } else {
+          collectStatus = 'Cancel Collect'
+          this.queryForm.collectCount = this.queryForm.collectCount - 1
+        }
+        let query = {
+          problemKnowledgeBaseId: this.$route.query.id,
+          collectUserId: this.userInfo().id,
+          collectStatus: collectStatus,
+          id: this.queryForm.collectEO ? this.queryForm.collectEO.id : undefined
+        }
+        putAction('/problemKnowledgeBase/problemKnowledgeBaseCollectEO/edit', query).then((res) => {
+        })
+      },
       clickButtonToUpload(item) {
         this.$refs.viewFileModelRef.clickButtonToUpload(item)
       },
@@ -287,13 +360,17 @@
     font-weight: 400;
     text-align: right;
     margin-top: 20px;
+    display: flex;
+    justify-content: end;
   }
 
   .content-icon-text {
-    display: inline-block;
+    /*display: inline-block;*/
     padding: 0 20px;
     cursor: pointer;
     line-height: 40px;
+    display: flex;
+    align-items: center;
   }
 
   .content-icon-text .icon {
@@ -301,6 +378,11 @@
     color: #3b4249 !important;
   }
 
+  .content-icon-text .icon-active {
+    font-size: 24px;
+    color: #00B3BE !important;
+  }
+
   .content-icon-text span {
     display: inline-block;
     margin-left: 4px;