大屏整改

liuying

2024-11-10 19b415a1aa36dc70e5546b0fdeefa6a39570f19b

大屏整改

 yiqi_screen/src/App.vue

@@ -20,13 +20,15 @@

<style>
html,body{
  width:100%;
  height:100%;
  overflow: hidden;
        width: 1910px;
        height: 1070px;
        /* width:100%; */
        /* height:100%; */
        /* overflow: hidden; */
        background-color: #00083b;
  /* font-size: 80px !important; */
  background-image: url('~@/assets/images/bg.png');
        /* background-image: url('~@/assets/images/bg.png'); */
}

*{
  margin:0;
  padding: 0;

 yiqi_screen/src/assets/images/1.jpg

Binary files differ

 yiqi_screen/src/assets/images/1.png

 yiqi_screen/src/assets/images/10.png

 yiqi_screen/src/assets/images/border_left1.png

 yiqi_screen/src/assets/images/border_prodline - ¸±±¾.png

 yiqi_screen/src/assets/images/border_prodline.png

 yiqi_screen/src/assets/images/guang.png

 yiqi_screen/src/assets/images/huan.png

 yiqi_screen/src/assets/images/prodline_all copy.png

 yiqi_screen/src/assets/images/prodline_all.png

 yiqi_screen/src/assets/images/quan.png

 yiqi_screen/src/assets/images/title.png

 yiqi_screen/src/assets/images/z1.png

 yiqi_screen/src/assets/t.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
export let zhu = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAB+CAYAAAA3MXHFAAAAAXNSR0IArs4c6QAAAedJREFUaEPtm80rRGEYxc8746OwmJSSZIOSspWtYaXI2gohOxtZWsjCTv4ApcRC7CeT/8CkrGQYzGAMKZIx5n48mqkRd+50u+4MqXPX7/uc5577O3U2V+GXnprweU+2vuZMldQTUVMpzEFhBUCth72M65f0evgqOWaYqtVWcCIpTX6FDSgMeRDKXX2OpB73jh+exgH4DFMFigSnUzIowCaAZi9iAlyGLm6P717fRgpzvgnOiFTLPZYFmM9t40XMFDncPU2Yr5rW+3XOp+BMStpNYBvAtwM/Ec3oRmgnetVtGNJmvZ8XHL2RhcYqLPm8gZGbLdfvchCOxvoANNgtmxesP5cxEWz95G2sd5RINBOPdZaaRUHXLtNSQkNoihxgLBgLxoKxKHKAsWAsGAvGwnUKCA2hITTODrB5s2I4U2I5QWgIDaFhxWDFcJ0CQkNoCI2zA6wYrBjOlLCXWhwgNISGFYMVw3UKCA2hITTODrCXsmI4U8Jeyl7qmpK/hkZETrLxWFepxcsefArSUtcpITSEhtAUOcBYMBb/Phabhi8xWdZfWGxjodSFEnNWH+jcz1lWSUFdAWt6um4Rwy3pwvepiKAAR36FaS3YEbGCoGrPpMMPBF0TYndB0ySTjAdMlVhFf79ud+QDhHReVZvashsAAAAASUVORK5CYII='

 yiqi_screen/src/components/Content.vue

@@ -1,34 +1,49 @@
<template>
  <div class="container">
    <img alt="guang" src="~@/assets/images/guang.png" class="guang" />

    <div class="header">
      <div class="title">
      
        <img
          :src="
            require(`@/assets/images/1.png`)
          "
          class="imgTitle"
        />
      4GC三代发动机连杆线</div>
      <div class="left-text">
        <div style="line-height: 30px">{{ nowTime }}</div>
        <div style="padding-left: 25px">
          å®‰å…¨ç”Ÿäº§:{{ produceStatisData.currentSafeProductionDay }}天
        <img :src="require(`@/assets/images/1.png`)" class="imgTitle" />
        4GC三代发动机连杆线
        </div>
      <div class="left-text">
        <div>{{ nowTime }}</div>
        <div>安全生产:{{ produceStatisData.currentSafeProductionDay }}天</div>
      </div>

      <div class="right-text">
        <div style="line-height: 30px">
          å½“前班次:{{ produceStatisData.currentTeamName }}
        </div>
        <div>当前班次:{{ produceStatisData.currentTeamName }}</div>
        <div>班长:{{ produceStatisData.currentTeamLeader }}</div>
      </div>
    </div>
    <div class="main">
      <div class="main-top">
        <img src="~@/assets/images/prodline_all.png" class="prodline" />

        <div class="main-top_ly">
        <img
            src="~@/assets/images/prodline_all.png"
            class="prodline"
            alt="line"
          />

          <!-- <img
            alt="t10"
            :src="require(`@/assets/images/10.png`)"
            class="OP88"
            id="animatedImage"
          />
          <img
            alt="t10"
            :src="require(`@/assets/images/10.png`)"
            class="OP89"
          />
          <img
            alt="t10"
            :src="require(`@/assets/images/10.png`)"
            class="OP90"
          /> -->
          <img
            alt="t1"
          v-for="item in equipmentStatusData"
          :key="item.id"
          :src="
@@ -39,9 +54,18 @@
          :class="`euip ${item.workingProcedure}`"
        />

        <img src="~@/assets/images/OP35.png" class="prodline_op35" />
        <img :src="require(`@/assets/images/${imageColor['OP10']}/OP40.png`)" class="euip OP40" />
        <img :src="require(`@/assets/images/${imageColor['unit']}/unit.png`)" class="euip unit" />
          <img alt="t2" src="~@/assets/images/OP35.png" class="prodline_op35" />
          <img
            alt="t3"
            :src="require(`@/assets/images/${imageColor['OP10']}/OP40.png`)"
            class="euip OP40"
          />
          <img
            alt="t4"
            :src="require(`@/assets/images/${imageColor['unit']}/unit.png`)"
            class="euip unit"
          />
        </div>
      </div>
      <!-- <button @click="flag=true">data改变</button> -->
      <div class="main-bottom">
@@ -55,24 +79,11 @@
        </div>
        <div class="echarts-box border_middle">
          <div class="echarts-title">质量数据趋势图</div>
          <div
            style="
              color: #fff;
              margin: 0 0.13rem;
              text-align: center;
              font-size: 0.17rem;
            "
          >
          <div class="box11">
            {{ qualityData.qualityType }}
          </div>
          <div>
            <div
              style="
                margin: 0 0.13rem;
                height: 0.13rem;
                background-color: #f14158;
              "
            ></div>
            <div class="box12"></div>
            <div
              style="
                margin: 0 0.13rem;
@@ -102,23 +113,30 @@
        <div class="echarts-box border_right1">
          <div class="echarts-title">本班/本月产量统计</div>

          
          <ProductionStatistics :produceStatisData="produceStatisData" />
          <div class="pie-label-left">
          <!-- å½“前班组实际生产数量 -->
            {{ produceStatisData.currentShiftProduceNum }}
            <span v-if="produceStatisData.currentShiftPlanNum||produceStatisData.currentShiftPlanNum==0">/</span>
            <span
              v-if="
                produceStatisData.currentShiftPlanNum ||
                produceStatisData.currentShiftPlanNum == 0
              "
              >/</span
            >
            <!-- å½“前班组计划生产数量 -->
            {{
              produceStatisData.currentShiftPlanNum
            }}
            {{ produceStatisData.currentShiftPlanNum }}
          </div>
          <div class="pie-label-right">
            {{ produceStatisData.currentMonthProduceNum }}
            <span v-if="produceStatisData.currentMonthPlanNum||produceStatisData.currentMonthPlanNum==0">/</span>
            {{
              produceStatisData.currentMonthPlanNum
            }}
            <span
              v-if="
                produceStatisData.currentMonthPlanNum ||
                produceStatisData.currentMonthPlanNum == 0
              "
              >/</span
            >
            {{ produceStatisData.currentMonthPlanNum }}
          </div>
        </div>
        <div class="echarts-box border_right2">
@@ -142,7 +160,7 @@
import ProductionStatistics from "./ProductionStatistics.vue";
import QualityDataTrendse from "./QualityDataTrends.vue";
import moment from "moment";

import anime from "animejs/lib/anime.es.js";
import {
  GetEquipmentCurrentState,
  getQualityData,
@@ -246,13 +264,15 @@
    async getEquipmentCurrentState() {
      try {
        let { data } = await GetEquipmentCurrentState();
        let equipmentData=[]
        data.forEach(item=>{
          const res=this.equipmentStatusData.filter(obj=>obj.workingProcedure==item.workingProcedure)
        let equipmentData = [];
        data.forEach((item) => {
          const res = this.equipmentStatusData.filter(
            (obj) => obj.workingProcedure == item.workingProcedure
          );
          if(res.length>0){
            equipmentData.push(item)
            equipmentData.push(item);
          }
        })
        });
        this.equipmentStatusData = equipmentData;
        this.getImageColor(data);
      } catch (error) {
@@ -314,6 +334,40 @@
      }
    },
  },
  mounted() {
    // var timeline = anime.timeline({
    //   easing: "easeOutExpo", // è¿åŠ¨æ•ˆæžœ
    //   loop: true, // è®¾ç½®æ— é™å¾ªçŽ¯
    // });

    // // ç¬¬ä¸€ä¸ªåŠ¨ç”»ï¼šæ¨ªå‘移动
    // timeline
    //   .add({
    //     targets: "#animatedImage",
    //     translateX: 280, // å‘右移动280px
    //     duration: 2000, // åŠ¨ç”»æŒç»­æ—¶é—´
    //   })
    //   // ç¬¬äºŒä¸ªåŠ¨ç”»ï¼šå‘下移动
    //   .add({
    //     targets: "#animatedImage",
    //     translateY: 50, // å‘下移动50px
    //     duration: 2000, // åŠ¨ç”»æŒç»­æ—¶é—´
    //   })
    //   // é—´éš”时间回到初始位置
    //   .add({
    //     targets: "#animatedImage",
    //     translateX: 0, // å›žåˆ°åˆå§‹ä½ç½®
    //     translateY: 0, // å›žåˆ°åˆå§‹ä½ç½®
    //     duration: 0, // ä¸éœ€è¦åŠ¨ç”»
    //     delay: 1000, // éš”断时间1秒
    //   });

    // setTimeout(() => {
    //   timeline.pause(); // æš‚停动画
    //   document.getElementById('animatedImage').classList.add('hidden');
    // }, 8000);
  },

  // beforeDestroy(){
  //   clearInterval(this.dataTimer)
  //   clearInterval(this.dateTimer)
@@ -328,69 +382,94 @@
.container {
  width: 100%;
  height: auto;
  position: relative;
  .guang {
    position: absolute;
    width: 100%;
    top: 30%;
    left: 0;
    z-index: 0;
    height: 69%;
  }

  .header {
    position: relative;
    z-index: 9;
    width: 100%;
    height: 2rem;
    background-image: url("~@/assets/images/title.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: 0.25rem;
    position: relative;

    .title {
      display: flex;
    vertical-align: middle;
    align-items: center;
      color: #41c7de;
      font-size: 0.38rem;
      font-size: 40px;
      font-weight: 700;
      position: absolute;
      top: .31rem;
      top: 12px;
      left: 50%;
      transform: translate(-50%);
      letter-spacing: 8px;
      .imgTitle{
        width: 0.7rem;
        margin-right: .2rem;
        width: 117px;
        margin-right: 69px;
      }
    }

    .left-text {
      font-size: 0.19rem;
      font-size: 18px;
      color: #fff;
      position: absolute;
      top: 1.15rem;
      left: 5rem;
    top: 57px;
    left: 38px;
    width: 372px;
    text-align: right;
    line-height: 48px;
    font-weight: 700;
    }

    .right-text {
      font-size: 0.19rem;
      font-size: 18px;
      text-align: right;
      color: #fff;
      position: absolute;
      top: 1.15rem;
      right: 5.3rem;
    top: 57px;
    right: 268px;
    line-height: 48px;
    font-weight: 700;
    }
  }

  .main {
    position: relative;
    width: 100%;
    height: auto;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-between;
    padding: 0 0.28rem 0.19rem;
    z-index: 99;

    .main-top {
      width: 100%;
      height: 7.42rem;

      // background-color: #fff;
      margin-bottom: 0.29rem;
      background-image: url("~@/assets/images/border_prodline.png");
      background-size: 101.1% 101.8%;
      background-position: -0.13rem -0.13rem;
      background-size: 100% 100%;
      position: relative;

      .main-top_ly {
        width: 95%;
        margin: 0 auto;
        position: relative;
        height: 6.8rem;
      }

      .prodline {
        width:95%;
        display: block;
@@ -401,10 +480,11 @@
      }

      .prodline_op35 {
        position: absolute;
        top: 2.72rem;
        left: 4.3rem;
        width:1.8%;
        display: none;
        // position: absolute;
        // top: 2.72rem;
        // left: 4.3rem;
        // width:1.8%;
      }

      .euip {
@@ -412,54 +492,63 @@
        position: absolute;
        top: -1.59rem;
        left: 1.28rem;
        
      }

      .OP05{
        top: -1.58rem;
        left: 0.12rem;   
        top: -76px;
        left: -220px;
      }

      .OP10,.OP40{
        top: -1.48rem;
        left: 0.5rem;
      .OP10,
      .OP40 {
        top: -90px;
        left: -236px;
        width: 112%;
        height: 902px;
      }

      .OP20{
        top: -1.8rem;
        left: 0.6rem;
        top: -95px;
        left: 31px;
        width: 86%;
        transform: scale(1.5, 1.2);
      }

      .OP30{
        top: -2.05rem;
        left: 0.3rem;
        top: -183px;
        left: -247px;
        width: 2061px;
        height: 923px;
      }

      .OP35{
        top: -1.8rem;
        left: 0.2rem;
        top: -104px;
        left: -182px;
      }

      .OP50{
        top: -1.69rem;
        left: 1.05rem;
        top: -168px;
        left: -75px;
        width: 100%;
      }

      .OP60{
        top: -1.65rem;
        left: 1.5rem;
        top: -178px;
        left: -31px;
        width: 100%;
      }

      .OP70{
        top: -1.52rem;
        left: 2.15rem;
        top: -175px;
        left: 23px;
        width: 101%;
      }

      .OP80,.unit{
      .OP80,
      .unit {
        top: -1.95rem;
        left: 1.98rem;
      }


      // img:nth-child(2) {
      //   width:100%;
@@ -469,56 +558,54 @@
    }

    .main-bottom {
      height: auto;
      // height: auto;
      height: 320px;
      // border: 1px solid red;
      display: flex;
      // background-color: skyblue;

      .border_left1 {
        width:3.84rem;
        margin-right: .14rem;
        width: 284px;
        margin-right: 20px;
        border: 0 !important;
        background-image: url("~@/assets/images/border_left1.png");
        background-size: 107.5% 104%;
        background-position: -0.14rem -0.13rem;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .border_left2 {
        width:3.02rem;
        margin-right: .16rem;
        width: 244px;
        margin-right: 20px;
        border: 0 !important;
        background-image: url("~@/assets/images/border_left2.png");
        background-size: 109.3% 104%;
        background-position: -0.14rem -0.13rem;
        background-image: url("~@/assets/images/border_left1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .border_middle {
        width:6.09rem;
        margin-right: .16rem;
      width: 720px;
        margin-right: 20px;
        border: 0 !important;
        background-image: url("~@/assets/images/border_middle.png");
        background-size: 102.7% 104%;
        background-position: -0.14rem -0.13rem;
        // background-image: url("~@/assets/images/border_middle.png");
        background-image: url("~@/assets/images/border_left1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .border_right1 {
        width:3.75rem;
        margin-right: .15rem;
        width: 244px;
        margin-right: 20px;
        border: 0 !important;
        background-image: url("~@/assets/images/border_right1.png");
        background-size: 107.5% 104%;
        background-position: -0.14rem -0.13rem;
        background-image: url("~@/assets/images/border_left1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .border_right2 {
        width:6.09rem;
        width: 284px;
        border: 0 !important;
        background-image: url("~@/assets/images/border_right2.png");
        background-size: 104.4% 104%;
        background-position: -0.14rem -0.13rem;
        background-image: url("~@/assets/images/border_left1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

@@ -527,14 +614,14 @@
        border: 2px solid #3a45de;

        .echarts-title {
          font-size: 0.18rem;
          height: 0.75rem;
          padding: 0.31rem 0 0.26rem;
          margin: 0 0.23rem;
          font-size: 20px;
          height: 69px;
          padding-top: 20px;
          margin: 0 0 0 0;
          font-weight: 700;
          color: #00afb9;
          color: #00f8c6;
          text-align: center;
          border-bottom: 2px solid #3c37bf;
          border-bottom: 2px solid #04279d;
        }
      }

@@ -543,10 +630,10 @@

        .pie-label-left {
          position: absolute;
    bottom: 0.1rem;
          bottom: 10px;
    left: 0.1rem;
    color: #fff;
    font-size: 0.2rem;
          color: #d9dbe6;
          font-size: 18px;
    font-weight: 300;
    width: 44%;
    text-align: center;
@@ -554,11 +641,11 @@

        .pie-label-right {
          position: absolute;
    bottom: 0.1rem;
          bottom: 10px;
    right: 0.3rem;
    color: #fff;
    font-size: 0.2rem;
    font-weight: 300;
          color: #d9dbe6;
          font-size: 18px;
    width: 44%;
    text-align: center;
        }
@@ -566,7 +653,8 @@

      .box-container {
        width: 100%;
        height: 2.6rem;
        // height: 2.6rem;
        height: 236px;
        // background-color: rgb(196, 231, 178);
      }

@@ -579,4 +667,31 @@
    }
  }
}

.box11 {
  color: #fff;
  margin: 10px 0;
  text-align: center;
  font-size: 15px;
}
.box12 {
  margin: 0 0.13rem;
  height: 0.13rem;
  background-color: #f14158;
}

.OP88,
.OP89,
.OP90 {
  position: absolute;
  width: 20px;
}
#animatedImage {
  position: absolute;
  top: 70.5%;
  left: 75px;
}
.hidden {
  display: none; /* éšè—å…ƒç´  */
}
</style>

 yiqi_screen/src/components/EquipmentRunStatus.vue

@@ -1,5 +1,6 @@
<template>
  <div class="box-container" id="echarts1"></div>
  <!-- <img :src="require(`@/assets/images/huan.png`)" class="huan" /> -->
  <div class="box-container   quan" id="echarts1"></div>
</template>
    
    <script>
@@ -47,7 +48,7 @@
            break;
        }
      });
      // console.log(val,data);
      console.log("++++++", data);
      // data = [
      //   { value: 2, name: "生产" },
      //   { value: 3, name: "完成" },
@@ -63,32 +64,35 @@
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts1"));
    this.option = {
      color: ["#00afb9", "#c3cbe4", "#2127ff", "#e0de00", "#c8003d"],
      // #00ff99 #fffff0 #0a0d7f #ffcc00 #fe0000
      color: ["#00ff99", "#fffff0", "#0a0d7f", "#ffcc00", "#fe0000"],
      
      legend: {
        orient: "vertical",
        top: "25%",
        right: "5%",
        itemGap: 7, //块之间的间距
        itemHeight: 8, // è®¾ç½®å›¾ä¾‹é¡¹çš„高度
        itemWidth: 5, // è®¾ç½®å›¾ä¾‹é¡¹çš„宽度
        top: "28%",
        right: "12%",
        itemGap: 12, //块之间的间距
        itemHeight: 9, // è®¾ç½®å›¾ä¾‹é¡¹çš„高度
        itemWidth: 9, // è®¾ç½®å›¾ä¾‹é¡¹çš„宽度
        data: ["生产", "完成", "待机", "警告", "故障"],
        textStyle: {
          color: "#fff",
          fontSize: 8,
          fontSize: 10,
        },
        formatter:  (name) =>{
          let res=this.option.series[0].data.filter(item=>item.name==name)
          let res = this.option.series[0].data.filter(
            (item) => item.name == name
          );
          return res.length>0?`${name}: ${res[0].value}台`:name;
        },
      },
      series: [
        {
          type: "pie",
          // radius: ["20%", "30%"],
          // center: ["33%", "50%"],
          radius: ["20%", "30%"],
          center: ["38%", "50%"],
          avoidLabelOverlap: false,
          center: ["33%", "50%"],
          radius: ["29%", "39%"],
          padAngle: 5, //环与环之间的间隙
          // avoidLabelOverlap: false,
          // left: "-30%",
          // top: "10%",
          label: {
@@ -96,6 +100,7 @@
            formatter: `{d}%`,
            color: "#fff",
            fontSize: 11,
            position: "outside",
          },
          labelLine: {
            show: true,
@@ -106,15 +111,19 @@
            borderRadius: 3,
            borderColor: "transparent",
            borderWidth: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)', // é˜´å½±é¢œè‰²
          shadowBlur: 10, // é˜´å½±æ¨¡ç³Šç¨‹åº¦
          shadowOffsetX: 20, // æ°´å¹³é˜´å½±åç§»
          shadowOffsetY: 20 // åž‚直阴影偏移
          },
          // emphasis: {
          //   label: {
          //     show: false,
          //     fontSize: "15",
          //     color:'#fff',
          //     fontWeight: "normal",
          //   },
          // },
          emphasis: {
            label: {
              show: false,
              fontSize: "15",
              color: "#fff",
              fontWeight: "normal",
            },
          },
          data: [],
        },
      ],
@@ -190,10 +199,24 @@
    <style>
#echarts1 {
  width: 3.84rem;
  /* height:5.2rem; */
  transform: scaleY(2);
}
.box-container{
  position: relative;
}

.quan::after {
  background-image: url("~@/assets/images/huan.png");
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  content: "";
  width: 56px;
  height: 32px;
  z-index: -1;
  /* opacity: 0.5; */
  top: 101px;
  left: 73px;
  transform: scaleY(2);
}
</style>

 yiqi_screen/src/components/ProdlineHealthy.vue

@@ -17,32 +17,38 @@
    this.option = {
      legend: {
        orient: "vertical",
        bottom: "30%",
        bottom: "20%",
        right: "6%",
        textStyle: {
          color: "#fff",
          fontSize: 8,
        },
        itemHeight: 5, // è®¾ç½®å›¾ä¾‹é¡¹çš„高度
        itemWidth: 5, // è®¾ç½®å›¾ä¾‹é¡¹çš„宽度

        itemGap: 8, //块之间的间距
        itemHeight: 9, // è®¾ç½®å›¾ä¾‹é¡¹çš„高度
        itemWidth: 9, // è®¾ç½®å›¾ä¾‹é¡¹çš„宽度
        data: [
          {
            name: "实际",
            itemStyle: {
              color: "#fff",
            },
          },
          {
            name: "目标",
            itemStyle: {
              color: "#01afba",
              color: "#f2f45b",
            },
            textStyle: {
              color: "#f2f45b", //黄色
              fontSize: 10,
            },
          },
          {
            name: "实际",
            itemStyle: {
              color: "#1fe9dc",
            },
            textStyle: {
              color: "#1fe9dc",
              fontSize: 10,
            },
          },
        ],
      },
      radar: {
        center: ["40%", "50%"], // æ›´æ”¹ä¸ºæ›´å°çš„百分比以往中间移动
        radius: "30%",
        center: ["40%", "55%"], // æ›´æ”¹ä¸ºæ›´å°çš„百分比以往中间移动
        radius: "40%",
        indicator: [
          { name: "人", max: 100, color: "#fff" },
          { name: "环", max: 100, color: "#fff" },
@@ -50,7 +56,8 @@
          { name: "料", max: 100, color: "#fff" },
          { name: "机", max: 100, color: "#fff" },
        ],
        splitNumber: 0,

        // splitNumber: 0,
        axisLine: {
          show: false,
        },
@@ -58,11 +65,11 @@
          padding: -10,
        },

        // splitArea:{
        //   areaStyle:{
        //     color:'#fff'
        //   }
        // }
        splitArea: {
          areaStyle: {
            color: "rgba(131, 163, 178, 0.8)",
          },
        },
      },
      series: [
        {
@@ -70,25 +77,29 @@
          type: "radar",
          data: [
            {
              value: [90, 90, 90, 90, 90],
              name: "实际",
              lineStyle: {
                color: "#fff",
                opacity: 0,
              },
              value: [90, 80, 80, 80, 80],
              areaStyle: {
                color: "#fff",
                color: {
                  type: "linear-gradient",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "#b2f2bb" }, // æ¸å˜å¼€å§‹é¢œè‰²
                    { offset: 1, color: "#a0e6a0" }, // æ¸å˜ç»“束颜色
                  ],
                },
                opacity: 0.9,
              },
            },
            {
              value: [100, 100, 100, 100, 100],
              name: "目标",
              lineStyle: {
                color: "#01afba",
                opacity: 0,
              },
              value: [90, 80, 80, 80, 80],
              areaStyle: {
                color: "#01afba",
                color: "#6ee6db",
                opacity: 0.3,
              },
            },
          ],
@@ -166,8 +177,8 @@

<style>
#echarts2 {
  margin-top: .1rem;
  width: 2.89rem;
  margin-top: 0.1rem;
  width: 100%;
  height: 2.5rem;
  transform: scaleY(2);


 yiqi_screen/src/components/ProductionCompletionTrend.vue

@@ -1,40 +1,59 @@
<template>
  <div class="box-container" id="echarts5"></div>
  <div>
    <div class="box-container" id="echarts5" style="width: 100%;height:230px"></div>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";
import {zhu} from './img/t.js'

export default {
  props:{
    produceCompletionData:{
      type:Array,
      default:()=>[]
    }
      default: () => [],
    },
  },
  data() {
    return {
      option: {},
      myChart: {},
      timechartes: null,

      myChart2: null,
      textureImg: null,
      // img,
    };
  },
  watch:{
    produceCompletionData(val){
      let xData=[],yData1=[],yData2=[],yData3=[];
      val.forEach(item => {
        xData.push(item.month)
        yData1.push(item.completionNum) //实际
        yData2.push(item.planCompletionRate)  //planCompletionRate
        yData3.push(item.planCompletionNum)  //计划
      let xData = [],
        yData1 = [],
        yData2 = [],
        yData3 = [];
      val.forEach((item) => {
        console.log('ceshi', item.completionNum);
        
        xData.push(item.month);
        yData1.push({
          value: item.completionNum,
          symbolRepeat: false,
        }); //实际
        // yData1.push(item.completionNum); //实际
        yData2.push(item.planCompletionRate); //planCompletionRate
        yData3.push(item.planCompletionNum); //计划
      });
      this.$set(this.option.xAxis,'data',xData)
      this.$set(this.option.series[0],'data',yData1)
      this.$set(this.option.series[1],'data',yData2)
      this.$set(this.option.series[2],'data',yData3)
      this.$set(this.option.xAxis, "data", xData);
      // console.log('---', yData1);
      
      this.$set(this.option.series[0], "data", yData1);
      this.$set(this.option.series[1], "data", yData2);
      // this.$set(this.option.series[2], "data", yData3);
      this.$nextTick(() => {
        this.myChart.setOption(this.option);
        });

    }
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts5"));
@@ -42,137 +61,143 @@
      tooltip: {
        trigger: "axis",
        formatter:
    '{b0}月<br />' +
          "{b0}月<br />" +
    '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#13e5f2,#01afba);border-radius:50%"></a> {a0}: {c0}<br />' +
     '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#ffc107,#fd7e14);border-radius:50%"></a> {a2}: {c2}<br />'+
          // '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#ffc107,#fd7e14);border-radius:50%"></a> {a2}: {c2}<br />' +
    '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#fff,#eee);border-radius:50%"></a> {a1}: {c1}%<br />', // æ·»åŠ ç”Ÿäº§è®¡åˆ’数提示
        backgroundColor: "rgba(0,0,0,0.7)",
        
        textStyle: {
          color: "#fff",
          color: "#ffffff",
        },
      },
      grid: {
        top: "15%",
        bottom: "15%",
        left: "16%",
        right: "15%"
        bottom: "8%",
        left: "18%",
        right: "18%",
      },
      xAxis: {
        data: [ ],
        type: "category",
        axisLabel: {
          color: "#fff",
          color: "#326e92",
          interval:0,
          fontSize: 13,
          // formatter: '{value}月'
        },
        axisTick:{
          show:false
          show: false,
        },
        axisLine:{
          lineStyle:{
            color:'rgba(255,255,255,0.5)'
          }
        }
            color: "#326e92",
          
          },
        },
      },
      yAxis: [
        {
          type: "value",
          position:'left',
          position: "left",
          axisLine: {
            show: true,
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.5)',
              color: "#326e92",
            },
          },
          axisLabel: {
            show:true,
            margin: 5,
            color: "#fff",
            color: "#326e92",
            // formatter: '{value}%'
          },
          alignTicks: true,
          alignTicks: false,
          nameTextStyle: {
            color: "#fff",
          },
          splitLine:{
            lineStyle:{
              color:'rgba(255,255,255,0.5)'
            }
          }
              color: "#326e92",
            },
          },
        },
        {
          show:true,
          type: "value",
          position:'right',
          position: "right",
          // name: "持续时长",
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(255,255,255,0.5)",
              color: "#326e92",
            },
          },
          axisLabel: {
            show:true,
            color: "#fff",
            formatter: '{value}%'
            color: "#326e92",
            formatter: "{value}%",
          },
          nameTextStyle: {
            color: "#fff",
            color: "#326e92",
          },
          splitLine:{
            lineStyle:{
              color:'rgba(255,255,255,0)'
            }
          }
              color: "#326e92",
            },
          },
        },
      ],
      series: [
        {
          name: "生产完成数",
          type: "bar",
          type: "pictorialBar",
          // type: "bar",
          symbol: 'image://'+zhu,
          data: [],
          yAxisIndex: 0,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#13e5f2", // 0% å¤„的颜色
              },
              {
                offset: 1,
                color: "#01afba", // 100% å¤„的颜色
              },
            ],
          },

          // yAxisIndex: 0,
          // color: {
          //   type: "linear",
          //   x: 0,
          //   y: 0,
          //   x2: 0,
          //   y2: 1,
          //   colorStops: [
          //     {
          //       offset: 0,
          //       color: "#13e5f2", // 0% å¤„的颜色
          //     },
          //     {
          //       offset: 1,
          //       color: "#01afba", // 100% å¤„的颜色
          //     },
          //   ],
          // },
        },
        {
          name: "生产完成率",
          type: "line",
          data: [],
          showSymbol:false,
          showSymbol: true,
          yAxisIndex: 1,
          color: 'rgba(255,255,255,0.85)',
          smooth: true, // ä½¿æŠ˜çº¿å›¾å¹³æ»‘
          color: "rgba(255,205,86,0.85)",
          lineStyle:{
            width:3
          }
            width: 1,
        },
     {
    name: "生产计划数", // æ·»åŠ ç”Ÿäº§è®¡åˆ’æ•°
     type: "line",
     data: [], // æ ¹æ®éœ€è¦å¡«å……此数组
     showSymbol: false,
     yAxisIndex: 0, // ä¸Žç›¸åº”çš„ y è½´å…³è”
    color: 'rgba(255,205,86,0.85)', // è‡ªå®šä¹‰é¢œè‰²
      lineStyle: {
       width: 3
     }
    }
        },
        // {
        //   name: "生产计划数", // æ·»åŠ ç”Ÿäº§è®¡åˆ’æ•°
        //   type: "line",
        //   data: [], // æ ¹æ®éœ€è¦å¡«å……此数组
        //   showSymbol: true,
        //   smooth: true, // ä½¿æŠ˜çº¿å›¾å¹³æ»‘
        //   yAxisIndex: 0, // ä¸Žç›¸åº”çš„ y è½´å…³è”
        //   color: "rgba(255,255,255,0.85)", // è‡ªå®šä¹‰é¢œè‰²
        //   lineStyle: {
        //     width: 1,
        //   },
        // },
      ],
      // animation: true,
      // dataZoom: [
