From 0eb20ecb8d06fb2dbc0741566ebbfc1160e33ecb Mon Sep 17 00:00:00 2001 From: zhouwx <1175765986@qq.com> Date: 星期一, 14 四月 2025 15:01:05 +0800 Subject: [PATCH] 接口对接 --- src/views/firework/humiture/index.vue | 218 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 214 insertions(+), 4 deletions(-) diff --git a/src/views/firework/humiture/index.vue b/src/views/firework/humiture/index.vue index 762e8b7..dcb763b 100644 --- a/src/views/firework/humiture/index.vue +++ b/src/views/firework/humiture/index.vue @@ -1,11 +1,221 @@ +<template> + <div class="app-container"> + <!-- 表格部分--> +<!-- <div style="font-weight: 600;font-size: 20px;">最近报警记录</div>--> + <div style="margin-top: 10px"> + <el-table v-loading="loading" :data="state.tableList" :border="true"> + <el-table-column label="序号" type="index" align="center" width="80" /> + <el-table-column label="仓库" prop="createTime" align="center" /> + <el-table-column label="库房" prop="basicName" align="center" /> + <el-table-column label="温度值" prop="tabooBasicName" align="center" /> + <el-table-column label="同步时间" prop="updateBy" align="center" /> + <el-table-column label="湿度值" prop="tabooBasicName" align="center" /> + <el-table-column label="同步时间" prop="updateBy" align="center" /> + </el-table> + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getListAll" + /> + </div> + <!-- 卡片部分--> + <el-scrollbar max-height="420px" style="padding-right: 10px;overflow-x: hidden;" v-if="state.dataList && state.dataList.length >0"> +<!-- <el-row :gutter="20" style="margin-top: 5px;margin-left: 5px">--> +<!-- <el-col v-for="(item,index) in state.dataList" :key="index" :span="8">--> + <div style="display: flex;align-items: center;flex-wrap: wrap"> + <div v-for="(item,index) in state.dataList" :key="index" style="width: 350px;margin: 20px 30px"> + <el-card class="card-item " shadow="always"> + <div style="display: flex;flex-direction: column"> + <div style="font-size: 18px;font-weight: 700;margin-bottom: 15px">{{item.room}}—{{item.stock}}—{{item.device}}</div> + <div style="display: flex;align-items: center"> + <img src="@/assets/images/device.png" /> + <div style="display: flex;flex-direction: column"> + <div style="display: flex;justify-content: space-between;margin-bottom: 10px"> + <span>温度:{{item.warm}}</span> + <el-button type="primary" plain style="margin-left: 15px" @click="openData('温度',item)">历史数据</el-button> + </div> + <div style="display: flex;justify-content: space-between"> + <span>湿度:{{item.humidity}}</span> + <el-button type="primary" plain style="margin-left: 15px" @click="openData('湿度',item)">历史数据</el-button> + </div> + </div> + </div> + </div> + </el-card> + </div> + </div> + +<!-- </el-col>--> +<!-- </el-row>--> + </el-scrollbar> + <el-empty v-else></el-empty> + <d-dialog ref="dialogRef" @getList="getListAll"></d-dialog> + </div> +</template> + <script setup> +import {onMounted, reactive, ref, toRefs} from "vue"; +import {ElMessage} from "element-plus"; +import dDialog from './components/dataDialog.vue' + +const dialogRef = ref(null) +const state = reactive({ + queryParams: { + pageNum: 1, + pageSize: 5, + warningType: '' + }, + cardQueryParams: { + warningType: '' + }, + total: 0, + dataList: [ + { + id: 1, + room: '仓库名称', + stock: '库存名称', + device: '设备1', + humidity: '18%RH', + warm: '18°' + }, + { + id: 1, + room: '仓库名称', + stock: '库存名称', + device: '设备1', + humidity: '18%RH', + warm: '18°' + }, + { + id: 1, + room: '仓库名称', + stock: '库存名称', + device: '设备1', + humidity: '18%RH', + warm: '18°' + }, + { + id: 1, + room: '仓库名称', + stock: '库存名称', + device: '设备1', + humidity: '18%RH', + warm: '18°' + }, + { + id: 1, + room: '仓库名称', + stock: '库存名称', + device: '设备1', + humidity: '18%RH', + warm: '18°' + }, + ], + tableList: [] +}); +const { queryParams,cardQueryParams, total, dataList } = toRefs(state); +const loading = ref(false); +onMounted(()=>{ + getListPage() + getList() +}) +const getListPage = async () => { + // loading.value = true + // const res = await getAvoidInfoPage(state.queryParams) + // if(res.code == 200){ + // state.tableList = res.data.list + // state.total = res.data.total + // }else{ + // ElMessage.warning(res.message) + // } + // loading.value = false +} +const getList = async () => { + // const res = await getAvoidList(state.cardQueryParams) + // if(res.code == 200){ + // state.dataList = res.data + // }else{ + // ElMessage.warning(res.message) + // } +} +const openData = (type,val) => { + dialogRef.value.openDialog(type,val); + +} + +const getListAll = () => { + getListPage() + getList() +} </script> -<template> - -</template> - <style scoped lang="scss"> +.app-container{ + .card-item{ + //height: 160px; + margin-bottom: 10px; + //min-width: 300px; + } + .title-font{ + display:flex; + align-items: center; + padding: 3px 15px; + font-size: 14px; + margin-right: 10px; + border-radius: 5px + } + .card-item-red{ + cursor: pointer; + color: #f56c6c; + background-color: rgb(254, 240.3, 240.3); + border: 1px solid rgb(253, 225.6, 225.6); + } + .card-item-red-title{ + cursor: pointer; + color: #f56c6c; + background-color: rgb(254, 240.3, 240.3); + border: 1px solid rgb(253, 225.6, 225.6); + } + .card-item-red-titleChoose{ + color: #f6d1d1; + background-color: #f55d5d; + } + .card-item-yellow{ + color: #e6a23c; + background-color: rgb(252.5, 245.7, 235.5); + border: 1px solid rgb(250, 236.4, 216); + } + .card-item-yellow-title{ + cursor: pointer; + color: #f1950b; + background-color: rgb(252.5, 245.7, 235.5); + border: 1px solid rgb(250, 236.4, 216); + } + .card-item-yellow-titleChoose{ + color: #f6e7d1; + background-color: #f1a902; + } + .card-item-blue-title{ + cursor: pointer; + color: #409eff; + background-color: rgb(235.9, 245.3, 255); + border: 1px solid rgb(216.8, 235.6, 255); + } + .card-item-blue-titleChoose{ + color: #d7e6f6; + background-color: #2da0ef; + } + :deep(.is-horizontal) { + height: 0; + left: 0; + display: none; + } + :deep(.el-scrollbar__wrap) { + overflow-x: hidden; + } +} </style> -- Gitblit v1.9.2