448 lines
8.5 KiB
Vue
448 lines
8.5 KiB
Vue
<template>
|
|
<Card title="生产质量统计">
|
|
<div class="load-top-right">
|
|
<div>
|
|
<div class="select-right">
|
|
<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
|
|
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近7天</div>
|
|
<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">近30日</div>
|
|
</div>
|
|
</div>
|
|
<div id="materialStatisticsBottomRight" style="width: 100%; height: 100%"></div>
|
|
<div class="notoDta" v-if="dataList.length == 0">
|
|
<img src="@/assets/images/noData.png" alt="" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref } from "vue";
|
|
import * as echarts from "echarts";
|
|
import Card from "@/components/card.vue";
|
|
import { countUseStatus } from "@/api/modules/largeMachinery";
|
|
|
|
import { GlobalStore } from "@/stores";
|
|
import { noop } from "@vueuse/core";
|
|
const store = GlobalStore();
|
|
const airType = ref(1);
|
|
// 选中
|
|
let checked = ref(1);
|
|
function getNowData(type: any) {
|
|
checked.value = type;
|
|
// 初始化option
|
|
getMemberCareList();
|
|
}
|
|
function getWeekData(type: any) {
|
|
checked.value = type;
|
|
// 初始化option
|
|
getMemberCareList();
|
|
}
|
|
function getMonthData(type: any) {
|
|
checked.value = type;
|
|
// 初始化option
|
|
getMemberCareList();
|
|
}
|
|
let rangeTime = ref("" as any);
|
|
let dataList = ref([]) as any;
|
|
function Pie() {
|
|
let dataArr = [];
|
|
for (var 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;
|
|
}
|
|
|
|
function drawEchart() {
|
|
let max = 0;
|
|
dataList.value.map(item => {
|
|
max = max + Number(item.value);
|
|
});
|
|
let chartDom = document.getElementById("materialStatisticsBottomRight");
|
|
if (chartDom) {
|
|
chartDom.removeAttribute("_echarts_instance_");
|
|
}
|
|
let echartsTest = echarts.init(document.getElementById("materialStatisticsBottomRight"));
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "item"
|
|
},
|
|
title: {
|
|
text: max,
|
|
subtext: "总盘数",
|
|
x: "27%",
|
|
y: "42%",
|
|
textAlign: "center",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 24,
|
|
fontWeight: "normal",
|
|
fontFamily: "sadigitalNumber"
|
|
},
|
|
subtextStyle: {
|
|
color: "#ccc",
|
|
fontSize: 14,
|
|
lineHeight: 40,
|
|
fontWeight: "normal"
|
|
}
|
|
},
|
|
legend: {
|
|
selectedMode: true, // 取消图例上的点击事件
|
|
icon: "rect",
|
|
type: "scroll",
|
|
scrollDataIndex: 0, // 设置滚动的起始位置
|
|
orient: "vertical",
|
|
left: "55%",
|
|
bottom: "15%",
|
|
top: "20%",
|
|
itemGap: 20,
|
|
itemWidth: 10, // 设置宽度
|
|
itemHeight: 10, // 设置高度
|
|
symbolKeepAspect: false,
|
|
textStyle: {
|
|
color: "#000",
|
|
rich: {
|
|
name: {
|
|
width: 100,
|
|
verticalAlign: "left",
|
|
fontSize: 14,
|
|
color: "#FFFFFF"
|
|
},
|
|
value: {
|
|
width: 70,
|
|
fontSize: 14,
|
|
color: "#FFFFFF"
|
|
}
|
|
}
|
|
},
|
|
data: dataList.value.map(item => {
|
|
if (item.show) {
|
|
return item.name;
|
|
}
|
|
}),
|
|
formatter: function (data: any) {
|
|
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;
|
|
return "{name| " + data + "}" + "{value| " + value + "}" + " ";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
// 外侧光线
|
|
{
|
|
name: "",
|
|
type: "gauge",
|
|
center: ["28%", "50%"],
|
|
radius: "55%",
|
|
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: ["28%", "50%"],
|
|
radius: "47%",
|
|
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: ["37%", "40%"],
|
|
center: ["28%", "50%"],
|
|
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: ["32%", "33%"],
|
|
center: ["28%", "50%"],
|
|
label: {
|
|
show: false
|
|
},
|
|
|
|
data: Pie()
|
|
}
|
|
]
|
|
};
|
|
echartsTest.setOption(option, true);
|
|
}
|
|
// let noData = ref(false as any);
|
|
const getMemberCareList = async () => {
|
|
const res: any = await countUseStatus({ projectSn: store.sn, type: checked.value, devSn: deviceSn.value });
|
|
console.log("原材料用量统计", res);
|
|
if (res.result.data.length > 0) {
|
|
let dataArr = res.result.data;
|
|
let picArr = [];
|
|
for (let i = 0; i < dataArr.length; i++) {
|
|
let currentPic = {
|
|
value: dataArr[i].count,
|
|
show: true,
|
|
name: dataArr[i].name,
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 20
|
|
}
|
|
}
|
|
};
|
|
picArr.push(currentPic);
|
|
}
|
|
dataList.value = picArr;
|
|
drawEchart();
|
|
} else {
|
|
// noData.value = true;
|
|
dataList.value = [];
|
|
let chartDom = document.getElementById("materialStatisticsBottomRight");
|
|
if (chartDom) {
|
|
chartDom.removeAttribute("_echarts_instance_");
|
|
}
|
|
let echartsTest = echarts.init(document.getElementById("materialStatisticsBottomRight"));
|
|
echartsTest.clear();
|
|
}
|
|
};
|
|
|
|
let deviceSn = ref("");
|
|
const loadData = async (devSn: string = "") => {
|
|
deviceSn.value = devSn;
|
|
getMemberCareList();
|
|
};
|
|
defineExpose({
|
|
loadData
|
|
});
|
|
onMounted(async () => {
|
|
getMemberCareList();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.notoDta {
|
|
top: 35%;
|
|
width: 45%;
|
|
left: 35%;
|
|
position: absolute;
|
|
text-align: center;
|
|
img {
|
|
width: 40%;
|
|
margin: 5% 30%;
|
|
}
|
|
p {
|
|
color: #fff;
|
|
font-size: calc(100vw * 14 / 1920);
|
|
margin: -6% 37%;
|
|
}
|
|
}
|
|
.load-top-right {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.num {
|
|
width: 66px;
|
|
text-align: center;
|
|
font-family: sadigitalNumber;
|
|
font-size: calc(100vw * 24 / 1920);
|
|
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;
|
|
// }
|
|
.select-right {
|
|
width: 40%;
|
|
display: flex;
|
|
position: absolute;
|
|
z-index: 10;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
right: -1%;
|
|
top: 5%;
|
|
.selected {
|
|
height: 5%;
|
|
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
}
|
|
.day {
|
|
padding: 0 6%;
|
|
margin-right: 5%;
|
|
z-index: 99;
|
|
}
|
|
.week {
|
|
padding: 0 6%;
|
|
margin-right: 5%;
|
|
z-index: 99;
|
|
}
|
|
.month {
|
|
padding: 0 6%;
|
|
z-index: 99;
|
|
}
|
|
.active {
|
|
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.time {
|
|
position: absolute;
|
|
z-index: 999;
|
|
left: 37%;
|
|
margin-top: -18%;
|
|
}
|
|
::v-deep .el-input__wrapper {
|
|
width: 85%;
|
|
height: 0%;
|
|
background: #0d2956;
|
|
}
|
|
::v-deep .el-range-separator {
|
|
color: #ccc;
|
|
font-size: 10px;
|
|
}
|
|
::v-deep .el-range-input {
|
|
color: #ccc;
|
|
font-size: 10px;
|
|
}
|
|
</style>
|