| 提交 | 用户 | 时间 | ||
| 850106 | 1 | <template> |
| H | 2 | <el-drawer |
| 3 | direction="rtl" | |
| 4 | :visible.sync="visible" | |
| 5 | @close="handleClose" | |
| 6 | :title="title" | |
| 7 | size="50%"> | |
| 8 | <div style="padding: 0px 16px;width: 100%;height: 100%"> | |
| 9 | <el-divider content-position="left">设备日使用时长</el-divider> | |
| 10 | <div> | |
| 11 | <el-form :inline="true" :model="dataForm1" ref="dataForm1" @keyup.enter.native="getChartData(chart1)"> | |
| 12 | <el-form-item prop="startTime"> | |
| 13 | <el-date-picker | |
| 14 | v-model="dataForm1.startTime" | |
| 15 | type="datetime" | |
| 16 | placeholder="选择开始时间" | |
| 17 | value-format="yyyy-MM-dd HH:mm:ss" | |
| 18 | > | |
| 19 | </el-date-picker> | |
| 20 | </el-form-item> | |
| 21 | <el-form-item prop="endTime"> | |
| 22 | <el-date-picker | |
| 23 | v-model="dataForm1.endTime" | |
| 24 | type="datetime" | |
| 25 | placeholder="选择结束时间" | |
| 26 | value-format="yyyy-MM-dd HH:mm:ss" | |
| 27 | > | |
| 28 | </el-date-picker> | |
| 29 | </el-form-item> | |
| 30 | <el-form-item> | |
| 31 | <el-button @click="getChartData(chart1)">{{ $t('query') }}</el-button> | |
| 32 | </el-form-item> | |
| 33 | </el-form> | |
| 34 | </div> | |
| 35 | <div class="chart"> | |
| 36 | <div ref="chart1" class="chart-line"></div> | |
| 37 | </div> | |
| 38 | <el-divider content-position="left">设备损耗明细</el-divider> | |
| 39 | <div> | |
| 40 | <el-form :inline="true" :model="dataForm" ref="dataForm" @keyup.enter.native="getDataList()"> | |
| 41 | <el-form-item prop="startTime"> | |
| 42 | <el-date-picker | |
| 43 | v-model="dataForm.startTime" | |
| 44 | type="datetime" | |
| 45 | placeholder="选择开始时间" | |
| 46 | value-format="yyyy-MM-dd HH:mm:ss" | |
| 47 | > | |
| 48 | </el-date-picker> | |
| 49 | </el-form-item> | |
| 50 | <el-form-item prop="endTime"> | |
| 51 | <el-date-picker | |
| 52 | v-model="dataForm.endTime" | |
| 53 | type="datetime" | |
| 54 | placeholder="选择结束时间" | |
| 55 | value-format="yyyy-MM-dd HH:mm:ss" | |
| 56 | > | |
| 57 | </el-date-picker> | |
| 58 | </el-form-item> | |
| 59 | <el-form-item> | |
| 60 | <el-button @click="getDataList()">{{ $t('query') }}</el-button> | |
| 61 | </el-form-item> | |
| 62 | </el-form> | |
| 63 | </div> | |
| 64 | <div class="chart"> | |
| 65 | <el-table v-loading="dataListLoading" :data="dataList" border | |
| 66 | row-key="id" | |
| 67 | style="width: 100%;"> | |
| 68 | <!--<el-table-column prop="devName" label="设备名称" header-align="center" align="center" width="120"></el-table-column>--> | |
| 69 | <el-table-column prop="date" label="评价时间" header-align="center" align="center" width="180"></el-table-column> | |
| 70 | <el-table-column prop="durableTime" label="设备计划使用年限" header-align="center" align="center" width="140" :formatter="minuteToYear"></el-table-column> | |
| 71 | <el-table-column prop="runTime" label="本次运行时长" header-align="center" align="center" width="120" :formatter="(row, column, cellValue, index) => unitFormat(row, column, cellValue, index,'分钟')"></el-table-column> | |
| 72 | <el-table-column prop="lossRate" label="损耗系数" header-align="center" align="center" width="80"></el-table-column> | |
| 73 | <el-table-column prop="lossTime" label="本次损耗时长" header-align="center" align="center" width="120" :formatter="(row, column, cellValue, index) => unitFormat(row, column, cellValue, index,'分钟')"></el-table-column> | |
| 74 | <el-table-column prop="residueTime" label="设备剩余时长" header-align="center" align="center" width="140" :formatter="minuteToYear"></el-table-column> | |
| 75 | <el-table-column prop="newnessRate" label="设备新度系数" header-align="center" align="center" width="auto" :formatter="newnessRateFormat"></el-table-column> | |
| 76 | </el-table> | |
| 77 | <el-pagination | |
| 78 | :current-page="page" | |
| 79 | :page-size=10 | |
| 80 | :total="total" | |
| 81 | layout="total, prev, pager, next, jumper" | |
| 82 | @size-change="pageSizeChangeHandle" | |
| 83 | @current-change="pageCurrentChangeHandle"> | |
| 84 | </el-pagination> | |
| 85 | </div> | |
| 86 | </div> | |
| 87 | </el-drawer> | |
| 88 | </template> | |
| 89 | <script> | |
| 90 | import echarts from "echarts"; | |
| 91 | import mixinViewModule from '@/mixins/view-module' | |
| 92 | ||
| 93 | export default { | |
| 94 | mixins: [mixinViewModule], | |
| 95 | data() { | |
| 96 | return { | |
| 97 | visible: false, | |
| 98 | dataListLoading: true, | |
| 99 | dataForm1: { | |
| 100 | no: '0', | |
| 101 | startTime: new Date(new Date().getTime() - 30*24*60*60*1000).Format('yyyy-MM-dd hh:mm:ss'), | |
| 102 | endTime: "", | |
| 103 | }, | |
| 104 | dataForm: { | |
| 105 | no: '0', | |
| 106 | startTime: "", | |
| 107 | endTime: "", | |
| 108 | }, | |
| 109 | chart1:{}, | |
| 110 | mixinViewModuleOptions: { | |
| 111 | getDataListURL: '/iailab-ntt-model/device/newness/page', | |
| 112 | getDataListIsPage: true, | |
| 113 | createdIsNeed: false | |
| 114 | }, | |
| 115 | title: '设备趋势' | |
| 116 | } | |
| 117 | }, | |
| 118 | methods: { | |
| 119 | init() { | |
| 120 | this.visible = true | |
| 121 | this.getDataList() | |
| 122 | this.$nextTick(() => { | |
| 123 | this.chart1 = this.$echarts.init(this.$refs.chart1) | |
| 124 | this.getChartData(this.chart1) | |
| 125 | }) | |
| 126 | }, | |
| 127 | handleClose() { | |
| 128 | this.$refs['dataForm1'].resetFields() | |
| 129 | this.$refs['dataForm'].resetFields() | |
| 130 | dataListLoading = true | |
| 131 | }, | |
| 132 | getChartData(chart) { | |
| 133 | this.$http.post(`/iailab-ntt-model/device/device-health-state/getDeviceRunTimeHistory`, this.dataForm1).then(({data: res}) => { | |
| 134 | if (res.code !== 0) { | |
| 135 | return this.$message.error(res.msg) | |
| 136 | } | |
| 137 | ||
| 138 | let seriesData = [] | |
| 139 | if (res.data && res.data.length > 0) { | |
| 140 | seriesData.push( | |
| 141 | { | |
| 142 | name: res.data[0].devName, | |
| 143 | type: 'line', | |
| 144 | smooth: true, | |
| 145 | showSymbol: false, | |
| 146 | connectNulls: true, | |
| 147 | data: res.data.map(e => { | |
| 148 | return [e.date,e.runTime] | |
| 149 | }), | |
| 150 | itemStyle: { | |
| 151 | borderColor: "#fff", | |
| 152 | borderWidth: 1, | |
| 153 | color:'#40f19d', | |
| 154 | }, | |
| 155 | lineStyle: { | |
| 156 | normal: { | |
| 157 | // shadowBlur: 8, | |
| 158 | // shadowOffsetY: 10, | |
| 159 | // shadowOffsetX: 0, | |
| 160 | }, | |
| 161 | }, | |
| 162 | } | |
| 163 | ) | |
| 164 | } | |
| 165 | // 随机生成x,y数据 E | |
| 166 | let option = { | |
| 167 | tooltip: { | |
| 168 | trigger: 'axis', | |
| 169 | backgroundColor: 'rgba(13, 64, 71, 0.50)', | |
| 170 | borderColor: 'rgba(143, 225, 252, 0.60)', | |
| 171 | padding: 8, | |
| 172 | textStyle: { | |
| 173 | color: '#fff', | |
| 174 | } | |
| 175 | }, | |
| 176 | legend: { | |
| 177 | icon: 'rect', | |
| 178 | itemWidth: 14, | |
| 179 | itemHeight: 14, | |
| 180 | right: 15, | |
| 181 | textStyle: { | |
| 182 | fontSize: 14, | |
| 183 | color: '#000' | |
| 184 | } | |
| 185 | }, | |
| 186 | grid: { | |
| 187 | left: '5%', | |
| 188 | right: '4%', | |
| 189 | bottom: '3%', | |
| 190 | top: '10%', | |
| 191 | containLabel: true | |
| 192 | }, | |
| 193 | xAxis: { | |
| 194 | type: 'time', | |
| 195 | axisLine: { // 轴线设置 | |
| 196 | show: true, // 显示轴线 | |
| 197 | // symbol:['none', 'arrow'] | |
| 198 | }, | |
| 199 | axisLabel: { | |
| 200 | textStyle: { | |
| 201 | color: '#000', //更改坐标轴文字颜色 | |
| 202 | fontSize: 12 //更改坐标轴文字大小 | |
| 203 | }, | |
| 204 | formatter: '{MM}/{dd}', | |
| 205 | hideOverlap: true | |
| 206 | } | |
| 207 | }, | |
| 208 | yAxis: { | |
| 209 | name: '时长（分钟）', | |
| 210 | splitLine: { | |
| 211 | show: true, | |
| 212 | lineStyle: { | |
| 213 | color: 'rgba(115,122,133,0.35)', | |
| 214 | type: 'dashed' | |
| 215 | }, | |
| 216 | }, | |
| 217 | axisLabel: { | |
| 218 | textStyle: { | |
| 219 | color: '#000', //更改坐标轴文字颜色 | |
| 220 | fontSize: 12 //更改坐标轴文字大小 | |
| 221 | } | |
| 222 | }, | |
| 223 | axisLine: { | |
| 224 | show:true, | |
| 225 | // symbol:['none', 'arrow'] | |
| 226 | } | |
| 227 | }, | |
| 228 | series: seriesData | |
| 229 | }; | |
| 230 | chart.clear(); | |
| 231 | option && chart.setOption(option); | |
| 232 | }).catch(() => { | |
| 233 | ||
| 234 | }) | |
| 235 | }, | |
| 236 | newnessRateFormat(row, column, cellValue, index) { | |
| 237 | if (cellValue){ | |
| 238 | return Math.floor(Number(cellValue*100) * 100) / 100 + '%' | |
| 239 | }else { | |
| 240 | return '100%' | |
| 241 | } | |
| 242 | }, | |
| 243 | minuteToYear(row, column, cellValue, index) { | |
| 244 | if (cellValue){ | |
| 245 | if (cellValue % (365*24*60) === 0){ | |
| 246 | return Number(cellValue / (365*24*60) ).toFixed(0) + '年' | |
| 247 | } | |
| 248 | return Math.floor(Number(cellValue / (365*24*60)) * 10) / 10 + '年' | |
| 249 | }else { | |
| 250 | return '-' | |
| 251 | } | |
| 252 | }, | |
| 253 | unitFormat(row, column, cellValue, index, unit) { | |
| 254 | if (cellValue){ | |
| 255 | return cellValue + unit; | |
| 256 | }else { | |
| 257 | return '-' | |
| 258 | } | |
| 259 | } | |
| 260 | } | |
| 261 | ||
| 262 | } | |
| 263 | </script> | |
| 264 | ||
| 265 | <style scoped> | |
| 266 | .chart { | |
| 267 | width: 100%; | |
| 268 | height: 40%; | |
| 269 | margin-bottom: 24px; | |
| 270 | } | |
| 271 | ||
| 272 | .chart-line { | |
| 273 | width: 100%; | |
| 274 | height: 100%; | |
| 275 | } | |
| 276 | </style> | |
