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