备监控新增原图查看

src/assets/styles/iview-custom.less

@@ -198,7 +198,7 @@
 .ivu-btn + .ivu-btn {
   margin-left: 10px;
 }
-.ivu-btn {
+.ivu-btn-default {
   .ivu-icon {
     font-size: 16px;
     color: @primary-color;

src/assets/styles/main.less

@@ -220,6 +220,13 @@
   .image-view-list {
     flex-grow: 2;
   }
+  .page-action {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
 }
 
 // image-action-list

src/modules/main/ClientMonitor.vue

@@ -1,9 +1,24 @@
 <template>
   <div class="client-monitor page-container-flex">
-    <div class="page-reload" @click="getList"><Icon type="md-refresh" /></div>
+    <div class="page-action">
+      <div class="set-navs">
+        <div
+          :class="[
+            'set-navs-item',
+            { 'set-navs-item-act': curNav === nav.name }
+          ]"
+          v-for="nav in navs"
+          :key="nav.name"
+          @click="switchNav(nav.name)"
+        >
+          {{ nav.title }}
+        </div>
+      </div>
+      <Button type="success" icon="md-refresh" @click="getList">查询</Button>
+    </div>
 
     <div class="image-view-list image-view-list-5">
-      <div class="image-view" v-for="(image, index) in papers" :key="image.id">
+      <div class="image-view" v-for="(image, index) in papers" :key="image.key">
         <div class="image-view-container">
           <h5 class="image-view-title">{{ image.title }}</h5>
           <div class="image-view-contain" :style="image.styles">
@@ -52,9 +67,21 @@ export default {
       size: this.GLOBAL.pageSize,
       total: 0,
       totalPage: 0,
+      dataList: [],
       papers: [],
       curPaper: {},
-      curPaperIndex: 0
+      curPaperIndex: 0,
+      navs: [
+        {
+          name: "tailor",
+          title: "阅卷图"
+        },
+        {
+          name: "origin",
+          title: "原图"
+        }
+      ],
+      curNav: "tailor"
     };
   },
   mounted() {
@@ -67,12 +94,10 @@ export default {
         page: this.current - 1,
         size: this.size
       });
-      this.papers = data.data.map(item => {
-        item.title = item.createUserName;
-        return item;
-      });
+      this.dataList = data.data;
       this.total = data.totalCount;
       this.totalPage = data.pageCount;
+      this.switchNav(this.curNav);
     },
     toPage(page) {
       this.current = page;
@@ -82,6 +107,22 @@ export default {
       this.selectPaper(index);
       this.$refs.SimpleImagePreview.open();
     },
+    switchNav(navName) {
+      this.curNav = navName;
+      this.papers = this.dataList.map(item => {
+        let nitem = { ...item };
+        nitem.title = item.createUserName;
+        nitem.key = this.$randomCode();
+        if (this.curNav === "origin") {
+          nitem.imgSrc = item.sheetSrc;
+          nitem.thumbSrc = item.sheetSrc;
+        } else {
+          nitem.imgSrc = item.imgSrc;
+          nitem.thumbSrc = item.thumbSrc;
+        }
+        return nitem;
+      });
+    },
     selectPaper(index) {
       let nindex = index;
       if (!this.papers.length) {