| 提交 | 用户 | 时间 | ||
| 5cc1d9 | 1 | <template> |
| D | 2 | <!-- 搜索 --> |
| 3 | <ContentWrap> | |
| 4 | <el-form | |
| 5 | class="-mb-15px" | |
| 6 | :model="queryParams" | |
| 7 | ref="queryFormRef" | |
| 8 | :inline="true" | |
| 9 | label-width="68px" | |
| 10 | > | |
| 11 | <el-form-item label="开始时间"> | |
| 12 | <el-date-picker | |
| 13 | size="mini" | |
| 14 | v-model="queryParams.startTime" | |
| 15 | format="YYYY-MM-DD HH:mm:00" | |
| 16 | value-format="YYYY-MM-DD HH:mm:00" | |
| 17 | type="datetime" | |
| 18 | :clearable="false" | |
| 19 | placeholder="选择日期时间"/> | |
| 20 | </el-form-item> | |
| 21 | <el-form-item label="结束时间"> | |
| 22 | <el-date-picker | |
| 23 | size="mini" | |
| 24 | v-model="queryParams.endTime" | |
| 25 | format="YYYY-MM-DD HH:mm:00" | |
| 26 | value-format="YYYY-MM-DD HH:mm:00" | |
| 27 | type="datetime" | |
| 28 | :clearable="false" | |
| 29 | placeholder="选择日期时间"/> | |
| 30 | </el-form-item> | |
| 31 | <el-form-item label="调度指标" prop="ddzb"> | |
| 32 | <el-select | |
| 33 | v-model="queryParams.ddbz" | |
| 34 | class="!w-240px" | |
| 35 | clearable | |
| 36 | placeholder="请选择调度指标" | |
| 37 | > | |
| 38 | <el-option | |
| 39 | v-for="dict in getIntDictOptions(DICT_TYPE.PMS_DDZB)" | |
| 40 | :key="dict.value" | |
| 41 | :label="dict.label" | |
| 42 | :value="dict.value" | |
| 43 | /> | |
| 44 | </el-select> | |
| 45 | </el-form-item> | |
| 46 | <el-form-item> | |
| 47 | <el-button @click="handleQuery"> | |
| 48 | <Icon icon="ep:search" class="mr-5px"/> | |
| 49 | 搜索 | |
| 50 | </el-button> | |
| 51 | </el-form-item> | |
| 52 | </el-form> | |
| 53 | <div :loading="loading" style="height: 400px; width: 100%;"> | |
| 54 | <bar-line :option="chartOption"/> | |
| 55 | </div> | |
| 56 | </ContentWrap> | |
| 57 | </template> | |
| 58 | <script lang="ts" setup> | |
| 59 | import {ref} from "vue" | |
| 60 | import {getYMD} from "@/utils/dateUtil" | |
| c3134f | 61 | |
| 5cc1d9 | 62 | defineOptions({name: 'Analysis'}) |
| D | 63 | |
| 64 | const loading = ref(false) | |
| 65 | const chartOption = {} | |
| 66 | const queryParams = reactive({ | |
| c3134f | 67 | startTime: getYMD(new Date().getTime() - 3600 * 1000 * 24 * 30), |
| D | 68 | endTime: getYMD(new Date()), |
| 5cc1d9 | 69 | groupType: 'day', |
| D | 70 | index: '' |
| 71 | }) | |
| 72 | ||
| 73 | ||
| 74 | const queryChart = async () => { | |
| 75 | ||
| 76 | this.loading = true | |
| 77 | this.$http.post(`/iailab-iems-coal-proddisp/analysis/index/chart`, queryParams).then(({data: res}) => { | |
| 78 | this.loading = false | |
| 79 | if (res.code !== 0) { | |
| 80 | return this.$message.error(res.msg) | |
| 81 | } | |
| 82 | let series = [] | |
| 83 | if (res.data.series) { | |
| 84 | res.data.series.forEach(function (item) { | |
| 85 | series.push( | |
| 86 | { | |
| 87 | name: item.name, | |
| 88 | data: item.data, | |
| 89 | type: 'line', | |
| 90 | smooth: false | |
| 91 | } | |
| 92 | ) | |
| 93 | }) | |
| 94 | } | |
| 95 | ||
| 96 | this.chartOption = { | |
| 97 | title: { | |
| 98 | text: res.data.valueName, | |
| 99 | textStyle: { | |
| 100 | fontSize: 14 | |
| 101 | } | |
| 102 | }, | |
| 103 | tooltip: { | |
| 104 | trigger: 'axis' | |
| 105 | }, | |
| 106 | grid: { | |
| 107 | top: '10%', | |
| 108 | right: '10%', | |
| 109 | bottom: '10%', | |
| 110 | left: '5%' | |
| 111 | }, | |
| 112 | legend: { | |
| 113 | type: 'scroll', | |
| 114 | data: res.data.legend | |
| 115 | }, | |
| 116 | toolbox: { | |
| 117 | show: true, | |
| 118 | top: 0, | |
| 119 | right: '10%', | |
| 120 | feature: { | |
| 121 | dataView: {readOnly: false}, | |
| 122 | magicType: {type: ['line', 'bar']}, | |
| 123 | saveAsImage: {} | |
| 124 | } | |
| 125 | }, | |
| 126 | xAxis: { | |
| 127 | type: 'category', | |
| 128 | data: res.data.categories | |
| 129 | }, | |
| 130 | yAxis: { | |
| 131 | type: 'value', | |
| 132 | //name: res.data.valueName, | |
| 133 | nameTextStyle: { | |
| 134 | fontWeight: 'bold' | |
| 135 | }, | |
| 136 | axisLine: { | |
| 137 | show: true | |
| 138 | } | |
| 139 | }, | |
| 140 | series: series | |
| 141 | } | |
| 142 | ||
| 143 | }).catch(() => { | |
| 144 | this.loading = false | |
| 145 | }) | |
| 146 | } | |
| 147 | /** 初始化 **/ | |
| 148 | onMounted(async () => { | |
| 149 | await queryChart() | |
| 150 | }) | |
| 151 | </script> | |
