diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardList.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardList.vue
index e9280d893..61e974e72 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardList.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardList.vue
@@ -38,7 +38,7 @@
     </div>
     <div class="content-box">
       <div class="content-box-box" v-for="(item,index) in conList" :key="index" @click="contentClick(item)">
-        <img src="../../../../assets/mobileHome.png" class="content-box-box-img" alt="">
+        <img :src="item.countryNationalFlag" class="content-box-box-img" alt="">
         <span class="content-box-box-text">
              {{item.applyMarket_dictText}}
         </span>
@@ -144,7 +144,7 @@
           path: '/countryCardView',
           query: {
             applyMarket: row.applyMarket,
-            id: row.id,
+            id: row.id
           }
         })
         window.open(newUrl.href, '_blank')
@@ -216,14 +216,14 @@
   }
 
   .content-box-box-img {
-    width: 70%;
+    width: 238px;
     height: 100%;
     border-right: 1px #d9d9d9 solid;
   }
 
   .content-box-box-text {
+    width: calc(100% - 238px);
     display: inline-block;
-    width: 30%;
     text-align: center;
     font-size: 18px;
     font-weight: 500;
@@ -234,6 +234,7 @@
     width: 100%;
     text-align: right;
     margin-top: 20px;
+    margin-bottom: 20px;
   }
 
   .operator-text {
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue
index 6c194fd8a..e73433631 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue
@@ -23,22 +23,37 @@
           </div>
           <div style="overflow: auto;height: calc(100vh - 160px);">
             <div class="content-box" :style="{'width':clientWidth}" v-if="isTrue">
-              <div style="width: 100%" v-for="(item1,index) in 14" class="content-box-top">
-                <div v-for="(item2,index2) in 16" style="width: 340px;display: inline-block" class="content-box-left">
+              <div style="width: 100%" v-for="(item1,index) in contentList" class="content-box-top">
+                <div v-for="(item2,index2) in item1.list" style="width: 340px;display: inline-block"
+                     class="content-box-left">
                   <div class="content-box-box-top" v-if="index == 0">
                     <img class="content-box-box-img" style="display: inline-block;width: auto" v-if="index2 == 0">
-                    <img src="../../../../assets/mobileHome.png" v-else class="content-box-box-img" alt="">
+                    <img :src="item2.img" v-else class="content-box-box-img" alt="">
                     <span v-if="index2 == 0" class="content-box-box-text"></span>
                     <span v-else class="content-box-box-text">
-                      中国
+                      {{item2.applyMarket_dictText}}
                     </span>
 
                   </div>
                   <div class="content-box-box" v-else>
-                    <img src="../../../../assets/mobileHome.png" class="content-box-box-img" alt="">
-                    <span class="content-box-box-text">
-                      中国
-                  </span>
+                    <span style="color: #21c9cc"
+                          :class="{'content-box-box-text-admin':!item2.lableName || item2.lableName == 'null' || item2.lableName == 'undefined'? true : false}"
+                          class="content-box-box-text content-box-box-text-index"
+                          @click="viewFileClick(item2.lableName)"
+                          v-if="item2.lableType == 7 && item2.lableName && index2 != 0">
+                         {{$t('viewFile')}}
+                    </span>
+                    <span class="content-box-box-text content-box-box-text-index"
+                          v-else
+                          :title="item2.lableName"
+                          :class="{'content-box-box-text-admin':!item2.lableName || item2.lableName == 'null' || item2.lableName == 'undefined'? true : false}">
+                        {{item2.lableName}}
+                    </span>
+
+                    <!--                    <img src="../../../../assets/mobileHome.png" class="content-box-box-img" alt="">-->
+                    <!--                    <span class="content-box-box-text">-->
+                    <!--                      中国-->
+                    <!--                  </span>-->
                   </div>
                 </div>
               </div>
@@ -47,8 +62,11 @@
         </div>
       </div>
     </div>
-    <displayInformationModel ref="displayInformationModelRef"/>
+    <displayInformationModel ref="displayInformationModelRef"
+                             @displayInformationModelForm="displayInformationModelForm"/>
     <countryCardViewAdd ref="countryCardViewAddRef" @countryCardViewAddForm="countryCardViewAddForm"/>
+    <JLoading :loading="loading">{{$t('dataLoading')}}</JLoading>
+    <viewFileModel ref="viewFileModelRef"/>
   </div>
 </template>
 
@@ -56,49 +74,155 @@
   import { getAction, postAction, downloadFile } from '@/api/manage'
   import displayInformationModel from './displayInformationModel'
   import countryCardViewAdd from './countryCardViewAdd'
+  import viewFileModel from '@/components/viewFileModel/index'
 
   export default {
     name: 'countryCardView',
     components: {
       displayInformationModel,
-      countryCardViewAdd
+      countryCardViewAdd,
+      viewFileModel
     },
     data() {
       return {
         clientWidth: '',
         isTrue: false,
+        loading: false,
         dataList: [],
+        contentList: [],
+        displayList: [],
+        queryCountryList: [],
+        countryCardViewList:[],
+        applyMarkets: '',
+        url: {
+          list: '/problemKnowledgeBase/countryCardTempEO/list',
+          deleteOne: ''
+        },
         list: '/problemKnowledgeBase/countryCardManageReleaseEO/queryCountryCardManageReleaseByApplyMarkets'
       }
     },
     mounted() {
-      this.isTrue = false
-      this.$nextTick(() => {
-        this.clientWidth = 340 * 14 + 'px'
-        this.isTrue = true
+      this.queryCountry(() => {
+        this.replacePage()
       })
-      this.queryCountry()
     },
     methods: {
       displayInformationClick() {
-        this.$refs.displayInformationModelRef.getData()
+        this.$refs.displayInformationModelRef.getData(JSON.parse(JSON.stringify(this.displayList)))
+      },
+      displayInformationModelForm(data) {
+        this.displayList = data
+        this.displayList = [...this.displayList]
+        this.consolidateData()
       },
       newlyAddedClick() {
-        this.$refs.countryCardViewAddRef.add()
+        this.$refs.countryCardViewAddRef.add(this.countryCardViewList)
       },
       countryCardViewAddForm(val) {
-
+        this.countryCardViewList = JSON.parse(JSON.stringify(val))
+        let content = []
+        if (val && val.length > 0) {
+          val.forEach(res => {
+            if (res.applyMarket) {
+              content.push(res.applyMarket)
+            }
+          })
+        }
+        this.applyMarkets = content.join(',')
+        this.queryCountry()
       },
-      queryCountry() {
+      replacePage() {
+        getAction(this.url.list, {}).then((res) => {
+          if (res.success) {
+            this.displayList = res.result || []
+            this.displayList.forEach(val => {
+              val.showOrNot = true
+            })
+            this.consolidateData()
+            this.loading = false
+          } else {
+            this.displayList = []
+            this.loading = false
+          }
+        })
+      },
+      consolidateData() {
+        let content = []
+        this.contentList = []
+        this.contentList.push({})
+        if (this.displayList && this.displayList.length > 0) {
+          this.displayList.forEach(res => {
+            if (res.showOrNot) {
+              content.push(res)
+            }
+          })
+        }
+        if (this.queryCountryList && this.queryCountryList.length > 0) {
+          this.contentList[0].list = []
+          this.contentList[0].list.push({})
+          this.queryCountryList.forEach(val => {
+            this.contentList[0].name = 'tou'
+            this.contentList[0].list.push({
+              applyMarket_dictText: val.applyMarket_dictText,
+              img: val.countryNationalFlag
+            })
+          })
+        }
+        if (content && content.length > 0) {
+          content.forEach((res, index) => {
+            this.contentList[index + 1] = { name: res.lableName }
+            this.contentList[index + 1].list = []
+            this.contentList[index + 1].list.push({
+              lableName: res.lableName,
+              lableType: res.lableType
+            })
+          })
+        }
+        this.queryCountryList.forEach((res, index) => {
+          res.countryCardManageReleaseDetailEOList.forEach((val, index1) => {
+            this.contentList.forEach(res1 => {
+              if (res1.name == val.lableName) {
+                res1.list.push({
+                  lableName: val.content,
+                  lableType: val.lableType
+                })
+              }
+            })
+          })
+        })
+        console.log(this.contentList)
+      },
+      queryCountry(callback) {
+        this.loading = true
         let applyMarkets = this.$route.query.applyMarket
+        if (this.applyMarkets) {
+          applyMarkets = applyMarkets + ',' + this.applyMarkets
+        }
         let query = {
           applyMarkets: applyMarkets
         }
         postAction(this.list, query).then((res) => {
           if (res.success) {
-
+            this.queryCountryList = res.result || []
+            this.isTrue = false
+            this.$nextTick(() => {
+              this.clientWidth = 340 * (this.queryCountryList.length + 1) + 'px'
+              this.isTrue = true
+            })
+            callback && callback()
+            if (!callback) {
+              this.consolidateData()
+              this.loading = false
+            }
+          } else {
+            callback && callback()
+            this.contentList = []
+            this.loading = false
           }
         })
+      },
+      viewFileClick(item) {
+        this.$refs.viewFileModelRef.clickButtonToUpload(item)
       }
     }
   }
@@ -218,6 +342,8 @@
     width: 340px;
     display: inline-block;
     height: 80px;
+    line-height: 80px;
+    text-align: center;
     background: #fff;
     border-right: 1px #d9d9d9 solid;
     border-bottom: 1px #d9d9d9 solid;
@@ -249,10 +375,28 @@
     background: #fff;
   }
 
+  .content-box-top {
+    height: 80px;
+  }
+
   .content-box-top:first-child {
     position: sticky;
     top: 0;
+    height: 160px;
     z-index: 111;
     background: #fff;
   }
+
+  .content-box-box-text-index {
+    width: 100% !important;
+    padding: 0 12px;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .content-box-box-text-admin {
+    height: 80px !important;
+  }
 </style>
\ No newline at end of file
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardViewAdd.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardViewAdd.vue
index 2c1767b7a..39181fe65 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardViewAdd.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardViewAdd.vue
@@ -31,7 +31,6 @@
         <a-col :span="24">
           <div class="box-title-text">
             <div class="title-text">
-              <span class="Required">*</span>
               <span class="title-text-text" :title="$t('comparisonMarket')+(index+1)">{{$t('comparisonMarket')+(index+1)}}</span>
             </div>
             <a-form-model-item class="itemModel" style="width: calc(100% - 220px)" prop="comparisonMarket">
@@ -111,14 +110,19 @@
     mounted() {
     },
     methods: {
-      add() {
+      add(data) {
         this.visible = true
+        console.log(data)
         this.$nextTick(() => {
           this.formInline = {}
           this.formInline.applyMarket = this.$route.query.applyMarket
-          this.formInline.dataList = [{
-            relatedSection: ''
-          }]
+          if (data && data.length > 0) {
+            this.formInline.dataList = JSON.parse(JSON.stringify(data))
+          } else {
+            this.formInline.dataList = [{
+              applyMarket: ''
+            }]
+          }
           this.getList()
           this.formInline = { ...this.formInline }
           this.$refs.ruleForm.clearValidate()
@@ -129,11 +133,8 @@
         this.formInline = { ...this.formInline }
       },
       handleOk() {
-        this.$refs.ruleForm.validate(valid => {
-          if (valid) {
-
-          }
-        })
+        this.$emit('countryCardViewAddForm', JSON.parse(JSON.stringify(this.formInline.dataList)))
+        this.visible = false
       },
       handleCancel() {
         this.visible = false
@@ -185,8 +186,6 @@
           for (let j = 0; j < this.formInline.dataList[i].applyMarketList.length; j++) {
             if (contentIndex.includes(this.formInline.dataList[i].applyMarketList[j].applyMarket)
               && this.formInline.dataList[i].applyMarket != this.formInline.dataList[i].applyMarketList[j].applyMarket) {
-              console.log(111)
-              console.log(j)
               this.formInline.dataList[i].applyMarketList.splice(j, 1)
               j--
             }
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/displayInformationModel.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/displayInformationModel.vue
index a6f01a5c3..724dc4f46 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/displayInformationModel.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/displayInformationModel.vue
@@ -11,13 +11,15 @@
       style="height: 100%;overflow: auto;padding-bottom: 53px;">
       <div style="margin-bottom: 60px">
         <a-table
+          v-if="this.visible"
+          :key="'id'"
           :columns="columns"
           :scroll="{x: '100%',y:'calc(100vh - 200px)'}"
           :data-source="dataList"
           :pagination="false"
           :loading="loading">
-           <span slot="showOrNot" slot-scope="text,record">
-              <a-checkbox :value="text"></a-checkbox>
+           <span slot="showOrNot" slot-scope="text,record,index">
+                 <a-checkbox :checked="record.showOrNot" @change="onCheckAllChange(index)"></a-checkbox>
            </span>
         </a-table>
       </div>
@@ -65,28 +67,23 @@
     mounted() {
     },
     methods: {
-      getData() {
+      getData(data) {
         this.visible = true
-        this.replacePage()
+        this.$nextTick(() => {
+          this.dataList = data
+          this.dataList = [...this.dataList]
+        })
       },
       handleCancel() {
         this.visible = false
       },
       handleSubmit() {
-
-      },
-      replacePage() {
-        this.loading = true
-       getAction(this.url.list, {}).then((res) => {
-          if (res.success) {
-            this.dataList = res.result || []
-            this.loading = false
-          } else {
-            this.dataList = []
-            this.loading = false
-          }
-        })
+        this.$emit('displayInformationModelForm', this.dataList)
+        this.visible = false
       },
+      onCheckAllChange(index) {
+        this.dataList[index].showOrNot = !this.dataList[index].showOrNot
+      }
     }
   }
 </script>