From 301a55f959a7376c15a87a70338334b7224223e4 Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期五, 01 十二月 2023 16:12:37 +0800 Subject: [PATCH] 机器开机率和数量统计 --- src/components/cockpitPage/BackgroundBoardLayout.vue | 10 - src/views/cockpitPage/components/CountView.vue | 138 +++++++++++++++++++++++ public/cockpitPage/machine-top.png | 0 public/cockpitPage/machine-chart-bg.png | 0 src/views/cockpitPage/index.vue | 10 + src/views/cockpitPage/components/MachineStartupRate.vue | 143 +++++++++++++++++++++++ 6 files changed, 293 insertions(+), 8 deletions(-) diff --git a/public/cockpitPage/machine-chart-bg.png b/public/cockpitPage/machine-chart-bg.png new file mode 100644 index 0000000..c29f09b --- /dev/null +++ b/public/cockpitPage/machine-chart-bg.png Binary files differ diff --git a/public/cockpitPage/machine-top.png b/public/cockpitPage/machine-top.png new file mode 100644 index 0000000..8db19b5 --- /dev/null +++ b/public/cockpitPage/machine-top.png Binary files differ diff --git a/src/components/cockpitPage/BackgroundBoardLayout.vue b/src/components/cockpitPage/BackgroundBoardLayout.vue index 649790b..3022f4e 100644 --- a/src/components/cockpitPage/BackgroundBoardLayout.vue +++ b/src/components/cockpitPage/BackgroundBoardLayout.vue @@ -69,9 +69,9 @@ // 宸︿笅涓婅竟璺� $leftBottomMarginTop: 40px; // 宸︿笅宸︿晶鍖哄煙瀹� -$leftBottomLeftWidth: 39%; +$leftBottomLeftWidth: 37%; // 宸︿笅鍙充晶鍖哄煙瀹� -$leftBottomRightWidth: 61%; +$leftBottomRightWidth: 63%; .dashboard-layout { background-image: url("/cockpit-bg.jpg"); @@ -131,15 +131,12 @@ height: 100%; .left-bottom-top-block { height: 41%; - background: #9135dd; } .left-bottom-middle-block { height: 25%; - background: #dd35a5; } .left-bottom-bottom-block { height: 34%; - background: #dd355f; } } .left-bottom-right-block { @@ -147,11 +144,9 @@ height: 100%; .right-bottom-top-block { height: 60%; - background: #35ddc7; } .right-bottom-bottom-block { height: 40%; - background: #35dd8f; } } } @@ -162,7 +157,6 @@ } .right-top-block { height: 30%; - background: #9135dd; } .right-middle-block { height: 35%; diff --git a/src/views/cockpitPage/components/CountView.vue b/src/views/cockpitPage/components/CountView.vue new file mode 100644 index 0000000..9fc582d --- /dev/null +++ b/src/views/cockpitPage/components/CountView.vue @@ -0,0 +1,138 @@ +<template> + <div class="count-view"> + <div class="box"> + <div class="left"> + <div class="title-view"> + <div>寮�鏈哄彴鏁�</div> + </div> + <div class="value-view"> + <div class="title-margin-left">200鍙�</div> + </div> + </div> + <div class="right"> + <div class="title-view"> + <div>澶栧姞宸ュ彴鏁�</div> + </div> + <div class="value-view"> + <div class="title-margin-left">500鍙�</div> + </div> + </div> + </div> + <div class="box"> + <div class="left"> + <div class="title-view"> + <div>璁″垝澶栧姞宸ユ暟</div> + </div> + <div class="value-view"> + <div class="title-margin-left">4000浠�</div> + </div> + </div> + <div class="right"> + <div class="title-view"> + <div>璁″垝鐢熶骇鏁�</div> + </div> + <div class="value-view"> + <div class="title-margin-left">2000浠�</div> + </div> + </div> + </div> + <div class="box"> + <div class="left"> + <div class="title-view"> + <div>瀹為檯澶栧姞宸ユ暟</div> + </div> + <div class="value-view"> + <div class="title-margin-left">4000浠�</div> + </div> + </div> + <div class="right"> + <div class="title-view"> + <div>瀹為檯鐢熶骇鏁�</div> + </div> + <div class="value-view"> + <div class="title-margin-left">2000浠�</div> + </div> + </div> + </div> + </div> +</template> + +<script> +export default { + components: {}, + props: {}, + data() { + return { + allList: [ + { title: "寮�鏈哄彴鏁�", value: 200 }, + { title: "鎬讳骇閲�", value: 1200 }, + { title: "鐢熶骇宸ュ崟鏁�", value: 200 }, + { title: "寤舵湡浜や粯", value: 20 }, + { title: "鐗╂枡涓嶈冻", value: 10 }, + { title: "璁″垝杈炬垚鐜�", value: 2 }, + ], + }; + }, + mounted() {}, + watch: {}, + methods: {}, +}; +</script> + +<style scoped lang="scss"> +.count-view { + margin-top: 20px; + width: calc(100% - 20px); + height: 100%; + .box { + height: 33%; + display: flex; + align-items: center; + justify-content: space-between; + .left, + .right { + width: 50%; + height: 100%; + display: flex; + align-items: center; + .title-view { + width: 70%; + height: calc(100% - 10px); + background: linear-gradient(290deg, transparent 42px, #3a3728 0) bottom + left; + background-size: 100% 100%; + background-repeat: no-repeat; + color: #3a3728; + font-family: "Arial Negreta", "Arial Normal", "Arial"; + font-weight: 700; + font-size: 20px; + color: #fccd1d; + display: flex; + align-items: center; + padding-left: 8px; + border-radius: 5px; + } + .value-view { + margin-left: -70px; + width: 50%; + // text-align: right; + height: calc(100% - 25px); + background: linear-gradient(110deg, transparent 42px, #083f55 0) bottom + left; + background-size: 100% 100%; + background-repeat: no-repeat; + font-size: 20px; + color: #01f7fd; + font-family: "Arial Normal", "Arial"; + font-weight: 400; + display: flex; + align-items: center; + border-radius: 5px; + .title-margin-left { + margin-left: 45px; + } + } + } + } +} +</style> diff --git a/src/views/cockpitPage/components/MachineStartupRate.vue b/src/views/cockpitPage/components/MachineStartupRate.vue new file mode 100644 index 0000000..9383322 --- /dev/null +++ b/src/views/cockpitPage/components/MachineStartupRate.vue @@ -0,0 +1,143 @@ +<template> + <div class="machine-startup-rate"> + <div class="bar-contents"> + <div class="top-view"> + <img src="/cockpitPage/machine-top.png" alt="" /> + <div class="top-title"> + <span>鏈哄櫒寮�鏈虹巼</span> + <span class="top-rate">{{ "60%" }}</span> + </div> + </div> + <div class="machine-chart-bg"> + <img + src="/cockpitPage/machine-chart-bg.png" + alt="" + style="width: 250px; height: 260px" + /> + </div> + <div class="chart" ref="chart"></div> + </div> + </div> +</template> + +<script> +//寮曞叆echart +import * as echarts from "echarts"; +export default { + components: {}, + props: {}, + data() { + return {}; + }, + mounted() { + let chartData = [ + { value: 20, name: "闂茬疆" }, + { value: 20, name: "缁翠慨" }, + { value: 60, name: "宸ヤ綔" }, + ]; + this.pieChart("chart", chartData); + }, + watch: {}, + methods: { + //鍦ㄨ亴 + pieChart(chartName, data) { + let chartDom = this.$refs[chartName]; + let myChart = echarts.init(chartDom); + let option; + if (data) { + option = { + color: ["#065a6f", "#067687", "#00ffff"], + tooltip: { + trigger: "item", + }, + series: [ + { + name: "Access From", + type: "pie", + radius: ["58%", "70%"], + avoidLabelOverlap: false, + label: { + color: "#01f7fd", + fontSize: 14, + formatter: function (params) { + return params.name + params.value + "%"; + }, + }, + emphasis: { + label: { + show: true, + fontSize: 16, + fontWeight: "bold", + }, + }, + labelLine: { + show: true, + length: 50, + color: "blue", + }, + data: data, + }, + ], + }; + + option && myChart.setOption(option); + } else { + option = {}; + myChart.setOption(option, true); + } + }, + }, +}; +</script> + +<style scoped lang="scss"> +.machine-startup-rate { + width: 100%; + height: 100%; + .bar-contents { + width: calc(100% - 20px); + height: 100%; + border: 1px solid #00ffff; + box-sizing: border-box; + position: relative; + .top-view { + width: 33%; + margin-top: -1px; + margin-left: -1px; + position: relative; + text-align: center; + .top-title { + width: 100%; + position: absolute; + top: 20%; + left: 0; + margin: auto; + color: #01f7fd; + font-size: 14px; + font-family: "Arial Negreta", "Arial Normal", "Arial"; + font-weight: 700; + .top-rate { + margin-left: 5px; + color: #fec718; + } + } + } + .machine-chart-bg { + width: 100%; + height: 100%; + text-align: center; + position: absolute; + left: 0; + right: 0; + margin: auto; + opacity: 0.55; + } + .chart { + margin-top: 8px; + margin-left: 5px; + width: 100%; + height: calc(80% - 20px); + } + } +} +</style> diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue index cdbdd18..f0ce3f4 100644 --- a/src/views/cockpitPage/index.vue +++ b/src/views/cockpitPage/index.vue @@ -3,6 +3,12 @@ <template #leftBlock1> <StatisticalBox></StatisticalBox> </template> + <template #leftBlock2> + <MachineStartupRate></MachineStartupRate> + </template> + <template #leftBlock3> + <CountView></CountView> + </template> <template #rightBlock2> <MaterialChart @should-reload="reloadAllData"></MaterialChart> </template> @@ -14,6 +20,8 @@ <script> import StatisticalBox from "@/views/cockpitPage/components/StatisticalBox"; +import MachineStartupRate from "@/views/cockpitPage/components/MachineStartupRate"; +import CountView from "@/views/cockpitPage/components/CountView"; import BackgroundBoardLayout from "@/components/cockpitPage/BackgroundBoardLayout.vue"; import MaterialChart from "@/views/cockpitPage/components/MaterialChart.vue"; import BarChart from "@/views/cockpitPage/components/BarChart.vue"; @@ -23,6 +31,8 @@ BackgroundBoardLayout, MaterialChart, BarChart, + MachineStartupRate, + CountView, }, props: {}, data() { -- Gitblit v1.8.0