diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt new file mode 100644 index 0000000..05019a7 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt @@ -0,0 +1,46 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.BarChart +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun BarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + xAxis.labelRotationAngle = -45f //X轴标签斜45度 + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt new file mode 100644 index 0000000..05019a7 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt @@ -0,0 +1,46 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.BarChart +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun BarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + xAxis.labelRotationAngle = -45f //X轴标签斜45度 + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt new file mode 100644 index 0000000..0d7d5e9 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt @@ -0,0 +1,45 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.HorizontalBarChart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun HorizontalBarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt new file mode 100644 index 0000000..05019a7 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt @@ -0,0 +1,46 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.BarChart +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun BarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + xAxis.labelRotationAngle = -45f //X轴标签斜45度 + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt new file mode 100644 index 0000000..0d7d5e9 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt @@ -0,0 +1,45 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.HorizontalBarChart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun HorizontalBarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt new file mode 100644 index 0000000..a81954b --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt @@ -0,0 +1,48 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.app.multilib.utils.SizeUtil + +fun LineChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.textSize = 10f + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt new file mode 100644 index 0000000..05019a7 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt @@ -0,0 +1,46 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.BarChart +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun BarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + xAxis.labelRotationAngle = -45f //X轴标签斜45度 + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt new file mode 100644 index 0000000..0d7d5e9 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt @@ -0,0 +1,45 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.HorizontalBarChart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun HorizontalBarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt new file mode 100644 index 0000000..a81954b --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt @@ -0,0 +1,48 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.app.multilib.utils.SizeUtil + +fun LineChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.textSize = 10f + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt new file mode 100644 index 0000000..e9dce2c --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt @@ -0,0 +1,39 @@ +package com.casic.app.smartwell.sanxi.extensions + +import android.graphics.Color +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.components.Legend +import com.pengxh.app.multilib.utils.SizeUtil + +fun PieChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setUsePercentValues(false) //百分比数字显示 + this.description.isEnabled = false + this.dragDecelerationFrictionCoef = 0.95f //图表转动阻力摩擦系数[0,1] + this.setBackgroundColor(Color.WHITE) //设置图表背景色 + this.rotationAngle = 0f + this.isRotationEnabled = false + this.isHighlightPerTapEnabled = true + this.animateY(1200, Easing.EaseInOutQuad) // 设置图表展示动画效果 + this.setDrawEntryLabels(false) //不显示分类标签 + this.isDrawHoleEnabled = false //圆环显示 + this.setDrawCenterText(false) //圆环中心文字 + this.setEntryLabelColor(R.color.mainThemeColor.convertColor(context)) //图表文本字体颜色 + this.setEntryLabelTextSize(12f) + //设置图表上下左右的偏移，类似于外边距，可以控制饼图大小 + this.setExtraOffsets(7.5f, 2.5f, 7.5f, 2.5f) + //设置图例位置 + val legend = this.legend + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + legend.orientation = Legend.LegendOrientation.HORIZONTAL + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt new file mode 100644 index 0000000..05019a7 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt @@ -0,0 +1,46 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.BarChart +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun BarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + xAxis.labelRotationAngle = -45f //X轴标签斜45度 + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt new file mode 100644 index 0000000..0d7d5e9 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt @@ -0,0 +1,45 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.HorizontalBarChart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun HorizontalBarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt new file mode 100644 index 0000000..a81954b --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt @@ -0,0 +1,48 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.app.multilib.utils.SizeUtil + +fun LineChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.textSize = 10f + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt new file mode 100644 index 0000000..e9dce2c --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt @@ -0,0 +1,39 @@ +package com.casic.app.smartwell.sanxi.extensions + +import android.graphics.Color +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.components.Legend +import com.pengxh.app.multilib.utils.SizeUtil + +fun PieChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setUsePercentValues(false) //百分比数字显示 + this.description.isEnabled = false + this.dragDecelerationFrictionCoef = 0.95f //图表转动阻力摩擦系数[0,1] + this.setBackgroundColor(Color.WHITE) //设置图表背景色 + this.rotationAngle = 0f + this.isRotationEnabled = false + this.isHighlightPerTapEnabled = true + this.animateY(1200, Easing.EaseInOutQuad) // 设置图表展示动画效果 + this.setDrawEntryLabels(false) //不显示分类标签 + this.isDrawHoleEnabled = false //圆环显示 + this.setDrawCenterText(false) //圆环中心文字 + this.setEntryLabelColor(R.color.mainThemeColor.convertColor(context)) //图表文本字体颜色 + this.setEntryLabelTextSize(12f) + //设置图表上下左右的偏移，类似于外边距，可以控制饼图大小 + this.setExtraOffsets(7.5f, 2.5f, 7.5f, 2.5f) + //设置图例位置 + val legend = this.legend + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + legend.orientation = Legend.LegendOrientation.HORIZONTAL + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt index d137800..17dd212 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt @@ -20,6 +20,7 @@ import com.casic.app.smartwell.sanxi.extensions.toDeptName import com.casic.app.smartwell.sanxi.extensions.toTypeName import com.casic.app.smartwell.sanxi.model.WellListModel +import com.casic.app.smartwell.sanxi.utils.ChartViewHelper import com.casic.app.smartwell.sanxi.utils.Constant import com.casic.app.smartwell.sanxi.vm.AlarmViewModel import com.casic.app.smartwell.sanxi.vm.DeviceViewModel @@ -27,10 +28,14 @@ import com.casic.app.smartwell.sanxi.vm.WorkOrderViewModel import com.casic.app.smartwell.sanxi.widgets.EasyPopupWindow import com.casic.app.smartwell.sanxi.widgets.GaoDeClusterMarkerView +import com.github.mikephil.charting.data.PieEntry import com.google.android.material.bottomsheet.BottomSheetBehavior import com.pengxh.app.multilib.utils.SizeUtil import com.pengxh.app.multilib.widget.dialog.AlertControlDialog import kotlinx.android.synthetic.main.fragment_home.view.* +import kotlinx.android.synthetic.main.include_home_data_overview.view.* +import kotlinx.android.synthetic.main.include_home_device_chart.* +import kotlinx.android.synthetic.main.include_home_well_chart.* class HomePageFragment : Fragment(), AMap.OnMapLoadedListener, AMap.OnCameraChangeListener, AMap.OnMarkerClickListener, AMap.InfoWindowAdapter, AMap.OnInfoWindowClickListener { @@ -137,8 +142,7 @@ //计算所有点的中心点位置 val centerLatLng = LatLng(latitudeList.average(), longitudeList.average()) Log.d( - kTag, - "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" + kTag, "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" ) //移动到指定经纬度 val cameraPosition = CameraPosition(centerLatLng, 13f, 0f, 0f) @@ -154,12 +158,24 @@ wellViewModel.countWellByState() wellViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.wellTotalView.text = it["total"] + + //绑定well饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["bfWell"].toString().toFloat(), "布防")) + pieEntries.add(PieEntry(it["cfWell"].toString().toFloat(), "撤防")) + ChartViewHelper.setPieChartData(wellPieChart, pieEntries) }) //获取设备总数数据 deviceViewModel.countDeviceByState() deviceViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.deviceTotalView.text = it["total"] + + //绑定设备在线饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["online"].toString().toFloat(), "在线")) + pieEntries.add(PieEntry(it["offline"].toString().toFloat(), "离线")) + ChartViewHelper.setPieChartData(devicePieChart, pieEntries) }) //获取当前报警数据 diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt new file mode 100644 index 0000000..05019a7 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt @@ -0,0 +1,46 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.BarChart +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun BarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + xAxis.labelRotationAngle = -45f //X轴标签斜45度 + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt new file mode 100644 index 0000000..0d7d5e9 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt @@ -0,0 +1,45 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.HorizontalBarChart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun HorizontalBarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt new file mode 100644 index 0000000..a81954b --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt @@ -0,0 +1,48 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.app.multilib.utils.SizeUtil + +fun LineChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.textSize = 10f + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt new file mode 100644 index 0000000..e9dce2c --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt @@ -0,0 +1,39 @@ +package com.casic.app.smartwell.sanxi.extensions + +import android.graphics.Color +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.components.Legend +import com.pengxh.app.multilib.utils.SizeUtil + +fun PieChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setUsePercentValues(false) //百分比数字显示 + this.description.isEnabled = false + this.dragDecelerationFrictionCoef = 0.95f //图表转动阻力摩擦系数[0,1] + this.setBackgroundColor(Color.WHITE) //设置图表背景色 + this.rotationAngle = 0f + this.isRotationEnabled = false + this.isHighlightPerTapEnabled = true + this.animateY(1200, Easing.EaseInOutQuad) // 设置图表展示动画效果 + this.setDrawEntryLabels(false) //不显示分类标签 + this.isDrawHoleEnabled = false //圆环显示 + this.setDrawCenterText(false) //圆环中心文字 + this.setEntryLabelColor(R.color.mainThemeColor.convertColor(context)) //图表文本字体颜色 + this.setEntryLabelTextSize(12f) + //设置图表上下左右的偏移，类似于外边距，可以控制饼图大小 + this.setExtraOffsets(7.5f, 2.5f, 7.5f, 2.5f) + //设置图例位置 + val legend = this.legend + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + legend.orientation = Legend.LegendOrientation.HORIZONTAL + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt index d137800..17dd212 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt @@ -20,6 +20,7 @@ import com.casic.app.smartwell.sanxi.extensions.toDeptName import com.casic.app.smartwell.sanxi.extensions.toTypeName import com.casic.app.smartwell.sanxi.model.WellListModel +import com.casic.app.smartwell.sanxi.utils.ChartViewHelper import com.casic.app.smartwell.sanxi.utils.Constant import com.casic.app.smartwell.sanxi.vm.AlarmViewModel import com.casic.app.smartwell.sanxi.vm.DeviceViewModel @@ -27,10 +28,14 @@ import com.casic.app.smartwell.sanxi.vm.WorkOrderViewModel import com.casic.app.smartwell.sanxi.widgets.EasyPopupWindow import com.casic.app.smartwell.sanxi.widgets.GaoDeClusterMarkerView +import com.github.mikephil.charting.data.PieEntry import com.google.android.material.bottomsheet.BottomSheetBehavior import com.pengxh.app.multilib.utils.SizeUtil import com.pengxh.app.multilib.widget.dialog.AlertControlDialog import kotlinx.android.synthetic.main.fragment_home.view.* +import kotlinx.android.synthetic.main.include_home_data_overview.view.* +import kotlinx.android.synthetic.main.include_home_device_chart.* +import kotlinx.android.synthetic.main.include_home_well_chart.* class HomePageFragment : Fragment(), AMap.OnMapLoadedListener, AMap.OnCameraChangeListener, AMap.OnMarkerClickListener, AMap.InfoWindowAdapter, AMap.OnInfoWindowClickListener { @@ -137,8 +142,7 @@ //计算所有点的中心点位置 val centerLatLng = LatLng(latitudeList.average(), longitudeList.average()) Log.d( - kTag, - "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" + kTag, "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" ) //移动到指定经纬度 val cameraPosition = CameraPosition(centerLatLng, 13f, 0f, 0f) @@ -154,12 +158,24 @@ wellViewModel.countWellByState() wellViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.wellTotalView.text = it["total"] + + //绑定well饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["bfWell"].toString().toFloat(), "布防")) + pieEntries.add(PieEntry(it["cfWell"].toString().toFloat(), "撤防")) + ChartViewHelper.setPieChartData(wellPieChart, pieEntries) }) //获取设备总数数据 deviceViewModel.countDeviceByState() deviceViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.deviceTotalView.text = it["total"] + + //绑定设备在线饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["online"].toString().toFloat(), "在线")) + pieEntries.add(PieEntry(it["offline"].toString().toFloat(), "离线")) + ChartViewHelper.setPieChartData(devicePieChart, pieEntries) }) //获取当前报警数据 diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt new file mode 100644 index 0000000..a011b12 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt @@ -0,0 +1,172 @@ +package com.casic.app.smartwell.sanxi.utils + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.casic.app.smartwell.sanxi.extensions.convertColor +import com.casic.app.smartwell.sanxi.extensions.init +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.data.PieData +import com.github.mikephil.charting.data.PieDataSet +import com.github.mikephil.charting.data.PieEntry + + +/** + * @author a203 + * @description 各种图初始化配置类 + * @date 2022/2/15 16:24 + * @email 290677893@qq.com + */ +object ChartViewHelper { + /** + * 饼图 + * */ + fun setPieChartData(chart: PieChart, entries: List) { + val context = BaseApplication.obtainInstance() + //每次加载数据都初始化饼图 + chart.init() + //绑定数据 + val dataSet = PieDataSet(entries, "") + dataSet.sliceSpace = 1.5f //设置饼状块之间的间隙 + dataSet.selectionShift = 5f //设置饼状块被选中时突出的距离 + //设置饼图块颜色 + val colors: MutableList = ArrayList() + for (i in entries.indices) { + colors.add(Constant.COLORS[i].convertColor(context)) + } + dataSet.colors = colors + //设置标签显示在饼图块外面 + dataSet.xValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.yValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.valueLineColor = R.color.mainThemeColor.convertColor(context) + dataSet.valueLinePart1Length = 0.75f //标签指示线前半截长度 + dataSet.valueLinePart2Length = 0.75f //标签指示线后半截长度 + val data = PieData(dataSet) + data.setValueTextSize(12f) + data.setValueTextColor(R.color.mainThemeColor.convertColor(context)) //数据值颜色 + chart.data = data + chart.highlightValues(null) + chart.invalidate() + } + + + /** + * 折线图 + * */ +// fun setLineChartData( +// chart: LineChart, +// xAxisDate: MutableList, +// entryModels: List +// ) { +// //每次加载数据都初始化折线图 +// chart.init() +// //绑定数据 +// val lineDataSets: MutableList = ArrayList() +// val entrySize = entryModels[0].entryList!!.size +// entryModels.forEachIndexed { index, it -> +// //设置数据 +// val dataSet = if (entrySize == 1) { +// LineDataSet(it.entryList, it.entryList?.get(0)?.data.toString()) +// } else { +// LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) +// } +// dataSet.setDrawCircles(true) +// //线条颜色 +// dataSet.color = it.lineColor +// //圆点颜色 +// dataSet.setCircleColor(it.lineColor) +// dataSet.setDrawFilled(true) +// dataSet.fillColor = it.lineColor +// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER +// lineDataSets.add(dataSet) +// } +// val lineData = LineData(lineDataSets) +// lineData.setDrawValues(false) +// //添加自定义Marker +// val markerView = LineChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisDate(xAxisDate) +// chart.marker = markerView +// //设置X轴坐标 +// val xAxis = chart.xAxis +// xAxis.valueFormatter = if (entrySize == 1) { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[0] +// } +// } +// } else { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[value.toInt()] +// } +// } +// } +// chart.data = lineData +// chart.invalidate() +// } + + /** + * 竖直柱状图 + * */ +// fun setBarChartData( +// chart: BarChart, +// xAxisLabel: MutableList, +// entries: List, +// dateType: String +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_1.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType(dateType) +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } + + /** + * 横向柱状图 + * */ +// fun setBarChartData( +// chart: HorizontalBarChart, +// xAxisLabel: MutableList, +// entries: List +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_6.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType("") +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } +} \ No newline at end of file diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt new file mode 100644 index 0000000..05019a7 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt @@ -0,0 +1,46 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.BarChart +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun BarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + xAxis.labelRotationAngle = -45f //X轴标签斜45度 + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt new file mode 100644 index 0000000..0d7d5e9 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt @@ -0,0 +1,45 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.HorizontalBarChart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun HorizontalBarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt new file mode 100644 index 0000000..a81954b --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt @@ -0,0 +1,48 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.app.multilib.utils.SizeUtil + +fun LineChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.textSize = 10f + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt new file mode 100644 index 0000000..e9dce2c --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt @@ -0,0 +1,39 @@ +package com.casic.app.smartwell.sanxi.extensions + +import android.graphics.Color +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.components.Legend +import com.pengxh.app.multilib.utils.SizeUtil + +fun PieChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setUsePercentValues(false) //百分比数字显示 + this.description.isEnabled = false + this.dragDecelerationFrictionCoef = 0.95f //图表转动阻力摩擦系数[0,1] + this.setBackgroundColor(Color.WHITE) //设置图表背景色 + this.rotationAngle = 0f + this.isRotationEnabled = false + this.isHighlightPerTapEnabled = true + this.animateY(1200, Easing.EaseInOutQuad) // 设置图表展示动画效果 + this.setDrawEntryLabels(false) //不显示分类标签 + this.isDrawHoleEnabled = false //圆环显示 + this.setDrawCenterText(false) //圆环中心文字 + this.setEntryLabelColor(R.color.mainThemeColor.convertColor(context)) //图表文本字体颜色 + this.setEntryLabelTextSize(12f) + //设置图表上下左右的偏移，类似于外边距，可以控制饼图大小 + this.setExtraOffsets(7.5f, 2.5f, 7.5f, 2.5f) + //设置图例位置 + val legend = this.legend + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + legend.orientation = Legend.LegendOrientation.HORIZONTAL + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt index d137800..17dd212 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt @@ -20,6 +20,7 @@ import com.casic.app.smartwell.sanxi.extensions.toDeptName import com.casic.app.smartwell.sanxi.extensions.toTypeName import com.casic.app.smartwell.sanxi.model.WellListModel +import com.casic.app.smartwell.sanxi.utils.ChartViewHelper import com.casic.app.smartwell.sanxi.utils.Constant import com.casic.app.smartwell.sanxi.vm.AlarmViewModel import com.casic.app.smartwell.sanxi.vm.DeviceViewModel @@ -27,10 +28,14 @@ import com.casic.app.smartwell.sanxi.vm.WorkOrderViewModel import com.casic.app.smartwell.sanxi.widgets.EasyPopupWindow import com.casic.app.smartwell.sanxi.widgets.GaoDeClusterMarkerView +import com.github.mikephil.charting.data.PieEntry import com.google.android.material.bottomsheet.BottomSheetBehavior import com.pengxh.app.multilib.utils.SizeUtil import com.pengxh.app.multilib.widget.dialog.AlertControlDialog import kotlinx.android.synthetic.main.fragment_home.view.* +import kotlinx.android.synthetic.main.include_home_data_overview.view.* +import kotlinx.android.synthetic.main.include_home_device_chart.* +import kotlinx.android.synthetic.main.include_home_well_chart.* class HomePageFragment : Fragment(), AMap.OnMapLoadedListener, AMap.OnCameraChangeListener, AMap.OnMarkerClickListener, AMap.InfoWindowAdapter, AMap.OnInfoWindowClickListener { @@ -137,8 +142,7 @@ //计算所有点的中心点位置 val centerLatLng = LatLng(latitudeList.average(), longitudeList.average()) Log.d( - kTag, - "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" + kTag, "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" ) //移动到指定经纬度 val cameraPosition = CameraPosition(centerLatLng, 13f, 0f, 0f) @@ -154,12 +158,24 @@ wellViewModel.countWellByState() wellViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.wellTotalView.text = it["total"] + + //绑定well饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["bfWell"].toString().toFloat(), "布防")) + pieEntries.add(PieEntry(it["cfWell"].toString().toFloat(), "撤防")) + ChartViewHelper.setPieChartData(wellPieChart, pieEntries) }) //获取设备总数数据 deviceViewModel.countDeviceByState() deviceViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.deviceTotalView.text = it["total"] + + //绑定设备在线饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["online"].toString().toFloat(), "在线")) + pieEntries.add(PieEntry(it["offline"].toString().toFloat(), "离线")) + ChartViewHelper.setPieChartData(devicePieChart, pieEntries) }) //获取当前报警数据 diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt new file mode 100644 index 0000000..a011b12 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt @@ -0,0 +1,172 @@ +package com.casic.app.smartwell.sanxi.utils + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.casic.app.smartwell.sanxi.extensions.convertColor +import com.casic.app.smartwell.sanxi.extensions.init +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.data.PieData +import com.github.mikephil.charting.data.PieDataSet +import com.github.mikephil.charting.data.PieEntry + + +/** + * @author a203 + * @description 各种图初始化配置类 + * @date 2022/2/15 16:24 + * @email 290677893@qq.com + */ +object ChartViewHelper { + /** + * 饼图 + * */ + fun setPieChartData(chart: PieChart, entries: List) { + val context = BaseApplication.obtainInstance() + //每次加载数据都初始化饼图 + chart.init() + //绑定数据 + val dataSet = PieDataSet(entries, "") + dataSet.sliceSpace = 1.5f //设置饼状块之间的间隙 + dataSet.selectionShift = 5f //设置饼状块被选中时突出的距离 + //设置饼图块颜色 + val colors: MutableList = ArrayList() + for (i in entries.indices) { + colors.add(Constant.COLORS[i].convertColor(context)) + } + dataSet.colors = colors + //设置标签显示在饼图块外面 + dataSet.xValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.yValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.valueLineColor = R.color.mainThemeColor.convertColor(context) + dataSet.valueLinePart1Length = 0.75f //标签指示线前半截长度 + dataSet.valueLinePart2Length = 0.75f //标签指示线后半截长度 + val data = PieData(dataSet) + data.setValueTextSize(12f) + data.setValueTextColor(R.color.mainThemeColor.convertColor(context)) //数据值颜色 + chart.data = data + chart.highlightValues(null) + chart.invalidate() + } + + + /** + * 折线图 + * */ +// fun setLineChartData( +// chart: LineChart, +// xAxisDate: MutableList, +// entryModels: List +// ) { +// //每次加载数据都初始化折线图 +// chart.init() +// //绑定数据 +// val lineDataSets: MutableList = ArrayList() +// val entrySize = entryModels[0].entryList!!.size +// entryModels.forEachIndexed { index, it -> +// //设置数据 +// val dataSet = if (entrySize == 1) { +// LineDataSet(it.entryList, it.entryList?.get(0)?.data.toString()) +// } else { +// LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) +// } +// dataSet.setDrawCircles(true) +// //线条颜色 +// dataSet.color = it.lineColor +// //圆点颜色 +// dataSet.setCircleColor(it.lineColor) +// dataSet.setDrawFilled(true) +// dataSet.fillColor = it.lineColor +// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER +// lineDataSets.add(dataSet) +// } +// val lineData = LineData(lineDataSets) +// lineData.setDrawValues(false) +// //添加自定义Marker +// val markerView = LineChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisDate(xAxisDate) +// chart.marker = markerView +// //设置X轴坐标 +// val xAxis = chart.xAxis +// xAxis.valueFormatter = if (entrySize == 1) { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[0] +// } +// } +// } else { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[value.toInt()] +// } +// } +// } +// chart.data = lineData +// chart.invalidate() +// } + + /** + * 竖直柱状图 + * */ +// fun setBarChartData( +// chart: BarChart, +// xAxisLabel: MutableList, +// entries: List, +// dateType: String +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_1.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType(dateType) +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } + + /** + * 横向柱状图 + * */ +// fun setBarChartData( +// chart: HorizontalBarChart, +// xAxisLabel: MutableList, +// entries: List +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_6.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType("") +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt index d57d378..a1b21c7 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt @@ -32,8 +32,10 @@ val POPUP_IMAGES = arrayOf(R.drawable.ic_menu_map, R.drawable.ic_satellite) val POPUP_TITLES = arrayOf("标准地图", "卫星地图") - // val HOME_ICONS = arrayOf(R.drawable.ic_well, R.drawable.ic_overtime, R.drawable.ic_bfcf) - val HOME_ITEMS = arrayOf("闸井管理", "超时工单", "布防撤防") - val SUB_PAGE_TITLES = arrayOf("待处理", "待确认", "处理中", "已完成") - val OVER_TIME_PAGE_TITLES = arrayOf("超时未接单", "超时未处理") + //预置颜色 + val COLORS = arrayOf( + R.color.color_1, R.color.color_2, R.color.color_3, + R.color.color_4, R.color.color_5, R.color.color_6, + R.color.color_7, R.color.color_8, R.color.color_9 + ) } \ No newline at end of file diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt new file mode 100644 index 0000000..05019a7 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt @@ -0,0 +1,46 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.BarChart +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun BarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + xAxis.labelRotationAngle = -45f //X轴标签斜45度 + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt new file mode 100644 index 0000000..0d7d5e9 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt @@ -0,0 +1,45 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.HorizontalBarChart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun HorizontalBarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt new file mode 100644 index 0000000..a81954b --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt @@ -0,0 +1,48 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.app.multilib.utils.SizeUtil + +fun LineChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.textSize = 10f + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt new file mode 100644 index 0000000..e9dce2c --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt @@ -0,0 +1,39 @@ +package com.casic.app.smartwell.sanxi.extensions + +import android.graphics.Color +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.components.Legend +import com.pengxh.app.multilib.utils.SizeUtil + +fun PieChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setUsePercentValues(false) //百分比数字显示 + this.description.isEnabled = false + this.dragDecelerationFrictionCoef = 0.95f //图表转动阻力摩擦系数[0,1] + this.setBackgroundColor(Color.WHITE) //设置图表背景色 + this.rotationAngle = 0f + this.isRotationEnabled = false + this.isHighlightPerTapEnabled = true + this.animateY(1200, Easing.EaseInOutQuad) // 设置图表展示动画效果 + this.setDrawEntryLabels(false) //不显示分类标签 + this.isDrawHoleEnabled = false //圆环显示 + this.setDrawCenterText(false) //圆环中心文字 + this.setEntryLabelColor(R.color.mainThemeColor.convertColor(context)) //图表文本字体颜色 + this.setEntryLabelTextSize(12f) + //设置图表上下左右的偏移，类似于外边距，可以控制饼图大小 + this.setExtraOffsets(7.5f, 2.5f, 7.5f, 2.5f) + //设置图例位置 + val legend = this.legend + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + legend.orientation = Legend.LegendOrientation.HORIZONTAL + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt index d137800..17dd212 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt @@ -20,6 +20,7 @@ import com.casic.app.smartwell.sanxi.extensions.toDeptName import com.casic.app.smartwell.sanxi.extensions.toTypeName import com.casic.app.smartwell.sanxi.model.WellListModel +import com.casic.app.smartwell.sanxi.utils.ChartViewHelper import com.casic.app.smartwell.sanxi.utils.Constant import com.casic.app.smartwell.sanxi.vm.AlarmViewModel import com.casic.app.smartwell.sanxi.vm.DeviceViewModel @@ -27,10 +28,14 @@ import com.casic.app.smartwell.sanxi.vm.WorkOrderViewModel import com.casic.app.smartwell.sanxi.widgets.EasyPopupWindow import com.casic.app.smartwell.sanxi.widgets.GaoDeClusterMarkerView +import com.github.mikephil.charting.data.PieEntry import com.google.android.material.bottomsheet.BottomSheetBehavior import com.pengxh.app.multilib.utils.SizeUtil import com.pengxh.app.multilib.widget.dialog.AlertControlDialog import kotlinx.android.synthetic.main.fragment_home.view.* +import kotlinx.android.synthetic.main.include_home_data_overview.view.* +import kotlinx.android.synthetic.main.include_home_device_chart.* +import kotlinx.android.synthetic.main.include_home_well_chart.* class HomePageFragment : Fragment(), AMap.OnMapLoadedListener, AMap.OnCameraChangeListener, AMap.OnMarkerClickListener, AMap.InfoWindowAdapter, AMap.OnInfoWindowClickListener { @@ -137,8 +142,7 @@ //计算所有点的中心点位置 val centerLatLng = LatLng(latitudeList.average(), longitudeList.average()) Log.d( - kTag, - "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" + kTag, "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" ) //移动到指定经纬度 val cameraPosition = CameraPosition(centerLatLng, 13f, 0f, 0f) @@ -154,12 +158,24 @@ wellViewModel.countWellByState() wellViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.wellTotalView.text = it["total"] + + //绑定well饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["bfWell"].toString().toFloat(), "布防")) + pieEntries.add(PieEntry(it["cfWell"].toString().toFloat(), "撤防")) + ChartViewHelper.setPieChartData(wellPieChart, pieEntries) }) //获取设备总数数据 deviceViewModel.countDeviceByState() deviceViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.deviceTotalView.text = it["total"] + + //绑定设备在线饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["online"].toString().toFloat(), "在线")) + pieEntries.add(PieEntry(it["offline"].toString().toFloat(), "离线")) + ChartViewHelper.setPieChartData(devicePieChart, pieEntries) }) //获取当前报警数据 diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt new file mode 100644 index 0000000..a011b12 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt @@ -0,0 +1,172 @@ +package com.casic.app.smartwell.sanxi.utils + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.casic.app.smartwell.sanxi.extensions.convertColor +import com.casic.app.smartwell.sanxi.extensions.init +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.data.PieData +import com.github.mikephil.charting.data.PieDataSet +import com.github.mikephil.charting.data.PieEntry + + +/** + * @author a203 + * @description 各种图初始化配置类 + * @date 2022/2/15 16:24 + * @email 290677893@qq.com + */ +object ChartViewHelper { + /** + * 饼图 + * */ + fun setPieChartData(chart: PieChart, entries: List) { + val context = BaseApplication.obtainInstance() + //每次加载数据都初始化饼图 + chart.init() + //绑定数据 + val dataSet = PieDataSet(entries, "") + dataSet.sliceSpace = 1.5f //设置饼状块之间的间隙 + dataSet.selectionShift = 5f //设置饼状块被选中时突出的距离 + //设置饼图块颜色 + val colors: MutableList = ArrayList() + for (i in entries.indices) { + colors.add(Constant.COLORS[i].convertColor(context)) + } + dataSet.colors = colors + //设置标签显示在饼图块外面 + dataSet.xValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.yValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.valueLineColor = R.color.mainThemeColor.convertColor(context) + dataSet.valueLinePart1Length = 0.75f //标签指示线前半截长度 + dataSet.valueLinePart2Length = 0.75f //标签指示线后半截长度 + val data = PieData(dataSet) + data.setValueTextSize(12f) + data.setValueTextColor(R.color.mainThemeColor.convertColor(context)) //数据值颜色 + chart.data = data + chart.highlightValues(null) + chart.invalidate() + } + + + /** + * 折线图 + * */ +// fun setLineChartData( +// chart: LineChart, +// xAxisDate: MutableList, +// entryModels: List +// ) { +// //每次加载数据都初始化折线图 +// chart.init() +// //绑定数据 +// val lineDataSets: MutableList = ArrayList() +// val entrySize = entryModels[0].entryList!!.size +// entryModels.forEachIndexed { index, it -> +// //设置数据 +// val dataSet = if (entrySize == 1) { +// LineDataSet(it.entryList, it.entryList?.get(0)?.data.toString()) +// } else { +// LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) +// } +// dataSet.setDrawCircles(true) +// //线条颜色 +// dataSet.color = it.lineColor +// //圆点颜色 +// dataSet.setCircleColor(it.lineColor) +// dataSet.setDrawFilled(true) +// dataSet.fillColor = it.lineColor +// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER +// lineDataSets.add(dataSet) +// } +// val lineData = LineData(lineDataSets) +// lineData.setDrawValues(false) +// //添加自定义Marker +// val markerView = LineChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisDate(xAxisDate) +// chart.marker = markerView +// //设置X轴坐标 +// val xAxis = chart.xAxis +// xAxis.valueFormatter = if (entrySize == 1) { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[0] +// } +// } +// } else { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[value.toInt()] +// } +// } +// } +// chart.data = lineData +// chart.invalidate() +// } + + /** + * 竖直柱状图 + * */ +// fun setBarChartData( +// chart: BarChart, +// xAxisLabel: MutableList, +// entries: List, +// dateType: String +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_1.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType(dateType) +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } + + /** + * 横向柱状图 + * */ +// fun setBarChartData( +// chart: HorizontalBarChart, +// xAxisLabel: MutableList, +// entries: List +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_6.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType("") +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt index d57d378..a1b21c7 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt @@ -32,8 +32,10 @@ val POPUP_IMAGES = arrayOf(R.drawable.ic_menu_map, R.drawable.ic_satellite) val POPUP_TITLES = arrayOf("标准地图", "卫星地图") - // val HOME_ICONS = arrayOf(R.drawable.ic_well, R.drawable.ic_overtime, R.drawable.ic_bfcf) - val HOME_ITEMS = arrayOf("闸井管理", "超时工单", "布防撤防") - val SUB_PAGE_TITLES = arrayOf("待处理", "待确认", "处理中", "已完成") - val OVER_TIME_PAGE_TITLES = arrayOf("超时未接单", "超时未处理") + //预置颜色 + val COLORS = arrayOf( + R.color.color_1, R.color.color_2, R.color.color_3, + R.color.color_4, R.color.color_5, R.color.color_6, + R.color.color_7, R.color.color_8, R.color.color_9 + ) } \ No newline at end of file diff --git a/app/src/main/res/layout/fragment_home.xml b/app/src/main/res/layout/fragment_home.xml index 2fe5769..acd7eb7 100644 --- a/app/src/main/res/layout/fragment_home.xml +++ b/app/src/main/res/layout/fragment_home.xml @@ -60,107 +60,25 @@ android:background="@drawable/bottom_short_line" /> - - - - - + android:scrollbars="vertical"> + android:layout_height="wrap_content" + android:orientation="vertical"> - + - + - - + - - - - - - - - - - - - - - - - - - - - + - + \ No newline at end of file diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt new file mode 100644 index 0000000..05019a7 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt @@ -0,0 +1,46 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.BarChart +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun BarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + xAxis.labelRotationAngle = -45f //X轴标签斜45度 + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt new file mode 100644 index 0000000..0d7d5e9 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt @@ -0,0 +1,45 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.HorizontalBarChart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun HorizontalBarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt new file mode 100644 index 0000000..a81954b --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt @@ -0,0 +1,48 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.app.multilib.utils.SizeUtil + +fun LineChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.textSize = 10f + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt new file mode 100644 index 0000000..e9dce2c --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt @@ -0,0 +1,39 @@ +package com.casic.app.smartwell.sanxi.extensions + +import android.graphics.Color +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.components.Legend +import com.pengxh.app.multilib.utils.SizeUtil + +fun PieChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setUsePercentValues(false) //百分比数字显示 + this.description.isEnabled = false + this.dragDecelerationFrictionCoef = 0.95f //图表转动阻力摩擦系数[0,1] + this.setBackgroundColor(Color.WHITE) //设置图表背景色 + this.rotationAngle = 0f + this.isRotationEnabled = false + this.isHighlightPerTapEnabled = true + this.animateY(1200, Easing.EaseInOutQuad) // 设置图表展示动画效果 + this.setDrawEntryLabels(false) //不显示分类标签 + this.isDrawHoleEnabled = false //圆环显示 + this.setDrawCenterText(false) //圆环中心文字 + this.setEntryLabelColor(R.color.mainThemeColor.convertColor(context)) //图表文本字体颜色 + this.setEntryLabelTextSize(12f) + //设置图表上下左右的偏移，类似于外边距，可以控制饼图大小 + this.setExtraOffsets(7.5f, 2.5f, 7.5f, 2.5f) + //设置图例位置 + val legend = this.legend + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + legend.orientation = Legend.LegendOrientation.HORIZONTAL + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt index d137800..17dd212 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt @@ -20,6 +20,7 @@ import com.casic.app.smartwell.sanxi.extensions.toDeptName import com.casic.app.smartwell.sanxi.extensions.toTypeName import com.casic.app.smartwell.sanxi.model.WellListModel +import com.casic.app.smartwell.sanxi.utils.ChartViewHelper import com.casic.app.smartwell.sanxi.utils.Constant import com.casic.app.smartwell.sanxi.vm.AlarmViewModel import com.casic.app.smartwell.sanxi.vm.DeviceViewModel @@ -27,10 +28,14 @@ import com.casic.app.smartwell.sanxi.vm.WorkOrderViewModel import com.casic.app.smartwell.sanxi.widgets.EasyPopupWindow import com.casic.app.smartwell.sanxi.widgets.GaoDeClusterMarkerView +import com.github.mikephil.charting.data.PieEntry import com.google.android.material.bottomsheet.BottomSheetBehavior import com.pengxh.app.multilib.utils.SizeUtil import com.pengxh.app.multilib.widget.dialog.AlertControlDialog import kotlinx.android.synthetic.main.fragment_home.view.* +import kotlinx.android.synthetic.main.include_home_data_overview.view.* +import kotlinx.android.synthetic.main.include_home_device_chart.* +import kotlinx.android.synthetic.main.include_home_well_chart.* class HomePageFragment : Fragment(), AMap.OnMapLoadedListener, AMap.OnCameraChangeListener, AMap.OnMarkerClickListener, AMap.InfoWindowAdapter, AMap.OnInfoWindowClickListener { @@ -137,8 +142,7 @@ //计算所有点的中心点位置 val centerLatLng = LatLng(latitudeList.average(), longitudeList.average()) Log.d( - kTag, - "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" + kTag, "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" ) //移动到指定经纬度 val cameraPosition = CameraPosition(centerLatLng, 13f, 0f, 0f) @@ -154,12 +158,24 @@ wellViewModel.countWellByState() wellViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.wellTotalView.text = it["total"] + + //绑定well饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["bfWell"].toString().toFloat(), "布防")) + pieEntries.add(PieEntry(it["cfWell"].toString().toFloat(), "撤防")) + ChartViewHelper.setPieChartData(wellPieChart, pieEntries) }) //获取设备总数数据 deviceViewModel.countDeviceByState() deviceViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.deviceTotalView.text = it["total"] + + //绑定设备在线饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["online"].toString().toFloat(), "在线")) + pieEntries.add(PieEntry(it["offline"].toString().toFloat(), "离线")) + ChartViewHelper.setPieChartData(devicePieChart, pieEntries) }) //获取当前报警数据 diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt new file mode 100644 index 0000000..a011b12 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt @@ -0,0 +1,172 @@ +package com.casic.app.smartwell.sanxi.utils + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.casic.app.smartwell.sanxi.extensions.convertColor +import com.casic.app.smartwell.sanxi.extensions.init +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.data.PieData +import com.github.mikephil.charting.data.PieDataSet +import com.github.mikephil.charting.data.PieEntry + + +/** + * @author a203 + * @description 各种图初始化配置类 + * @date 2022/2/15 16:24 + * @email 290677893@qq.com + */ +object ChartViewHelper { + /** + * 饼图 + * */ + fun setPieChartData(chart: PieChart, entries: List) { + val context = BaseApplication.obtainInstance() + //每次加载数据都初始化饼图 + chart.init() + //绑定数据 + val dataSet = PieDataSet(entries, "") + dataSet.sliceSpace = 1.5f //设置饼状块之间的间隙 + dataSet.selectionShift = 5f //设置饼状块被选中时突出的距离 + //设置饼图块颜色 + val colors: MutableList = ArrayList() + for (i in entries.indices) { + colors.add(Constant.COLORS[i].convertColor(context)) + } + dataSet.colors = colors + //设置标签显示在饼图块外面 + dataSet.xValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.yValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.valueLineColor = R.color.mainThemeColor.convertColor(context) + dataSet.valueLinePart1Length = 0.75f //标签指示线前半截长度 + dataSet.valueLinePart2Length = 0.75f //标签指示线后半截长度 + val data = PieData(dataSet) + data.setValueTextSize(12f) + data.setValueTextColor(R.color.mainThemeColor.convertColor(context)) //数据值颜色 + chart.data = data + chart.highlightValues(null) + chart.invalidate() + } + + + /** + * 折线图 + * */ +// fun setLineChartData( +// chart: LineChart, +// xAxisDate: MutableList, +// entryModels: List +// ) { +// //每次加载数据都初始化折线图 +// chart.init() +// //绑定数据 +// val lineDataSets: MutableList = ArrayList() +// val entrySize = entryModels[0].entryList!!.size +// entryModels.forEachIndexed { index, it -> +// //设置数据 +// val dataSet = if (entrySize == 1) { +// LineDataSet(it.entryList, it.entryList?.get(0)?.data.toString()) +// } else { +// LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) +// } +// dataSet.setDrawCircles(true) +// //线条颜色 +// dataSet.color = it.lineColor +// //圆点颜色 +// dataSet.setCircleColor(it.lineColor) +// dataSet.setDrawFilled(true) +// dataSet.fillColor = it.lineColor +// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER +// lineDataSets.add(dataSet) +// } +// val lineData = LineData(lineDataSets) +// lineData.setDrawValues(false) +// //添加自定义Marker +// val markerView = LineChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisDate(xAxisDate) +// chart.marker = markerView +// //设置X轴坐标 +// val xAxis = chart.xAxis +// xAxis.valueFormatter = if (entrySize == 1) { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[0] +// } +// } +// } else { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[value.toInt()] +// } +// } +// } +// chart.data = lineData +// chart.invalidate() +// } + + /** + * 竖直柱状图 + * */ +// fun setBarChartData( +// chart: BarChart, +// xAxisLabel: MutableList, +// entries: List, +// dateType: String +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_1.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType(dateType) +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } + + /** + * 横向柱状图 + * */ +// fun setBarChartData( +// chart: HorizontalBarChart, +// xAxisLabel: MutableList, +// entries: List +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_6.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType("") +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt index d57d378..a1b21c7 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt @@ -32,8 +32,10 @@ val POPUP_IMAGES = arrayOf(R.drawable.ic_menu_map, R.drawable.ic_satellite) val POPUP_TITLES = arrayOf("标准地图", "卫星地图") - // val HOME_ICONS = arrayOf(R.drawable.ic_well, R.drawable.ic_overtime, R.drawable.ic_bfcf) - val HOME_ITEMS = arrayOf("闸井管理", "超时工单", "布防撤防") - val SUB_PAGE_TITLES = arrayOf("待处理", "待确认", "处理中", "已完成") - val OVER_TIME_PAGE_TITLES = arrayOf("超时未接单", "超时未处理") + //预置颜色 + val COLORS = arrayOf( + R.color.color_1, R.color.color_2, R.color.color_3, + R.color.color_4, R.color.color_5, R.color.color_6, + R.color.color_7, R.color.color_8, R.color.color_9 + ) } \ No newline at end of file diff --git a/app/src/main/res/layout/fragment_home.xml b/app/src/main/res/layout/fragment_home.xml index 2fe5769..acd7eb7 100644 --- a/app/src/main/res/layout/fragment_home.xml +++ b/app/src/main/res/layout/fragment_home.xml @@ -60,107 +60,25 @@ android:background="@drawable/bottom_short_line" /> - - - - - + android:scrollbars="vertical"> + android:layout_height="wrap_content" + android:orientation="vertical"> - + - + - - + - - - - - - - - - - - - - - - - - - - - + - + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_data_overview.xml b/app/src/main/res/layout/include_home_data_overview.xml new file mode 100644 index 0000000..ce21397 --- /dev/null +++ b/app/src/main/res/layout/include_home_data_overview.xml @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt new file mode 100644 index 0000000..05019a7 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt @@ -0,0 +1,46 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.BarChart +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun BarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + xAxis.labelRotationAngle = -45f //X轴标签斜45度 + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt new file mode 100644 index 0000000..0d7d5e9 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt @@ -0,0 +1,45 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.HorizontalBarChart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun HorizontalBarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt new file mode 100644 index 0000000..a81954b --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt @@ -0,0 +1,48 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.app.multilib.utils.SizeUtil + +fun LineChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.textSize = 10f + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt new file mode 100644 index 0000000..e9dce2c --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt @@ -0,0 +1,39 @@ +package com.casic.app.smartwell.sanxi.extensions + +import android.graphics.Color +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.components.Legend +import com.pengxh.app.multilib.utils.SizeUtil + +fun PieChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setUsePercentValues(false) //百分比数字显示 + this.description.isEnabled = false + this.dragDecelerationFrictionCoef = 0.95f //图表转动阻力摩擦系数[0,1] + this.setBackgroundColor(Color.WHITE) //设置图表背景色 + this.rotationAngle = 0f + this.isRotationEnabled = false + this.isHighlightPerTapEnabled = true + this.animateY(1200, Easing.EaseInOutQuad) // 设置图表展示动画效果 + this.setDrawEntryLabels(false) //不显示分类标签 + this.isDrawHoleEnabled = false //圆环显示 + this.setDrawCenterText(false) //圆环中心文字 + this.setEntryLabelColor(R.color.mainThemeColor.convertColor(context)) //图表文本字体颜色 + this.setEntryLabelTextSize(12f) + //设置图表上下左右的偏移，类似于外边距，可以控制饼图大小 + this.setExtraOffsets(7.5f, 2.5f, 7.5f, 2.5f) + //设置图例位置 + val legend = this.legend + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + legend.orientation = Legend.LegendOrientation.HORIZONTAL + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt index d137800..17dd212 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt @@ -20,6 +20,7 @@ import com.casic.app.smartwell.sanxi.extensions.toDeptName import com.casic.app.smartwell.sanxi.extensions.toTypeName import com.casic.app.smartwell.sanxi.model.WellListModel +import com.casic.app.smartwell.sanxi.utils.ChartViewHelper import com.casic.app.smartwell.sanxi.utils.Constant import com.casic.app.smartwell.sanxi.vm.AlarmViewModel import com.casic.app.smartwell.sanxi.vm.DeviceViewModel @@ -27,10 +28,14 @@ import com.casic.app.smartwell.sanxi.vm.WorkOrderViewModel import com.casic.app.smartwell.sanxi.widgets.EasyPopupWindow import com.casic.app.smartwell.sanxi.widgets.GaoDeClusterMarkerView +import com.github.mikephil.charting.data.PieEntry import com.google.android.material.bottomsheet.BottomSheetBehavior import com.pengxh.app.multilib.utils.SizeUtil import com.pengxh.app.multilib.widget.dialog.AlertControlDialog import kotlinx.android.synthetic.main.fragment_home.view.* +import kotlinx.android.synthetic.main.include_home_data_overview.view.* +import kotlinx.android.synthetic.main.include_home_device_chart.* +import kotlinx.android.synthetic.main.include_home_well_chart.* class HomePageFragment : Fragment(), AMap.OnMapLoadedListener, AMap.OnCameraChangeListener, AMap.OnMarkerClickListener, AMap.InfoWindowAdapter, AMap.OnInfoWindowClickListener { @@ -137,8 +142,7 @@ //计算所有点的中心点位置 val centerLatLng = LatLng(latitudeList.average(), longitudeList.average()) Log.d( - kTag, - "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" + kTag, "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" ) //移动到指定经纬度 val cameraPosition = CameraPosition(centerLatLng, 13f, 0f, 0f) @@ -154,12 +158,24 @@ wellViewModel.countWellByState() wellViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.wellTotalView.text = it["total"] + + //绑定well饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["bfWell"].toString().toFloat(), "布防")) + pieEntries.add(PieEntry(it["cfWell"].toString().toFloat(), "撤防")) + ChartViewHelper.setPieChartData(wellPieChart, pieEntries) }) //获取设备总数数据 deviceViewModel.countDeviceByState() deviceViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.deviceTotalView.text = it["total"] + + //绑定设备在线饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["online"].toString().toFloat(), "在线")) + pieEntries.add(PieEntry(it["offline"].toString().toFloat(), "离线")) + ChartViewHelper.setPieChartData(devicePieChart, pieEntries) }) //获取当前报警数据 diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt new file mode 100644 index 0000000..a011b12 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt @@ -0,0 +1,172 @@ +package com.casic.app.smartwell.sanxi.utils + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.casic.app.smartwell.sanxi.extensions.convertColor +import com.casic.app.smartwell.sanxi.extensions.init +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.data.PieData +import com.github.mikephil.charting.data.PieDataSet +import com.github.mikephil.charting.data.PieEntry + + +/** + * @author a203 + * @description 各种图初始化配置类 + * @date 2022/2/15 16:24 + * @email 290677893@qq.com + */ +object ChartViewHelper { + /** + * 饼图 + * */ + fun setPieChartData(chart: PieChart, entries: List) { + val context = BaseApplication.obtainInstance() + //每次加载数据都初始化饼图 + chart.init() + //绑定数据 + val dataSet = PieDataSet(entries, "") + dataSet.sliceSpace = 1.5f //设置饼状块之间的间隙 + dataSet.selectionShift = 5f //设置饼状块被选中时突出的距离 + //设置饼图块颜色 + val colors: MutableList = ArrayList() + for (i in entries.indices) { + colors.add(Constant.COLORS[i].convertColor(context)) + } + dataSet.colors = colors + //设置标签显示在饼图块外面 + dataSet.xValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.yValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.valueLineColor = R.color.mainThemeColor.convertColor(context) + dataSet.valueLinePart1Length = 0.75f //标签指示线前半截长度 + dataSet.valueLinePart2Length = 0.75f //标签指示线后半截长度 + val data = PieData(dataSet) + data.setValueTextSize(12f) + data.setValueTextColor(R.color.mainThemeColor.convertColor(context)) //数据值颜色 + chart.data = data + chart.highlightValues(null) + chart.invalidate() + } + + + /** + * 折线图 + * */ +// fun setLineChartData( +// chart: LineChart, +// xAxisDate: MutableList, +// entryModels: List +// ) { +// //每次加载数据都初始化折线图 +// chart.init() +// //绑定数据 +// val lineDataSets: MutableList = ArrayList() +// val entrySize = entryModels[0].entryList!!.size +// entryModels.forEachIndexed { index, it -> +// //设置数据 +// val dataSet = if (entrySize == 1) { +// LineDataSet(it.entryList, it.entryList?.get(0)?.data.toString()) +// } else { +// LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) +// } +// dataSet.setDrawCircles(true) +// //线条颜色 +// dataSet.color = it.lineColor +// //圆点颜色 +// dataSet.setCircleColor(it.lineColor) +// dataSet.setDrawFilled(true) +// dataSet.fillColor = it.lineColor +// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER +// lineDataSets.add(dataSet) +// } +// val lineData = LineData(lineDataSets) +// lineData.setDrawValues(false) +// //添加自定义Marker +// val markerView = LineChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisDate(xAxisDate) +// chart.marker = markerView +// //设置X轴坐标 +// val xAxis = chart.xAxis +// xAxis.valueFormatter = if (entrySize == 1) { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[0] +// } +// } +// } else { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[value.toInt()] +// } +// } +// } +// chart.data = lineData +// chart.invalidate() +// } + + /** + * 竖直柱状图 + * */ +// fun setBarChartData( +// chart: BarChart, +// xAxisLabel: MutableList, +// entries: List, +// dateType: String +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_1.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType(dateType) +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } + + /** + * 横向柱状图 + * */ +// fun setBarChartData( +// chart: HorizontalBarChart, +// xAxisLabel: MutableList, +// entries: List +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_6.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType("") +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt index d57d378..a1b21c7 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt @@ -32,8 +32,10 @@ val POPUP_IMAGES = arrayOf(R.drawable.ic_menu_map, R.drawable.ic_satellite) val POPUP_TITLES = arrayOf("标准地图", "卫星地图") - // val HOME_ICONS = arrayOf(R.drawable.ic_well, R.drawable.ic_overtime, R.drawable.ic_bfcf) - val HOME_ITEMS = arrayOf("闸井管理", "超时工单", "布防撤防") - val SUB_PAGE_TITLES = arrayOf("待处理", "待确认", "处理中", "已完成") - val OVER_TIME_PAGE_TITLES = arrayOf("超时未接单", "超时未处理") + //预置颜色 + val COLORS = arrayOf( + R.color.color_1, R.color.color_2, R.color.color_3, + R.color.color_4, R.color.color_5, R.color.color_6, + R.color.color_7, R.color.color_8, R.color.color_9 + ) } \ No newline at end of file diff --git a/app/src/main/res/layout/fragment_home.xml b/app/src/main/res/layout/fragment_home.xml index 2fe5769..acd7eb7 100644 --- a/app/src/main/res/layout/fragment_home.xml +++ b/app/src/main/res/layout/fragment_home.xml @@ -60,107 +60,25 @@ android:background="@drawable/bottom_short_line" /> - - - - - + android:scrollbars="vertical"> + android:layout_height="wrap_content" + android:orientation="vertical"> - + - + - - + - - - - - - - - - - - - - - - - - - - - + - + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_data_overview.xml b/app/src/main/res/layout/include_home_data_overview.xml new file mode 100644 index 0000000..ce21397 --- /dev/null +++ b/app/src/main/res/layout/include_home_data_overview.xml @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_device_chart.xml b/app/src/main/res/layout/include_home_device_chart.xml new file mode 100644 index 0000000..8e63453 --- /dev/null +++ b/app/src/main/res/layout/include_home_device_chart.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt new file mode 100644 index 0000000..05019a7 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt @@ -0,0 +1,46 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.BarChart +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun BarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + xAxis.labelRotationAngle = -45f //X轴标签斜45度 + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt new file mode 100644 index 0000000..0d7d5e9 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt @@ -0,0 +1,45 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.HorizontalBarChart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun HorizontalBarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt new file mode 100644 index 0000000..a81954b --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt @@ -0,0 +1,48 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.app.multilib.utils.SizeUtil + +fun LineChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.textSize = 10f + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt new file mode 100644 index 0000000..e9dce2c --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt @@ -0,0 +1,39 @@ +package com.casic.app.smartwell.sanxi.extensions + +import android.graphics.Color +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.components.Legend +import com.pengxh.app.multilib.utils.SizeUtil + +fun PieChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setUsePercentValues(false) //百分比数字显示 + this.description.isEnabled = false + this.dragDecelerationFrictionCoef = 0.95f //图表转动阻力摩擦系数[0,1] + this.setBackgroundColor(Color.WHITE) //设置图表背景色 + this.rotationAngle = 0f + this.isRotationEnabled = false + this.isHighlightPerTapEnabled = true + this.animateY(1200, Easing.EaseInOutQuad) // 设置图表展示动画效果 + this.setDrawEntryLabels(false) //不显示分类标签 + this.isDrawHoleEnabled = false //圆环显示 + this.setDrawCenterText(false) //圆环中心文字 + this.setEntryLabelColor(R.color.mainThemeColor.convertColor(context)) //图表文本字体颜色 + this.setEntryLabelTextSize(12f) + //设置图表上下左右的偏移，类似于外边距，可以控制饼图大小 + this.setExtraOffsets(7.5f, 2.5f, 7.5f, 2.5f) + //设置图例位置 + val legend = this.legend + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + legend.orientation = Legend.LegendOrientation.HORIZONTAL + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt index d137800..17dd212 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt @@ -20,6 +20,7 @@ import com.casic.app.smartwell.sanxi.extensions.toDeptName import com.casic.app.smartwell.sanxi.extensions.toTypeName import com.casic.app.smartwell.sanxi.model.WellListModel +import com.casic.app.smartwell.sanxi.utils.ChartViewHelper import com.casic.app.smartwell.sanxi.utils.Constant import com.casic.app.smartwell.sanxi.vm.AlarmViewModel import com.casic.app.smartwell.sanxi.vm.DeviceViewModel @@ -27,10 +28,14 @@ import com.casic.app.smartwell.sanxi.vm.WorkOrderViewModel import com.casic.app.smartwell.sanxi.widgets.EasyPopupWindow import com.casic.app.smartwell.sanxi.widgets.GaoDeClusterMarkerView +import com.github.mikephil.charting.data.PieEntry import com.google.android.material.bottomsheet.BottomSheetBehavior import com.pengxh.app.multilib.utils.SizeUtil import com.pengxh.app.multilib.widget.dialog.AlertControlDialog import kotlinx.android.synthetic.main.fragment_home.view.* +import kotlinx.android.synthetic.main.include_home_data_overview.view.* +import kotlinx.android.synthetic.main.include_home_device_chart.* +import kotlinx.android.synthetic.main.include_home_well_chart.* class HomePageFragment : Fragment(), AMap.OnMapLoadedListener, AMap.OnCameraChangeListener, AMap.OnMarkerClickListener, AMap.InfoWindowAdapter, AMap.OnInfoWindowClickListener { @@ -137,8 +142,7 @@ //计算所有点的中心点位置 val centerLatLng = LatLng(latitudeList.average(), longitudeList.average()) Log.d( - kTag, - "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" + kTag, "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" ) //移动到指定经纬度 val cameraPosition = CameraPosition(centerLatLng, 13f, 0f, 0f) @@ -154,12 +158,24 @@ wellViewModel.countWellByState() wellViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.wellTotalView.text = it["total"] + + //绑定well饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["bfWell"].toString().toFloat(), "布防")) + pieEntries.add(PieEntry(it["cfWell"].toString().toFloat(), "撤防")) + ChartViewHelper.setPieChartData(wellPieChart, pieEntries) }) //获取设备总数数据 deviceViewModel.countDeviceByState() deviceViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.deviceTotalView.text = it["total"] + + //绑定设备在线饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["online"].toString().toFloat(), "在线")) + pieEntries.add(PieEntry(it["offline"].toString().toFloat(), "离线")) + ChartViewHelper.setPieChartData(devicePieChart, pieEntries) }) //获取当前报警数据 diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt new file mode 100644 index 0000000..a011b12 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt @@ -0,0 +1,172 @@ +package com.casic.app.smartwell.sanxi.utils + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.casic.app.smartwell.sanxi.extensions.convertColor +import com.casic.app.smartwell.sanxi.extensions.init +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.data.PieData +import com.github.mikephil.charting.data.PieDataSet +import com.github.mikephil.charting.data.PieEntry + + +/** + * @author a203 + * @description 各种图初始化配置类 + * @date 2022/2/15 16:24 + * @email 290677893@qq.com + */ +object ChartViewHelper { + /** + * 饼图 + * */ + fun setPieChartData(chart: PieChart, entries: List) { + val context = BaseApplication.obtainInstance() + //每次加载数据都初始化饼图 + chart.init() + //绑定数据 + val dataSet = PieDataSet(entries, "") + dataSet.sliceSpace = 1.5f //设置饼状块之间的间隙 + dataSet.selectionShift = 5f //设置饼状块被选中时突出的距离 + //设置饼图块颜色 + val colors: MutableList = ArrayList() + for (i in entries.indices) { + colors.add(Constant.COLORS[i].convertColor(context)) + } + dataSet.colors = colors + //设置标签显示在饼图块外面 + dataSet.xValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.yValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.valueLineColor = R.color.mainThemeColor.convertColor(context) + dataSet.valueLinePart1Length = 0.75f //标签指示线前半截长度 + dataSet.valueLinePart2Length = 0.75f //标签指示线后半截长度 + val data = PieData(dataSet) + data.setValueTextSize(12f) + data.setValueTextColor(R.color.mainThemeColor.convertColor(context)) //数据值颜色 + chart.data = data + chart.highlightValues(null) + chart.invalidate() + } + + + /** + * 折线图 + * */ +// fun setLineChartData( +// chart: LineChart, +// xAxisDate: MutableList, +// entryModels: List +// ) { +// //每次加载数据都初始化折线图 +// chart.init() +// //绑定数据 +// val lineDataSets: MutableList = ArrayList() +// val entrySize = entryModels[0].entryList!!.size +// entryModels.forEachIndexed { index, it -> +// //设置数据 +// val dataSet = if (entrySize == 1) { +// LineDataSet(it.entryList, it.entryList?.get(0)?.data.toString()) +// } else { +// LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) +// } +// dataSet.setDrawCircles(true) +// //线条颜色 +// dataSet.color = it.lineColor +// //圆点颜色 +// dataSet.setCircleColor(it.lineColor) +// dataSet.setDrawFilled(true) +// dataSet.fillColor = it.lineColor +// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER +// lineDataSets.add(dataSet) +// } +// val lineData = LineData(lineDataSets) +// lineData.setDrawValues(false) +// //添加自定义Marker +// val markerView = LineChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisDate(xAxisDate) +// chart.marker = markerView +// //设置X轴坐标 +// val xAxis = chart.xAxis +// xAxis.valueFormatter = if (entrySize == 1) { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[0] +// } +// } +// } else { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[value.toInt()] +// } +// } +// } +// chart.data = lineData +// chart.invalidate() +// } + + /** + * 竖直柱状图 + * */ +// fun setBarChartData( +// chart: BarChart, +// xAxisLabel: MutableList, +// entries: List, +// dateType: String +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_1.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType(dateType) +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } + + /** + * 横向柱状图 + * */ +// fun setBarChartData( +// chart: HorizontalBarChart, +// xAxisLabel: MutableList, +// entries: List +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_6.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType("") +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt index d57d378..a1b21c7 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt @@ -32,8 +32,10 @@ val POPUP_IMAGES = arrayOf(R.drawable.ic_menu_map, R.drawable.ic_satellite) val POPUP_TITLES = arrayOf("标准地图", "卫星地图") - // val HOME_ICONS = arrayOf(R.drawable.ic_well, R.drawable.ic_overtime, R.drawable.ic_bfcf) - val HOME_ITEMS = arrayOf("闸井管理", "超时工单", "布防撤防") - val SUB_PAGE_TITLES = arrayOf("待处理", "待确认", "处理中", "已完成") - val OVER_TIME_PAGE_TITLES = arrayOf("超时未接单", "超时未处理") + //预置颜色 + val COLORS = arrayOf( + R.color.color_1, R.color.color_2, R.color.color_3, + R.color.color_4, R.color.color_5, R.color.color_6, + R.color.color_7, R.color.color_8, R.color.color_9 + ) } \ No newline at end of file diff --git a/app/src/main/res/layout/fragment_home.xml b/app/src/main/res/layout/fragment_home.xml index 2fe5769..acd7eb7 100644 --- a/app/src/main/res/layout/fragment_home.xml +++ b/app/src/main/res/layout/fragment_home.xml @@ -60,107 +60,25 @@ android:background="@drawable/bottom_short_line" /> - - - - - + android:scrollbars="vertical"> + android:layout_height="wrap_content" + android:orientation="vertical"> - + - + - - + - - - - - - - - - - - - - - - - - - - - + - + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_data_overview.xml b/app/src/main/res/layout/include_home_data_overview.xml new file mode 100644 index 0000000..ce21397 --- /dev/null +++ b/app/src/main/res/layout/include_home_data_overview.xml @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_device_chart.xml b/app/src/main/res/layout/include_home_device_chart.xml new file mode 100644 index 0000000..8e63453 --- /dev/null +++ b/app/src/main/res/layout/include_home_device_chart.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_well_chart.xml b/app/src/main/res/layout/include_home_well_chart.xml new file mode 100644 index 0000000..f0bc828 --- /dev/null +++ b/app/src/main/res/layout/include_home_well_chart.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt new file mode 100644 index 0000000..05019a7 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt @@ -0,0 +1,46 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.BarChart +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun BarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + xAxis.labelRotationAngle = -45f //X轴标签斜45度 + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt new file mode 100644 index 0000000..0d7d5e9 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt @@ -0,0 +1,45 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.HorizontalBarChart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun HorizontalBarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt new file mode 100644 index 0000000..a81954b --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt @@ -0,0 +1,48 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.app.multilib.utils.SizeUtil + +fun LineChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.textSize = 10f + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt new file mode 100644 index 0000000..e9dce2c --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt @@ -0,0 +1,39 @@ +package com.casic.app.smartwell.sanxi.extensions + +import android.graphics.Color +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.components.Legend +import com.pengxh.app.multilib.utils.SizeUtil + +fun PieChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setUsePercentValues(false) //百分比数字显示 + this.description.isEnabled = false + this.dragDecelerationFrictionCoef = 0.95f //图表转动阻力摩擦系数[0,1] + this.setBackgroundColor(Color.WHITE) //设置图表背景色 + this.rotationAngle = 0f + this.isRotationEnabled = false + this.isHighlightPerTapEnabled = true + this.animateY(1200, Easing.EaseInOutQuad) // 设置图表展示动画效果 + this.setDrawEntryLabels(false) //不显示分类标签 + this.isDrawHoleEnabled = false //圆环显示 + this.setDrawCenterText(false) //圆环中心文字 + this.setEntryLabelColor(R.color.mainThemeColor.convertColor(context)) //图表文本字体颜色 + this.setEntryLabelTextSize(12f) + //设置图表上下左右的偏移，类似于外边距，可以控制饼图大小 + this.setExtraOffsets(7.5f, 2.5f, 7.5f, 2.5f) + //设置图例位置 + val legend = this.legend + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + legend.orientation = Legend.LegendOrientation.HORIZONTAL + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt index d137800..17dd212 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt @@ -20,6 +20,7 @@ import com.casic.app.smartwell.sanxi.extensions.toDeptName import com.casic.app.smartwell.sanxi.extensions.toTypeName import com.casic.app.smartwell.sanxi.model.WellListModel +import com.casic.app.smartwell.sanxi.utils.ChartViewHelper import com.casic.app.smartwell.sanxi.utils.Constant import com.casic.app.smartwell.sanxi.vm.AlarmViewModel import com.casic.app.smartwell.sanxi.vm.DeviceViewModel @@ -27,10 +28,14 @@ import com.casic.app.smartwell.sanxi.vm.WorkOrderViewModel import com.casic.app.smartwell.sanxi.widgets.EasyPopupWindow import com.casic.app.smartwell.sanxi.widgets.GaoDeClusterMarkerView +import com.github.mikephil.charting.data.PieEntry import com.google.android.material.bottomsheet.BottomSheetBehavior import com.pengxh.app.multilib.utils.SizeUtil import com.pengxh.app.multilib.widget.dialog.AlertControlDialog import kotlinx.android.synthetic.main.fragment_home.view.* +import kotlinx.android.synthetic.main.include_home_data_overview.view.* +import kotlinx.android.synthetic.main.include_home_device_chart.* +import kotlinx.android.synthetic.main.include_home_well_chart.* class HomePageFragment : Fragment(), AMap.OnMapLoadedListener, AMap.OnCameraChangeListener, AMap.OnMarkerClickListener, AMap.InfoWindowAdapter, AMap.OnInfoWindowClickListener { @@ -137,8 +142,7 @@ //计算所有点的中心点位置 val centerLatLng = LatLng(latitudeList.average(), longitudeList.average()) Log.d( - kTag, - "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" + kTag, "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" ) //移动到指定经纬度 val cameraPosition = CameraPosition(centerLatLng, 13f, 0f, 0f) @@ -154,12 +158,24 @@ wellViewModel.countWellByState() wellViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.wellTotalView.text = it["total"] + + //绑定well饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["bfWell"].toString().toFloat(), "布防")) + pieEntries.add(PieEntry(it["cfWell"].toString().toFloat(), "撤防")) + ChartViewHelper.setPieChartData(wellPieChart, pieEntries) }) //获取设备总数数据 deviceViewModel.countDeviceByState() deviceViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.deviceTotalView.text = it["total"] + + //绑定设备在线饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["online"].toString().toFloat(), "在线")) + pieEntries.add(PieEntry(it["offline"].toString().toFloat(), "离线")) + ChartViewHelper.setPieChartData(devicePieChart, pieEntries) }) //获取当前报警数据 diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt new file mode 100644 index 0000000..a011b12 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt @@ -0,0 +1,172 @@ +package com.casic.app.smartwell.sanxi.utils + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.casic.app.smartwell.sanxi.extensions.convertColor +import com.casic.app.smartwell.sanxi.extensions.init +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.data.PieData +import com.github.mikephil.charting.data.PieDataSet +import com.github.mikephil.charting.data.PieEntry + + +/** + * @author a203 + * @description 各种图初始化配置类 + * @date 2022/2/15 16:24 + * @email 290677893@qq.com + */ +object ChartViewHelper { + /** + * 饼图 + * */ + fun setPieChartData(chart: PieChart, entries: List) { + val context = BaseApplication.obtainInstance() + //每次加载数据都初始化饼图 + chart.init() + //绑定数据 + val dataSet = PieDataSet(entries, "") + dataSet.sliceSpace = 1.5f //设置饼状块之间的间隙 + dataSet.selectionShift = 5f //设置饼状块被选中时突出的距离 + //设置饼图块颜色 + val colors: MutableList = ArrayList() + for (i in entries.indices) { + colors.add(Constant.COLORS[i].convertColor(context)) + } + dataSet.colors = colors + //设置标签显示在饼图块外面 + dataSet.xValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.yValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.valueLineColor = R.color.mainThemeColor.convertColor(context) + dataSet.valueLinePart1Length = 0.75f //标签指示线前半截长度 + dataSet.valueLinePart2Length = 0.75f //标签指示线后半截长度 + val data = PieData(dataSet) + data.setValueTextSize(12f) + data.setValueTextColor(R.color.mainThemeColor.convertColor(context)) //数据值颜色 + chart.data = data + chart.highlightValues(null) + chart.invalidate() + } + + + /** + * 折线图 + * */ +// fun setLineChartData( +// chart: LineChart, +// xAxisDate: MutableList, +// entryModels: List +// ) { +// //每次加载数据都初始化折线图 +// chart.init() +// //绑定数据 +// val lineDataSets: MutableList = ArrayList() +// val entrySize = entryModels[0].entryList!!.size +// entryModels.forEachIndexed { index, it -> +// //设置数据 +// val dataSet = if (entrySize == 1) { +// LineDataSet(it.entryList, it.entryList?.get(0)?.data.toString()) +// } else { +// LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) +// } +// dataSet.setDrawCircles(true) +// //线条颜色 +// dataSet.color = it.lineColor +// //圆点颜色 +// dataSet.setCircleColor(it.lineColor) +// dataSet.setDrawFilled(true) +// dataSet.fillColor = it.lineColor +// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER +// lineDataSets.add(dataSet) +// } +// val lineData = LineData(lineDataSets) +// lineData.setDrawValues(false) +// //添加自定义Marker +// val markerView = LineChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisDate(xAxisDate) +// chart.marker = markerView +// //设置X轴坐标 +// val xAxis = chart.xAxis +// xAxis.valueFormatter = if (entrySize == 1) { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[0] +// } +// } +// } else { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[value.toInt()] +// } +// } +// } +// chart.data = lineData +// chart.invalidate() +// } + + /** + * 竖直柱状图 + * */ +// fun setBarChartData( +// chart: BarChart, +// xAxisLabel: MutableList, +// entries: List, +// dateType: String +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_1.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType(dateType) +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } + + /** + * 横向柱状图 + * */ +// fun setBarChartData( +// chart: HorizontalBarChart, +// xAxisLabel: MutableList, +// entries: List +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_6.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType("") +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt index d57d378..a1b21c7 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt @@ -32,8 +32,10 @@ val POPUP_IMAGES = arrayOf(R.drawable.ic_menu_map, R.drawable.ic_satellite) val POPUP_TITLES = arrayOf("标准地图", "卫星地图") - // val HOME_ICONS = arrayOf(R.drawable.ic_well, R.drawable.ic_overtime, R.drawable.ic_bfcf) - val HOME_ITEMS = arrayOf("闸井管理", "超时工单", "布防撤防") - val SUB_PAGE_TITLES = arrayOf("待处理", "待确认", "处理中", "已完成") - val OVER_TIME_PAGE_TITLES = arrayOf("超时未接单", "超时未处理") + //预置颜色 + val COLORS = arrayOf( + R.color.color_1, R.color.color_2, R.color.color_3, + R.color.color_4, R.color.color_5, R.color.color_6, + R.color.color_7, R.color.color_8, R.color.color_9 + ) } \ No newline at end of file diff --git a/app/src/main/res/layout/fragment_home.xml b/app/src/main/res/layout/fragment_home.xml index 2fe5769..acd7eb7 100644 --- a/app/src/main/res/layout/fragment_home.xml +++ b/app/src/main/res/layout/fragment_home.xml @@ -60,107 +60,25 @@ android:background="@drawable/bottom_short_line" /> - - - - - + android:scrollbars="vertical"> + android:layout_height="wrap_content" + android:orientation="vertical"> - + - + - - + - - - - - - - - - - - - - - - - - - - - + - + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_data_overview.xml b/app/src/main/res/layout/include_home_data_overview.xml new file mode 100644 index 0000000..ce21397 --- /dev/null +++ b/app/src/main/res/layout/include_home_data_overview.xml @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_device_chart.xml b/app/src/main/res/layout/include_home_device_chart.xml new file mode 100644 index 0000000..8e63453 --- /dev/null +++ b/app/src/main/res/layout/include_home_device_chart.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_well_chart.xml b/app/src/main/res/layout/include_home_well_chart.xml new file mode 100644 index 0000000..f0bc828 --- /dev/null +++ b/app/src/main/res/layout/include_home_well_chart.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_well_type_chart.xml b/app/src/main/res/layout/include_home_well_type_chart.xml new file mode 100644 index 0000000..bf69ed8 --- /dev/null +++ b/app/src/main/res/layout/include_home_well_type_chart.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt new file mode 100644 index 0000000..05019a7 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt @@ -0,0 +1,46 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.BarChart +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun BarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + xAxis.labelRotationAngle = -45f //X轴标签斜45度 + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt new file mode 100644 index 0000000..0d7d5e9 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt @@ -0,0 +1,45 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.HorizontalBarChart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun HorizontalBarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt new file mode 100644 index 0000000..a81954b --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt @@ -0,0 +1,48 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.app.multilib.utils.SizeUtil + +fun LineChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.textSize = 10f + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt new file mode 100644 index 0000000..e9dce2c --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt @@ -0,0 +1,39 @@ +package com.casic.app.smartwell.sanxi.extensions + +import android.graphics.Color +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.components.Legend +import com.pengxh.app.multilib.utils.SizeUtil + +fun PieChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setUsePercentValues(false) //百分比数字显示 + this.description.isEnabled = false + this.dragDecelerationFrictionCoef = 0.95f //图表转动阻力摩擦系数[0,1] + this.setBackgroundColor(Color.WHITE) //设置图表背景色 + this.rotationAngle = 0f + this.isRotationEnabled = false + this.isHighlightPerTapEnabled = true + this.animateY(1200, Easing.EaseInOutQuad) // 设置图表展示动画效果 + this.setDrawEntryLabels(false) //不显示分类标签 + this.isDrawHoleEnabled = false //圆环显示 + this.setDrawCenterText(false) //圆环中心文字 + this.setEntryLabelColor(R.color.mainThemeColor.convertColor(context)) //图表文本字体颜色 + this.setEntryLabelTextSize(12f) + //设置图表上下左右的偏移，类似于外边距，可以控制饼图大小 + this.setExtraOffsets(7.5f, 2.5f, 7.5f, 2.5f) + //设置图例位置 + val legend = this.legend + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + legend.orientation = Legend.LegendOrientation.HORIZONTAL + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt index d137800..17dd212 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt @@ -20,6 +20,7 @@ import com.casic.app.smartwell.sanxi.extensions.toDeptName import com.casic.app.smartwell.sanxi.extensions.toTypeName import com.casic.app.smartwell.sanxi.model.WellListModel +import com.casic.app.smartwell.sanxi.utils.ChartViewHelper import com.casic.app.smartwell.sanxi.utils.Constant import com.casic.app.smartwell.sanxi.vm.AlarmViewModel import com.casic.app.smartwell.sanxi.vm.DeviceViewModel @@ -27,10 +28,14 @@ import com.casic.app.smartwell.sanxi.vm.WorkOrderViewModel import com.casic.app.smartwell.sanxi.widgets.EasyPopupWindow import com.casic.app.smartwell.sanxi.widgets.GaoDeClusterMarkerView +import com.github.mikephil.charting.data.PieEntry import com.google.android.material.bottomsheet.BottomSheetBehavior import com.pengxh.app.multilib.utils.SizeUtil import com.pengxh.app.multilib.widget.dialog.AlertControlDialog import kotlinx.android.synthetic.main.fragment_home.view.* +import kotlinx.android.synthetic.main.include_home_data_overview.view.* +import kotlinx.android.synthetic.main.include_home_device_chart.* +import kotlinx.android.synthetic.main.include_home_well_chart.* class HomePageFragment : Fragment(), AMap.OnMapLoadedListener, AMap.OnCameraChangeListener, AMap.OnMarkerClickListener, AMap.InfoWindowAdapter, AMap.OnInfoWindowClickListener { @@ -137,8 +142,7 @@ //计算所有点的中心点位置 val centerLatLng = LatLng(latitudeList.average(), longitudeList.average()) Log.d( - kTag, - "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" + kTag, "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" ) //移动到指定经纬度 val cameraPosition = CameraPosition(centerLatLng, 13f, 0f, 0f) @@ -154,12 +158,24 @@ wellViewModel.countWellByState() wellViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.wellTotalView.text = it["total"] + + //绑定well饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["bfWell"].toString().toFloat(), "布防")) + pieEntries.add(PieEntry(it["cfWell"].toString().toFloat(), "撤防")) + ChartViewHelper.setPieChartData(wellPieChart, pieEntries) }) //获取设备总数数据 deviceViewModel.countDeviceByState() deviceViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.deviceTotalView.text = it["total"] + + //绑定设备在线饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["online"].toString().toFloat(), "在线")) + pieEntries.add(PieEntry(it["offline"].toString().toFloat(), "离线")) + ChartViewHelper.setPieChartData(devicePieChart, pieEntries) }) //获取当前报警数据 diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt new file mode 100644 index 0000000..a011b12 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt @@ -0,0 +1,172 @@ +package com.casic.app.smartwell.sanxi.utils + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.casic.app.smartwell.sanxi.extensions.convertColor +import com.casic.app.smartwell.sanxi.extensions.init +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.data.PieData +import com.github.mikephil.charting.data.PieDataSet +import com.github.mikephil.charting.data.PieEntry + + +/** + * @author a203 + * @description 各种图初始化配置类 + * @date 2022/2/15 16:24 + * @email 290677893@qq.com + */ +object ChartViewHelper { + /** + * 饼图 + * */ + fun setPieChartData(chart: PieChart, entries: List) { + val context = BaseApplication.obtainInstance() + //每次加载数据都初始化饼图 + chart.init() + //绑定数据 + val dataSet = PieDataSet(entries, "") + dataSet.sliceSpace = 1.5f //设置饼状块之间的间隙 + dataSet.selectionShift = 5f //设置饼状块被选中时突出的距离 + //设置饼图块颜色 + val colors: MutableList = ArrayList() + for (i in entries.indices) { + colors.add(Constant.COLORS[i].convertColor(context)) + } + dataSet.colors = colors + //设置标签显示在饼图块外面 + dataSet.xValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.yValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.valueLineColor = R.color.mainThemeColor.convertColor(context) + dataSet.valueLinePart1Length = 0.75f //标签指示线前半截长度 + dataSet.valueLinePart2Length = 0.75f //标签指示线后半截长度 + val data = PieData(dataSet) + data.setValueTextSize(12f) + data.setValueTextColor(R.color.mainThemeColor.convertColor(context)) //数据值颜色 + chart.data = data + chart.highlightValues(null) + chart.invalidate() + } + + + /** + * 折线图 + * */ +// fun setLineChartData( +// chart: LineChart, +// xAxisDate: MutableList, +// entryModels: List +// ) { +// //每次加载数据都初始化折线图 +// chart.init() +// //绑定数据 +// val lineDataSets: MutableList = ArrayList() +// val entrySize = entryModels[0].entryList!!.size +// entryModels.forEachIndexed { index, it -> +// //设置数据 +// val dataSet = if (entrySize == 1) { +// LineDataSet(it.entryList, it.entryList?.get(0)?.data.toString()) +// } else { +// LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) +// } +// dataSet.setDrawCircles(true) +// //线条颜色 +// dataSet.color = it.lineColor +// //圆点颜色 +// dataSet.setCircleColor(it.lineColor) +// dataSet.setDrawFilled(true) +// dataSet.fillColor = it.lineColor +// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER +// lineDataSets.add(dataSet) +// } +// val lineData = LineData(lineDataSets) +// lineData.setDrawValues(false) +// //添加自定义Marker +// val markerView = LineChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisDate(xAxisDate) +// chart.marker = markerView +// //设置X轴坐标 +// val xAxis = chart.xAxis +// xAxis.valueFormatter = if (entrySize == 1) { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[0] +// } +// } +// } else { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[value.toInt()] +// } +// } +// } +// chart.data = lineData +// chart.invalidate() +// } + + /** + * 竖直柱状图 + * */ +// fun setBarChartData( +// chart: BarChart, +// xAxisLabel: MutableList, +// entries: List, +// dateType: String +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_1.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType(dateType) +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } + + /** + * 横向柱状图 + * */ +// fun setBarChartData( +// chart: HorizontalBarChart, +// xAxisLabel: MutableList, +// entries: List +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_6.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType("") +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt index d57d378..a1b21c7 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt @@ -32,8 +32,10 @@ val POPUP_IMAGES = arrayOf(R.drawable.ic_menu_map, R.drawable.ic_satellite) val POPUP_TITLES = arrayOf("标准地图", "卫星地图") - // val HOME_ICONS = arrayOf(R.drawable.ic_well, R.drawable.ic_overtime, R.drawable.ic_bfcf) - val HOME_ITEMS = arrayOf("闸井管理", "超时工单", "布防撤防") - val SUB_PAGE_TITLES = arrayOf("待处理", "待确认", "处理中", "已完成") - val OVER_TIME_PAGE_TITLES = arrayOf("超时未接单", "超时未处理") + //预置颜色 + val COLORS = arrayOf( + R.color.color_1, R.color.color_2, R.color.color_3, + R.color.color_4, R.color.color_5, R.color.color_6, + R.color.color_7, R.color.color_8, R.color.color_9 + ) } \ No newline at end of file diff --git a/app/src/main/res/layout/fragment_home.xml b/app/src/main/res/layout/fragment_home.xml index 2fe5769..acd7eb7 100644 --- a/app/src/main/res/layout/fragment_home.xml +++ b/app/src/main/res/layout/fragment_home.xml @@ -60,107 +60,25 @@ android:background="@drawable/bottom_short_line" /> - - - - - + android:scrollbars="vertical"> + android:layout_height="wrap_content" + android:orientation="vertical"> - + - + - - + - - - - - - - - - - - - - - - - - - - - + - + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_data_overview.xml b/app/src/main/res/layout/include_home_data_overview.xml new file mode 100644 index 0000000..ce21397 --- /dev/null +++ b/app/src/main/res/layout/include_home_data_overview.xml @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_device_chart.xml b/app/src/main/res/layout/include_home_device_chart.xml new file mode 100644 index 0000000..8e63453 --- /dev/null +++ b/app/src/main/res/layout/include_home_device_chart.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_well_chart.xml b/app/src/main/res/layout/include_home_well_chart.xml new file mode 100644 index 0000000..f0bc828 --- /dev/null +++ b/app/src/main/res/layout/include_home_well_chart.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_well_type_chart.xml b/app/src/main/res/layout/include_home_well_type_chart.xml new file mode 100644 index 0000000..bf69ed8 --- /dev/null +++ b/app/src/main/res/layout/include_home_well_type_chart.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml index 95d58fe..279a8b7 100644 --- a/app/src/main/res/values/colors.xml +++ b/app/src/main/res/values/colors.xml @@ -13,4 +13,15 @@ #99000000 #C0000000 #030B14 + + + #40C9C6 + #ff8078 + #80bbff + #916bff + #ffe1ab + #6666FF + #CCFF66 + #96e9b5 + #feb5a2 \ No newline at end of file diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt new file mode 100644 index 0000000..05019a7 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt @@ -0,0 +1,46 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.BarChart +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun BarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + xAxis.labelRotationAngle = -45f //X轴标签斜45度 + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt new file mode 100644 index 0000000..0d7d5e9 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt @@ -0,0 +1,45 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.HorizontalBarChart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun HorizontalBarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt new file mode 100644 index 0000000..a81954b --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt @@ -0,0 +1,48 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.app.multilib.utils.SizeUtil + +fun LineChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.textSize = 10f + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt new file mode 100644 index 0000000..e9dce2c --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt @@ -0,0 +1,39 @@ +package com.casic.app.smartwell.sanxi.extensions + +import android.graphics.Color +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.components.Legend +import com.pengxh.app.multilib.utils.SizeUtil + +fun PieChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setUsePercentValues(false) //百分比数字显示 + this.description.isEnabled = false + this.dragDecelerationFrictionCoef = 0.95f //图表转动阻力摩擦系数[0,1] + this.setBackgroundColor(Color.WHITE) //设置图表背景色 + this.rotationAngle = 0f + this.isRotationEnabled = false + this.isHighlightPerTapEnabled = true + this.animateY(1200, Easing.EaseInOutQuad) // 设置图表展示动画效果 + this.setDrawEntryLabels(false) //不显示分类标签 + this.isDrawHoleEnabled = false //圆环显示 + this.setDrawCenterText(false) //圆环中心文字 + this.setEntryLabelColor(R.color.mainThemeColor.convertColor(context)) //图表文本字体颜色 + this.setEntryLabelTextSize(12f) + //设置图表上下左右的偏移，类似于外边距，可以控制饼图大小 + this.setExtraOffsets(7.5f, 2.5f, 7.5f, 2.5f) + //设置图例位置 + val legend = this.legend + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + legend.orientation = Legend.LegendOrientation.HORIZONTAL + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt index d137800..17dd212 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt @@ -20,6 +20,7 @@ import com.casic.app.smartwell.sanxi.extensions.toDeptName import com.casic.app.smartwell.sanxi.extensions.toTypeName import com.casic.app.smartwell.sanxi.model.WellListModel +import com.casic.app.smartwell.sanxi.utils.ChartViewHelper import com.casic.app.smartwell.sanxi.utils.Constant import com.casic.app.smartwell.sanxi.vm.AlarmViewModel import com.casic.app.smartwell.sanxi.vm.DeviceViewModel @@ -27,10 +28,14 @@ import com.casic.app.smartwell.sanxi.vm.WorkOrderViewModel import com.casic.app.smartwell.sanxi.widgets.EasyPopupWindow import com.casic.app.smartwell.sanxi.widgets.GaoDeClusterMarkerView +import com.github.mikephil.charting.data.PieEntry import com.google.android.material.bottomsheet.BottomSheetBehavior import com.pengxh.app.multilib.utils.SizeUtil import com.pengxh.app.multilib.widget.dialog.AlertControlDialog import kotlinx.android.synthetic.main.fragment_home.view.* +import kotlinx.android.synthetic.main.include_home_data_overview.view.* +import kotlinx.android.synthetic.main.include_home_device_chart.* +import kotlinx.android.synthetic.main.include_home_well_chart.* class HomePageFragment : Fragment(), AMap.OnMapLoadedListener, AMap.OnCameraChangeListener, AMap.OnMarkerClickListener, AMap.InfoWindowAdapter, AMap.OnInfoWindowClickListener { @@ -137,8 +142,7 @@ //计算所有点的中心点位置 val centerLatLng = LatLng(latitudeList.average(), longitudeList.average()) Log.d( - kTag, - "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" + kTag, "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" ) //移动到指定经纬度 val cameraPosition = CameraPosition(centerLatLng, 13f, 0f, 0f) @@ -154,12 +158,24 @@ wellViewModel.countWellByState() wellViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.wellTotalView.text = it["total"] + + //绑定well饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["bfWell"].toString().toFloat(), "布防")) + pieEntries.add(PieEntry(it["cfWell"].toString().toFloat(), "撤防")) + ChartViewHelper.setPieChartData(wellPieChart, pieEntries) }) //获取设备总数数据 deviceViewModel.countDeviceByState() deviceViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.deviceTotalView.text = it["total"] + + //绑定设备在线饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["online"].toString().toFloat(), "在线")) + pieEntries.add(PieEntry(it["offline"].toString().toFloat(), "离线")) + ChartViewHelper.setPieChartData(devicePieChart, pieEntries) }) //获取当前报警数据 diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt new file mode 100644 index 0000000..a011b12 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt @@ -0,0 +1,172 @@ +package com.casic.app.smartwell.sanxi.utils + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.casic.app.smartwell.sanxi.extensions.convertColor +import com.casic.app.smartwell.sanxi.extensions.init +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.data.PieData +import com.github.mikephil.charting.data.PieDataSet +import com.github.mikephil.charting.data.PieEntry + + +/** + * @author a203 + * @description 各种图初始化配置类 + * @date 2022/2/15 16:24 + * @email 290677893@qq.com + */ +object ChartViewHelper { + /** + * 饼图 + * */ + fun setPieChartData(chart: PieChart, entries: List) { + val context = BaseApplication.obtainInstance() + //每次加载数据都初始化饼图 + chart.init() + //绑定数据 + val dataSet = PieDataSet(entries, "") + dataSet.sliceSpace = 1.5f //设置饼状块之间的间隙 + dataSet.selectionShift = 5f //设置饼状块被选中时突出的距离 + //设置饼图块颜色 + val colors: MutableList = ArrayList() + for (i in entries.indices) { + colors.add(Constant.COLORS[i].convertColor(context)) + } + dataSet.colors = colors + //设置标签显示在饼图块外面 + dataSet.xValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.yValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.valueLineColor = R.color.mainThemeColor.convertColor(context) + dataSet.valueLinePart1Length = 0.75f //标签指示线前半截长度 + dataSet.valueLinePart2Length = 0.75f //标签指示线后半截长度 + val data = PieData(dataSet) + data.setValueTextSize(12f) + data.setValueTextColor(R.color.mainThemeColor.convertColor(context)) //数据值颜色 + chart.data = data + chart.highlightValues(null) + chart.invalidate() + } + + + /** + * 折线图 + * */ +// fun setLineChartData( +// chart: LineChart, +// xAxisDate: MutableList, +// entryModels: List +// ) { +// //每次加载数据都初始化折线图 +// chart.init() +// //绑定数据 +// val lineDataSets: MutableList = ArrayList() +// val entrySize = entryModels[0].entryList!!.size +// entryModels.forEachIndexed { index, it -> +// //设置数据 +// val dataSet = if (entrySize == 1) { +// LineDataSet(it.entryList, it.entryList?.get(0)?.data.toString()) +// } else { +// LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) +// } +// dataSet.setDrawCircles(true) +// //线条颜色 +// dataSet.color = it.lineColor +// //圆点颜色 +// dataSet.setCircleColor(it.lineColor) +// dataSet.setDrawFilled(true) +// dataSet.fillColor = it.lineColor +// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER +// lineDataSets.add(dataSet) +// } +// val lineData = LineData(lineDataSets) +// lineData.setDrawValues(false) +// //添加自定义Marker +// val markerView = LineChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisDate(xAxisDate) +// chart.marker = markerView +// //设置X轴坐标 +// val xAxis = chart.xAxis +// xAxis.valueFormatter = if (entrySize == 1) { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[0] +// } +// } +// } else { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[value.toInt()] +// } +// } +// } +// chart.data = lineData +// chart.invalidate() +// } + + /** + * 竖直柱状图 + * */ +// fun setBarChartData( +// chart: BarChart, +// xAxisLabel: MutableList, +// entries: List, +// dateType: String +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_1.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType(dateType) +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } + + /** + * 横向柱状图 + * */ +// fun setBarChartData( +// chart: HorizontalBarChart, +// xAxisLabel: MutableList, +// entries: List +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_6.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType("") +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt index d57d378..a1b21c7 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt @@ -32,8 +32,10 @@ val POPUP_IMAGES = arrayOf(R.drawable.ic_menu_map, R.drawable.ic_satellite) val POPUP_TITLES = arrayOf("标准地图", "卫星地图") - // val HOME_ICONS = arrayOf(R.drawable.ic_well, R.drawable.ic_overtime, R.drawable.ic_bfcf) - val HOME_ITEMS = arrayOf("闸井管理", "超时工单", "布防撤防") - val SUB_PAGE_TITLES = arrayOf("待处理", "待确认", "处理中", "已完成") - val OVER_TIME_PAGE_TITLES = arrayOf("超时未接单", "超时未处理") + //预置颜色 + val COLORS = arrayOf( + R.color.color_1, R.color.color_2, R.color.color_3, + R.color.color_4, R.color.color_5, R.color.color_6, + R.color.color_7, R.color.color_8, R.color.color_9 + ) } \ No newline at end of file diff --git a/app/src/main/res/layout/fragment_home.xml b/app/src/main/res/layout/fragment_home.xml index 2fe5769..acd7eb7 100644 --- a/app/src/main/res/layout/fragment_home.xml +++ b/app/src/main/res/layout/fragment_home.xml @@ -60,107 +60,25 @@ android:background="@drawable/bottom_short_line" /> - - - - - + android:scrollbars="vertical"> + android:layout_height="wrap_content" + android:orientation="vertical"> - + - + - - + - - - - - - - - - - - - - - - - - - - - + - + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_data_overview.xml b/app/src/main/res/layout/include_home_data_overview.xml new file mode 100644 index 0000000..ce21397 --- /dev/null +++ b/app/src/main/res/layout/include_home_data_overview.xml @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_device_chart.xml b/app/src/main/res/layout/include_home_device_chart.xml new file mode 100644 index 0000000..8e63453 --- /dev/null +++ b/app/src/main/res/layout/include_home_device_chart.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_well_chart.xml b/app/src/main/res/layout/include_home_well_chart.xml new file mode 100644 index 0000000..f0bc828 --- /dev/null +++ b/app/src/main/res/layout/include_home_well_chart.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_well_type_chart.xml b/app/src/main/res/layout/include_home_well_type_chart.xml new file mode 100644 index 0000000..bf69ed8 --- /dev/null +++ b/app/src/main/res/layout/include_home_well_type_chart.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml index 95d58fe..279a8b7 100644 --- a/app/src/main/res/values/colors.xml +++ b/app/src/main/res/values/colors.xml @@ -13,4 +13,15 @@ #99000000 #C0000000 #030B14 + + + #40C9C6 + #ff8078 + #80bbff + #916bff + #ffe1ab + #6666FF + #CCFF66 + #96e9b5 + #feb5a2 \ No newline at end of file diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml index 22fbd58..3982ae3 100644 --- a/app/src/main/res/values/dimens.xml +++ b/app/src/main/res/values/dimens.xml @@ -21,6 +21,7 @@ 80dp 100dp 200dp + 220dp 1px diff --git a/app/build.gradle b/app/build.gradle index e9a2bb8..fdf5fc7 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -110,4 +110,6 @@ implementation 'com.jzxiang.pickerview:TimePickerDialog:1.0.1' //标签流式布局 implementation group: 'com.hyman', name: 'flowlayout-lib', version: '1.1.2' + //图表 + implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' } \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt new file mode 100644 index 0000000..05019a7 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/BarChart.kt @@ -0,0 +1,46 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.BarChart +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun BarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + xAxis.labelRotationAngle = -45f //X轴标签斜45度 + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt new file mode 100644 index 0000000..0d7d5e9 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/HorizontalBarChart.kt @@ -0,0 +1,45 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.HorizontalBarChart +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.github.mikephil.charting.formatter.ValueFormatter +import com.pengxh.app.multilib.utils.SizeUtil + +fun HorizontalBarChart.init(barLabels: MutableList) { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.animateY(1200, Easing.EaseInOutQuad) + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.setScaleEnabled(false) + //去掉描述 + this.description.isEnabled = false + //去掉图例 + this.legend.isEnabled = false + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.labelCount = barLabels.size // 设置x轴上的标签个数 + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return barLabels[value.toInt()] + } + } + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt new file mode 100644 index 0000000..a81954b --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/LineChart.kt @@ -0,0 +1,48 @@ +package com.casic.app.smartwell.sanxi.extensions + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.app.multilib.utils.SizeUtil + +fun LineChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.mainTextColor.convertColor(context) + xAxis.textSize = 10f + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt new file mode 100644 index 0000000..e9dce2c --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/extensions/PieChart.kt @@ -0,0 +1,39 @@ +package com.casic.app.smartwell.sanxi.extensions + +import android.graphics.Color +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.components.Legend +import com.pengxh.app.multilib.utils.SizeUtil + +fun PieChart.init() { + val context = BaseApplication.obtainInstance() + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.orange) + this.getPaint(Chart.PAINT_INFO).textSize = SizeUtil.dp2px(context, 14f).toFloat() + this.setUsePercentValues(false) //百分比数字显示 + this.description.isEnabled = false + this.dragDecelerationFrictionCoef = 0.95f //图表转动阻力摩擦系数[0,1] + this.setBackgroundColor(Color.WHITE) //设置图表背景色 + this.rotationAngle = 0f + this.isRotationEnabled = false + this.isHighlightPerTapEnabled = true + this.animateY(1200, Easing.EaseInOutQuad) // 设置图表展示动画效果 + this.setDrawEntryLabels(false) //不显示分类标签 + this.isDrawHoleEnabled = false //圆环显示 + this.setDrawCenterText(false) //圆环中心文字 + this.setEntryLabelColor(R.color.mainThemeColor.convertColor(context)) //图表文本字体颜色 + this.setEntryLabelTextSize(12f) + //设置图表上下左右的偏移，类似于外边距，可以控制饼图大小 + this.setExtraOffsets(7.5f, 2.5f, 7.5f, 2.5f) + //设置图例位置 + val legend = this.legend + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + legend.orientation = Legend.LegendOrientation.HORIZONTAL + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt index d137800..17dd212 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/fragment/HomePageFragment.kt @@ -20,6 +20,7 @@ import com.casic.app.smartwell.sanxi.extensions.toDeptName import com.casic.app.smartwell.sanxi.extensions.toTypeName import com.casic.app.smartwell.sanxi.model.WellListModel +import com.casic.app.smartwell.sanxi.utils.ChartViewHelper import com.casic.app.smartwell.sanxi.utils.Constant import com.casic.app.smartwell.sanxi.vm.AlarmViewModel import com.casic.app.smartwell.sanxi.vm.DeviceViewModel @@ -27,10 +28,14 @@ import com.casic.app.smartwell.sanxi.vm.WorkOrderViewModel import com.casic.app.smartwell.sanxi.widgets.EasyPopupWindow import com.casic.app.smartwell.sanxi.widgets.GaoDeClusterMarkerView +import com.github.mikephil.charting.data.PieEntry import com.google.android.material.bottomsheet.BottomSheetBehavior import com.pengxh.app.multilib.utils.SizeUtil import com.pengxh.app.multilib.widget.dialog.AlertControlDialog import kotlinx.android.synthetic.main.fragment_home.view.* +import kotlinx.android.synthetic.main.include_home_data_overview.view.* +import kotlinx.android.synthetic.main.include_home_device_chart.* +import kotlinx.android.synthetic.main.include_home_well_chart.* class HomePageFragment : Fragment(), AMap.OnMapLoadedListener, AMap.OnCameraChangeListener, AMap.OnMarkerClickListener, AMap.InfoWindowAdapter, AMap.OnInfoWindowClickListener { @@ -137,8 +142,7 @@ //计算所有点的中心点位置 val centerLatLng = LatLng(latitudeList.average(), longitudeList.average()) Log.d( - kTag, - "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" + kTag, "所有闸井中心点位置 ===> [${latitudeList.average()}, ${longitudeList.average()}]" ) //移动到指定经纬度 val cameraPosition = CameraPosition(centerLatLng, 13f, 0f, 0f) @@ -154,12 +158,24 @@ wellViewModel.countWellByState() wellViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.wellTotalView.text = it["total"] + + //绑定well饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["bfWell"].toString().toFloat(), "布防")) + pieEntries.add(PieEntry(it["cfWell"].toString().toFloat(), "撤防")) + ChartViewHelper.setPieChartData(wellPieChart, pieEntries) }) //获取设备总数数据 deviceViewModel.countDeviceByState() deviceViewModel.countResultModel.observe(viewLifecycleOwner, { homeView.deviceTotalView.text = it["total"] + + //绑定设备在线饼图 + val pieEntries: MutableList = ArrayList() + pieEntries.add(PieEntry(it["online"].toString().toFloat(), "在线")) + pieEntries.add(PieEntry(it["offline"].toString().toFloat(), "离线")) + ChartViewHelper.setPieChartData(devicePieChart, pieEntries) }) //获取当前报警数据 diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt new file mode 100644 index 0000000..a011b12 --- /dev/null +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/ChartViewHelper.kt @@ -0,0 +1,172 @@ +package com.casic.app.smartwell.sanxi.utils + +import com.casic.app.smartwell.sanxi.R +import com.casic.app.smartwell.sanxi.base.BaseApplication +import com.casic.app.smartwell.sanxi.extensions.convertColor +import com.casic.app.smartwell.sanxi.extensions.init +import com.github.mikephil.charting.charts.PieChart +import com.github.mikephil.charting.data.PieData +import com.github.mikephil.charting.data.PieDataSet +import com.github.mikephil.charting.data.PieEntry + + +/** + * @author a203 + * @description 各种图初始化配置类 + * @date 2022/2/15 16:24 + * @email 290677893@qq.com + */ +object ChartViewHelper { + /** + * 饼图 + * */ + fun setPieChartData(chart: PieChart, entries: List) { + val context = BaseApplication.obtainInstance() + //每次加载数据都初始化饼图 + chart.init() + //绑定数据 + val dataSet = PieDataSet(entries, "") + dataSet.sliceSpace = 1.5f //设置饼状块之间的间隙 + dataSet.selectionShift = 5f //设置饼状块被选中时突出的距离 + //设置饼图块颜色 + val colors: MutableList = ArrayList() + for (i in entries.indices) { + colors.add(Constant.COLORS[i].convertColor(context)) + } + dataSet.colors = colors + //设置标签显示在饼图块外面 + dataSet.xValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.yValuePosition = PieDataSet.ValuePosition.OUTSIDE_SLICE + dataSet.valueLineColor = R.color.mainThemeColor.convertColor(context) + dataSet.valueLinePart1Length = 0.75f //标签指示线前半截长度 + dataSet.valueLinePart2Length = 0.75f //标签指示线后半截长度 + val data = PieData(dataSet) + data.setValueTextSize(12f) + data.setValueTextColor(R.color.mainThemeColor.convertColor(context)) //数据值颜色 + chart.data = data + chart.highlightValues(null) + chart.invalidate() + } + + + /** + * 折线图 + * */ +// fun setLineChartData( +// chart: LineChart, +// xAxisDate: MutableList, +// entryModels: List +// ) { +// //每次加载数据都初始化折线图 +// chart.init() +// //绑定数据 +// val lineDataSets: MutableList = ArrayList() +// val entrySize = entryModels[0].entryList!!.size +// entryModels.forEachIndexed { index, it -> +// //设置数据 +// val dataSet = if (entrySize == 1) { +// LineDataSet(it.entryList, it.entryList?.get(0)?.data.toString()) +// } else { +// LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) +// } +// dataSet.setDrawCircles(true) +// //线条颜色 +// dataSet.color = it.lineColor +// //圆点颜色 +// dataSet.setCircleColor(it.lineColor) +// dataSet.setDrawFilled(true) +// dataSet.fillColor = it.lineColor +// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER +// lineDataSets.add(dataSet) +// } +// val lineData = LineData(lineDataSets) +// lineData.setDrawValues(false) +// //添加自定义Marker +// val markerView = LineChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisDate(xAxisDate) +// chart.marker = markerView +// //设置X轴坐标 +// val xAxis = chart.xAxis +// xAxis.valueFormatter = if (entrySize == 1) { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[0] +// } +// } +// } else { +// object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return xAxisDate[value.toInt()] +// } +// } +// } +// chart.data = lineData +// chart.invalidate() +// } + + /** + * 竖直柱状图 + * */ +// fun setBarChartData( +// chart: BarChart, +// xAxisLabel: MutableList, +// entries: List, +// dateType: String +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_1.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType(dateType) +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } + + /** + * 横向柱状图 + * */ +// fun setBarChartData( +// chart: HorizontalBarChart, +// xAxisLabel: MutableList, +// entries: List +// ) { +// //每次加载数据都初始化饼图 +// chart.init(xAxisLabel) +// val barDataSets: MutableList = ArrayList() +// //绑定数据 +// val dataSet = BarDataSet(entries, "") +// dataSet.color = R.color.color_6.convertColor() +// dataSet.valueFormatter = object : ValueFormatter() { +// override fun getFormattedValue(value: Float): String { +// return DecimalFormat("##0").format(value.toDouble()) +// } +// } +// barDataSets.add(dataSet) +// val barData = BarData(barDataSets) +// barData.barWidth = 0.5f +// //添加自定义Marker +// val markerView = BarChartMarkerView(BaseApplication.obtainInstance()) +// markerView.chartView = chart +// markerView.setXAxisLabel(xAxisLabel) +// markerView.setBarDataType("") +// chart.marker = markerView +// chart.data = barData +// chart.invalidate() +// } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt index d57d378..a1b21c7 100644 --- a/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt +++ b/app/src/main/java/com/casic/app/smartwell/sanxi/utils/Constant.kt @@ -32,8 +32,10 @@ val POPUP_IMAGES = arrayOf(R.drawable.ic_menu_map, R.drawable.ic_satellite) val POPUP_TITLES = arrayOf("标准地图", "卫星地图") - // val HOME_ICONS = arrayOf(R.drawable.ic_well, R.drawable.ic_overtime, R.drawable.ic_bfcf) - val HOME_ITEMS = arrayOf("闸井管理", "超时工单", "布防撤防") - val SUB_PAGE_TITLES = arrayOf("待处理", "待确认", "处理中", "已完成") - val OVER_TIME_PAGE_TITLES = arrayOf("超时未接单", "超时未处理") + //预置颜色 + val COLORS = arrayOf( + R.color.color_1, R.color.color_2, R.color.color_3, + R.color.color_4, R.color.color_5, R.color.color_6, + R.color.color_7, R.color.color_8, R.color.color_9 + ) } \ No newline at end of file diff --git a/app/src/main/res/layout/fragment_home.xml b/app/src/main/res/layout/fragment_home.xml index 2fe5769..acd7eb7 100644 --- a/app/src/main/res/layout/fragment_home.xml +++ b/app/src/main/res/layout/fragment_home.xml @@ -60,107 +60,25 @@ android:background="@drawable/bottom_short_line" /> - - - - - + android:scrollbars="vertical"> + android:layout_height="wrap_content" + android:orientation="vertical"> - + - + - - + - - - - - - - - - - - - - - - - - - - - + - + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_data_overview.xml b/app/src/main/res/layout/include_home_data_overview.xml new file mode 100644 index 0000000..ce21397 --- /dev/null +++ b/app/src/main/res/layout/include_home_data_overview.xml @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_device_chart.xml b/app/src/main/res/layout/include_home_device_chart.xml new file mode 100644 index 0000000..8e63453 --- /dev/null +++ b/app/src/main/res/layout/include_home_device_chart.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_well_chart.xml b/app/src/main/res/layout/include_home_well_chart.xml new file mode 100644 index 0000000..f0bc828 --- /dev/null +++ b/app/src/main/res/layout/include_home_well_chart.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/include_home_well_type_chart.xml b/app/src/main/res/layout/include_home_well_type_chart.xml new file mode 100644 index 0000000..bf69ed8 --- /dev/null +++ b/app/src/main/res/layout/include_home_well_type_chart.xml @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml index 95d58fe..279a8b7 100644 --- a/app/src/main/res/values/colors.xml +++ b/app/src/main/res/values/colors.xml @@ -13,4 +13,15 @@ #99000000 #C0000000 #030B14 + + + #40C9C6 + #ff8078 + #80bbff + #916bff + #ffe1ab + #6666FF + #CCFF66 + #96e9b5 + #feb5a2 \ No newline at end of file diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml index 22fbd58..3982ae3 100644 --- a/app/src/main/res/values/dimens.xml +++ b/app/src/main/res/values/dimens.xml @@ -21,6 +21,7 @@ 80dp 100dp 200dp + 220dp 1px diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml index c5a28d9..c7b92b5 100644 --- a/app/src/main/res/values/styles.xml +++ b/app/src/main/res/values/styles.xml @@ -128,4 +128,14 @@ @dimen/dp_5 @dimen/dp_5 + +