| | |
| | | <script> |
| | | import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue'; |
| | | import TimeShortCuts from '@/sfc/TimeShortCuts.vue'; |
| | | import ScenarioType from '@/sfc/ScenarioType.vue'; |
| | | import InputSearch from '@/sfc/InputSearch.vue'; |
| | | |
| | | import { ElMessage } from 'element-plus' |
| | | import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue' |
| | | |
| | | import { useCommonFunction } from '../../utils/common.js'; |
| | |
| | | |
| | | export default { |
| | | components: { |
| | | TimeSelectWithShortCuts, |
| | | TimeShortCuts, |
| | | ScenarioType, |
| | | InputSearch, |
| | | ButtonClick, |
| | |
| | | // 结束时间 |
| | | endTime: '' |
| | | }, |
| | | // 搜索框传递上来的设备编号 |
| | | tempMnCode :'', |
| | | // 返回的数据 |
| | | tableData: [], |
| | | // 表格数据 |
| | |
| | | // 已选中的场景类型 |
| | | scenarioType: [], |
| | | // 表格高度 |
| | | tableHeight: '500' |
| | | tableHeight: '500', |
| | | // 站点总数量 |
| | | siteNums:0 |
| | | }; |
| | | }, |
| | | setup() { |
| | |
| | | |
| | | // 页号改变时触发 |
| | | handleCurrentChange(val) { |
| | | console.log('当前页为:', val); |
| | | // 将当前页号给currentPage |
| | | this.currentPage = val; |
| | | |
| | |
| | | |
| | | // 查询数据 |
| | | handleSubmit() { |
| | | // if (this.isExceedOneMonth(this.form.beginTime, this.form.endTime)) { |
| | | // alert('时间跨度不能超过一个月'); |
| | | // return; |
| | | // } |
| | | |
| | | this.loading = true; |
| | | this.queryButton = true |
| | | let params = {}; |
| | |
| | | if (this.scenarioType.length != 0) { |
| | | params['scenarioType'] = this.scenarioType.join(); |
| | | } |
| | | |
| | | this.$http.get('/dust/history1', { params: params }).then((response) => { |
| | | // 保存返回的 |
| | | this.tableData = response.data.data.rows; |
| | |
| | | // 保存返回的 |
| | | this.tableData = response.data.data.rows; |
| | | this.displayData = this.tableData; |
| | | |
| | | this.loading = false; |
| | | if (response.data.data.total == 0) { |
| | | ElMessage('该时段无数据'); |
| | | this.isNoData = true; |
| | | return; |
| | | } |
| | | this.total = response.data.data.total; |
| | | this.loading = false; |
| | | |
| | | }); |
| | | } |
| | | } |
| | |
| | | </script> |
| | | |
| | | <template> |
| | | <div class="history-container"> |
| | | <el-row> |
| | | <el-col ref="h1" class="head-row"> |
| | | <el-card> |
| | |
| | | <div class="demo-form-inline"> |
| | | <el-row> |
| | | <el-col> |
| | | |
| | | <el-form-item> |
| | | <AreaAndmonitorType></AreaAndmonitorType> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <template #label> </template> |
| | | <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)"> |
| | | <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" @submit-site-nums="(n)=>(siteNums=n)"> |
| | | </InputSearch> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <template #label> |
| | | <span class="font-label">设备编号:</span> |
| | | </template> |
| | | <el-input v-model="form.number" clearable placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | |
| | | <el-col> |
| | | <el-form-item> |
| | | <TimeShortCuts time-type="week" @submit-time="giveTime"></TimeShortCuts> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <ScenarioType @submitScenarioType="(val) => (scenarioType = val)"> |
| | | </ScenarioType> |
| | | </el-form-item> |
| | | |
| | | </el-col> |
| | | <el-form-item> |
| | | <TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts> |
| | | </el-form-item> |
| | | |
| | | |
| | | </el-row> |
| | | </div> |
| | | <div class="button-and-export"> |
| | | <el-form-item> |
| | | <!-- <el-button |
| | | type="primary" |
| | | @click="handleSubmit" |
| | | style="margin-left: 10px" |
| | | ><el-icon style="margin-right: 6px;font-size: 1.2em;"><i-ep-Search/></el-icon>查询</el-button |
| | | > |
| | | <el-button type="success" @click="exportDom" round><el-icon style="margin-right: 6px;margin-bottom:2px;font-size: 1.2em;"><i-ep-Download ></i-ep-Download></el-icon>导出数据</el-button> --> |
| | | <el-tag class="ml-2" type="success" size="large">站点总数</el-tag> |
| | | <span class="tag-text">{{ siteNums }}</span> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <ButtonClick style="margin-right: 12px;" content="搜索" type="primary" :loading="queryButton" @do-search="handleSubmit"></ButtonClick> |
| | | <ButtonExportExcel content="导出数据" type="success" :loading="exportButton" @do-export="exportDom"></ButtonExportExcel> |
| | | </el-form-item> |
| | | </div> |
| | | </el-form> |
| | | |
| | | </el-card> |
| | | </el-col> |
| | | <el-col> |
| | | |
| | | </el-col> |
| | | </el-row> |
| | | |
| | |
| | | v-loading="loading"> |
| | | <!--绑定一个方法,将返回值赋给index,即表格每行数据的下标--> |
| | | <el-table-column type="index" label="序号" align="center" fixed :index="indexMethod"></el-table-column> |
| | | <el-table-column prop="name" label="站点名称" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="name" label="点位名称" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="dutyCompany" label="供应商" align="center" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="mnCode" label="设备编号" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="mnCode" label="设备编码" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="typeName" label="类型" align="center" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="dustValue" label="扬尘浓度(mg/m³)" align="center" sortable |
| | | <el-table-column prop="dustValue" label="TSP(mg/m³)" align="center" sortable |
| | | show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="noiseValue" label="噪声(dB)" align="center" sortable show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="lst" label="采集时间" sortable align="center" show-overflow-tooltip></el-table-column> |
| | |
| | | <el-empty v-show="isNoData" :image-size="200" /> |
| | | |
| | | </el-row> |
| | | </div> |
| | | </template> |
| | | |
| | | <style lang="scss" scoped> |
| | | // 整体左外边距 |
| | | <style scoped> |
| | | .history-container { |
| | | min-width: 1200px; |
| | | } |
| | | /* // 整体左外边距 */ |
| | | .el-row { |
| | | margin-left: 10px; |
| | | } |
| | |
| | | .font-label { |
| | | margin-top: 3px; |
| | | font-weight: bold; |
| | | font-size: 14px; |
| | | color: #333333; |
| | | } |
| | | |
| | | .demo-form-inline { |
| | |
| | | |
| | | .button-and-export { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | /* justify-content: flex-end; */ |
| | | justify-content: space-between; |
| | | /* 从行尾位置开始排列 */ |
| | | } |
| | | |
| | | .el-table { |
| | | /* color: #303133 */ |
| | | color: rgb(59, 60, 63) |
| | | } |
| | | .el-pagination { |
| | | margin: 10px 0px; |
| | | margin: 10px 10px; |
| | | } |
| | | .tag-text{ |
| | | margin-left: 10px; |
| | | font-size: 14px; |
| | | } |
| | | </style> |