| | |
| | | meta: { title: '超期预警',icon: 'peoples',affix: true } |
| | | }, |
| | | { |
| | | path: '/avoidWarning', |
| | | name: 'avoidWarning', |
| | | meta: { title: '危化品相忌报警',icon: 'form',affix: true } |
| | | }, |
| | | { |
| | | path: '/basicInfo', |
| | | name: 'basicInfo', |
| | | meta: { title: '危化品基础信息',icon: 'monitor',affix: true } |
| | |
| | | meta: { title: '超期预警',icon: 'peoples',affix: true } |
| | | }, |
| | | { |
| | | path: '/avoidWarning', |
| | | name: 'avoidWarning', |
| | | meta: { title: '危化品相忌报警',icon: 'form',affix: true } |
| | | }, |
| | | { |
| | | path: '/basicInfo', |
| | | name: 'basicInfo', |
| | | meta: { title: '危化品基础信息',icon: 'monitor',affix: true } |
| | |
| | | ] |
| | | }, |
| | | { |
| | | path: '/avoidWarning', |
| | | component: Layout, |
| | | redirect: '/avoidWarning', |
| | | children: [ |
| | | { |
| | | path: '/avoidWarning', |
| | | component: () => import('@/views/hazardousChemicals/avoidWarning/index.vue'), |
| | | name: 'avoidWarning', |
| | | meta: { title: '危化品相忌报警',icon: 'form', affix: true } |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | path: '/basicInfo', |
| | | component: Layout, |
| | | redirect: '/basicInfo', |
对比新文件 |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <!-- 卡片部分--> |
| | | <div style="margin-bottom: 10px;display: flex;align-items: center;justify-content: space-between"> |
| | | <div style="font-weight: 600;font-size: 22px">实时报警状态</div> |
| | | <div style="display: flex;align-items: center"> |
| | | <div class="card-item-red title-font"> |
| | | <el-icon><WarnTriangleFilled /></el-icon> |
| | | 高危报警 |
| | | </div> |
| | | <div class="card-item-yellow title-font"> |
| | | <el-icon><WarningFilled /></el-icon> |
| | | 中等风险 |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-scrollbar max-height="420px" style="padding-right: 10px;overflow-x: hidden;"> |
| | | <el-row :gutter="20" style="margin-top: 5px;margin-left: 5px"> |
| | | <el-col v-for="(item,index) in state.dataList" :key="index" :span="8"> |
| | | <el-card class="card-item " :class= "item.level == 1 ? 'card-item-red' : 'card-item-yellow' " shadow="always">{{ item.name }}</el-card> |
| | | </el-col> |
| | | </el-row> |
| | | </el-scrollbar> |
| | | <!-- 表格部分--> |
| | | <div style="font-weight: 600;font-size: 22px;margin-top: 25px">最近报警记录</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="name" align="center" /> |
| | | <el-table-column label="相忌试剂" prop="remark" align="center" /> |
| | | <el-table-column label="储存位置" prop="remark" align="center" /> |
| | | <el-table-column label="风险等级" prop="remark" align="center" /> |
| | | <el-table-column label="处理状态" prop="remark" align="center" /> |
| | | <el-table-column label="处理人" prop="remark" align="center" /> |
| | | </el-table> |
| | | <pagination |
| | | v-show="total > 0" |
| | | :total="total" |
| | | v-model:page="queryParams.pageNum" |
| | | v-model:limit="queryParams.pageSize" |
| | | @pagination="getList" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {reactive, ref, toRefs} from "vue"; |
| | | import {getWarehouse} from "@/api/hazardousChemicals/warehouse"; |
| | | import {ElMessage} from "element-plus"; |
| | | |
| | | const state = reactive({ |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 5, |
| | | name: '' |
| | | }, |
| | | total: 0, |
| | | dataList: [ |
| | | { |
| | | id: 1, |
| | | name: '硫酸与氢氧化钠', |
| | | address: 'S区-1号柜', |
| | | level: 1, //1-低危 2-中危 3-高危 |
| | | }, |
| | | { |
| | | id: 1, |
| | | name: '硫酸与氢氧化钠', |
| | | address: 'S区-1号柜', |
| | | level: 2, //1-低危 2-中危 3-高危 |
| | | }, |
| | | { |
| | | id: 1, |
| | | name: '硫酸与氢氧化钠', |
| | | address: 'S区-1号柜', |
| | | level: 1, //1-低危 2-中危 3-高危 |
| | | }, |
| | | { |
| | | id: 1, |
| | | name: '硫酸与氢氧化钠', |
| | | address: 'S区-1号柜', |
| | | level: 1, //1-低危 2-中危 3-高危 |
| | | }, |
| | | { |
| | | id: 1, |
| | | name: '硫酸与氢氧化钠', |
| | | address: 'S区-1号柜', |
| | | level: 2, //1-低危 2-中危 3-高危 |
| | | }, |
| | | { |
| | | id: 1, |
| | | name: '硫酸与氢氧化钠', |
| | | address: 'S区-1号柜', |
| | | level: 1, //1-低危 2-中危 3-高危 |
| | | }, |
| | | { |
| | | id: 1, |
| | | name: '硫酸与氢氧化钠', |
| | | address: 'S区-1号柜', |
| | | level: 2, //1-低危 2-中危 3-高危 |
| | | }, |
| | | |
| | | ], |
| | | tableList: [] |
| | | }); |
| | | const { queryParams, total, dataList } = toRefs(state); |
| | | const loading = ref(false); |
| | | const getList = async () => { |
| | | loading.value = true |
| | | // const res = await getWarehouse(data.queryParams) |
| | | // if(res.code == 200){ |
| | | // data.dataList = res.data.list |
| | | // data.total = res.data.total |
| | | // }else{ |
| | | // ElMessage.warning(res.message) |
| | | // } |
| | | loading.value = false |
| | | } |
| | | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .app-container{ |
| | | .card-item{ |
| | | height: 180px; |
| | | margin-bottom: 10px; |
| | | } |
| | | .title-font{ |
| | | display:flex; |
| | | align-items: center; |
| | | padding: 3px 15px; |
| | | font-size: 14px; |
| | | margin-right: 10px; |
| | | border-radius: 5px |
| | | } |
| | | .card-item-red{ |
| | | |
| | | color: #f56c6c; |
| | | background-color: rgb(254, 240.3, 240.3); |
| | | border: 1px solid rgb(253, 225.6, 225.6); |
| | | } |
| | | .card-item-yellow{ |
| | | color: #e6a23c; |
| | | background-color: rgb(252.5, 245.7, 235.5); |
| | | border: 1px solid rgb(250, 236.4, 216); |
| | | } |
| | | :deep(.is-horizontal) { |
| | | height: 0; |
| | | left: 0; |
| | | display: none; |
| | | } |
| | | |
| | | :deep(.el-scrollbar__wrap) { |
| | | overflow-x: hidden; |
| | | } |
| | | } |
| | | </style> |