fix:修改水温深度监测

web

2 天以前 010ce04ba6e27f2bd603cec692d2695d7a8a3c1f

 src/views/screen/temperature/graphic/index.vue

@@ -1,17 +1,19 @@
<script setup>
import {ref, onMounted, watch} from "vue";
import {ref, onMounted} from "vue";
import * as echarts from 'echarts/core';
import {getTemperaturePointList} from '@/api/screen/index.js'
import Quarter from "@/components/Quarter";
import moment from "moment";
import { getGraphicData } from '@/api/screen/graphic/index.js'

import { debounce } from '@/utils/tool.js'
import {deepCOnfig} from '@/config/index.js'

const menuList = ref([])
const timeType = ref(1) //时间类型 1日 2周 3月 4季 5年
const showTime = ref(moment().format('YYYY-MM-DD')); //展示时间
const timeValue = ref(moment().format('YYYY-MM-DD'))  //处理后得时间
const searchVal = ref()
const tempDeep = ref(50)
const graphicRef = ref(null)
const chartsRef = ref([])  //动态生成图表ref
const chartData = ref([])
@@ -76,8 +78,6 @@
        yAxis: {
            type: 'value',
            name: unit,
            max: 40,
            min: 0,
            nameTextStyle: {
                color: '#fff',
                fontSize: '1rem'
@@ -163,6 +163,14 @@
    })
}

// 监听页面大小变化，改变echarts的大小
window.onresize = debounce(function () {
    charts?.forEach(el => {
        el.resize()
    })
}, 500, true)


// 全屏操作
const handleFullScreen = () => {
    graphicRef.value.requestFullscreen()
@@ -225,11 +233,13 @@

// 获取报表数据
const getChartData = (point = '') => {
    chartData.value = []; //先赋值为空，强制元素重载
    const data = {
        type: timeType.value,
        pointId: point,
        pointName: searchVal.value,
        dataTime: timeValue.value,
        waterLevel: tempDeep.value
    }
    getGraphicData(data).then(async res => {
        chartData.value = res.data
@@ -288,7 +298,7 @@
                        v-model="showTime"
                        type="date"
                        placeholder="选择时间"
                        style="width: 15rem"
                        style="width: 12rem"
                        @change="getTime"
                    />
                    <el-date-picker
@@ -297,7 +307,7 @@
                        type="week"
                        format="YYYY年 ww[周]"
                        placeholder="选择时间"
                        style="width: 15rem"
                        style="width: 12rem"
                        @change="getTime"
                    />
                    <el-date-picker
@@ -305,7 +315,7 @@
                        v-model="showTime"
                        type="month"
                        placeholder="选择时间"
                        style="width: 15rem"
                        style="width: 12rem"
                        @change="getTime"
                    />
                    <Quarter
@@ -313,7 +323,7 @@
                        placeholder="选择时间"
                        :default-value="showTime"
                        clearable
                        style="width: 15rem"
                        style="width: 12rem"
                        @change="getTime"
                    />
                    <el-date-picker
@@ -321,9 +331,18 @@
                        v-model="showTime"
                        type="year"
                        placeholder="选择时间"
                        style="width: 15rem"
                        style="width: 12rem"
                        @change="getTime"
                    />
                    <div class="name">深度</div>
                    <el-select v-model="tempDeep" style="width: 10rem">
                        <el-option
                            v-for="item in deepCOnfig"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                    <el-input v-model="searchVal" style="width: 15rem" clearable placeholder="请输入监测点名称"/>
                    <el-button @click="() => getChartData()">
                        <el-icon>
@@ -448,6 +467,7 @@
                    border-radius: 8px;

                    .charts {
                        width: 100%;
                        height: 100%;
                    }
                }