包裹图片，体温，健康码页面优化

Administrator

2021-03-26 c6c12fba04f26d07f6107377f0c8093d780f5e92

包裹图片，体温，健康码页面优化

 package.json

@@ -28,6 +28,7 @@
    "nprogress": "^0.2.0",
    "portfinder": "^1.0.23",
    "script-loader": "^0.7.2",
    "vant": "^2.12.10",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.2",
    "vue-i18n": "^8.7.0",

 src/views/animalHeat/animalHeat.vue

@@ -8,6 +8,7 @@
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               :row-style="rowStyle"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
@@ -65,7 +66,7 @@
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          activeClass: 3,
          activeClass: 0,
          border: true,
          index: true,
          viewBtn: true,
@@ -203,7 +204,15 @@
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      rowStyle({row, column, rowIndex}){
         if(row.status=="1"){
           return {
             color:"#fe1515"
           }
         }
      },
      getAnimalData(e) {
        this.activeClass=e;
        //type 0:本日  1：本月  2：本年   status: 0:正常   1：异常
        var params = {
          type: e
@@ -269,3 +278,10 @@
    }
  };
</script>
<style scoped>
  .el-button.btn-color {
    color: rgb(255, 255, 255);
    background-color: rgb(64, 158, 255);
    border-color: rgb(64, 158, 255);
  }
</style>

 src/views/healthcode/healthcode.vue

@@ -8,6 +8,7 @@
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               :row-style="rowStyle"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
@@ -66,7 +67,7 @@
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          activeClass: 3,
          activeClass: 0,
          border: true,
          index: true,
          viewBtn: true,
@@ -233,6 +234,13 @@
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      rowStyle({row, column, rowIndex}){
         if(row.type=="3"){
           return {
             color:"#fe1515"
           }
         }
      },
      getHealthcodeData(e) {
        this.activeClass = e;
        //status 0:本日  1：本月  2：本年   type: 1:绿色   2：黄色  3：红色
@@ -304,3 +312,10 @@
    }
  };
</script>
<style scoped>
  .el-button.btn-color {
    color: rgb(255, 255, 255);
    background-color: rgb(64, 158, 255);
    border-color: rgb(64, 158, 255);
  }
</style>

 src/views/parcel/ImagePreview.js

New file
@@ -0,0 +1,233 @@
/*
 * 预览图片 Object
 * 2015-05-23 17:25
 *
 */
import request from '@/router/axios';


