日报接口、图表优化

zhouwenxuan

2023-10-12 328febf368f1494b4b5b647f3eab5f4ad38eb072

日报接口、图表优化

 src/api/monitorData/daily/index.ts

对比新文件
@@ -0,0 +1,15 @@
import request from '/@/utils/request';

export function dailyApi() {
    return {

        //日报查询
        getDaily: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/dailyReport/page`,
                method: 'post',
                data: data
            });
        },
    };
}

 src/views/monitorData/daily/index.vue

@@ -26,14 +26,8 @@
                </el-form>
            </div>
            <el-table :data="state.tableData.data" style="width: 100%">
                <el-table-column align="center" prop="date" label="日期"/>
                <el-table-column align="center"  label="文件名称">
                    <template #default="scope">
                        <div v-for="(item, index) in scope.row.file" :key="index">
                            {{ item.filename}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="gmtCreate" label="日期"/>
                <el-table-column align="center"  prop="name" label="文件名称"/>
                <el-table-column label="操作" show-overflow-tooltip width="140">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="downLoad(scope.row)">下载</el-button>
@@ -60,11 +54,13 @@
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {onMounted, reactive, ref} from "vue";
import { TableDailytState } from "/@/types/monitorData";
import axios from "axios";
import Cookies from "js-cookie";
import { ElMessage } from 'element-plus'
import {dailyApi} from "/@/api/monitorData/daily";
import moment from "moment/moment";

const state = reactive<TableDailytState>({
    tableData: {
@@ -93,9 +89,38 @@
    }
});

const initDailyData = () => {
    console.log("数据列表")
onMounted(
    () => {
        getNowTime();
        initDailyData()
    }
);

const initDailyData = async () => {
    const param = {
        pageIndex: state.tableData.listQuery.pageIndex,
        pageSize: state.tableData.listQuery.pageSize,
        searchParams: {
            year: state.tableData.listQuery.searchParams.time.substring(0,4),
            month: state.tableData.listQuery.searchParams.time.substring(5,7)
        }
    }
    let res = await dailyApi().getDaily(param);
    if(res.data.code == 100) {
        state.tableData.data = res.data.data;
        state.tableData.total = res.data.total;
        state.tableData.listQuery.pageIndex = res.data.pageIndex;
        state.tableData.listQuery.pageSize = res.data.pageSize;
    }

    console.log("数据列表",res)
};
const getNowTime = () => {
    let isDate = new Date()
    const year = isDate.getFullYear();
    const month = isDate.getMonth() + 1;
    state.tableData.listQuery.searchParams.time = (year + "-" + (month >= 10 ? month : "0" + month)).toString();
}
const onHandleSizeChange = (val: number) => {
    state.tableData.listQuery.pageSize = val;
    initDailyData();
@@ -106,39 +131,48 @@
    initDailyData();
};
const downLoad = (file: any) => {
    // axios.get(process.env.VITE_API_URL + file.fileUrl, {
    //     headers: {
    //         'Content-Type': 'application/json',
    //         'Authorization': Cookies.get('token'),
    //     },
    //     responseType: 'blob'
    // }).then(res => {
    //     if (res) {
    //         const link = document.createElement('a')
    //         let blob = new Blob([res.data], {
    //             type: res.data.type
    //         })
    //         link.style.display = "none";
    //         link.href = URL.createObjectURL(blob); // 创建URL
    //         link.setAttribute("download", file.fileName);
    //         document.body.appendChild(link);
    //         link.click();
    //         document.body.removeChild(link);
    //     } else {
    //         ElMessage({
    //             message: '获取文件失败',
    //             type: 'error',
    //         })
    //     }
    // })
    console.log("file",file)
    axios.get(import.meta.env.VITE_API_URL + file.fileUrl, {
        headers: {
            'Content-Type': 'application/json',
            'tk': `${Cookies.get('token')}`,
            'uid':`${Cookies.get('uid')}`
        },
        responseType: 'blob'
    }).then(res => {
        if (res) {
            const link = document.createElement('a')
            let blob = new Blob([res.data], {
                type: res.data.type
            })
            link.style.display = "none";
            link.href = URL.createObjectURL(blob); // 创建URL
            link.setAttribute("download", file.name);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            ElMessage({
                message: '下载成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: '获取文件失败',
                type: 'error',
            })
        }
    })
}
const search = () => {
    console.log("xxxx",state.tableData.listQuery.searchParams)
    state.tableData.listQuery.pageIndex = 1;
    initDailyData();
    console.log("vla",state.tableData.listQuery.searchParams)
}
const reset = () => {
    state.tableData.listQuery.searchParams.time = '';
    getNowTime();
    initDailyData();
}
</script>
<style scoped lang="scss">

</style>
</style>

 src/views/monitorData/fluxData/index.vue

@@ -49,7 +49,7 @@
                </el-form>
            </div>
            <div id="gasChart" style="height: 500px;width: auto"></div>
            <el-table :data="state.tableData.data" style="width: 100%">
            <el-table :data="state.tableData.data" style="width: 100%" v-loading="loading">
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column align="center" prop="time" label="采集时间"/>
                <el-table-column align="center" prop="regionName" label="区域名称"/>
@@ -106,6 +106,7 @@
    },
});

const loading = ref(false);
const myChart = shallowRef(null)

const chooseTime = (val:any) => {
@@ -165,11 +166,18 @@
    }
    let resChart = await fluxDataApi().getFluxLineChart(chartParam);
    if(resChart.data.code == 100) {
        yData.value = mapArray(resChart.data.data);
        areaChart.value = yData.value.map((item: any) => {
            return item.name
        });
        dataZoomEnd.value = xData.value.length > 25 ? 5 : 100;
        if(resChart.data.data) {
            yData.value = mapArray(resChart.data.data);
            areaChart.value = yData.value.map((item: any) => {
                return item.name
            });
            dataZoomEnd.value = xData.value.length > 25 ? 5 : 100;
        }else {
            yData.value = [];
            xData.value = [];
            dataZoomEnd.value = 100;
        }

        initCharts();
    }else {
        ElMessage({
@@ -178,6 +186,7 @@
        });
    }

    loading.value = true;
    //表格
    const pageParam = {
        pageIndex: state.tableData.listQuery.pageIndex,
@@ -195,6 +204,7 @@
        state.tableData.total = res.data.total;
        state.tableData.listQuery.pageIndex = res.data.pageIndex;
        state.tableData.listQuery.pageSize = res.data.pageSize;
        loading.value = false;
    }else {
        ElMessage({
            type: 'warning',
@@ -335,6 +345,20 @@
                saveAsImage: { show: true }
            }
        },
        graphic: {
            type: 'text',     // 类型：文本
            left: 'center',
            top: 'middle',
            silent: true,     // 不响应事件
            invisible: yData.value.length > 0,   // 有数据就隐藏
            style: {
                fill: '#9d9d9d',
                fontWeight: 'bold',
                text: '暂无数据',
                fontFamily: 'Microsoft YaHei',
                fontSize: '22px'
            }
        },
        xAxis: [
            {
                type: 'category',

 src/views/monitorData/gasData/index.vue

@@ -39,7 +39,7 @@
                </el-form>
            </div>
            <div id="gasChart" style="height: 500px;width: auto"></div>
            <el-table :data="state.tableData.data" style="width: 100%;margin-top: 20px">
            <el-table :data="state.tableData.data" style="width: 100%;margin-top: 20px" v-loading="loading">
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column align="center" prop="time" label="采集时间"/>
                <el-table-column align="center" prop="windSpeed" label="风速"/>
@@ -112,6 +112,7 @@
        }
    }
}
const loading = ref(false);
const dataZoomEnd = ref();
const xData = ref([]);
const yData = ref([]);
@@ -140,14 +141,22 @@
    }
    let resChart = await gasDataApi().getGasLineChart(chartParam);
    if(resChart.data.code == 100) {
        xData.value = resChart.data.data.map((item: any) => {
            return item.time;
        })
        yData.value = resChart.data.data.map((item: any) => {
            return item.gasValue;
        })
        dataZoomEnd.value = xData.value.length > 25 ? 30 : 100;
        markLines.value = 110;
        if (resChart.data.data) {
            xData.value = resChart.data.data.map((item: any) => {
                return item.time;
            })
            yData.value = resChart.data.data.map((item: any) => {
                return item.gasValue;
            })
            dataZoomEnd.value = xData.value.length > 25 ? 30 : 100;
            markLines.value = 110;

        }else {
            xData.value = [];
            yData.value = [];
            markLines.value = 0;
            dataZoomEnd.value = 100;
        }
        initCharts();
    }else {
        ElMessage({
@@ -156,6 +165,7 @@
        });
    }

    loading.value = true;
    //表格
    const pageParam = {
        pageIndex: state.tableData.listQuery.pageIndex,
@@ -172,6 +182,7 @@
        state.tableData.total = res.data.total;
        state.tableData.listQuery.pageIndex = res.data.pageIndex;
        state.tableData.listQuery.pageSize = res.data.pageSize;
        loading.value = false;
    }else {
        ElMessage({
            type: 'warning',
@@ -204,6 +215,7 @@
    initInfoData();
};
const search = () => {
    state.tableData.listQuery.pageIndex = 1;
    initInfoData();
    console.log("vla",state.tableData.listQuery.searchParams)
}
@@ -238,6 +250,20 @@
            max: Math.max(markLines.value,...yData.value),
            min: Math.min(markLines.value,...yData.value)
        },
        graphic: {
            type: 'text',     // 类型：文本
            left: 'center',
            top: 'middle',
            silent: true,     // 不响应事件
            invisible: yData.value.length > 0,   // 有数据就隐藏
            style: {
                fill: '#9d9d9d',
                fontWeight: 'bold',
                text: '暂无数据',
                fontFamily: 'Microsoft YaHei',
                fontSize: '25px'
            }
        },
        series: [
            {
                data: yData.value,
@@ -249,10 +275,10 @@
                            position: 'end', // 表现内容展示的位置
                            color: 'red'  // 展示内容颜色
                        },
                        yAxis: markLines.value,
                        yAxis: markLines.value == 0 ? '':markLines.value ,
                        lineStyle: {
                            color: "red",
                            width: 1, // 0 的时候可以隐藏线
                            width: markLines.value == 0 ? 0: 1, // 0 的时候可以隐藏线
                            type: "solid" // 实线，不写默认虚线
                        }
                    },],//type: 'average', 平均值,  min最小值,  max 最大值,  median中位数
@@ -278,7 +304,7 @@
    // 使用刚指定的配置项和数据显示图表。
    myChart.value.setOption(option,true);
    //自适应宽度
    window.addEventListener('resize', function () {
    window.addEventListener('resize',function () {
        myChart.value.resize();
    })
}

 src/views/monitorData/weatherData/index.vue

@@ -39,7 +39,7 @@
                </el-form>
            </div>
            <div id="gasChart" style="height: 500px;width: auto"></div>
            <el-table :data="state.tableData.data" style="width: 100%;margin-top: 20px">
            <el-table :data="state.tableData.data" style="width: 100%;margin-top: 20px" v-loading="loading">
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column align="center" prop="time" label="采集时间"/>
                <el-table-column align="center" prop="value" :label='weatherName' />
@@ -108,6 +108,7 @@
        ]
    }
});
const loading = ref(false);
const weatherName = ref('温度');
const dataZoomEnd = ref();
const xData = ref([]);
@@ -161,13 +162,20 @@
    }
    let resChart = await weatherDataApi().getWeatherLineChart(chartParam);
    if(resChart.data.code == 100) {
        xData.value = resChart.data.data.map((item: any) => {
            return item.time;
        })
        yData.value = resChart.data.data.map((item: any) => {
            return item.value;
        })
        dataZoomEnd.value = xData.value.length > 25 ? 5 : 100;
        if(resChart.data.data) {
            xData.value = resChart.data.data.map((item: any) => {
                return item.time;
            })
            yData.value = resChart.data.data.map((item: any) => {
                return item.value;
            })
            dataZoomEnd.value = xData.value.length > 25 ? 5 : 100;
        }else {
            xData.value = [];
            yData.value = [];
            dataZoomEnd.value = 100;
        }

        initCharts();
    }else {
        ElMessage({
@@ -176,6 +184,7 @@
        });
    }

    loading.value = true;
    //表格
    const pageParam = {
        pageIndex: state.tableData.listQuery.pageIndex,
@@ -192,6 +201,7 @@
        state.tableData.total = res.data.total;
        state.tableData.listQuery.pageIndex = res.data.pageIndex;
        state.tableData.listQuery.pageSize = res.data.pageSize;
        loading.value = false;
    }else {
        ElMessage({
            type: 'warning',
@@ -250,6 +260,20 @@
            show: true,
            type: 'value'
        },
        graphic: {
            type: 'text',     // 类型：文本
            left: 'center',
            top: 'middle',
            silent: true,     // 不响应事件
            invisible: yData.value.length > 0,   // 有数据就隐藏
            style: {
                fill: '#9d9d9d',
                fontWeight: 'bold',
                text: '暂无数据',
                fontFamily: 'Microsoft YaHei',
                fontSize: '25px'
            }
        },
        series: [
            {
                data: yData.value,