驾驶舱

2024-05-10 11:10:42 +08:00
parent 9c9dba5452
commit f312be08bf
14 changed files with 131 additions and 92 deletions
--- a/src/views/copilot/container.vue
+++ b/src/views/copilot/container.vue
@@ -7,13 +7,12 @@
 -->

 <template>
-  <div class="copilot-layout" ref="copilot-layout">
+  <div class="copilot-layout" ref="copilot-layout" :class="[ page== '产量' ? 'produce': 'other' ]">
    <CopilotHeaderVue :active="page" :period="period" @update:active="page = $event" @update:period="period = $event" />

    <YieldCopilot v-if="page == '产量'" :period="period" />
    <EnergyCopilot v-if="page == '综合'" :period="period" />
    <EfficiencyCopilot v-if="page == '效率'" :period="period" />
-
    <div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
  </div>
 </template>
@@ -36,8 +35,24 @@ export default {
    return {
      page: "产量",
      period: "日",
+      currentsStyles: '',
    };
  },
+  // watch: {
+  //   page(val) {
+  //     if (val === '产量') {
+  //       console.log(val)
+  //       this.currentsStyles =
+  //         'height: calc(100% + 38px)'
+  //       console.log(this.currentsStyles)
+  //     } else {
+  //       console.log(val)
+  //       this.currentsStyles = 'height:100%+38px'
+  //       console.log(this.currentsStyles)
+  //     }
+  //     immediate: true
+  //   }
+  // }
  // mounted() {
  //   document.body.style.minHeight = "1024px";
  //   document.body.style.minWidth = "1550px";
