<template> <div id="MyHomework_Now"> <div id="MH_NTopSearchBox"> <span class="SelectTitle">站点查询:</span> <el-input v-model="condition" placeholder="请输入站点名称/编号"></el-input> <el-button type="primary" icon="el-icon-search" @click="loadDataGridData">搜索</el-button> <!-- <img src="http://medical-cloud.fvzz.cn/newfiber/upload/file/190710014205427190989.190710014204374189345.jpg" alt=""> --> </div> <div id="MH_NCertent"> <el-table :data="HistoryTableData" style="width: 100%;height:calc(100% - 45px)" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" stripe > <el-table-column prop="siteNo" label="站点编号"></el-table-column> <el-table-column prop="siteName" label="站点名称"></el-table-column> <el-table-column prop="taskUserNo" label="作业人账号"></el-table-column> <el-table-column prop="taskUserName" label="作业人姓名"></el-table-column> <el-table-column prop="beginTime" label="上报时间"></el-table-column> <el-table-column prop="taskRemark" label="备注"></el-table-column> <el-table-column prop="pics" label="查看图片"> <template slot-scope="scope"> <img v-for="item in scope.row.pics" :src="item.pictureUrl" alt class="TableImg" @click="YuLan(item.pictureUrl)" title="点击查看图片" /> <span v-if="scope.row.pics.length==0">无图片</span> </template> </el-table-column> </el-table> <el-pagination @size-change="SizeChange" @current-change="CurrentChange" :current-page="Page" :page-sizes="[10, 20, 50, 100]" :page-size="Size" layout="total, sizes, prev, pager, next, jumper" :total="DataLength" style="margin-top:10px;" ></el-pagination> </div> <el-dialog title="图片预览" :visible.sync="dialogVisible" width="40%"> <img :src="YuLanImgUrl" alt id="YuLanImg" /> </el-dialog> </div> </template> <script> import { message } from "./../../util/item"; export default { name: "MyHomework_Now", data: function() { return { condition: "", HistoryTableData: [], //历史数据表格数据 Page: 1, //分页默认显示页 DataLength: 0, //分页上显示的数据总条数 Size: 10, //分页上显示的每页的条数 loading: false, dialogVisible: false }; }, methods: { SizeChange(val) { // 改变每页的条数 this.Size = val; this.loadDataGridData(); }, CurrentChange(val) { //改变页数 this.Page = val; this.loadDataGridData(); }, loadDataGridData() { this.loading = true; this.$http .post(this.nozzle.taskInfoGetTempInfo, { condition: this.condition, pageNo: this.Page, pageSize: this.Size }) .then(response => { this.loading = false; this.HistoryTableData = response.data.data; this.DataLength = response.data.total; }) .catch(response => { this.loading = false; this.$message({ showClose: true, message: "请求日志失败", type: "warning" }); }); }, YuLan(V) { this.YuLanImgUrl = V; this.dialogVisible = true; } }, mounted: function() { this.loadDataGridData(); } }; </script> <style scoped> #MyHomework_Now { width: 100%; height: 100%; } /* 顶部搜索 */ #MH_NTopSearchBox { width: 100%; height: 60px; line-height: 60px; text-align: left; color: white; } #MH_NTopSearchBox .el-input { width: 200px; margin: 0 10px; } .SelectTitle { display: inline-block; margin-left: 5px; text-align: center; height: 60px; line-height: 60px; } /* 主体内容 */ #MH_NCertent { width: 100%; height: calc(100% - 70px); margin-top: 10px; background: rgba(53, 53, 53, 0.5); } /* 表格内图片 */ .TableImg { width: 30px; height: 30px; cursor: pointer; } /* 预览图片 */ #YuLanImg { width: 100%; height: auto; } </style>