From 0630126012170da25291d55f0a1bd3130e64f434 Mon Sep 17 00:00:00 2001 From: liuying <1427574514@qq.com> Date: 周一, 28 4月 2025 15:45:28 +0800 Subject: [PATCH] 一汽大屏 未提交的代码 --- yiqi_screen1216二维.rar | 0 yiqi_screen/src/assets/images/8.gif | 0 yiqi_screen/src/assets/images/quan2.png | 0 yiqi_screen/src/components/ProductionStatistics1.vue | 303 +++++ yiqi_screen/src/components/ProductionStatistics copy.vue | 277 ++++ yiqi_screen/src/components/ProductionStatistics备份1113.vue | 458 ++++++++ yiqi_screen/src/components/EquipmentRunStatus5.vue | 67 + yiqi_screen/src/components/img/t.js | 2 yiqi_screen/src/components/Content备份.vue | 658 +++++++++++ yiqi_screen/package.json | 1 yiqi_screen/src/components/ProductionStatistics copy1113.vue | 325 +++++ yiqi_screen/src/assets/t.js | 2 yiqi_screen/src/components/EquipmentRunStatus4.vue | 71 + yiqi_screen/src/components/ProductionStatistics.vue | 130 - yiqi_screen/src/components/ProductionCompletionTrend.vue | 55 yiqi_screen/src/assets/images/blue/zhuozi.png | 0 yiqi_screen/src/assets/images/9.png | 0 yiqi_screen/src/App.vue | 3 yiqi_screen/src/components/EquipmentRunStatus3.vue | 67 + yiqi_screen/src/assets/images/quan.png | 0 yiqi_screen/src/assets/images/yellow/zhuozi.png | 0 yiqi_screen/package-lock.json | 39 yiqi_screen/src/assets/images/40.png | 0 yiqi_screen/src/assets/images/white/zhuozi.png | 0 yiqi_screen/src/components/EquipmentRunStatus2.vue | 71 + yiqi_screen/src/assets/images/6.gif | 0 yiqi_screen/src/assets/images/green/zhuozi.png | 0 yiqi_screen/src/assets/images/red/zhuozi.png | 0 yiqi_screen/src/components/Content.vue | 318 ++++- yiqi_screen/src/components/ProductionStatistics copy 2.vue | 458 ++++++++ yiqi_screen/src/api/api.js | 4 31 files changed, 3,104 insertions(+), 205 deletions(-) diff --git a/yiqi_screen/package-lock.json b/yiqi_screen/package-lock.json index 08504af..0deeb98 100644 --- a/yiqi_screen/package-lock.json +++ b/yiqi_screen/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@jiaminghi/data-view": "^2.10.0", + "animejs": "^3.2.2", "axios": "^1.6.0", "core-js": "^3.8.3", "echarts": "^5.4.3", @@ -3459,6 +3460,11 @@ "ajv": "^6.9.1" } }, + "node_modules/animejs": { + "version": "3.2.2", + "resolved": "https://registry.npmmirror.com/animejs/-/animejs-3.2.2.tgz", + "integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ==" + }, "node_modules/ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz", @@ -5351,12 +5357,12 @@ } }, "node_modules/echarts": { - "version": "5.4.3", - "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz", - "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==", + "version": "5.5.1", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz", + "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==", "dependencies": { "tslib": "2.3.0", - "zrender": "5.4.4" + "zrender": "5.6.0" } }, "node_modules/echarts/node_modules/tslib": { @@ -12822,9 +12828,9 @@ "dev": true }, "node_modules/zrender": { - "version": "5.4.4", - "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz", - "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==", + "version": "5.6.0", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz", + "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==", "dependencies": { "tslib": "2.3.0" } @@ -15447,6 +15453,11 @@ "dev": true, "requires": {} }, + "animejs": { + "version": "3.2.2", + "resolved": "https://registry.npmmirror.com/animejs/-/animejs-3.2.2.tgz", + "integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ==" + }, "ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz", @@ -16958,12 +16969,12 @@ "dev": true }, "echarts": { - "version": "5.4.3", - "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz", - "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==", + "version": "5.5.1", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz", + "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==", "requires": { "tslib": "2.3.0", - "zrender": "5.4.4" + "zrender": "5.6.0" }, "dependencies": { "tslib": { @@ -22854,9 +22865,9 @@ } }, "zrender": { - "version": "5.4.4", - "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz", - "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==", + "version": "5.6.0", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz", + "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==", "requires": { "tslib": "2.3.0" }, diff --git a/yiqi_screen/package.json b/yiqi_screen/package.json index 2e16487..bf49fa9 100644 --- a/yiqi_screen/package.json +++ b/yiqi_screen/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "@jiaminghi/data-view": "^2.10.0", + "animejs": "^3.2.2", "axios": "^1.6.0", "core-js": "^3.8.3", "echarts": "^5.4.3", diff --git a/yiqi_screen/src/App.vue b/yiqi_screen/src/App.vue index 3559a15..e5cb343 100644 --- a/yiqi_screen/src/App.vue +++ b/yiqi_screen/src/App.vue @@ -20,11 +20,12 @@ <style> html, body { + font-size: 79.5833px !important; width: 1910px; 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/api/api.js b/yiqi_screen/src/api/api.js index 4e4b29d..e512858 100644 --- a/yiqi_screen/src/api/api.js +++ b/yiqi_screen/src/api/api.js @@ -6,8 +6,8 @@ // if(process.env.NODE_ENV === "development"){ // baseURL = "http://localhost:7788/" //杩欓噷鍙湪vue.config.js鍋氫竴涓唬鐞嗐�愪唬鐞嗕唬鐮佽涓嬨�� // }else{ - // baseURL = "http://localhost:7788/api" - baseURL = "http://192.168.216.203:7788/api" // 绾夸笂鐜鍦板潃 + baseURL = "http://localhost:7788/api" + // baseURL = "http://192.168.216.203:7788/api" // 绾夸笂鐜鍦板潃 // } // baseURL = "http://localhost:7788/api" //鏈湴娴嬭瘯鐜 diff --git a/yiqi_screen/src/assets/images/40.png b/yiqi_screen/src/assets/images/40.png new file mode 100644 index 0000000..4ec77cb --- /dev/null +++ b/yiqi_screen/src/assets/images/40.png Binary files differ diff --git a/yiqi_screen/src/assets/images/6.gif b/yiqi_screen/src/assets/images/6.gif new file mode 100644 index 0000000..9b3a60a --- /dev/null +++ b/yiqi_screen/src/assets/images/6.gif Binary files differ diff --git a/yiqi_screen/src/assets/images/8.gif b/yiqi_screen/src/assets/images/8.gif new file mode 100644 index 0000000..6a7aa3d --- /dev/null +++ b/yiqi_screen/src/assets/images/8.gif Binary files differ diff --git a/yiqi_screen/src/assets/images/9.png b/yiqi_screen/src/assets/images/9.png new file mode 100644 index 0000000..4ec77cb --- /dev/null +++ b/yiqi_screen/src/assets/images/9.png Binary files differ diff --git a/yiqi_screen/src/assets/images/blue/zhuozi.png b/yiqi_screen/src/assets/images/blue/zhuozi.png new file mode 100644 index 0000000..5f306b9 --- /dev/null +++ b/yiqi_screen/src/assets/images/blue/zhuozi.png Binary files differ diff --git a/yiqi_screen/src/assets/images/green/zhuozi.png b/yiqi_screen/src/assets/images/green/zhuozi.png new file mode 100644 index 0000000..dbc09aa --- /dev/null +++ b/yiqi_screen/src/assets/images/green/zhuozi.png Binary files differ diff --git a/yiqi_screen/src/assets/images/quan.png b/yiqi_screen/src/assets/images/quan.png index 8c2bef0..4343132 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/images/quan2.png b/yiqi_screen/src/assets/images/quan2.png new file mode 100644 index 0000000..8c2bef0 --- /dev/null +++ b/yiqi_screen/src/assets/images/quan2.png Binary files differ diff --git a/yiqi_screen/src/assets/images/red/zhuozi.png b/yiqi_screen/src/assets/images/red/zhuozi.png new file mode 100644 index 0000000..bbede40 --- /dev/null +++ b/yiqi_screen/src/assets/images/red/zhuozi.png Binary files differ diff --git a/yiqi_screen/src/assets/images/white/zhuozi.png b/yiqi_screen/src/assets/images/white/zhuozi.png new file mode 100644 index 0000000..bf654a0 --- /dev/null +++ b/yiqi_screen/src/assets/images/white/zhuozi.png Binary files differ diff --git a/yiqi_screen/src/assets/images/yellow/zhuozi.png b/yiqi_screen/src/assets/images/yellow/zhuozi.png new file mode 100644 index 0000000..e906e3b --- /dev/null +++ b/yiqi_screen/src/assets/images/yellow/zhuozi.png Binary files differ diff --git a/yiqi_screen/src/assets/t.js b/yiqi_screen/src/assets/t.js index 36e8e8a..63fb1fd 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+CAYAAAA3MXHFAAABLElEQVRoge3bPyvEcRwH8NfpsEgWMdhsMrAou8dgMYtFyioZXELJbFZWBgvPAOEBGO4x3GCjM1xX59yf4X5n0Ps9fJfvu1596rN+SpP7dT1Swi5OMN6r2CdfOMPRSI/SNO5wMSBWQwU7GCt3Ka3hCrMDQFDFDQ4wovm0ZBSnuC8Ae8Qz9lqd1gnncY2VASG4xQzW2z+a8gZeC8DquMQyVjsVyljAHI4HxGhs4yEmuhXKWNJY+yLy3gvj99IMPQEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAFb8vXXYN8EDBgwYMCAAf85eIWPbndPRaaK7VrFA8Od8BPnWGxi/Lx7KjJv2KxVvLR/lPGErYKgOqZwUav47FT4BrulK2qVemffAAAAAElFTkSuQmCC" \ No newline at end of file +export let zhu = 'data:image/png;base64,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'; \ No newline at end of file diff --git a/yiqi_screen/src/components/Content.vue b/yiqi_screen/src/components/Content.vue index b0010f1..9c43bf8 100644 --- a/yiqi_screen/src/components/Content.vue +++ b/yiqi_screen/src/components/Content.vue @@ -20,30 +20,59 @@ <div class="main"> <div class="main-top"> <div class="main-top_ly"> + <!-- 浜х嚎甯冨眬鍥� --> <img src="~@/assets/images/prodline_all.png" class="prodline" alt="line" /> - <!-- <img - alt="t10" - :src="require(`@/assets/images/10.png`)" - class="OP88" - id="animatedImage" - /> + <!-- <img src="~@/assets/images/9.png" class="line100" alt="line100" /> + <p style="color: white;"> {{equipmentStatusData}} </p> --> + + + <!-- 椤堕儴 --> + <div v-for="item in equipmentStatusData"> + <!-- <p style="color: white;font-size: 32px"> {{ item.equipmentCurrentState }} </p> --> + + <img + :alt="item.workingProcedure" + :src=" + require(`@/assets/images/${ + imageColor[item.workingProcedure] + }/zhuozi.png`) + " + class="prodline_op325" + /> + + <img + :alt="item.workingProcedure" + v-if=" + item.equipmentCurrentState == 1 && + item.workingProcedure == 'OP30' + " + src="~@/assets/images/6.gif" + class="box100" + /> + <img + v-if=" + item.equipmentCurrentState == 1 && + item.workingProcedure == 'OP20' + " + src="~@/assets/images/8.gif" + class="box200" + /> + <img + v-if=" + item.equipmentCurrentState == 1 && + item.workingProcedure == 'OP50' + " + src="~@/assets/images/8.gif" + class="box300" + /> + </div> + <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=" @@ -54,14 +83,16 @@ :class="`euip ${item.workingProcedure}`" /> - <img alt="t2" src="~@/assets/images/OP35.png" class="prodline_op35" /> <img - alt="t3" + src="~@/assets/images/OP35.png" + class="prodline_op325" + /> + + <img :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" /> @@ -70,15 +101,21 @@ <!-- <button @click="flag=true">data鏀瑰彉</button> --> <div class="main-bottom"> <div class="echarts-box border_left1"> - <div class="echarts-title">璁惧杩愯鐘舵�佺粺璁″浘</div> + <div class="echarts-title"> + <span class="title1"> 璁惧杩愯鐘舵�佺粺璁″浘 </span> + </div> <EquipmentRunStatus :equipmentStatusData="equipmentStatusData" /> </div> <div class="echarts-box border_left2"> - <div class="echarts-title">浜х嚎鍋ュ悍鑳藉姏鍥�</div> + <div class="echarts-title"> + <span class="title1"> 浜х嚎鍋ュ悍鑳藉姏鍥� </span> + </div> <ProdlineHealthy /> </div> <div class="echarts-box border_middle"> - <div class="echarts-title">璐ㄩ噺鏁版嵁瓒嬪娍鍥�</div> + <div class="echarts-title"> + <span class="title1"> 璐ㄩ噺鏁版嵁瓒嬪娍鍥� </span> + </div> <div class="box11"> {{ qualityData.qualityType }} </div> @@ -111,7 +148,18 @@ </div> </div> <div class="echarts-box border_right1"> - <div class="echarts-title">鏈彮/鏈湀浜ч噺缁熻</div> + <div class="echarts-title"> + <span class="title1"> 鏈彮/鏈湀浜ч噺缁熻 </span> + </div> + + <!-- + <div class="ring-container quan1"> + <div class="outer-ring"></div> + <div class="inner-ring"></div> + </div> --> + + <div class="quan1"></div> + <div class="quan2"></div> <ProductionStatistics :produceStatisData="produceStatisData" /> <div class="pie-label-left"> @@ -140,7 +188,9 @@ </div> </div> <div class="echarts-box border_right2"> - <div class="echarts-title">鐢熶骇瀹屾垚瓒嬪娍</div> + <div class="echarts-title"> + <span class="title1"> 鐢熶骇瀹屾垚瓒嬪娍 </span> + </div> <ProductionCompletionTrend :produceCompletionData="produceCompletionData" /> @@ -270,11 +320,15 @@ (obj) => obj.workingProcedure == item.workingProcedure ); if (res.length > 0) { + // item.equipmentCurrentState =5; 娴嬭瘯 equipmentData.push(item); } }); this.equipmentStatusData = equipmentData; + console.log(88888888); + console.log(JSON.stringify(this.equipmentStatusData) ); this.getImageColor(data); + } catch (error) { console.log(error); } @@ -290,7 +344,8 @@ this.imageColor[item.workingProcedure] = result[0].color; } }); - // console.log(this.imageColor, "getImageColor"); + console.log(5555555555); + console.log(this.imageColor, "getImageColor"); }, // 鑾峰彇璐ㄩ噺鏁版嵁 async getQualityData() { @@ -335,35 +390,7 @@ }, }, 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(){ @@ -424,28 +451,28 @@ } .left-text { - font-size: 20px; + font-size: 16px; color: #fff; position: absolute; - top: 63px; + top: 79px; left: 37px; width: 368px; text-align: right; - line-height: 48px; + line-height: 23px; font-weight: 700; - letter-spacing: -2px; + transform: scaleY(2); } .right-text { - font-size: 18px; + font-size: 16px; text-align: right; color: #fff; position: absolute; - top: 63px; + top: 79px; right: 268px; - line-height: 48px; + line-height: 23px; font-weight: 700; - letter-spacing: -2px; + transform: scaleY(2); } } @@ -472,7 +499,7 @@ width: 95%; margin: 0 auto; position: relative; - height: 6.8rem; + height: 526px; } .prodline { @@ -482,14 +509,22 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); + height: 225px; } .prodline_op35 { - display: none; - // position: absolute; - // top: 2.72rem; - // left: 4.3rem; - // width:1.8%; + position: absolute; + top: 246px; + left: 106px; + width: 40px; + z-index: 0; + } + .prodline_op325 { + position: absolute; + top: 254px; + left: 108px; + width: 38px; + height: 63px; } .euip { @@ -500,41 +535,41 @@ } .OP05 { - top: -76px; - left: -220px; + top: -122px; + left: -223px; } .OP10, .OP40 { - top: -90px; - left: -236px; - width: 112%; - height: 902px; + top: -133px; + left: -145px; + height: 904px; } .OP20 { top: -95px; - left: 31px; + left: -77px; width: 86%; - transform: scale(1.5, 1.2); } .OP30 { - top: -183px; - left: -247px; + top: -152px; + left: -226px; width: 2061px; height: 923px; } .OP35 { - top: -104px; + top: -151px; left: -182px; + width: 100%; + z-index: 999; } .OP50 { - top: -168px; - left: -75px; - width: 100%; + top: -108px; + left: 11px; + width: 90%; } .OP60 { @@ -549,8 +584,13 @@ width: 101%; } - .OP80, .unit { + top: -113px; + left: 86px; + transform: scale(1.2); + } + + .OP80 { top: -1.95rem; left: 1.98rem; } @@ -563,7 +603,7 @@ } .main-bottom { - height: 320px; + height: 336px; display: flex; justify-content: center; .border_left1 { @@ -624,7 +664,6 @@ color: #00f8c6; text-align: center; border-bottom: 2px solid #0739a3; - } } @@ -697,4 +736,111 @@ .hidden { display: none; /* 闅愯棌鍏冪礌 */ } + +// .ring-container { +// position: relative; +// width: 85px; +// height: 85px; +// display: flex; +// justify-content: center; +// align-items: center; +// } + +// .outer-ring { +// position: absolute; +// width: 100%; +// height: 100%; +// border-radius: 50%; +// background: transparent; +// border: 1px solid #3498db; /* 澶栫幆棰滆壊 */ +// } + +// .inner-ring { +// position: absolute; +// width: 80%; +// height: 80%; +// border-radius: 50%; +// background: transparent; +// box-shadow: inset 0 0 30px #084b71; +// border: 1px solid #3c5da9; +// } + +// .quan1{ +// position: absolute; +// top: 142px; +// left: 19px; +// } + +.quan1 { + position: absolute; + background-size: 100% 100%; + content: ""; + width: 125px; + height: 118px; + z-index: -1; + top: 117px; + left: 3px; + transform: scaleY(2); + border-radius: 100%; + background-image: url("@/assets/images/quan.png"); /* 鏇挎崲涓烘偍鐨勮儗鏅浘璺緞 */ + background-size: cover; /* 鎴栦娇鐢� contain锛屾牴鎹渶瑕侀�夋嫨 */ + background-repeat: no-repeat; + background-size: 95%; +} + +.quan2 { + position: absolute; + background-size: 100% 100%; + content: ""; + width: 125px; + height: 118px; + z-index: -1; + top: 117px; + left: 120px; + transform: scaleY(2); + border-radius: 100%; + background-image: url("@/assets/images/quan.png"); /* 鏇挎崲涓烘偍鐨勮儗鏅浘璺緞 */ + background-size: cover; /* 鎴栦娇鐢� contain锛屾牴鎹渶瑕侀�夋嫨 */ + background-repeat: no-repeat; + background-size: 95%; +} +.box100 { + position: absolute; + left: 25%; + top: 35%; + width: 67px; + z-index: 9999; +} + +.box200 { + position: absolute; + left: 4%; + top: 48%; + width: 77px; + z-index: 9999; +} +.box300 { + position: absolute; + left: 44%; + top: 49%; + width: 75px; + z-index: 9999; +} +.title1 { + transform: scaleY(2); + font-size: 12px; + display: block; + margin-top: 7px; +} +.zuozi { + position: absolute; + top: 10px; + left: 10px; +} +.line100 { + position: absolute; + left: 5px; + top: 64%; + height: 18px; +} </style> diff --git "a/yiqi_screen/src/components/Content\345\244\207\344\273\275.vue" "b/yiqi_screen/src/components/Content\345\244\207\344\273\275.vue" new file mode 100644 index 0000000..76bbcde --- /dev/null +++ "b/yiqi_screen/src/components/Content\345\244\207\344\273\275.vue" @@ -0,0 +1,658 @@ +<template> + <!-- 涓婂崐閮ㄥ垎涔熷垎涓夋牸 --> + <div class="container"> + <div class="header"> + <div class="title">4GC涓変唬鍙戝姩鏈鸿繛鏉嗙嚎888</div> + <div class="left-text"> + <div style="line-height: 30px">{{ nowTime }}</div> + <div style="padding-left: 25px"> + 瀹夊叏鐢熶骇:{{ produceStatisData.currentSafeProductionDay }}澶� + </div> + </div> + + <div class="right-text"> + <div style="line-height: 30px"> + 褰撳墠鐝:{{ produceStatisData.currentTeamName }} + </div> + <!-- style="padding-left:25px" --> + <div>鐝暱:{{ produceStatisData.currentTeamLeader }}</div> + </div> + </div> + <div class="main"> + <div class="main-top"> + <div class="width_left"> + <div class="box1"> + <div class="echarts-box border_left1"> + <div class="echarts-title">缁熻鍥�1</div> + <EquipmentRunStatus2 :equipmentStatusData="equipmentStatusData" /> + </div> + </div> + <br> + <br> <br> + <div class="box1"> + <div class="echarts-box border_left1"> + <div class="echarts-title">缁熻鍥�2</div> + <EquipmentRunStatus3 :equipmentStatusData="equipmentStatusData" /> + </div> + </div> + </div> + + <div class="width_middle"> + <img src="~@/assets/images/prodline_all.png" class="prodline" /> + + <img + 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" + /> + </div> + + <div class="width_right"> + <div class="box1"> + <div class="echarts-box border_left1"> + <div class="echarts-title">缁熻鍥�3</div> + <EquipmentRunStatus4 :equipmentStatusData="equipmentStatusData" /> + </div> + </div> + <br> + <br> <br> + <div class="box1"> + <div class="echarts-box border_left1"> + <div class="echarts-title">缁熻鍥�4</div> + <EquipmentRunStatus5 :equipmentStatusData="equipmentStatusData" /> + </div> + </div> + </div> + </div> + + <!-- <button @click="flag=true">data鏀瑰彉</button> --> + <div class="main-bottom"> + <div class="echarts-box border_left1"> + <div class="echarts-title">璁惧杩愯鐘舵�佺粺璁″浘</div> + <EquipmentRunStatus :equipmentStatusData="equipmentStatusData" /> + </div> + <div class="echarts-box border_left2"> + <div class="echarts-title">浜х嚎鍋ュ悍鑳藉姏鍥�</div> + <ProdlineHealthy /> + </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; + " + > + {{ qualityData.qualityType }} + </div> + <div> + <div + style=" + margin: 0 0.13rem; + height: 0.13rem; + background-color: #f14158; + " + ></div> + <div + style=" + margin: 0 0.13rem; + height: 0.13rem; + background-color: #a7cf29; + " + ></div> + </div> + <QualityDataTrendse :qualityData="qualityData.list" /> + <div> + <div + style=" + margin: 0 0.13rem; + height: 0.13rem; + background-color: #a7cf29; + " + ></div> + <div + style=" + margin: 0 0.13rem; + height: 0.13rem; + background-color: #f14158; + " + ></div> + </div> + </div> + <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 + > + {{ produceStatisData.currentShiftPlanNum }} + </div> + <div class="pie-label-right"> + {{ produceStatisData.currentMonthProduceNum }} + <span + v-if=" + produceStatisData.currentMonthPlanNum || + produceStatisData.currentMonthPlanNum == 0 + " + >/</span + > + {{ produceStatisData.currentMonthPlanNum }} + </div> + </div> + <div class="echarts-box border_right2"> + <div class="echarts-title">鐢熶骇瀹屾垚瓒嬪娍</div> + <ProductionCompletionTrend + :produceCompletionData="produceCompletionData" + /> + </div> + </div> + </div> + </div> +</template> + +<script> +// import OperationalAvailability from "./OperationalAvailability.vue"; +// import EquipmentStatus from "./EquipmentStatus.vue"; +// import ProductionCapacity from "./ProductionCapacity.vue"; +import EquipmentRunStatus from "./EquipmentRunStatus.vue"; +import EquipmentRunStatus2 from "./EquipmentRunStatus2.vue"; +import EquipmentRunStatus3 from "./EquipmentRunStatus3.vue"; +import EquipmentRunStatus4 from "./EquipmentRunStatus4.vue"; +import EquipmentRunStatus5 from "./EquipmentRunStatus5.vue"; + +import ProdlineHealthy from "./ProdlineHealthy.vue"; +import ProductionCompletionTrend from "./ProductionCompletionTrend.vue"; +import ProductionStatistics from "./ProductionStatistics.vue"; +import QualityDataTrendse from "./QualityDataTrends.vue"; +import moment from "moment"; + +import { + GetEquipmentCurrentState, + getQualityData, + getLargeScreenFrequency, + getProduceCompletionStatus, + getCurrentProduceInfo, +} from "@/api/common"; + +export default { + name: "MainContentZg", + components: { + EquipmentRunStatus, + EquipmentRunStatus2, + EquipmentRunStatus3, + EquipmentRunStatus4, + EquipmentRunStatus5, + ProductionStatistics, + ProductionCompletionTrend, + QualityDataTrendse, + ProdlineHealthy, + }, + data() { + return { + dataTimer: null, + dateTimer: null, + time: 5000, + nowTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"), + // flag: false, + option: {}, + myChart: {}, + EquipmentEnums: [ + { + code: 1, + color: "green", + }, + { + code: 2, + color: "white", + }, + { + code: 3, + color: "blue", + }, + { + code: 4, + color: "yellow", + }, + { + code: 5, + color: "red", + }, + ], + imageColor: { + OP05: "blue", + OP10: "blue", + OP20: "blue", + OP30: "blue", + OP35: "blue", + OP40: "blue", + OP50: "blue", + OP60: "blue", + OP70: "blue", + OP80: "blue", + unit: "blue", + }, + equipmentStatusData: [ + { workingProcedure: "OP05" }, + { workingProcedure: "OP10" }, + { workingProcedure: "OP20" }, + { workingProcedure: "OP30" }, + { workingProcedure: "OP35" }, + { workingProcedure: "OP40" }, + { workingProcedure: "OP50" }, + { workingProcedure: "OP60" }, + { workingProcedure: "OP70" }, + { workingProcedure: "OP80" }, + { workingProcedure: "unit" }, + ], + qualityData: [], + produceCompletionData: [], + produceStatisData: {}, + }; + }, + watch: {}, + created() { + this.getLargeScreenFrequency(); + this.getEquipmentCurrentState(); + this.getQualityData(); + this.getProduceCompletionStatus(); + this.getCurrentProduceInfo(); + this.dataTimer = setInterval(this.timerHandler, this.time); + this.dateTimer = setInterval(() => { + this.nowTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss"); + }, 1000); + }, + methods: { + // 瀹氭椂鍣ㄥ嚱鏁� + timerHandler() { + this.getEquipmentCurrentState(); + this.getQualityData(); + this.getProduceCompletionStatus(); + this.getCurrentProduceInfo(); + }, + // 鑾峰彇璁惧鐘舵�� + 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); + } + }); + this.equipmentStatusData = equipmentData; + this.getImageColor(data); + } catch (error) { + console.log(error); + } + }, + // 鏍规嵁璁惧鐘舵�佽缃澶囬鑹� + getImageColor(data) { + data.forEach((item) => { + let result = this.EquipmentEnums.filter( + (obj) => obj.code == item.equipmentCurrentState + ); + // console.log(item.equipmentCurrentState); + if (result.length > 0) { + this.imageColor[item.workingProcedure] = result[0].color; + } + }); + // console.log(this.imageColor, "getImageColor"); + }, + // 鑾峰彇璐ㄩ噺鏁版嵁 + async getQualityData() { + let { qualityData } = this; + try { + let { data } = await getQualityData({ + qualityType: qualityData.qualityType, + }); + this.qualityData = data; + // console.log(this.qualityData); + } catch (error) { + console.log(error); + } + }, + // 鑾峰彇鐢熶骇瀹屾垚瓒嬪娍鏁版嵁 + async getProduceCompletionStatus() { + try { + let { data } = await getProduceCompletionStatus(); + this.produceCompletionData = data; + } catch (error) { + console.log(error); + } + }, + // 鑾峰彇浜ч噺缁熻鏁版嵁 + async getCurrentProduceInfo() { + try { + let { data } = await getCurrentProduceInfo(); + this.produceStatisData = data; + // console.log(data); + } catch (error) { + console.log(error); + } + }, + // 鑾峰彇瀹氭椂鍣ㄦ椂闂� + async getLargeScreenFrequency() { + try { + let { data } = await getLargeScreenFrequency(); + this.time = data; + } catch (error) { + console.log(error); + } + }, + }, + // beforeDestroy(){ + // clearInterval(this.dataTimer) + // clearInterval(this.dateTimer) + // } +}; +</script> + +<style lang="scss" scoped> +$allHeight: 13.5rem; +$titleHeight: 2rem; + +.container { + width: 100%; + height: auto; + + .header { + 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 { + color: #41c7de; + font-size: 0.38rem; + font-weight: 700; + position: absolute; + top: 0.31rem; + left: 50%; + transform: translate(-50%); + letter-spacing: 8px; + } + + .left-text { + font-size: 0.19rem; + color: #fff; + position: absolute; + top: 1.15rem; + left: 5rem; + } + + .right-text { + font-size: 0.19rem; + text-align: right; + color: #fff; + position: absolute; + top: 1.15rem; + right: 5.3rem; + } + } + + .main { + width: 100%; + height: auto; + // display: flex; + // flex-direction: column; + // justify-content: space-between; + padding: 0 0.28rem 0.19rem; + + .main-top { + width: 100%; + margin: 0 auto; + height: 7.42rem; + display: flex; + margin-bottom: 0.29rem; + + .width_left { + width: 18%; + height: 7.42rem; + } + .width_right { + width: 18%; + height: 7.42rem; + } + + .width_middle { + width: 60%; + margin: 0 auto; + height: 7.42rem; + // background-color: #fff; + background-image: url("~@/assets/images/border_prodline.png"); + background-size: 100% 100%; + // background-size: 101.1% 101.8%; + // background-position: -0.13rem -0.13rem; + position: relative; + .prodline { + width: 95%; + display: block; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .prodline_op35 { + position: absolute; + top: 2.82rem; + left: 2.6rem; + width: 1.8%; + } + + .euip { + // width: 95%; + // position: absolute; + // top: -1.59rem; + // left: 1.28rem; + + margin-top: 1.9rem; + width: 100%; + position: absolute; + margin-left: -.2rem; + + } + + .OP05 { + top: -1.58rem; + left: 0.12rem; + } + + .OP10, + .OP40 { + top: -1.48rem; + left: 0.5rem; + } + + .OP20 { + top: -1.8rem; + left: 0.3rem; + } + + .OP30 { + top: -2.05rem; + left: 0.3rem; + } + + .OP35 { + top: -1.8rem; + left: 0.2rem; + } + + .OP50 { + top: -1.69rem; + left: 0.5rem; + } + + .OP60 { + top: -1.65rem; + left: .7rem; + } + + .OP70 { + top: -1.52rem; + left: 0.9rem; + } + + .OP80, + .unit { + top: -1.95rem; + left: 0.8rem; + } + } + + // img:nth-child(2) { + // width:100%; + // top: -2.05rem; + // left: 1.07rem; + // } + } + + .main-bottom, + .main-top { + height: auto; + display: flex; + // background-color: skyblue; + + .border_left1 { + width: 3.84rem; + margin-right: 0.14rem; + border: 0 !important; + background-image: url("~@/assets/images/border_left1.png"); + background-size: 107.5% 104%; + background-position: -0.14rem -0.13rem; + background-repeat: no-repeat; + } + + .border_left2 { + width: 3.02rem; + margin-right: 0.16rem; + border: 0 !important; + background-image: url("~@/assets/images/border_left2.png"); + background-size: 109.3% 104%; + background-position: -0.14rem -0.13rem; + background-repeat: no-repeat; + } + + .border_middle { + width: 6.09rem; + margin-right: 0.16rem; + border: 0 !important; + background-image: url("~@/assets/images/border_middle.png"); + background-size: 102.7% 104%; + background-position: -0.14rem -0.13rem; + background-repeat: no-repeat; + } + + .border_right1 { + width: 3.75rem; + margin-right: 0.15rem; + border: 0 !important; + background-image: url("~@/assets/images/border_right1.png"); + background-size: 107.5% 104%; + background-position: -0.14rem -0.13rem; + background-repeat: no-repeat; + } + + .border_right2 { + width: 6.09rem; + border: 0 !important; + background-image: url("~@/assets/images/border_right2.png"); + background-size: 104.4% 104%; + background-position: -0.14rem -0.13rem; + background-repeat: no-repeat; + } + + .echarts-box { + height: auto; + border: 2px solid #3a45de; + + .echarts-title { + font-size: 0.18rem; + height: 0.75rem; + padding: 0.31rem 0 0.26rem; + margin: 0 0.23rem; + font-weight: 700; + color: #00afb9; + text-align: center; + border-bottom: 2px solid #3c37bf; + } + } + + .echarts-box:nth-child(4) { + position: relative; + + .pie-label-left { + position: absolute; + bottom: 0.1rem; + left: 0.7rem; + color: #fff; + font-size: 0.2rem; + font-weight: 300; + } + + .pie-label-right { + position: absolute; + bottom: 0.1rem; + right: 0.7rem; + color: #fff; + font-size: 0.2rem; + font-weight: 300; + } + } + + .box-container { + width: 100%; + height: 2.6rem; + // background-color: rgb(196, 231, 178); + } + + .bgi { + background-image: url("~@/assets/bg1.png"); + background-size: contain; + background-repeat: no-repeat; + background-position: center center; + } + } + } + + .box1{ + .echarts-box{ + width: 100% !important; + } + .border_left1{ + margin-right: 0 !important; + } + } + +} +</style> diff --git a/yiqi_screen/src/components/EquipmentRunStatus2.vue b/yiqi_screen/src/components/EquipmentRunStatus2.vue new file mode 100644 index 0000000..b404971 --- /dev/null +++ b/yiqi_screen/src/components/EquipmentRunStatus2.vue @@ -0,0 +1,71 @@ +<template> + <div class="box-container" id="echarts10"></div> +</template> + +<script> +let timer = null; +export default { + data() { + return { + option: {}, + myChart: {}, + currentIndex: -1, + lineData: [], // 娣诲姞鐢ㄤ簬瀛樺偍鏇茬嚎鍥炬暟鎹殑灞炴�� + }; + }, + mounted() { + this.myChart = this.$echarts.init(document.getElementById("echarts10")); + + // 鐢熸垚鍋囨暟鎹� + this.generateFakeData(); + + this.option = { + tooltip: { + trigger: 'axis' + }, + xAxis: { + type: 'category', + data: this.lineData.map(item => item.time) // 浣跨敤鍋囨暟鎹腑鐨勬椂闂翠綔涓� x 杞� + }, + yAxis: { + type: 'value' + }, + series: [{ + name: '鐘舵�佹暟鎹�', + type: 'line', + data: this.lineData.map(item => item.value), // 浣跨敤鍋囨暟鎹腑鐨勫�间綔涓� y 杞� + smooth: true // 骞虫粦鏇茬嚎 + }] + }; + + this.myChart.setOption(this.option); + const that = this; + window.addEventListener("resize", () => { + that.myChart.resize(); + }); + }, + methods: { + generateFakeData() { + // 鐢熸垚 10 涓亣鏁版嵁鐐� + const fakeData = []; + for (let i = 0; i < 10; i++) { + fakeData.push({ + time: `鏃堕棿${i + 1}`, + value: Math.floor(Math.random() * 100) + 1 // 闅忔満鐢熸垚 1-100 鐨勫�� + }); + } + this.lineData = fakeData; + }, + }, +}; +</script> + +<style> +#echarts10 { + width: 3.84rem; +} +.box-container{ + margin: 0 auto; + display: block; +} +</style> diff --git a/yiqi_screen/src/components/EquipmentRunStatus3.vue b/yiqi_screen/src/components/EquipmentRunStatus3.vue new file mode 100644 index 0000000..15ffb40 --- /dev/null +++ b/yiqi_screen/src/components/EquipmentRunStatus3.vue @@ -0,0 +1,67 @@ +<template> + <div class="box-container" id="echarts30"></div> +</template> + +<script> +let timer = null; +export default { + data() { + return { + option: {}, + myChart: {}, + currentIndex: -1, + lineData: [], // 娣诲姞鐢ㄤ簬瀛樺偍鏇茬嚎鍥炬暟鎹殑灞炴�� + }; + }, + mounted() { + this.myChart = this.$echarts.init(document.getElementById("echarts30")); + + // 鐢熸垚鍋囨暟鎹� + this.generateFakeData(); + + this.option = { + tooltip: { + trigger: 'axis' + }, + xAxis: { + type: 'category', + data: this.lineData.map(item => item.time) // 浣跨敤鍋囨暟鎹腑鐨勬暟鎹綔涓� x 杞� + }, + yAxis: { + type: 'value' + }, + series: [{ + name: '鐘舵�佹暟鎹�', + type: 'line', + data: this.lineData.map(item => item.value), // 浣跨敤鍋囨暟鎹腑鐨勫�间綔涓� y 杞� + smooth: true // 骞虫粦鏇茬嚎 + }] + }; + + this.myChart.setOption(this.option); + const that = this; + window.addEventListener("resize", () => { + that.myChart.resize(); + }); + }, + methods: { + generateFakeData() { + // 鐢熸垚 10 涓亣鏁版嵁鐐� + const fakeData = []; + for (let i = 0; i < 10; i++) { + fakeData.push({ + time: `鏁版嵁${i + 1}`, + value: Math.floor(Math.random() * 100) + 1 // 闅忔満鐢熸垚 1-100 鐨勫�� + }); + } + this.lineData = fakeData; + }, + }, +}; +</script> + +<style> +#echarts30 { + width: 3.84rem; +} +</style> diff --git a/yiqi_screen/src/components/EquipmentRunStatus4.vue b/yiqi_screen/src/components/EquipmentRunStatus4.vue new file mode 100644 index 0000000..74c2085 --- /dev/null +++ b/yiqi_screen/src/components/EquipmentRunStatus4.vue @@ -0,0 +1,71 @@ +<template> + <div class="box-container" id="echarts40"></div> +</template> + +<script> +let timer = null; +export default { + data() { + return { + option: {}, + myChart: {}, + currentIndex: -1, + lineData: [], // 娣诲姞鐢ㄤ簬瀛樺偍楗煎浘鏁版嵁鐨勫睘鎬� + }; + }, + mounted() { + this.myChart = this.$echarts.init(document.getElementById("echarts40")); + + // 鐢熸垚鍋囨暟鎹� + this.generateFakeData(); + + this.option = { + tooltip: { + trigger: 'item' // 淇敼涓� 'item' 浠ラ�傚簲楗煎浘 + }, + series: [{ + name: '鐘舵�佹暟鎹�', + type: 'pie', // 淇敼涓� 'pie' + radius: '50%', + data: this.lineData.map(item => ({ + name: item.time, // 楗煎浘涓殑姣忎竴椤瑰悕绉� + value: item.value // 瀵瑰簲鐨勬暟鍊� + })), + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + }] + }; + + this.myChart.setOption(this.option); + const that = this; + window.addEventListener("resize", () => { + that.myChart.resize(); + }); + }, + methods: { + generateFakeData() { + // 鐢熸垚 4 涓亣鏁版嵁鐐� + const fakeData = []; + for (let i = 0; i < 4; i++) { + fakeData.push({ + time: `鏁版嵁${i + 1}`, + value: Math.floor(Math.random() * 100) + 1 // 闅忔満鐢熸垚 1-100 鐨勫�� + }); + } + this.lineData = fakeData; +}, + + }, +}; +</script> + +<style> +#echarts40 { + width: 3.84rem; +} +</style> diff --git a/yiqi_screen/src/components/EquipmentRunStatus5.vue b/yiqi_screen/src/components/EquipmentRunStatus5.vue new file mode 100644 index 0000000..5839230 --- /dev/null +++ b/yiqi_screen/src/components/EquipmentRunStatus5.vue @@ -0,0 +1,67 @@ +<template> + <div class="box-container" id="echarts50"></div> +</template> + +<script> +let timer = null; +export default { + data() { + return { + option: {}, + myChart: {}, + currentIndex: -1, + lineData: [], // 娣诲姞鐢ㄤ簬瀛樺偍鏇茬嚎鍥炬暟鎹殑灞炴�� + }; + }, + mounted() { + this.myChart = this.$echarts.init(document.getElementById("echarts50")); + + // 鐢熸垚鍋囨暟鎹� + this.generateFakeData(); + + this.option = { + tooltip: { + trigger: 'axis' + }, + xAxis: { + type: 'category', + data: this.lineData.map(item => item.time) // 浣跨敤鍋囨暟鎹腑鐨勬暟鎹綔涓� x 杞� + }, + yAxis: { + type: 'value' + }, + series: [{ + name: '鐘舵�佹暟鎹�', + type: 'bar', + data: this.lineData.map(item => item.value), // 浣跨敤鍋囨暟鎹腑鐨勫�间綔涓� y 杞� + smooth: true // 骞虫粦鏇茬嚎 + }] + }; + + this.myChart.setOption(this.option); + const that = this; + window.addEventListener("resize", () => { + that.myChart.resize(); + }); + }, + methods: { + generateFakeData() { + // 鐢熸垚 10 涓亣鏁版嵁鐐� + const fakeData = []; + for (let i = 0; i < 10; i++) { + fakeData.push({ + time: `鏁版嵁${i + 1}`, + value: Math.floor(Math.random() * 100) + 1 // 闅忔満鐢熸垚 1-100 鐨勫�� + }); + } + this.lineData = fakeData; + }, + }, +}; +</script> + +<style> +#echarts50 { + width: 3.84rem; +} +</style> diff --git a/yiqi_screen/src/components/ProductionCompletionTrend.vue b/yiqi_screen/src/components/ProductionCompletionTrend.vue index 0410158..54bd1e1 100644 --- a/yiqi_screen/src/components/ProductionCompletionTrend.vue +++ b/yiqi_screen/src/components/ProductionCompletionTrend.vue @@ -1,12 +1,16 @@ <template> <div> - <div class="box-container" id="echarts5" style="width: 100%;height:230px"></div> + <div + class="box-container" + id="echarts5" + style="width: 100%; height: 230px" + ></div> </div> </template> <script> import * as echarts from "echarts"; -import {zhu} from './img/t.js' +import { zhu } from "./img/t.js"; export default { props: { @@ -20,7 +24,6 @@ option: {}, myChart: {}, timechartes: null, - myChart2: null, textureImg: null, // img, @@ -33,15 +36,30 @@ yData2 = [], yData3 = []; val.forEach((item) => { - console.log('ceshi', item.completionNum); + console.log("ceshi", item.completionNum); xData.push(item.month); yData1.push({ - value: item.completionNum, + // value: item.completionNum, + value: 100, symbolRepeat: false, }); //瀹為檯 // yData1.push(item.completionNum); //瀹為檯 - yData2.push(item.planCompletionRate); //planCompletionRate - yData3.push(item.planCompletionNum); //璁″垝 + var num = 0; //宸插畬鎴愭暟 / 璁″垝瀹屾垚鏁� + if (item.completionNum > 0) { + if (item.planCompletionNum > item.completionNum) { + // 5/10 + num = item.completionNum / item.planCompletionNum; + } else if (item.planCompletionNum <= 0) { + // 10/0 + num = 100; + } else if (item.completionNum >= item.planCompletionNum) { + // 10/5 + num = 100; + } + } + yData2.push(num.toFixed(2)); //planCompletionRate + // yData2.push(item.planCompletionRate); //planCompletionRate + // yData3.push(item.planCompletionNum); //璁″垝 }); this.$set(this.option.xAxis, "data", xData); this.$set(this.option.series[0], "data", yData1); @@ -58,7 +76,7 @@ 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,#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)", @@ -77,7 +95,7 @@ type: "category", axisLabel: { color: "#326e92", - interval: 0, + interval: 0, fontSize: 13, // formatter: '{value}鏈�' }, @@ -87,7 +105,6 @@ axisLine: { lineStyle: { color: "#326e92", - }, }, }, @@ -105,7 +122,7 @@ show: true, margin: 5, color: "#326e92", - // formatter: '{value}%' + formatter: "{value}%", }, alignTicks: false, nameTextStyle: { @@ -148,9 +165,8 @@ name: "鐢熶骇瀹屾垚鏁�", type: "pictorialBar", // type: "bar", - symbol: 'image://'+zhu, - data: [], - + symbol: "image://" + zhu, + data: [], // yAxisIndex: 0, // color: { // type: "linear", @@ -174,10 +190,11 @@ name: "鐢熶骇瀹屾垚鐜�", type: "line", data: [], + z: 5, showSymbol: true, yAxisIndex: 1, smooth: true, // 浣挎姌绾垮浘骞虫粦 - color: "rgba(255,205,86,0.85)", + color: "#ff9600", lineStyle: { width: 1, }, @@ -216,7 +233,6 @@ // window.addEventListener("resize", ()=> { // this.myChart.resize(); // }); - // this.init() }, methods: { @@ -270,8 +286,8 @@ var chartDom = document.getElementById("main"); var myChart = echarts.init(chartDom); var option; - var rocket ='' - + var rocket = ""; + option = { legend: { data: ["tu1", "barbg1"], @@ -286,7 +302,7 @@ { type: "pictorialBar", name: "tu1", - symbol: 'image://'+zhu, + symbol: "image://" + zhu, data: [ { value: 60, @@ -310,7 +326,6 @@ }; myChart.setOption(option); }, - }, }; </script> diff --git a/yiqi_screen/src/components/ProductionStatistics copy 2.vue b/yiqi_screen/src/components/ProductionStatistics copy 2.vue new file mode 100644 index 0000000..b8c860f --- /dev/null +++ b/yiqi_screen/src/components/ProductionStatistics copy 2.vue @@ -0,0 +1,458 @@ +<template> + <!-- 鏈彮/鏈湀浜ч噺缁熻 --> + <div class="box-container box4" id="echarts4"></div> +</template> + +<script> +let timer = null; +import * as echarts from "echarts"; +export default { + props: { + produceStatisData: { + type: Object, + default: () => {}, + }, + }, + data() { + return { + option: {}, + myChart: {}, + currentIndex: -1, + data1: [], + data2: [{ actualData: 2782, planData: 11128 }], + }; + }, + // watch: { + // produceStatisData(val) { + // // 娴嬭瘯鐢細 + // val.currentShiftProduceNum = 280; + // val.currentShiftPlanNum = 300; + // // 褰撳墠鐝粍瀹為檯鐢熶骇鏁伴噺 currentShiftProduceNum + // // 褰撳墠鐝粍璁″垝鐢熶骇鏁伴噺 currentShiftPlanNum + // var num1 = val.currentShiftProduceNum; //瀹為檯鐢熶骇鏁伴噺 + // var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //璁″垝鐢熶骇鏁伴噺 + // 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, + // }, + // ]); + // 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 }, + // ]); + + // this.myChart.setOption(this.option); + // this.hignLightPie(); + // }, + // }, + mounted() { + this.myChart = this.$echarts.init(document.getElementById("echarts4")); + var value = 60; + var value2 = 15; + let data1 = [ + { + value: value, + name: "", + itemStyle: { + normal: { + color: "#62fbf8", + }, + }, + }, + { + value: 100 - value, + name: "", + label: { + normal: { + show: false, + }, + }, + itemStyle: { + normal: { + color: "rgba(0,0,0,0)", + }, + }, + }, + ]; + + let data2 = [ + { + value: value2, + name: "", + itemStyle: { + normal: { + color: "rgb(105,206,195)", + }, + }, + }, + { + value: 100 - value2, + name: "", + label: { + normal: { + show: false, + }, + }, + itemStyle: { + normal: { + color: "rgba(0,0,0,0)", + }, + }, + }, + ]; + + this.option = { + color: ["#00f6fe", "rgba(5, 19, 96, 0.5)"], + // 鎻掑叆鑳屾櫙鍥� + // graphic: [ + // { + // type: "image", + // id: "background1", + // left: "13px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // top: "61px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // z: -10, + // bounding: "raw", + // origin: [0, 0], + // style: { + // image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰� + // width: 100, + // height: 100, + // }, + // }, + // { + // type: "image", + // id: "background2", + // left: "131px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // top: "61px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // z: -10, + // bounding: "raw", + // origin: [0, 0], + // style: { + // image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰� + // width: 100, + // height: 100, + // }, + // }, + // ], + series: [ + // 宸︿晶 + { + name: "宸�-鏁版嵁", + type: "pie", + // radius: ['65%', '75%'], + radius: ["29%", "36%"], //鐜彉缁� + center: ["25%", "49%"], + silent: true, + // clockwise: false, + startAngle: 90, + z: 1, + zlevel: 0, + label: { + normal: { + position: "center", + }, + }, + data: data1, + }, + { + name: "宸�-涓棿娓愬彉", + type: "pie", + startAngle: 90, + z: 20, + zlevel: 20, + radius: "28%", + hoverAnimation: false, + center: ["25%", "49%"], + + // zlevel: 2, + itemStyle: { + normal: { + labelLine: { + show: false, + }, + color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [ + { + offset: 1, + color: "rgba(55,70,130, 1)", + }, + { + offset: 0, + color: "rgba(55,70,130, 0)", + }, + ]), + shadowBlur: 10, + // shadowColor: 'rgba(55,70,130, 1)' + }, + }, + data: [ + { + value: 100, + }, + ], + }, + { + name: "宸�-鍒诲害闂撮殧", + z: 2, + // zlevel: 1, + type: "gauge", + radius: "57%", + center: ["25%", "49%"], + startAngle: 20, + endAngle: -360, + splitNumber: 10, + hoverAnimation: true, + axisTick: { + show: true, + splitNumber: 1, + length: 14, //鍒诲害闀垮害 + // Distance: 40, //鍒诲害闂撮殧璺濈 + lineStyle: { + width: 5, + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(8, 52, 106, 0.039)", // 0% 澶勭殑棰滆壊 + }, + { + offset: 1, + color: "rgba(8, 52, 106, 0.239)", // 100% 澶勭殑棰滆壊 + }, + ], + false + ), + }, + }, + splitLine: { + show: false, + }, + axisLabel: { + show: false, + }, + pointer: { + show: false, + }, + axisLine: { + lineStyle: { + opacity: 0, + }, + }, + detail: { + show: false, + }, + data: [100], + }, + + // 鍙充晶 + { + name: "鍙�-鏁版嵁", + type: "pie", + // radius: ['65%', '75%'], + radius: ["29%", "36%"], //鐜彉缁� + center: ["74%", "49%"], + silent: true, + // clockwise: false, + startAngle: 90, + z: 1, + zlevel: 0, + label: { + normal: { + position: "center", + }, + }, + data: data2, + }, + { + name: "鍙�-涓棿娓愬彉", + type: "pie", + startAngle: 90, + radius: "28%", + hoverAnimation: false, + center: ["74%", "49%"], + itemStyle: { + normal: { + labelLine: { + show: false, + }, + color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [ + { + offset: 1, + color: "rgba(55,70,130, 1)", + }, + { + offset: 0, + color: "rgba(55,70,130, 0)", + }, + ]), + shadowBlur: 10, + // shadowColor: 'rgba(55,70,130, 1)' + }, + }, + data: [ + { + value: 100, + }, + ], + }, + { + name: "鍙�-鍒诲害闂撮殧", + z: 2, + type: "gauge", + radius: "45%", + center: ["74%", "49%"], + startAngle: 90, + endAngle: -360, + splitNumber: 10, + hoverAnimation: true, + axisTick: { + show: true, + splitNumber: 1, + length: 20, + lineStyle: { + width: 10, + color: "#1183a7", + shadowColor: "rgb(4,31,62, 0.5)", + }, + }, + splitLine: { + show: false, + }, + axisLabel: { + show: false, + }, + pointer: { + show: false, + }, + axisLine: { + lineStyle: { + opacity: 0, + }, + }, + detail: { + show: false, + }, + data: [100], + }, + ], + }; + this.myChart.setOption(this.option); + const that = this; + window.addEventListener("resize", () => { + that.myChart.resize(); + }); + // this.getData(); + this.defineEvent(); + // this.selectPie(); + this.hignLightPie(); + // timer = setInterval(this.selectPie, 1500); + }, + methods: { + // getData() { + // this.data1 = [{ actualData: 144, planData: 288 }]; + // this.$set(this.option.series[0], "data", [ + // { value: this.data1[0].actualData }, + // { value: this.data1[0].planData - this.data1[0].actualData }, + // ]); + // this.$set(this.option.series[1], "data", [ + // { value: this.data2[0].actualData }, + // { value: this.data2[0].planData - this.data2[0].actualData }, + // ]); + // console.log(this.option.series[0].data); + // this.myChart.setOption(this.option); + // }, + selectPie() { + let dataLen = this.option.series[0].data.length; + this.currentIndex = (this.currentIndex + 1) % dataLen; + this.hignLightPie(); + }, + // 杞挱鐐逛寒楗煎浘 + hignLightPie() { + const dataPie = this.option.series[0].data; + // 鐔勭伃鎵�鏈夋墖褰㈠尯鍩� + for (var index in dataPie) { + this.myChart.dispatchAction({ + type: "downplay", + seriesIndex: 0, + dataIndex: index, + }); + + this.myChart.dispatchAction({ + type: "downplay", + seriesIndex: 1, + dataIndex: index, + }); + } + + // 鐐逛寒褰撳墠鎵囧舰鍖哄煙 + this.myChart.dispatchAction({ + type: "highlight", + seriesIndex: 0, + dataIndex: 0, + }); + + this.myChart.dispatchAction({ + type: "highlight", + seriesIndex: 1, + dataIndex: 0, + }); + }, + + // 榧犳爣瑙︽懜杞挱鎮仠浜嬩欢 + defineEvent() { + // 榧犳爣绉诲嚭杞挱缁х画 + this.myChart.on("mouseout", () => { + if (timer) clearInterval(timer); + timer = setInterval(this.selectPie, 1500); + }); + + // 榧犳爣杩涘叆杞挱鎮仠 + this.myChart.on("mouseover", (params) => { + clearInterval(timer); + this.currentIndex = params.dataIndex; + this.hignLightPie(); + }); + + // 榧犳爣绉诲叆legend杞挱鎮仠 + this.myChart.getZr().on("mouseover", (event) => { + const legendDataIndex = event.topTarget.parent.__legendDataIndex; // 姣忎釜legend鐨刬ndex + clearInterval(timer); + this.currentIndex = legendDataIndex; + this.hignLightPie(); + }); + + // 榧犳爣绉诲嚭legend杞挱缁х画 + this.myChart.getZr().on("mouseout", () => { + if (timer) clearInterval(timer); + timer = setInterval(this.selectPie, 1500); + }); + }, + }, +}; +</script> + +<style> +#echarts4 { + transform: scaleY(2); +} +</style> diff --git a/yiqi_screen/src/components/ProductionStatistics copy.vue b/yiqi_screen/src/components/ProductionStatistics copy.vue new file mode 100644 index 0000000..a1d1a2a --- /dev/null +++ b/yiqi_screen/src/components/ProductionStatistics copy.vue @@ -0,0 +1,277 @@ +<template> + <!-- 鏈彮/鏈湀浜ч噺缁熻 --> + <div class="box-container box4" id="echarts4"></div> +</template> + +<script> +let timer = null; +export default { + props: { + produceStatisData: { + type: Object, + default: () => {}, + }, + }, + data() { + return { + option: {}, + myChart: {}, + currentIndex: -1, + data1: [], + data2: [{ actualData: 2782, planData: 11128 }], + }; + }, + watch: { + produceStatisData(val) { + // 娴嬭瘯鐢細 + val.currentShiftProduceNum = 280; + val.currentShiftPlanNum = 300; + // 褰撳墠鐝粍瀹為檯鐢熶骇鏁伴噺 currentShiftProduceNum + // 褰撳墠鐝粍璁″垝鐢熶骇鏁伴噺 currentShiftPlanNum + var num1 = val.currentShiftProduceNum; //瀹為檯鐢熶骇鏁伴噺 + var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //璁″垝鐢熶骇鏁伴噺 + 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, + }, + ]); + 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 }, + ]); + + this.myChart.setOption(this.option); + this.hignLightPie(); + }, + }, + mounted() { + this.myChart = this.$echarts.init(document.getElementById("echarts4")); + this.option = { + color: ["#00f6fe", "transparent"], + // 鎻掑叆鑳屾櫙鍥� + // graphic: [ + // { + // type: "image", + // id: "background1", + // left: "13px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // top: "61px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // z: -10, + // bounding: "raw", + // origin: [0, 0], + // style: { + // image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰� + // width: 100, + // height: 100, + // }, + // }, + // { + // type: "image", + // id: "background2", + // left: "131px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // top: "61px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // z: -10, + // bounding: "raw", + // origin: [0, 0], + // style: { + // image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰� + // width: 100, + // height: 100, + // }, + // }, + // ], + series: [ + { + name: "Access From", + type: "pie", + // padAngle: 5, //鐜笌鐜箣闂寸殑闂撮殭 + radius: ["29%", "36%"], //鐜彉缁� + center: ["25%", "49%"], + // avoidLabelOverlap: false, + label: { + show: false, + position: "center", + formatter: function (params) { + return params.percent < 1 + ? params.percent + "%" + : Math.floor(params.percent) + "%"; // 鍥涜垗浜斿叆鍒版暣鏁� + }, + color: "#fff", + fontSize: 12, + }, + emphasis: { + //楗煎浘涓棿鐨勫瓧浣撳ぇ灏� + scale: false, + label: { + show: true, + fontSize: 22, + color: "#19d8d0", + fontWeight: "normal", + }, + }, + labelLine: { + show: false, + }, + itemStyle: { + borderRadius: 3, + borderColor: "transparent", + borderWidth: 10, + }, + data: [], + }, + { + name: "Access From", + type: "pie", + // padAngle: 5, //鐜笌鐜箣闂寸殑闂撮殭 + // radius: ["25%", "40%"], + radius: ["29%", "36%"], //鐜彉缁� + center: ["74%", "49%"], + // avoidLabelOverlap: false, + label: { + show: false, + position: "center", + formatter: function (params) { + return params.percent < 1 + ? params.percent + "%" + : Math.floor(params.percent) + "%"; // 鍥涜垗浜斿叆鍒版暣鏁� + }, + color: "#fff", + fontSize: 12, + }, + itemStyle: { + borderRadius: 3, + borderColor: "transparent", + borderWidth: 10, + }, + emphasis: { + scale: false, + label: { + show: true, + fontSize: 22, + color: "#19d8d0", + fontWeight: "normal", + }, + }, + labelLine: { + show: false, + }, + data: [], + }, + ], + }; + this.myChart.setOption(this.option); + const that = this; + window.addEventListener("resize", () => { + that.myChart.resize(); + }); + // this.getData(); + this.defineEvent(); + // this.selectPie(); + this.hignLightPie(); + // timer = setInterval(this.selectPie, 1500); + }, + methods: { + // getData() { + // this.data1 = [{ actualData: 144, planData: 288 }]; + // this.$set(this.option.series[0], "data", [ + // { value: this.data1[0].actualData }, + // { value: this.data1[0].planData - this.data1[0].actualData }, + // ]); + // this.$set(this.option.series[1], "data", [ + // { value: this.data2[0].actualData }, + // { value: this.data2[0].planData - this.data2[0].actualData }, + // ]); + // console.log(this.option.series[0].data); + // this.myChart.setOption(this.option); + // }, + selectPie() { + let dataLen = this.option.series[0].data.length; + this.currentIndex = (this.currentIndex + 1) % dataLen; + this.hignLightPie(); + }, + // 杞挱鐐逛寒楗煎浘 + hignLightPie() { + const dataPie = this.option.series[0].data; + // 鐔勭伃鎵�鏈夋墖褰㈠尯鍩� + for (var index in dataPie) { + this.myChart.dispatchAction({ + type: "downplay", + seriesIndex: 0, + dataIndex: index, + }); + + this.myChart.dispatchAction({ + type: "downplay", + seriesIndex: 1, + dataIndex: index, + }); + } + + // 鐐逛寒褰撳墠鎵囧舰鍖哄煙 + this.myChart.dispatchAction({ + type: "highlight", + seriesIndex: 0, + dataIndex: 0, + }); + + this.myChart.dispatchAction({ + type: "highlight", + seriesIndex: 1, + dataIndex: 0, + }); + }, + + // 榧犳爣瑙︽懜杞挱鎮仠浜嬩欢 + defineEvent() { + // 榧犳爣绉诲嚭杞挱缁х画 + this.myChart.on("mouseout", () => { + if (timer) clearInterval(timer); + timer = setInterval(this.selectPie, 1500); + }); + + // 榧犳爣杩涘叆杞挱鎮仠 + this.myChart.on("mouseover", (params) => { + clearInterval(timer); + this.currentIndex = params.dataIndex; + this.hignLightPie(); + }); + + // 榧犳爣绉诲叆legend杞挱鎮仠 + this.myChart.getZr().on("mouseover", (event) => { + const legendDataIndex = event.topTarget.parent.__legendDataIndex; // 姣忎釜legend鐨刬ndex + clearInterval(timer); + this.currentIndex = legendDataIndex; + this.hignLightPie(); + }); + + // 榧犳爣绉诲嚭legend杞挱缁х画 + this.myChart.getZr().on("mouseout", () => { + if (timer) clearInterval(timer); + timer = setInterval(this.selectPie, 1500); + }); + }, + }, +}; +</script> + +<style> +#echarts4 { + transform: scaleY(2); +} +</style> diff --git a/yiqi_screen/src/components/ProductionStatistics copy1113.vue b/yiqi_screen/src/components/ProductionStatistics copy1113.vue new file mode 100644 index 0000000..1c37942 --- /dev/null +++ b/yiqi_screen/src/components/ProductionStatistics copy1113.vue @@ -0,0 +1,325 @@ +<template> + <!-- 鏈彮/鏈湀浜ч噺缁熻 --> + <div class="box-container box4" id="echarts4"></div> +</template> + +<script> +let timer = null; +import * as echarts from "echarts"; +export default { + props: { + produceStatisData: { + type: Object, + default: () => {}, + }, + }, + data() { + return { + option: {}, + myChart: {}, + currentIndex: -1, + data1: [], + data2: [{ actualData: 2782, planData: 11128 }], + }; + }, + // watch: { + // produceStatisData(val) { + // // 娴嬭瘯鐢細 + // val.currentShiftProduceNum = 280; + // val.currentShiftPlanNum = 300; + // // 褰撳墠鐝粍瀹為檯鐢熶骇鏁伴噺 currentShiftProduceNum + // // 褰撳墠鐝粍璁″垝鐢熶骇鏁伴噺 currentShiftPlanNum + // var num1 = val.currentShiftProduceNum; //瀹為檯鐢熶骇鏁伴噺 + // var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //璁″垝鐢熶骇鏁伴噺 + // 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, + // }, + // ]); + // 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 }, + // ]); + + // this.myChart.setOption(this.option); + // this.hignLightPie(); + // }, + // }, + mounted() { + this.myChart = this.$echarts.init(document.getElementById("echarts4")); + var value = 60; + var value2 = 15; + let data1 = [ + { + value: value, + name: "", + itemStyle: { + normal: { + color: "#62fbf8", + }, + }, + }, + { + value: 100 - value, + name: "", + label: { + normal: { + show: false, + }, + }, + itemStyle: { + normal: { + color: "rgba(0,0,0,0)", + }, + }, + }, + ]; + + let data2 = [ + { + value: value2, + name: "", + itemStyle: { + normal: { + color: "rgb(105,206,195)", + }, + }, + }, + { + value: 100 - value2, + name: "", + label: { + normal: { + show: false, + }, + }, + itemStyle: { + normal: { + color: "rgba(0,0,0,0)", + }, + }, + }, + ]; + + this.option = { + color: ["#00f6fe", "transparent"], + series: [ + // 宸︿晶 + { + name: "宸�-涓棿娓愬彉", + type: "pie", + startAngle: 90, + radius: "38%", + hoverAnimation: false, + center: ["25%", "49%"], + itemStyle: { + normal: { + labelLine: { + show: false, + }, + + color: { + type: "radial", + x: 0.5, + y: 0.5, + r: 0.4, + colorStops: [ + { + offset: 0, + color: "rgba(55,70,130, 0)", // 0% 澶勭殑棰滆壊 + }, + { + offset: 1, + color: "rgba(55,70,130, 1)", // 100% 澶勭殑棰滆壊 + }, + ], + }, + // color:'red', + shadowBlur: 10, + // shadowColor: 'rgba(55,70,130, 1)' + }, + }, + data: [ + { + value: 100, + }, + ], + }, + { + name: "宸�-鏁版嵁", + type: "pie", + // radius: ['65%', '75%'], + radius: ["29%", "36%"], //鐜彉缁� + center: ["25%", "49%"], + silent: true, + // clockwise: false, + startAngle: 90, + z: 1, + zlevel: 1, + label: { + normal: { + position: "center", + }, + }, + data: data1, + }, + + { + name: "宸�-鍒诲害闂撮殧", + z: 2, + zlevel: 1, + type: "gauge", + radius: "55%", + center: ["25%", "49%"], + startAngle: 90, + endAngle: -360, + splitNumber: 10, + hoverAnimation: true, + axisTick: { + show: true, + splitNumber: 1, + length: 15, + lineStyle: { + width: 5, + color: "rgba(55,70,130, 0.1)", + // shadowColor: "rgb(4,31,62, 0.5)", + }, + }, + splitLine: { + show: false, + }, + axisLabel: { + show: false, + }, + pointer: { + show: false, + }, + axisLine: { + lineStyle: { + opacity: 0, + }, + }, + detail: { + show: false, + }, + data: [10], + }, + ], + }; + this.myChart.setOption(this.option); + const that = this; + window.addEventListener("resize", () => { + that.myChart.resize(); + }); + // this.getData(); + this.defineEvent(); + // this.selectPie(); + this.hignLightPie(); + // timer = setInterval(this.selectPie, 1500); + }, + methods: { + // getData() { + // this.data1 = [{ actualData: 144, planData: 288 }]; + // this.$set(this.option.series[0], "data", [ + // { value: this.data1[0].actualData }, + // { value: this.data1[0].planData - this.data1[0].actualData }, + // ]); + // this.$set(this.option.series[1], "data", [ + // { value: this.data2[0].actualData }, + // { value: this.data2[0].planData - this.data2[0].actualData }, + // ]); + // console.log(this.option.series[0].data); + // this.myChart.setOption(this.option); + // }, + selectPie() { + let dataLen = this.option.series[0].data.length; + this.currentIndex = (this.currentIndex + 1) % dataLen; + this.hignLightPie(); + }, + // 杞挱鐐逛寒楗煎浘 + hignLightPie() { + const dataPie = this.option.series[0].data; + // 鐔勭伃鎵�鏈夋墖褰㈠尯鍩� + for (var index in dataPie) { + this.myChart.dispatchAction({ + type: "downplay", + seriesIndex: 0, + dataIndex: index, + }); + + this.myChart.dispatchAction({ + type: "downplay", + seriesIndex: 1, + dataIndex: index, + }); + } + + // 鐐逛寒褰撳墠鎵囧舰鍖哄煙 + this.myChart.dispatchAction({ + type: "highlight", + seriesIndex: 0, + dataIndex: 0, + }); + + this.myChart.dispatchAction({ + type: "highlight", + seriesIndex: 1, + dataIndex: 0, + }); + }, + + // 榧犳爣瑙︽懜杞挱鎮仠浜嬩欢 + defineEvent() { + // 榧犳爣绉诲嚭杞挱缁х画 + this.myChart.on("mouseout", () => { + if (timer) clearInterval(timer); + timer = setInterval(this.selectPie, 1500); + }); + + // 榧犳爣杩涘叆杞挱鎮仠 + this.myChart.on("mouseover", (params) => { + clearInterval(timer); + this.currentIndex = params.dataIndex; + this.hignLightPie(); + }); + + // 榧犳爣绉诲叆legend杞挱鎮仠 + this.myChart.getZr().on("mouseover", (event) => { + const legendDataIndex = event.topTarget.parent.__legendDataIndex; // 姣忎釜legend鐨刬ndex + clearInterval(timer); + this.currentIndex = legendDataIndex; + this.hignLightPie(); + }); + + // 榧犳爣绉诲嚭legend杞挱缁х画 + this.myChart.getZr().on("mouseout", () => { + if (timer) clearInterval(timer); + timer = setInterval(this.selectPie, 1500); + }); + }, + }, +}; +</script> + +<style> +#echarts4 { + /* transform: scaleY(2); */ +} +</style> diff --git a/yiqi_screen/src/components/ProductionStatistics.vue b/yiqi_screen/src/components/ProductionStatistics.vue index dbf822c..a1c07ef 100644 --- a/yiqi_screen/src/components/ProductionStatistics.vue +++ b/yiqi_screen/src/components/ProductionStatistics.vue @@ -1,7 +1,6 @@ <template> <!-- 鏈彮/鏈湀浜ч噺缁熻 --> <div class="box-container box4" id="echarts4"></div> - </template> <script> @@ -25,8 +24,9 @@ watch: { produceStatisData(val) { // 娴嬭瘯鐢細 - val.currentShiftProduceNum = 300; - val.currentShiftPlanNum = 300; + // val.currentShiftProduceNum = 280; + // val.currentShiftPlanNum = 300; + // 褰撳墠鐝粍瀹為檯鐢熶骇鏁伴噺 currentShiftProduceNum // 褰撳墠鐝粍璁″垝鐢熶骇鏁伴噺 currentShiftPlanNum var num1 = val.currentShiftProduceNum; //瀹為檯鐢熶骇鏁伴噺 @@ -36,15 +36,15 @@ num1 = 0; num2 = 10; } - - - this.$set(this.option.series[0], "data", [ // { value: 1 }, //瀹為檯鐢熶骇鏁伴噺 1/ (9+1) = 10% // { value: 9 }, - { value: num1, - }, //瀹為檯鐢熶骇鏁伴噺 - { value: num2 }, + { + value: num1, + }, //瀹為檯鐢熶骇鏁伴噺 + { + value: num2, + }, ]); var num3 = val.currentMonthProduceNum; var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum; @@ -66,53 +66,52 @@ this.myChart = this.$echarts.init(document.getElementById("echarts4")); this.option = { 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, - }, - }, - ], + // 鎻掑叆鑳屾櫙鍥� + // graphic: [ + // { + // type: "image", + // id: "background1", + // left: "13px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // top: "61px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // z: -10, + // bounding: "raw", + // origin: [0, 0], + // style: { + // image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰� + // width: 100, + // height: 100, + // }, + // }, + // { + // type: "image", + // id: "background2", + // left: "131px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // top: "61px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // z: -10, + // bounding: "raw", + // origin: [0, 0], + // style: { + // image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰� + // width: 100, + // height: 100, + // }, + // }, + // ], series: [ { name: "Access From", type: "pie", // padAngle: 5, //鐜笌鐜箣闂寸殑闂撮殭 - radius: ["30%", "37%"], //鐜彉缁� - center: ["26%", "47%"], - silent: true,clockwise: true, + radius: ["29%", "36%"], //鐜彉缁� + center: ["25%", "49%"], // avoidLabelOverlap: false, label: { show: false, position: "center", formatter: function (params) { - return Math.floor(params.percent) + '%'; // 鍥涜垗浜斿叆鍒版暣鏁� + return params.percent < 1 + ? params.percent + "%" + : Math.floor(params.percent) + "%"; // 鍥涜垗浜斿叆鍒版暣鏁� }, color: "#fff", fontSize: 12, @@ -126,7 +125,6 @@ color: "#19d8d0", fontWeight: "normal", }, - }, labelLine: { show: false, @@ -143,14 +141,16 @@ type: "pie", // padAngle: 5, //鐜笌鐜箣闂寸殑闂撮殭 // radius: ["25%", "40%"], - radius: ["30%", "37%"], //鐜彉缁� - center: ["74%", "47%"], + radius: ["29%", "36%"], //鐜彉缁� + center: ["74%", "49%"], // avoidLabelOverlap: false, label: { show: false, position: "center", formatter: function (params) { - return Math.floor(params.percent) + '%'; // 鍥涜垗浜斿叆鍒版暣鏁� + return params.percent < 1 + ? params.percent + "%" + : Math.floor(params.percent) + "%"; // 鍥涜垗浜斿叆鍒版暣鏁� }, color: "#fff", fontSize: 12, @@ -274,35 +274,5 @@ <style> #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/ProductionStatistics1.vue b/yiqi_screen/src/components/ProductionStatistics1.vue new file mode 100644 index 0000000..f949900 --- /dev/null +++ b/yiqi_screen/src/components/ProductionStatistics1.vue @@ -0,0 +1,303 @@ +<template> + <!-- 鏈彮/鏈湀浜ч噺缁熻 --> + <div class="box-container box4" id="echarts4"></div> +</template> + +<script> +let timer = null; +export default { + props: { + produceStatisData: { + type: Object, + default: () => {}, + }, + }, + data() { + return { + option: {}, + myChart: {}, + currentIndex: -1, + data1: [], + data2: [{ actualData: 2782, planData: 11128 }], + }; + }, + watch: { + produceStatisData(val) { + // 娴嬭瘯鐢細 + val.currentShiftProduceNum = 280; + val.currentShiftPlanNum = 300; + // 褰撳墠鐝粍瀹為檯鐢熶骇鏁伴噺 currentShiftProduceNum + // 褰撳墠鐝粍璁″垝鐢熶骇鏁伴噺 currentShiftPlanNum + var num1 = val.currentShiftProduceNum; //瀹為檯鐢熶骇鏁伴噺 + var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //璁″垝鐢熶骇鏁伴噺 + 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, + // }, + // ]); + 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 }, + // ]); + + let value1 = 90.56; + let data1 = [ + { + value: value1, + name: "", + itemStyle: { + normal: { + color: { + // 瀹屾垚鐨勫渾鐜殑棰滆壊 + colorStops: [ + { + offset: 0, + color: "#0975af", + }, + { + offset: 1, + color: "#00bdfe", + }, + ], + }, + }, + }, + }, + { + value: 100 - value1, + name: "", + label: { + normal: { + show: false, + }, + }, + itemStyle: { + normal: { + color: "#163367", + }, + }, + }, + ]; + this.$set(this.option.series[0], "data", data1); + + this.myChart.setOption(this.option); + this.hignLightPie(); + }, + }, + mounted() { + this.myChart = this.$echarts.init(document.getElementById("echarts4")); + this.option = { + color: ["#00f6fe", "transparent"], + // 鎻掑叆鑳屾櫙鍥� + // graphic: [ + // { + // type: "image", + // id: "background1", + // left: "13px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // top: "61px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // z: -10, + // bounding: "raw", + // origin: [0, 0], + // style: { + // image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰� + // width: 100, + // height: 100, + // }, + // }, + // { + // type: "image", + // id: "background2", + // left: "131px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // top: "61px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // z: -10, + // bounding: "raw", + // origin: [0, 0], + // style: { + // image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰� + // width: 100, + // height: 100, + // }, + // }, + // ], + series: [ + { + name: "Access From", + type: "pie", + radius: ["58%", "48%"], + silent: true, + clockwise: true, + startAngle: 90, + endAngle: -360, + z: 0, + zlevel: 0, + label: { + normal: { + position: "center", + }, + }, + + animation: false, + data: [], + }, + + { + name: "", + type: "gauge", + radius: "58%", + center: ["50%", "50%"], + startAngle: 90, + endAngle: -360, + splitNumber: 12, + hoverAnimation: true, + axisTick: { + show: false, + }, + splitLine: { + length: 60, + distance: -10, + lineStyle: { + width: 25, + color: "#0a0d35", + }, + }, + axisLabel: { + show: false, + }, + pointer: { + show: false, + }, + axisLine: { + lineStyle: { + opacity: 0, + }, + }, + detail: { + show: false, + }, + animation: false, + data: [ + { + value: 0, + name: "", + }, + ], + }, + ], + }; + this.myChart.setOption(this.option); + const that = this; + window.addEventListener("resize", () => { + that.myChart.resize(); + }); + // this.getData(); + this.defineEvent(); + // this.selectPie(); + this.hignLightPie(); + // timer = setInterval(this.selectPie, 1500); + }, + methods: { + // getData() { + // this.data1 = [{ actualData: 144, planData: 288 }]; + // this.$set(this.option.series[0], "data", [ + // { value: this.data1[0].actualData }, + // { value: this.data1[0].planData - this.data1[0].actualData }, + // ]); + // this.$set(this.option.series[1], "data", [ + // { value: this.data2[0].actualData }, + // { value: this.data2[0].planData - this.data2[0].actualData }, + // ]); + // console.log(this.option.series[0].data); + // this.myChart.setOption(this.option); + // }, + selectPie() { + let dataLen = this.option.series[0].data.length; + this.currentIndex = (this.currentIndex + 1) % dataLen; + this.hignLightPie(); + }, + // 杞挱鐐逛寒楗煎浘 + hignLightPie() { + const dataPie = this.option.series[0].data; + // 鐔勭伃鎵�鏈夋墖褰㈠尯鍩� + for (var index in dataPie) { + this.myChart.dispatchAction({ + type: "downplay", + seriesIndex: 0, + dataIndex: index, + }); + + this.myChart.dispatchAction({ + type: "downplay", + seriesIndex: 1, + dataIndex: index, + }); + } + + // 鐐逛寒褰撳墠鎵囧舰鍖哄煙 + this.myChart.dispatchAction({ + type: "highlight", + seriesIndex: 0, + dataIndex: 0, + }); + + this.myChart.dispatchAction({ + type: "highlight", + seriesIndex: 1, + dataIndex: 0, + }); + }, + + // 榧犳爣瑙︽懜杞挱鎮仠浜嬩欢 + defineEvent() { + // 榧犳爣绉诲嚭杞挱缁х画 + this.myChart.on("mouseout", () => { + if (timer) clearInterval(timer); + timer = setInterval(this.selectPie, 1500); + }); + + // 榧犳爣杩涘叆杞挱鎮仠 + this.myChart.on("mouseover", (params) => { + clearInterval(timer); + this.currentIndex = params.dataIndex; + this.hignLightPie(); + }); + + // 榧犳爣绉诲叆legend杞挱鎮仠 + this.myChart.getZr().on("mouseover", (event) => { + const legendDataIndex = event.topTarget.parent.__legendDataIndex; // 姣忎釜legend鐨刬ndex + clearInterval(timer); + this.currentIndex = legendDataIndex; + this.hignLightPie(); + }); + + // 榧犳爣绉诲嚭legend杞挱缁х画 + this.myChart.getZr().on("mouseout", () => { + if (timer) clearInterval(timer); + timer = setInterval(this.selectPie, 1500); + }); + }, + }, +}; +</script> + +<style> +#echarts4 { + transform: scaleY(2); +} +</style> diff --git "a/yiqi_screen/src/components/ProductionStatistics\345\244\207\344\273\2751113.vue" "b/yiqi_screen/src/components/ProductionStatistics\345\244\207\344\273\2751113.vue" new file mode 100644 index 0000000..b8c860f --- /dev/null +++ "b/yiqi_screen/src/components/ProductionStatistics\345\244\207\344\273\2751113.vue" @@ -0,0 +1,458 @@ +<template> + <!-- 鏈彮/鏈湀浜ч噺缁熻 --> + <div class="box-container box4" id="echarts4"></div> +</template> + +<script> +let timer = null; +import * as echarts from "echarts"; +export default { + props: { + produceStatisData: { + type: Object, + default: () => {}, + }, + }, + data() { + return { + option: {}, + myChart: {}, + currentIndex: -1, + data1: [], + data2: [{ actualData: 2782, planData: 11128 }], + }; + }, + // watch: { + // produceStatisData(val) { + // // 娴嬭瘯鐢細 + // val.currentShiftProduceNum = 280; + // val.currentShiftPlanNum = 300; + // // 褰撳墠鐝粍瀹為檯鐢熶骇鏁伴噺 currentShiftProduceNum + // // 褰撳墠鐝粍璁″垝鐢熶骇鏁伴噺 currentShiftPlanNum + // var num1 = val.currentShiftProduceNum; //瀹為檯鐢熶骇鏁伴噺 + // var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //璁″垝鐢熶骇鏁伴噺 + // 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, + // }, + // ]); + // 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 }, + // ]); + + // this.myChart.setOption(this.option); + // this.hignLightPie(); + // }, + // }, + mounted() { + this.myChart = this.$echarts.init(document.getElementById("echarts4")); + var value = 60; + var value2 = 15; + let data1 = [ + { + value: value, + name: "", + itemStyle: { + normal: { + color: "#62fbf8", + }, + }, + }, + { + value: 100 - value, + name: "", + label: { + normal: { + show: false, + }, + }, + itemStyle: { + normal: { + color: "rgba(0,0,0,0)", + }, + }, + }, + ]; + + let data2 = [ + { + value: value2, + name: "", + itemStyle: { + normal: { + color: "rgb(105,206,195)", + }, + }, + }, + { + value: 100 - value2, + name: "", + label: { + normal: { + show: false, + }, + }, + itemStyle: { + normal: { + color: "rgba(0,0,0,0)", + }, + }, + }, + ]; + + this.option = { + color: ["#00f6fe", "rgba(5, 19, 96, 0.5)"], + // 鎻掑叆鑳屾櫙鍥� + // graphic: [ + // { + // type: "image", + // id: "background1", + // left: "13px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // top: "61px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // z: -10, + // bounding: "raw", + // origin: [0, 0], + // style: { + // image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰� + // width: 100, + // height: 100, + // }, + // }, + // { + // type: "image", + // id: "background2", + // left: "131px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // top: "61px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣 + // z: -10, + // bounding: "raw", + // origin: [0, 0], + // style: { + // image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰� + // width: 100, + // height: 100, + // }, + // }, + // ], + series: [ + // 宸︿晶 + { + name: "宸�-鏁版嵁", + type: "pie", + // radius: ['65%', '75%'], + radius: ["29%", "36%"], //鐜彉缁� + center: ["25%", "49%"], + silent: true, + // clockwise: false, + startAngle: 90, + z: 1, + zlevel: 0, + label: { + normal: { + position: "center", + }, + }, + data: data1, + }, + { + name: "宸�-涓棿娓愬彉", + type: "pie", + startAngle: 90, + z: 20, + zlevel: 20, + radius: "28%", + hoverAnimation: false, + center: ["25%", "49%"], + + // zlevel: 2, + itemStyle: { + normal: { + labelLine: { + show: false, + }, + color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [ + { + offset: 1, + color: "rgba(55,70,130, 1)", + }, + { + offset: 0, + color: "rgba(55,70,130, 0)", + }, + ]), + shadowBlur: 10, + // shadowColor: 'rgba(55,70,130, 1)' + }, + }, + data: [ + { + value: 100, + }, + ], + }, + { + name: "宸�-鍒诲害闂撮殧", + z: 2, + // zlevel: 1, + type: "gauge", + radius: "57%", + center: ["25%", "49%"], + startAngle: 20, + endAngle: -360, + splitNumber: 10, + hoverAnimation: true, + axisTick: { + show: true, + splitNumber: 1, + length: 14, //鍒诲害闀垮害 + // Distance: 40, //鍒诲害闂撮殧璺濈 + lineStyle: { + width: 5, + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(8, 52, 106, 0.039)", // 0% 澶勭殑棰滆壊 + }, + { + offset: 1, + color: "rgba(8, 52, 106, 0.239)", // 100% 澶勭殑棰滆壊 + }, + ], + false + ), + }, + }, + splitLine: { + show: false, + }, + axisLabel: { + show: false, + }, + pointer: { + show: false, + }, + axisLine: { + lineStyle: { + opacity: 0, + }, + }, + detail: { + show: false, + }, + data: [100], + }, + + // 鍙充晶 + { + name: "鍙�-鏁版嵁", + type: "pie", + // radius: ['65%', '75%'], + radius: ["29%", "36%"], //鐜彉缁� + center: ["74%", "49%"], + silent: true, + // clockwise: false, + startAngle: 90, + z: 1, + zlevel: 0, + label: { + normal: { + position: "center", + }, + }, + data: data2, + }, + { + name: "鍙�-涓棿娓愬彉", + type: "pie", + startAngle: 90, + radius: "28%", + hoverAnimation: false, + center: ["74%", "49%"], + itemStyle: { + normal: { + labelLine: { + show: false, + }, + color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [ + { + offset: 1, + color: "rgba(55,70,130, 1)", + }, + { + offset: 0, + color: "rgba(55,70,130, 0)", + }, + ]), + shadowBlur: 10, + // shadowColor: 'rgba(55,70,130, 1)' + }, + }, + data: [ + { + value: 100, + }, + ], + }, + { + name: "鍙�-鍒诲害闂撮殧", + z: 2, + type: "gauge", + radius: "45%", + center: ["74%", "49%"], + startAngle: 90, + endAngle: -360, + splitNumber: 10, + hoverAnimation: true, + axisTick: { + show: true, + splitNumber: 1, + length: 20, + lineStyle: { + width: 10, + color: "#1183a7", + shadowColor: "rgb(4,31,62, 0.5)", + }, + }, + splitLine: { + show: false, + }, + axisLabel: { + show: false, + }, + pointer: { + show: false, + }, + axisLine: { + lineStyle: { + opacity: 0, + }, + }, + detail: { + show: false, + }, + data: [100], + }, + ], + }; + this.myChart.setOption(this.option); + const that = this; + window.addEventListener("resize", () => { + that.myChart.resize(); + }); + // this.getData(); + this.defineEvent(); + // this.selectPie(); + this.hignLightPie(); + // timer = setInterval(this.selectPie, 1500); + }, + methods: { + // getData() { + // this.data1 = [{ actualData: 144, planData: 288 }]; + // this.$set(this.option.series[0], "data", [ + // { value: this.data1[0].actualData }, + // { value: this.data1[0].planData - this.data1[0].actualData }, + // ]); + // this.$set(this.option.series[1], "data", [ + // { value: this.data2[0].actualData }, + // { value: this.data2[0].planData - this.data2[0].actualData }, + // ]); + // console.log(this.option.series[0].data); + // this.myChart.setOption(this.option); + // }, + selectPie() { + let dataLen = this.option.series[0].data.length; + this.currentIndex = (this.currentIndex + 1) % dataLen; + this.hignLightPie(); + }, + // 杞挱鐐逛寒楗煎浘 + hignLightPie() { + const dataPie = this.option.series[0].data; + // 鐔勭伃鎵�鏈夋墖褰㈠尯鍩� + for (var index in dataPie) { + this.myChart.dispatchAction({ + type: "downplay", + seriesIndex: 0, + dataIndex: index, + }); + + this.myChart.dispatchAction({ + type: "downplay", + seriesIndex: 1, + dataIndex: index, + }); + } + + // 鐐逛寒褰撳墠鎵囧舰鍖哄煙 + this.myChart.dispatchAction({ + type: "highlight", + seriesIndex: 0, + dataIndex: 0, + }); + + this.myChart.dispatchAction({ + type: "highlight", + seriesIndex: 1, + dataIndex: 0, + }); + }, + + // 榧犳爣瑙︽懜杞挱鎮仠浜嬩欢 + defineEvent() { + // 榧犳爣绉诲嚭杞挱缁х画 + this.myChart.on("mouseout", () => { + if (timer) clearInterval(timer); + timer = setInterval(this.selectPie, 1500); + }); + + // 榧犳爣杩涘叆杞挱鎮仠 + this.myChart.on("mouseover", (params) => { + clearInterval(timer); + this.currentIndex = params.dataIndex; + this.hignLightPie(); + }); + + // 榧犳爣绉诲叆legend杞挱鎮仠 + this.myChart.getZr().on("mouseover", (event) => { + const legendDataIndex = event.topTarget.parent.__legendDataIndex; // 姣忎釜legend鐨刬ndex + clearInterval(timer); + this.currentIndex = legendDataIndex; + this.hignLightPie(); + }); + + // 榧犳爣绉诲嚭legend杞挱缁х画 + this.myChart.getZr().on("mouseout", () => { + if (timer) clearInterval(timer); + timer = setInterval(this.selectPie, 1500); + }); + }, + }, +}; +</script> + +<style> +#echarts4 { + transform: scaleY(2); +} +</style> diff --git a/yiqi_screen/src/components/img/t.js b/yiqi_screen/src/components/img/t.js index 36e8e8a..63fb1fd 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+CAYAAAA3MXHFAAABLElEQVRoge3bPyvEcRwH8NfpsEgWMdhsMrAou8dgMYtFyioZXELJbFZWBgvPAOEBGO4x3GCjM1xX59yf4X5n0Ps9fJfvu1596rN+SpP7dT1Swi5OMN6r2CdfOMPRSI/SNO5wMSBWQwU7GCt3Ka3hCrMDQFDFDQ4wovm0ZBSnuC8Ae8Qz9lqd1gnncY2VASG4xQzW2z+a8gZeC8DquMQyVjsVyljAHI4HxGhs4yEmuhXKWNJY+yLy3gvj99IMPQEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAFb8vXXYN8EDBgwYMCAAf85eIWPbndPRaaK7VrFA8Od8BPnWGxi/Lx7KjJv2KxVvLR/lPGErYKgOqZwUav47FT4BrulK2qVemffAAAAAElFTkSuQmCC" \ No newline at end of file +export let zhu = 'data:image/png;base64,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'; \ No newline at end of file diff --git "a/yiqi_screen1216\344\272\214\347\273\264.rar" "b/yiqi_screen1216\344\272\214\347\273\264.rar" new file mode 100644 index 0000000..547d75a --- /dev/null +++ "b/yiqi_screen1216\344\272\214\347\273\264.rar" Binary files differ -- Gitblit v1.9.3