fix:对接报表数据

web

昨天 c6159b0a5a424250adeca1bc2b475da5324fe038

fix:对接报表数据

 src/api/screen/graphic/index.js

对比新文件
@@ -0,0 +1,13 @@
import {publicRequest} from "@/utils/request.js";


/**
 * 获取水温监控报表
 */
export const getGraphicData = (data) => {
    return  publicRequest({
        url: '/waterTemperature/getDataAnalyse',
        method: 'post',
        data
    })
}

 src/api/screen/statics/index.js

对比新文件
@@ -0,0 +1,24 @@
import {publicRequest} from "@/utils/request.js";


/**
 * 获取水温统计数据
 */
export const getStatisticsData = (data) => {
    return  publicRequest({
        url: '/waterTemperature/totalStatistics',
        method: 'post',
        data
    })
}

/**
 * 获取报警统计数据
 */
export const getStatisticsAlarm = (data) => {
    return  publicRequest({
        url: '/waterTemperature/alarmTotalCount',
        method: 'post',
        data
    })
}

 src/api/screen/video.js

对比新文件
@@ -0,0 +1,36 @@
import { publicRequest } from '@/utils/request.js'

// 根据小区id获取监控点
export const getVideoList = (params) => {
    return publicRequest({
        url: '/monitorVideoStreaming/getAllByPoint',
        method: 'get',
        params
    })
}

// 开始视频点播
export const getVideoMedia = (deviceId, channelId) => {
    return publicRequest({
        url: `/monitorVideoStreaming/play/${deviceId}/${channelId}`,
        method: 'get',
    })
}


// 视频停止点播
export const stopVideoMedia = (deviceId, channelId) => {
    return publicRequest({
        url: `/monitorVideoStreaming/stop/${deviceId}/${channelId}`,
        method: 'get',
    })
}


// 继续点播
export const renewVideoMedia = (deviceId, channelId) => {
    return publicRequest({
        url: `/monitorVideoStreaming/updateEndTime/${deviceId}/${channelId}`,
        method: 'get',
    })
}

 src/api/screen/warning/index.js

@@ -35,4 +35,16 @@
        method: 'get',
        params
    })
}


/**
 * 报警分析
 */
export const getWarnChartsInfo = (data) => {
    return publicRequest({
        url: '/waterFlow/alarmTotalCount',
        method: 'post',
        data
    })
}

 src/components/Quarter/index.vue

@@ -126,7 +126,6 @@

onMounted(() => {
    if (props.defaultValue) {
        console.log(props.defaultValue)
        initDefaultValue(props.defaultValue);
    }
})

 src/main.js

@@ -36,12 +36,12 @@

