|
@@ -1,183 +1,139 @@
|
|
|
<template>
|
|
|
- <div
|
|
|
- v-way="wayFun('mainDiv')"
|
|
|
- style="width: 100%; height: 100%; padding: 8px"
|
|
|
- >
|
|
|
- <el-row>
|
|
|
- <el-form
|
|
|
- ref="ruleForm"
|
|
|
- :model="ruleForm"
|
|
|
- :rules="rules"
|
|
|
- style="
|
|
|
+ <div id="dayUseWater" class="dayUseWater">
|
|
|
+ <div class="filteroption">
|
|
|
+ <el-row>
|
|
|
+ <el-form
|
|
|
+ ref="ruleForm"
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ style="
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: flex-start;
|
|
|
align-items: flex-start;
|
|
|
"
|
|
|
- >
|
|
|
- <el-form-item
|
|
|
- label="类型:"
|
|
|
- style="width: 205px; display: inline-block; margin-bottom: 6px"
|
|
|
>
|
|
|
- <el-select
|
|
|
- v-model="categoryName"
|
|
|
- filterable
|
|
|
- style="display: inline-block; width: 140px"
|
|
|
- size="small"
|
|
|
- placeholder="请选择类型"
|
|
|
- @change="selectChange"
|
|
|
+ <el-form-item
|
|
|
+ label="类型:"
|
|
|
+ style="width: 205px; display: inline-block; margin-bottom: 6px"
|
|
|
>
|
|
|
- <el-option key="1" label="水厂" value="1" />
|
|
|
- <el-option key="2" label="管网" value="2" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="设备名称:"
|
|
|
- prop="site"
|
|
|
- style="width: 360px; display: inline-block; margin-bottom: 6px"
|
|
|
- >
|
|
|
- <el-select
|
|
|
- ref="site"
|
|
|
- v-model="ruleForm.site"
|
|
|
- style="display: inline-block; width: 240px"
|
|
|
- size="small"
|
|
|
- placeholder="请选择"
|
|
|
- @change="bindTsNameChange"
|
|
|
+ <el-select
|
|
|
+ v-model="categoryName"
|
|
|
+ filterable
|
|
|
+ style="display: inline-block; width: 140px"
|
|
|
+ size="small"
|
|
|
+ placeholder="请选择类型"
|
|
|
+ @change="selectChange"
|
|
|
+ >
|
|
|
+ <el-option key="1" label="水厂" value="1" />
|
|
|
+ <el-option key="2" label="管网" value="2" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="设备名称:"
|
|
|
+ prop="site"
|
|
|
+ style="width: 360px; display: inline-block; margin-bottom: 6px"
|
|
|
>
|
|
|
- <el-option
|
|
|
- v-for="item in isSeletcSite"
|
|
|
- :key="item.id"
|
|
|
- :label="item.name"
|
|
|
- :value="item.id"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
+ <el-select
|
|
|
+ ref="site"
|
|
|
+ v-model="ruleForm.site"
|
|
|
+ style="display: inline-block; width: 240px"
|
|
|
+ size="small"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="bindTsNameChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in isSeletcSite"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- <el-form-item
|
|
|
- label="指标名称:"
|
|
|
- prop="type"
|
|
|
- style="width: 240px; display: inline-block; margin-bottom: 6px"
|
|
|
- >
|
|
|
- <el-select
|
|
|
- v-model="ruleForm.indexName"
|
|
|
- collapse-tags
|
|
|
- style="display: inline-block; width: 140px"
|
|
|
- size="small"
|
|
|
- placeholder="请选择"
|
|
|
- disabled
|
|
|
+ <el-form-item
|
|
|
+ label="指标名称:"
|
|
|
+ prop="type"
|
|
|
+ style="width: 240px; display: inline-block; margin-bottom: 6px"
|
|
|
>
|
|
|
- <el-option
|
|
|
- v-for="item in indexNames"
|
|
|
- :key="item.variableCode"
|
|
|
- :label="item.displayName"
|
|
|
- :value="item.variableCode"
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.indexName"
|
|
|
+ collapse-tags
|
|
|
+ style="display: inline-block; width: 140px"
|
|
|
+ size="small"
|
|
|
+ placeholder="请选择"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in indexNames"
|
|
|
+ :key="item.variableCode"
|
|
|
+ :label="item.displayName"
|
|
|
+ :value="item.variableCode"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="统计日期:"
|
|
|
+ prop="times"
|
|
|
+ style="display: inline-block; width: 440px; margin-bottom: 6px"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="ruleForm.times"
|
|
|
+ size="small"
|
|
|
+ type="daterange"
|
|
|
+ align="right"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ format="yyyy-MM-dd"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
/>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="统计日期:"
|
|
|
- prop="times"
|
|
|
- style="display: inline-block; width: 440px; margin-bottom: 6px"
|
|
|
- >
|
|
|
- <el-date-picker
|
|
|
- v-model="ruleForm.times"
|
|
|
- size="small"
|
|
|
- type="daterange"
|
|
|
- align="right"
|
|
|
- unlink-panels
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- format="yyyy-MM-dd"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- style="display: inline-block; width: 300px; margin-bottom: 6px"
|
|
|
- >
|
|
|
- <el-button
|
|
|
- size="small"
|
|
|
- type="primary"
|
|
|
- @click="monitorHisToryQuery('ruleForm')"
|
|
|
- >查询</el-button>
|
|
|
- <el-button
|
|
|
- size="small"
|
|
|
- type="primary"
|
|
|
- @click="statisticsScadaExport('ruleForm')"
|
|
|
- >导出</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-row>
|
|
|
- <div style="height: calc(100% - 35px)">
|
|
|
- <el-table
|
|
|
- id="siteMonitor"
|
|
|
- v-loading="loading"
|
|
|
- class="mapTable"
|
|
|
- :data="dayUseWaterData"
|
|
|
- :total="tableTotal"
|
|
|
- :summary-method="getSummaries"
|
|
|
- show-summary
|
|
|
- border
|
|
|
- style="width: 100%; height:calc(100% - 80px); margin-top: 20px"
|
|
|
- >
|
|
|
- <el-table-column type="index" align="center" width="50" label="序号" />
|
|
|
- <el-table-column
|
|
|
- prop="deviceName"
|
|
|
- align="center"
|
|
|
- label="设备名称"
|
|
|
- sortable="custom"
|
|
|
- show-overflow-tooltip
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="codeName"
|
|
|
- align="center"
|
|
|
- label="统计指标名称"
|
|
|
- sortable="custom"
|
|
|
- show-overflow-tooltip
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="endTime"
|
|
|
- align="center"
|
|
|
- label="监测时间"
|
|
|
- sortable="custom"
|
|
|
- show-overflow-tooltip
|
|
|
- >
|
|
|
- <template slot-scope="scope">
|
|
|
- {{ scope.row.endTime.split(" ")[0] }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="difference"
|
|
|
- align="center"
|
|
|
- sortable="custom"
|
|
|
- :label="'日用量(m³)'"
|
|
|
- />
|
|
|
- </el-table>
|
|
|
- <el-row style="margin-top: 0px">
|
|
|
- <el-col :span="24">
|
|
|
- <el-pagination
|
|
|
- ref="pagination"
|
|
|
- small
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :pager-count="5"
|
|
|
- :current-page="pageInfo.current"
|
|
|
- :page-sizes="[10,40, 80, 120, 200]"
|
|
|
- style="margin-top: 4px"
|
|
|
- :page-size="pageInfo.size"
|
|
|
- :total="tableTotal"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ style="display: inline-block; width: 300px; margin-bottom: 6px"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ @click="monitorHisToryQuery('ruleForm')"
|
|
|
+ >查询</el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ @click="statisticsScadaExport('ruleForm')"
|
|
|
+ >导出</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
+ <div class="tableheight">
|
|
|
+ <table-item
|
|
|
+ ref="customerReportDateTable"
|
|
|
+ :table-data="dayUseWaterData"
|
|
|
+ :column="column"
|
|
|
+ :for-id="true"
|
|
|
+ :pagination="true"
|
|
|
+ :pagesize="pageInfo.size"
|
|
|
+ :currentpage="pageInfo.current"
|
|
|
+ :border="true"
|
|
|
+ :multiple="true"
|
|
|
+ :total="tableTotal"
|
|
|
+ :fixed="true"
|
|
|
+ :isdelete="false"
|
|
|
+ :is-select="false"
|
|
|
+ :stripe="true"
|
|
|
+ :get-summaries="getSummaries"
|
|
|
+ :summary="true"
|
|
|
+ @handleCurrentChange="handleCurrentChange"
|
|
|
+ @handleSizeChange="handleSizeChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import elementResizeDetectorMaker from 'element-resize-detector'
|
|
|
-import TableItem from '@/components/Table'
|
|
|
-import Echarts from 'echarts'
|
|
|
-import ExportBtn from '@/views/zhpt/wxreportforms/components/ExportBtn'
|
|
|
+import TableItem from '@/components/TableAuto'
|
|
|
+
|
|
|
import {
|
|
|
queryDevice,
|
|
|
queryIndexConfiguration,
|
|
@@ -187,7 +143,7 @@ import {
|
|
|
import { getSysCommonCode } from '@/api/dataCenter'
|
|
|
export default {
|
|
|
name: 'AnalysisResult',
|
|
|
- components: { TableItem, Echarts, ExportBtn },
|
|
|
+ components: { TableItem },
|
|
|
directives: {
|
|
|
way(el, bind) {
|
|
|
if (typeof bind.value === 'function') bind.value(el)
|
|
@@ -196,14 +152,39 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
dayUseWaterData: [], // 表格数据
|
|
|
- tabsItem: [],
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: '设备名称',
|
|
|
+ prop: 'deviceName',
|
|
|
+ align: 'center',
|
|
|
+ sortable: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '统计指标名称',
|
|
|
+ prop: 'codeName',
|
|
|
+ align: 'center',
|
|
|
+ sortable: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '监测时间',
|
|
|
+ prop: 'endTime',
|
|
|
+ align: 'center',
|
|
|
+ sortable: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '日用量(m³)',
|
|
|
+ prop: 'difference',
|
|
|
+ align: 'center',
|
|
|
+ sortable: true
|
|
|
+ }
|
|
|
+ ],
|
|
|
activeName: '',
|
|
|
monitorLable: '',
|
|
|
tableLoading: false,
|
|
|
nameUnit: '',
|
|
|
total: 0,
|
|
|
loading: false,
|
|
|
- pageInfo: { current: 1, size: 40 }, // 分页数据
|
|
|
+ pageInfo: { current: 1, size: 10 }, // 分页数据
|
|
|
ruleForm: {
|
|
|
site: '',
|
|
|
indexName: '',
|
|
@@ -261,6 +242,7 @@ export default {
|
|
|
this.queryDevice() // 绑定测站名称
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
methods: {
|
|
|
/**
|
|
|
* 合计
|
|
@@ -270,7 +252,7 @@ export default {
|
|
|
const { columns, data } = param
|
|
|
const sums = []
|
|
|
columns.forEach((column, index) => {
|
|
|
- if (index === 0) {
|
|
|
+ if (index === 1) {
|
|
|
sums[index] = '合计'
|
|
|
return
|
|
|
}
|
|
@@ -469,10 +451,33 @@ export default {
|
|
|
this.queryDevice()
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
</script>
|
|
|
-<style scoped="less">
|
|
|
-.el-table__footer-wrapper {
|
|
|
- margin-bottom: 32px;
|
|
|
+<style lang='scss'>
|
|
|
+.dayUseWater{
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ padding: 5px;
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ .filteroption {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .spanjg{
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tableheight {
|
|
|
+ margin-top: 4px;
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
</style>
|