|
@@ -1,12 +1,144 @@
|
|
|
<template>
|
|
|
- <div>1</div>
|
|
|
+ <div class="hum-page-container">
|
|
|
+ <div class="hum-page-title">水位时间</div>
|
|
|
+ <div class="hum-page-section hum-page-section-search">
|
|
|
+ <div class="hum-page-search">
|
|
|
+ <el-form :model="queryParams" size="large" ref="queryForm" label-position="top">
|
|
|
+ <el-row :gutter="30">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="选择站点">
|
|
|
+ <el-select v-model="queryParams.siteId" placeholder="请选择站点">
|
|
|
+ <el-option
|
|
|
+ v-for="item in siteList"
|
|
|
+ :key="item.siteId"
|
|
|
+ :label="item.siteName"
|
|
|
+ :value="item.siteId">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="设站日期">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateRange"
|
|
|
+ @change="dateRangeChangeHandler"
|
|
|
+ value-format="yyyy-MM-dd hh:mm:ss"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :clearable="false"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item class="hum-page-search-action">
|
|
|
+ <el-button type="primary" @click="handleQuery">查询</el-button>
|
|
|
+ <el-button @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hum-page-title" style="margin-top: 30px">
|
|
|
+ <span>数据图</span>
|
|
|
+ <div class="data-actions">
|
|
|
+ <el-radio-group v-model="mode" size="mini" class="data-actions-radio">
|
|
|
+ <el-radio-button label="chart">图标</el-radio-button>
|
|
|
+ <el-radio-button label="table">表格</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ <el-button type="primary" size="mini" @click="handleExport">导出</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hum-page-section">
|
|
|
+ <Chart v-if="mode === 'chart'" :queryParams="queryParams" />
|
|
|
+ <Table v-if="mode === 'table'" :queryParams="queryParams" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { listSite } from "@/api/site/site";
|
|
|
+import { parseTime } from '@/utils/ruoyi'
|
|
|
+import Chart from './chart'
|
|
|
+import Table from './table'
|
|
|
+
|
|
|
+const initDateRange = () => {
|
|
|
+ const start = new Date();
|
|
|
+ const end = new Date();
|
|
|
+ start.setHours(start.getHours() - 3);
|
|
|
+ return [parseTime(start), parseTime(end)];
|
|
|
+}
|
|
|
+
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ Chart,
|
|
|
+ Table,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ const dateRange = initDateRange(1);
|
|
|
+ return {
|
|
|
+ siteList: [],
|
|
|
+ dateRange: dateRange,
|
|
|
+ queryParams: {
|
|
|
+ siteId: 0,
|
|
|
+ startTime: dateRange[0],
|
|
|
+ endTime: dateRange[1],
|
|
|
+ },
|
|
|
+ mode: 'chart',
|
|
|
+ loading: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleQuery() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ resetQuery() {},
|
|
|
+ init() {
|
|
|
+ this.loading = true;
|
|
|
+ listSite({ page: 1, size: 1000 }).then(response => {
|
|
|
+ this.siteList = response.data.records || [];
|
|
|
+ if (this.siteList.length > 0) {
|
|
|
+ this.queryParams.siteId = this.siteList[0].siteId;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ).finally(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ dateRangeChangeHandler(dateRange) {
|
|
|
+ this.queryParams.startTime = dateRange[0];
|
|
|
+ this.queryParams.endTime = dateRange[1];
|
|
|
+ },
|
|
|
+ handleExport() {
|
|
|
+ window.open(`${process.env.VUE_APP_BASE_API}/achievement/downScatterPlot?siteId=${this.queryParams.siteId}&startTime=${this.queryParams.startTime}&endTime=${this.queryParams.endTime}`, '_blank')
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-
|
|
|
+.hum-page-section-search {
|
|
|
+ padding-bottom: 0;
|
|
|
+}
|
|
|
+.hum-page-search {
|
|
|
+ border-bottom: 0;
|
|
|
+}
|
|
|
+.data-actions {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.data-actions-radio {
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+.data-actions-radio /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|
|
+ color: #06A3B5;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
</style>
|