// 按需引入echarts
import * as echarts from 'echarts/core';
import { GridComponent, ToolboxComponent, TooltipComponent, TitleComponent, VisualMapComponent, } from 'echarts/components';
import { GridComponent, ToolboxComponent, TooltipComponent, TitleComponent, VisualMapComponent, LegendComponent } from 'echarts/components';
import { LineChart, BarChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([GridComponent, LineChart, BarChart, CanvasRenderer, UniversalTransition, ToolboxComponent, TooltipComponent, TitleComponent, VisualMapComponent,]);
echarts.use([GridComponent, LineChart, BarChart, CanvasRenderer, UniversalTransition, ToolboxComponent, TooltipComponent, TitleComponent, VisualMapComponent, LegendComponent]);

// 分页组件
import Pagination from '@/components/Pagination'

 src/utils/tool.js

对比新文件
@@ -0,0 +1,15 @@
//防抖(立即执行)
export function debounce(func, wait, immediate) {
    let timeout;
    return function(...args) {
        const context = this;
        const later = () => {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

 src/views/screen/flow/ecology/index.vue

@@ -181,8 +181,8 @@
}

onMounted(() => {
    initCharts()
    getPoint()
    initCharts()
})
</script>


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

@@ -124,49 +124,6 @@
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">新扎口流量监测点</div>
                        <div class="videoBox"></div>
                        <div class="info">
                            <div class="info-list">
                                <div class="info-item">
                                    <div class="name">水位:</div>
                                    <div class="val"><span>2332</span>m</div>
                                </div>
                                <div class="info-item">
                                    <div class="name">表面流速:</div>
                                    <div class="val"><span>4.5</span>m/s</div>
                                </div>
                                <div class="info-item">
                                    <div class="name">水面宽度:</div>
                                    <div class="val"><span>100</span>m</div>
                                </div>
                                <div class="info-item">
                                    <div class="name">平均流速:</div>
                                    <div class="val"><span>4.5</span>m/s</div>
                                </div>
                                <div class="info-item">
                                    <div class="name">过水面积:</div>
                                    <div class="val"><span>30</span>㎡</div>
                                </div>
                                <div class="info-item">
                                    <div class="name">雷达流速:</div>
                                    <div class="val"><span>4.5</span>m/s</div>
                                </div>
                                <div class="info-item">
                                    <div class="name">实时流速:</div>
                                    <div class="val"><span>120</span>㎡/s</div>
                                </div>
                                <div class="info-item">
                                    <div class="name">起点距:</div>
                                    <div class="val"><span>500</span>m</div>
                                </div>
                            </div>
                            <div class="info-btn">
                                <el-button style="width: 6rem">抓拍</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@@ -264,8 +221,7 @@
                    .videoBox{
                        width: 100%;
                        height: 60%;
                        background: url("@/assets/images/login_icon.png") no-repeat;
                        background-size: 100% 100%;
                        background-color: #000;
                    }
                    .info{
                        width: 100%;

 src/views/screen/flow/warning/index.vue

@@ -2,21 +2,24 @@
import {onMounted, ref, reactive} from "vue";
import * as echarts from 'echarts/core';
import Table from '@/components/Table/index.vue'
import { warnHistory, exportWarnHistory, editConfirm } from '@/api/screen/warning/index.js'
import { warnHistory, exportWarnHistory, editConfirm, getWarnChartsInfo } from '@/api/screen/warning/index.js'
import { exportBlobFile } from '@/utils/index.js'
import { ElMessage } from 'element-plus'

const tableRef = ref(null)
const timeType = ref(0)
const timeType = ref(1)
const warnChartRef = ref()
const exportTime = ref()
const searchData = reactive({
    createTimeRange: ''
    createTimeRange: '',
    monitorType: 2
})

const openDialog = ref(false)
const dialogInfo = ref()
const warnStatus = ref(0)

const warnChartData = ref([])

let warnCharts = null;
let tableHead = [
@@ -27,51 +30,60 @@
    { prop: 'isConfirm', label: '报警确认', slot: true },
]

const initWarnChart = () => {
const initWarnCgart = () => {
    if(warnChartRef.value) {
        warnCharts = echarts.init(warnChartRef.value);
        const options = {
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                top: 80,
                left: 60,
                right: 60,
                bottom: 60
            },
            xAxis: {
                type: 'category',
                data: ['设备离线', '水位异常', '流量异常', '流速异常', '其他异常'],
                axisLabel: {
                    color: '#fff',
                    fontSize: '1.2rem'
                }
            },
            yAxis: {
                type: 'value',
                name: '次',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: '1.2rem'
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: '1.2rem'
                }
            },
            series: [
                {
                    data: [36, 44, 38, 24, 63],
                    type: 'bar',
                    itemStyle: {
                        color: 'rgba(187,207,255,0.6)'
                    }
                }
            ]
        }
        warnCharts.setOption(options);
    }
}

const updateWarnChart = () => {
    let xdata = []
    let sdata = []
    warnChartData.value?.forEach(item => {
        xdata.push(item.key)
        sdata.push(item.value)
    })
    const options = {
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            top: 80,
            left: 60,
            right: 60,
            bottom: 60
        },
        xAxis: {
            type: 'category',
            data: xdata,
            axisLabel: {
                color: '#fff',
                fontSize: '1.2rem'
            }
        },
        yAxis: {
            type: 'value',
            name: '次',
            nameTextStyle: {
                color: '#fff',
                fontSize: '1.2rem'
            },
            axisLabel: {
                color: '#fff',
                fontSize: '1.2rem'
            }
        },
        series: [
            {
                data: sdata,
                type: 'bar',
                itemStyle: {
                    color: 'rgba(187,207,255,0.6)'
                }
            }
        ]
    }
    warnCharts.setOption(options);
}

const searchTable = () => {
@@ -98,6 +110,7 @@

// 处理报警内容
const handleComfirm = () => {
    if(!warnStatus.value) ElMessage.warning('请选择报警类型')
    editConfirm({ id: dialogInfo.value.id, status: warnStatus.value }).then(res => {
        ElMessage.success('提交成功')
        tableRef.value.getData()
@@ -109,8 +122,17 @@
    })
}

// 获取报警分析
const getWarnCharts = () => {
    getWarnChartsInfo({ type: timeType.value }).then(res => {
        warnChartData.value = res.data
        updateWarnChart()
    })
}

onMounted(() => {
    initWarnChart()
    initWarnCgart()
    getWarnCharts()
})
</script>

@@ -120,10 +142,10 @@
            <div class="item-t">
                <div class="name">报警分析</div>
                <div class="select">
                    <el-radio-group v-model="timeType">
                    <el-radio-group v-model="timeType" @change="getWarnCharts">
                        <el-radio :value="1">日</el-radio>
                        <el-radio :value="2">月</el-radio>
                        <el-radio :value="3">年</el-radio>
                        <el-radio :value="3">月</el-radio>
                        <el-radio :value="5">年</el-radio>
                    </el-radio-group>
                </div>
            </div>

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

@@ -1,56 +1,68 @@
<script setup>
import {ref, reactive, onMounted} from "vue";
import {ref, onMounted, watch} 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";
import { getGraphicData } from '@/api/screen/graphic/index.js'


const menuList = ref([])
const timeType = ref('date')
const timeRange = 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 graphicRef = ref(null)
const chartsRef = ref([])  //动态生成图表ref
const chartData = ref([])
let charts = []

// 动态设置ref
const setChartsRef = (el ,index) => {
    if(el){
const setChartsRef = (el, index) => {
    if (el) {
        chartsRef.value[index] = el
        charts[index] = 'charts' + index
    }
}

const data = [
    [ {name: '一月', value: 22}, {name: '二月', value: 38}, {name: '三月', value: 31}, ],
    [ {name: '一月', value: 22}, {name: '二月', value: 38}, {name: '三月', value: 31}, ],
    [ {name: '一月', value: 22}, {name: '二月', value: 38}, {name: '三月', value: 31}, ],
    [ {name: '一月', value: 22}, {name: '二月', value: 38}, {name: '三月', value: 31}, ],
    [ {name: '一月', value: 22}, {name: '二月', value: 38}, {name: '三月', value: 31}, ],
    [ {name: '一月', value: 22}, {name: '二月', value: 38}, {name: '三月', value: 31}, ],
]

// 获取图表配置
const getChartsOptions = (data, unit, maxData, minData=0) => {
const getChartsOptions = (data, unit) => {
    let xdata = [];
    let sdata = [];
    if(data) {
        data.forEach(item => {
            xdata.push(item.name)
            sdata.push(item.value);
    let Hdata = [];
    let Adata = [];
    let Ldata = [];
    if (data) {
        data.dataVOList.forEach(item => {
            xdata.push(item.dataTime)
            Hdata.push(item.maxValue);
            Adata.push(item.avgValue);
            Ldata.push(item.minValue);
        })
    }
    return {
        title: {
            text: data.pointName,
            left: '3%',
            textStyle: {
                color: '#fff',
            }
        },
        tooltip: {
            trigger: 'axis',
        },
        color: ['#D4B3E3FF', '#00DDFFFF', '#ABFA97FF'],
        legend: {
            top: 0,
            data: ['最高水温', '平均水温', '最低水温'],
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            top: 50,
            left: 50,
            right: 50,
            bottom: 40
            left: '4%',
            right: '5%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
@@ -64,6 +76,8 @@
        yAxis: {
            type: 'value',
            name: unit,
            max: 40,
            min: 0,
            nameTextStyle: {
                color: '#fff',
                fontSize: '1rem'
@@ -75,40 +89,75 @@
        },
        series: [
            {
                data: sdata,
                name: '最高水温',
                data: Hdata,
                type: 'line',
                areaStyle: {},
            }
        ],
        visualMap: [
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(212,179,227)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(212,179,227,0)'
                        }
                    ])
                },
            },
            {
                type: 'piecewise',
                show: false,
                dimension: 1,
                seriesIndex: 0,
                pieces: [
                    {max: minData, color: 'red'},
                    { min: maxData, color: 'red'}
                ],
                outOfRange: { // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
                    color: '#8EE5FA'
                }
                name: '平均水温',
                data: Adata,
                type: 'line',
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(0, 221, 255)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(0,221,255,0)'
                        }
                    ])
                },
            },
            {
                name: '最低水温',
                data: Ldata,
                type: 'line',
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(171,250,151)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(171,250,151,0)'
                        }
                    ])
                },
            }
        ],
        ]
    }
}

