| | |
| | | <template> |
| | | <div> |
| | | 气象 |
| | | <div class="system-gas-container"> |
| | | <el-card shadow="hover"> |
| | | <div class="system-menu-search mb15"> |
| | | <el-form :inline="true" style="display: flex;align-items: flex-start;flex-wrap: wrap" > |
| | | <el-form-item label="日期:" > |
| | | <el-date-picker |
| | | v-model="state.tableData.listQuery.searchParams.time" |
| | | type="datetimerange" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | range-separator="~" |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | | @change = "chooseTime" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="气象类型:"> |
| | | <el-select |
| | | v-model="state.tableData.listQuery.searchParams.weatherType" |
| | | class="w100" |
| | | style="max-width: 180px" |
| | | size="default" |
| | | > |
| | | <el-option v-for="item in state.tableData.weatherTypeList" :key="item.label" :label="item.value" :value="item.label"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-button size="default" type="primary" class="ml10" @click="search()"> |
| | | <el-icon> |
| | | <ele-Search /> |
| | | </el-icon> |
| | | 查询 |
| | | </el-button> |
| | | <el-button size="default" class="ml10" @click="reset()"> |
| | | <el-icon> |
| | | <RefreshLeft /> |
| | | </el-icon> |
| | | 重置 |
| | | </el-button> |
| | | </el-form> |
| | | </div> |
| | | <div id="gasChart" style="height: 500px;width: auto"></div> |
| | | <el-table :data="state.tableData.data" style="width: 100%"> |
| | | <el-table-column type="index" label="序号" width="80" /> |
| | | <el-table-column align="center" prop="time" label="采集时间"/> |
| | | <el-table-column align="center" prop="windSpeed" label="风速"/> |
| | | <el-table-column align="center" prop="windDirection" label="风向"/> |
| | | <el-table-column align="center" prop="gasName" label="气体名称"/> |
| | | <el-table-column align="center" prop="gasPPM" label="气体浓度"/> |
| | | </el-table> |
| | | <br /> |
| | | <el-pagination |
| | | @size-change="onHandleSizeChange" |
| | | @current-change="onHandleCurrentChange" |
| | | class="page-position" |
| | | :pager-count="5" |
| | | :page-sizes="[10, 20, 30]" |
| | | v-model:current-page="state.tableData.listQuery.pageIndex" |
| | | background |
| | | v-model:page-size="state.tableData.listQuery.pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="state.tableData.total"> |
| | | </el-pagination> |
| | | <br /> |
| | | <br /> |
| | | </el-card> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import {reactive, ref,onMounted} from "vue"; |
| | | import * as echarts from "echarts"; |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import {TableWeatherState} from "/@/types/monitorData"; |
| | | |
| | | const infoRef = ref(); |
| | | const state = reactive<TableWeatherState>({ |
| | | tableData: { |
| | | data: [], |
| | | total: 0, |
| | | loading: false, |
| | | listQuery: { |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | searchParams:{ |
| | | time: [], |
| | | weatherType: '' |
| | | } |
| | | }, |
| | | weatherTypeList: [ |
| | | { |
| | | label: '1', |
| | | value: '温度' |
| | | }, |
| | | { |
| | | label: '2', |
| | | value: '湿度' |
| | | }, |
| | | { |
| | | label: '3', |
| | | value: '风向' |
| | | }, |
| | | { |
| | | label: '4', |
| | | value: '风速' |
| | | }, |
| | | { |
| | | label: '5', |
| | | value: '压力' |
| | | } |
| | | ] |
| | | } |
| | | }); |
| | | |
| | | const chooseTime = (val: any) => { |
| | | console.log("val",val) |
| | | let sTime = Date.parse(new Date(val[0].replace(/-/g, "/"))); |
| | | let eTime = Date.parse(new Date(val[1].replace(/-/g, "/"))); |
| | | const datadiff = eTime - sTime + 86400000; |
| | | const time = 7 * 24 * 60 * 60 * 1000; |
| | | if (sTime > eTime) { |
| | | return false; |
| | | } else { |
| | | if (datadiff > time) { |
| | | ElMessage({ |
| | | type: 'error', |
| | | message: '查询时间范围7天内', |
| | | }) |
| | | state.tableData.listQuery.searchParams.time = []; |
| | | return false; |
| | | } else { |
| | | console.log('七天内数据') |
| | | } |
| | | } |
| | | } |
| | | |
| | | onMounted( |
| | | () => { |
| | | getNowTime(); |
| | | initCharts(); |
| | | } |
| | | ); |
| | | const getNowTime = () => { |
| | | let isDate = new Date() |
| | | let sTime = `${isDate.getFullYear()}-${isDate.getMonth() + 1}-${isDate.getDate()}` |
| | | let eTime = `${isDate.getFullYear()}-${isDate.getMonth() + 1}-${isDate.getDate()}` |
| | | sTime = `${sTime} 00:00:00` |
| | | eTime = `${eTime} 23:59:59` |
| | | state.tableData.listQuery.searchParams.time = [sTime ,eTime]; |
| | | console.log("time",state.tableData.listQuery.searchParams.time) |
| | | } |
| | | const initInfoData = () => { |
| | | console.log("数据列表") |
| | | }; |
| | | const onHandleSizeChange = (val: number) => { |
| | | state.tableData.listQuery.pageSize = val; |
| | | initInfoData(); |
| | | }; |
| | | // 分页改变 |
| | | const onHandleCurrentChange = (val: number) => { |
| | | state.tableData.listQuery.pageIndex = val; |
| | | initInfoData(); |
| | | }; |
| | | const openDialog = (type: string, value: any) => { |
| | | infoRef.value.openDialog(type, value); |
| | | }; |
| | | const del = (val: any) => { |
| | | ElMessageBox.confirm( |
| | | '确定删除此条数据?', |
| | | '提示', |
| | | { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | } |
| | | ) |
| | | .then(() => { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '删除成功', |
| | | }) |
| | | }) |
| | | }; |
| | | |
| | | const search = () => { |
| | | console.log("vla",state.tableData.listQuery.searchParams) |
| | | } |
| | | const reset = () => { |
| | | state.tableData.listQuery.searchParams.time = []; |
| | | |
| | | state.tableData.listQuery.searchParams.weatherType = ''; |
| | | } |
| | | |
| | | const initCharts = () => { |
| | | const myChart = echarts.init(document.getElementById('gasChart')); |
| | | // 指定图表的配置项和数据 |
| | | const option = { |
| | | tooltip: { |
| | | trigger: "axis", |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | }, |
| | | }, |
| | | xAxis: { |
| | | show: true, |
| | | type: 'category', |
| | | data: ['10:18:26', '10:18:28', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
| | | }, |
| | | yAxis: { |
| | | show: true, |
| | | type: 'value' |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [150, 230, 224, 218, 135, 147, 260], |
| | | type: 'line', |
| | | } |
| | | ] |
| | | }; |
| | | // 使用刚指定的配置项和数据显示图表。 |
| | | myChart.setOption(option); |
| | | } |
| | | </script> |
| | | |
| | | |
| | | |
| | | <style scoped lang="scss"> |
| | | |
| | | .yellow{ |
| | | width: 80px; |
| | | height: 30px; |
| | | background-color: rgb(255,223,37); |
| | | line-height: 30px; |
| | | color: white; |
| | | box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); |
| | | padding: 3px |
| | | } |
| | | .red{ |
| | | width: 80px; |
| | | height: 30px; |
| | | background-color: rgb(239,90,161); |
| | | line-height: 30px; |
| | | color: white; |
| | | box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); |
| | | padding: 3px |
| | | } |
| | | </style> |