| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div style="display: flex;justify-content: space-between"> |
| | | <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" > |
| | | <el-form-item label="企业名称:" > |
| | | <el-select |
| | | clearable |
| | | v-model="state.queryParams.companyId" |
| | | filterable |
| | | remote |
| | | reserve-keyword |
| | | placeholder="请输入企业名称" |
| | | remote-show-suffix |
| | | :remote-method="getCompanyList" |
| | | style="width: 100%" |
| | | > |
| | | <el-option |
| | | v-for="item in state.companyList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item > |
| | | <el-button |
| | | type="primary" |
| | | @click="getListAll" |
| | | >查询</el-button> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | @click="reset" |
| | | >重置</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | |
| | | <!-- 卡片部分--> |
| | | <div style="margin-bottom: 10px;display: flex;align-items: center;justify-content: space-between" > |
| | | <div style="font-weight: 600;font-size: 20px">实时报警状态</div> |
| | |
| | | import {ElMessage} from "element-plus"; |
| | | import avoidDialog from './components/avoidDialog.vue' |
| | | import {getAvoidInfoPage, getAvoidList} from "@/api/hazardousChemicals/avoid"; |
| | | import {getCompany} from "@/api/hazardousChemicals/company"; |
| | | const avoidRef = ref(null) |
| | | const state = reactive({ |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 5, |
| | | warningType: '' |
| | | warningType: '', |
| | | companyId: null |
| | | }, |
| | | cardQueryParams: { |
| | | warningType: '' |
| | | warningType: '', |
| | | companyId: null |
| | | }, |
| | | total: 0, |
| | | dataList: [], |
| | | tableList: [] |
| | | tableList: [], |
| | | companyList: [] |
| | | }); |
| | | const { queryParams,cardQueryParams, total, dataList } = toRefs(state); |
| | | const loading = ref(false); |
| | | onMounted(()=>{ |
| | | getCompanyList('') |
| | | getListPage() |
| | | getList() |
| | | }) |
| | |
| | | loading.value = false |
| | | } |
| | | const getList = async () => { |
| | | if(state.queryParams.companyId){ |
| | | state.cardQueryParams.companyId = state.queryParams.companyId |
| | | } |
| | | const res = await getAvoidList(state.cardQueryParams) |
| | | if(res.code == 200){ |
| | | state.dataList = res.data |
| | |
| | | const handle = (val) => { |
| | | avoidRef.value.openDialog(val); |
| | | } |
| | | const getCompanyList = async (val)=>{ |
| | | if(val){ |
| | | const queryParams = { |
| | | name: val |
| | | } |
| | | const res = await getCompany(queryParams) |
| | | if (res.code == 200) { |
| | | state.companyList = res.data.list |
| | | } else { |
| | | ElMessage.warning(res.message) |
| | | } |
| | | }else { |
| | | const queryParams = { |
| | | pageNum: 1, |
| | | pageSize: 10 |
| | | } |
| | | const res = await getCompany(queryParams) |
| | | if (res.code == 200) { |
| | | state.companyList = res.data.list |
| | | } else { |
| | | ElMessage.warning(res.message) |
| | | } |
| | | } |
| | | } |
| | | |
| | | const chooseType = (type) => { |
| | | state.queryParams.warningType = type == 'red' ? 1 : type == '' ? '' :2 |
| | |
| | | getListPage() |
| | | getList() |
| | | } |
| | | const reset = () => { |
| | | state.queryParams= { |
| | | pageNum: 1, |
| | | pageSize: 5, |
| | | warningType: '', |
| | | companyId: null |
| | | } |
| | | state.cardQueryParams= { |
| | | warningType: '', |
| | | companyId: null |
| | | } |
| | | getListPage() |
| | | getList() |
| | | } |
| | | |
| | | </script> |
| | | |