fix:添加季度选择器

web

5 天以前 8f50c8203c8df64dd0a566b228bae7f69156e109

 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>