修改界面显示

src/views/model/model.vue

@@ -16,7 +16,7 @@
           </div>
         </el-col>
         <el-col :span="3">
-          <div class="toolItem" @click="click1('数据中心')">
+          <div class="toolItem" @click="click1('dataCentre')">
             <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
             <div class="grid-content bg-purple">数据中心</div>
           </div>
@@ -34,7 +34,7 @@
           </div>
         </el-col>
         <el-col :span="3">
-          <div class="toolItem" @click="click1('生产')">
+          <div class="toolItem" @click="click1('production')">
             <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
             <div class="grid-content bg-purple">生产</div>
           </div>
@@ -60,12 +60,20 @@
     <transition name="children">
       <product-distribution :exit="exit" v-if="show === 'productDistribution'"/>
     </transition>
+    <transition name="children">
+      <data-centre :exit="exit" v-if="show === 'dataCentre'"/>
+    </transition>
+    <transition name="children">
+      <production :exit="exit" v-if="show === 'production'"/>
+    </transition>
   </div>
 </template>
 
 <script>
 import factoryIntroduction from './factoryIntroduction'
 import productDistribution from './productDistribution'
+import dataCentre from './dataCentre'
+import production from './production'
 
 const isAMRT = () => {
   return new Promise((resolve, reject) => {
@@ -84,7 +92,9 @@ export default {
   name: "Model",
   components: {
     factoryIntroduction,
-    productDistribution
+    productDistribution,
+    dataCentre,
+    production
   },
   data() {
     return {
@@ -102,21 +112,21 @@ export default {
     console.log(AMRT)
     let num = 0
     let modelArr = [
-      // '1720315475507941376',
+      '1720315475507941376',
-      // '1720315479907766272',
+      '1720315479907766272',
-      // '1720315484513112064',
+      '1720315484513112064',
-      // '1720315500866703360',
+      '1720315500866703360',
-      // '1720315558030872576',
+      '1720315558030872576',
-      // '1720315596551360512',
+      '1720315596551360512',
-      // '1720315644550975488',
+      '1720315644550975488',
-      // '1720315648946606080',
+      '1720315648946606080',
-      // '1720315687114772480',
+      '1720315687114772480',
-      // '1720315691422322688',
+      '1720315691422322688',
-      // '1720315722275622912',
+      '1720315722275622912',
-      // '1720315729129115648',
+      '1720315729129115648',
-      // '1720315768454909952',
+      '1720315768454909952',
-      // '1720316275214913536',
+      '1720316275214913536',
-      // '1720316297822212096',
+      '1720316297822212096',
     ]
     modelArr.forEach(e => {
       let model = viewer.loadModel(e, {
@@ -150,7 +160,7 @@ export default {
     click1(e) {
       this.show = e
     },
-    exit(){
+    exit() {
       this.show = ''
     }
   }

src/views/model/production.vue

@@ -0,0 +1,512 @@
+<template>
+  <div class="app-container">
+    <div class="exit" @click="exitFun"></div>
+
+    <div class="chart1">
+      <Chart ref="chart1"></Chart>
+    </div>
+    <div class="chart2">
+      <Chart ref="chart2"></Chart>
+    </div>
+    <div class="chart3">
+      <Chart ref="chart3"></Chart>
+    </div>
+    <div class="chart4">
+      <Chart ref="chart4"></Chart>
+    </div>
+    <div class="chart5">
+      <Chart ref="chart5"></Chart>
+    </div>
+    <div class="chart6">
+      <Chart ref="chart6"></Chart>
+    </div>
+    <div class="chart7">
+      <Chart ref="chart7"></Chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import Chart from "@/components/board/Chart";
+
+export default {
+  name: "Liner",
+  components: {
+    Chart
+  },
+  props: {
+    exit: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+    this.$refs.chart1.setData({
+      title: {
+        text: "3日完成订单",
+        left: "center",
+        top: "5%",
+        textStyle: {
+          color: "#fff",
+          fontSize: 0.7 * vw,
+          align: "center",
+        },
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      grid: {
+        borderWidth: 0,
+        top: '20%',
+        bottom: 1.5 * vw,
+        left: 2.5 * vw,
+        right: 2.5 * vw,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      xAxis: [
+        {
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitArea: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw,
+          },
+          data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+        },
+      ],
+      yAxis: [
+        {
+          name:'数量',
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#90979c33",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "应完成订单",
+          type: "bar",
+          barWidth: '30%',
+          itemStyle: {
+            normal: {
+              color: "#5ecee0",
+              barBorderRadius: '50%',
+            },
+          },
+          data: [
+            709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
+          ],
+        },
+      ],
+    })
+    this.$refs.chart4.setData({
+      title: {
+        text: "7日内合格率",
+        left: "center",
+        top: "5%",
+        textStyle: {
+          color: "#fff",
+          fontSize: 0.7 * vw,
+          align: "center",
+        },
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      grid: {
+        borderWidth: 0,
+        top: '20%',
+        bottom: 1.5 * vw,
+        left: 2.5 * vw,
+        right: 2.5 * vw,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      xAxis: [
+        {
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitArea: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw,
+          },
+          data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+        },
+      ],
+      yAxis: [
+        {
+          name:'合格率',
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#90979c44",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw,
+            formatter:'{value}%'
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "总数",
+          type: "line",
+          symbolSize: 10,
+          symbol: "circle",
+          itemStyle: {
+            normal: {
+              color: "rgba(252,230,48,1)",
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: "top",
+                color: "#fff",
+                fontSize: 0.6 * vw,
+                formatter: function (p) {
+                  return (p.value > 0 ? p.value : "") + '%';
+                },
+              },
+            },
+          },
+          data: [
+            106, 111, 96, 65, 86, 126, 101, 94, 100
+          ],
+        },
+      ],
+    })
+    this.$refs.chart5.setData({
+      title: {
+        text: "订单履约率",
+        left: "center",
+        top: "5%",
+        textStyle: {
+          color: "#fff",
+          fontSize: 0.7 * vw,
+          align: "center",
+        },
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      grid: {
+        borderWidth: 0,
+        top: '20%',
+        bottom: 1.5 * vw,
+        left: 2.5 * vw,
+        right: 2.5 * vw,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      legend: {
+        x: "center",
+        top: "12%",
+        textStyle: {
+          fontSize: 0.6 * vw,
+          color: "#90979c",
+        },
+      },
+      xAxis: [
+        {
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitArea: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw,
+          },
+          data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+        {
+          type: "value",
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "日计划数",
+          type: "bar",
+          borderWidth: '15%',
+          itemStyle: {
+            normal: {
+              color: "#5ecee0",
+            },
+          },
+          data: [
+            709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
+          ],
+        },
+
+        {
+          name: "日产量",
+          type: "bar",
+          borderWidth: '15%',
+          barGap: "-100%",
+          itemStyle: {
+            normal: {
+              color: "#78b4fe",
+              barBorderRadius: 0,
+            },
+          },
+          data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001],
+        },
+        {
+          name: "达成率",
+          type: "line",
+          symbolSize: 10,
+          symbol: "circle",
+          yAxisIndex: 1,
+          itemStyle: {
+            normal: {
+              color: "rgba(252,230,48,1)",
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: "top",
+                color: "#fff",
+                fontSize: 0.6 * vw,
+                formatter: function (p) {
+                  return (p.value > 0 ? p.value : "") + '%';
+                },
+              },
+            },
+          },
+          data: [
+            106, 111, 96, 65, 86, 126, 101, 94, 100
+          ],
+        },
+      ],
+    })
+  },
+  methods: {
+    exitFun() {
+      this.exit()
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.app-container {
+  background-image: url("~@/assets/model/production/bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-color: #021e31;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.exit {
+  background-image: url("~@/assets/model/factoryIntroduction/exit.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 1%;
+  right: 1%;
+  font-weight: bold;
+  width: 2vw;
+  height: 2vw;
+  color: #e7b219;
+}
+
+.chart1 {
+  position: absolute;
+  top: 10%;
+  left: 1.3%;
+  width: 25%;
+  height: 43%;
+  background-color: #0b184f;
+}
+
+.chart2 {
+  position: absolute;
+  top: 10%;
+  left: 27.6%;
+  width: 45%;
+  height: 21%;
+  background-color: #0b184f;
+}
+
+.chart3 {
+  position: absolute;
+  top: 32%;
+  left: 27.6%;
+  width: 45%;
+  height: 21%;
+  background-color: #0b184f;
+}
+
+.chart4 {
+  position: absolute;
+  top: 10%;
+  left: 73.9%;
+  width: 25%;
+  height: 43%;
+  background-color: #0b184f;
+}
+
+.chart5 {
+  position: absolute;
+  top: 54.5%;
+  left: 1.3%;
+  width: 25%;
+  height: 43%;
+  background-color: #0b184f;
+}
+
+.chart6 {
+  position: absolute;
+  top: 54.5%;
+  left: 27.6%;
+  width: 45%;
+  height: 43%;
+  background-color: #0b184f;
+}
+
+.chart7 {
+  position: absolute;
+  top: 54.5%;
+  left: 73.9%;
+  width: 25%;
+  height: 43%;
+  background-color: #0b184f;
+}
+</style>