| | |
| | | <!-- <el-switch v-model="isShowTable" class="mb-2" active-text="数据表" inactive-text="统计图" /> --> |
| | | </el-col> |
| | | <el-col :span="20" style='text-align: right;'> |
| | | <el-date-picker :max-range="3" :clearable="false" value-format="YYYY-MM-DD" |
| | | <el-date-picker :max-range="3" :clearable="true" value-format="YYYY-MM-DD" |
| | | style="width: 250px" v-model="time" type="daterange" range-separator="-" |
| | | start-placeholder="" end-placeholder="" :disabled-date="disabledDate" |
| | | @calendar-change="change" /> |
| | |
| | | treeChecked() { |
| | | this.query() |
| | | }, |
| | | time() { |
| | | time(val) { |
| | | if (!val?.[0]) return |
| | | this.query() |
| | | }, |
| | | timeRange(val) { |
| | |
| | | activeList: [0, 1, 2, 3, 4, 5, 6, 7, 8], |
| | | timeRange: '', |
| | | treeChecked: [], |
| | | timeStart: moment().format('YYYY-MM-DD'), |
| | | timeStart: '', |
| | | time: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')], |
| | | disabledDate: Date => { |
| | | if (!this.timeStart) return false |
| | | let max = moment(this.timeStart, 'YYYY-MM-DD').add(3, 'd').format('YYYY-MM-DD') |
| | | let min = moment(this.timeStart, 'YYYY-MM-DD').subtract(3, 'd').format('YYYY-MM-DD') |
| | | return !moment(Date).isBetween(min, max); |
| | |
| | | }).then(res => { |
| | | if (res.code === 200) { |
| | | if (item.name !== 'DeviceStatus') { |
| | | this.tableData = res.data.records |
| | | this.tableData = res.data.records.map(v => { |
| | | return { |
| | | ...v, |
| | | } |
| | | }) |
| | | } else { |
| | | this.tableData = res.data.records.map(item => { |
| | | return { |
| | | ...item, |
| | | value: this.legend.find(v => v.code === item.value)?.name |
| | | } |
| | | }) |
| | | } |
| | | this.tableData = res.data.records.map(item => { |
| | | return { |
| | | ...item, |
| | | value: this.legend.find(v => v.code === item.value)?.name |
| | | } |
| | | }) |
| | | |
| | | this.drawer = true |
| | | } |
| | | }) |
| | |
| | | }) |
| | | }, |
| | | setLineOptions(data, myname) { |
| | | console.log(data, myname) |
| | | let xAxis = data.map(item => { |
| | | if (!data) return |
| | | // console.log(data, myname) |
| | | let xAxis = data?.map(item => { |
| | | return item.time |
| | | }) |
| | | let yAxisData = data.map(item => { |
| | | let yAxisData = data?.map(item => { |
| | | return item.value |
| | | }) |
| | | let dayCharts = { |
| | |
| | | dayCharts: {} |
| | | }) |
| | | } else { |
| | | console.log(myname, '>>>>>>???????????>>>>>>', yAxisData) |
| | | let index = this.list.findIndex(item => item.name === myname) |
| | | this.list[index] = Object.assign({ |
| | | ...this.list[index], |
| | |
| | | stack: 'total', |
| | | barWidth: '20px', |
| | | data: [current / total], |
| | | label: { |
| | | // label: { |
| | | // show: true, |
| | | // position: 'insideLeft', |
| | | // color: '#FFF', |
| | | // formatter: params => { |
| | | // if (i == 0 || current === 0) return '' |
| | | // return `${name}:开始时间${moment(data.data[i - 1].time).format('HH:mm')}-${moment(item.time).format('HH:mm')}` |
| | | // } |
| | | // }, |
| | | // itemStyle: { |
| | | // // color, // 这一行固定的颜色值需要删除或注释 |
| | | // borderColor: '#FFF', |
| | | // borderWidth: 1 |
| | | // }, |
| | | tooltip: { |
| | | show: true, |
| | | position: 'insideLeft', |
| | | color: '#FFF', |
| | | formatter: params => { |
| | | trigger: 'item', |
| | | position: 'top', |
| | | triggerOn: 'click', |
| | | formatter: (value, ticket) => { |
| | | // console.log('----------1111') |
| | | // let add = Math.abs(moment(this.timeRange.startTime).diff(moment(this.timeRange.endTime))) * value |
| | | // let current = moment(this.timeRange.startTime).add(add, 'ms') |
| | | // console.log('--11111111------------', current) |
| | | // return current.format('HH:mm') |
| | | // return value |
| | | if (i == 0 || current === 0) return '' |
| | | return `${name}:开始时间${moment(data.data[i - 1].time).format('HH:mm')}-${moment(item.time).format('HH:mm')}` |
| | | } |
| | | }, |
| | | itemStyle: { |
| | | // color, // 这一行固定的颜色值需要删除或注释 |
| | | borderColor: '#FFF', |
| | | borderWidth: 1 |
| | | }, |
| | | } |
| | | }) |
| | | let dayCharts = { |
| | | // tooltip: { |
| | | // position: ['50%', '50%'], |
| | | // formatter: (value, ticket) => { |
| | | // console.log('>>>>>>>>>>>>____________', value, ticket) |
| | | // let add = Math.abs(moment(this.timeRange.startTime).diff(moment(this.timeRange.endTime))) * value |
| | | // let current = moment(this.timeRange.startTime).add(add, 'ms') |
| | | // return current.format('HH:mm') |
| | | // } |
| | | // }, |
| | | legend: [ |
| | | ], |
| | | tooltip: { |
| | | position: ['50%', '50%'], |
| | | // formatter: (value, ticket) => { |
| | | // // console.log('>>>>>>>>>>>>____________', value, ticket) |
| | | // let add = Math.abs(moment(this.timeRange.startTime).diff(moment(this.timeRange.endTime))) * value |
| | | // let current = moment(this.timeRange.startTime).add(add, 'ms') |
| | | // return current.format('HH:mm') |
| | | // } |
| | | }, |
| | | title: { |
| | | text: '', |
| | | subtext: '', |
| | |
| | | }, |
| | | }, |
| | | } |
| | | console.log(dayCharts, '>>>>>>>???') |
| | | let index = this.list.findIndex(item => item.name === myname) |
| | | this.list[index] = Object.assign({ |
| | | ...this.list[index], |
| | |
| | | }, |
| | | change(e) { |
| | | this.timeStart = e[0] || moment().format('YYYY-MM-DD') |
| | | if (e[1]) this.timeStart = '' |
| | | } |
| | | }, |
| | | } |