export const ImagePreview = () => {
    var that = this;
    //用来存储图片数据
    var IMGS = {
        "num": 0,
        "imgs": {}
    };
    var IMGP_BG = null;
    var IMGP_P_BG = null;
    var IMGSHOW_BG = null;
    var IMGSHOW_BOX = null;
    var IMGSHOW_NEXT = null;
    var IMGSHOW_LAST = null;
    var IMGSHOW_CLOSE = null;
    var FullScreen = null;
    var IMGSHOW_NOW = null;
    var IMGP_BOX = null;
    var IMGP_IMGS = null;
    var IMGP_NEXT = null;
    var IMGP_LAST = null;
    var IMGP_HTML = "";
    var nowNum = 0; //当前预览图片序号
    var moveW = 0;
    var isFullscreen = false;
    _start();
    //初始化获得图片数据
    this.Image = function(imgObjBox) {

        var len = imgObjBox.children.length;
        IMGP_HTML = "";
        for (var i = 0; i < len; i++) {
            IMGS["imgs"][i] = { "src": '' }
            IMGS["imgs"][i]["src"] = imgObjBox.children[i].firstElementChild.src;
            IMGP_HTML += '<div class="imgp_k"><img data-num="' + i + '"src="' + imgObjBox.children[i].firstElementChild.src + '" class="imgp"/></div>';
        }
        IMGS["num"] = len;
        IMGP_IMGS.innerHTML = IMGP_HTML;
        IMGP_IMGS.style.width = len * (100 + 7) + "px";
        IMGSHOW_NOW.src = IMGS["imgs"][0]["src"]; //显示第一张图片
        IMGP_IMGS.onclick = function(e) {
            //获取data-num
            var n = e.target.dataset.num; //ie不识别
            if (n) {
                nowNum = n;
                that.show(nowNum);
            }
        }
    }
    IMGP_BG.onmousewheel = function(e) {
            //存在兼容性
            //console.log(e.wheelDelta+" "+e.detail);
            return false;
        }
        //显示图片
    this.show = function(n) {
            nowNum = n;
            IMGP_BG.style.display = "block";
            IMGSHOW_NOW.src = IMGS["imgs"][n]["src"];
        }
        //预览下一张
    IMGSHOW_NEXT.onclick = function() {
            nowNum++;
            if (nowNum > (IMGS["num"] - 1)) {
                nowNum = 0;
            }
            that.show(nowNum);
        }
        //预览上一张
    IMGSHOW_LAST.onclick = function() {
            nowNum--;
            if (nowNum < 0) {
                nowNum = IMGS["num"] - 1;
            }
            that.show(nowNum);
        }
        //关闭预览
    IMGSHOW_CLOSE.onclick = function() {
        exitFullscreen();
        isFullscreen = false;
        document.body.style.overflow = "auto";
        IMGP_BG.style.display = "none";
    }
    FullScreen.onclick = function() {
        if (isFullscreen == false) {
            //进入全屏
            isFullscreen = true;
            requestFullScreen();
            FullScreen.className = "isFullScreen";
            document.body.style.overflow = "hidden";
        } else {
            //退出全屏
            isFullscreen = false;
            exitFullscreen();
            FullScreen.className = "notFullScreen";
            document.body.style.overflow = "auto";
        }
    }
    IMGP_NEXT.onclick = function() {
        var w_bg = IMGP_BOX.offsetWidth;
        var w = IMGP_IMGS.offsetWidth;
        var L = -IMGP_IMGS.offsetLeft;
        var wr = w - (L + w_bg);
        var moveL = wr > w_bg ? w_bg : wr;
        console.log(w_bg + " " + w + " " + L + " " + moveL + " " + wr);
        if (wr == 0) {
            IMGP_IMGS.style.left = 0 + "px";
        } else {
            IMGP_IMGS.style.left = -(L + moveL) + "px";
        }
    }
    IMGP_LAST.onclick = function() {
        var w_bg = IMGP_BOX.offsetWidth;
        var w = IMGP_IMGS.offsetWidth;
        var L = -IMGP_IMGS.offsetLeft;
        var wl = L;
        var moveL = wl > w_bg ? w_bg : wl;
        console.log(w_bg + " " + w + " " + L + " " + moveL + " " + wl);
        if (wl == 0) {
            IMGP_IMGS.style.left = -(w - w_bg) + "px";
        } else {
            IMGP_IMGS.style.left = -(L - moveL) + "px";
        }

    }

    function _start() {
        //创建预览照片盒子
        IMGP_BG = document.createElement("div");
        IMGP_BG.id = "IMGP_BG";
        document.body.appendChild(IMGP_BG);
        //大图预览背景
        IMGSHOW_BG = document.createElement("div");
        IMGSHOW_BG.id = "IMGSHOW_BG";
        IMGP_BG.appendChild(IMGSHOW_BG);
        //大图预览盒子
        IMGSHOW_BOX = document.createElement("div");
        IMGSHOW_BOX.id = "IMGSHOW_BOX";
        IMGSHOW_BG.appendChild(IMGSHOW_BOX);
        //大图预览按钮下
        IMGSHOW_NEXT = document.createElement("div");
        IMGSHOW_NEXT.id = "IMGSHOW_NEXT";
        IMGSHOW_BG.appendChild(IMGSHOW_NEXT);
        //大图预览按钮上
        IMGSHOW_LAST = document.createElement("div");
        IMGSHOW_LAST.id = "IMGSHOW_LAST";
        IMGSHOW_BG.appendChild(IMGSHOW_LAST);
        //大图预览按钮关闭
        IMGSHOW_CLOSE = document.createElement("div");
        IMGSHOW_CLOSE.id = "IMGSHOW_CLOSE";
        IMGSHOW_BG.appendChild(IMGSHOW_CLOSE);
        //全屏控制按钮
        FullScreen = document.createElement("div");
        FullScreen.id = "FullScreen";
        FullScreen.className = "notFullScreen";
        IMGSHOW_BG.appendChild(FullScreen);
        //正在预览
        IMGSHOW_NOW = document.createElement("img");
        IMGSHOW_NOW.id = "IMGSHOW_NOW";
        IMGSHOW_BOX.appendChild(IMGSHOW_NOW);
        //--------------------------------
        //创建待预览图片背景
        IMGP_P_BG = document.createElement("div");
        IMGP_P_BG.id = "IMGP_P_BG";
        IMGP_BG.appendChild(IMGP_P_BG);
        //创建待预览图片盒子背景
        IMGP_BOX = document.createElement("div");
        IMGP_BOX.id = "IMGP_BOX";
        IMGP_P_BG.appendChild(IMGP_BOX);
        //创建待预览图片盒子
        IMGP_IMGS = document.createElement("div");
        IMGP_IMGS.id = "IMGP_IMGS";
        IMGP_BOX.appendChild(IMGP_IMGS);
        //创建待预览盒子按钮上
        IMGP_LAST = document.createElement("div");
        IMGP_LAST.id = "IMGP_LAST";
        IMGP_P_BG.appendChild(IMGP_LAST);
        //创建待预览盒子按钮下
        IMGP_NEXT = document.createElement("div");
        IMGP_NEXT.id = "IMGP_NEXT";
        IMGP_P_BG.appendChild(IMGP_NEXT);

        var bodyW = document.documentElement.clientHeight;
        IMGSHOW_BG.style.height = (bodyW) / bodyW * 100 + "%";
        IMGSHOW_BOX.style.lineHeight = (bodyW - 5) + "px";
        IMGSHOW_NEXT.style.top = ((bodyW) - 400) / 2 + "px";
        IMGSHOW_LAST.style.top = ((bodyW) - 400) / 2 + "px";
        ///IMGSHOW_NOW.src="./Uploads/3.0_banner.jpg"
    }
    window.onresize = function() {
        var bodyW = document.documentElement.clientHeight;
        IMGSHOW_BG.style.height = (bodyW) / bodyW * 100 + "%";
        IMGSHOW_BOX.style.lineHeight = (bodyW - 5) + "px";
        IMGSHOW_NEXT.style.top = ((bodyW) - 400) / 2 + "px";
        IMGSHOW_LAST.style.top = ((bodyW) - 400) / 2 + "px";
    }

    function _setCss(obj, css) {
        for (var v in css) {
            obj.style[v] = css[v];
        }
    }
    //进入全屏
    function requestFullScreen() {
        var de = document.documentElement;
        if (de.requestFullscreen) {
            de.requestFullscreen();
        } else if (de.mozRequestFullScreen) {
            de.mozRequestFullScreen();
        } else if (de.webkitRequestFullScreen) {
            de.webkitRequestFullScreen();
        }
    }
    //退出全屏
    function exitFullscreen() {
        var de = document;
        if (de.exitFullscreen) {
            de.exitFullscreen();
        } else if (de.mozCancelFullScreen) {
            de.mozCancelFullScreen();
        } else if (de.webkitCancelFullScreen) {
            de.webkitCancelFullScreen();
        }
    }

}

 src/views/parcel/parcel.vue

