790 lines
20 KiB
Vue
790 lines
20 KiB
Vue
<template>
|
|
<!-- 质量管理 -->
|
|
<!-- <div class="quality">
|
|
<vue-scroll>
|
|
<img src="@/assets/images/dataBoard/8.png" style="height:auto;width:100%"/>
|
|
</vue-scroll>
|
|
</div> -->
|
|
<div v-if="COMPANY != 'longguang'" class="fullHeight dataBoardIndex">
|
|
<qualityAndsecureTab :tabBoxIndex="0"></qualityAndsecureTab>
|
|
<div class="left fullHeight">
|
|
<div class="blockBox blockBox2">
|
|
<div class="blockTitle">
|
|
<!-- 质量问题 -->
|
|
{{ $t("message.dataBoard.qualityProblem") }}
|
|
</div>
|
|
<div class="blockContent">
|
|
<div class="circleBox">
|
|
<div class="ratioChart" ref="ratioChart1"></div>
|
|
</div>
|
|
<div class="circleBox">
|
|
<div class="ratioChart" ref="ratioChart2"></div>
|
|
</div>
|
|
<div class="circleBox">
|
|
<div class="ratioChart" ref="ratioChart3"></div>
|
|
</div>
|
|
<div class="circleBox">
|
|
<div class="ratioChart" ref="ratioChart4"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="blockBox blockBox3" style="height: calc(66.66% - 25px)">
|
|
<div class="blockTitle">
|
|
<!-- 问题趋势 -->
|
|
{{ $t("message.dataBoard.problemTrend") }}
|
|
</div>
|
|
<div class="blockContent">
|
|
<div class="lineChart" ref="lineChart"></div>
|
|
<div class="placeholderBox placeholderBox2" v-if="noData3">
|
|
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
|
<p>
|
|
<!-- 暂无数据 -->
|
|
{{ $t("message.dataBoard.nodata") }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="aside fullHeight">
|
|
<div class="blockBox">
|
|
<div class="blockTitle">
|
|
<!-- 问题类型 -->
|
|
{{ $t("message.dataBoard.problemType") }}
|
|
</div>
|
|
<div class="blockContent">
|
|
<div class="switchBox">
|
|
<span
|
|
@click="
|
|
dataType1 = 1;
|
|
getData2(1);
|
|
"
|
|
:class="dataType1 == 1 ? 'active' : ''"
|
|
>
|
|
<!-- 全部 -->
|
|
{{ $t("message.dataBoard.all") }}
|
|
</span>
|
|
<span
|
|
@click="
|
|
dataType1 = 2;
|
|
getData2(1);
|
|
"
|
|
:class="dataType1 == 2 ? 'active' : ''"
|
|
>
|
|
<!-- 最近30天 -->
|
|
{{ $t("message.dataBoard.lately30days") }}
|
|
</span>
|
|
</div>
|
|
<div class="ratioChart" ref="groupChart"></div>
|
|
<div class="placeholderBox placeholderBox2" v-if="noData1">
|
|
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
|
<p>
|
|
<!-- 暂无数据 -->
|
|
{{ $t("message.dataBoard.nodata") }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="blockBox">
|
|
<div class="blockTitle">
|
|
<!-- 问题占比 -->
|
|
{{ $t("message.dataBoard.problemRatio") }}
|
|
</div>
|
|
<div class="blockContent">
|
|
<div class="safeTrainChart" ref="safeTrainChart"></div>
|
|
<div class="descBox fullHeight">
|
|
<div>
|
|
<div class="descItem descItem1">
|
|
<p class="text">
|
|
<i class="dot red"></i>
|
|
<!-- 紧要问题 -->
|
|
{{ $t("message.dataBoard.improtanceProblem") }}
|
|
</p>
|
|
<p class="num">{{ total.jyUrgentLevelNum }}</p>
|
|
</div>
|
|
<!-- 严重问题 -->
|
|
<!-- <div class="descItem descItem1">
|
|
<p class="text">
|
|
<i class="dot purple"></i>
|
|
|
|
{{ $t("message.dataBoard.seriousnessProblem") }}
|
|
</p>
|
|
<p class="num">{{ total.yzUrgentLevelNum }}</p>
|
|
</div> -->
|
|
<div class="descItem">
|
|
<p class="text">
|
|
<i class="dot green"></i>
|
|
<!-- 一般问题 -->
|
|
{{ $t("message.dataBoard.commonProblem") }}
|
|
</p>
|
|
<p class="num">{{ total.ybUrgentLevelNum }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="blockBox">
|
|
<div class="blockTitle">
|
|
<!-- 频发问题 -->
|
|
{{ $t("message.dataBoard.frequentProblem") }}
|
|
</div>
|
|
<div class="blockContent">
|
|
<div class="switchBox">
|
|
<!-- 全部 -->
|
|
<!-- <span
|
|
@click="
|
|
dataType2 = 1;
|
|
getData2(2);
|
|
"
|
|
:class="dataType2 == 1 ? 'active' : ''"
|
|
>
|
|
|
|
{{ $t("message.dataBoard.all") }}
|
|
</span> -->
|
|
<!-- 最近30天 -->
|
|
<!-- <span
|
|
@click="
|
|
dataType2 = 2;
|
|
getData2(2);
|
|
"
|
|
:class="dataType2 == 2 ? 'active' : ''"
|
|
>
|
|
|
|
{{ $t("message.dataBoard.lately30days") }}
|
|
</span> -->
|
|
</div>
|
|
<div class="ratioChart" ref="frequentChart"></div>
|
|
<div class="placeholderBox placeholderBox2" v-if="noData2">
|
|
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
|
<p>
|
|
<!-- 暂无数据 -->
|
|
{{ $t("message.dataBoard.nodata") }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<QualityTwo v-else></QualityTwo>
|
|
</template>
|
|
<script>
|
|
import echarts from "echarts4";
|
|
import qualityAndsecureTab from "./components/qualityAndsecure"
|
|
import {
|
|
selectDangerTypeQualityCountApi,
|
|
selectQualityStatisticsApi,
|
|
} from "@/assets/js/api/dataBoard";
|
|
import QualityTwo from "./qualityTwo";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
dataType1: 1,
|
|
dataType2: 1,
|
|
total: {
|
|
closeNum: 3,
|
|
investigateNum: 0,
|
|
jyUrgentLevelNum: 0,
|
|
notCloseNum: 0,
|
|
overdueNotCloseNum: 0,
|
|
rectificationNum: 0,
|
|
reviewNum: 0,
|
|
totalNum: 3,
|
|
verificationNum: 0,
|
|
ybUrgentLevelNum: 2,
|
|
yzUrgentLevelNum: 1,
|
|
},
|
|
noData1: true,
|
|
noData2: true,
|
|
noData3: true,
|
|
projectSn: "",
|
|
COMPANY: "",
|
|
};
|
|
},
|
|
components: {
|
|
QualityTwo,qualityAndsecureTab
|
|
},
|
|
created() {
|
|
this.COMPANY = COMPANY;
|
|
console.log(COMPANY);
|
|
},
|
|
mounted() {
|
|
// if (COMPANY) {
|
|
//
|
|
// }
|
|
|
|
this.projectSn = this.$store.state.projectSn;
|
|
console.log("this.projectSn", this.projectSn);
|
|
this.getData1()
|
|
this.getData2(1)
|
|
this.getData2(2)
|
|
console.log(this);
|
|
},
|
|
// updated() {
|
|
// this.getData1();
|
|
// this.getData2(1);
|
|
// this.getData2(2);
|
|
// },
|
|
methods: {
|
|
//获取数据
|
|
getData1() {
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
};
|
|
selectQualityStatisticsApi(data).then((res) => {
|
|
this.total = res.result.total;
|
|
/* "问题总数" */
|
|
|
|
this.createPieChart(
|
|
[
|
|
{ value: this.total.jyUrgentLevelNum, name: "" },
|
|
{
|
|
value: this.total.yzUrgentLevelNum,
|
|
name: "",
|
|
},
|
|
{
|
|
value: this.total.ybUrgentLevelNum,
|
|
name: "",
|
|
},
|
|
],
|
|
|
|
this.$refs.safeTrainChart,
|
|
[
|
|
"rgba(254, 108, 127, 1)",
|
|
"rgba(120, 111, 240, 1)",
|
|
"rgba(68, 215, 182, 1)",
|
|
],
|
|
this.$t("message.dataBoard.questionAllCounts"),
|
|
this.total.totalNum
|
|
);
|
|
// /* "问题总数" */
|
|
this.createPieChart(
|
|
[
|
|
{ value: 1, name: "" },
|
|
{
|
|
value: 0,
|
|
name: "",
|
|
},
|
|
],
|
|
this.$refs.ratioChart1,
|
|
["#557DED", "rgba(68, 215, 182, 0.2)"],
|
|
this.$t("message.dataBoard.questionAllCounts"),
|
|
this.total.totalNum
|
|
);
|
|
/* "未闭合问题数" */
|
|
this.createPieChart(
|
|
[
|
|
{ value: 1, name: "" },
|
|
{
|
|
value: 0,
|
|
name: "",
|
|
},
|
|
],
|
|
this.$refs.ratioChart2,
|
|
["#7718fe", "rgba(68, 215, 182, 0.2)"],
|
|
this.$t("message.dataBoard.statusArr2")[0] +
|
|
this.$t("message.dataBoard.problenNum"),
|
|
this.total.notCloseNum
|
|
);
|
|
/* "未整改问题数" */
|
|
this.createPieChart(
|
|
[
|
|
{ value: 1, name: "" },
|
|
{
|
|
value: 0,
|
|
name: "",
|
|
},
|
|
],
|
|
this.$refs.ratioChart3,
|
|
["#fe6c7f", "rgba(68, 215, 182, 0.2)"],
|
|
this.$t("message.dataBoard.statusArr2")[1] +
|
|
this.$t("message.dataBoard.problenNum"),
|
|
this.total.rectificationNum
|
|
);
|
|
var ratioNum = this.total.totalNum
|
|
? ((this.total.closeNum / this.total.totalNum) * 100).toFixed(2)
|
|
: 0;
|
|
/* "及时整改率" */
|
|
this.createPieChart(
|
|
[
|
|
{ value: ratioNum, name: "" },
|
|
{
|
|
value: 100 - ratioNum,
|
|
name: "",
|
|
},
|
|
],
|
|
this.$refs.ratioChart4,
|
|
["rgba(68, 215, 182, 1)", "rgba(68, 215, 182, 0.2)"],
|
|
this.$t("message.dataBoard.statusArr2")[2],
|
|
ratioNum + "%"
|
|
);
|
|
var arr = res.result.monthList;
|
|
var xData = [],
|
|
yData1 = [];
|
|
if (arr.length > 0) {
|
|
arr.forEach((element) => {
|
|
var date = element.titleName.substr(5, element.titleName.length);
|
|
xData.push(date);
|
|
yData1.push(element.num);
|
|
});
|
|
this.noData3 = false;
|
|
} else {
|
|
this.noData3 = true;
|
|
}
|
|
this.createLineChart(xData, yData1);
|
|
});
|
|
},
|
|
getData2(opType) {
|
|
let data = {
|
|
projectSn: this.$store.state.projectSn,
|
|
opType: opType,
|
|
};
|
|
if (opType == 1) {
|
|
data.selectType = this.dataType1;
|
|
} else {
|
|
data.selectType = this.dataType2;
|
|
}
|
|
selectDangerTypeQualityCountApi(data).then((res) => {
|
|
var arr = res.result.list;
|
|
if (opType == 1) {
|
|
if (arr.length == 0) {
|
|
this.noData1 = true;
|
|
} else {
|
|
this.noData1 = false;
|
|
}
|
|
} else {
|
|
if (arr.length == 0) {
|
|
this.noData2 = true;
|
|
} else {
|
|
this.noData2 = false;
|
|
}
|
|
}
|
|
var xData = [],
|
|
yData1 = [],
|
|
yData2 = [];
|
|
var total = 0;
|
|
arr.forEach((element) => {
|
|
xData.push(element.dangerName);
|
|
yData1.push(element.num);
|
|
total += element.num;
|
|
});
|
|
arr.forEach((element) => {
|
|
yData2.push(total);
|
|
});
|
|
if (opType == 1) {
|
|
this.createGroupChart(xData, yData1, yData2, this.$refs.groupChart);
|
|
} else {
|
|
this.createdBarCharts(xData, yData1, this.$refs.frequentChart);
|
|
}
|
|
});
|
|
},
|
|
createPieChart(data, div, color, title, total) {
|
|
let that = this;
|
|
// if(!div){
|
|
// return
|
|
// }
|
|
console.log(this);
|
|
let monitor = echarts.init(div);
|
|
// monitor.clear();
|
|
var option = {
|
|
color: color ? color : ["#5181F6", "#61D2B9", "#F67F51", "#7851F6"],
|
|
title: {
|
|
show: true,
|
|
text: total,
|
|
x: "48%",
|
|
y: "36%",
|
|
z: 5,
|
|
textAlign: "center",
|
|
textStyle: {
|
|
color: "rgba(255, 255, 255, 1)",
|
|
fontSize: 20,
|
|
},
|
|
subtext: title,
|
|
subtextStyle: {
|
|
color: "rgba(255, 255, 255, 0.8)",
|
|
fontSize: 13,
|
|
},
|
|
},
|
|
grid: {
|
|
right: 0,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
// tooltip: {
|
|
// // data: ['在线', '离线'],
|
|
// trigger: "item",
|
|
// formatter: "{a} <br/>{b}: {c} ({d}%)",
|
|
// },
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
radius: ["50%", "70%"],
|
|
avoidLabelOverlap: false,
|
|
hoverAnimation: false,
|
|
label: {
|
|
show: false,
|
|
position: "center",
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: data,
|
|
},
|
|
],
|
|
};
|
|
// if(color){
|
|
// option.series[0].radius=["75%", "85%"]
|
|
// option.title.x="45%"
|
|
// option.legend.show=false
|
|
// }
|
|
monitor.setOption(option);
|
|
},
|
|
createLineChart(xData, yData1) {
|
|
// if(!this.$refs.lineChart){
|
|
// return
|
|
// }
|
|
let monitor = echarts.init(this.$refs.lineChart);
|
|
var option = (option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
position: function (pt) {
|
|
return [pt[0], "10%"];
|
|
},
|
|
},
|
|
grid: {
|
|
top: 30,
|
|
left: 20,
|
|
bottom: 20,
|
|
right: 20,
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
boundaryGap: false,
|
|
type: "category",
|
|
data: xData,
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#9fa2ad",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "rgba(231, 233, 243, 0.2)",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#9fa2ad",
|
|
},
|
|
},
|
|
color: ["rgba(248, 195, 21, 1)"],
|
|
series: [
|
|
{
|
|
name: /* '问题数', */ this.$t("message.dataBoard.problenNum"),
|
|
data: yData1,
|
|
type: "line",
|
|
smooth: true,
|
|
symbolSize: 0,
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "rgba(248, 195, 21, 0.3)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(248, 195, 21, 0)",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
],
|
|
});
|
|
monitor.setOption(option);
|
|
},
|
|
//班组图表
|
|
createGroupChart(xData, yData1, yData2, el, legendData) {
|
|
// if(!el){
|
|
// return
|
|
// }
|
|
let monitor = echarts.init(el);
|
|
var option = {
|
|
legend: {
|
|
show: false,
|
|
align: "left",
|
|
top: 5,
|
|
left: 0,
|
|
itemWidth: 13,
|
|
itemHeight: 5,
|
|
textStyle: {
|
|
color: "#9fa2ad",
|
|
},
|
|
},
|
|
grid: {
|
|
left: "10",
|
|
right: "10",
|
|
bottom: "10",
|
|
top: "10",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "value",
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
formatter: function () {
|
|
return "";
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "category",
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
data: xData,
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontSize: 13,
|
|
color: "white",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: /* "出勤人数", */ this.$t(
|
|
"message.dataBoard.attendanceOrTotal"
|
|
)[0],
|
|
type: "bar",
|
|
barWidth: 13,
|
|
data: yData1,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
{ offset: 0, color: "#4A90E2" },
|
|
{ offset: 1, color: "#4ADEE2" },
|
|
]),
|
|
barBorderRadius: 3,
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "right",
|
|
color: "white",
|
|
textStyle: {
|
|
fontSize: 15,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
// For shadow
|
|
name: /* "总人数", */ this.$t(
|
|
"message.dataBoard.attendanceOrTotal"
|
|
)[1],
|
|
type: "bar",
|
|
itemStyle: {
|
|
color: "rgba(255,255,255,0.1)",
|
|
barBorderRadius: 3,
|
|
},
|
|
barGap: "-100%",
|
|
barCategoryGap: "40%",
|
|
data: yData2,
|
|
animation: false,
|
|
barWidth: 13,
|
|
// label: {
|
|
// show: true,
|
|
// position: "right",
|
|
// color: "white",
|
|
// textStyle: {
|
|
// fontSize: 15,
|
|
// },
|
|
// },
|
|
},
|
|
],
|
|
};
|
|
monitor.clear();
|
|
monitor.setOption(option);
|
|
},
|
|
//年龄结构---图表
|
|
createdBarCharts(xData, yData1, el) {
|
|
let that = this;
|
|
// if(!el){
|
|
// return
|
|
// }
|
|
let ageChart = echarts.init(el);
|
|
// ageChart.clear();
|
|
let option = {
|
|
grid: {
|
|
top: 10,
|
|
left: 0,
|
|
bottom: 5,
|
|
right: 20,
|
|
containLabel: true,
|
|
},
|
|
color: ["#FE6C7F", "#5181F6"],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
// legend: {
|
|
// show: false,
|
|
// align: "left",
|
|
// top: 5,
|
|
// left: 0,
|
|
// itemWidth: 13,
|
|
// itemHeight: 5,
|
|
// textStyle: {
|
|
// color: "#9fa2ad",
|
|
// },
|
|
// },
|
|
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: xData,
|
|
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, 0.2)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#9fa2ad",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: /* '数量', */ this.$t("message.dataBoard.num"),
|
|
type: "bar",
|
|
data: yData1,
|
|
barWidth: 14,
|
|
},
|
|
// {
|
|
// name: legendData[1],
|
|
// type: "bar",
|
|
// data: yData2,
|
|
// barWidth: 14,
|
|
// barGap: 0.1,
|
|
// },
|
|
],
|
|
};
|
|
ageChart.clear();
|
|
ageChart.setOption(option);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
// .quality{
|
|
// height: 100%;
|
|
// width:100%;
|
|
// text-align: center;
|
|
// }
|
|
.safeTrainChart {
|
|
width: 50%;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
.lineChart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.circleBox {
|
|
width: 25%;
|
|
float: left;
|
|
text-align: center;
|
|
height: 100%;
|
|
}
|
|
.circleInner {
|
|
border: 16px solid #557ded;
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
.num {
|
|
color: white;
|
|
font-size: 24px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.text {
|
|
font-size: 12px;
|
|
}
|
|
&.purple {
|
|
border-color: rgba(119, 24, 254, 1);
|
|
}
|
|
&.red {
|
|
border-color: rgba(254, 108, 127, 1);
|
|
}
|
|
}
|
|
.ratioChart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.switchBox {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: -10px;
|
|
span {
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
&:first-child {
|
|
margin-right: 20px;
|
|
}
|
|
&.active {
|
|
color: #5bdff4;
|
|
}
|
|
}
|
|
}
|
|
</style>
|