You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
286 lines
8.3 KiB
286 lines
8.3 KiB
1 year ago
|
<template>
|
||
|
|
<view class="eacharts-box">
|
||
|
|
<view class="eacharts-time">
|
||
|
|
<u-form :model="form" ref="uForm">
|
||
|
|
<u-form-item label="选择时间:" label-width="140" :border-bottom="false"
|
||
|
|
><u-input
|
||
|
|
v-model="form.searchTime"
|
||
|
|
type="select"
|
||
|
|
@click="calendarShow = true"
|
||
|
|
:border="true"
|
||
|
|
placeholder="请选择时间"
|
||
|
|
/></u-form-item>
|
||
|
|
</u-form>
|
||
|
|
<u-calendar
|
||
|
|
v-model="calendarShow"
|
||
|
|
:mode="mode"
|
||
|
|
@change="change"
|
||
|
|
></u-calendar>
|
||
|
|
</view>
|
||
|
|
<!-- eacharts 图表 -->
|
||
|
|
<view class="echarts" v-if="type == 'maintenanceStatistics'">
|
||
|
|
<l-echart ref="chartRef" :key="Math.random()"></l-echart>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 饼状图 -->
|
||
|
|
<view class="echartsPie" v-if="type == 'maintenanceStatisticsPie'">
|
||
|
|
<view class="pie-item">
|
||
|
|
<view style="height:308rpx"><l-echart ref="chartRefPieLeft" :key="Math.random()"></l-echart></view>
|
||
|
|
<text class="pie-title">故障现象分类</text>
|
||
|
|
</view>
|
||
|
|
<view class="pie-item">
|
||
|
|
<view style="height:308rpx"><l-echart ref="chartRefPieRight" :key="Math.random()"></l-echart></view>
|
||
|
|
<text class="pie-title">设备分类</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import * as echarts from "echarts";
|
||
|
|
import lEchart from "@/uni_modules/lime-echart/components/lime-echart/";
|
||
|
|
export default {
|
||
|
|
components: { lEchart },
|
||
|
|
props: {
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
form: {
|
||
|
|
searchTime: "",
|
||
|
|
startTime: "",
|
||
|
|
endTime: "",
|
||
|
|
},
|
||
|
|
calendarShow: false,
|
||
|
|
mode: "range",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// 维修统计
|
||
|
|
if (this.type == "maintenanceStatistics") {
|
||
|
|
this.maintenanceInit();
|
||
|
|
}
|
||
|
|
if (this.type == "maintenanceStatisticsPie") {
|
||
|
|
this.maintenancePieLeftInit();
|
||
|
|
this.maintenancePieRightInit();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
selectFun() {
|
||
|
|
this.calendarShow = true;
|
||
|
|
},
|
||
|
|
change(e) {
|
||
|
|
console.log(e);
|
||
|
|
this.form.startTime = e.startDate;
|
||
|
|
this.form.endTime = e.endDate;
|
||
|
|
this.form.searchTime = e.startDate + "-" + e.endDate;
|
||
|
|
// 查询数据
|
||
|
|
},
|
||
|
|
maintenanceInit() {
|
||
|
|
let opts = {
|
||
|
|
tooltip: {},
|
||
|
|
legend: {
|
||
|
|
//图例组件
|
||
|
|
data: ["总计", "已完成", "未完成"],
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
data: ["报送维修", "巡检维修"],
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: "15%",
|
||
|
|
left: "10%",
|
||
|
|
right: "5%",
|
||
|
|
bottom: "15%",
|
||
|
|
},
|
||
|
|
yAxis: {},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "总计",
|
||
|
|
type: "bar",
|
||
|
|
data: [15, 30],
|
||
|
|
barWidth: 30, // 设置柱子宽度
|
||
|
|
barGap: "0", // 设置不同系列之间的间隔为0
|
||
|
|
itemStyle: {
|
||
|
|
color: "#2478f2",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "已完成",
|
||
|
|
type: "bar",
|
||
|
|
data: [10, 20],
|
||
|
|
barWidth: 30, // 设置柱子宽度
|
||
|
|
barGap: "0", // 设置不同系列之间的间隔为0
|
||
|
|
itemStyle: {
|
||
|
|
color: "#84b7f9",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "未完成",
|
||
|
|
type: "bar",
|
||
|
|
data: [5, 10],
|
||
|
|
barWidth: 30, // 设置柱子宽度
|
||
|
|
barGap: "0", // 设置不同系列之间的间隔为0
|
||
|
|
itemStyle: {
|
||
|
|
color: "#5f9cf8",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
this.$refs.chartRef.init((config) => {
|
||
|
|
const { canvas } = config;
|
||
|
|
const chart = echarts.init(canvas, null, config);
|
||
|
|
chart.setOption(opts);
|
||
|
|
// 需要把 chart 返回
|
||
|
|
return chart;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
maintenancePieLeftInit() {
|
||
|
|
let opts = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "",
|
||
|
|
type: "pie",
|
||
|
|
radius: ['40%', '70%'],
|
||
|
|
label: {
|
||
|
|
// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
|
||
|
|
normal: {
|
||
|
|
show: true,
|
||
|
|
fontSize: 8, // 是否显示标签[ default: false ]
|
||
|
|
position: "outside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
|
||
|
|
formatter: "{b}\n {c}", // 标签内容
|
||
|
|
color:'#000'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
data: [
|
||
|
|
{ value: 248, name: "空调" },
|
||
|
|
{ value: 135, name: "装修类" },
|
||
|
|
{ value: 180, name: "智能设备" },
|
||
|
|
{ value: 654, name: "暖通、自控" },
|
||
|
|
{ value: 300, name: "电气" },
|
||
|
|
],
|
||
|
|
emphasis: {
|
||
|
|
itemStyle: {
|
||
|
|
shadowBlur: 10,
|
||
|
|
shadowOffsetX: 0,
|
||
|
|
shadowColor: "rgba(0, 0, 0, 1)",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
// 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
|
||
|
|
normal: {
|
||
|
|
show: true, // 是否显示视觉引导线。
|
||
|
|
length: 5, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
|
||
|
|
length2: 5,
|
||
|
|
|
||
|
|
// 视觉引导项第二段的长度。
|
||
|
|
lineStyle: {
|
||
|
|
// 视觉引导线的样式
|
||
|
|
type: "solid",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
this.$refs.chartRefPieLeft.init((config) => {
|
||
|
|
const { canvas } = config;
|
||
|
|
const chart = echarts.init(canvas, null, config);
|
||
|
|
chart.setOption(opts);
|
||
|
|
// 需要把 chart 返回
|
||
|
|
return chart;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
maintenancePieRightInit() {
|
||
|
|
let opts = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: "pie",
|
||
|
|
radius: ['40%', '70%'],
|
||
|
|
label: {
|
||
|
|
// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
|
||
|
|
normal: {
|
||
|
|
show: true,
|
||
|
|
fontSize: 8, // 是否显示标签[ default: false ]
|
||
|
|
position: "outside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
|
||
|
|
formatter: "{b}\n {c}", // 标签内容
|
||
|
|
color:'#000'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{ value: 148, name: "空调" },
|
||
|
|
{ value: 735, name: "通风柜" },
|
||
|
|
{ value: 580, name: "设备1" },
|
||
|
|
],
|
||
|
|
labelLine: {
|
||
|
|
// 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
|
||
|
|
normal: {
|
||
|
|
show: true, // 是否显示视觉引导线。
|
||
|
|
length: 5, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
|
||
|
|
length2: 5,
|
||
|
|
// 视觉引导项第二段的长度。
|
||
|
|
lineStyle: {
|
||
|
|
// 视觉引导线的样式
|
||
|
|
type: "solid",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
this.$refs.chartRefPieRight.init((config) => {
|
||
|
|
const { canvas } = config;
|
||
|
|
const chart = echarts.init(canvas, null, config);
|
||
|
|
chart.setOption(opts);
|
||
|
|
// 需要把 chart 返回
|
||
|
|
return chart;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.eacharts-box {
|
||
|
|
background: #fff;
|
||
|
|
margin: 0 40rpx 32rpx;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
.eacharts-time {
|
||
|
|
margin: 0 136rpx 0 24rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
text {
|
||
|
|
line-height: 60rpx;
|
||
|
|
color: rgba(16, 16, 16, 1);
|
||
|
|
font-size: 28rpx;
|
||
|
|
margin-top: 30rpx;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.echarts {
|
||
|
|
width: calc(100% - 64rpx);
|
||
|
|
height: 308rpx;
|
||
|
|
margin: 0 auto 0;
|
||
|
|
}
|
||
|
|
.echartsPie {
|
||
|
|
width: calc(100% - 64rpx);
|
||
|
|
min-height: 308rpx;
|
||
|
|
margin: 0 auto 0;
|
||
|
|
.pie-item {
|
||
|
|
width: 100%;
|
||
|
|
height: 368rpx;
|
||
|
|
// float: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.pie-title {
|
||
|
|
height: 30rpx;
|
||
|
|
text-align: center;
|
||
|
|
display: block;
|
||
|
|
color: rgba(16, 16, 16, 1);
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|