| | |
| | | getInTimeCount: () => { |
| | | return http.get('/sccg/smoke/inTime/count'); |
| | | }, |
| | | // 导出实时数据 |
| | | exportInTime: (params) => { |
| | | return http.downloadFile('/sccg/smoke/inTime/export', params); |
| | | }, |
| | | } |
| | |
| | | <template> |
| | | <div class="header"> |
| | | <el-form :inline="true" :model="seachData" class="demo-form-inline"> |
| | | <el-form-item label=""> |
| | | <el-select |
| | | style="width: 140px" |
| | | v-model="seachData.ownerIndex" |
| | | placeholder="所属单位" |
| | | > |
| | | <el-option |
| | | v-for="(item, index) in ownerOptions" |
| | | :key="item.Id" |
| | | :label="item.Name" |
| | | :value="index" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label=""> |
| | | <el-select |
| | | style="width: 120px" |
| | | v-model="seachData.status" |
| | | placeholder="排放状态" |
| | | > |
| | | <el-option |
| | | v-for="item in statusOptions" |
| | | :key="item.label" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label=""> |
| | | <el-select |
| | | style="width: 120px" |
| | | v-model="seachData.onlineStatus" |
| | | placeholder="整体状态" |
| | | > |
| | | <el-option |
| | | v-for="item in onlineStatusOptions" |
| | | :key="item.label" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <div class="header"> |
| | | <el-form :inline="true" :model="seachData" class="demo-form-inline"> |
| | | <el-form-item label=""> |
| | | <el-select |
| | | style="width: 140px" |
| | | v-model="seachData.ownerIndex" |
| | | placeholder="所属单位" |
| | | > |
| | | <el-option |
| | | v-for="(item, index) in ownerOptions" |
| | | :key="item.Id" |
| | | :label="item.Name" |
| | | :value="index" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label=""> |
| | | <el-select |
| | | style="width: 120px" |
| | | v-model="seachData.status" |
| | | placeholder="排放状态" |
| | | > |
| | | <el-option |
| | | v-for="item in statusOptions" |
| | | :key="item.label" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label=""> |
| | | <el-select |
| | | style="width: 120px" |
| | | v-model="seachData.onlineStatus" |
| | | placeholder="整体状态" |
| | | > |
| | | <el-option |
| | | v-for="item in onlineStatusOptions" |
| | | :key="item.label" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <el-radio v-model="seachData.type" label="1">监控设备</el-radio> |
| | | <el-radio v-model="seachData.type" label="2">监测设备</el-radio> |
| | | </el-form-item> |
| | | <el-form-item label=""> |
| | | <el-date-picker |
| | | v-model="seachData.alarmTime" |
| | | type="daterange" |
| | | align="right" |
| | | unlink-panels |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | :picker-options="pickerOptions" |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="getUserList">刷新</el-button> |
| | | <el-form-item> |
| | | <el-radio v-model="seachData.type" label="1">监控设备</el-radio> |
| | | <el-radio v-model="seachData.type" label="2">监测设备</el-radio> |
| | | </el-form-item> |
| | | <el-form-item label=""> |
| | | <el-date-picker |
| | | v-model="seachData.alarmTime" |
| | | type="daterange" |
| | | align="right" |
| | | unlink-panels |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | :picker-options="pickerOptions" |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="getList">刷新</el-button> |
| | | <el-button type="primary" @click="resetAll">重置</el-button> |
| | | |
| | | <el-button type="primary" @click="exportTableData">导出</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <el-button type="primary" @click="exportTableData" |
| | | >导出</el-button |
| | | > |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import realTimeApi from "@/api/smoke/realTime"; |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | | onlineStatusOptions: [ |
| | | { |
| | | label: "正常", |
| | | value: "NORMAL", |
| | | }, |
| | | { |
| | | label: "预警", |
| | | value: "ALARM", |
| | | }, |
| | | { |
| | | label: "超标", |
| | | value: "EXCESS", |
| | | }, |
| | | { |
| | | label: "离线", |
| | | value: "DOWN", |
| | | }, |
| | | { |
| | | label: "异常离线", |
| | | value: "OFF", |
| | | }, |
| | | ], |
| | | statusOptions: [ |
| | | { |
| | | label: "正常", |
| | | value: 1, |
| | | }, |
| | | { |
| | | label: "离线", |
| | | value: 2, |
| | | }, |
| | | { |
| | | label: "异常离线", |
| | | value: 3, |
| | | }, |
| | | ], |
| | | ownerOptions: [], |
| | | seachData: {}, |
| | | pickerOptions: { |
| | | shortcuts: [ |
| | | { |
| | | text: "最近一周", |
| | | onClick(picker) { |
| | | const end = new Date(); |
| | | const start = new Date(); |
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
| | | picker.$emit("pick", [start, end]); |
| | | data() { |
| | | return { |
| | | onlineStatusOptions: [ |
| | | { |
| | | label: "正常", |
| | | value: 1, |
| | | }, |
| | | { |
| | | label: "离线", |
| | | value: 2, |
| | | }, |
| | | { |
| | | label: "异常离线", |
| | | value: 3, |
| | | }, |
| | | ], |
| | | statusOptions: [ |
| | | { |
| | | label: "正常", |
| | | value: "NORMAL", |
| | | }, |
| | | { |
| | | label: "预警", |
| | | value: "ALARM", |
| | | }, |
| | | { |
| | | label: "超标", |
| | | value: "EXCESS", |
| | | }, |
| | | { |
| | | label: "离线", |
| | | value: "DOWN", |
| | | }, |
| | | { |
| | | label: "异常离线", |
| | | value: "OFF", |
| | | }, |
| | | ], |
| | | ownerOptions: [], |
| | | seachData: {}, |
| | | pickerOptions: { |
| | | shortcuts: [ |
| | | { |
| | | text: "最近一周", |
| | | onClick(picker) { |
| | | const end = new Date(); |
| | | const start = new Date(); |
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
| | | picker.$emit("pick", [start, end]); |
| | | }, |
| | | }, |
| | | { |
| | | text: "最近一个月", |
| | | onClick(picker) { |
| | | const end = new Date(); |
| | | const start = new Date(); |
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
| | | picker.$emit("pick", [start, end]); |
| | | }, |
| | | }, |
| | | { |
| | | text: "最近三个月", |
| | | onClick(picker) { |
| | | const end = new Date(); |
| | | const start = new Date(); |
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
| | | picker.$emit("pick", [start, end]); |
| | | }, |
| | | }, |
| | | ], |
| | | }, |
| | | }, |
| | | { |
| | | text: "最近一个月", |
| | | onClick(picker) { |
| | | const end = new Date(); |
| | | const start = new Date(); |
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
| | | picker.$emit("pick", [start, end]); |
| | | }, |
| | | }, |
| | | { |
| | | text: "最近三个月", |
| | | onClick(picker) { |
| | | const end = new Date(); |
| | | const start = new Date(); |
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
| | | picker.$emit("pick", [start, end]); |
| | | }, |
| | | }, |
| | | ], |
| | | }, |
| | | }; |
| | | }, |
| | | created() {}, |
| | | mounted() { |
| | | this.getOwnerOptions(); |
| | | }, |
| | | methods: { |
| | | // 获取所属单位 |
| | | getOwnerOptions() { |
| | | const param = { pageSize: 100, pageNum: 1 }; |
| | | realTimeApi |
| | | .findCustomerList(param) |
| | | .then((res) => { |
| | | this.ownerOptions = res.list; |
| | | }) |
| | | .catch((err) => this.$message.error(err)); |
| | | }; |
| | | }, |
| | | |
| | | getUserList() { |
| | | const ownerItem = this.ownerOptions[this.seachData.ownerIndex]; |
| | | this.seachData.owner = ownerItem.Pid + ownerItem.Id; |
| | | this.$emit("getList", { seachData: this.seachData }); |
| | | created() { }, |
| | | mounted() { |
| | | this.getOwnerOptions(); |
| | | }, |
| | | exportTableData(){ |
| | | methods: { |
| | | // 获取所属单位 |
| | | getOwnerOptions() { |
| | | const param = { pageSize: 100, pageNum: 1 }; |
| | | realTimeApi |
| | | .findCustomerList(param) |
| | | .then((res) => { |
| | | this.ownerOptions = res.list; |
| | | }) |
| | | .catch((err) => this.$message.error(err)); |
| | | }, |
| | | |
| | | } |
| | | }, |
| | | resetAll() { |
| | | this.seachData = {}; |
| | | this.$emit("getList", { seachData: this.seachData }); |
| | | }, |
| | | getList() { |
| | | if (this.seachData.ownerIndex !== undefined) { |
| | | const ownerItem = this.ownerOptions[this.seachData.ownerIndex]; |
| | | this.seachData.owner = ownerItem.Pid + ownerItem.Id + "/"; |
| | | } |
| | | this.$emit("getList", { seachData: this.seachData }); |
| | | }, |
| | | exportTableData() { |
| | | if (this.seachData.ownerIndex !== undefined) { |
| | | const ownerItem = this.ownerOptions[this.seachData.ownerIndex]; |
| | | this.seachData.owner = ownerItem.Pid + ownerItem.Id + "/"; |
| | | } |
| | | this.$emit("exportTable", { seachData: this.seachData }); |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .header { |
| | | line-height: normal; |
| | | line-height: normal; |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <div> |
| | | <MyHeader @getList="getRealTimeList"></MyHeader> |
| | | <MyHeader |
| | | @getList="getRealTimeList" |
| | | @exportTable="exportInTime" |
| | | ></MyHeader> |
| | | <!-- 数据展示 --> |
| | | <div style="width: 100%; overflow-x: scroll"> |
| | | <el-table |
| | |
| | | getRealTimeList(seachData) { |
| | | let params; |
| | | if (seachData) { |
| | | params = { |
| | | pageNum: this.currentPage, |
| | | pageSize: this.pageSize, |
| | | resource: |
| | | seachData.seachData.resource == undefined |
| | | ? null |
| | | : seachData.seachData.resource, |
| | | region: |
| | | seachData.seachData.region == undefined |
| | | ? null |
| | | : seachData.seachData.region, |
| | | type: this.statusArr[1] ?? null, |
| | | code: |
| | | seachData.seachData.code == undefined |
| | | ? null |
| | | : seachData.seachData.code, |
| | | categoryBig: |
| | | seachData.seachData.categoryBig == undefined |
| | | ? null |
| | | : seachData.seachData.categoryBig, |
| | | categorySmall: |
| | | seachData.seachData.categorySmall == undefined |
| | | ? null |
| | | : seachData.seachData.categorySmall, |
| | | site: |
| | | seachData.seachData.site == undefined |
| | | ? null |
| | | : seachData.seachData.site, |
| | | street: |
| | | seachData.seachData.street == undefined |
| | | ? null |
| | | : seachData.seachData.street, |
| | | alarmTime: |
| | | seachData.seachData.alarmTime == undefined |
| | | ? null |
| | | : seachData.seachData.alarmTime, |
| | | }; |
| | | params = this.getParam(seachData) |
| | | } else { |
| | | params = { |
| | | pageNum: this.currentPage, |
| | |
| | | .findInTimeList(params) |
| | | .then(({ list, total }) => { |
| | | list.forEach(e => { |
| | | e.AcquitAtStr = this.Dateformat(e.AcquitAt); |
| | | e.AcquitAtStr = this.dateFormat("YYYY-mm-dd HH:MM", new Date(e.AcquitAt)); |
| | | e.FanStatusStr = this.FanStatusStr(e.FanStatus) |
| | | e.FilterStatusStr = this.FanStatusStr(e.FilterStatus) |
| | | e.OnlineStatusStr = this.OnlineStatusStr(e.OnlineStatus) |
| | |
| | | }) |
| | | .catch((err) => this.$message.error(err)); |
| | | }, |
| | | exportInTime(seachData) { |
| | | let params; |
| | | if (seachData) { |
| | | params = this.getParam(seachData) |
| | | } |
| | | realTimeApi |
| | | .exportInTime(params) |
| | | .then((res) => { |
| | | debugger |
| | | let time = new Date(); |
| | | let deathdate = time.toLocaleDateString(); |
| | | const blob = new Blob([res.data], { |
| | | type: "application/vnd.ms-excel;charset=utf-8", |
| | | }); |
| | | if (window.navigator.msSaveBlob) { |
| | | window.navigator.msSaveBlob( |
| | | blob, |
| | | deathdate + "实时数据" + ".xls" |
| | | ); |
| | | } else { |
| | | const url = window.URL.createObjectURL(blob); |
| | | const link = document.createElement("a"); |
| | | link.style.display = "none"; |
| | | link.href = url; |
| | | link.download = deathdate + "实时数据" + ".xls"; |
| | | document.body.appendChild(link); |
| | | link.click(); |
| | | document.body.removeChild(link); |
| | | } |
| | | this.$message.success("操作成功"); |
| | | }) |
| | | .catch((err) => this.$message.error(err)); |
| | | }, |
| | | getParam(seachData) { |
| | | let params; |
| | | if (seachData) { |
| | | const seachParams = seachData.seachData |
| | | params = { |
| | | owner: |
| | | seachParams.owner == undefined |
| | | ? null |
| | | : seachParams.owner, |
| | | onlineStatus: |
| | | seachParams.onlineStatus == undefined |
| | | ? null |
| | | : seachParams.onlineStatus, |
| | | status: seachParams.status == undefined |
| | | ? null |
| | | : seachParams.status, |
| | | type: |
| | | seachParams.type == undefined |
| | | ? null |
| | | : seachParams.type, |
| | | startTime: |
| | | seachParams.alarmTime == undefined |
| | | ? null |
| | | : this.dateFormat("YYYY-mm-dd HH:MM:SS", seachParams.alarmTime[0]), |
| | | endTime: |
| | | seachParams.alarmTime == undefined |
| | | ? null |
| | | : this.dateFormat("YYYY-mm-dd HH:MM:SS", seachParams.alarmTime[1]), |
| | | }; |
| | | } |
| | | return params; |
| | | }, |
| | | |
| | | FanStatusStr(FanStatus) { |
| | | switch (FanStatus) { |
| | | case 1: |
| | |
| | | this.currentPage = page; |
| | | this.getRealTimeList(); |
| | | }, |
| | | Dateformat(fmt) { |
| | | var fmtdate = new Date(fmt) |
| | | var o = { |
| | | "M+": fmtdate.getMonth() + 1, //月份 |
| | | "d+": fmtdate.getDate(), //日 |
| | | "h+": fmtdate.getHours(), //小时 |
| | | "m+": fmtdate.getMinutes(), //分 |
| | | "s+": fmtdate.getSeconds(), //秒 |
| | | "q+": Math.floor((fmtdate.getMonth() + 3) / 3), //季度 |
| | | "S": fmtdate.getMilliseconds() //毫秒 |
| | | dateFormat(fmt, date) { |
| | | let ret; |
| | | const opt = { |
| | | "Y+": date.getFullYear().toString(), // 年 |
| | | "m+": (date.getMonth() + 1).toString(), // 月 |
| | | "d+": date.getDate().toString(), // 日 |
| | | "H+": date.getHours().toString(), // 时 |
| | | "M+": date.getMinutes().toString(), // 分 |
| | | "S+": date.getSeconds().toString() // 秒 |
| | | // 有其他格式化字符需求可以继续添加,必须转化成字符串 |
| | | }; |
| | | if (/(y+)/.test(fmt)) { |
| | | fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); |
| | | } |
| | | for (var k in o) { |
| | | if (new RegExp("(" + k + ")").test(fmt)) { |
| | | fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); |
| | | } |
| | | } |
| | | for (let k in opt) { |
| | | ret = new RegExp("(" + k + ")").exec(fmt); |
| | | if (ret) { |
| | | fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0"))) |
| | | }; |
| | | }; |
| | | return fmt; |
| | | } |
| | | }, |
| | | }, |
| | | } |
| | | }; |
| | | </script> |
| | | |