| | |
| | | <el-row style="display: flex;text-align: center;justify-content: center;height: 40px;"> |
| | | <el-button type="warning" style="width: 95%;height: 30px;" @click="reset">报警复位</el-button> |
| | | </el-row> |
| | | <el-table :data="paginatedData" border style="width: 100%" v-loading="loading" |
| | | <el-table :data="tableData" border style="width: 100%" v-loading="loading" |
| | | :default-sort="{ prop: 'date', order: 'descending' }"> |
| | | <el-table-column prop="alarmCode" label="变量" align="center"></el-table-column> |
| | | <el-table-column prop="alarmName" label="描述" align="center"></el-table-column> |
| | | <el-table-column prop="stationNum" label="位置" align="center"></el-table-column> |
| | | <el-table-column prop="alarmTime" label="时间" align="center"></el-table-column> |
| | | </el-table> |
| | | <el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize" |
| | | :total="tableParams.total" :page-sizes="[10, 20, 50, 100, 200, 500]" size="small" background="" |
| | | @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="prev, pager, next" /> |
| | | </el-col> |
| | | <el-col :span="19"> |
| | | <div class="card-page"> |
| | |
| | | </template> |
| | | |
| | | <script lang="ts" setup> |
| | | import { ref, reactive, onMounted, computed } from 'vue'; |
| | | import { ref, reactive } from 'vue'; |
| | | import { Splitpanes, Pane } from 'splitpanes'; |
| | | import 'splitpanes/dist/splitpanes.css'; |
| | | import { Vue2 } from 'vue-demi'; |
| | | import { listWcsAlarmInfo, resetWcsAlarmInfo } from '/@/api/wcs/wcsAlarmInfo'; |
| | | import { signalR } from './signalR'; |
| | | const tableParams = ref({ |
| | | page: 1, |
| | | pageSize: 10, |
| | | total: 0, |
| | | }); |
| | | |
| | | const loading = ref(false); |
| | | const tableData = ref<any>([]); |
| | | const handleQuery = async () => { |
| | | loading.value = true; |
| | | var res = await listWcsAlarmInfo({ status: 1 }); |
| | | tableData.value = res.data.result; |
| | | tableParams.value.total = tableData.value.length; |
| | | console.log(tableParams.value.total); |
| | | loading.value = false; |
| | | }; |
| | | handleQuery(); |
| | |
| | | //复位报警 |
| | | const reset = async () => { |
| | | await resetWcsAlarmInfo(); |
| | | await handleQuery(); |
| | | } |
| | | //连接signalR 监听变更 |
| | | onMounted(async () => { |
| | | signalR.off('PublicAlarm'); |
| | | signalR.on('PublicAlarm', (data: any) => { |
| | | console.log(data) |
| | | var listAlarm = tableData.value.filter(t => t.id == data.id); |
| | | if (listAlarm.length == 0) { |
| | | tableData.value.unshift(data) |
| | | tableParams.value.total = tableData.value.length; |
| | | } |
| | | else { |
| | | //如果已经存在就更新数据 |
| | | const index = tableData.value.findIndex(t => t.id == data.id); |
| | | tableData.value.splice(index, 1, data); |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | // 改变页面容量 |
| | | const handleSizeChange = (val: number) => { |
| | | tableParams.value.pageSize = val; |
| | | }; |
| | | |
| | | // 改变页码序号 |
| | | const handleCurrentChange = (val: number) => { |
| | | tableParams.value.page = val; |
| | | }; |
| | | //表格显示数据 |
| | | const paginatedData = computed(() => { |
| | | const start = (tableParams.value.page - 1) * tableParams.value.pageSize |
| | | const end = start + tableParams.value.pageSize |
| | | return tableData.value.slice(start, end) |
| | | }) |
| | | |
| | | |
| | | //堆垛机数据 |
| | | const cellsDataLine = [ |