| 提交 | 用户 | 时间 | ||
| 850106 | 1 | <template> |
| H | 2 | <el-dialog |
| 3 | title="调整值" | |
| 4 | :close-on-click-modal="false" | |
| 5 | :width="dialogWidth" | |
| 6 | :visible.sync="visible"> | |
| 7 | <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> | |
| 8 | <el-form-item> | |
| 9 | <el-date-picker | |
| 10 | v-model="dataForm.startTime" | |
| 11 | type="datetime" | |
| 12 | value-format="yyyy-MM-dd HH:mm:ss" | |
| 13 | placeholder="选择日期时间"> | |
| 14 | </el-date-picker> | |
| 15 | </el-form-item> | |
| 16 | <el-form-item> | |
| 17 | <el-date-picker | |
| 18 | v-model="dataForm.endTime" | |
| 19 | type="datetime" | |
| 20 | value-format="yyyy-MM-dd HH:mm:ss" | |
| 21 | placeholder="选择日期时间"> | |
| 22 | </el-date-picker> | |
| 23 | </el-form-item> | |
| 24 | <el-form-item> | |
| 25 | <el-button @click="getDataList()">查询</el-button> | |
| 26 | </el-form-item> | |
| 27 | </el-form> | |
| 28 | <div id="chartDom" class="result-chart"></div> | |
| 29 | </el-dialog> | |
| 30 | </template> | |
| 31 | ||
| 32 | <script> | |
| 33 | import Vue from 'vue' | |
| 34 | ||
| 35 | export default { | |
| 36 | data () { | |
| 37 | return { | |
| 38 | dialogWidth: 0, | |
| 39 | pointtypeList: [], | |
| 40 | pointtypeMap: {}, | |
| 41 | minfreqList: [], | |
| 42 | minfreqMap: {}, | |
| 43 | storetypeList: [], | |
| 44 | storetypeMap: {}, | |
| 45 | datatypeList: [], | |
| 46 | datatypeMap: {}, | |
| 47 | sourceList: [], | |
| 48 | sourceMap: {}, | |
| 49 | expressionList: [], | |
| 50 | pointList: [], | |
| 51 | pointMap: {}, | |
| 52 | pointCodeMap: {}, | |
| 53 | operatorList: ['+', '-'], | |
| 54 | visible: false, | |
| 55 | roleList: [], | |
| 56 | dataForm: { | |
| 57 | adjustuserid: '', | |
| 58 | startTime: '', | |
| 59 | endTime: '' | |
| 60 | }, | |
| 61 | pointsValue: [] | |
| 62 | } | |
| 63 | }, | |
| 64 | created () { | |
| 65 | this.setDialogWidth() | |
| 66 | }, | |
| 67 | mounted () { | |
| 68 | window.onresize = () => { | |
| 69 | return (() => { | |
| 70 | this.setDialogWidth() | |
| 71 | })() | |
| 72 | } | |
| 73 | }, | |
| 74 | methods: { | |
| 75 | setDialogWidth () { | |
| 76 | let val = document.body.clientWidth | |
| 77 | const def = 1300 // 默认宽度 | |
| 78 | if (val < def) { | |
| 79 | this.dialogWidth = '70%' | |
| 80 | } else { | |
| 81 | this.dialogWidth = '50%' | |
| 82 | } | |
| 83 | }, | |
| 84 | init (id) { | |
| 85 | this.dataForm.adjustuserid = id | |
| 86 | this.dataForm.startTime = '' | |
| 87 | this.dataForm.endTime = '' | |
| 88 | this.getDataList() | |
| 89 | }, | |
| 90 | getDataList () { | |
| 91 | this.visible = true | |
| 92 | if (this.dataForm.adjustuserid) { | |
| 93 | this.$http({ | |
| 94 | url: `/iailab-ntt-model/mcs/schedule-scheme-detailes/list`, | |
| 95 | method: 'get', | |
| 96 | params: { | |
| 97 | 'adjustuserid': this.dataForm.adjustuserid, | |
| 98 | 'startTime': this.dataForm.startTime, | |
| 99 | 'endTime': this.dataForm.endTime | |
| 100 | } | |
| 101 | }).then(({data}) => { | |
| 102 | if (data && data.code === 0) { | |
| 103 | let dataList = [] | |
| 104 | data.data.forEach(function (value) { | |
| 105 | dataList.push([value['scheduletime'], value['value']]) | |
| 106 | }) | |
| 107 | let charName = this.dataForm.pointname | |
| 108 | let myChart = this.$echarts.init(document.getElementById('chartDom')) | |
| 109 | let option = { | |
| 110 | title: { | |
| 111 | text: charName, | |
| 112 | left: '1%' | |
| 113 | }, | |
| 114 | tooltip: { | |
| 115 | trigger: 'axis' | |
| 116 | }, | |
| 117 | grid: { | |
| 118 | left: '5%', | |
| 119 | right: '5%', | |
| 120 | bottom: '10%' | |
| 121 | }, | |
| 122 | toolbox: { | |
| 123 | right: 10 | |
| 124 | }, | |
| 125 | xAxis: { | |
| 126 | type: 'time', | |
| 127 | splitLine: { | |
| 128 | show: false | |
| 129 | } | |
| 130 | }, | |
| 131 | yAxis: { | |
| 132 | type: 'value', | |
| 133 | axisTick: { | |
| 134 | inside: true | |
| 135 | }, | |
| 136 | splitLine: { | |
| 137 | show: false | |
| 138 | }, | |
| 139 | axisLabel: { | |
| 140 | inside: true, | |
| 141 | formatter: '{value}\n' | |
| 142 | }, | |
| 143 | z: 10 | |
| 144 | }, | |
| 145 | dataZoom: [ { | |
| 146 | type: 'inside' | |
| 147 | }], | |
| 148 | visualMap: { | |
| 149 | top: 50, | |
| 150 | right: 10, | |
| 151 | pieces: [{ | |
| 152 | gt: 0, | |
| 153 | lte: 50, | |
| 154 | color: '#93CE07' | |
| 155 | }, { | |
| 156 | gt: 50, | |
| 157 | lte: 100, | |
| 158 | color: '#FBDB0F' | |
| 159 | }, { | |
| 160 | gt: 100, | |
| 161 | lte: 150, | |
| 162 | color: '#FC7D02' | |
| 163 | }, { | |
| 164 | gt: 150, | |
| 165 | lte: 200, | |
| 166 | color: '#FD0100' | |
| 167 | }, { | |
| 168 | gt: 200, | |
| 169 | lte: 300, | |
| 170 | color: '#AA069F' | |
| 171 | }, { | |
| 172 | gt: 300, | |
| 173 | color: '#AC3B2A' | |
| 174 | }], | |
| 175 | outOfRange: { | |
| 176 | color: '#999' | |
| 177 | } | |
| 178 | }, | |
| 179 | series: [ | |
| 180 | { | |
| 181 | name: '调整值', | |
| 182 | type: 'line', | |
| 183 | data: dataList | |
| 184 | } | |
| 185 | ] | |
| 186 | } | |
| 187 | myChart.setOption(option) | |
| 188 | } | |
| 189 | }) | |
| 190 | } | |
| 191 | }, | |
| 192 | resetFields (obj) { | |
| 193 | for (let key in obj) { | |
| 194 | if (key === 'pointtypename') { | |
| 195 | continue | |
| 196 | } | |
| 197 | if (obj[key] instanceof Array) { | |
| 198 | obj[key] = [] | |
| 199 | } else if (obj[key] instanceof Object) { | |
| 200 | this.resetFields(obj[key]) | |
| 201 | } else { | |
| 202 | obj[key] = '' | |
| 203 | } | |
| 204 | } | |
| 205 | }, | |
| 206 | setDefaultFields (id, pointtypename) { | |
| 207 | this.dataForm.id = id || 0 | |
| 208 | this.dataForm.pointtypename = pointtypename || '' | |
| 209 | this.expressionList = [{ | |
| 210 | point: '', | |
| 211 | operator: '' | |
| 212 | }] | |
| 213 | } | |
| 214 | } | |
| 215 | } | |
| 216 | </script> | |
| 217 | <style> | |
| 218 | .el-select { | |
| 219 | width:100% | |
| 220 | } | |
| 221 | .result-chart { | |
| 222 | height: 500px; | |
| 223 | } | |
| 224 | </style> | |
| 225 | ||
