From 8d7221c39dd5ab707a12dc47d7522bafa5dfa401 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Sat, 10 Apr 2021 14:28:21 +0800
Subject: [PATCH] 体温检测行点击事件图片放大
---
src/views/animalHeat/animalHeat.vue | 59 +++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 43 insertions(+), 16 deletions(-)
diff --git a/src/views/animalHeat/animalHeat.vue b/src/views/animalHeat/animalHeat.vue
index 1df821a..f0d9435 100644
--- a/src/views/animalHeat/animalHeat.vue
+++ b/src/views/animalHeat/animalHeat.vue
@@ -12,6 +12,7 @@
@row-update="rowUpdate"
@row-save="rowSave"
@row-del="rowDel"
+ @row-click="rowClick"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@@ -40,18 +41,33 @@
</el-button>
</template>
</avue-crud>
+
+ <template>
+ <div>
+ <el-image-viewer
+ class="img"
+ v-if="showViewer"
+ :on-close="closeViewer"
+ :url-list="[imgUrl]" />
+ </div>
+ </template>
</basic-container>
</template>
<script>
import {getList} from "@/api/animalHeat/animalHeat";
import {mapGetters} from "vuex";
+ import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
+ name:'index',
+ components: { ElImageViewer },
data() {
return {
form: {},
query: {},
+ showViewer:false,
+ imgUrl:'',
loading: true,
page: {
pageSize: 10,
@@ -96,21 +112,15 @@
label: "体温",
prop: "tempRed"
},
- {
- label: '图片',
- prop: 'picture',
- type: 'upload',
- width: 300,
- listType: 'picture-img',
- span: 24,
- propsHttp: {
- res: 'data'
- },
- canvasOption: {
- text: 'avue',
- ratio: 0.1
- }
- },
+ // {
+ // label: '图片',
+ // prop: 'picture',
+ // type: 'img',
+ // alone:false,
+ // width: 300,
+ // //listType: 'picture-img',
+ // span: 24
+ // },
{
label: "检测时间",
prop: "dateTime",
@@ -213,6 +223,17 @@
}
}
},
+ //图片行点击事件
+ rowClick(row){
+ var that = this;
+ that.imgUrl = row.picture;
+ console.log(that.imgUrl,111);
+ this.showViewer = true
+ },
+ // 关闭查看器
+ closeViewer() {
+ this.showViewer = false
+ },
getAnimalData(e) {
this.activeClass=e;
//type 0:本日 1：本月 2：本年 status: 0:正常 1：异常
@@ -295,10 +316,16 @@
}
};
</script>
-<style scoped>
+<style lang="scss">
.el-button.btn-color {
color: rgb(255, 255, 255);
background-color: rgb(64, 158, 255);
border-color: rgb(64, 158, 255);
}
+
+ .img {
+ .el-icon-circle-close {
+ color: white;
+ }
+ }
</style>
--
Gitblit v1.9.3