<template> <div class="detail-real-box historyBox"> <div class="timeSearch"> <span> 时间范围</span> <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="至" start-placeholder="开始日期" @change="GetdeviceAlarmHistoty" end-placeholder="结束日期" style="width: 150px"></el-date-picker> </div> <el-table :data="allData.HistoryTableData" style="width: 100%; height: calc(100% - 45px)" v-loading="loading3" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.3)" :header-cell-style="{ background: '#021533', height: '100px', color: '', }"> <el-table-column type="index" label="序号" width="50px"> </el-table-column> <el-table-column prop='alarmLevel' label="等级" width="50px"> <template #default="scope"> <span class="ellipsis" :title="scope.row.alarmLevel">{{scope.row.alarmLevel}}</span> </template> </el-table-column> <el-table-column prop='name' label="报警名称" width="130px"> <template #default="scope"> <span class="ellipsis" :title="scope.row.name">{{scope.row.name}}</span> </template> </el-table-column> <el-table-column prop='address' label="报警地址" width="130px"> <template #default="scope"> <span class="ellipsis" :title="scope.row.address">{{scope.row.address}}</span> </template> </el-table-column> <el-table-column prop='alarmDesc' label="报警内容" width="130px"> <template #default="scope"> <span class="ellipsis" :title="scope.row.alarmDesc">{{scope.row.alarmDesc}}</span> </template> </el-table-column> <el-table-column prop='recordTime' width="110px" label="报警时间"> </el-table-column> <el-table-column prop='state' label="状态"> <template #default="scope"> <span :class="GetstateColor(scope.row.state)">{{Getstate(scope.row.state)}}</span> <!-- {{Getstate(scope.row.state)}} --> </template> </el-table-column> <!-- <div v-for="(col, index) in allData.NFSNowDataTableHead" :key="index+99"> <el-table-column :prop="col.field" :label="col.title" :width="col.width?col.width:''" show-overflow-tooltip :render-header="labelHead"> </el-table-column> </div> --> <el-table-column label="解决方案"> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.$index, scope.row)">查看</el-button> </template> </el-table-column> </el-table> </div> </template> <script setup> import { getImageUrl } from "@/utils/ruoyi"; import { useRouter } from "vue-router"; const router = useRouter(); const { proxy } = getCurrentInstance(); import moment from "moment"; import useUserStore from "@/store/modules/user"; const appStore = useUserStore(); import { deviceAlarmHistoty } from "@/api/cockpit"; const props = defineProps({ pointfeature: { type: Object, default: {}, }, }); const weatherpop = ref(false); const allData = reactive({ yuqingicon: getImageUrl("yujing_icon", "cockpit"), jsdList: [ { name: "站点名称", value: "XXX积水点", }, { name: "站点编号", value: "039600001", }, { name: "观测时间", value: "2023-04-23 18:00", }, { name: "积水深度", value: "0.18m", }, { name: "责任部门", value: "市政管理处", }, { name: " 责 任 人", value: "张三 136****8659", }, { name: "通行状态", value: "缓慢通行", }, { name: "报警信息", value: "通行正常通行正常通行正常通行正常", }, { name: "安装照片", type: "src", value: getImageUrl("install", "cockpit"), }, ], NFSNowDataTableHead: [ { field: "level", title: "等级", width: '50px' }, { field: "name", title: "名称" }, { field: "address", title: "地址" }, { field: "time", title: "时间" }, { field: "status", title: "状态" }, // { field: "dispatch", title: "解决方案" }, ], //实时数据表格表头数据 HistoryTableData: [ // { // level: "II", // name: "XX积水点", // address: "XX街道XX路", // time: "04-24 08:00", // status: "待处理", // dispatch: "查看", // }, // { // level: "II", // name: "XX积水点", // address: "XX街道XX路", // time: "04-24 08:00", // status: "待处理", // dispatch: "查看", // }, // { // level: "II", // name: "XX积水点", // address: "XX街道XX路", // time: "04-24 08:00", // status: "待处理", // dispatch: "查看", // }, // { // level: "II", // name: "XX积水点", // address: "XX街道XX路", // time: "04-24 08:00", // status: "待处理", // dispatch: "查看", // }, // { // level: "II", // name: "XX积水点", // address: "XX街道XX路", // time: "04-24 08:00", // status: "待处理", // dispatch: "查看", // }, // { // level: "II", // name: "XX积水点", // address: "XX街道XX路", // time: "04-24 08:00", // status: "待处理", // dispatch: "查看", // }, ], }); const dateRange = ref([ moment().subtract("days", 3).format("YYYY-MM-DD 00:00:00"), moment().format("YYYY-MM-DD HH:mm:ss") ]) function handleEdit (index, row) { }; function Getstate (state) { if (state == 0) { return '报警中' } if (state == 1) { return '未完成' } if (state == 2) { return '已完成' } if (state == 3) { return '关闭' } if (state == 4) { return '报警恢复' } } function GetstateColor (state) { if (state == 0) { return 'red' } if (state == 1) { return '' } if (state == 2) { return '' } if (state == 3) { return '' } if (state == 4) { return '' } } // 获取内涝点的历史报警 function GetdeviceAlarmHistoty () { let prams = { startTime: dateRange.value[0], endTime: dateRange.value[1], siteNo: props.pointfeature.stCode } deviceAlarmHistoty(prams).then(res => { console.log(res.data); allData.HistoryTableData = res.data }) } console.log(props.pointfeature); switch (Number(props.pointfeature.pointType)) { // 内涝点 case 1: GetdeviceAlarmHistoty() break; } </script> <style lang="scss" scoped> //@import "@/assets/styles/floodControlDrainage.scss"; // //@import "@/assets/styles/cockpit.scss"; @import "@/assets/styles/map-detail.scss"; .detail-real-box { flex-direction: column; } </style>