style:材料信息

+<template>
+  <div style="width: 100%;height: 100%">
+    <vue-photo-zoom-pro :width="bigWidth" :url="url" :type="type" :scale="scale" :out-show="showType"
+      :overlayStyle="overlayStyle">
+    </vue-photo-zoom-pro>
+  </div>
+</template>
+
+<script>
+  import vuePhotoZoomPro from '@/components/photo-zoom/vue-photo-zoom-pro'
+  export default {
+    name: 'PicZoom',
+    components: { vuePhotoZoomPro },
+    data() {
+      return {
+        type: "square",
+        showType: false,
+      }
+    },
+    props: {
+      url: {
+        type: String,
+        required: true,
+        // default: require('@/assets/vehicle_img/blank_vehicle.jpg') 
+      },
+      bigWidth: {
+        type: Number,
+        required: true,
+        default: 168
+      },
+      scale: {
+        type: Number,
+        required: true,
+        default: 2
+      },
+      overlayStyle: {
+        type: String,
+        default: 'width:100%;height:100%'
+      }
+    },
+  }
+</script>
\ No newline at end of file

+<template>
+  <div class="pic-img">
+    <div class="img-container">
+      <img ref="img" @load="imgLoaded" :src="url" :style="overlayStyle" @error="imgerrorfun" />
+      <div class="overlay" @mousemove.stop="!moveEvent && mouseMove($event)"
+        @mouseout.stop="!leaveEvent && mouseLeave($event)" :style="overlayStyle">
+      </div>
+      <div v-if="!hideZoom && imgLoadedFlag &&!hideSelector" :class="['img-selector', {'circle': type === 'circle'}]"
+        :style="[imgSelectorStyle, imgSelectorSize, imgSelectorPosition, !outShow && imgBg, !outShow && imgBgSize, !outShow && imgBgPosition]">
+        <slot></slot>
+      </div>
+      <div v-if="outShow" v-show="!hideOutShow" :class="['img-out-show', {'base-line': baseline}]"
+        :style="[imgOutShowSize, imgOutShowPosition, imgBg, imgBgSize, imgBgPosition]">
+        <div v-if="pointer" class="img-selector-point"></div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  export default {
+    name: "vue-photo-zoom-pro",
+    props: {
+      url: {
+        type: String,
+      },
+      highUrl: String,
+      width: {
+        type: Number,
+        default: 168
+      },
+      type: {
+        type: String,
+        default: "square",
+        validator: function (value) {
+          return ["circle", "square"].indexOf(value) !== -1;
+        }
+      },
+      selectorStyle: {
+        type: Object,
+        default () {
+          return {};
+        }
+      },
+      outShowStyle: {},
+      scale: {
+        type: Number,
+        default: 3
+      },
+      moveEvent: {
+        type: [Object, MouseEvent],
+        default: null
+      },
+      leaveEvent: {
+        type: [Object, MouseEvent],
+        default: null
+      },
+      hideZoom: {
+        type: Boolean,
+        default: false
+      },
+      outShow: {
+        type: Boolean,
+        default: false
+      },
+      pointer: {
+        type: Boolean,
+        default: false
+      },
+      baseline: {
+        type: Boolean,
+        default: false
+      },
+      overlayStyle: {
+        type: String,
+        default: 'width:100%;height:100%'
+      },
+    },
+    data () {
+      return {
+        selector: {
+          width: this.width,
+          top: 0,
+          left: 0,
+          bgTop: 0,
+          bgLeft: 0,
+          rightBound: 0,
+          bottomBound: 0,
+          absoluteLeft: 0,
+          absoluteTop: 0
+        },
+        imgInfo: {},
+        $img: null,
+        screenWidth: document.body.clientWidth,
+        outShowInitTop: 0,
+        outShowTop: 0,
+        hideOutShow: true,
+        imgLoadedFlag: false,
+        hideSelector: false,
+        timer: null
+      };
+    },
+    watch: {
+      moveEvent (e) {
+        this.mouseMove(e);
+      },
+      leaveEvent (e) {
+        this.mouseLeave(e);
+      },
+      url (n) {
+        this.imgLoadedFlag = false;
+      },
+      width (n) {
+        this.initSelectorProperty(n);
+      },
+      screenWidth (val) {
+        if (!this.timer) {
+          this.screenWidth = val;
+          this.timer = setTimeout(() => {
+            this.imgLoaded();
+            clearTimeout(this.timer);
+            this.timer = null;
+          }, 400);
+        }
+      }
+    },
+    computed: {
+      addWidth () {
+        return !this.outShow ? (this.width / 2) * (1 - this.scale) : 0;
+      },
+      imgSelectorPosition () {
+        let { top, left } = this.selector;
+        return {
+          top: `${top}px`,
+          left: `${left}px`
+        };
+      },
+      imgSelectorSize () {
+        let width = this.selector.width;
+        return {
+          width: `${width}px`,
+          height: `${width}px`,
+          borderRadius: '50%'
+        };
+      },
+      imgSelectorStyle () {
+        return this.selectorStyle;
+      },
+      imgOutShowSize () {
+        let {
+          scale,
+          selector: { width }
+        } = this;
+        return {
+          width: `${width * scale}px`,
+          height: `${width * scale}px`
+        };
+      },
+      imgOutShowPosition () {
+        return {
+          top: `${this.outShowTop}px`,
+          right: `${-8}px`
+        };
+      },
+      imgBg () {
+        return {
+          backgroundImage: `url(${this.highUrl || this.url})`
+        };
+      },
+      imgBgSize () {
+        let {
+          scale,
+          imgInfo: { height, width }
+        } = this;
+        return {
+          backgroundSize: `${width * scale}px ${height * scale}px`
+        };
+      },
+      imgBgPosition () {
+        let { bgLeft, bgTop } = this.selector;
+        return {
+          backgroundPosition: `${bgLeft}px ${bgTop}px`
+        };
+      },
+    },
+    mounted () {
+      this.$img = this.$refs["img"];
+    },
+    methods: {
+      imgLoaded () {
+        let imgInfo = this.$img.getBoundingClientRect();
+        if (JSON.stringify(this.imgInfo) != JSON.stringify(imgInfo)) {
+          this.imgInfo = imgInfo;
+          this.initSelectorProperty(this.width);
+          this.resetOutShowInitPosition();
+        }
+        if (!this.imgLoadedFlag) {
+          this.imgLoadedFlag = true;
+          this.$emit("created", imgInfo);
+        }
+      },
+      mouseMove (e) {
+        if (!this.hideZoom && this.imgLoadedFlag) {
+          this.imgLoaded();
+          const { pageX, pageY, clientY } = e;
+          const { scale, selector, outShow, addWidth, outShowAutoScroll } = this;
+          let { outShowInitTop } = this;
+          const scrollTop = pageY - clientY;
+          const { absoluteLeft, absoluteTop, rightBound, bottomBound } = selector;
+          const x = pageX - absoluteLeft; // 选择器的x坐标 相对于图片
+          const y = pageY - absoluteTop; // 选择器的y坐标
+          if (outShow) {
+            if (!outShowInitTop) {
+              outShowInitTop = this.outShowInitTop = scrollTop + this.imgInfo.top;
+            }
+            this.hideOutShow && (this.hideOutShow = false);
+            this.outShowTop =
+              scrollTop > outShowInitTop ? scrollTop - outShowInitTop : 0;
+          }
+          this.hideSelector && (this.hideSelector = false);
+          selector.top = y > 0 ? (y < bottomBound ? y : bottomBound) : 0;
+          selector.left = x > 0 ? (x < rightBound ? x : rightBound) : 0;
+          selector.bgLeft = addWidth - x * scale; // 选择器图片的坐标位置
+          selector.bgTop = addWidth - y * scale;
+        }
+      },
+      initSelectorProperty (selectorWidth) {
+        const selectorHalfWidth = selectorWidth / 2;
+        const selector = this.selector;
+        const { width, height, left, top } = this.imgInfo;
+        const { scrollLeft, scrollTop } = document.documentElement;
+        selector.width = selectorWidth;
+        selector.rightBound = width - selectorWidth;
+        selector.bottomBound = height - selectorWidth;
+        selector.absoluteLeft = left + selectorHalfWidth + scrollLeft;
+        selector.absoluteTop = top + selectorHalfWidth + scrollTop;
+      },
+      mouseLeave () {
+        this.hideSelector = true;
+        if (this.outShow) {
+          this.hideOutShow = true;
+        }
+      },
+      reset () {
+        Object.assign(this.selector, {
+          top: 0,
+          left: 0,
+          bgLeft: 0,
+          bgTop: 0
+        });
+        this.resetOutShowInitPosition();
+      },
+      resetOutShowInitPosition () {
+        this.outShowInitTop = 0;
+      },
+      imgerrorfun (e) {
+        // let img = require('@/assets/vehicle_img/blank_vehicle.jpg')
+        // this.url = img
+        // e.target.src = img
+        // e.target.onerror= null
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  .img-container {
+    position: relative;
+    max-width: 82%;
+    margin: 0 auto;
+  }
+  .overlay {
+    cursor: crosshair;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.5;
+    z-index: 3;
+  }
+  .img-selector {
+    position: absolute;
+    cursor: crosshair;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    background-repeat: no-repeat;
+    background-color: rgba(64, 64, 64, 0.6);
+  }
+  .img-selector.circle {
+    border-radius: 50%;
+  }
+  .img-out-show {
+    z-index: 5000;
+    position: absolute;
+    background-repeat: no-repeat;
+    -webkit-background-size: cover;
+    background-color: white;
+    transform: translate(100%, 0);
+  }
+  .img-selector-point {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: black;
+  }
+  .img-out-show.base-line::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: "";
+    width: 1px;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .img-out-show.base-line::before {
+    position: absolute;
+    box-sizing: border-box;
+    content: "";
+    height: 1px;
+    border: 1px dashed rgba(0, 0, 0, 0.36);
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+</style>
\ No newline at end of file

+<template>
+  <el-image-viewer
+    :on-close="closeViewer"
+    :url-list="urlList">
+  </el-image-viewer>
+</template>
+
+<script>
+  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+  export default {
+    components: {
+      ElImageViewer,
+    },
+    props: {
+      urlList: {
+        type: Array,
+        default: function () {
+          return []
+        },
+      },
+    },
+    data () {
+      return {
+        wrapperElem: null,
+      }
+    },
+    mounted () {
+      this.$nextTick(() => {
+        let wrapper = document.getElementsByClassName(
+          'el-image-viewer__actions__inner'
+        )
+        let downImg = document.createElement('i')
+        downImg.setAttribute('class', 'el-icon-download')
+        wrapper[0].appendChild(downImg)
+        if (wrapper.length > 0) {
+          this.wrapperElem = wrapper[0]
+          this.wrapperElem.addEventListener('click', this.hideCusBtn)
+        }
+      })
+    },
+    methods: {
+      closeViewer () {
+        this.$emit('close-viewer')
+      },
+      hideCusBtn (e) {
+        let className = e.target.className
+        if (className === 'el-icon-download') {
+          let imgUrl = document.getElementsByClassName(
+            'el-image-viewer__canvas'
+          )[0].children[0].src
+          this.downloadImage(imgUrl)
+        }
+      },
+      downloadImage (imgUrl) {
+        let tmpArr = imgUrl.split('/')
+        let fileName = tmpArr[tmpArr.length - 1]
+        window.URL = window.URL || window.webkitURL
+        let xhr = new XMLHttpRequest()
+        xhr.open('get', imgUrl, true)
+        xhr.responseType = 'blob'
+        xhr.onload = function () {
+          if (this.status == 200) {
+            //得到一个blob对象
+            let blob = this.response
+            let fileUrl = window.URL.createObjectURL(blob)
+            let a = document.createElement('a')
+              ; (document.body || document.documentElement).appendChild(a)
+            a.href = fileUrl
+            if ('download' in a) {
+              a.download = fileName
+            } else {
+              a.setAttribute('download', fileName)
+            }
+            a.target = '_self'
+            a.click()
+            a.remove()
+          }
+        }
+        xhr.send()
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  /deep/ .el-image-viewer__close {
+    color: #ffffff;
+  }
+</style>
\ No newline at end of file

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663579235470" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M687.603949 656.994302 541.10027 510.457878 687.603949 363.943966c8.829086-8.840342 8.829086-23.122627 0-31.961946-8.850575-8.840342-23.13286-8.840342-31.962969 0L509.138324 478.495932 362.623389 331.980997c-8.840342-8.818853-23.122627-8.818853-31.962969 0-8.840342 8.840342-8.840342 23.144116 0 31.984459l146.493445 146.514935L330.638931 656.994302c-8.819876 8.830109-8.819876 23.133883 0 31.962969 8.840342 8.829086 23.144116 8.829086 31.984459 0l146.514935-146.514935 146.502655 146.514935c8.830109 8.829086 23.112394 8.829086 31.962969 0C696.433034 680.129208 696.45657 665.824411 687.603949 656.994302z" p-id="2392" fill="#ffffff"></path><path d="M938.362063 510.457878c0-237.061161-192.174857-429.234995-429.247274-429.234995-237.062184 0-429.246251 192.173834-429.246251 429.234995 0 237.083673 192.185091 429.257507 429.246251 429.257507 97.345072 0 186.435133-33.110095 258.440074-87.677898 2.958378-3.354398 4.900613-7.636934 4.900613-12.449543 0-10.506285-8.521071-19.026332-19.027355-19.026332-5.431709 0-10.287297 2.162246-13.752212 5.826705l-0.2415 0c-64.456011 47.414893-143.745868 75.800383-229.876528 75.800383-214.679407 0-388.730489-174.073594-388.730489-388.719232 0-214.688617 174.051081-388.718209 388.730489-388.718209 214.688617 0 388.697743 174.029592 388.697743 388.718209 0 65.548902-15.386432 127.277802-44.081984 181.490517l0 0.309038c-0.508583 1.811252-1.104147 3.576455-1.104147 5.519714 0 10.507308 8.520047 19.028379 19.028379 19.028379 8.18952 0 15.054881-5.254677 17.703197-12.494569l0 0.132006C920.349827 648.38625 938.362063 581.536726 938.362063 510.457878z" p-id="2393" fill="#ffffff"></path></svg>
\ No newline at end of file

+<template>
+  <div class="rlPopup">
+    <div class="prev handle-btn" v-if="!isSingle" @click="prev()">
+      <i class="el-icon-arrow-left"></i>
+    </div>
+    <div class="next handle-btn" v-if="!isSingle" @click="next()">
+      <i class="el-icon-arrow-right"></i>
+    </div>
+    <div class="img-list-wrap">
+      <div v-for="(img, i) in previewImg.imgList" :key="i">
+        <photo-zoom :url="img.url" :bigWidth="165" v-if="i === previewImg.index" :scale="2"
+          overlayStyle="width: 100%;height: 563px;">
+        </photo-zoom>
+      </div>
+    </div>
+    <!--缩略图-->
+    <div class="thumb-wrap">
+      <div class="thumb-wrap-button">
+        <el-button type="primary" @click="clickImage">（放大） 显示（缩小）</el-button>
+        <el-upload class="fileUpdate" action="" :show-file-list="false" multiple :limit="5" :auto-upload="false"
+          :on-change="handleChange" accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg" :before-upload="beforeUpload">
+          <el-button icon="el-icon-upload" type="primary">上传</el-button>
+        </el-upload>
+        <el-button type="primary" icon="el-icon-delete-solid" @click="handleDelete">删除</el-button>
+      </div>
+      <ul>
+        <li v-for="(img, index) in thumbnailImages" :key="index" :class="{ active:previewImg.index === index}"
+          @click="showCurrent(index)">
+          <img :src="img.url">
+        </li>
+      </ul>
+    </div>
+    <!-- 点开后的视图 -->
+    <publicPicture v-if="showViewer" :url-list="allLi" :initialIndex="initialIndex" @close-viewer="closeViewer">
+    </publicPicture>
+  </div>
+</template>
+<script>
+import PhotoZoom from '@/components/photo-zoom'
+import publicPicture from '@/components/publicPicture/index.vue'
+export default {
+  name: 'PreviewImage',
+  props: {
+    previewImg: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  components: {
+    PhotoZoom,
+    publicPicture
+  },
+  data () {
+    return {
+      transform: {
+        scale: 1,
+        degree: 0
+      },
+      // 缩略图
+      thumbnailImages: this.previewImg.imgList,
+      showViewer: false,
+      initialIndex: undefined,
+      allLi: [],
+    }
+  },
+  watch: {
+    previewImg: {
+      handler (newValue, oldValue) {
+        this.allLi = _.cloneDeep(newValue.imgList).map(item => item.url)
+      },
+      deep: true
+    }
+  },
+  computed: {
+    isSingle () {
+      return this.previewImg.imgList.length <= 1
+    },
+    isFirst () {
+      return this.previewImg.index === 0
+    },
+    isLast () {
+      return this.previewImg.index === this.previewImg.imgList.length - 1
+    }
+  },
+  methods: {
+    prev () {
+      if (this.isFirst) {
+        if (this.previewImg.selectedIndex - 1 >= 0) {
+          this.$parent.previewImg.index = 1
+        }
+        return
+      }
+      const len = this.previewImg.imgList.length
+      this.$parent.previewImg.index = (this.$parent.previewImg.index - 1 + len) % len
+      this.reset()
+    },
+    next () {
+      if (this.isLast) {
+        if (this.previewImg.selectedIndex + 1 < this.previewImg.attachmentList.length) {
+          this.$parent.previewImg.index = 0
+        }
+        return
+      }
+      const len = this.previewImg.imgList.length
+      this.$parent.previewImg.index = (this.$parent.previewImg.index + 1) % len
+      this.reset()
+    },
+    reset () {
+      this.transform = {
+        scale: 1,
+        degree: 0
+      }
+    },
+    showCurrent (index) {
+      this.previewImg.index = index
+    },
+    closeViewer () {
+      this.showViewer = false
+    },
+    clickImage () {
+      this.showViewer = true
+    },
+    // 上传
+    beforeUpload (file) {
+      const isJPEG = file.type === 'image/jpeg'
+      const isPNG = file.type === 'image/png'
+      const isJPG = file.type === 'image/jpg'
+      const isGIF = file.type === 'image/gif'
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isJPEG && !isGIF && !isPNG && !isJPG && !isGIF) {
+        this.$message.error('请选择jpeg/png/jpg/bmp/gif格式的图片后重试')
+        this.loading = false
+      }
+      if (!isLt5M) {
+        this.$message.error('上传图片大小不能超过 5MB!')
+        this.loading = false
+      }
+      this.imgHidden = (isJPG || isJPEG || isPNG || isGIF) && isLt5M
+      return this.imgHidden
+    },
+    async handleChange (file) {
+      let data = _.cloneDeep(this.previewImg.imgList[this.previewImg.index])
+    },
+    handleDelete () {
+      let _this = this
+      this.$confirm('此操作将永久该附件, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        let bsmFileList = []
+        bsmFileList[0] = this.previewImg.imgList[this.previewImg.index].bsmFile
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// 查看大图
+.rlPopup {
+  position: relative;
+  width: 100%;
+  text-align: center;
+  height: 100%;
+
+  .handle-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-100%);
+    width: 66px;
+    height: 66px;
+    line-height: 75px;
+    color: #fff;
+    background-color: rgb(198, 198, 198);
+    border-radius: 4px;
+    cursor: pointer;
+    text-align: center;
+
+    i {
+      font-size: 24px;
+    }
+  }
+
+  .prev {
+    left: 0%;
+  }
+
+  .next {
+    right: 0%;
+  }
+
+  .img-list-wrap {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    height: calc(100% - 80px);
+    align-items: center;
+    background: rgba(194, 190, 190, 0.1);
+
+    img {
+      display: block;
+      object-fit: scale-down;
+      transition: all 0.3s;
+      max-width: 100%;
+    }
+  }
+
+  .thumb-wrap {
+    &-button {
+      display: flex;
+      justify-content: center;
+
+      .fileUpdate {
+        margin: 0 10px;
+      }
+    }
+
+    li {
+      float: left;
+      width: 60px;
+      height: 45px;
+      border: solid 1px #ececec;
+      position: relative;
+      margin-right: 5px;
+      cursor: pointer;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      img {
+        max-width: 57px;
+        max-height: 42px;
+        display: block;
+        object-fit: scale-down;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .active {
+      border-color: #409eff;
+    }
+  }
+}
+</style>
+<style>
+.zoom-on-hover {
+  position: relative;
+  overflow: hidden;
+}
+
+.zoom-on-hover .normal {
+  width: 100%;
+}
+
+.zoom-on-hover .zoom {
+  position: absolute;
+  opacity: 0;
+  transform-origin: top left;
+}
+
+.zoom-on-hover.zoomed .zoom {
+  opacity: 1;
+}
+
+.zoom-on-hover.zoomed .normal {
+  opacity: 0;
+}
+</style>

 <template>
   <div class="clxx">
     <div class="left">
-      <div v-for="item in menuList" :key="item.id" :class="['item', checkedId == item.id ? 'checked' : '']"
+      <div v-for="item in menuList" :key="item.id" :class="['item', checkedId == item.id ? 'active' : '']"
         @click="menuClick(item)">
         {{ item.label }}
       </div>
@@ -13,60 +13,9 @@
         <lb-table :column="column" :key="key" :heightNum="210" :pagination="false" :data="tableData">
         </lb-table>
       </div>
-
       <!-- 材料预览 -->
-      <div class="clyl-box" v-if="checkedId == '2'">
-        <div class="menu-tree">
-          <div class="item">
-            材料目录
-            <i :class="iclass" @click="iconClick()"></i>
-            <el-collapse-transition>
-              <div v-show="menuOpen">
-                <div v-for="item in tableData" :key="item.bsmSj"
-                  :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item)">
-                  {{ item.sjmc }}
-                </div>
-              </div>
-            </el-collapse-transition>
-          </div>
-        </div>
-        <div class="clyl-img">
-          <div class="header">
-            <div class="title" v-if="titleNum == 0">
-              {{ title }}
-            </div>
-            <div class="title" v-else>
-              {{ title }} ({{ titleYs }} / {{ titleNum }})
-            </div>
-            <div class="i-group">
-              <i class="el-icon-zoom-in"></i>
-              <i class="el-icon-zoom-out"></i>
-              <i class="el-icon-refresh-right"></i>
-              <i class="el-icon-refresh-left"></i>
-              <i class="el-icon-document"></i>
-            </div>
-          </div>
-          <div class="prev" @click="imgPrev()" v-if="imgList.length > 0">
-            <i class="el-icon-arrow-left"></i>
-          </div>
-          <div class="img-box">
-            <img :src="showImg.imgUrl" alt="" />
-          </div>
-          <div class="next" @click="imgNext()" v-if="imgList.length > 0">
-            <i class="el-icon-arrow-right"></i>
-          </div>
-          <div class="img-list">
-            <div class="item" v-for="(item, index) in imgList" :key="index">
-              <img :class="showImg.id == item.id ? 'active' : ''" :src="item.imgUrl" alt=""
-                @click="imgClick(item, index)" />
-            </div>
-          </div>
-          <div class="btn-group">
-            <el-button>扫描</el-button>
-            <el-button icon="el-icon-upload2">上传文件</el-button>
-            <el-button icon="el-icon-delete">删除</el-button>
-          </div>
-        </div>
+      <div class="clyl-box" v-else>
+        <image-preview :previewImg="previewImg" />
       </div>
     </div>
     <clxxAddDialog v-model="isDialog" />
@@ -75,12 +24,10 @@
 <script>
 import { mapGetters } from "vuex";
 import clxxAddDialog from "./clxxAddDialog.vue";
-import { upward, down } from "@/utils/operation";
+import imagePreview from '@/views/components/imagePreview.vue'
 import { clmlInit, move, save, clmlDelete } from "@/api/fqsq.js";
-import filter from "@/utils/filter.js";
-
 export default {
-  components: { clxxAddDialog },
+  components: { clxxAddDialog, imagePreview },
   data () {
     return {
       isDialog: false,
@@ -223,18 +170,19 @@ export default {
       ],
       key: 0,
       tableData: [],
-      menuOpen: true,
-      treeCheckId: "",
-      defaultProps: {
-        children: "children",
-        label: "label",
-      },
-      title: "",
-      titleYs: 1,
-      titleNum: 0,
-      imgList: [],
-      showImg: {},
-      iclass: "itemIcon el-icon-caret-bottom",
+      previewImg: {
+        bsmCatalog: '',
+        index: 0,
+        selectedIndex: 0,
+        imgList: [
+          {
+            url: 'https://img2.baidu.com/it/u=2955521104,3257476296&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1111'
+          },
+          {
+            url: 'https://img1.baidu.com/it/u=2383300938,4241539174&fm=253&fmt=auto&app=138&f=JPEG?w=307&h=500'
+          }
+        ],
+      }
     };
   },
   computed: {
@@ -359,14 +307,6 @@ export default {
       this.showImg = item;
       this.titleYs = index + 1;
     },
-    // 图片上一张
-    imgPrev () {
-
-    },
-    // 图片下一张
-    imgNext () {
-
-    },
     // 字典
     dicStatus (val, code) {
       let data = this.$store.getters.dictData[code],
@@ -384,6 +324,13 @@ export default {
 };
 </script>
 <style scoped lang='scss'>
+@import "~@/styles/mixin.scss";
+
+.active {
+  background: $light-blue !important;
+  color: #fff;
+}
+
 .clxx {
   width: 100%;
   display: flex;
@@ -391,40 +338,30 @@ export default {
   height: calc(100vh - 150px);
 
   .left {
-    width: 52px;
-    background: #f3f4f7;
-    border-radius: 1px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 
     .item {
       width: 42px;
-      height: 50%;
-      margin: 0 0 auto auto;
-      writing-mode: tb;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 16px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      color: #7a7a7a;
+      height: 49%;
+      @include flex-center;
+      background-color: #E4E7ED;
+      border-bottom-right-radius: 10px;
+      padding: 15px;
       cursor: pointer;
-      border-right: 1px solid #d9d9d9;
-    }
+      transition: all 0.3s;
 
-    .item.checked {
-      background: #ffffff;
-      border-top: 1px solid #d9d9d9;
-      border-bottom: 1px solid #d9d9d9;
-      border-left: 2px solid #2b7ff1;
-      border-right: none;
-      font-size: 18px;
-      color: #4a4a4a;
+      &:hover {
+        @extend .active;
+      }
     }
   }
 
   .right {
-    width: calc(100% - 80px);
+    width: 100%;
     height: 100%;
-    padding: 0 30px;
+    padding: 0 15px;
 
     .clmlmx-box {
       margin: 0 auto;
@@ -513,101 +450,6 @@ export default {
         background: #f3f4f7;
         margin: 0 auto;
         position: relative;
-
-        .header {
-          height: 54px;
-          line-height: 52px;
-          background: #eceef2;
-          border: 1px solid #ededed;
-          padding: 0 0 0 30px;
-
-          .title {
-            font-size: 13px;
-            display: inline-block;
-          }
-
-          .i-group {
-            float: right;
-            height: 100%;
-
-            i {
-              width: 50px;
-              height: 52px;
-              cursor: pointer;
-            }
-          }
-        }
-
-        .prev,
-        .next {
-          width: 60px;
-          height: 60px;
-          line-height: 60px;
-          text-align: center;
-          font-size: 40px;
-          border-radius: 6px;
-          cursor: pointer;
-          position: absolute;
-        }
-
-        .prev:hover,
-        .next:hover {
-          background: #7a7a7a;
-        }
-
-        .prev {
-          top: 40%;
-          left: 10px;
-        }
-
-        .next {
-          top: 40%;
-          right: 10px;
-        }
-
-        .img-box {
-          width: 800px;
-          height: calc(100% - 214px);
-          padding: 5px;
-          text-align: center;
-          margin: 0 auto;
-
-          img {
-            max-height: 100%;
-            max-width: 100%;
-          }
-        }
-
-        .img-list {
-          width: 100%;
-          height: 80px;
-          line-height: 80px;
-          background: #eceef2;
-          text-align: center;
-
-          .item {
-            display: inline-block;
-            margin: 10px 5px;
-
-            img {
-              width: 60px;
-              height: 60px;
-              cursor: pointer;
-            }
-
-            .active {
-              border: 1px solid #fff;
-            }
-          }
-        }
-
-        .btn-group {
-          width: 100%;
-          height: 80px;
-          line-height: 80px;
-          background: #fff;
-          text-align: center;
-        }
       }
     }
   }

@@ -95,7 +95,7 @@ export default {
         },
         {
           name: '退出',
-          icon: '',
+          icon: 'del',
           value: 'tc'
         }
       ],
@@ -192,10 +192,9 @@ export default {
       else if (item.value == 'zc') {
         this.zcDialog = true
         this.$refs.zcDialogRef.tablelistFn()
+      } else if (item.value === 'tc') {
+        window.close()
       }
-      // if (index == 3) {
-      //   window.close()
-      // }
     },
     loadView (view) {
       return r => require.ensure([], () => r(require(`./components/${view}.vue`)))