| | |
| | | import ButtonClick from '@/sfc/ButtonClick.vue' |
| | | import index from '@/utils/exception_common_function/index.js' |
| | | import DaySelect from '@/sfc/DaySelect.vue'; |
| | | // import {useLoginUserStore} from '@/stores/user.js' |
| | | import { useLoginUserStore } from '@/stores/user' |
| | | import historyApi from '@/api/historyApi.js' |
| | | import time from '@/utils/time.js' |
| | | import lineChart from '@/utils/chartFunction/lineChart.js' |
| | | import exceptionOption from '@/utils/chartFunction/exceptionOption.js' |
| | | |
| | | export default { |
| | | components: { |
| | | ExceptionType, |
| | |
| | | }, |
| | | setup() { |
| | | const { isExceedOneMonth } = useCommonFunction() |
| | | const userName = useLoginUserStore() |
| | | |
| | | return { |
| | | isExceedOneMonth |
| | | isExceedOneMonth,userName |
| | | } |
| | | }, |
| | | // 监听 判断按钮是否可点击 |
| | | watch: { |
| | | selectedRowIndex(newVaue) { |
| | | // // 处于表格的最后一条数据 设置‘上一条’按钮不可点 |
| | | // if (newVaue === this.displayData.length - 1) { |
| | | // this.dialog.isPreCantouch = true |
| | | // //用户先点了第一条,pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁 |
| | | // if (this.dialog.isNextCantouch == true) { |
| | | // this.dialog.isNextCantouch = false |
| | | // } |
| | | // } |
| | | // // 处于表格第一条数据 设置‘下一条’按钮不可点 |
| | | // else if (newVaue === 0) { |
| | | // this.dialog.isNextCantouch = true |
| | | // //用户先点了表格最后一条,next为true,然后点击第一条,pre为true。此时两个按钮都被封锁 |
| | | // if (this.dialog.isPreCantouch == true) { |
| | | // this.dialog.isPreCantouch = false |
| | | // } |
| | | // } |
| | | // // 处于表格的中间行 将按钮设置为可点击状态 |
| | | // else { |
| | | // this.dialog.isPreCantouch = false |
| | | // this.dialog.isNextCantouch = false |
| | | // } |
| | | |
| | | // 处于表格的最后一条数据 设置‘上一条’按钮不可点 |
| | | if (newVaue === 0) { |
| | | this.dialog.isPreCantouch = true |
| | |
| | | mounted() { |
| | | this.backExceptionDataAWeekAgo() |
| | | this.calTableHeight() |
| | | |
| | | }, |
| | | |
| | | methods: { |
| | | /** |
| | | * 有效率异常 设置折线图配置项 |
| | | * @param: |
| | | * @returns: |
| | | */ |
| | | validProcess() { |
| | | // x轴数据 |
| | | let xList = time.ascTime( |
| | | this.tableCurrentRowData.beginTime, |
| | | this.tableCurrentRowData.endTime, |
| | | 15 |
| | | ) |
| | | |
| | | // y轴数据 |
| | | let yList = [] |
| | | xList.forEach((item) => { |
| | | // 查找该时间的数据 |
| | | let r = lineChart.findDate(this.dialog.historyData, item) |
| | | if (r) { |
| | | yList.push(r.dustValue) |
| | | } else { |
| | | yList.push(null) |
| | | } |
| | | }) |
| | | // 颜色背景区间 |
| | | // 得到无数据的时间点或flag不等于N的时间点 |
| | | let noDataTime = time.invalidTime(this.dialog.historyData, xList) |
| | | let rangeTime = time.seriesTime(noDataTime, 15) |
| | | // let rangeTime_1 = time.splitTime(rangeTime) |
| | | // 得到背景区间的配置 |
| | | let areaObj = lineChart.getMarkArea(rangeTime, '异常') |
| | | |
| | | // 传入参数 |
| | | this.dialog.option = exceptionOption.setExceptionChartOption( |
| | | xList, |
| | | yList, |
| | | '', |
| | | '', |
| | | '', |
| | | '', |
| | | this.tableCurrentRowData.exception, |
| | | areaObj, |
| | | this.tableCurrentRowData.exceptionType |
| | | ) |
| | | }, |
| | | |
| | | giveDay(val){ |
| | | // 将中国标准时间转为指定格式(该组件返回的标准时间的格式,所以必须的加这个函数) |
| | | |
| | | this.beginTime = dayjs(val).format('YYYY-MM-DD 00:00:00'); |
| | | this.endTime = dayjs(val).format('YYYY-MM-DD 23:59:59'); |
| | | }, |
| | | |
| | | /** |
| | | * 审计内容保存为草稿 |
| | | * @param: |
| | |
| | | this.auditData = res.data.data |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * 多选列(已审核的行不会加入其中) |
| | | * @param |
| | |
| | | }) |
| | | }, |
| | | close() { |
| | | // if (this.auditDialog.checkerNotes || this.auditDialog.enterpriseNotes) { |
| | | // ElMessageBox.confirm('这将会,确定要关闭吗', '提示', |
| | | // { |
| | | // confirmButtonText: '确定', |
| | | // cancelButtonText: '取消', |
| | | // type: 'warning', |
| | | // center :'true', |
| | | // icon: markRaw(Delete), |
| | | // draggable: true, |
| | | // }).then(() => { |
| | | // ElMessage({ |
| | | // type: 'success', |
| | | // message: '已关闭', |
| | | // }) |
| | | // this.auditDialog.visible = false |
| | | // }) |
| | | // }else{ |
| | | // this.auditDialog.visible = false |
| | | // } |
| | | |
| | | this.auditDialog.visible = false |
| | | }, |
| | | // 表格行的颜色 |
| | |
| | | submitAudit() { |
| | | // 同时填写了审核人员和企业的备注 |
| | | this.loading.submitAudit = true |
| | | // 把登陆的用户姓名给审核人 |
| | | if(this.userName.getUserName != '-1'){ |
| | | this.auditDialog.checker = this.userName.getUserName |
| | | } |
| | | if (this.auditDialog.checkerNotes && this.auditDialog.enterpriseNotes) { |
| | | this.sendAudit( |
| | | this.auditDialog.checker, |
| | |
| | | openAuditDiag(row) { |
| | | this.auditDialog.visible = true |
| | | this.tableCurrentRowData = row |
| | | |
| | | // 进入审核页时,将表格当前行的审核信息给输入框 |
| | | this.auditDialog.checkerNotes = this.tableCurrentRowData.checkerContent |
| | | this.auditDialog.enterpriseNotes = this.tableCurrentRowData.enterpriseContent |
| | | |
| | | // // 未审核 就把当前登陆名给审核人 |
| | | // if(this.tableCurrentRowData.uiRealName == null){ |
| | | // this.auditDialog.checker = this.userName.getUserName |
| | | // } |
| | | // // 已审核 |
| | | // else{ |
| | | // this.auditDialog.checker = this.tableCurrentRowData.uiRealName |
| | | // } |
| | | |
| | | }, |
| | | |
| | | |
| | | /** |
| | | * description:点击异常站点名字时 返回的数据 |
| | |
| | | break |
| | | // 超标 |
| | | case '2': |
| | | case '5': |
| | | case '6': |
| | | this.dialog.option = { |
| | | title: { |
| | | text: this.tableCurrentRowData.exception, |
| | |
| | | } |
| | | break |
| | | case '4': |
| | | case '5': |
| | | case '6': |
| | | case '7': |
| | | this.dialog.option = { |
| | | title: { |
| | |
| | | |
| | | // 得到上一行的数据 |
| | | this.tableCurrentRowData = this.displayData[this.selectedRowIndex] |
| | | let params = index.requestGetParms( |
| | | this.tableCurrentRowData.name, |
| | | this.tableCurrentRowData.beginTime, |
| | | this.tableCurrentRowData.endTime |
| | | ) |
| | | this.loading.preButton = true |
| | | this.$http.get('/dust/history', { params: params }).then((response) => { |
| | | |
| | | historyApi.queryHistoryData({ |
| | | siteName:this.tableCurrentRowData.name, |
| | | beginTime:this.tableCurrentRowData.beginTime, |
| | | endTime:this.tableCurrentRowData.endTime |
| | | }).then(response => { |
| | | // 保存返回的超标数据 |
| | | this.dialog.historyData = response.data.data |
| | | this.dialog.exceptionTotal = response.data.data.length |
| | | // 逻辑处理 |
| | | this.timeAndDataProcessed() |
| | | |
| | | if (this.tableCurrentRowData.exceptionType != '8') { |
| | | this.timeAndDataProcessed() |
| | | } else { |
| | | this.loading.lineChart = true |
| | | this.validProcess() |
| | | this.loading.lineChart = false |
| | | this.flag.banTouch = 0 |
| | | } |
| | | this.loading.preButton = false |
| | | }) |
| | | |
| | | // let params = index.requestGetParms( |
| | | // this.tableCurrentRowData.name, |
| | | // this.tableCurrentRowData.beginTime, |
| | | // this.tableCurrentRowData.endTime |
| | | // ) |
| | | // this.$http.get('/dust/history', { params: params }).then((response) => { |
| | | // // 保存返回的超标数据 |
| | | // this.dialog.historyData = response.data.data |
| | | // this.dialog.exceptionTotal = response.data.data.length |
| | | // // 逻辑处理 |
| | | // this.timeAndDataProcessed() |
| | | // this.loading.preButton = false |
| | | // }) |
| | | } |
| | | }, |
| | | /** |
| | |
| | | |
| | | // 得到上一行的数据 |
| | | this.tableCurrentRowData = this.displayData[this.selectedRowIndex] |
| | | |
| | | let params = index.requestGetParms( |
| | | this.tableCurrentRowData.name, |
| | | this.tableCurrentRowData.beginTime, |
| | | this.tableCurrentRowData.endTime |
| | | ) |
| | | this.loading.afterButton = true |
| | | this.$http.get('/dust/history', { params: params }).then((response) => { |
| | | |
| | | historyApi.queryHistoryData({ |
| | | siteName:this.tableCurrentRowData.name, |
| | | beginTime:this.tableCurrentRowData.beginTime, |
| | | endTime:this.tableCurrentRowData.endTime |
| | | }).then(response => { |
| | | // 保存返回的超标数据 |
| | | this.dialog.historyData = response.data.data |
| | | this.dialog.exceptionTotal = response.data.data.length |
| | | // 逻辑处理 |
| | | this.timeAndDataProcessed() |
| | | |
| | | if (this.tableCurrentRowData.exceptionType != '8') { |
| | | this.timeAndDataProcessed() |
| | | } else { |
| | | this.loading.lineChart = true |
| | | this.validProcess() |
| | | this.loading.lineChart = false |
| | | this.flag.banTouch = 0 |
| | | } |
| | | this.loading.afterButton = false |
| | | }) |
| | | |
| | | |
| | | // let params = index.requestGetParms( |
| | | // this.tableCurrentRowData.name, |
| | | // this.tableCurrentRowData.beginTime, |
| | | // this.tableCurrentRowData.endTime |
| | | // ) |
| | | |
| | | // this.$http.get('/dust/history', { params: params }).then((response) => { |
| | | // // 保存返回的超标数据 |
| | | // this.dialog.historyData = response.data.data |
| | | // this.dialog.exceptionTotal = response.data.data.length |
| | | // // 逻辑处理 |
| | | // this.timeAndDataProcessed() |
| | | // this.loading.afterButton = false |
| | | // }) |
| | | } |
| | | }, |
| | | |
| | |
| | | // 对请求到的数据进行首尾拼接 |
| | | // 得到前后完整数据进行绘制图形 |
| | | |
| | | let params = {} |
| | | if (row.name) { |
| | | params['siteName'] = row.name |
| | | } |
| | | if (row.beginTime) { |
| | | params['beginTime'] = row.beginTime |
| | | } |
| | | if (row.endTime) { |
| | | params['endTime'] = row.endTime |
| | | } |
| | | historyApi.queryHistoryData({ |
| | | siteName:row.name, |
| | | beginTime:row.beginTime, |
| | | endTime:row.endTime |
| | | }).then(response => { |
| | | // 保存返回的超标数据 |
| | | this.dialog.historyData = response.data.data |
| | | this.dialog.exceptionTotal = response.data.data.length |
| | | // 逻辑处理 |
| | | |
| | | this.$http.get('/dust/history', { params: params }).then((response) => { |
| | | // 保存返回的超标数据 |
| | | this.dialog.historyData = response.data.data |
| | | this.dialog.exceptionTotal = response.data.data.length |
| | | // 逻辑处理 |
| | | this.timeAndDataProcessed() |
| | | }) |
| | | if (this.tableCurrentRowData.exceptionType != '8') { |
| | | this.timeAndDataProcessed() |
| | | } else { |
| | | this.loading.lineChart = true |
| | | this.validProcess() |
| | | this.loading.lineChart = false |
| | | this.flag.banTouch = 0 |
| | | } |
| | | }) |
| | | |
| | | // let params = {} |
| | | // if (row.name) { |
| | | // params['siteName'] = row.name |
| | | // } |
| | | // if (row.beginTime) { |
| | | // params['beginTime'] = row.beginTime |
| | | // } |
| | | // if (row.endTime) { |
| | | // params['endTime'] = row.endTime |
| | | // } |
| | | |
| | | // this.$http.get('/dust/history', { params: params }).then((response) => { |
| | | // // 保存返回的超标数据 |
| | | // this.dialog.historyData = response.data.data |
| | | // this.dialog.exceptionTotal = response.data.data.length |
| | | // // 逻辑处理 |
| | | // this.timeAndDataProcessed() |
| | | // }) |
| | | }, |
| | | |
| | | /** |
| | |
| | | alert('时间跨度不能超过一个月') |
| | | return |
| | | } |
| | | |
| | | this.flag.originClick = 0 |
| | | |
| | | |
| | | let params = {} |
| | | params['page'] = this.currentPage |
| | | params['pageSize'] = this.pageSize |
| | | |
| | | if (this.form.name) { |
| | | params['siteName'] = this.form.name |
| | | } |
| | |
| | | params['endTime'] = this.endTime |
| | | this.loading.tableLoading = true |
| | | this.loading.queryButton = true |
| | | |
| | | console.log('站点:',params['siteName']); |
| | | console.log('类型',params['exceptionType']); |
| | | this.$http.get('/dust/exceptiondata', { params: params }).then((response) => { |
| | | // 保存返回的 |
| | | // this.tableData = response.data.data.rows; |
| | |
| | | if (this.form.name) { |
| | | params['siteName'] = this.form.name |
| | | } |
| | | |
| | | |
| | | if (this.form.exceptionName) { |
| | | params['exceptionType'] = this.form.exceptionName |
| | | } |
| | |
| | | const h2 = this.$refs.h2.$el.offsetHeight |
| | | const h4 = this.$refs.h4.$el.offsetHeight |
| | | // 其中一个40是盒子的总外边距 |
| | | this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h4}px - 20px - 100px - var(--el-main-padding) * 2)` |
| | | this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h4}px - 20px - 10px - var(--el-main-padding) * 2)` |
| | | // this.tableHeight = `calc(100vh - ${h1}px - ${h4}px - 100px - var(--el-main-padding) * 2)`; |
| | | }, |
| | | |
| | |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <!-- <el-button type="warning" :loading="loading.queryButton" @click="handleSubmit"><el-icon |
| | | style="margin-right: 6px;font-size: 1.2em;"><i-ep-Search /></el-icon>查询</el-button> --> |
| | | |
| | | <ButtonClick |
| | | content="搜索" |
| | | type="warning" |
| | |
| | | <el-col> |
| | | <div class="checknum"> |
| | | <div class="checknum-text"> |
| | | <el-tag>应审核数</el-tag><span>{{ total }} ({{ checkedRate }}%)</span> |
| | | <el-tag>应审核数</el-tag><span >{{ total }} ({{ checkedRate }}%)</span> |
| | | </div> |
| | | |
| | | <div class="checknum-text"> |
| | |
| | | fixed |
| | | :index="indexMethod1" |
| | | /> |
| | | <el-table-column prop="name" label="站点名称" show-overflow-tooltip /> |
| | | <el-table-column prop="mnCode" label="设备编号" align="center" show-overflow-tooltip /> |
| | | <el-table-column prop="name" label="点位名称" show-overflow-tooltip /> |
| | | <el-table-column prop="mnCode" label="设备编码" align="center" show-overflow-tooltip /> |
| | | <el-table-column prop="exception" label="异常类型" align="center" show-overflow-tooltip /> |
| | | <el-table-column prop="region" label="区域" align="center" show-overflow-tooltip /> |
| | | <el-table-column prop="region" label="区县" align="center" show-overflow-tooltip /> |
| | | <el-table-column prop="beginTime" label="开始时间" align="center" show-overflow-tooltip /> |
| | | <el-table-column prop="endTime" label="结束时间" align="center" show-overflow-tooltip /> |
| | | <el-table-column prop="typename" label="场景" align="center" width="82" show-overflow-tooltip /> |
| | |
| | | |
| | | <el-form label-position="top"> |
| | | <el-form-item label="审核人"> |
| | | <el-input v-model="auditDialog.checker"></el-input> |
| | | <el-input v-model="userName.getUserName"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="审核情况"> |
| | | <el-input |
| | |
| | | <template #header> |
| | | <div class="diag-head"> |
| | | <div class="diag-head-text"> |
| | | <div><span class="diag-head-text1">站点名称:</span>{{ tableCurrentRowData.name }}</div> |
| | | <div><span class="diag-head-text1">点位名称:</span>{{ tableCurrentRowData.name }}</div> |
| | | <div><span class="diag-head-text1">设备编号:</span>{{ tableCurrentRowData.mnCode }}</div> |
| | | <div><span class="diag-head-text1">运维商:</span>{{ tableCurrentRowData.dutyCompany }}</div> |
| | | <!-- <div> |
| | | <span class="diag-head-text1">异常类型:</span> |
| | | <span v-if="tableCurrentRowData.exceptionType == '0'">数据缺失异常</span> |
| | | <span v-else-if="tableCurrentRowData.exceptionType == '1'">数据超低</span> |
| | | <span v-else-if="tableCurrentRowData.exceptionType == '2'">超标</span> |
| | | <span v-else-if="tableCurrentRowData.exceptionType == '3'">数据长时间无波动</span> |
| | | <span v-else-if="tableCurrentRowData.exceptionType == '4'">量级突变异常</span> |
| | | <span v-else-if="tableCurrentRowData.exceptionType == '5'">临近超标异常</span> |
| | | <span v-else-if="tableCurrentRowData.exceptionType == '6'">单日超标次数临界异常</span> |
| | | <span v-else-if="tableCurrentRowData.exceptionType == '7'">滑动平均值异常</span> |
| | | </div> --> |
| | | |
| | | |
| | | <div> |
| | | <span class="diag-head-text1">异常时间段:</span>{{ tableCurrentRowData.beginTime }} ~ |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- <div class="chart-jump-button"> |
| | | <el-button |
| | | type="danger" |
| | | :loading="loading.preButton" |
| | | :disabled="dialog.isPreCantouch || flag.banTouch" |
| | | @click="getPreviousRowData" |
| | | >上条异常</el-button |
| | | > |
| | | <el-button |
| | | type="danger" |
| | | :loading="loading.afterButton" |
| | | :disabled="dialog.isNextCantouch || flag.banTouch" |
| | | @click="getNextRowData" |
| | | >下条异常</el-button |
| | | > |
| | | </div> --> |
| | | <div class="chart-jump-button"> |
| | | <el-button |
| | | type="danger" |
| | |
| | | fixed |
| | | :index="indexMethod2" |
| | | ></el-table-column> |
| | | <!-- <el-table-column fixed prop="name" label="站点名称" show-overflow-tooltip /> |
| | | <el-table-column prop="mnCode" label="设备编号" align="center" show-overflow-tooltip /> |
| | | <el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip /> --> |
| | | |
| | | <el-table-column prop="lst" label="采集时间" align="center" show-overflow-tooltip /> |
| | | <el-table-column |
| | | prop="dustValue" |
| | | label="颗粒物浓度(mg/m³)" |
| | | label="TSP(mg/m³)" |
| | | align="center" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column prop="flag" label="flag" align="center" show-overflow-tooltip /> |
| | | </el-table> |
| | | </div> |
| | | <template #footer> |
| | |
| | | } |
| | | .el-tag { |
| | | font-size: 14px; |
| | | vertical-align: baseline; |
| | | } |
| | | |
| | | .checknum-rate { |