From 8f50c8203c8df64dd0a566b228bae7f69156e109 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期二, 15 四月 2025 17:34:08 +0800
Subject: [PATCH] fix:添加季度选择器
---
src/views/screen/temperature/graphic/index.vue | 127 ++++++++++++++++++++++++++++--------------
1 files changed, 84 insertions(+), 43 deletions(-)
diff --git a/src/views/screen/temperature/graphic/index.vue b/src/views/screen/temperature/graphic/index.vue
index 3fb2e77..2fc797e 100644
--- a/src/views/screen/temperature/graphic/index.vue
+++ b/src/views/screen/temperature/graphic/index.vue
@@ -2,16 +2,15 @@
import {ref, reactive, onMounted} from "vue";
import * as echarts from 'echarts/core';
import html2canvas from "html2canvas";
+import {getTemperaturePointList} from '@/api/screen/index.js'
+import Quarter from "@/components/Quarter";
+import moment from "moment";
-const startTime = ref()
-const endTime = ref()
+const menuList = ref([])
+const timeType = ref('date')
+const timeRange = ref()
const searchVal = ref()
-const selectType = ref(1);
-const typeOption = ref([
- { label: '水电站流量监测点', value: 1 },
- { label: '新扎口流量监测点', value: 2 },
-])
const graphicRef = ref(null)
const chartsRef = ref([]) //动态生成图表ref
let charts = []
@@ -99,6 +98,10 @@
}
}
+const changeType = (type) => {
+ timeType.value = type;
+ timeRange.value = ''
+}
// 初始化图表
const initCharts = () => {
@@ -118,7 +121,7 @@
// 一键导出
const handleExport = () => {
- chartsRef.value?.forEach(item => {
+ chartsRef.value?.forEach((item, index) => {
html2canvas(item, {
scale: 2, // 提高渲染质量
useCORS: true, // 如果需要跨域资源
@@ -127,13 +130,27 @@
}).then(canvas => {
const link = document.createElement("a");
link.href = canvas.toDataURL("image/png");
- link.download = '截图.png';
+ link.download = `图表分析${index}.png`;
link.click()
})
})
}
+// 获取水温监控点菜单
+const getTempMonitor = () => {
+ getTemperaturePointList().then(res => {
+ menuList.value = res.data
+ })
+}
+
+// 获取时间
+const getTime = (value) => {
+ const time = moment(value).format('YYYY-MM-DD')
+ console.log(time)
+}
+
onMounted(() => {
+ getTempMonitor()
initCharts()
})
@@ -144,51 +161,75 @@
<div class="graphic-menu">
<div class="menu-t">监测点列表</div>
<el-menu class="el-menu">
- <el-sub-menu index="1">
- <template #title>
- <span>可移动监测点</span>
+ <template v-for="(item, index) in menuList" :key="index+1">
+ <template v-if="item?.childrenList?.length === 0">
+ <el-menu-item :index="item.id">{{ item.pointName }}</el-menu-item>
</template>
- <el-menu-item index="1-1">水电站流量监测点</el-menu-item>
- </el-sub-menu>
- <el-sub-menu index="2">
- <template #title>
- <span>固定位监测点</span>
+ <template v-else>
+ <el-sub-menu :index="item.id">
+ <template #title>
+ <span>{{ item.pointName }}</span>
+ </template>
+ <el-menu-item v-for="(child, cidx) in item.childrenList" :key="cidx" :index="child.id">
+ {{ child.pointName }}
+ </el-menu-item>
+ </el-sub-menu>
</template>
- <el-menu-item index="2-1">新扎口流量监测点</el-menu-item>
- </el-sub-menu>
+ </template>
</el-menu>
</div>
<div class="graphic-info">
<div class="graphic-tool">
<div class="tool-l">
- <div class="name">开始时间</div>
+ <div class="name">类型</div>
+ <el-button-group class="ml-4">
+ <el-button :type="timeType === 'date' ? 'primary' : ''" @click="changeType('date')">日</el-button>
+ <el-button :type="timeType === 'week' ? 'primary' : ''" @click="changeType('week')">周</el-button>
+ <el-button :type="timeType === 'month' ? 'primary' : ''" @click="changeType('month')">月</el-button>
+ <el-button :type="timeType === 'quarter' ? 'primary' : ''" @click="changeType('quarter')">季</el-button>
+ <el-button :type="timeType === 'year' ? 'primary' : ''" @click="changeType('year')">年</el-button>
+ </el-button-group>
<el-date-picker
- v-model="startTime"
- type="datetime"
- style="width: 12rem"
- placeholder="请选择开始时间"
+ v-if="timeType === 'date'"
+ v-model="timeRange"
+ type="date"
+ placeholder="选择时间"
+ style="width: 15rem"
+ @change="getTime"
/>
- <div class="name">结束时间</div>
<el-date-picker
- v-model="endTime"
- type="datetime"
- style="width: 12rem"
- placeholder="请选择结束时间"
+ v-if="timeType === 'week'"
+ v-model="timeRange"
+ type="week"
+ format="YYYY年 ww[周]"
+ placeholder="选择时间"
+ style="width: 15rem"
+ @change="getTime"
/>
- <div class="name">监测点区域</div>
- <el-select
- v-model="selectType"
- class="tool-select"
- placeholder="Select"
- style="width: 10rem"
- >
- <el-option
- v-for="item in typeOption"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
+ <el-date-picker
+ v-if="timeType === 'month'"
+ v-model="timeRange"
+ type="month"
+ placeholder="选择时间"
+ style="width: 15rem"
+ @change="getTime"
+ />
+ <Quarter
+ v-if="timeType === 'quarter'"
+ placeholder="选择时间"
+ :default-value="timeRange"
+ clearable
+ style="width: 15rem"
+ @change="getTime"
+ />
+ <el-date-picker
+ v-if="timeType === 'year'"
+ v-model="timeRange"
+ type="year"
+ placeholder="选择时间"
+ style="width: 15rem"
+ @change="getTime"
+ />
<el-input v-model="searchVal" style="width: 15rem" placeholder="请输入监测点名称" />
<el-button><el-icon><Search /></el-icon>搜索</el-button>
<el-button type="success" @click="handleExport">一键导出</el-button>
--
Gitblit v1.9.3