web
2025-05-05 92e4c0f5deeba69d52603da02bea2ab7836bb9f6
src/views/screen/temperature/graphic/index.vue
@@ -7,12 +7,25 @@
import { getGraphicData } from '@/api/screen/graphic/index.js'
import { debounce } from '@/utils/tool.js'
const deepCOnfig = [
    { label: '10米', value: 10 },
    { label: '20米', value: 20 },
    { label: '30米', value: 30 },
    { label: '40米', value: 40 },
    { label: '50米', value: 50 },
    { label: '60米', value: 60 },
    { label: '70米', value: 70 },
    { label: '80米', value: 80 },
    { label: '90米', value: 90 },
    { label: '100米', value: 100 },
]
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([])
@@ -77,8 +90,6 @@
        yAxis: {
            type: 'value',
            name: unit,
            max: 40,
            min: 0,
            nameTextStyle: {
                color: '#fff',
                fontSize: '1rem'
@@ -240,6 +251,7 @@
        pointId: point,
        pointName: searchVal.value,
        dataTime: timeValue.value,
        waterLevel: tempDeep.value
    }
    getGraphicData(data).then(async res => {
        chartData.value = res.data
@@ -298,7 +310,7 @@
                        v-model="showTime"
                        type="date"
                        placeholder="选择时间"
                        style="width: 15rem"
                        style="width: 12rem"
                        @change="getTime"
                    />
                    <el-date-picker
@@ -307,7 +319,7 @@
                        type="week"
                        format="YYYY年 ww[周]"
                        placeholder="选择时间"
                        style="width: 15rem"
                        style="width: 12rem"
                        @change="getTime"
                    />
                    <el-date-picker
@@ -315,7 +327,7 @@
                        v-model="showTime"
                        type="month"
                        placeholder="选择时间"
                        style="width: 15rem"
                        style="width: 12rem"
                        @change="getTime"
                    />
                    <Quarter
@@ -323,7 +335,7 @@
                        placeholder="选择时间"
                        :default-value="showTime"
                        clearable
                        style="width: 15rem"
                        style="width: 12rem"
                        @change="getTime"
                    />
                    <el-date-picker
@@ -331,9 +343,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>