摘要：
----˃搜索重置行。stcd｝｝˂--{getSelectVal｝}--˃{setSelectVal}｝{｛row.praramax｝｝{row.bVal｝}{row.bVal}}{row.bVal｝｝{row.bVal}{row.bVal｝｝˂！
<template> <div class="container"> <div class="searchMar"> <el-input class="handleInput" v-model="query.stnm" placeholder="站名" @input="handleInput" @change="handleSearch"></el-input> <!-- <el-select placeholder="请选择水厂" v-model="query.awid"> <el-option v-for="item in wfctCdData" :key="item.wfctCd" :label="item.wfctName" :value="item.wfctCd"> </el-option> </el-select> <el-select placeholder="请选择监测要素" v-model="query.type"> <el-option v-for="item in typeData" :key="item.code" :label="item.name" :value="item.code"> </el-option> </el-select> --> <el-date-picker class="marL" v-model="query.date" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions0" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> <el-button icon="el-icon-search" class="marL" type="primary" plain @click="handleSearch" >搜索</el-button > <el-button icon="el-icon-refresh-right" style="margin-left: 0" type="primary" plain @click="handleReset" >重置</el-button > </div> <!-- 表格 start --> <el-table height="calc(100vh - 575px)" :data="tableList" :row-style="selectedHighlight" > <el-table-column label="采集时间" width="130" prop="esstym" show-overflow-tooltip></el-table-column> <el-table-column label="站名" width="130" show-overflow-tooltip> <template slot-scope="{ row }"> <span>{{ row.stcd }}</span> </template> </el-table-column> <!-- <el-table-column label="所属水厂"> <template slot-scope="{ row }"> <span>{{ getSelectVal(wfctCdData, row.awid) }}</span> </template> </el-table-column> --> <el-table-column label="采集要素"> <template slot-scope="{ row }"> <span>{{ getSelectVal(typeData, row.type) }}</span> </template> </el-table-column> <el-table-column align="right" label="采集值"> <template slot-scope="{ row}"> <span>{{ row.paramax }}</span> </template> </el-table-column> <el-table-column align="center" label="水质分类"> <el-table-column label="I类水" align="center" width="120"> <template slot-scope="{ row }"> <span>{{row.bVal}}</span> </template> </el-table-column> <el-table-column label="II类水" align="center" width="120"> <template slot-scope="{ row }"> <span>{{row.bVal}}</span> </template> </el-table-column> <el-table-column label="III类水" align="center" width="120"> <template slot-scope="{ row }"> <span>{{row.bVal}}</span> </template> </el-table-column> <el-table-column label="IV类水" align="center" width="120"> <template slot-scope="{ row }"> <span>{{row.bVal}}</span> </template> </el-table-column> <el-table-column label="V类水" align="center" width="120"> <template slot-scope="{ row }"> <span>{{row.bVal}}</span> </template> </el-table-column> </el-table-column> </el-table> <!-- 表格 end --> <!-- 分页 start --> <div class="paginationBox"> <div class="pagination"> <el-pagination background layout="total, sizes, prev, pager, next" @size-change="handleSizeChange" :current-page="query.page" :page-size="query.pageSize" :page-sizes="[10, 15, 20, 25]" :total="pageTotal" @current-change="handlePageChange" ></el-pagination> </div> </div> <!-- 分页 end --> <!-- echart start --> <div class="echartBox"> <template> <el-radio-group v-model="radio"> <el-radio v-for="item in typeData" @change="handleRadio" :key="item.code" :label="item.code">{{ item.name }}</el-radio> </el-radio-group> </template> <el-row class="echartRow" :gutter="20"> <el-col :span="12"> <waterqualityAnalyseLine /> </el-col> <el-col :span="12"> <waterqualityAnalysePie /> </el-col> </el-row> </div> <!-- echart end --> </div> </template> <script> import formValidate from '../../lib/formValidation'; import waterqualityAnalyseLine from '../../components/common/echartsCom/waterqualityAnalyseLine'; import waterqualityAnalysePie from '../../components/common/echartsCom/waterqualityAnalysePie'; export default { components: { waterqualityAnalyseLine, waterqualityAnalysePie }, data() { return { tableList: [ { stcd: '0003', awid: "000000001", esstym: '2020-08-01', type: "cd", bVal: 4, isCB: 1, CBPS: 1.6, paramax: 6, paramin: 8 } ], currentIndex: -1, // 表格当前选中的行 multipleSelection: [], pageTotal: 0, // 总页数 BtnIndex: -1, query:{ page: 1, pageSize: 15, awid:'', type: '', date:[] }, flagAjax: true, wfctCdData: [], typeData: [], categoryData: [], isExport: false, radio: '', pickerMinDate: '', pickerOptions0: { onPick: ({ maxDate, minDate }) => { this.pickerMinDate = minDate; }, disabledDate: (time) => { if (this.pickerMinDate !== '') { let maxTime = new Date(this.pickerMinDate).getTime()+1000*60*60*24; if (maxTime > new Date().getTime()) { maxTime = new Date().getTime(); } return time.getTime() > maxTime || time.getTime() > Date.now() - 8.64e6; } else { return time.getTime() > Date.now() - 8.64e6; } } } } }, created() { this.getParamTypeData(); // this.getQueryTable(); this.waterworksData(); this.setDefaultDate(); // 设置时间范围默认一天 }, methods: { setDefaultDate() { //当前设定的日期时间 let d = new Date let year1,month1,day1; [year1,month1,day1] = [d.getFullYear(),d.getMonth(),d.getDate()] let date1 = new Date(year1, month1, day1,0) this.query.date.push(date1) //前一天设定的日期时间 let year2,month2,day2 d.setTime(d.getTime()-24*60*60*1000); [year2,month2,day2] = [d.getFullYear(),d.getMonth(),d.getDate()] let date2 = new Date(year2,month2,day2,0) this.query.date.unshift(date2) }, handleInput() { if (!this.query.awid || !this.query.awid) { this.getQueryTable(); } }, // 下拉框获取name getSelectVal (data, type) { let val = '' if (data.length && type) { data.map(item => { if(item.code === type || item.wfctCd === type) { val = item.name || item.wfctName; } }); } return val; }, // 请求水厂信息 waterworksData() { this.$http.waterworksList({wfctCd:""}).then(res => { this.wfctCdData = res.data; this.query.awid = res.data && res.data[0].wfctCd; }); }, getParamTypeData() { this.$http.getDictionaryTree({pid:"wq_qt"}).then(res => { if (res.code === "CODE_0000") { this.typeData = res.data; this.radio = res.data ? res.data[0].code : ""; } }); this.$http.getDictionaryTree({pid:"wq_type"}).then(res => { if (res.code === "CODE_0000") { this.categoryData = res.data; } }); }, // 获取表格数据 getQueryTable() { this.$http.getQueryParam(this.query).then(res => { if (res.code === "CODE_0000") { this.tableList = res.data.records; this.pageTotal=res.data.total; } }); }, // 触发搜索按钮 handleSearch() { this.$set(this.query, 'page', 1); this.getQueryTable(); }, // 重置按钮 handleReset() { if (this.query.awid || this.query.type) { this.query = { awid: '', type: '', page: 1, pageSize: 15, }; this.getQueryTable(); } }, // 高亮显示的行 selectedHighlight({row, rowIndex}) { row.index=rowIndex; return { "cursor": "pointer" }; }, // 导出 handleExportList() { this.isExport = true; this.$axios({ url: '/api/cbb-wsnetwork/baseStation/export', method:'post', responseType:'blob', headers: { 'content-type': 'application/json;charset=UTF-8', Authorization: `Bearer ${sessionStorage.getItem('access_token')}` }, }).then(response =>{ this.$lib.downloadFile(response); this.isExport = false; }).catch(e => { this.$message.warning(e.message); this.isExport = false; }) }, // 分页显示数量改变 handleSizeChange(val) { this.query.pageSize=val; this.getQueryTable(); }, // 点击分页 handlePageChange(val) { this.currentIndex=-1; this.$set(this.query, 'page', val); this.getQueryTable(); }, handleRadio(val) { console.log(val) } } }; </script> <style scoped> .searchMar { margin-bottom: 24px; } .paginationBox { height: 72px; } </style>