@@ -186,15 +211,17 @@
      // ],
    };
    this.myChart.setOption(this.option);
    const that=this
    window.addEventListener('resize',()=>{
    const that = this;
    window.addEventListener("resize", () => {
      that.myChart.resize();
    })
    });
    // this.barChartScrolling();
    // this.defineEvent()
    // window.addEventListener("resize",  ()=> {
    //   this.myChart.resize();
    // });

    // this.init()
  },
  methods: {
    // æ°´å¹³æ»šåŠ¨
@@ -242,9 +269,54 @@
        clearInterval(this.timechartes);
      });
    },

    init() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      var rocket =''
        
      option = {
        legend: {
          data: ["tu1", "barbg1"],
        },
        xAxis: {
          data: ["a", "b", "c", "d"],
        },
        yAxis: {
          show: true,
        },
        series: [
          {
            type: "pictorialBar",
            name: "tu1",
            symbol: 'image://'+zhu,
            data: [
              {
                value: 60,
                symbolRepeat: false,
              },
              {
                value: 60,
                symbolRepeat: false,
              },
              {
                value: 60,
                symbolRepeat: false,
              },
              {
                value: 60,
                symbolRepeat: false,
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    
  },
};
</script>
  
  <style>
</style>
<style></style>

 yiqi_screen/src/components/ProductionStatistics.vue

@@ -26,25 +26,27 @@
      // å½“前班组计划生产数量 currentShiftPlanNum
      var num1 = val.currentShiftProduceNum; //实际生产数量
      var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //计划生产数量
      if(val.currentShiftPlanNum == 0){ //分母为0 æ˜¾ç¤º0%
        num1 = 0
        num2 = 10
      if (val.currentShiftPlanNum == 0) {
        //分母为0 æ˜¾ç¤º0%
        num1 = 0;
        num2 = 10;
      }
      this.$set(this.option.series[0], "data", [
      // { value: 1 },  //实际生产数量 1/ (9+1) = 10%
      // { value: 9 },
        { value: num1 }, //实际生产数量
        { value: num2 },
        { value: Math.floor(num1) }, //实际生产数量
        { value: Math.floor(num2) },
      ]);
      var num3 = val.currentMonthProduceNum; 
      var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum; 
      if(val.currentMonthPlanNum == 0 ){ //分母为0 æ˜¾ç¤º0%
        num3 = 0
        num4 = 10
      if (val.currentMonthPlanNum == 0) {
        //分母为0 æ˜¾ç¤º0%
        num3 = 0;
        num4 = 10;
      }
      this.$set(this.option.series[1], "data", [
        { value: num3 },
        { value: num4 },
        { value: Math.floor(num3) },
        { value: Math.floor(num4) },
      ]);

      this.myChart.setOption(this.option);
@@ -55,6 +57,40 @@
    this.myChart = this.$echarts.init(document.getElementById("echarts4"));
    this.option = {
      color: ["#00f6fe", "#c4c3d6"],
      // æ’入背景图
      // graphic: [
      //   {
      //     type: "image",
      //     id: "background1",
      //     left: "20px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     top: "60px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [-25, -25],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // ç¬¬ä¸€ä¸ªçŽ¯å½¢å›¾çš„背景图片路径
      //       width: 100,
      //       height: 100,
      //       opacity: 1,
      //     },
      //   },
      //   {
      //     type: "image",
      //     id: "background2",
      //     left: "153px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     top: "60px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [0, 0],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // ç¬¬ä¸€ä¸ªçŽ¯å½¢å›¾çš„背景图片路径
      //       width: 100,
      //       height: 100,
      //       opacity: 1,
      //     },
      //   },
      // ],
    
      series: [
        {
          name: "Access From",
@@ -71,11 +107,13 @@
            fontSize: 12,
          },

          emphasis: { //饼图中间的字体大小
          emphasis: {
            //饼图中间的字体大小
            scale: false,
            label: {
              show: true,
              fontSize: 15,
              fontSize: 22,
              color: "#19d8d0",
              fontWeight: "normal",
            },
          },
@@ -112,7 +150,8 @@
            scale: false,
            label: {
              show: true,
              fontSize: 15, //饼图中间的字体大小
              fontSize: 22,
              color: "#19d8d0",
              fontWeight: "normal",
            },
          },
@@ -124,10 +163,10 @@
      ],
    };
    this.myChart.setOption(this.option);
    const that=this
    window.addEventListener('resize',()=>{
    const that = this;
    window.addEventListener("resize", () => {
      that.myChart.resize();
    })
    });
    // this.getData();
    this.defineEvent();
    // this.selectPie();

 yiqi_screen/src/components/QualityDataTrends.vue

@@ -1,5 +1,5 @@
<template>
    <div class="box-container echarts3Box" style="height: 1.52rem" id="echarts3"></div>
    <div class="box-container echarts3Box" id="echarts3"></div>
</template>
      
      <script>
@@ -35,15 +35,16 @@
          data: [],
          type: "line",
          //   symbol:'none',
          symbolSize: 0,
          // symbolSize: 0,
          lineStyle: {
            color: "#fff",
            color: "#7b8fe6",
          },
          itemStyle: {
            normal: {
              label: {
                show: true,
                color: "#fff",
               
                color: "#7b8fe6",
              },
            },
          },
@@ -141,5 +142,7 @@
</script>
      
      <style>
   
   .echarts3Box{
    height: 150px !important;
   }
</style>

 yiqi_screen/src/components/img/t.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
export let zhu = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAB+CAYAAAA3MXHFAAAAAXNSR0IArs4c6QAAAedJREFUaEPtm80rRGEYxc8746OwmJSSZIOSspWtYaXI2gohOxtZWsjCTv4ApcRC7CeT/8CkrGQYzGAMKZIx5n48mqkRd+50u+4MqXPX7/uc5577O3U2V+GXnprweU+2vuZMldQTUVMpzEFhBUCth72M65f0evgqOWaYqtVWcCIpTX6FDSgMeRDKXX2OpB73jh+exgH4DFMFigSnUzIowCaAZi9iAlyGLm6P717fRgpzvgnOiFTLPZYFmM9t40XMFDncPU2Yr5rW+3XOp+BMStpNYBvAtwM/Ec3oRmgnetVtGNJmvZ8XHL2RhcYqLPm8gZGbLdfvchCOxvoANNgtmxesP5cxEWz95G2sd5RINBOPdZaaRUHXLtNSQkNoihxgLBgLxoKxKHKAsWAsGAvGwnUKCA2hITTODrB5s2I4U2I5QWgIDaFhxWDFcJ0CQkNoCI2zA6wYrBjOlLCXWhwgNISGFYMVw3UKCA2hITTODrCXsmI4U8Jeyl7qmpK/hkZETrLxWFepxcsefArSUtcpITSEhtAUOcBYMBb/Phabhi8xWdZfWGxjodSFEnNWH+jcz1lWSUFdAWt6um4Rwy3pwvepiKAAR36FaS3YEbGCoGrPpMMPBF0TYndB0ySTjAdMlVhFf79ud+QDhHReVZvashsAAAAASUVORK5CYII='