// 选择时间类型
const changeType = (type) => {
    timeType.value = type;
    timeRange.value = ''
    showTime.value = ''
}

// 初始化图表
const initCharts = () => {
    data.forEach((item, index) => {
        if(chartsRef.value[index]) {
    chartData.value.forEach((item, index) => {
        if (chartsRef.value[index]) {
            charts[index] = echarts.init(chartsRef.value[index])
            const option = getChartsOptions(item, '℃', 35)
            const option = getChartsOptions(item, '℃')
            charts[index].setOption(option)
        }
    })
@@ -121,19 +170,50 @@

// 一键导出
const handleExport = () => {
    chartsRef.value?.forEach((item, index) => {
        html2canvas(item, {
            scale: 2, // 提高渲染质量
            useCORS: true, // 如果需要跨域资源
            allowTaint: true, // 如果需要处理跨域图片
            backgroundColor: 'rgba(23, 108, 229, 0.3)'  //背景色
        }).then(canvas => {
            const link = document.createElement("a");
            link.href = canvas.toDataURL("image/png");
            link.download = `图表分析${index}.png`;
            link.click()
        })
    charts?.forEach((chart, index) => {
        const imgData = chart.getDataURL({
            type: 'png', // 也可以是 'jpeg'
            pixelRatio: 2, // 提高导出图片的分辨率
            backgroundColor: 'rgba(23, 108, 229, 0.3)'
        });

        // 创建下载链接
        const link = document.createElement('a');
        link.href = imgData;
        link.download = `chart_${index + 1}.png`;
        link.click();
    })
}

// 获取时间
const getTime = (value) => {
    const momentValue = moment(value)
    const time = momentValue.format('YYYY-MM-DD')
    let data = ''
    switch (timeType.value) {
        case 1:
            data = ''
            break;
        case 2:
            data = momentValue.add(1, 'week').format('YYYY-MM-DD')
            break;
        case 3:
            data = momentValue.add(1, 'month').format('YYYY-MM-DD')
            break;
        case 4:
            data = momentValue.add(1, 'quarter').format('YYYY-MM-DD')
            break;
        case 5:
            data = momentValue.add(1, 'year').format('YYYY-MM-DD')
            break;
        default:
            break;
    }
    if(data) {
        timeValue.value = time + '~' + data
    } else {
        timeValue.value = time
    }
}

// 获取水温监控点菜单
@@ -143,15 +223,24 @@
    })
}

// 获取时间
const getTime = (value) => {
    const time = moment(value).format('YYYY-MM-DD')
    console.log(time)
// 获取报表数据
const getChartData = (point = '') => {
    const data = {
        type: timeType.value,
        pointId: point,
        pointName: searchVal.value,
        dataTime: timeValue.value,
    }
    getGraphicData(data).then(async res => {
        chartData.value = res.data
        await nextTick()
        initCharts()
    })
}

onMounted(() => {
    getTempMonitor()
    initCharts()
    getChartData()
})

</script>
@@ -160,7 +249,7 @@
    <div class="graphic">
        <div class="graphic-menu">
            <div class="menu-t">监测点列表</div>
            <el-menu class="el-menu">
            <el-menu class="el-menu" @select="getChartData">
                <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>
@@ -183,23 +272,28 @@
                <div class="tool-l">
                    <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 :type="timeType === 1 ? 'primary' : ''" @click="changeType(1)">日
                        </el-button>
                        <el-button :type="timeType === 2 ? 'primary' : ''" @click="changeType(2)">周
                        </el-button>
                        <el-button :type="timeType === 3 ? 'primary' : ''" @click="changeType(3)">月
                        </el-button>
                        <el-button :type="timeType === 4 ? 'primary' : ''" @click="changeType(4)">季
                        </el-button>
                        <el-button :type="timeType === 5 ? 'primary' : ''" @click="changeType(5)">年
                        </el-button>
                    </el-button-group>
                    <el-date-picker
                        v-if="timeType === 'date'"
                        v-model="timeRange"
                        v-if="timeType === 1"
                        v-model="showTime"
                        type="date"
                        placeholder="选择时间"
                        style="width: 15rem"
                        @change="getTime"
                    />
                    <el-date-picker
                        v-if="timeType === 'week'"
                        v-model="timeRange"
                        v-if="timeType === 2"
                        v-model="showTime"
                        type="week"
                        format="YYYY年 ww[周]"
                        placeholder="选择时间"
@@ -207,43 +301,47 @@
                        @change="getTime"
                    />
                    <el-date-picker
                        v-if="timeType === 'month'"
                        v-model="timeRange"
                        v-if="timeType === 3"
                        v-model="showTime"
                        type="month"
                        placeholder="选择时间"
                        style="width: 15rem"
                        @change="getTime"
                    />
                    <Quarter
                        v-if="timeType === 'quarter'"
                        v-if="timeType === 4"
                        placeholder="选择时间"
                        :default-value="timeRange"
                        :default-value="showTime"
                        clearable
                        style="width: 15rem"
                        @change="getTime"
                    />
                    <el-date-picker
                        v-if="timeType === 'year'"
                        v-model="timeRange"
                        v-if="timeType === 5"
                        v-model="showTime"
                        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-input v-model="searchVal" style="width: 15rem" clearable placeholder="请输入监测点名称"/>
                    <el-button @click="() => getChartData()">
                        <el-icon>
                            <Search/>
                        </el-icon>
                        搜索
                    </el-button>
                    <el-button type="success" @click="handleExport">一键导出</el-button>
                </div>
                <div class="tool-r" @click="handleFullScreen">
                    <img src="@/assets/images/flow/fullscreen.png" />
                    <img src="@/assets/images/flow/fullscreen.png"/>
                    全屏
                </div>
            </div>
            <div class="graphic-box" ref="graphicRef">
                <div class="chartList">
                    <div class="chartItem" v-for="(item, index) in data">
                    <div class="chartItem" v-for="(item, index) in chartData">
                        <div class="charts" :ref="el => setChartsRef(el, index)"></div>
                        <div class="name">标题</div>
                    </div>
                </div>
            </div>
@@ -255,6 +353,7 @@
.graphic {
    height: 100%;
    display: flex;

    &-menu {
        flex-shrink: 0;
        width: 20%;
@@ -294,10 +393,12 @@
            }
        }
    }

    .graphic-info {
        flex-shrink: 0;
        width: 80%;
        height: 100%;

        .graphic-tool {
            width: 100%;
            height: 60px;
@@ -327,29 +428,27 @@
                }
            }
        }
        .graphic-box{

        .graphic-box {
            height: calc(100% - 60px);
            padding: 10px 30px;
            background: linear-gradient(180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
            .chartList{

            .chartList {
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                .chartItem{
                    width: 32%;
                    height: 48%;
                    background: rgba(23,108,229,0.3);

                .chartItem {
                    width: 100%;
                    min-height: 48%;
                    background: rgba(23, 108, 229, 0.3);
                    border: 1px solid #176CE5;
                    border-radius: 8px;
                    .charts{
                        height: 90%;
                    }
                    .name{
                        height: 10%;
                        text-align: center;
                        font-size: 20px;
                        color: #fff;

                    .charts {
                        height: 100%;
                    }
                }
            }

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

@@ -1,133 +1,236 @@
<script setup>
import {onMounted, ref} from "vue";
import {onMounted, ref, reactive} from "vue";
import * as echarts from 'echarts/core';
import {getStatisticsData, getStatisticsAlarm} from '@/api/screen/statics/index.js'
import {getTemperaturePointList} from '@/api/screen/index.js'
import moment from "moment";

const wenduType = ref(3)
const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', expandTrigger: 'hover', emitPath: false }; //级联选择器配置

const menuList = ref([])
const pointId = ref('')
const wendu = reactive({
    type: 1,
    time: moment().format('YYYY-MM-DD'),
    value: moment().format('YYYY-MM-DD'),
    data: []
})
const warn = reactive({
    type: 1,
    time: moment().format('YYYY-MM-DD'),
    value: moment().format('YYYY-MM-DD'),
    data: []
})

const wenduChartRef = ref()
let wenduCharts = null;
const wenduTimeValue = ref()
const shuiweiType = ref(3)
const shuiweiChartRef = ref()
let wenduCharts = null;
let shuiweiCharts = null
const shuiweiTimeValue = ref()

const handleSelectType = (type) => {
    if(type === 'wendu') {
        wenduTimeValue.value = 0
    } else if (type === 'shuiwei') {
        shuiweiTimeValue.value = 0
        wendu.time = ''
        wendu.value = ''
    } else if (type === 'warn') {
        warn.time = ''
        warn.value = ''
    }
}

const initwenduChart = () => {
const updatewenduChart = () => {
    let xdata = []
    let sdata = []
    wendu.data[0]?.dataVOList?.length > 0 && wendu.data[0]?.dataVOList.forEach(item => {
        xdata.push(item.dataTime)
        sdata.push(item.avgValue)
    })
    const options = {
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            top: 80,
            left: 60,
            right: 60,
            bottom: 60
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xdata,
            axisLabel: {
                color: '#fff',
                fontSize: '1.2rem'
            }
        },
        yAxis: {
            type: 'value',
            name: '℃',
            nameTextStyle: {
                color: '#fff',
                fontSize: '1.2rem'
            },
            axisLabel: {
                color: '#fff',
                fontSize: '1.2rem'
            }
        },
        series: [
            {
                data: sdata,
                type: 'line',
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {offset: 0.2, color: 'rgba(0,255,255,0.5)' },
                            {offset: 1, color: 'rgba(0,255,255,0.1)' },
                        ],
                        global: false // 缺省为 false
                    }
                }
            }
        ]
    }
    wenduCharts.setOption(options);
}

const updatewarnChart = () => {
    let xdata = []
    let sdata = []
    warn.data?.length > 0 && warn.data.forEach(item => {
        xdata.push(item.key)
        sdata.push(item.value)
    })
    const options = {
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            top: 80,
            left: 60,
            right: 60,
            bottom: 60
        },
        xAxis: {
            type: 'category',
            data: xdata,
            axisLabel: {
                color: '#fff',
                fontSize: '1.2rem'
            }
        },
        yAxis: {
            type: 'value',
            name: 'm',
            nameTextStyle: {
                color: '#fff',
                fontSize: '1.2rem'
            },
            axisLabel: {
                color: '#fff',
                fontSize: '1.2rem'
            }
        },
        series: [
            {
                data: sdata,
                type: 'bar',
                itemStyle: {
                    color: '#BBCFFF'
                }
            }
        ]
    }
    shuiweiCharts.setOption(options);
}

// 获取时间
const getTime = (value, type, types) => {
    const momentValue = moment(value)
    const time = momentValue.format('YYYY-MM-DD')
    let data = ''
    switch (type) {
        case 1:
            data = ''
            break;
        case 3:
            data = momentValue.add(1, 'month').format('YYYY-MM-DD')
            break;
        case 5:
            data = momentValue.add(1, 'year').format('YYYY-MM-DD')
            break;
        default:
            break;
    }
    if(types === 'wendu') {
        if(data) {
            wendu.value = time + '~' + data
        } else {
            wendu.value = time
        }
        getTempData()
    } else {
        if(data) {
            warn.value = time + '~' + data
        } else {
            warn.value = time
        }
        getalarmData()
    }
}

// 获取水温监控点菜单
const getTempMonitor = () => {
    getTemperaturePointList().then(res => {
        menuList.value = res.data
        pointId.value = res.data?.[0]?.childrenList?.[0]?.id
        getTempData()
    })
}

// 获取水温数据
const getTempData = () => {
    const data = {
        type: wendu.type,
        dataTime: wendu.value,
        pointId: pointId.value
    }
    getStatisticsData(data).then(res => {
        wendu.data = res.data
        updatewenduChart()
    })
}

// 获取报警数据
const getalarmData = () => {
    const data = {
        type: warn.type,
        dataTime: warn.value
    }
    getStatisticsAlarm(data).then(res => {
        warn.data = res.data
        updatewarnChart()
    })
}

const initCharts = () => {
    if(wenduChartRef.value) {
        wenduCharts = echarts.init(wenduChartRef.value);
        const options = {
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                top: 80,
                left: 60,
                right: 60,
                bottom: 60
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['设备离线', '水位异常', '流量异常', '流速异常', '其他异常'],
                axisLabel: {
                    color: '#fff',
                    fontSize: '1.2rem'
                }
            },
            yAxis: {
                type: 'value',
                name: '℃',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: '1.2rem'
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: '1.2rem'
                }
            },
            series: [
                {
                    data: [36, 44, 38, 24, 36],
                    type: 'line',
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {offset: 0.2, color: 'rgba(0,255,255,0.5)' },
                                {offset: 1, color: 'rgba(0,255,255,0.1)' },
                            ],
                            global: false // 缺省为 false
                        }
                    }
                }
            ]
        }
        wenduCharts.setOption(options);
    }
}

