From 379ab2ceed662c2e38b7ad134189bdd4c6116ba1 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Mon, 05 Feb 2024 11:07:18 +0800 Subject: [PATCH] fix:bug修复 --- src/views/onlineRate/detailBox.vue | 144 +++++++++++++++++++++++++++++++++++------------ 1 files changed, 107 insertions(+), 37 deletions(-) diff --git a/src/views/onlineRate/detailBox.vue b/src/views/onlineRate/detailBox.vue index 608c90c..27e06ea 100644 --- a/src/views/onlineRate/detailBox.vue +++ b/src/views/onlineRate/detailBox.vue @@ -35,6 +35,7 @@ value-format="yyyy-MM-dd HH:mm" :default-date="[macDate.startTime, macDate.endTime]" :picker-options="pickerOptions" + align="right" @change="changeDay" /> </el-form-item> @@ -43,7 +44,7 @@ <div> <div class="tit"> <p style="font-size:16px"> - {{ macOnlineDetailData.code }}% + ���<span class="greenClor">{{ sum }}</span>{{ time }}��������� <span class="greenClor">{{ macOnlineDetailData.pieChart2 }}</span>{{ time }}������������<span :class=" onlineRate<90 ?'redClor':'greenClor'">{{ onlineRate.toFixed(2) }}%</span> </p> <div id="myPieChart" /> </div> @@ -98,7 +99,12 @@ label="������������" align="center" label-class-name="itemSpan" - /> + > + <template slot-scope="scope"> + <span v-if="scope.row.mun!=='-'">{{ scope.row.mun }}{{ time }}</span> + <span v-else>-</span> + </template> + </el-table-column> </el-table> </div> </div> @@ -117,6 +123,7 @@ data () { return { title: '������', + sum: '', formInline: {}, macOnlineDetailData: {}, time: '������', @@ -132,6 +139,42 @@ // ������ pickerOptions: { + shortcuts: [{ + text: '������', + onClick (picker) { + const end = dayjs() + const start = new Date(dayjs().startOf('day')) + picker.$emit('pick', [new Date(start), new Date(end)]) + } + }, { + text: '���1���', + onClick (picker) { + const end = dayjs() + const start = dayjs().subtract(1, 'day') + picker.$emit('pick', [new Date(start), new Date(end)]) + } + }, { + text: '���3���', + onClick (picker) { + const end = dayjs() + const start = dayjs().subtract(3, 'day') + picker.$emit('pick', [new Date(start), new Date(end)]) + } + }, { + text: '���5���', + onClick (picker) { + const end = dayjs() + const start = dayjs().subtract(5, 'day') + picker.$emit('pick', [new Date(start), new Date(end)]) + } + }, { + text: '���7���', + onClick (picker) { + const end = dayjs() + const start = dayjs().subtract(7, 'day') + picker.$emit('pick', [new Date(start), new Date(end)]) + } + }], onPick: ({ maxDate, minDate }) => { // ��������������������������������������������������� this.choiceDate = minDate.getTime() @@ -161,12 +204,19 @@ } } }, + computed: { + onlineRate () { + return (this.macOnlineDetailData.pieChart2 / this.sum) * 100 || 0 + } + }, watch: { time (newValue, oldValue) { if (newValue === '���') { this.type = 'day' + this.lineType = 'day' } else if (newValue === '������') { this.type = 'hour' + this.lineType = 'hour' } else if (newValue === '������') { this.type = 'minute' } @@ -174,8 +224,8 @@ }, mounted () { this.title = `${this.macDate.name}������` - this.startTime = this.macDate.startTime - this.endTime = this.macDate.endTime + this.startTime = dayjs(this.macDate.startTime).format('YYYY-MM-DD HH:mm') + this.endTime = dayjs(this.macDate.endTime).format('YYYY-MM-DD HH:mm') this.$set(this.selectTime, 0, new Date(this.macDate.startTime)) this.$set(this.selectTime, 1, new Date(this.macDate.endTime)) this.getLineData() @@ -195,28 +245,43 @@ this.startTime = !this.selectTime ? '' : dayjs(this.selectTime[0]).format('YYYY-MM-DD HH:mm') this.endTime = !this.selectTime ? '' : dayjs(this.selectTime[1]).format('YYYY-MM-DD HH:mm') this.getMacDetail() - if (this.type !== 'minute') { - this.getLineData() + if (this.type === 'minute') { + this.lineType = 'hour' + this.getLineData(this.startTime, this.endTime, 'hour') + } else { + this.lineType = this.type + this.getLineData(this.startTime, this.endTime, this.type) } }, initPieChart (pieChartData) { + let that = this + let percent = null let labelData = { - show: false, - } - if (pieChartData[0] > 0) { - labelData = { - show: true, - position: 'left', - normal: { - formatter: function (params) { - console.log('params22', params) - let onlineType = params.dataIndex === 0 ? '������' : '������' - return `${onlineType}: ${params.value}` - }, - fontSize: 14, // ������������������ - fontStyle: 'italic', // ������������������ + show: true, + position: 'right', + alignTo: 'edge', + margin: 0, + normal: { + formatter: function (params) { + percent = params.percent + let onlineType = params.dataIndex === 0 ? '������' : '������' + return `${onlineType}{a|${params.value}}${that.time}:{b|${params.percent}%}` }, - } + fontSize: 14, // ������������������ + fontStyle: 'italic', // ������������������ + rich: { // ���rich������������������������������������ + a: { + fontSize: 14, + fontStyle: 'italic', + color: '#67c23a' + }, + b: { + fontSize: 14, + fontStyle: 'italic', + color: percent !== 0 ? '#67c23a' : 'red' + }, + } + }, } let dom = document.getElementById('myPieChart') let myChart = echarts.init(dom) @@ -237,29 +302,32 @@ series: [ { radius: 30, - center: ['30%', '50%'], + center: ['50%', '50%'], type: 'pie', data: pieChartData, label: labelData, + labelLayout: { + hideOverlap: false + } }, ], }, true) }, initChart (myChart, option, dom) { myChart.setOption(option) - if (this.lineType === 'hour') { - myChart.on('click', (params) => { - console.log(params) + myChart.on('click', (params) => { + if (this.lineType === 'hour') { this.lineType = 'minute' echarts.dispose(dom) var myChart = echarts.init(dom) let starTiem = params.data[0] - console.log('starTiem', dayjs(starTiem).format('YYYY.MM.DD HH:mm:ss')) - let endTiem = dayjs(starTiem).add(1, 'hour') + let data = dayjs(starTiem).add(1, 'hour') + let endTiem = dayjs(data).isAfter(dayjs()) ? dayjs() : data + console.log('.isAfter(now)', dayjs(endTiem).isAfter(dayjs())) this.getLineData(dayjs(starTiem).format('YYYY-MM-DD HH:mm:ss'), dayjs(endTiem).format('YYYY-MM-DD HH:mm:ss'), 'minute') myChart.setOption(option, true) - }) - } + } + }) }, renderBack () { this.lineType = 'hour' @@ -278,13 +346,10 @@ }, getOption (xData, sData) { let option = null - let minTime = xData[0] - let maxTime = xData[xData.length] let interval = 3600 * 1000 if (this.type === 'minute') { interval = 60 * 1000 } - console.log(minTime, maxTime) option = { grid: { left: '40px', // ��������������� @@ -306,9 +371,8 @@ tooltip: { trigger: 'item', formatter: function (params) { - console.log(params) var value = params.data[0] - let tip = params.value === 1 ? '������: ' + value : '������: ' + value + let tip = params.value[1] === 1 ? '������: ' + value : '������: ' + value return tip }, }, @@ -339,7 +403,7 @@ height: 20, // ������������������������ type: 'slider', // type������������������������������������������slider������������������������������������inside��������������������������������������� xAxisIndex: 0, // ���������x���������������������x��������������������� - filterMode: 'filter', // ���������������������������,'filter'���������������������������������������������������������������������������'weakFilter'��������������������������������������������������������������������������� + filterMode: 'weakFilter', // ���������������������������,'filter'���������������������������������������������������������������������������'weakFilter'��������������������������������������������������������������������������� start: 0, // ��������������������������������� end: 100, // ��������������������������������� }, @@ -379,7 +443,6 @@ this.sData = data.map((item, index) => { return [ this.xData[index], item ] }) - console.log(this.sData) this.$nextTick(() => { this.renderLine() }) @@ -401,6 +464,7 @@ }) .then(res => { this.macOnlineDetailData = res.data + this.sum = res.data.sum this.tableData = res.data.tabulation let pieChartData = [this.macOnlineDetailData.pieChart1, this.macOnlineDetailData.pieChart2] this.initPieChart(pieChartData) @@ -436,7 +500,7 @@ } #myPieChart { height: 120px; - width: 400px!important; + width: 600px!important; canvas { width: 100%!important; } @@ -459,4 +523,10 @@ top: -40px; } } +.redClor{ + color: red; +} +.greenClor{ + color:#67c23a; +} </style> -- Gitblit v1.8.0