217 lines
4.6 KiB
Vue
217 lines
4.6 KiB
Vue
<template>
|
|
<div class="reportCenter flex">
|
|
<div class="left whiteBlock">
|
|
<vue-scroll style="width: 100%">
|
|
<div
|
|
v-for="item in listData"
|
|
:key="item.id"
|
|
class="list_title"
|
|
:class="checkedId == item.id ? 'checked_color' : 'nocheck'"
|
|
@click="checkedId = item.id"
|
|
>
|
|
<span class="list_name">{{ item.name }}</span>
|
|
</div>
|
|
</vue-scroll>
|
|
</div>
|
|
<div class="right whiteBlock">
|
|
<div class="chart" ref="ageChart"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getDepartmentListApi
|
|
} from '@/assets/js/api/quality.js'
|
|
import echarts from 'echarts4';;
|
|
export default {
|
|
data() {
|
|
return {
|
|
projectSn: "",
|
|
userEnterpriseId: '',
|
|
listData: [
|
|
{ id: 1, name: '整改排名' },
|
|
],
|
|
checkedId: "",
|
|
};
|
|
},
|
|
created() {
|
|
this.projectSn = this.$store.state.projectSn;
|
|
this.checkedId = this.listData[0].id;
|
|
this.getListData();
|
|
},
|
|
methods: {
|
|
getListData() {
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
};
|
|
getDepartmentListApi(data).then((res) => {
|
|
console.log('res---------', res);
|
|
if (res.code == 200) {
|
|
var Data = res.result;
|
|
var yData2 = []
|
|
var yData3 = []
|
|
Data.forEach((element) => {
|
|
|
|
yData2.push(element.rectifiedNumber);
|
|
yData3.push(element.departmentName);
|
|
});
|
|
this.createdBarCharts(
|
|
yData2,
|
|
yData3,
|
|
// yData2 = [10],
|
|
// yData3 = ['研发部'],
|
|
this.$refs.ageChart,
|
|
);
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
});
|
|
},
|
|
//企业出勤---图表
|
|
createdBarCharts(yData2, yData3, el) {
|
|
console.log('yData2', yData2);
|
|
let that = this;
|
|
let ageChart = echarts.init(el);
|
|
ageChart.clear();
|
|
let option = {
|
|
grid: {
|
|
top: 40,
|
|
left: 0,
|
|
bottom: 5,
|
|
right: 20,
|
|
containLabel: true,
|
|
},
|
|
color: ["#5CE2F6", "#5181F6", '#8EBDD2'],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
legend: {
|
|
show: true,
|
|
align: "left",
|
|
top: 5,
|
|
left: 0,
|
|
itemWidth: 13,
|
|
itemHeight: 5,
|
|
textStyle: {
|
|
color: "#9fa2ad",
|
|
},
|
|
},
|
|
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: yData3,
|
|
boundaryGap: true,
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#9fa2ad",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
],
|
|
|
|
yAxis: {
|
|
type: "value",
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "rgba(231, 233, 243, 1)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#9fa2ad",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '部门',
|
|
type: "bar",
|
|
data: yData2,
|
|
barWidth: 35,
|
|
barGap: 0.1,
|
|
},
|
|
// {
|
|
// name: legendData[0],
|
|
// type: "bar",
|
|
// data: yData1,
|
|
// barWidth: 35,
|
|
// },
|
|
// {
|
|
// name: legendData[2],
|
|
// type: "bar",
|
|
// data: yData3,
|
|
// barWidth: 35,
|
|
// barGap: 0.1,
|
|
// },
|
|
],
|
|
};
|
|
|
|
ageChart.setOption(option);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
.flex2 {
|
|
display: flex;
|
|
align-content: center;
|
|
}
|
|
.flex3 {
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: space-between;
|
|
}
|
|
.reportCenter {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
.left {
|
|
width: 300px;
|
|
box-sizing: border-box;
|
|
margin-right: 15px;
|
|
padding: 5px 0;
|
|
.list_title {
|
|
width: 100%;
|
|
line-height: 43px;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
}
|
|
.checked_color {
|
|
border-left: 3px solid #5181f6;
|
|
background: #edf2fe;
|
|
}
|
|
.nocheck {
|
|
padding-left: 3px;
|
|
}
|
|
.list_name {
|
|
padding: 0 15px;
|
|
}
|
|
}
|
|
.right {
|
|
width: calc(100% - 300px);
|
|
box-sizing: border-box;
|
|
padding: 15px 20px;
|
|
.chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style> |