质量管理 左下角模块更换质量文件管理
This commit is contained in:
parent
4b746e7db9
commit
793f4aa87b
@ -22,3 +22,8 @@ export const getQualityInspectionGrade = (params: {}) => {
|
||||
export const getCountHiddenDangerInspectRegion = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/qualityInspectionRecord/countQualityInspectionRecordRegion`, params, { headers: { noLoading: true } });
|
||||
};
|
||||
|
||||
// 质量 文件统计
|
||||
export const getQualityTypeGroup = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/qualityFile/typeGroup`, params, { headers: { noLoading: true } });
|
||||
};
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
<div class="loginOutIcon">
|
||||
<img src="@/assets/images/dustNoise/jumpIcon.png" />
|
||||
</div>
|
||||
<div class="userName">项目后台</div>
|
||||
<div class="userName">{{ [2, 7].includes(store.accountType) ? '企业前台' : '项目后台' }}</div>
|
||||
</div>
|
||||
<div class="loginOut" @click="loginOut">
|
||||
<div class="loginOutIcon">
|
||||
@ -686,6 +686,7 @@ function jumpBgd() {
|
||||
window.location.replace("http://182.90.224.237:15551/#/login?token=" + store.token);
|
||||
} else if (envList.includes(COMPANY)) {
|
||||
window.location.replace(BASEURL + "/#/login?token=" + store.token);
|
||||
// window.location.replace("http://192.168.34.216:8081" + "/#/login?token=" + store.token);
|
||||
} else {
|
||||
// 新项目通用(百色服务器)
|
||||
window.location.replace("http://101.43.164.214:11111/#/login?token=" + store.token);
|
||||
|
||||
@ -0,0 +1,459 @@
|
||||
<template>
|
||||
<Card title="隐患等级分析">
|
||||
<div class="leftBottomBox">
|
||||
<div class="rightHeader">
|
||||
<div class="day" :class="airType == 1 ? 'active' : ''" @click="selectChange(1)">近7天</div>
|
||||
<div class="year" :class="airType == 2 ? 'active' : ''" @click="selectChange(2)">近30天</div>
|
||||
<div class="time">
|
||||
<el-date-picker
|
||||
v-model="rangeTime"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
:clearable="false"
|
||||
@change="rangeTimeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="styleImg"></div>
|
||||
<div id="echartsLeftCenter" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import { onMounted, onBeforeUnmount, ref } from "vue";
|
||||
import { getQualityInspectionGrade } from "@/api/modules/qualityManagement";
|
||||
import * as echarts from "echarts";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
const airType = ref(1);
|
||||
|
||||
let colorList = ref(["#4cc4f8", "#ec6266"] as any);
|
||||
|
||||
let rangeTime = ref("" as any);
|
||||
let dataList = ref([] as any);
|
||||
// let dataList = ref([
|
||||
// {
|
||||
// value: 75,
|
||||
// show: true,
|
||||
// name: "一般隐患",
|
||||
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: "#4bc3f9",
|
||||
// borderWidth: 20
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// value: 63,
|
||||
// show: true,
|
||||
// name: "严重隐患",
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: "#ec6266",
|
||||
// borderWidth: 20
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// ]);
|
||||
function Pie() {
|
||||
let dataArr = [];
|
||||
for (let i = 0; i < 150; i++) {
|
||||
if (i % 2 === 0) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#7cf4f1",
|
||||
borderWidth: 0,
|
||||
borderColor: "#7f6546"
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
borderColor: "rgba(0,0,0,0)"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return dataArr;
|
||||
}
|
||||
let gradeMax = ref(0 as any);
|
||||
function drawEchart() {
|
||||
let echartsTest = echarts.init(document.getElementById("echartsLeftCenter"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
title: {
|
||||
text: gradeMax.value,
|
||||
subtext: "问题总数",
|
||||
x: "24%",
|
||||
y: "45%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 24,
|
||||
fontWeight: "normal",
|
||||
fontFamily: "sadigitalNumber",
|
||||
lineHeight: 35
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#ccc",
|
||||
fontSize: 16,
|
||||
fontWeight: "normal"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
selectedMode: false, // 取消图例上的点击事件
|
||||
icon: "rect",
|
||||
type: "plain",
|
||||
orient: "vertical",
|
||||
left: "50%",
|
||||
top: "30%",
|
||||
align: "left",
|
||||
itemGap: 30,
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
textStyle: {
|
||||
color: "#000",
|
||||
rich: {
|
||||
name: {
|
||||
verticalAlign: "right",
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
value: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
data: dataList.value.map(item => {
|
||||
if (item.show) {
|
||||
return item.name;
|
||||
}
|
||||
}),
|
||||
formatter: function (data: any) {
|
||||
// 分母不为0
|
||||
if (gradeMax.value === 0) {
|
||||
gradeMax.value = 1;
|
||||
}
|
||||
if (dataList.value && dataList.value.length) {
|
||||
for (let i = 0; i < dataList.value.length; i++) {
|
||||
if (data === dataList.value[i].name) {
|
||||
let value = dataList.value[i].value;
|
||||
let percentage = ((value / gradeMax.value) * 100).toFixed(2) + "%";
|
||||
return "{name| " + data + "} {gap| }" + "{value| " + value + " " + percentage + "}";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
// 外侧光线
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "55%"],
|
||||
radius: "65%",
|
||||
startAngle: 235,
|
||||
endAngle: -50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
100 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#526277"
|
||||
},
|
||||
{
|
||||
offset: 0.25,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 0.7,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#526277"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "55%"],
|
||||
radius: "56%",
|
||||
startAngle: 245,
|
||||
endAngle: -115,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
200 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0.8,
|
||||
color: "#52bef0"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#13356b"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: [80, 90],
|
||||
center: ["25%", "55%"],
|
||||
hoverAnimation: true,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 10
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList.value
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["38%", "40%"],
|
||||
center: ["25%", "55%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
|
||||
data: Pie()
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
}
|
||||
|
||||
// 查询类型 type 1.近7天,2. 30天 3.指定开结束时间
|
||||
let selectType = ref(1 as any);
|
||||
// "createTime_begin" 开始时间
|
||||
let startTime = ref("" as any);
|
||||
// "createTime_end", 结束时间
|
||||
let endTime = ref("" as any);
|
||||
// 隐患等级分析
|
||||
const getHazardLevel = async () => {
|
||||
const res: any = await getQualityInspectionGrade({
|
||||
projectSn: store.sn,
|
||||
type: selectType.value,
|
||||
createTime_begin: startTime.value,
|
||||
createTime_end: endTime.value
|
||||
});
|
||||
console.log("质量管理-隐患等级分析", res);
|
||||
dataList.value = res.result.data.map((item: any, index: any) => {
|
||||
return {
|
||||
value: Number(item.count),
|
||||
show: true,
|
||||
name: item.name,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: colorList.value[index],
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
gradeMax.value = Number(res.result.count);
|
||||
|
||||
drawEchart();
|
||||
// console.log("隐患等级分析", res);
|
||||
};
|
||||
|
||||
function selectChange(e: any) {
|
||||
airType.value = e;
|
||||
selectType.value = e;
|
||||
rangeTime.value = "";
|
||||
startTime.value = "";
|
||||
endTime.value = "";
|
||||
getHazardLevel();
|
||||
}
|
||||
|
||||
function rangeTimeChange(e: any) {
|
||||
console.log("时间范围", e[0], e[1]);
|
||||
startTime.value = e[0];
|
||||
endTime.value = e[1];
|
||||
selectType.value = 3;
|
||||
airType.value = 3;
|
||||
getHazardLevel();
|
||||
}
|
||||
defineExpose({
|
||||
getHazardLevel
|
||||
})
|
||||
onMounted(() => {
|
||||
getHazardLevel();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.leftBottomBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.num {
|
||||
width: 66px;
|
||||
text-align: center;
|
||||
font-family: sadigitalNumber;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 18%;
|
||||
z-index: 9;
|
||||
}
|
||||
// .styleImg {
|
||||
// left: 6%;
|
||||
// top: 17%;
|
||||
// width: 40%;
|
||||
// position: absolute;
|
||||
// height: 60%;
|
||||
// background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
||||
// background-size: cover;
|
||||
// }
|
||||
.rightHeader {
|
||||
width: 65%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 2.5vh;
|
||||
left: 34%;
|
||||
top: 23%;
|
||||
.Selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.day {
|
||||
height: 5%;
|
||||
width: 15%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
margin-top: -17%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.year {
|
||||
height: 5%;
|
||||
width: 15%;
|
||||
margin-right: 8%;
|
||||
z-index: 99;
|
||||
margin-top: -17%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
left: 37%;
|
||||
margin-top: -18%;
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 85%;
|
||||
height: 0%;
|
||||
background: #0d2956;
|
||||
}
|
||||
:deep(.el-range-separator) {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
:deep(.el-range-input) {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<Card title="隐患等级分析">
|
||||
<Card title="质量文件管理">
|
||||
<div class="leftBottomBox">
|
||||
<div class="rightHeader">
|
||||
<div class="day" :class="airType == 1 ? 'active' : ''" @click="selectChange(1)">近7天</div>
|
||||
<div class="year" :class="airType == 2 ? 'active' : ''" @click="selectChange(2)">近30天</div>
|
||||
<!-- <div class="day" :class="airType == 1 ? 'active' : ''" @click="selectChange(1)">近7天</div>
|
||||
<div class="year" :class="airType == 2 ? 'active' : ''" @click="selectChange(2)">近30天</div> !-->
|
||||
<div class="time">
|
||||
<el-date-picker
|
||||
v-model="rangeTime"
|
||||
@ -12,7 +12,7 @@
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
:clearable="false"
|
||||
:clearable="true"
|
||||
@change="rangeTimeChange"
|
||||
/>
|
||||
</div>
|
||||
@ -26,7 +26,7 @@
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import { onMounted, onBeforeUnmount, ref } from "vue";
|
||||
import { getQualityInspectionGrade } from "@/api/modules/qualityManagement";
|
||||
import { getQualityTypeGroup } from "@/api/modules/qualityManagement";
|
||||
import * as echarts from "echarts";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
@ -101,7 +101,7 @@ function drawEchart() {
|
||||
},
|
||||
title: {
|
||||
text: gradeMax.value,
|
||||
subtext: "问题总数",
|
||||
subtext: "文件总数",
|
||||
x: "24%",
|
||||
y: "45%",
|
||||
textAlign: "center",
|
||||
@ -161,7 +161,8 @@ function drawEchart() {
|
||||
if (data === dataList.value[i].name) {
|
||||
let value = dataList.value[i].value;
|
||||
let percentage = ((value / gradeMax.value) * 100).toFixed(2) + "%";
|
||||
return "{name| " + data + "} {gap| }" + "{value| " + value + " " + percentage + "}";
|
||||
const space = data.length === 4 ? " " : " ";
|
||||
return "{name| " + data + "} {gap|" + space + "}" + "{value| " + value + " " + percentage + "}";
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -320,28 +321,32 @@ let startTime = ref("" as any);
|
||||
let endTime = ref("" as any);
|
||||
// 隐患等级分析
|
||||
const getHazardLevel = async () => {
|
||||
const res: any = await getQualityInspectionGrade({
|
||||
const res: any = await getQualityTypeGroup({
|
||||
projectSn: store.sn,
|
||||
type: selectType.value,
|
||||
// type: selectType.value,
|
||||
createTime_begin: startTime.value,
|
||||
createTime_end: endTime.value
|
||||
});
|
||||
console.log("质量管理-隐患等级分析", res);
|
||||
dataList.value = res.result.data.map((item: any, index: any) => {
|
||||
return {
|
||||
value: Number(item.count),
|
||||
dataList.value = Object.entries(res.result);
|
||||
let index = 0;
|
||||
gradeMax.value = 0;
|
||||
for (const [key, value] of Object.entries(res.result)) {
|
||||
console.log(`${key}: ${value}`);
|
||||
index++;
|
||||
dataList.value.push({
|
||||
value: Number(value),
|
||||
show: true,
|
||||
name: item.name,
|
||||
name: key,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: colorList.value[index],
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
gradeMax.value = Number(res.result.count);
|
||||
});
|
||||
gradeMax.value = Number(gradeMax.value) > Number(value) ? gradeMax.value : Number(value);
|
||||
}
|
||||
|
||||
drawEchart();
|
||||
// console.log("隐患等级分析", res);
|
||||
@ -357,9 +362,14 @@ function selectChange(e: any) {
|
||||
}
|
||||
|
||||
function rangeTimeChange(e: any) {
|
||||
console.log("时间范围", e[0], e[1]);
|
||||
startTime.value = e[0];
|
||||
endTime.value = e[1];
|
||||
console.log("时间范围", e);
|
||||
if (!e) {
|
||||
startTime.value = null;
|
||||
endTime.value = null;
|
||||
} else {
|
||||
startTime.value = e[0];
|
||||
endTime.value = e[1];
|
||||
}
|
||||
selectType.value = 3;
|
||||
airType.value = 3;
|
||||
getHazardLevel();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user