From 19b415a1aa36dc70e5546b0fdeefa6a39570f19b Mon Sep 17 00:00:00 2001
From: liuying <1427574514@qq.com>
Date: 周日, 10 11月 2024 09:07:50 +0800
Subject: [PATCH] 大屏整改
---
yiqi_screen/src/assets/images/1.png | 0
yiqi_screen/src/assets/images/huan.png | 0
yiqi_screen/src/assets/t.js | 1
yiqi_screen/src/components/ProductionStatistics.vue | 103 +++-
yiqi_screen/src/assets/images/title.png | 0
yiqi_screen/src/components/ProductionCompletionTrend.vue | 284 +++++++++-----
yiqi_screen/src/assets/images/border_prodline.png | 0
yiqi_screen/src/App.vue | 18
yiqi_screen/src/assets/images/quan.png | 0
yiqi_screen/src/assets/images/prodline_all.png | 0
yiqi_screen/src/components/QualityDataTrends.vue | 13
/dev/null | 0
yiqi_screen/src/assets/images/border_prodline - 副本.png | 0
yiqi_screen/src/components/img/t.js | 1
yiqi_screen/src/components/EquipmentRunStatus.vue | 87 +++-
yiqi_screen/src/components/ProdlineHealthy.vue | 83 ++--
yiqi_screen/src/assets/images/border_left1.png | 0
yiqi_screen/src/assets/images/10.png | 0
yiqi_screen/src/assets/images/prodline_all copy.png | 0
yiqi_screen/src/components/Content.vue | 443 +++++++++++++++---------
yiqi_screen/src/assets/images/guang.png | 0
yiqi_screen/src/assets/images/z1.png | 0
22 files changed, 650 insertions(+), 383 deletions(-)
diff --git a/yiqi_screen/src/App.vue b/yiqi_screen/src/App.vue
index 6eaa3c2..a6ed6a2 100644
--- a/yiqi_screen/src/App.vue
+++ b/yiqi_screen/src/App.vue
@@ -19,14 +19,16 @@
</script>
<style>
-html,body{
- width:100%;
- height:100%;
- overflow: hidden;
- /* font-size: 80px !important; */
- background-image: url('~@/assets/images/bg.png');
-}
-
+ html, body {
+ width: 1910px;
+ height: 1070px;
+ /* width:100%; */
+ /* height:100%; */
+ /* overflow: hidden; */
+ background-color: #00083b;
+ /* font-size: 80px !important; */
+ /* background-image: url('~@/assets/images/bg.png'); */
+ }
*{
margin:0;
padding: 0;
diff --git a/yiqi_screen/src/assets/images/1.jpg b/yiqi_screen/src/assets/images/1.jpg
deleted file mode 100644
index e80f12f..0000000
--- a/yiqi_screen/src/assets/images/1.jpg
+++ /dev/null
Binary files differ
diff --git a/yiqi_screen/src/assets/images/1.png b/yiqi_screen/src/assets/images/1.png
index cb02c95..36b540c 100644
--- a/yiqi_screen/src/assets/images/1.png
+++ b/yiqi_screen/src/assets/images/1.png
Binary files differ
diff --git a/yiqi_screen/src/assets/images/10.png b/yiqi_screen/src/assets/images/10.png
new file mode 100644
index 0000000..7261d62
--- /dev/null
+++ b/yiqi_screen/src/assets/images/10.png
Binary files differ
diff --git a/yiqi_screen/src/assets/images/border_left1.png b/yiqi_screen/src/assets/images/border_left1.png
index c220cb6..3630876 100644
--- a/yiqi_screen/src/assets/images/border_left1.png
+++ b/yiqi_screen/src/assets/images/border_left1.png
Binary files differ
diff --git "a/yiqi_screen/src/assets/images/border_prodline - \345\211\257\346\234\254.png" "b/yiqi_screen/src/assets/images/border_prodline - \345\211\257\346\234\254.png"
new file mode 100644
index 0000000..eb5de9b
--- /dev/null
+++ "b/yiqi_screen/src/assets/images/border_prodline - \345\211\257\346\234\254.png"
Binary files differ
diff --git a/yiqi_screen/src/assets/images/border_prodline.png b/yiqi_screen/src/assets/images/border_prodline.png
index eb5de9b..5eef56e 100644
--- a/yiqi_screen/src/assets/images/border_prodline.png
+++ b/yiqi_screen/src/assets/images/border_prodline.png
Binary files differ
diff --git a/yiqi_screen/src/assets/images/guang.png b/yiqi_screen/src/assets/images/guang.png
new file mode 100644
index 0000000..4e2001e
--- /dev/null
+++ b/yiqi_screen/src/assets/images/guang.png
Binary files differ
diff --git a/yiqi_screen/src/assets/images/huan.png b/yiqi_screen/src/assets/images/huan.png
new file mode 100644
index 0000000..2bc4eab
--- /dev/null
+++ b/yiqi_screen/src/assets/images/huan.png
Binary files differ
diff --git a/yiqi_screen/src/assets/images/prodline_all copy.png b/yiqi_screen/src/assets/images/prodline_all copy.png
new file mode 100644
index 0000000..886e8b9
--- /dev/null
+++ b/yiqi_screen/src/assets/images/prodline_all copy.png
Binary files differ
diff --git a/yiqi_screen/src/assets/images/prodline_all.png b/yiqi_screen/src/assets/images/prodline_all.png
index 886e8b9..02ca809 100644
--- a/yiqi_screen/src/assets/images/prodline_all.png
+++ b/yiqi_screen/src/assets/images/prodline_all.png
Binary files differ
diff --git a/yiqi_screen/src/assets/images/quan.png b/yiqi_screen/src/assets/images/quan.png
new file mode 100644
index 0000000..ab419da
--- /dev/null
+++ b/yiqi_screen/src/assets/images/quan.png
Binary files differ
diff --git a/yiqi_screen/src/assets/images/title.png b/yiqi_screen/src/assets/images/title.png
index 90dbda1..863b2a7 100644
--- a/yiqi_screen/src/assets/images/title.png
+++ b/yiqi_screen/src/assets/images/title.png
Binary files differ
diff --git a/yiqi_screen/src/assets/images/z1.png b/yiqi_screen/src/assets/images/z1.png
new file mode 100644
index 0000000..95b57ad
--- /dev/null
+++ b/yiqi_screen/src/assets/images/z1.png
Binary files differ
diff --git a/yiqi_screen/src/assets/t.js b/yiqi_screen/src/assets/t.js
new file mode 100644
index 0000000..63cf0ce
--- /dev/null
+++ b/yiqi_screen/src/assets/t.js
@@ -0,0 +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
diff --git a/yiqi_screen/src/components/Content.vue b/yiqi_screen/src/components/Content.vue
index e657937..fbcdc88 100644
--- a/yiqi_screen/src/components/Content.vue
+++ b/yiqi_screen/src/components/Content.vue
@@ -1,47 +1,71 @@
<template>
<div class="container">
+ <img alt="guang" src="~@/assets/images/guang.png" class="guang" />
+
<div class="header">
<div class="title">
-
- <img
- :src="
- require(`@/assets/images/1.png`)
- "
- class="imgTitle"
- />
- 4GC涓変唬鍙戝姩鏈鸿繛鏉嗙嚎</div>
+ <img :src="require(`@/assets/images/1.png`)" class="imgTitle" />
+ 4GC涓変唬鍙戝姩鏈鸿繛鏉嗙嚎
+ </div>
<div class="left-text">
- <div style="line-height: 30px">{{ nowTime }}</div>
- <div style="padding-left: 25px">
- 瀹夊叏鐢熶骇:{{ produceStatisData.currentSafeProductionDay }}澶�
- </div>
+ <div>{{ nowTime }}</div>
+ <div>瀹夊叏鐢熶骇:{{ produceStatisData.currentSafeProductionDay }}澶�</div>
</div>
<div class="right-text">
- <div style="line-height: 30px">
- 褰撳墠鐝:{{ produceStatisData.currentTeamName }}
- </div>
+ <div>褰撳墠鐝:{{ produceStatisData.currentTeamName }}</div>
<div>鐝暱:{{ produceStatisData.currentTeamLeader }}</div>
</div>
</div>
<div class="main">
<div class="main-top">
- <img src="~@/assets/images/prodline_all.png" class="prodline" />
+ <div class="main-top_ly">
+ <img
+ src="~@/assets/images/prodline_all.png"
+ class="prodline"
+ alt="line"
+ />
- <img
- v-for="item in equipmentStatusData"
- :key="item.id"
- :src="
- require(`@/assets/images/${imageColor[item.workingProcedure]}/${
- item.workingProcedure
- }.png`)
- "
- :class="`euip ${item.workingProcedure}`"
- />
+ <!-- <img
+ alt="t10"
+ :src="require(`@/assets/images/10.png`)"
+ class="OP88"
+ id="animatedImage"
+ />
+ <img
+ alt="t10"
+ :src="require(`@/assets/images/10.png`)"
+ class="OP89"
+ />
+ <img
+ alt="t10"
+ :src="require(`@/assets/images/10.png`)"
+ class="OP90"
+ /> -->
+ <img
+ alt="t1"
+ v-for="item in equipmentStatusData"
+ :key="item.id"
+ :src="
+ require(`@/assets/images/${imageColor[item.workingProcedure]}/${
+ item.workingProcedure
+ }.png`)
+ "
+ :class="`euip ${item.workingProcedure}`"
+ />
- <img src="~@/assets/images/OP35.png" class="prodline_op35" />
- <img :src="require(`@/assets/images/${imageColor['OP10']}/OP40.png`)" class="euip OP40" />
- <img :src="require(`@/assets/images/${imageColor['unit']}/unit.png`)" class="euip unit" />
+ <img alt="t2" src="~@/assets/images/OP35.png" class="prodline_op35" />
+ <img
+ alt="t3"
+ :src="require(`@/assets/images/${imageColor['OP10']}/OP40.png`)"
+ class="euip OP40"
+ />
+ <img
+ alt="t4"
+ :src="require(`@/assets/images/${imageColor['unit']}/unit.png`)"
+ class="euip unit"
+ />
+ </div>
</div>
<!-- <button @click="flag=true">data鏀瑰彉</button> -->
<div class="main-bottom">
@@ -55,24 +79,11 @@
</div>
<div class="echarts-box border_middle">
<div class="echarts-title">璐ㄩ噺鏁版嵁瓒嬪娍鍥�</div>
- <div
- style="
- color: #fff;
- margin: 0 0.13rem;
- text-align: center;
- font-size: 0.17rem;
- "
- >
+ <div class="box11">
{{ qualityData.qualityType }}
</div>
<div>
- <div
- style="
- margin: 0 0.13rem;
- height: 0.13rem;
- background-color: #f14158;
- "
- ></div>
+ <div class="box12"></div>
<div
style="
margin: 0 0.13rem;
@@ -102,23 +113,30 @@
<div class="echarts-box border_right1">
<div class="echarts-title">鏈彮/鏈湀浜ч噺缁熻</div>
-
<ProductionStatistics :produceStatisData="produceStatisData" />
<div class="pie-label-left">
- <!-- 褰撳墠鐝粍瀹為檯鐢熶骇鏁伴噺 -->
+ <!-- 褰撳墠鐝粍瀹為檯鐢熶骇鏁伴噺 -->
{{ produceStatisData.currentShiftProduceNum }}
- <span v-if="produceStatisData.currentShiftPlanNum||produceStatisData.currentShiftPlanNum==0">/</span>
+ <span
+ v-if="
+ produceStatisData.currentShiftPlanNum ||
+ produceStatisData.currentShiftPlanNum == 0
+ "
+ >/</span
+ >
<!-- 褰撳墠鐝粍璁″垝鐢熶骇鏁伴噺 -->
- {{
- produceStatisData.currentShiftPlanNum
- }}
+ {{ produceStatisData.currentShiftPlanNum }}
</div>
<div class="pie-label-right">
{{ produceStatisData.currentMonthProduceNum }}
- <span v-if="produceStatisData.currentMonthPlanNum||produceStatisData.currentMonthPlanNum==0">/</span>
- {{
- produceStatisData.currentMonthPlanNum
- }}
+ <span
+ v-if="
+ produceStatisData.currentMonthPlanNum ||
+ produceStatisData.currentMonthPlanNum == 0
+ "
+ >/</span
+ >
+ {{ produceStatisData.currentMonthPlanNum }}
</div>
</div>
<div class="echarts-box border_right2">
@@ -142,7 +160,7 @@
import ProductionStatistics from "./ProductionStatistics.vue";
import QualityDataTrendse from "./QualityDataTrends.vue";
import moment from "moment";
-
+import anime from "animejs/lib/anime.es.js";
import {
GetEquipmentCurrentState,
getQualityData,
@@ -246,13 +264,15 @@
async getEquipmentCurrentState() {
try {
let { data } = await GetEquipmentCurrentState();
- let equipmentData=[]
- data.forEach(item=>{
- const res=this.equipmentStatusData.filter(obj=>obj.workingProcedure==item.workingProcedure)
- if(res.length>0){
- equipmentData.push(item)
+ let equipmentData = [];
+ data.forEach((item) => {
+ const res = this.equipmentStatusData.filter(
+ (obj) => obj.workingProcedure == item.workingProcedure
+ );
+ if (res.length > 0) {
+ equipmentData.push(item);
}
- })
+ });
this.equipmentStatusData = equipmentData;
this.getImageColor(data);
} catch (error) {
@@ -314,6 +334,40 @@
}
},
},
+ mounted() {
+ // var timeline = anime.timeline({
+ // easing: "easeOutExpo", // 杩愬姩鏁堟灉
+ // loop: true, // 璁剧疆鏃犻檺寰幆
+ // });
+
+ // // 绗竴涓姩鐢伙細妯悜绉诲姩
+ // timeline
+ // .add({
+ // targets: "#animatedImage",
+ // translateX: 280, // 鍚戝彸绉诲姩280px
+ // duration: 2000, // 鍔ㄧ敾鎸佺画鏃堕棿
+ // })
+ // // 绗簩涓姩鐢伙細鍚戜笅绉诲姩
+ // .add({
+ // targets: "#animatedImage",
+ // translateY: 50, // 鍚戜笅绉诲姩50px
+ // duration: 2000, // 鍔ㄧ敾鎸佺画鏃堕棿
+ // })
+ // // 闂撮殧鏃堕棿鍥炲埌鍒濆浣嶇疆
+ // .add({
+ // targets: "#animatedImage",
+ // translateX: 0, // 鍥炲埌鍒濆浣嶇疆
+ // translateY: 0, // 鍥炲埌鍒濆浣嶇疆
+ // duration: 0, // 涓嶉渶瑕佸姩鐢�
+ // delay: 1000, // 闅旀柇鏃堕棿1绉�
+ // });
+
+ // setTimeout(() => {
+ // timeline.pause(); // 鏆傚仠鍔ㄧ敾
+ // document.getElementById('animatedImage').classList.add('hidden');
+ // }, 8000);
+ },
+
// beforeDestroy(){
// clearInterval(this.dataTimer)
// clearInterval(this.dateTimer)
@@ -321,78 +375,103 @@
};
</script>
-<style lang="scss" scoped>
+<style lang="scss" scoped>
$allHeight: 13.5rem;
$titleHeight: 2rem;
.container {
width: 100%;
height: auto;
+ position: relative;
+ .guang {
+ position: absolute;
+ width: 100%;
+ top: 30%;
+ left: 0;
+ z-index: 0;
+ height: 69%;
+ }
.header {
+ position: relative;
+ z-index: 9;
width: 100%;
height: 2rem;
background-image: url("~@/assets/images/title.png");
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 0.25rem;
- position: relative;
.title {
display: flex;
- vertical-align: middle;
- align-items: center;
+ vertical-align: middle;
+ align-items: center;
color: #41c7de;
- font-size: 0.38rem;
+ font-size: 40px;
font-weight: 700;
position: absolute;
- top: .31rem;
+ top: 12px;
left: 50%;
transform: translate(-50%);
letter-spacing: 8px;
- .imgTitle{
- width: 0.7rem;
- margin-right: .2rem;
+ .imgTitle {
+ width: 117px;
+ margin-right: 69px;
}
}
.left-text {
- font-size: 0.19rem;
- color: #fff;
- position: absolute;
- top: 1.15rem;
- left: 5rem;
+ font-size: 18px;
+ color: #fff;
+ position: absolute;
+ top: 57px;
+ left: 38px;
+ width: 372px;
+ text-align: right;
+ line-height: 48px;
+ font-weight: 700;
}
.right-text {
- font-size: 0.19rem;
- text-align: right;
- color: #fff;
- position: absolute;
- top: 1.15rem;
- right: 5.3rem;
+ font-size: 18px;
+ text-align: right;
+ color: #fff;
+ position: absolute;
+ top: 57px;
+ right: 268px;
+ line-height: 48px;
+ font-weight: 700;
}
}
.main {
+ position: relative;
width: 100%;
height: auto;
// display: flex;
// flex-direction: column;
// justify-content: space-between;
padding: 0 0.28rem 0.19rem;
+ z-index: 99;
.main-top {
width: 100%;
- height: 7.42rem;
+
// background-color: #fff;
margin-bottom: 0.29rem;
background-image: url("~@/assets/images/border_prodline.png");
- background-size: 101.1% 101.8%;
- background-position: -0.13rem -0.13rem;
+ background-size: 100% 100%;
position: relative;
+
+ .main-top_ly {
+ width: 95%;
+ margin: 0 auto;
+ position: relative;
+ height: 6.8rem;
+ }
+
.prodline {
- width:95%;
+ width: 95%;
display: block;
position: absolute;
top: 50%;
@@ -401,124 +480,132 @@
}
.prodline_op35 {
- position: absolute;
- top: 2.72rem;
- left: 4.3rem;
- width:1.8%;
+ display: none;
+ // position: absolute;
+ // top: 2.72rem;
+ // left: 4.3rem;
+ // width:1.8%;
}
.euip {
- width:95%;
+ width: 95%;
position: absolute;
top: -1.59rem;
left: 1.28rem;
-
}
- .OP05{
- top: -1.58rem;
- left: 0.12rem;
+ .OP05 {
+ top: -76px;
+ left: -220px;
}
- .OP10,.OP40{
- top: -1.48rem;
- left: 0.5rem;
+ .OP10,
+ .OP40 {
+ top: -90px;
+ left: -236px;
+ width: 112%;
+ height: 902px;
}
- .OP20{
- top: -1.8rem;
- left: 0.6rem;
+ .OP20 {
+ top: -95px;
+ left: 31px;
+ width: 86%;
+ transform: scale(1.5, 1.2);
}
- .OP30{
- top: -2.05rem;
- left: 0.3rem;
+ .OP30 {
+ top: -183px;
+ left: -247px;
+ width: 2061px;
+ height: 923px;
}
- .OP35{
- top: -1.8rem;
- left: 0.2rem;
+ .OP35 {
+ top: -104px;
+ left: -182px;
}
- .OP50{
- top: -1.69rem;
- left: 1.05rem;
+ .OP50 {
+ top: -168px;
+ left: -75px;
+ width: 100%;
}
- .OP60{
- top: -1.65rem;
- left: 1.5rem;
+ .OP60 {
+ top: -178px;
+ left: -31px;
+ width: 100%;
}
- .OP70{
- top: -1.52rem;
- left: 2.15rem;
+ .OP70 {
+ top: -175px;
+ left: 23px;
+ width: 101%;
}
- .OP80,.unit{
+ .OP80,
+ .unit {
top: -1.95rem;
left: 1.98rem;
}
-
// img:nth-child(2) {
// width:100%;
// top: -2.05rem;
- // left: 1.07rem;
+ // left: 1.07rem;
// }
}
.main-bottom {
- height: auto;
+ // height: auto;
+ height: 320px;
+ // border: 1px solid red;
display: flex;
// background-color: skyblue;
.border_left1 {
- width:3.84rem;
- margin-right: .14rem;
+ width: 284px;
+ margin-right: 20px;
border: 0 !important;
background-image: url("~@/assets/images/border_left1.png");
- background-size: 107.5% 104%;
- background-position: -0.14rem -0.13rem;
+ background-size: 100% 100%;
background-repeat: no-repeat;
}
.border_left2 {
- width:3.02rem;
- margin-right: .16rem;
+ width: 244px;
+ margin-right: 20px;
border: 0 !important;
- background-image: url("~@/assets/images/border_left2.png");
- background-size: 109.3% 104%;
- background-position: -0.14rem -0.13rem;
+ background-image: url("~@/assets/images/border_left1.png");
+ background-size: 100% 100%;
background-repeat: no-repeat;
}
.border_middle {
- width:6.09rem;
- margin-right: .16rem;
+ width: 720px;
+ margin-right: 20px;
border: 0 !important;
- background-image: url("~@/assets/images/border_middle.png");
- background-size: 102.7% 104%;
- background-position: -0.14rem -0.13rem;
+ // background-image: url("~@/assets/images/border_middle.png");
+ background-image: url("~@/assets/images/border_left1.png");
+ background-size: 100% 100%;
background-repeat: no-repeat;
}
.border_right1 {
- width:3.75rem;
- margin-right: .15rem;
+ width: 244px;
+ margin-right: 20px;
border: 0 !important;
- background-image: url("~@/assets/images/border_right1.png");
- background-size: 107.5% 104%;
- background-position: -0.14rem -0.13rem;
+ background-image: url("~@/assets/images/border_left1.png");
+ background-size: 100% 100%;
background-repeat: no-repeat;
}
.border_right2 {
- width:6.09rem;
+ width: 284px;
border: 0 !important;
- background-image: url("~@/assets/images/border_right2.png");
- background-size: 104.4% 104%;
- background-position: -0.14rem -0.13rem;
+ background-image: url("~@/assets/images/border_left1.png");
+ background-size: 100% 100%;
background-repeat: no-repeat;
}
@@ -527,14 +614,14 @@
border: 2px solid #3a45de;
.echarts-title {
- font-size: 0.18rem;
- height: 0.75rem;
- padding: 0.31rem 0 0.26rem;
- margin: 0 0.23rem;
+ font-size: 20px;
+ height: 69px;
+ padding-top: 20px;
+ margin: 0 0 0 0;
font-weight: 700;
- color: #00afb9;
+ color: #00f8c6;
text-align: center;
- border-bottom: 2px solid #3c37bf;
+ border-bottom: 2px solid #04279d;
}
}
@@ -543,30 +630,31 @@
.pie-label-left {
position: absolute;
- bottom: 0.1rem;
- left: 0.1rem;
- color: #fff;
- font-size: 0.2rem;
- font-weight: 300;
- width: 44%;
- text-align: center;
+ bottom: 10px;
+ left: 0.1rem;
+ color: #d9dbe6;
+ font-size: 18px;
+ font-weight: 300;
+ width: 44%;
+ text-align: center;
}
.pie-label-right {
position: absolute;
- bottom: 0.1rem;
- right: 0.3rem;
- color: #fff;
- font-size: 0.2rem;
- font-weight: 300;
- width: 44%;
- text-align: center;
+ bottom: 10px;
+ right: 0.3rem;
+ color: #fff;
+ color: #d9dbe6;
+ font-size: 18px;
+ width: 44%;
+ text-align: center;
}
}
.box-container {
width: 100%;
- height: 2.6rem;
+ // height: 2.6rem;
+ height: 236px;
// background-color: rgb(196, 231, 178);
}
@@ -579,4 +667,31 @@
}
}
}
-</style>
\ No newline at end of file
+
+.box11 {
+ color: #fff;
+ margin: 10px 0;
+ text-align: center;
+ font-size: 15px;
+}
+.box12 {
+ margin: 0 0.13rem;
+ height: 0.13rem;
+ background-color: #f14158;
+}
+
+.OP88,
+.OP89,
+.OP90 {
+ position: absolute;
+ width: 20px;
+}
+#animatedImage {
+ position: absolute;
+ top: 70.5%;
+ left: 75px;
+}
+.hidden {
+ display: none; /* 闅愯棌鍏冪礌 */
+}
+</style>
diff --git a/yiqi_screen/src/components/EquipmentRunStatus.vue b/yiqi_screen/src/components/EquipmentRunStatus.vue
index af5d79a..8a0583c 100644
--- a/yiqi_screen/src/components/EquipmentRunStatus.vue
+++ b/yiqi_screen/src/components/EquipmentRunStatus.vue
@@ -1,8 +1,9 @@
<template>
- <div class="box-container" id="echarts1"></div>
+ <!-- <img :src="require(`@/assets/images/huan.png`)" class="huan" /> -->
+ <div class="box-container quan" id="echarts1"></div>
</template>
-
- <script>
+
+<script>
let timer = null;
export default {
props: {
@@ -47,7 +48,7 @@
break;
}
});
- // console.log(val,data);
+ console.log("++++++", data);
// data = [
// { value: 2, name: "鐢熶骇" },
// { value: 3, name: "瀹屾垚" },
@@ -63,32 +64,35 @@
mounted() {
this.myChart = this.$echarts.init(document.getElementById("echarts1"));
this.option = {
- color: ["#00afb9", "#c3cbe4", "#2127ff", "#e0de00", "#c8003d"],
+ // #00ff99 #fffff0 #0a0d7f #ffcc00 #fe0000
+ color: ["#00ff99", "#fffff0", "#0a0d7f", "#ffcc00", "#fe0000"],
+
legend: {
orient: "vertical",
- top: "25%",
- right: "5%",
- itemGap: 7, //鍧椾箣闂寸殑闂磋窛
- itemHeight: 8, // 璁剧疆鍥句緥椤圭殑楂樺害
- itemWidth: 5, // 璁剧疆鍥句緥椤圭殑瀹藉害
+ top: "28%",
+ right: "12%",
+ itemGap: 12, //鍧椾箣闂寸殑闂磋窛
+ itemHeight: 9, // 璁剧疆鍥句緥椤圭殑楂樺害
+ itemWidth: 9, // 璁剧疆鍥句緥椤圭殑瀹藉害
data: ["鐢熶骇", "瀹屾垚", "寰呮満", "璀﹀憡", "鏁呴殰"],
textStyle: {
color: "#fff",
- fontSize: 8,
+ fontSize: 10,
},
- formatter: (name) =>{
- let res=this.option.series[0].data.filter(item=>item.name==name)
- return res.length>0?`${name}: ${res[0].value}鍙癭:name;
+ formatter: (name) => {
+ let res = this.option.series[0].data.filter(
+ (item) => item.name == name
+ );
+ return res.length > 0 ? `${name}: ${res[0].value}鍙癭 : name;
},
},
series: [
{
type: "pie",
- // radius: ["20%", "30%"],
- // center: ["33%", "50%"],
- radius: ["20%", "30%"],
- center: ["38%", "50%"],
- avoidLabelOverlap: false,
+ center: ["33%", "50%"],
+ radius: ["29%", "39%"],
+ padAngle: 5, //鐜笌鐜箣闂寸殑闂撮殭
+ // avoidLabelOverlap: false,
// left: "-30%",
// top: "10%",
label: {
@@ -96,6 +100,7 @@
formatter: `{d}%`,
color: "#fff",
fontSize: 11,
+ position: "outside",
},
labelLine: {
show: true,
@@ -106,15 +111,19 @@
borderRadius: 3,
borderColor: "transparent",
borderWidth: 10,
+ shadowColor: 'rgba(0, 0, 0, 0.5)', // 闃村奖棰滆壊
+ shadowBlur: 10, // 闃村奖妯＄硦绋嬪害
+ shadowOffsetX: 20, // 姘村钩闃村奖鍋忕Щ
+ shadowOffsetY: 20 // 鍨傜洿闃村奖鍋忕Щ
},
- // emphasis: {
- // label: {
- // show: false,
- // fontSize: "15",
- // color:'#fff',
- // fontWeight: "normal",
- // },
- // },
+ emphasis: {
+ label: {
+ show: false,
+ fontSize: "15",
+ color: "#fff",
+ fontWeight: "normal",
+ },
+ },
data: [],
},
],
@@ -186,14 +195,28 @@
},
};
</script>
-
- <style>
+
+<style>
#echarts1 {
width: 3.84rem;
- /* height:5.2rem; */
transform: scaleY(2);
}
-.box-container{
+.box-container {
position: relative;
}
-</style>
\ No newline at end of file
+
+.quan::after {
+ background-image: url("~@/assets/images/huan.png");
+ position: absolute;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ content: "";
+ width: 56px;
+ height: 32px;
+ z-index: -1;
+ /* opacity: 0.5; */
+ top: 101px;
+ left: 73px;
+ transform: scaleY(2);
+}
+</style>
diff --git a/yiqi_screen/src/components/ProdlineHealthy.vue b/yiqi_screen/src/components/ProdlineHealthy.vue
index 3bbfeab..a1768fe 100644
--- a/yiqi_screen/src/components/ProdlineHealthy.vue
+++ b/yiqi_screen/src/components/ProdlineHealthy.vue
@@ -17,32 +17,38 @@
this.option = {
legend: {
orient: "vertical",
- bottom: "30%",
+ bottom: "20%",
right: "6%",
- textStyle: {
- color: "#fff",
- fontSize: 8,
- },
- itemHeight: 5, // 璁剧疆鍥句緥椤圭殑楂樺害
- itemWidth: 5, // 璁剧疆鍥句緥椤圭殑瀹藉害
+
+ itemGap: 8, //鍧椾箣闂寸殑闂磋窛
+ itemHeight: 9, // 璁剧疆鍥句緥椤圭殑楂樺害
+ itemWidth: 9, // 璁剧疆鍥句緥椤圭殑瀹藉害
data: [
- {
- name: "瀹為檯",
- itemStyle: {
- color: "#fff",
- },
- },
{
name: "鐩爣",
itemStyle: {
- color: "#01afba",
+ color: "#f2f45b",
+ },
+ textStyle: {
+ color: "#f2f45b", //榛勮壊
+ fontSize: 10,
+ },
+ },
+ {
+ name: "瀹為檯",
+ itemStyle: {
+ color: "#1fe9dc",
+ },
+ textStyle: {
+ color: "#1fe9dc",
+ fontSize: 10,
},
},
],
},
radar: {
- center: ["40%", "50%"], // 鏇存敼涓烘洿灏忕殑鐧惧垎姣斾互寰�涓棿绉诲姩
- radius: "30%",
+ center: ["40%", "55%"], // 鏇存敼涓烘洿灏忕殑鐧惧垎姣斾互寰�涓棿绉诲姩
+ radius: "40%",
indicator: [
{ name: "浜�", max: 100, color: "#fff" },
{ name: "鐜�", max: 100, color: "#fff" },
@@ -50,7 +56,8 @@
{ name: "鏂�", max: 100, color: "#fff" },
{ name: "鏈�", max: 100, color: "#fff" },
],
- splitNumber: 0,
+
+ // splitNumber: 0,
axisLine: {
show: false,
},
@@ -58,11 +65,11 @@
padding: -10,
},
- // splitArea:{
- // areaStyle:{
- // color:'#fff'
- // }
- // }
+ splitArea: {
+ areaStyle: {
+ color: "rgba(131, 163, 178, 0.8)",
+ },
+ },
},
series: [
{
@@ -70,25 +77,29 @@
type: "radar",
data: [
{
- value: [90, 90, 90, 90, 90],
name: "瀹為檯",
- lineStyle: {
- color: "#fff",
- opacity: 0,
- },
+ value: [90, 80, 80, 80, 80],
areaStyle: {
- color: "#fff",
+ color: {
+ type: "linear-gradient",
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 1,
+ colorStops: [
+ { offset: 0, color: "#b2f2bb" }, // 娓愬彉寮�濮嬮鑹�
+ { offset: 1, color: "#a0e6a0" }, // 娓愬彉缁撴潫棰滆壊
+ ],
+ },
+ opacity: 0.9,
},
},
{
- value: [100, 100, 100, 100, 100],
name: "鐩爣",
- lineStyle: {
- color: "#01afba",
- opacity: 0,
- },
+ value: [90, 80, 80, 80, 80],
areaStyle: {
- color: "#01afba",
+ color: "#6ee6db",
+ opacity: 0.3,
},
},
],
@@ -166,8 +177,8 @@
<style>
#echarts2 {
- margin-top: .1rem;
- width: 2.89rem;
+ margin-top: 0.1rem;
+ width: 100%;
height: 2.5rem;
transform: scaleY(2);
diff --git a/yiqi_screen/src/components/ProductionCompletionTrend.vue b/yiqi_screen/src/components/ProductionCompletionTrend.vue
index 8987f4f..22b5161 100644
--- a/yiqi_screen/src/components/ProductionCompletionTrend.vue
+++ b/yiqi_screen/src/components/ProductionCompletionTrend.vue
@@ -1,40 +1,59 @@
<template>
- <div class="box-container" id="echarts5"></div>
+ <div>
+ <div class="box-container" id="echarts5" style="width: 100%;height:230px"></div>
+ </div>
</template>
-
- <script>
+
+<script>
+import * as echarts from "echarts";
+import {zhu} from './img/t.js'
+
export default {
- props:{
- produceCompletionData:{
- type:Array,
- default:()=>[]
- }
+ props: {
+ produceCompletionData: {
+ type: Array,
+ default: () => [],
+ },
},
data() {
return {
option: {},
myChart: {},
timechartes: null,
+
+ myChart2: null,
+ textureImg: null,
+ // img,
};
},
- watch:{
- produceCompletionData(val){
- let xData=[],yData1=[],yData2=[],yData3=[];
- val.forEach(item => {
- xData.push(item.month)
- yData1.push(item.completionNum) //瀹為檯
- yData2.push(item.planCompletionRate) //planCompletionRate
- yData3.push(item.planCompletionNum) //璁″垝
+ watch: {
+ produceCompletionData(val) {
+ let xData = [],
+ yData1 = [],
+ yData2 = [],
+ yData3 = [];
+ val.forEach((item) => {
+ console.log('ceshi', item.completionNum);
+
+ xData.push(item.month);
+ yData1.push({
+ value: item.completionNum,
+ symbolRepeat: false,
+ }); //瀹為檯
+ // yData1.push(item.completionNum); //瀹為檯
+ yData2.push(item.planCompletionRate); //planCompletionRate
+ yData3.push(item.planCompletionNum); //璁″垝
});
- this.$set(this.option.xAxis,'data',xData)
- 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.$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);
- });
-
- }
+ });
+ },
},
mounted() {
this.myChart = this.$echarts.init(document.getElementById("echarts5"));
@@ -42,137 +61,143 @@
tooltip: {
trigger: "axis",
formatter:
- '{b0}鏈�<br />' +
- '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#13e5f2,#01afba);border-radius:50%"></a> {a0}: {c0}<br />' +
- '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#ffc107,#fd7e14);border-radius:50%"></a> {a2}: {c2}<br />'+
- '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#fff,#eee);border-radius:50%"></a> {a1}: {c1}%<br />', // 娣诲姞鐢熶骇璁″垝鏁版彁绀�
+ "{b0}鏈�<br />" +
+ '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#13e5f2,#01afba);border-radius:50%"></a> {a0}: {c0}<br />' +
+ // '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#ffc107,#fd7e14);border-radius:50%"></a> {a2}: {c2}<br />' +
+ '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#fff,#eee);border-radius:50%"></a> {a1}: {c1}%<br />', // 娣诲姞鐢熶骇璁″垝鏁版彁绀�
backgroundColor: "rgba(0,0,0,0.7)",
-
textStyle: {
- color: "#fff",
+ color: "#ffffff",
},
},
grid: {
top: "15%",
- bottom: "15%",
- left: "16%",
- right: "15%"
+ bottom: "8%",
+ left: "18%",
+ right: "18%",
},
xAxis: {
- data: [ ],
+ data: [],
type: "category",
axisLabel: {
- color: "#fff",
- interval:0,
+ color: "#326e92",
+ interval: 0,
+ fontSize: 13,
// formatter: '{value}鏈�'
},
- axisTick:{
- show:false
+ axisTick: {
+ show: false,
},
- axisLine:{
- lineStyle:{
- color:'rgba(255,255,255,0.5)'
- }
- }
+ axisLine: {
+ lineStyle: {
+ color: "#326e92",
+
+ },
+ },
},
yAxis: [
{
type: "value",
- position:'left',
+ position: "left",
axisLine: {
- show: true,
+ show: false,
lineStyle: {
- color: 'rgba(255,255,255,0.5)',
+ color: "#326e92",
},
},
axisLabel: {
- show:true,
+ show: true,
margin: 5,
- color: "#fff",
+ color: "#326e92",
// formatter: '{value}%'
},
- alignTicks: true,
+ alignTicks: false,
nameTextStyle: {
color: "#fff",
},
- splitLine:{
- lineStyle:{
- color:'rgba(255,255,255,0.5)'
- }
- }
+ splitLine: {
+ lineStyle: {
+ color: "#326e92",
+ },
+ },
},
{
- show:true,
+ show: true,
type: "value",
- position:'right',
+ position: "right",
// name: "鎸佺画鏃堕暱",
axisLine: {
show: false,
lineStyle: {
- color: "rgba(255,255,255,0.5)",
+ color: "#326e92",
},
},
axisLabel: {
- show:true,
- color: "#fff",
- formatter: '{value}%'
+ show: true,
+ color: "#326e92",
+ formatter: "{value}%",
},
nameTextStyle: {
- color: "#fff",
+ color: "#326e92",
},
- splitLine:{
- lineStyle:{
- color:'rgba(255,255,255,0)'
- }
- }
+ splitLine: {
+ lineStyle: {
+ color: "#326e92",
+ },
+ },
},
],
series: [
{
name: "鐢熶骇瀹屾垚鏁�",
- type: "bar",
+ type: "pictorialBar",
+ // type: "bar",
+ symbol: 'image://'+zhu,
data: [],
- yAxisIndex: 0,
- color: {
- type: "linear",
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#13e5f2", // 0% 澶勭殑棰滆壊
- },
- {
- offset: 1,
- color: "#01afba", // 100% 澶勭殑棰滆壊
- },
- ],
- },
+
+ // yAxisIndex: 0,
+ // color: {
+ // type: "linear",
+ // x: 0,
+ // y: 0,
+ // x2: 0,
+ // y2: 1,
+ // colorStops: [
+ // {
+ // offset: 0,
+ // color: "#13e5f2", // 0% 澶勭殑棰滆壊
+ // },
+ // {
+ // offset: 1,
+ // color: "#01afba", // 100% 澶勭殑棰滆壊
+ // },
+ // ],
+ // },
},
{
name: "鐢熶骇瀹屾垚鐜�",
type: "line",
data: [],
- showSymbol:false,
+ showSymbol: true,
yAxisIndex: 1,
- color: 'rgba(255,255,255,0.85)',
- lineStyle:{
- width:3
- }
+ smooth: true, // 浣挎姌绾垮浘骞虫粦
+ color: "rgba(255,205,86,0.85)",
+ lineStyle: {
+ width: 1,
+ },
},
- {
- name: "鐢熶骇璁″垝鏁�", // 娣诲姞鐢熶骇璁″垝鏁�
- type: "line",
- data: [], // 鏍规嵁闇�瑕佸～鍏呮鏁扮粍
- showSymbol: false,
- yAxisIndex: 0, // 涓庣浉搴旂殑 y 杞村叧鑱�
- color: 'rgba(255,205,86,0.85)', // 鑷畾涔夐鑹�
- lineStyle: {
- width: 3
- }
- }
+ // {
+ // name: "鐢熶骇璁″垝鏁�", // 娣诲姞鐢熶骇璁″垝鏁�
+ // type: "line",
+ // data: [], // 鏍规嵁闇�瑕佸～鍏呮鏁扮粍
+ // showSymbol: true,
+ // smooth: true, // 浣挎姌绾垮浘骞虫粦
+ // yAxisIndex: 0, // 涓庣浉搴旂殑 y 杞村叧鑱�
+ // color: "rgba(255,255,255,0.85)", // 鑷畾涔夐鑹�
+ // lineStyle: {
+ // width: 1,
+ // },
+ // },
],
// animation: true,
// dataZoom: [
@@ -186,15 +211,17 @@
// ],
};
this.myChart.setOption(this.option);
- const that=this
- window.addEventListener('resize',()=>{
+ const that = this;
+ window.addEventListener("resize", () => {
that.myChart.resize();
- })
+ });
// this.barChartScrolling();
// this.defineEvent()
// window.addEventListener("resize", ()=> {
// this.myChart.resize();
// });
+
+ // this.init()
},
methods: {
// 姘村钩婊氬姩
@@ -242,9 +269,54 @@
clearInterval(this.timechartes);
});
},
+
+ init() {
+ var chartDom = document.getElementById("main");
+ var myChart = echarts.init(chartDom);
+ var option;
+ var rocket =''
+
+ option = {
+ legend: {
+ data: ["tu1", "barbg1"],
+ },
+ xAxis: {
+ data: ["a", "b", "c", "d"],
+ },
+ yAxis: {
+ show: true,
+ },
+ series: [
+ {
+ type: "pictorialBar",
+ name: "tu1",
+ symbol: 'image://'+zhu,
+ data: [
+ {
+ value: 60,
+ symbolRepeat: false,
+ },
+ {
+ value: 60,
+ symbolRepeat: false,
+ },
+ {
+ value: 60,
+ symbolRepeat: false,
+ },
+ {
+ value: 60,
+ symbolRepeat: false,
+ },
+ ],
+ },
+ ],
+ };
+ myChart.setOption(option);
+ },
+
},
};
</script>
-
- <style>
-</style>
\ No newline at end of file
+
+<style></style>
diff --git a/yiqi_screen/src/components/ProductionStatistics.vue b/yiqi_screen/src/components/ProductionStatistics.vue
index 6248f98..b8654cc 100644
--- a/yiqi_screen/src/components/ProductionStatistics.vue
+++ b/yiqi_screen/src/components/ProductionStatistics.vue
@@ -1,8 +1,8 @@
<template>
<div class="box-container" id="echarts4"></div>
</template>
-
- <script>
+
+<script>
let timer = null;
export default {
props: {
@@ -22,29 +22,31 @@
},
watch: {
produceStatisData(val) {
- // 褰撳墠鐝粍瀹為檯鐢熶骇鏁伴噺 currentShiftProduceNum
+ // 褰撳墠鐝粍瀹為檯鐢熶骇鏁伴噺 currentShiftProduceNum
// 褰撳墠鐝粍璁″垝鐢熶骇鏁伴噺 currentShiftPlanNum
var num1 = val.currentShiftProduceNum; //瀹為檯鐢熶骇鏁伴噺
var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //璁″垝鐢熶骇鏁伴噺
- if(val.currentShiftPlanNum == 0){ //鍒嗘瘝涓�0 鏄剧ず0%
- num1 = 0
- num2 = 10
+ if (val.currentShiftPlanNum == 0) {
+ //鍒嗘瘝涓�0 鏄剧ず0%
+ num1 = 0;
+ num2 = 10;
}
this.$set(this.option.series[0], "data", [
- // { value: 1 }, //瀹為檯鐢熶骇鏁伴噺 1/ (9+1) = 10%
- // { value: 9 },
- { value: num1 }, //瀹為檯鐢熶骇鏁伴噺
- { value: num2 },
+ // { value: 1 }, //瀹為檯鐢熶骇鏁伴噺 1/ (9+1) = 10%
+ // { value: 9 },
+ { value: Math.floor(num1) }, //瀹為檯鐢熶骇鏁伴噺
+ { value: Math.floor(num2) },
]);
- var num3 = val.currentMonthProduceNum;
- var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum;
- if(val.currentMonthPlanNum == 0 ){ //鍒嗘瘝涓�0 鏄剧ず0%
- num3 = 0
- num4 = 10
+ var num3 = val.currentMonthProduceNum;
+ var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum;
+ if (val.currentMonthPlanNum == 0) {
+ //鍒嗘瘝涓�0 鏄剧ず0%
+ num3 = 0;
+ num4 = 10;
}
this.$set(this.option.series[1], "data", [
- { value: num3 },
- { value: num4 },
+ { value: Math.floor(num3) },
+ { value: Math.floor(num4) },
]);
this.myChart.setOption(this.option);
@@ -55,12 +57,46 @@
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,
+ // },
+ // },
+ // ],
+
series: [
{
name: "Access From",
type: "pie",
- // radius: ["25%", "40%"],
- radius: ["30%", "37%"],//鐜彉缁�
+ // radius: ["25%", "40%"],
+ radius: ["30%", "37%"], //鐜彉缁�
center: ["26%", "47%"],
avoidLabelOverlap: false,
label: {
@@ -71,11 +107,13 @@
fontSize: 12,
},
- emphasis: { //楗煎浘涓棿鐨勫瓧浣撳ぇ灏�
+ emphasis: {
+ //楗煎浘涓棿鐨勫瓧浣撳ぇ灏�
scale: false,
label: {
show: true,
- fontSize: 15,
+ fontSize: 22,
+ color: "#19d8d0",
fontWeight: "normal",
},
},
@@ -93,7 +131,7 @@
name: "Access From",
type: "pie",
// radius: ["25%", "40%"],
- radius: ["30%", "37%"],//鐜彉缁�
+ radius: ["30%", "37%"], //鐜彉缁�
center: ["74%", "47%"],
avoidLabelOverlap: false,
label: {
@@ -112,7 +150,8 @@
scale: false,
label: {
show: true,
- fontSize: 15, //楗煎浘涓棿鐨勫瓧浣撳ぇ灏�
+ fontSize: 22,
+ color: "#19d8d0",
fontWeight: "normal",
},
},
@@ -124,10 +163,10 @@
],
};
this.myChart.setOption(this.option);
- const that=this
- window.addEventListener('resize',()=>{
+ const that = this;
+ window.addEventListener("resize", () => {
that.myChart.resize();
- })
+ });
// this.getData();
this.defineEvent();
// this.selectPie();
@@ -217,9 +256,9 @@
},
};
</script>
-
- <style>
- #echarts4{
- transform: scaleY(2);
- }
-</style>
\ No newline at end of file
+
+<style>
+#echarts4 {
+ transform: scaleY(2);
+}
+</style>
diff --git a/yiqi_screen/src/components/QualityDataTrends.vue b/yiqi_screen/src/components/QualityDataTrends.vue
index 2236c1c..1bfa404 100644
--- a/yiqi_screen/src/components/QualityDataTrends.vue
+++ b/yiqi_screen/src/components/QualityDataTrends.vue
@@ -1,5 +1,5 @@
<template>
- <div class="box-container echarts3Box" style="height: 1.52rem" id="echarts3"></div>
+ <div class="box-container echarts3Box" id="echarts3"></div>
</template>
<script>
@@ -35,15 +35,16 @@
data: [],
type: "line",
// symbol:'none',
- symbolSize: 0,
+ // symbolSize: 0,
lineStyle: {
- color: "#fff",
+ color: "#7b8fe6",
},
itemStyle: {
normal: {
label: {
show: true,
- color: "#fff",
+
+ color: "#7b8fe6",
},
},
},
@@ -141,5 +142,7 @@
</script>
<style>
-
+ .echarts3Box{
+ height: 150px !important;
+ }
</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
new file mode 100644
index 0000000..63cf0ce
--- /dev/null
+++ b/yiqi_screen/src/components/img/t.js
@@ -0,0 +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
--
Gitblit v1.9.3