254 lines
6.7 KiB
Vue
254 lines
6.7 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||
<el-date-picker
|
||
v-model="formInline.faultStartTime"
|
||
type="datetime"
|
||
placeholder="选择日期时间"
|
||
align="right">
|
||
</el-date-picker>-----
|
||
<el-date-picker
|
||
v-model="formInline.faultEndTime"
|
||
type="datetime"
|
||
placeholder="选择日期时间"
|
||
align="right">
|
||
</el-date-picker>
|
||
<el-button @click="look()">观看</el-button>
|
||
</el-form>
|
||
|
||
<!-- <el-button @click="par()">柱状图</el-button>-->
|
||
<!-- <el-button @click="pie()">饼状图</el-button>-->
|
||
<el-table v-loading="loading" :data="breakdownList" @selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
<el-table-column label="主键" align="center" prop="id" />
|
||
<el-table-column label="故障码" align="center" prop="faultCode" />
|
||
<el-table-column label="车辆标识" align="center" prop="vin" />
|
||
<el-table-column label="故障状态" align="center" prop="faultState" />
|
||
<el-table-column label="故障产生时间" align="center" prop="faultStartTime" width="180">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.faultStartTime, '{y}-{m}-{d}') }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="故障解决时间" align="center" prop="faultEndTime" width="180">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.faultEndTime, '{y}-{m}-{d}') }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="故障等级" align="center" prop="faultLevel" width="180"></el-table-column>
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="total>0"
|
||
:total="total"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
<div id="main" rel="stylesheet" style="height: 400px;width: 400px;display: flex;
|
||
align-items: center;justify-content: center"></div>
|
||
<div id="main2" rel="stylesheet" style="height: 400px;width: 400px;display: flex;
|
||
align-items: center;justify-content: center"></div>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listBreakdown, pies } from "@/api/goods/breakdown";
|
||
import * as echarts from "echarts";
|
||
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||
// 例如：import 《组件名称》 from '《组件路径》,
|
||
export default {
|
||
// import引入的组件需要注入到对象中才能使用"
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
// 这里存放数据"
|
||
return {
|
||
a: [],
|
||
b: [],
|
||
c: [],
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
},
|
||
formInline: {
|
||
faultStartTime: null,
|
||
faultEndTime: null
|
||
},
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1;
|
||
console.log(this.queryParams)
|
||
this.getList();
|
||
},
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.resetForm("queryForm");
|
||
this.handleQuery();
|
||
},
|
||
// 总条数
|
||
total: 0,
|
||
// 遮罩层
|
||
loading: true,
|
||
// 故障列表
|
||
breakdownList: [],
|
||
// 多选框选中数据
|
||
handleSelectionChange(selection) {
|
||
this.ids = selection.map(item => item.id)
|
||
this.single = selection.length!==1
|
||
this.multiple = !selection.length
|
||
},
|
||
}
|
||
},
|
||
// 计算属性 类似于data概念",
|
||
computed: {},
|
||
// 监控data中的数据变化",
|
||
watch: {},
|
||
// 方法集合",
|
||
methods: {
|
||
look() {
|
||
this.getPers()
|
||
this.par()
|
||
this.pie()
|
||
},
|
||
/** 查询企业列表 */
|
||
getList() {
|
||
this.loading = true;
|
||
listBreakdown(this.queryParams).then(response => {
|
||
this.breakdownList = response.data.rows;
|
||
this.total = response.data.total;
|
||
this.loading = false;
|
||
console.log(response)
|
||
});
|
||
},
|
||
getPers() {
|
||
pies(this.formInline).then(res => {
|
||
let a1 = []
|
||
let b1 = []
|
||
res.data.forEach(ren => {
|
||
a1.push(ren.name)
|
||
b1.push(ren.value)
|
||
this.a = a1;
|
||
this.b = b1;
|
||
})
|
||
this.c = res.data
|
||
})
|
||
|
||
// setTimeout(() => {
|
||
// this.par()
|
||
// this.pie()
|
||
// },5000)
|
||
|
||
|
||
},
|
||
//柱状图
|
||
par() {
|
||
// 基本柱状图
|
||
const option = {
|
||
title: {
|
||
text: '平面展示'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
boundaryGap: [0, 0.01]
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: this.a
|
||
},
|
||
series: [
|
||
{
|
||
type: 'bar',
|
||
data: this.b
|
||
},
|
||
]
|
||
};
|
||
|
||
const myChart = echarts.init(document.getElementById("main"));
|
||
myChart.setOption(option);
|
||
//随着屏幕大小调节图表
|
||
// window.addEventListener("resize", () => {
|
||
// myChart.resize();
|
||
// });
|
||
},
|
||
//饼状图
|
||
pie() {
|
||
const option = {
|
||
title: {
|
||
text: '百分比展示',
|
||
subtext: '占比',
|
||
left: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 'left'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: '50%',
|
||
data: this.c
|
||
,
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
const myChart = echarts.init(document.getElementById("main2"));
|
||
myChart.setOption(option);
|
||
}
|
||
},
|
||
// 生命周期 - 创建完成（可以访问当前this实例）",
|
||
created() {
|
||
},
|
||
// 生命周期 - 挂载完成（可以访问DOM元素）",
|
||
mounted() {
|
||
this.getList()
|
||
this.getPers()
|
||
},
|
||
beforeCreate() {
|
||
}, // 生命周期 - 创建之前",
|
||
beforeMount() {
|
||
}, // 生命周期 - 挂载之前",
|
||
beforeUpdate() {
|
||
}, // 生命周期 - 更新之前",
|
||
updated() {
|
||
}, // 生命周期 - 更新之后",
|
||
beforeDestroy() {
|
||
}, // 生命周期 - 销毁之前",
|
||
destroyed() {
|
||
}, // 生命周期 - 销毁完成",
|
||
activated() {
|
||
} // 如果页面有keep-alive缓存功能，这个函数会触发",
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
|
||
</style>
|