修改界面显示

src/views/model/live.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="app-container">
+    <div class="videoItem" style="top: 10%;left:3%">
+      <video autoplay="" muted="" loop="loop">
+        <source src="@/assets/model/live/v1.mp4" type="video/mp4">
+        您的浏览器不支持 video 标签。
+      </video>
+    </div>
+    <div class="videoItem" style="top: 10%;left:33%">
+      <video autoplay="" muted="" loop="loop">
+        <source src="@/assets/model/live/v1.mp4" type="video/mp4">
+        您的浏览器不支持 video 标签。
+      </video>
+    </div>
+    <div class="videoItem" style="top: 10%;left:63%">
+      <video autoplay="" muted="" loop="loop">
+        <source src="@/assets/model/live/v1.mp4" type="video/mp4">
+        您的浏览器不支持 video 标签。
+      </video>
+    </div>
+    <div class="videoItem" style="top: 55%;left:3%">
+      <video autoplay="" muted="" loop="loop">
+        <source src="@/assets/model/live/v1.mp4" type="video/mp4">
+        您的浏览器不支持 video 标签。
+      </video>
+    </div>
+    <div class="videoItem" style="top: 55%;left:33%">
+      <video autoplay="" muted="" loop="loop">
+        <source src="@/assets/model/live/v1.mp4" type="video/mp4">
+        您的浏览器不支持 video 标签。
+      </video>
+    </div>
+    <div class="videoItem" style="top: 55%;left:63%">
+      <video autoplay="" muted="" loop="loop">
+        <source src="@/assets/model/live/v1.mp4" type="video/mp4">
+        您的浏览器不支持 video 标签。
+      </video>
+    </div>
+    <div class="exit" @click="exitFun"></div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "Liner",
+  props: {
+    exit: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+    exitFun() {
+      this.exit()
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+.app-container {
+  background-image: url("~@/assets/model/live/bg.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  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;
+}
+
+.videoItem {
+  position: absolute;
+  width: 30%;
+  height: 44%;
+  background-image: url("~@/assets/model/live/bg2.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  video {
+    position: absolute;
+    width: 90%;
+    height: 85%;
+    top: 8%;
+    left: 5%;
+  }
+}
+</style>

src/views/model/model.vue

@@ -23,7 +23,7 @@
             </div>
           </el-col>
           <el-col :span="3">
-            <div class="toolItem" @click="click1('现场直播')">
+            <div class="toolItem" @click="click1('live')">
               <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
               <div class="grid-content bg-purple">现场直播</div>
             </div>
@@ -67,6 +67,11 @@
       <transition name="children">
         <production :exit="exit" v-if="show === 'production'"/>
       </transition>
+      <transition name="children">
+        <live :exit="exit" v-if="show === 'live'"/>
+      </transition>
+
+
       <div class="flowChart" v-show="show1">
         <div class="flowItem" v-for="(i,k) in flowItemOptions" @click="setNowFlowIndex(k)"
              :class="nowFlowIndex === k ? 'wireAnimation' : ''"
@@ -91,6 +96,7 @@ import factoryIntroduction from './factoryIntroduction'
 import productDistribution from './productDistribution'
 import dataCentre from './dataCentre'
 import production from './production'
+import live from './live'
 
 const isAMRT = () => {
   return new Promise((resolve, reject) => {
@@ -111,7 +117,8 @@ export default {
     factoryIntroduction,
     productDistribution,
     dataCentre,
-    production
+    production,
+    live
   },
   data() {
     return {
@@ -630,8 +637,8 @@ export default {
 
 .container {
   width: 100vw;
-  height: 33.33vw;
-  //height: 100vh;
+  //height: 33.33vw;
+  height: 100vh;
 }
 
 .tool {
@@ -655,10 +662,10 @@ export default {
 }
 
 .test {
-  top: 20%;
+  //top: 20%;
   width: 100vw;
-  height: 33.33vw;
-  //height: 100vh;
+  //height: 33.33vw;
+  height: 100vh;
   position: absolute;
 }
 

src/views/model/production.vue

@@ -1,15 +1,32 @@
 <template>
   <div class="app-container">
+    <div class="headTitle">生产制造运营中心</div>
     <div class="exit" @click="exitFun"></div>
 
     <div class="chart1">
       <Chart ref="chart1"></Chart>
     </div>
     <div class="chart2">
-      <Chart ref="chart2"></Chart>
+      <div class="title">3日内需要交付订单</div>
+      <div class="item" style="left: 2%">
+        <div class="itemTitle">完成数/订单数</div>
+        <div class="ratio">5/14</div>
+      </div>
+      <div class="item" style="left: 52%">>
+        <div class="itemTitle">完成量/产品量</div>
+        <div class="ratio">1004/1701</div>
+      </div>
     </div>
     <div class="chart3">
-      <Chart ref="chart3"></Chart>
+      <div class="title">本月需完成订单</div>
+      <div class="item" style="left: 2%">
+        <div class="itemTitle">完成数/订单数</div>
+        <div class="ratio">12/52</div>
+      </div>
+      <div class="item" style="left: 52%">>
+        <div class="itemTitle">完成量/产品量</div>
+        <div class="ratio">2333/6591</div>
+      </div>
     </div>
     <div class="chart4">
       <Chart ref="chart4"></Chart>
@@ -28,6 +45,8 @@
 
 <script>
 import Chart from "@/components/board/Chart";
+import {getData} from "@/api/board/getData";
+import * as echarts from 'echarts'
 
 export default {
   name: "Liner",
@@ -101,7 +120,7 @@ export default {
       ],
       yAxis: [
         {
-          name:'数量',
+          name: '数量',
           type: "value",
           splitLine: {
             show: true,
@@ -199,7 +218,7 @@ export default {
       ],
       yAxis: [
         {
-          name:'合格率',
+          name: '合格率',
           type: "value",
           splitLine: {
             show: true,
@@ -218,7 +237,7 @@ export default {
           axisLabel: {
             interval: 0,
             fontSize: 0.5 * vw,
-            formatter:'{value}%'
+            formatter: '{value}%'
           },
           splitArea: {
             show: false,
@@ -413,6 +432,262 @@ export default {
         },
       ],
     })
+    this.$refs.chart7.setData({
+      title: {
+        text: "本月异常分布类型",
+        left: "center",
+        top: "5%",
+        textStyle: {
+          color: "#fff",
+          fontSize: 0.7 * vw,
+          align: "center",
+        },
+      },
+      tooltip: {
+        trigger: "item",
+        formatter: "{a} <br/>{b}: {c} ({d}%)",
+      },
+      series: [
+        {
+          name: "故障大类",
+          type: "pie",
+          selectedMode: "single",
+          radius: [0, "50%"],
+
+          label: {
+            normal: {
+              position: "inner",
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false,
+            },
+          },
+          data: [
+            {value: 335, name: "辅件缺陷"},
+            {value: 679, name: "箱体缺陷"},
+            {value: 1548, name: "性能缺陷"},
+          ],
+        },
+        {
+          name: "故障小类",
+          type: "pie",
+          radius: ["50%", "65%"],
+          label: {
+            normal: {
+              show: true,
+              textStyle: {
+                color: '#fff'
+              },
+              position: "outside",
+            },
+            emphasis: {
+              show: true,
+            },
+          },
+
+          data: [
+            {value: 335, name: "印刷品"},
+            {value: 310, name: "测温问题"},
+            {value: 234, name: "捡漏问题"},
+            {value: 135, name: "电检问题"},
+            {value: 1048, name: "内胆件"},
+            {value: 251, name: "压机室件"},
+            {value: 147, name: "后板"},
+            {value: 102, name: "塑料件"},
+          ],
+        },
+      ],
+    })
+
+    getData().then(e => {
+      this.$refs.chart6.setData({
+        title: {
+          text: "准时交付率（清单率）",
+          left: "center",
+          top: "5%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 0.7 * vw,
+            align: "center",
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        grid: {
+          left: "0",
+          right: "4%",
+          bottom: "0",
+          top: '25%',
+          containLabel: true,
+        },
+        legend: {
+          data: ['应完成订单', '实际完成订单', '准时交付率'],
+          right: 'center',
+          top: '10%',
+          textStyle: {
+            color: "#fff",
+          },
+          itemWidth: 12,
+          itemHeight: 10,
+          // itemGap: 35
+        },
+        xAxis: {
+          type: "category",
+          data: e.liner.inventoryStatus.x,
+          axisLine: {
+            lineStyle: {
+              color: "white",
+            },
+          },
+          axisLabel: {
+            // interval: 0,
+            // rotate: 40,
+            textStyle: {
+              fontFamily: "Microsoft YaHei",
+            },
+          },
+        },
+
+        yAxis: [
+          {
+            name: '数量  ',
+            type: "value",
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "white",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {},
+          },
+          {
+            name: '百分比',
+            type: "value",
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "white",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {},
+          }
+        ],
+        series: [
+          {
+            name: '应完成订单',
+            type: "bar",
+            barWidth: "30%",
+            barMaxWidth: 50,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                textStyle: {
+                  color: "#a8aab0",
+                  fontStyle: "normal",
+                  fontFamily: "微软雅黑",
+                  fontSize: 0.75 * vw,
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#39ffff",
+                  },
+                  {
+                    offset: 1,
+                    color: "#5affa6",
+                  },
+                ]),
+              },
+            },
+            data: e.liner.inventoryStatus.y[0].data,
+          },
+          {
+            name: '实际完成订单',
+            type: "bar",
+            barWidth: "30%",
+            barMaxWidth: 50,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                textStyle: {
+                  color: "#a8aab0",
+                  fontStyle: "normal",
+                  fontFamily: "微软雅黑",
+                  fontSize: 0.75 * vw,
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#4adfff",
+                  },
+                  {
+                    offset: 1,
+                    color: "#3d7aff",
+                  },
+                ]),
+              },
+            },
+            data: e.liner.inventoryStatus.y[1].data,
+          },
+          {
+            name: '准时交付率',
+            type: "line",
+            // smooth: true, //是否平滑曲线显示
+            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbol: "emptyCircle",
+            symbolSize: 6,
+            yAxisIndex: 1,
+            lineStyle: {
+              normal: {
+                width: 3,
+                color: '#fff',
+              },
+              borderColor: "#f0f",
+            },
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "#fff",
+                fontSize: 16
+              },
+            },
+            itemStyle: {
+              color: '#F2D770',
+              border: 0,
+            },
+            // tooltip: {
+            //     show: false
+            // },
+            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
+          },
+        ],
+      })
+    })
   },
   methods: {
     exitFun() {
@@ -447,6 +722,17 @@ export default {
   color: #e7b219;
 }
 
+
+.headTitle {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  font-size: 1.5vw;
+  color: #d6eaed;
+  letter-spacing: 10px;
+}
+
 .chart1 {
   position: absolute;
   top: 10%;
@@ -463,6 +749,42 @@ export default {
   width: 45%;
   height: 21%;
   background-color: #0b184f;
+
+  .title {
+    position: absolute;
+    top: 5%;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 1vw;
+    color: #d6eaed;
+    letter-spacing: 2px;
+  }
+
+  .item {
+    position: absolute;
+    top: 25%;
+    width: 45%;
+    height: 70%;
+    border: 1px solid #fff6;
+
+    .itemTitle {
+      position: absolute;
+      top: 10%;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #6fc3dd;
+      font-size: 1vw;
+    }
+
+    .ratio {
+      position: absolute;
+      bottom: 5%;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #62aafe;
+      font-size: 3vw;
+    }
+  }
 }
 
 .chart3 {
@@ -472,6 +794,42 @@ export default {
   width: 45%;
   height: 21%;
   background-color: #0b184f;
+
+  .title {
+    position: absolute;
+    top: 5%;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 1vw;
+    color: #d6eaed;
+    letter-spacing: 2px;
+  }
+
+  .item {
+    position: absolute;
+    top: 25%;
+    width: 45%;
+    height: 70%;
+    border: 1px solid #fff6;
+
+    .itemTitle {
+      position: absolute;
+      top: 10%;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #6fc3dd;
+      font-size: 1vw;
+    }
+
+    .ratio {
+      position: absolute;
+      bottom: 5%;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #62aafe;
+      font-size: 3vw;
+    }
+  }
 }
 
 .chart4 {