| | |
| | | <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> |