| | |
| | | </el-row> |
| | | </el-form> |
| | | <div ref="dataAnalysisChart" style="height: 500px;"></div> |
| | | <div class="chart-foot"> |
| | | <div class="chart-foot-content"> |
| | | <h3 class="chart-foot-title">预警信息</h3> |
| | | <div class="chart-foot-table"> |
| | | <el-table :data="alarmList" style="width: 100%" v-loading="loadingAlarm" height="100px"> |
| | | <el-table-column prop="content" header-align="center" align="left" label="消息内容" min-width="200" /> |
| | | <el-table-column prop="alarmType" label="预警类型" header-align="center" align="left" min-width="150"/> |
| | | <el-table-column prop="alarmTime" label="预警时间" header-align="center" align="left" min-width="150"/> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | <div class="chart-foot-content"> |
| | | <h3 class="chart-foot-title">调度建议</h3> |
| | | <div class="chart-foot-table"> |
| | | <el-table :data="suggestList" style="width: 100%" v-loading="loadingAdjust" height="100px"> |
| | | <el-table-column |
| | | prop="scheduleTime" |
| | | label="调度时间" |
| | | header-align="center" |
| | | align="left" |
| | | min-width="160" |
| | | /> |
| | | <el-table-column |
| | | prop="content" |
| | | label="内容" |
| | | min-width="300" |
| | | header-align="center" align="left" |
| | | /> |
| | | <el-table-column |
| | | prop="adjustValue" |
| | | label="调整值" |
| | | header-align="center" |
| | | align="center" |
| | | min-width="100" |
| | | /> |
| | | </el-table> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <script lang="ts" setup> |
| | | import {getYMDHMS} from "@/utils/dateUtil" |
| | | import * as McsApi from '@/api/model/mcs' |
| | | import * as AlarmMessageApi from '@/api/model/pre/alarm/message' |
| | | import * as ScheSuggestApi from '@/api/model/sche/suggest' |
| | | import * as echarts from "echarts"; |
| | | import {Search, DArrowLeft, DArrowRight, VideoPlay, VideoPause, CaretLeft, CaretRight} from '@element-plus/icons-vue' |
| | | |
| | |
| | | const timer = ref() |
| | | let myChart = null; |
| | | const isPlay = ref(false) |
| | | const alarmList = ref([]) |
| | | const suggestList = ref([]) |
| | | const loadingAlarm = ref(false) |
| | | const loadingAdjust = ref(false) |
| | | |
| | | const formRules = reactive({ |
| | | calItem: [{required: true, message: '预测项不能为空', trigger: 'blur'}], |
| | |
| | | startTime: formData.value.startTime, |
| | | endTime: formData.value.endTime |
| | | }) |
| | | |
| | | const data = await McsApi.getPreDataCharts(params) |
| | | formData.value.predictTime = data.predictTime; |
| | | formData.value.startTime = data.startTime |
| | | formData.value.endTime = data.endTime |
| | | |
| | | const paramsAlarm = reactive({ |
| | | outIds: outIds, |
| | | predictTime: formData.value.predictTime |
| | | }) |
| | | |
| | | loadingAlarm.value = true |
| | | alarmList.value = await AlarmMessageApi.getListByOut(paramsAlarm) |
| | | loadingAlarm.value = false |
| | | |
| | | loadingAdjust.value = true |
| | | suggestList.value = await ScheSuggestApi.getListByOut(paramsAlarm) |
| | | loadingAdjust.value = false |
| | | |
| | | let xAxisData = data.categories; |
| | | let defaultYAxis = [ |
| | |
| | | } |
| | | </script> |
| | | <style scoped> |
| | | .chart-foot-table { |
| | | border: 1px solid #bababa; |
| | | } |
| | | .chart-foot-title { |
| | | font-size: 14px; |
| | | } |
| | | .chart-foot-content { |
| | | height: 100%; |
| | | width: 50%; |
| | | padding: 5px; |
| | | } |
| | | .chart-foot { |
| | | height: 120px; |
| | | width: 100%; |
| | | display: flex; |
| | | flex-direction: row; |
| | | } |
| | | .el-form-item { |
| | | margin-bottom: 0 !important; |
| | | } |
| | |
| | | |
| | | .his-body { |
| | | width: 100%; |
| | | height: calc(calc(100vh - 68px - 38px - 160px)); |
| | | height: calc(calc(100vh - 68px - 38px - 60px)); |
| | | display: flex; |
| | | flex-direction: row; |
| | | justify-content: flex-start; |