const initshuiweiChart = () => {
    if(shuiweiChartRef.value) {
        shuiweiCharts = echarts.init(shuiweiChartRef.value);
        const options = {
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                top: 80,
                left: 60,
                right: 60,
                bottom: 60
            },
            xAxis: {
                type: 'category',
                data: ['设备离线', '水位异常', '流量异常', '流速异常', '其他异常'],
                axisLabel: {
                    color: '#fff',
                    fontSize: '1.2rem'
                }
            },
            yAxis: {
                type: 'value',
                name: 'm',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: '1.2rem'
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: '1.2rem'
                }
            },
            series: [
                {
                    data: [36, 44, 38, 24, 63],
                    type: 'bar',
                    itemStyle: {
                        color: '#BBCFFF'
                    }
                }
            ]
        }
        shuiweiCharts.setOption(options);
    }
}

onMounted(() => {
    initwenduChart()
    initshuiweiChart()
    initCharts()
    getTempMonitor()
    getalarmData()
})
</script>

@@ -137,66 +240,73 @@
            <div class="item-t">
                <div class="name">水温汇总统计</div>
                <div class="select">
                    <el-radio-group v-model="wenduType" @change="handleSelectType('wendu')">
                    <el-cascader size="large" v-model="pointId" :options="menuList" :show-all-levels="false" :props="cascaderOption" clearable @change="getTempData" />
                    <el-radio-group v-model="wendu.type" @change="handleSelectType('wendu')">
                        <el-radio :value="1">日</el-radio>
                        <el-radio :value="2">月</el-radio>
                        <el-radio :value="3">年</el-radio>
                        <el-radio :value="3">月</el-radio>
                        <el-radio :value="5">年</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="charts" ref="wenduChartRef"></div>
            <div class="title">
                <el-date-picker
                    v-if="wenduType === 1"
                    v-model="wenduTimeValue"
                    v-if="wendu.type === 1"
                    v-model="wendu.time"
                    type="date"
                    placeholder="请选择时间"
                    @change="(value) => getTime(value, wendu.type, 'wendu')"
                />
                <el-date-picker
                    v-else-if="wenduType === 2"
                    v-model="wenduTimeValue"
                    v-else-if="wendu.type === 3"
                    v-model="wendu.time"
                    type="month"
                    placeholder="请选择时间"
                    @change="(value) => getTime(value, wendu.type, 'wendu')"
                />
                <el-date-picker
                    v-else
                    v-model="wenduTimeValue"
                    v-model="wendu.time"
                    type="year"
                    placeholder="请选择时间"
                    @change="(value) => getTime(value, wendu.type, 'wendu')"
                />
                <div>电站平均水温汇总</div>
            </div>
        </div>
        <div class="item">
            <div class="item-t">
                <div class="name">水位汇总统计</div>
                <div class="name">报警汇总统计</div>
                <div class="select">
                    <el-radio-group v-model="shuiweiType" @change="handleSelectType('shuiwei')">
                    <el-radio-group v-model="warn.type" @change="handleSelectType('warn')">
                        <el-radio :value="1">日</el-radio>
                        <el-radio :value="2">月</el-radio>
                        <el-radio :value="3">年</el-radio>
                        <el-radio :value="3">月</el-radio>
                        <el-radio :value="5">年</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="charts" ref="shuiweiChartRef"></div>
            <div class="title">
                <el-date-picker
                    v-if="wenduType === 1"
                    v-model="shuiweiTimeValue"
                    v-if="warn.type === 1"
                    v-model="warn.time"
                    type="date"
                    placeholder="请选择时间"
                    @change="(value) => getTime(value, warn.type, 'warn')"
                />
                <el-date-picker
                    v-else-if="wenduType === 2"
                    v-model="shuiweiTimeValue"
                    v-else-if="warn.type === 3"
                    v-model="warn.time"
                    type="month"
                    placeholder="请选择时间"
                    @change="(value) => getTime(value, warn.type, 'warn')"
                />
                <el-date-picker
                    v-else
                    v-model="shuiweiTimeValue"
                    v-model="warn.time"
                    type="year"
                    placeholder="请选择时间"
                    @change="(value) => getTime(value, warn.type, 'warn')"
                />
                <div>电站平均水位汇总</div>
            </div>
@@ -229,6 +339,20 @@
                color: #fff;
            }
            .select{
                :deep(.el-cascader){
                    margin-right: 2rem;
                    .el-input__wrapper{
                        background-color: transparent;
                        box-shadow: none;
                        border: 1px solid #fff;
                    }
                    .el-input__inner{
                        color: #fff;
                        &::placeholder{
                            color: #fff;
                        }
                    }
                }
                :deep(.el-radio){
                    color: #fff;
                }
@@ -254,7 +378,7 @@
            font-size: 26px;
            color: #fff;
            :deep(.el-date-editor){
                width: 10rem;
                width: 12rem;
            }
            :deep(.el-input__wrapper){
                background-color: transparent;