From 62ec1f19c3444695e21f1fe97472261ce3082075 Mon Sep 17 00:00:00 2001
From: liuying <1427574514@qq.com>
Date: 周一, 11 11月 2024 13:39:59 +0800
Subject: [PATCH] 大屏
---
yiqi_screen/src/assets/images/huan.png | 0
yiqi_screen/src/components/img/t.js | 2
yiqi_screen/src/assets/t.js | 2
yiqi_screen/src/components/EquipmentRunStatus.vue | 23 ++--
yiqi_screen/src/components/ProductionStatistics.vue | 136 ++++++++++++++++++---------
yiqi_screen/src/components/ProductionCompletionTrend.vue | 8 -
yiqi_screen/src/App.vue | 2
yiqi_screen/src/components/Content.vue | 73 +++++++-------
yiqi_screen/src/assets/images/quan.png | 0
yiqi_screen/src/components/QualityDataTrends.vue | 4
10 files changed, 146 insertions(+), 104 deletions(-)
diff --git a/yiqi_screen/src/App.vue b/yiqi_screen/src/App.vue
index a6ed6a2..3559a15 100644
--- a/yiqi_screen/src/App.vue
+++ b/yiqi_screen/src/App.vue
@@ -24,7 +24,7 @@
height: 1070px;
/* width:100%; */
/* height:100%; */
- /* overflow: hidden; */
+ overflow: hidden;
background-color: #00083b;
/* font-size: 80px !important; */
/* background-image: url('~@/assets/images/bg.png'); */
diff --git a/yiqi_screen/src/assets/images/huan.png b/yiqi_screen/src/assets/images/huan.png
index 2bc4eab..ec540be 100644
--- a/yiqi_screen/src/assets/images/huan.png
+++ b/yiqi_screen/src/assets/images/huan.png
Binary files differ
diff --git a/yiqi_screen/src/assets/images/quan.png b/yiqi_screen/src/assets/images/quan.png
index ab419da..8c2bef0 100644
--- a/yiqi_screen/src/assets/images/quan.png
+++ b/yiqi_screen/src/assets/images/quan.png
Binary files differ
diff --git a/yiqi_screen/src/assets/t.js b/yiqi_screen/src/assets/t.js
index 63cf0ce..36e8e8a 100644
--- a/yiqi_screen/src/assets/t.js
+++ b/yiqi_screen/src/assets/t.js
@@ -1 +1 @@
-export let zhu = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAB+CAYAAAA3MXHFAAAAAXNSR0IArs4c6QAAAedJREFUaEPtm80rRGEYxc8746OwmJSSZIOSspWtYaXI2gohOxtZWsjCTv4ApcRC7CeT/8CkrGQYzGAMKZIx5n48mqkRd+50u+4MqXPX7/uc5577O3U2V+GXnprweU+2vuZMldQTUVMpzEFhBUCth72M65f0evgqOWaYqtVWcCIpTX6FDSgMeRDKXX2OpB73jh+exgH4DFMFigSnUzIowCaAZi9iAlyGLm6P717fRgpzvgnOiFTLPZYFmM9t40XMFDncPU2Yr5rW+3XOp+BMStpNYBvAtwM/Ec3oRmgnetVtGNJmvZ8XHL2RhcYqLPm8gZGbLdfvchCOxvoANNgtmxesP5cxEWz95G2sd5RINBOPdZaaRUHXLtNSQkNoihxgLBgLxoKxKHKAsWAsGAvGwnUKCA2hITTODrB5s2I4U2I5QWgIDaFhxWDFcJ0CQkNoCI2zA6wYrBjOlLCXWhwgNISGFYMVw3UKCA2hITTODrCXsmI4U8Jeyl7qmpK/hkZETrLxWFepxcsefArSUtcpITSEhtAUOcBYMBb/Phabhi8xWdZfWGxjodSFEnNWH+jcz1lWSUFdAWt6um4Rwy3pwvepiKAAR36FaS3YEbGCoGrPpMMPBF0TYndB0ySTjAdMlVhFf79ud+QDhHReVZvashsAAAAASUVORK5CYII='
\ No newline at end of file
+export let zhu = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAB+CAYAAAA3MXHFAAABLElEQVRoge3bPyvEcRwH8NfpsEgWMdhsMrAou8dgMYtFyioZXELJbFZWBgvPAOEBGO4x3GCjM1xX59yf4X5n0Ps9fJfvu1596rN+SpP7dT1Swi5OMN6r2CdfOMPRSI/SNO5wMSBWQwU7GCt3Ka3hCrMDQFDFDQ4wovm0ZBSnuC8Ae8Qz9lqd1gnncY2VASG4xQzW2z+a8gZeC8DquMQyVjsVyljAHI4HxGhs4yEmuhXKWNJY+yLy3gvj99IMPQEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAFb8vXXYN8EDBgwYMCAAf85eIWPbndPRaaK7VrFA8Od8BPnWGxi/Lx7KjJv2KxVvLR/lPGErYKgOqZwUav47FT4BrulK2qVemffAAAAAElFTkSuQmCC"
\ No newline at end of file
diff --git a/yiqi_screen/src/components/Content.vue b/yiqi_screen/src/components/Content.vue
index fbcdc88..b0010f1 100644
--- a/yiqi_screen/src/components/Content.vue
+++ b/yiqi_screen/src/components/Content.vue
@@ -88,7 +88,7 @@
style="
margin: 0 0.13rem;
height: 0.13rem;
- background-color: #a7cf29;
+ background-color: #e6e705;
"
></div>
</div>
@@ -98,7 +98,7 @@
style="
margin: 0 0.13rem;
height: 0.13rem;
- background-color: #a7cf29;
+ background-color: #e6e705;
"
></div>
<div
@@ -339,7 +339,6 @@
// easing: "easeOutExpo", // 杩愬姩鏁堟灉
// loop: true, // 璁剧疆鏃犻檺寰幆
// });
-
// // 绗竴涓姩鐢伙細妯悜绉诲姩
// timeline
// .add({
@@ -361,7 +360,6 @@
// duration: 0, // 涓嶉渶瑕佸姩鐢�
// delay: 1000, // 闅旀柇鏃堕棿1绉�
// });
-
// setTimeout(() => {
// timeline.pause(); // 鏆傚仠鍔ㄧ敾
// document.getElementById('animatedImage').classList.add('hidden');
@@ -403,10 +401,10 @@
margin-bottom: 0.25rem;
.title {
+ font-family: Source Han Sans CN;
display: flex;
vertical-align: middle;
align-items: center;
- color: #41c7de;
font-size: 40px;
font-weight: 700;
position: absolute;
@@ -414,6 +412,11 @@
left: 50%;
transform: translate(-50%);
letter-spacing: 8px;
+
+ background: linear-gradient(0deg, #a7ffff, #83d0dc);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+
.imgTitle {
width: 117px;
margin-right: 69px;
@@ -421,26 +424,28 @@
}
.left-text {
- font-size: 18px;
- color: #fff;
- position: absolute;
- top: 57px;
- left: 38px;
- width: 372px;
- text-align: right;
- line-height: 48px;
- font-weight: 700;
+ font-size: 20px;
+ color: #fff;
+ position: absolute;
+ top: 63px;
+ left: 37px;
+ width: 368px;
+ text-align: right;
+ line-height: 48px;
+ font-weight: 700;
+ letter-spacing: -2px;
}
.right-text {
font-size: 18px;
- text-align: right;
- color: #fff;
- position: absolute;
- top: 57px;
- right: 268px;
- line-height: 48px;
- font-weight: 700;
+ text-align: right;
+ color: #fff;
+ position: absolute;
+ top: 63px;
+ right: 268px;
+ line-height: 48px;
+ font-weight: 700;
+ letter-spacing: -2px;
}
}
@@ -558,12 +563,9 @@
}
.main-bottom {
- // height: auto;
height: 320px;
- // border: 1px solid red;
display: flex;
- // background-color: skyblue;
-
+ justify-content: center;
.border_left1 {
width: 284px;
margin-right: 20px;
@@ -583,7 +585,7 @@
}
.border_middle {
- width: 720px;
+ width: 720px;
margin-right: 20px;
border: 0 !important;
// background-image: url("~@/assets/images/border_middle.png");
@@ -621,7 +623,8 @@
font-weight: 700;
color: #00f8c6;
text-align: center;
- border-bottom: 2px solid #04279d;
+ border-bottom: 2px solid #0739a3;
+
}
}
@@ -631,22 +634,22 @@
.pie-label-left {
position: absolute;
bottom: 10px;
- left: 0.1rem;
- color: #d9dbe6;
- font-size: 18px;
+ left: 0;
+ color: white;
+ font-size: 16px;
font-weight: 300;
- width: 44%;
+ width: 54%;
text-align: center;
}
.pie-label-right {
position: absolute;
bottom: 10px;
- right: 0.3rem;
+ right: 0;
color: #fff;
- color: #d9dbe6;
- font-size: 18px;
- width: 44%;
+ color: white;
+ font-size: 16px;
+ width: 54%;
text-align: center;
}
}
diff --git a/yiqi_screen/src/components/EquipmentRunStatus.vue b/yiqi_screen/src/components/EquipmentRunStatus.vue
index 8a0583c..1feb910 100644
--- a/yiqi_screen/src/components/EquipmentRunStatus.vue
+++ b/yiqi_screen/src/components/EquipmentRunStatus.vue
@@ -1,6 +1,6 @@
<template>
<!-- <img :src="require(`@/assets/images/huan.png`)" class="huan" /> -->
- <div class="box-container quan" id="echarts1"></div>
+ <div class="box-container quan" id="echarts1"></div>
</template>
<script>
@@ -66,7 +66,6 @@
this.option = {
// #00ff99 #fffff0 #0a0d7f #ffcc00 #fe0000
color: ["#00ff99", "#fffff0", "#0a0d7f", "#ffcc00", "#fe0000"],
-
legend: {
orient: "vertical",
top: "28%",
@@ -90,17 +89,15 @@
{
type: "pie",
center: ["33%", "50%"],
- radius: ["29%", "39%"],
+ radius: ["30%", "37%"],
padAngle: 5, //鐜笌鐜箣闂寸殑闂撮殭
- // avoidLabelOverlap: false,
- // left: "-30%",
- // top: "10%",
label: {
show: true,
formatter: `{d}%`,
- color: "#fff",
+ // color: "#fff",
fontSize: 11,
position: "outside",
+ color: "inherit", //缁ф壙涓婇潰鐨勯鑹�
},
labelLine: {
show: true,
@@ -111,10 +108,10 @@
borderRadius: 3,
borderColor: "transparent",
borderWidth: 10,
- shadowColor: 'rgba(0, 0, 0, 0.5)', // 闃村奖棰滆壊
- shadowBlur: 10, // 闃村奖妯＄硦绋嬪害
- shadowOffsetX: 20, // 姘村钩闃村奖鍋忕Щ
- shadowOffsetY: 20 // 鍨傜洿闃村奖鍋忕Щ
+ // shadowColor: 'rgba(0, 0, 0, 0.5)', // 闃村奖棰滆壊
+ // shadowBlur: 10, // 闃村奖妯＄硦绋嬪害
+ // shadowOffsetX: 20, // 姘村钩闃村奖鍋忕Щ
+ // shadowOffsetY: 20, // 鍨傜洿闃村奖鍋忕Щ
},
emphasis: {
label: {
@@ -212,10 +209,10 @@
background-repeat: no-repeat;
content: "";
width: 56px;
- height: 32px;
+ height: 29px;
z-index: -1;
/* opacity: 0.5; */
- top: 101px;
+ top: 103px;
left: 73px;
transform: scaleY(2);
}
diff --git a/yiqi_screen/src/components/ProductionCompletionTrend.vue b/yiqi_screen/src/components/ProductionCompletionTrend.vue
index 22b5161..0410158 100644
--- a/yiqi_screen/src/components/ProductionCompletionTrend.vue
+++ b/yiqi_screen/src/components/ProductionCompletionTrend.vue
@@ -34,7 +34,6 @@
yData3 = [];
val.forEach((item) => {
console.log('ceshi', item.completionNum);
-
xData.push(item.month);
yData1.push({
value: item.completionNum,
@@ -45,11 +44,8 @@
yData3.push(item.planCompletionNum); //璁″垝
});
this.$set(this.option.xAxis, "data", xData);
- // console.log('---', yData1);
-
this.$set(this.option.series[0], "data", yData1);
this.$set(this.option.series[1], "data", yData2);
- // this.$set(this.option.series[2], "data", yData3);
this.$nextTick(() => {
this.myChart.setOption(this.option);
});
@@ -153,8 +149,8 @@
type: "pictorialBar",
// type: "bar",
symbol: 'image://'+zhu,
- data: [],
-
+ data: [],
+
// yAxisIndex: 0,
// color: {
// type: "linear",
diff --git a/yiqi_screen/src/components/ProductionStatistics.vue b/yiqi_screen/src/components/ProductionStatistics.vue
index b8654cc..dbf822c 100644
--- a/yiqi_screen/src/components/ProductionStatistics.vue
+++ b/yiqi_screen/src/components/ProductionStatistics.vue
@@ -1,5 +1,7 @@
<template>
- <div class="box-container" id="echarts4"></div>
+ <!-- 鏈彮/鏈湀浜ч噺缁熻 -->
+ <div class="box-container box4" id="echarts4"></div>
+
</template>
<script>
@@ -22,6 +24,9 @@
},
watch: {
produceStatisData(val) {
+ // 娴嬭瘯鐢細
+ val.currentShiftProduceNum = 300;
+ val.currentShiftPlanNum = 300;
// 褰撳墠鐝粍瀹為檯鐢熶骇鏁伴噺 currentShiftProduceNum
// 褰撳墠鐝粍璁″垝鐢熶骇鏁伴噺 currentShiftPlanNum
var num1 = val.currentShiftProduceNum; //瀹為檯鐢熶骇鏁伴噺
@@ -31,11 +36,15 @@
num1 = 0;
num2 = 10;
}
+
+
+
this.$set(this.option.series[0], "data", [
// { value: 1 }, //瀹為檯鐢熶骇鏁伴噺 1/ (9+1) = 10%
// { value: 9 },
- { value: Math.floor(num1) }, //瀹為檯鐢熶骇鏁伴噺
- { value: Math.floor(num2) },
+ { value: num1,
+ }, //瀹為檯鐢熶骇鏁伴噺
+ { value: num2 },
]);
var num3 = val.currentMonthProduceNum;
var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum;
@@ -45,8 +54,8 @@
num4 = 10;
}
this.$set(this.option.series[1], "data", [
- { value: Math.floor(num3) },
- { value: Math.floor(num4) },
+ { value: num3 },
+ { value: num4 },
]);
this.myChart.setOption(this.option);
@@ -56,57 +65,58 @@
mounted() {
this.myChart = this.$echarts.init(document.getElementById("echarts4"));
this.option = {
- color: ["#00f6fe", "#c4c3d6"],
- // 鎻掑叆鑳屾櫙鍥�
- // graphic: [
- // {
- // type: "image",
- // id: "background1",
- // left: "20px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
- // top: "60px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
- // z: -10,
- // bounding: "raw",
- // origin: [-25, -25],
- // style: {
- // image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰�
- // width: 100,
- // height: 100,
- // opacity: 1,
- // },
- // },
- // {
- // type: "image",
- // id: "background2",
- // left: "153px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
- // top: "60px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
- // z: -10,
- // bounding: "raw",
- // origin: [0, 0],
- // style: {
- // image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰�
- // width: 100,
- // height: 100,
- // opacity: 1,
- // },
- // },
- // ],
-
+ color: ["#00f6fe", "transparent"],
+ // 鎻掑叆鑳屾櫙鍥�
+ graphic: [
+ {
+ type: "image",
+ id: "background1",
+ left: "11px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
+ top: "59.5px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
+ z: -10,
+ bounding: "raw",
+ origin: [0, 0],
+ style: {
+ image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰�
+ width: 100,
+ height: 100,
+ opacity: 1,
+ },
+ },
+ {
+ type: "image",
+ id: "background2",
+ left: "130px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
+ top: "59.5px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
+ z: -10,
+ bounding: "raw",
+ origin: [0, 0],
+ style: {
+ image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰�
+ width: 100,
+ height: 100,
+ opacity: 1,
+ },
+ },
+ ],
series: [
{
name: "Access From",
type: "pie",
- // radius: ["25%", "40%"],
+ // padAngle: 5, //鐜笌鐜箣闂寸殑闂撮殭
radius: ["30%", "37%"], //鐜彉缁�
center: ["26%", "47%"],
- avoidLabelOverlap: false,
+ silent: true,clockwise: true,
+ // avoidLabelOverlap: false,
label: {
show: false,
position: "center",
- formatter: `{d}%`,
+ formatter: function (params) {
+ return Math.floor(params.percent) + '%'; // 鍥涜垗浜斿叆鍒版暣鏁�
+ },
color: "#fff",
fontSize: 12,
},
-
emphasis: {
//楗煎浘涓棿鐨勫瓧浣撳ぇ灏�
scale: false,
@@ -116,6 +126,7 @@
color: "#19d8d0",
fontWeight: "normal",
},
+
},
labelLine: {
show: false,
@@ -130,14 +141,17 @@
{
name: "Access From",
type: "pie",
+ // padAngle: 5, //鐜笌鐜箣闂寸殑闂撮殭
// radius: ["25%", "40%"],
radius: ["30%", "37%"], //鐜彉缁�
center: ["74%", "47%"],
- avoidLabelOverlap: false,
+ // avoidLabelOverlap: false,
label: {
show: false,
position: "center",
- formatter: `{d}%`,
+ formatter: function (params) {
+ return Math.floor(params.percent) + '%'; // 鍥涜垗浜斿叆鍒版暣鏁�
+ },
color: "#fff",
fontSize: 12,
},
@@ -261,4 +275,34 @@
#echarts4 {
transform: scaleY(2);
}
+
+.box4::before{
+ position: absolute;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ content: "";
+ width: 95px;
+ height: 47px;
+ z-index: -1;
+ top: 86px;
+ left: 13px;
+ transform: scaleY(2);
+ border: 1px solid #074d95;
+ border-radius: 100%;
+}
+
+.box4::after{
+ position: absolute;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ content: "";
+ width: 95px;
+ height: 47px;
+ z-index: -1;
+ top: 86px;
+ left: 132px;
+ transform: scaleY(2);
+ border: 1px solid #074d95;
+ border-radius: 100%;
+}
</style>
diff --git a/yiqi_screen/src/components/QualityDataTrends.vue b/yiqi_screen/src/components/QualityDataTrends.vue
index 1bfa404..ca95122 100644
--- a/yiqi_screen/src/components/QualityDataTrends.vue
+++ b/yiqi_screen/src/components/QualityDataTrends.vue
@@ -65,7 +65,6 @@
xData.push(item.workPieceID)
yData.push(item.qualityDataVaule)
});
- // console.log(xData,yData,this,'x,y');
this.$set(this.option.xAxis,'data',xData)
this.$set(this.option.series[0],'data',yData)
this.myChart.setOption(this.option);
@@ -144,5 +143,8 @@
<style>
.echarts3Box{
height: 150px !important;
+ /* background-color: #040d3d; */
+ /* width: 96%; */
+ margin: 0 auto;
}
</style>
\ No newline at end of file
diff --git a/yiqi_screen/src/components/img/t.js b/yiqi_screen/src/components/img/t.js
index 63cf0ce..36e8e8a 100644
--- a/yiqi_screen/src/components/img/t.js
+++ b/yiqi_screen/src/components/img/t.js
@@ -1 +1 @@
-export let zhu = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAB+CAYAAAA3MXHFAAAAAXNSR0IArs4c6QAAAedJREFUaEPtm80rRGEYxc8746OwmJSSZIOSspWtYaXI2gohOxtZWsjCTv4ApcRC7CeT/8CkrGQYzGAMKZIx5n48mqkRd+50u+4MqXPX7/uc5577O3U2V+GXnprweU+2vuZMldQTUVMpzEFhBUCth72M65f0evgqOWaYqtVWcCIpTX6FDSgMeRDKXX2OpB73jh+exgH4DFMFigSnUzIowCaAZi9iAlyGLm6P717fRgpzvgnOiFTLPZYFmM9t40XMFDncPU2Yr5rW+3XOp+BMStpNYBvAtwM/Ec3oRmgnetVtGNJmvZ8XHL2RhcYqLPm8gZGbLdfvchCOxvoANNgtmxesP5cxEWz95G2sd5RINBOPdZaaRUHXLtNSQkNoihxgLBgLxoKxKHKAsWAsGAvGwnUKCA2hITTODrB5s2I4U2I5QWgIDaFhxWDFcJ0CQkNoCI2zA6wYrBjOlLCXWhwgNISGFYMVw3UKCA2hITTODrCXsmI4U8Jeyl7qmpK/hkZETrLxWFepxcsefArSUtcpITSEhtAUOcBYMBb/Phabhi8xWdZfWGxjodSFEnNWH+jcz1lWSUFdAWt6um4Rwy3pwvepiKAAR36FaS3YEbGCoGrPpMMPBF0TYndB0ySTjAdMlVhFf79ud+QDhHReVZvashsAAAAASUVORK5CYII='
\ No newline at end of file
+export let zhu = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAB+CAYAAAA3MXHFAAABLElEQVRoge3bPyvEcRwH8NfpsEgWMdhsMrAou8dgMYtFyioZXELJbFZWBgvPAOEBGO4x3GCjM1xX59yf4X5n0Ps9fJfvu1596rN+SpP7dT1Swi5OMN6r2CdfOMPRSI/SNO5wMSBWQwU7GCt3Ka3hCrMDQFDFDQ4wovm0ZBSnuC8Ae8Qz9lqd1gnncY2VASG4xQzW2z+a8gZeC8DquMQyVjsVyljAHI4HxGhs4yEmuhXKWNJY+yLy3gvj99IMPQEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAFb8vXXYN8EDBgwYMCAAf85eIWPbndPRaaK7VrFA8Od8BPnWGxi/Lx7KjJv2KxVvLR/lPGErYKgOqZwUav47FT4BrulK2qVemffAAAAAElFTkSuQmCC"
\ No newline at end of file
--
Gitblit v1.9.3