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