@@ -54,9 +69,8 @@ export default {
  padding: 16px;
  background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
  position: absolute;
-  height: calc(100% + 38px);
  left: -16px;
-  top: -8px;
+  /* top: -8px; */
  width: calc(100% + 30px);
  z-index: 1001;
  color: #fff;
@@ -65,6 +79,12 @@ export default {
  gap: 8px;
 }

+.produce{
+  height: calc(100% + 38px);
+}
+.other {
+  height: 100vh + 50px;
+}
 .copilot-footer {
  /** position: absolute;
  bottom: 10px; **/
--- a/src/views/copilot/efficiency/components/ChipOee.vue
+++ b/src/views/copilot/efficiency/components/ChipOee.vue
@@ -88,7 +88,7 @@ export default {
 function getTemplate(period, dataList) {
  const year = new Date().getFullYear();
  const month = new Date().getMonth() + 1;
-  console.log('11111', dataList);
+  // console.log('11111', dataList);
  return period == "日" || period == "周"
    ? [
        {
--- a/src/views/copilot/efficiency/components/StdRate.vue
+++ b/src/views/copilot/efficiency/components/StdRate.vue
@@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-08 15:55:24
+ * @LastEditTime: 2024-05-09 08:44:21
 * @LastEditors: zhp
 * @Description:
 -->
@@ -53,7 +53,7 @@ export default {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(1, 1fr);
+  grid-template-rows: repeat(4, 1fr);
 }

 .span-2 {
--- a/src/views/copilot/efficiency/components/sub/bar/BarChartBase.vue
+++ b/src/views/copilot/efficiency/components/sub/bar/BarChartBase.vue
@@ -1,8 +1,8 @@
-<!-- 
+<!--
    filename: BarChartBase.vue
    author: liubin
    date: 2024-04-10 08:59:28
-    description: 
+    description:
 -->

 <template>
--- a/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
+++ b/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
@@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-07 13:22:43
- * @LastEditTime: 2024-05-08 15:52:09
+ * @LastEditTime: 2024-05-09 16:22:24
 * @LastEditors: zhp
 * @Description:
 -->
@@ -38,7 +38,7 @@ export default {
  props: {
    vHeight: {
      type: Number,
-      default: 34,
+      default: 36,
    },
    legend: {
      type: Array,
--- a/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue
+++ b/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue
@@ -10,7 +10,9 @@
    <div class="cities">
      <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
    </div>
-    <div class="chart" ref="chart"></div>
+    <!-- <div style="flex:1;padding: 0 20%;"> -->
+      <div class="chart" ref="chart"></div>
+    <!-- </div> -->
    <div class="legend" v-if="period == '月' || period == '年'">
      <div class="legend-item" v-for="lgd in legend" :key="lgd.label">
        <span class="legend-item__value">{{ lgd.value }}</span>
@@ -123,6 +125,7 @@ export default {
  },
  watch: {
    period() {
+      console.log(this.$store.getters.copilot.efficiency)
      this.initOptions(this.options);
    },
    factoryId() {
--- a/src/views/copilot/efficiency/components/sub/std/StdRateItem.vue
+++ b/src/views/copilot/efficiency/components/sub/std/StdRateItem.vue
@@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-08 14:54:24
+ * @LastEditTime: 2024-05-09 09:04:07
 * @LastEditors: zhp
 * @Description:
 -->
--- a/src/views/copilot/efficiency/index.vue
+++ b/src/views/copilot/efficiency/index.vue
@@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-07 10:04:53
- * @LastEditTime: 2024-05-08 15:58:14
+ * @LastEditTime: 2024-05-09 08:56:44
 * @LastEditors: zhp
 * @Description:
 -->
@@ -73,8 +73,8 @@ export default {
  flex: 1;
  display: grid;
  gap: 16px;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: .5fr .5fr;
+  grid-template-columns:repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr)
 }

 .efficiency-copilot > div {
--- a/src/views/copilot/energy/index.vue
+++ b/src/views/copilot/energy/index.vue
@@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-08 15:29:28
+ * @LastEditTime: 2024-05-09 08:41:11
 * @LastEditors: zhp
 * @Description:
 -->
@@ -74,7 +74,7 @@ export default {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
-  /* grid-template-rows: 1fr 1fr; */
+  grid-template-rows: 1fr 1fr;
 }

 .energy-copilot > div {
--- a/src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue
+++ b/src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue
@@ -7,7 +7,9 @@

 <template>
  <div class="double-ring-chart">
-    <div ref="chart" class="double-ring-chart__container"></div>
+    <div class="double-ring-chart__container">
+      <div ref="chart" style="height: 90%;"></div>
+    </div>
    <!-- style="{ height: vHeight + 'vh' }" -->
    <div class="double-ring-chart__legend">
      <div v-for="item in legendItems" :key="item.label" class="legend-item">
@@ -169,7 +171,10 @@ function calculateItems(period, valueTuple) {
 }

 .double-ring-chart__container {
-  flex: 1;
+  flex:1;
+  padding: 0 10%;
+  /* margin: 10%; */
+  /* min-width: 300px; */
  height: 0;
 }

--- a/src/views/copilot/yield/options/double-ring-chart-options.js
+++ b/src/views/copilot/yield/options/double-ring-chart-options.js
@@ -15,8 +15,8 @@ export default ({
  tooltip: {},
  title: {
    text: titleValue,
-    left: "49%",
-    top: "39%",
+    left: "44%",
+    top: "37%",
    textAlign: "center",
    textStyle: {
      fontWeight: 600,
@@ -37,7 +37,7 @@ export default ({
      type: "pie",
      name: "当前目标",
      radius: ["70%", "85%"],
-      center: ["50%", "52%"],
+      center: ["45%", "52%"],
      emptyCircleStyle: {
        color: "#042c5f33",
      },
@@ -46,7 +46,7 @@ export default ({
    {
      type: "pie",
      radius: ["70%", "85%"],
-      center: ["50%", "52%"],
+      center: ["45%", "52%"],
      avoidLabelOvervlap: false,
      label: {
        show: false,
@@ -97,7 +97,7 @@ export default ({
    {
      type: "pie",
      radius: ["55%", "70%"],
-      center: ["50%", "52%"],
+      center: ["45%", "52%"],
      avoidLabelOvervlap: false,
      label: {
        show: false,