| | |
| | | </ExceptionType> |
| | | |
| | | <TimeSelect @submit-time="giveTime"></TimeSelect> |
| | | <!-- </div> --> |
| | | </div> |
| | | <div |
| | | ref="h2" |
| | |
| | | </el-card> |
| | | </el-collapse-item> |
| | | </el-collapse> |
| | | <!-- <hr/> |
| | | <br> --> |
| | | |
| | | <h4 class="table-text">异常数据</h4> |
| | | <!-- --> |
| | | |
| | | </el-col> |
| | | </el-row> |
| | | <el-card class="table-page" v-show="!isNoData"> |
| | |
| | | <div class="dialog-button-position"> |
| | | <el-button |
| | | type="danger" |
| | | :disabled="isPreCantouch" |
| | | :loading="button.preButton" |
| | | :disabled="isPreCantouch || banTouch" |
| | | @click="getPreviousRowData" |
| | | >上条异常</el-button |
| | | > |
| | | <el-button |
| | | type="danger" |
| | | :disabled="isNextCantouch" |
| | | :loading="button.afterButton" |
| | | :disabled="isNextCantouch || banTouch" |
| | | @click="getNextRowData" |
| | | >下条异常</el-button |
| | | > |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | button:{ |
| | | // 查询按钮 |
| | | queryButton:false, |
| | | // 上一条按钮 |
| | | preButton:false, |
| | | // 下一条按钮 |
| | | afterButton:false, |
| | | // |
| | | banTouch:0 |
| | | }, |
| | | // 异常折线图的配置 |
| | | option: {}, |
| | | // 折线图展示 |
| | |
| | | let current = timePoints[i]; |
| | | let next = timePoints[i + 1]; |
| | | while (this.isTimeDifferenceGreaterThan10Minutes(current, next)) { |
| | | console.log('generateTimePoints'); |
| | | current = dayjs(current) |
| | | .add(10, 'minute') |
| | | .format('YYYY-MM-DD HH:mm:ss'); |
| | |
| | | const year2 = date2.getFullYear(); |
| | | const month2 = date2.getMonth(); |
| | | const day2 = date2.getDate(); |
| | | console.log(month1, month2); |
| | | |
| | | // 判断两个日期是否相差一个月 |
| | | if (year1 === year2) { |
| | |
| | | getNextRowData() { |
| | | // 不是表格的第一行 |
| | | if (this.selectedRowIndex !== 0) { |
| | | // 设置上下条按钮不可点击 |
| | | this.banTouch = 1 |
| | | |
| | | //得到上一行数据索引 |
| | | this.selectedRowIndex = this.selectedRowIndex - 1; |
| | | //请求数据 改变exceedingData |
| | |
| | | if (this.drawerData.endTime) { |
| | | params['endTime'] = this.displayData[this.selectedRowIndex].endTime; |
| | | } |
| | | |
| | | this.button.afterButton = true |
| | | axiosInstanceInstance |
| | | .get('/fume/exceed', { params: params }) |
| | | .then((response) => { |
| | | // 保存返回的超标数据 |
| | | this.exceedingData = response.data.data; |
| | | // this.chart = null; |
| | | // this.drawChart(); |
| | | this.drawChartTest(); |
| | | this.exceptionTotal = this.exceedingData.length; |
| | | this.button.afterButton = false |
| | | |
| | | this.banTouch = 0 |
| | | |
| | | }); |
| | | } |
| | | //表格的第一行,则上一条无数据 |
| | | else { |
| | | console.log(null); |
| | | } |
| | | // //表格的第一行,则上一条无数据 |
| | | // else { |
| | | // console.log(null); |
| | | // } |
| | | }, |
| | | |
| | | // 获取获取表格下一行数据 |
| | | getPreviousRowData() { |
| | | // 不是表格的第一行 |
| | | if (this.selectedRowIndex < this.displayData.length - 1) { |
| | | //得到上一行数据索引 |
| | | // 设置上下条按钮不可点击 |
| | | this.banTouch = 1 |
| | | |
| | | //得到上一行数据索引 |
| | | this.selectedRowIndex = this.selectedRowIndex + 1; |
| | | console.log('上', this.selectedRowIndex); |
| | | |
| | | //请求数据 改变exceedingData |
| | | this.setinfo(this.selectedRowIndex); |
| | |
| | | if (this.drawerData.endTime) { |
| | | params['endTime'] = this.displayData[this.selectedRowIndex].endTime; |
| | | } |
| | | this.button.preButton = true |
| | | axiosInstanceInstance |
| | | .get('/fume/exceed', { params: params }) |
| | | .then((response) => { |
| | | // 保存返回的超标数据 |
| | | this.exceedingData = response.data.data; |
| | | console.log(this.exceedingData); |
| | | this.drawChartTest(); |
| | | this.exceptionTotal = this.exceedingData.length; |
| | | this.button.preButton = false |
| | | |
| | | |
| | | this.banTouch = 0 |
| | | }); |
| | | } |
| | | //表格的第一行,则上一条无数据 |
| | | else { |
| | | console.log(null); |
| | | } |
| | | // else { |
| | | // console.log(null); |
| | | // } |
| | | }, |
| | | |
| | | // ‘查看详情’ 弹出框部分 |
| | |
| | | if (this.exceptionValue.length != 0) { |
| | | params['exceptionValue'] = this.exceptionValue.join(); |
| | | } |
| | | console.log('原', this.exceptionValue); |
| | | console.log('处理', this.exceptionValue.join()); |
| | | |
| | | if (this.beginTime) { |
| | | params['beginTime'] = this.beginTime; |
| | | } |
| | |
| | | params['endTime'] = this.endTime; |
| | | } |
| | | this.loading = true; |
| | | this.button.queryButton = true |
| | | axiosInstanceInstance |
| | | .get('/fume/abnormalthree', { params: params }) |
| | | .then((response) => { |
| | | this.abnormalData = response.data.data; |
| | | this.total = this.abnormalData.length; |
| | | this.loading = false; |
| | | this.button.queryButton = false |
| | | if (response.data.data.length == 0) { |
| | | ElMessage('该时段无数据'); |
| | | this.isNoData = true; |
| | |
| | | // 移除空数据状态 |
| | | this.isNoData = false; |
| | | this.handleCurrentChange(1); |
| | | console.log('返回的数据', this.abnormalData); |
| | | console.log('长度', response.data.data.total); |
| | | |
| | | }); |
| | | }, |
| | | handleSizeChange(val) { |
| | |
| | | // 计算结束时间减去开始时间中间相差多少个十分钟 |
| | | const diffInMinutes = end.diff(start, 'minute'); |
| | | const diffInTenMinutes = Math.floor(diffInMinutes / 10); |
| | | console.log('几个10分钟', diffInTenMinutes); |
| | | return diffInTenMinutes; |
| | | }, |
| | | |
| | |
| | | .get('/fume/history', { params: paramsBefore }) |
| | | .then((result1) => { |
| | | this.beforeData = result1.data.data; |
| | | console.log('beforeData:', this.beforeData); |
| | | // 请求后半段 |
| | | axiosInstanceInstance |
| | | .get('/fume/history', { params: paramsAfter }) |
| | | .then((result2) => { |
| | | this.afterData = result2.data.data; |
| | | console.log('afterData:', this.afterData); |
| | | //保存异常区间的值 |
| | | let tempArr = []; |
| | | // 保存异常区间前后的值 |
| | |
| | | |
| | | after = this.shallowCopyList(this.afterData); |
| | | // after = this.afterData |
| | | console.log('after:', after); |
| | | } |
| | | // 超标 |
| | | else { |
| | |
| | | |
| | | // 将前后区间数据 与 异常区间数据 合并 |
| | | this.allExceptionTimeData = [...before, ...tempArr, ...after]; |
| | | console.log('组合数据:', this.allExceptionTimeData); |
| | | // x轴日期时间 |
| | | let dateList = []; |
| | | // y轴 超标油烟浓度 |
| | |
| | | |
| | | dateList = timeAndValue['xAxis']; |
| | | fumeExceeding = timeAndValue['yAxis']; |
| | | |
| | | console.log('dateList:', dateList); |
| | | console.log('fumeExceeding:', fumeExceeding); |
| | | |
| | | // 提取异常起始时间点在整个区间内的数据索引 |
| | | let startIndex = dateList.findIndex( |
| | |
| | | ] |
| | | }; |
| | | }); |
| | | console.log(this.optionsShop); |
| | | }); |
| | | }, |
| | | exportDom() { |
| | |
| | | }) |
| | | .then((result) => { |
| | | this.exception0 = result.data.data; |
| | | console.log('异常0', this.exception0); |
| | | console.log('异常0数量', this.exception0.length); |
| | | }); |
| | | axiosInstanceInstance |
| | | .get('/fume/shopname', { |
| | |
| | | getRecentSevenDays() { |
| | | // 给级联选择器设置默认的选择项 |
| | | this.devId = ['付小姐在成都', 'qinshi_31010320210010']; |
| | | console.log(this.currentDateTime, this.oneWeekAgoDateTime); |
| | | let params = {}; |
| | | params['beginTime'] = this.beginTime; |
| | | params['endTime'] = this.endTime; |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | /* .exception-root-container { |
| | | margin: 20px; |
| | | padding: 10px; |
| | | border: 1px; |
| | | height: 615px; |
| | | |
| | | } */ |
| | | .header-container { |
| | | display: flex; |
| | | margin-left: 20px; |
| | |
| | | /* 异常分析数据与按钮 */ |
| | | .exception-container { |
| | | display: flex; |
| | | /* direction: column; */ |
| | | /* flex-grow: 2,1; */ |
| | | } |
| | | .example-showcase .el-loading-mask { |
| | | z-index: 9; |
| | |
| | | font-size: 18px; |
| | | } |
| | | .collapse-header-text { |
| | | /* margin-right: 150px; */ |
| | | margin-top: 5px; |
| | | font-size: 14px; |
| | | color: gray; |
| | |
| | | .box-card-label { |
| | | font-size: 14px; |
| | | white-space: nowrap; |
| | | /* overflow-x: auto; */ |
| | | } |
| | | :deep().el-card { |
| | | border-radius: 9px; |
| | |
| | | .table-page { |
| | | margin-left: 20px; |
| | | } |
| | | :deep().table-page .el-card__body { |
| | | /* padding: 0px; */ |
| | | } |
| | | |
| | | .table-text { |
| | | font-size: 18px; |
| | | margin: 5px 0px 10px 20px; |
| | |
| | | .box-card { |
| | | height: 190px; |
| | | } |
| | | :deep().box-card .el-card__body { |
| | | /* padding: 5px; */ |
| | | } |
| | | |
| | | .sub-box-card { |
| | | height: 100px; |
| | | border: 0px; |
| | | } |
| | | :deep().sub-box-card .el-card__body { |
| | | /* padding: 0px; */ |
| | | } |
| | | |
| | | .mx-1 { |
| | | margin-bottom: 0px; |
| | | } |
| | |
| | | justify-content: right; |
| | | margin-bottom: 10px; |
| | | } |
| | | /* :global(.el-table .exceeding-row) { |
| | | --el-table-expanded-cell-bg-color: #f53f3f; |
| | | } |
| | | :global(.el-table .abnormal-power-supply) { |
| | | --el-table-expanded-cell-bg-color: #ffcf8b; |
| | | } |
| | | |
| | | :global(.el-table .disconnect) { |
| | | --el-table-expanded-cell-bg-color: #ff7d00; |
| | | } */ |
| | | |
| | | :deep().el-table__row .exceeding-row{ |
| | | background-color: #F53F3F; |