@@ -8,6 +8,7 @@
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               :row-style="rowStyle"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
@@ -245,6 +246,13 @@
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      rowStyle({row, column, rowIndex}){
         if(row.mechineMark==1){
           return {
             color:"#fe1515"
           }
         }
      },
      onLoad(page, params = {}) {
        const { dateTime } = this.query;
        let values = {

 src/views/parcel/parcelKind.vue

@@ -25,42 +25,54 @@
          :size="size"
          :type="type"
          @click.stop="handleParcelPic(row)"
          id="show"
          >查看包裹图片
        </el-button>
        
        
      </template>
      

    </avue-crud>
    <el-dialog
    <!-- <el-dialog
      :visible.sync="dialogTableVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      @opened="parcelConversation = true"
      @close="(parcelConversation = false), (oldParcelSatart = false)" >
      <div>
        <el-image  :src="'data:image/png;base64,'+imgUrl"  :preview-src-list="'data:image/png;base64,'+imgUrl">
        <el-image  :src="'data:image/png;base64,'+imgUrl">
        </el-image>
      </div>
    </el-dialog>
    </el-dialog> -->

    <!-- <template>
        <div style="width: 100%; height: 100%;">
          <el-image ref="image" v-image-preview :src="'data:image/png;base64,'+imgUrl"/>
        <div style="width: 100%; height: 100%;" id="divImage">
          <el-image v-show="flag" ref="image" v-image-preview :src="'data:image/png;base64,'+imgUrl"/>
        </div>
    </template> -->
    <template>
      <div id="imgs">
          <!-- <el-button v-model="show" :images="images" @change="onChange">查看包裹图片</el-button> -->
          <el-image :src="'data:image/png;base64,'+imgUrl"/>
      </div>
    </template>
  </basic-container>
</template>

<script>
  import {getKindList, getParcelPic} from "@/api/parcel/parcel";
  import {mapGetters} from "vuex";
  import VueDirectiveImagePreviewer from 'vue-directive-image-previewer';
  import 'vue-directive-image-previewer/dist/assets/style.css';
  //import {ImagePreview} from "@/view/parcel/ImagePreview"
  // import VueDirectiveImagePreviewer from 'vue-directive-image-previewer';
  // import 'vue-directive-image-previewer/dist/assets/style.css';
  import Vue from 'vue';
  Vue.use(VueDirectiveImagePreviewer, {
    zIndex: 9999,  //层级显示
    previewSize: 3 //三倍图
  });
   import { ImagePreview } from 'vant';
  //Vue.use(ImagePreview);
  // Vue.use(VueDirectiveImagePreviewer, {
  //   zIndex: 9999,  //层级显示
  //   previewSize: 3 //三倍图
  // });

  export default {
    data() {
@@ -68,7 +80,6 @@
        form: {},
        query: {},
        imgUrl:'',
        isShow:true,
        loading: true,
        dialogTableVisible: false,
        parcelConversation:false,
@@ -180,7 +191,8 @@
            }
          ]
        },
        data: []
        data: [],
        flag: false
      };
    },
    computed: {
@@ -278,20 +290,25 @@
          this.selectionClear();
        });
      },
      // handleParcelPic(row) {
      //   getParcelPic(row.imgUrl).then(res => {
      //       this.imgUrl = res.data.data.imgBase64;
      //     });
      //   setTimeout(() => {
      //       //代码
      //       this.$refs.image.$el.click();
      //   }, 1000);
      // },
      handleParcelPic(row) {
        var that = this;
        getParcelPic(row.imgUrl).then(res => {
            this.imgUrl = res.data.data.imgBase64;
            that.imgUrl = res.data.data.imgBase64;
            this.flag=true;
          });
          this.dialogTableVisible=true;
          // var divImage= document.getElementById("divImage");
          // console.log(divImage,111);
          // divImage.innerHTML=divImage.innerHTML+`<el-image ref="image" v-image-preview :src="'data:image/png;base64,'+imgUrl"/>`;
          // console.log(divImage,111);
        setTimeout(() => {
            //代码
            //that.$refs.image.$el.click();
            var image=new ImagePreview();
            image.Image(document.getElementById("imgs"));
            document.getElementById("show").onclick=function(){
              image.show(0);
            }
        }, 1000);
      }
    }
  };