一汽大屏 未提交的代码

liuying

2025-04-28 0630126012170da25291d55f0a1bd3130e64f434

一汽大屏 未提交的代码

 yiqi_screen/package-lock.json

@@ -9,6 +9,7 @@
      "version": "0.1.0",
      "dependencies": {
        "@jiaminghi/data-view": "^2.10.0",
        "animejs": "^3.2.2",
        "axios": "^1.6.0",
        "core-js": "^3.8.3",
        "echarts": "^5.4.3",
@@ -3459,6 +3460,11 @@
        "ajv": "^6.9.1"
      }
    },
    "node_modules/animejs": {
      "version": "3.2.2",
      "resolved": "https://registry.npmmirror.com/animejs/-/animejs-3.2.2.tgz",
      "integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ=="
    },
    "node_modules/ansi-colors": {
      "version": "4.1.3",
      "resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -5351,12 +5357,12 @@
      }
    },
    "node_modules/echarts": {
      "version": "5.4.3",
      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
      "version": "5.5.1",
      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
      "dependencies": {
        "tslib": "2.3.0",
        "zrender": "5.4.4"
        "zrender": "5.6.0"
      }
    },
    "node_modules/echarts/node_modules/tslib": {
@@ -12822,9 +12828,9 @@
      "dev": true
    },
    "node_modules/zrender": {
      "version": "5.4.4",
      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz",
      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
      "version": "5.6.0",
      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
      "dependencies": {
        "tslib": "2.3.0"
      }
@@ -15447,6 +15453,11 @@
      "dev": true,
      "requires": {}
    },
    "animejs": {
      "version": "3.2.2",
      "resolved": "https://registry.npmmirror.com/animejs/-/animejs-3.2.2.tgz",
      "integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ=="
    },
    "ansi-colors": {
      "version": "4.1.3",
      "resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -16958,12 +16969,12 @@
      "dev": true
    },
    "echarts": {
      "version": "5.4.3",
      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
      "version": "5.5.1",
      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
      "requires": {
        "tslib": "2.3.0",
        "zrender": "5.4.4"
        "zrender": "5.6.0"
      },
      "dependencies": {
        "tslib": {
@@ -22854,9 +22865,9 @@
      }
    },
    "zrender": {
      "version": "5.4.4",
      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz",
      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
      "version": "5.6.0",
      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
      "requires": {
        "tslib": "2.3.0"
      },

 yiqi_screen/package.json

@@ -9,6 +9,7 @@
  },
  "dependencies": {
    "@jiaminghi/data-view": "^2.10.0",
    "animejs": "^3.2.2",
    "axios": "^1.6.0",
    "core-js": "^3.8.3",
    "echarts": "^5.4.3",

 yiqi_screen/src/App.vue

@@ -20,6 +20,7 @@

<style>
    html, body {
      font-size: 79.5833px !important;
        width: 1910px;
        height: 1070px;
        /* width:100%; */

 yiqi_screen/src/api/api.js

@@ -6,8 +6,8 @@
// if(process.env.NODE_ENV === "development"){
//     baseURL = "http://localhost:7788/"  //这里可在vue.config.js做一个代理【代理代码见下】
// }else{
   //   baseURL = "http://localhost:7788/api"
    baseURL = "http://192.168.216.203:7788/api"  // çº¿ä¸ŠçŽ¯å¢ƒåœ°å€
    baseURL = "http://localhost:7788/api"
   //   baseURL = "http://192.168.216.203:7788/api"  // çº¿ä¸ŠçŽ¯å¢ƒåœ°å€
// }
// baseURL = "http://localhost:7788/api" //本地测试环境
 

 yiqi_screen/src/assets/images/40.png

 yiqi_screen/src/assets/images/6.gif

 yiqi_screen/src/assets/images/8.gif

 yiqi_screen/src/assets/images/9.png

 yiqi_screen/src/assets/images/blue/zhuozi.png

 yiqi_screen/src/assets/images/green/zhuozi.png

 yiqi_screen/src/assets/images/quan.png

 yiqi_screen/src/assets/images/quan2.png

 yiqi_screen/src/assets/images/red/zhuozi.png

 yiqi_screen/src/assets/images/white/zhuozi.png

 yiqi_screen/src/assets/images/yellow/zhuozi.png

 yiqi_screen/src/assets/t.js

@@ -1 +1 @@
export let zhu = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAB+CAYAAAA3MXHFAAABLElEQVRoge3bPyvEcRwH8NfpsEgWMdhsMrAou8dgMYtFyioZXELJbFZWBgvPAOEBGO4x3GCjM1xX59yf4X5n0Ps9fJfvu1596rN+SpP7dT1Swi5OMN6r2CdfOMPRSI/SNO5wMSBWQwU7GCt3Ka3hCrMDQFDFDQ4wovm0ZBSnuC8Ae8Qz9lqd1gnncY2VASG4xQzW2z+a8gZeC8DquMQyVjsVyljAHI4HxGhs4yEmuhXKWNJY+yLy3gvj99IMPQEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAFb8vXXYN8EDBgwYMCAAf85eIWPbndPRaaK7VrFA8Od8BPnWGxi/Lx7KjJv2KxVvLR/lPGErYKgOqZwUav47FT4BrulK2qVemffAAAAAElFTkSuQmCC"
export let zhu = 'data:image/png;base64,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';

 yiqi_screen/src/components/Content.vue

@@ -20,30 +20,59 @@
    <div class="main">
      <div class="main-top">
        <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 src="~@/assets/images/9.png" class="line100" alt="line100" />
          <p style="color: white;"> {{equipmentStatusData}} </p> -->


          <!-- é¡¶éƒ¨ -->
          <div v-for="item in equipmentStatusData">
            <!-- <p style="color: white;font-size: 32px">  {{ item.equipmentCurrentState }} </p>  -->

            <img
              :alt="item.workingProcedure"
              :src="
                require(`@/assets/images/${
                  imageColor[item.workingProcedure]
                }/zhuozi.png`)
              "
              class="prodline_op325"
            />

            <img
              :alt="item.workingProcedure"
              v-if="
                item.equipmentCurrentState == 1 &&
                item.workingProcedure == 'OP30'
              "
              src="~@/assets/images/6.gif"
              class="box100"
          />
          <img
            alt="t10"
            :src="require(`@/assets/images/10.png`)"
            class="OP89"
              v-if="
                item.equipmentCurrentState == 1 &&
                item.workingProcedure == 'OP20'
              "
              src="~@/assets/images/8.gif"
              class="box200"
          />
          <img
            alt="t10"
            :src="require(`@/assets/images/10.png`)"
            class="OP90"
          /> -->
              v-if="
                item.equipmentCurrentState == 1 &&
                item.workingProcedure == 'OP50'
              "
              src="~@/assets/images/8.gif"
              class="box300"
            />
          </div>

          <img
            alt="t1"
            v-for="item in equipmentStatusData"
            :key="item.id"
            :src="
@@ -54,14 +83,16 @@
            :class="`euip ${item.workingProcedure}`"
          />

          <img alt="t2" src="~@/assets/images/OP35.png" class="prodline_op35" />
          <img
            alt="t3"
            src="~@/assets/images/OP35.png"
            class="prodline_op325"
          />

          <img
            :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"
          />
@@ -70,15 +101,21 @@
      <!-- <button @click="flag=true">data改变</button> -->
      <div class="main-bottom">
        <div class="echarts-box border_left1">
          <div class="echarts-title">设备运行状态统计图</div>
          <div class="echarts-title">
            <span class="title1"> è®¾å¤‡è¿è¡ŒçŠ¶æ€ç»Ÿè®¡å›¾ </span>
          </div>
          <EquipmentRunStatus :equipmentStatusData="equipmentStatusData" />
        </div>
        <div class="echarts-box border_left2">
          <div class="echarts-title">产线健康能力图</div>
          <div class="echarts-title">
            <span class="title1"> äº§çº¿å¥åº·èƒ½åŠ›å›¾ </span>
          </div>
          <ProdlineHealthy />
        </div>
        <div class="echarts-box border_middle">
          <div class="echarts-title">质量数据趋势图</div>
          <div class="echarts-title">
            <span class="title1"> è´¨é‡æ•°æ®è¶‹åŠ¿å›¾ </span>
          </div>
          <div class="box11">
            {{ qualityData.qualityType }}
          </div>
@@ -111,7 +148,18 @@
          </div>
        </div>
        <div class="echarts-box border_right1">
          <div class="echarts-title">本班/本月产量统计</div>
          <div class="echarts-title">
            <span class="title1"> æœ¬ç­/本月产量统计 </span>
          </div>

          <!-- 
          <div class="ring-container quan1">
            <div class="outer-ring"></div>
            <div class="inner-ring"></div>
          </div> -->

          <div class="quan1"></div>
          <div class="quan2"></div>

          <ProductionStatistics :produceStatisData="produceStatisData" />
          <div class="pie-label-left">
@@ -140,7 +188,9 @@
          </div>
        </div>
        <div class="echarts-box border_right2">
          <div class="echarts-title">生产完成趋势</div>
          <div class="echarts-title">
            <span class="title1"> ç”Ÿäº§å®Œæˆè¶‹åŠ¿ </span>
          </div>
          <ProductionCompletionTrend
            :produceCompletionData="produceCompletionData"
          />
@@ -270,11 +320,15 @@
            (obj) => obj.workingProcedure == item.workingProcedure
          );
          if (res.length > 0) {
            // item.equipmentCurrentState =5; æµ‹è¯•
            equipmentData.push(item);
          }
        });
        this.equipmentStatusData = equipmentData;
        console.log(88888888);
        console.log(JSON.stringify(this.equipmentStatusData) );
        this.getImageColor(data);
        
      } catch (error) {
        console.log(error);
      }
@@ -290,7 +344,8 @@
          this.imageColor[item.workingProcedure] = result[0].color;
        }
      });
      // console.log(this.imageColor, "getImageColor");
      console.log(5555555555);
       console.log(this.imageColor, "getImageColor");
    },
    // èŽ·å–质量数据
    async getQualityData() {
@@ -335,35 +390,7 @@
    },
  },
  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(){
@@ -424,28 +451,28 @@
    }

    .left-text {
      font-size: 20px;
      font-size: 16px;
      color: #fff;
      position: absolute;
      top: 63px;
      top: 79px;
      left: 37px;
      width: 368px;
      text-align: right;
      line-height: 48px;
      line-height: 23px;
      font-weight: 700;
      letter-spacing: -2px;
      transform: scaleY(2);
    }

    .right-text {
      font-size: 18px;
      font-size: 16px;
      text-align: right;
      color: #fff;
      position: absolute;
      top: 63px;
      top: 79px;
      right: 268px;
      line-height: 48px;
      line-height: 23px;
      font-weight: 700;
      letter-spacing: -2px;
      transform: scaleY(2);
    }
  }

@@ -472,7 +499,7 @@
        width: 95%;
        margin: 0 auto;
        position: relative;
        height: 6.8rem;
        height: 526px;
      }

      .prodline {
@@ -482,14 +509,22 @@
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 225px;
      }

      .prodline_op35 {
        display: none;
        // position: absolute;
        // top: 2.72rem;
        // left: 4.3rem;
        // width:1.8%;
        position: absolute;
        top: 246px;
        left: 106px;
        width: 40px;
        z-index: 0;
      }
      .prodline_op325 {
        position: absolute;
        top: 254px;
        left: 108px;
        width: 38px;
        height: 63px;
      }

      .euip {
@@ -500,41 +535,41 @@
      }

      .OP05 {
        top: -76px;
        left: -220px;
        top: -122px;
        left: -223px;
      }

      .OP10,
      .OP40 {
        top: -90px;
        left: -236px;
        width: 112%;
        height: 902px;
        top: -133px;
        left: -145px;
        height: 904px;
      }

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

      .OP30 {
        top: -183px;
        left: -247px;
        top: -152px;
        left: -226px;
        width: 2061px;
        height: 923px;
      }

      .OP35 {
        top: -104px;
        top: -151px;
        left: -182px;
        width: 100%;
        z-index: 999;
      }

      .OP50 {
        top: -168px;
        left: -75px;
        width: 100%;
        top: -108px;
        left: 11px;
        width: 90%;
      }

      .OP60 {
@@ -549,8 +584,13 @@
        width: 101%;
      }

      .OP80,
      .unit {
        top: -113px;
        left: 86px;
        transform: scale(1.2);
      }

      .OP80 {
        top: -1.95rem;
        left: 1.98rem;
      }
@@ -563,7 +603,7 @@
    }

    .main-bottom {
      height: 320px;
      height: 336px;
      display: flex;
      justify-content: center;
      .border_left1 {
@@ -624,7 +664,6 @@
          color: #00f8c6;
          text-align: center;
          border-bottom: 2px solid #0739a3;
          
        }
      }

@@ -697,4 +736,111 @@
.hidden {
  display: none; /* éšè—å…ƒç´  */
}

// .ring-container {
//   position: relative;
//   width: 85px;
//   height: 85px;
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }

// .outer-ring {
//   position: absolute;
//   width: 100%;
//   height: 100%;
//   border-radius: 50%;
//   background: transparent;
//   border: 1px solid #3498db; /* å¤–环颜色 */
// }

// .inner-ring {
//   position: absolute;
//   width: 80%;
//   height: 80%;
//   border-radius: 50%;
//   background: transparent;
//   box-shadow: inset 0 0 30px #084b71;
//   border: 1px solid #3c5da9;
// }

// .quan1{
//   position: absolute;
//     top: 142px;
//     left: 19px;
// }

.quan1 {
  position: absolute;
  background-size: 100% 100%;
  content: "";
  width: 125px;
  height: 118px;
  z-index: -1;
  top: 117px;
  left: 3px;
  transform: scaleY(2);
  border-radius: 100%;
  background-image: url("@/assets/images/quan.png"); /* æ›¿æ¢ä¸ºæ‚¨çš„背景图路径 */
  background-size: cover; /* æˆ–使用 contain，根据需要选择 */
  background-repeat: no-repeat;
  background-size: 95%;
}

.quan2 {
  position: absolute;
  background-size: 100% 100%;
  content: "";
  width: 125px;
  height: 118px;
  z-index: -1;
  top: 117px;
  left: 120px;
  transform: scaleY(2);
  border-radius: 100%;
  background-image: url("@/assets/images/quan.png"); /* æ›¿æ¢ä¸ºæ‚¨çš„背景图路径 */
  background-size: cover; /* æˆ–使用 contain，根据需要选择 */
  background-repeat: no-repeat;
  background-size: 95%;
}
.box100 {
  position: absolute;
  left: 25%;
  top: 35%;
  width: 67px;
  z-index: 9999;
}

.box200 {
  position: absolute;
  left: 4%;
  top: 48%;
  width: 77px;
  z-index: 9999;
}
.box300 {
  position: absolute;
  left: 44%;
  top: 49%;
  width: 75px;
  z-index: 9999;
}
.title1 {
  transform: scaleY(2);
  font-size: 12px;
  display: block;
  margin-top: 7px;
}
.zuozi {
  position: absolute;
  top: 10px;
  left: 10px;
}
.line100 {
  position: absolute;
  left: 5px;
  top: 64%;
  height: 18px;
}
</style>

 yiqi_screen/src/components/Content±¸·Ý.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,658 @@
<template>
  <!-- ä¸ŠåŠéƒ¨åˆ†ä¹Ÿåˆ†ä¸‰æ ¼ -->
  <div class="container">
    <div class="header">
      <div class="title">4GC三代发动机连杆线888</div>
      <div class="left-text">
        <div style="line-height: 30px">{{ nowTime }}</div>
        <div style="padding-left: 25px">
          å®‰å…¨ç”Ÿäº§:{{ produceStatisData.currentSafeProductionDay }}天
        </div>
      </div>

      <div class="right-text">
        <div style="line-height: 30px">
          å½“前班次:{{ produceStatisData.currentTeamName }}
        </div>
        <!-- style="padding-left:25px" -->
        <div>班长:{{ produceStatisData.currentTeamLeader }}</div>
      </div>
    </div>
    <div class="main">
      <div class="main-top">
        <div class="width_left">
          <div class="box1">
            <div class="echarts-box border_left1">
              <div class="echarts-title">统计图1</div>
              <EquipmentRunStatus2 :equipmentStatusData="equipmentStatusData" />
            </div>
          </div>
          <br>
          <br> <br>
          <div class="box1">
            <div class="echarts-box border_left1">
              <div class="echarts-title">统计图2</div>
              <EquipmentRunStatus3 :equipmentStatusData="equipmentStatusData" />
            </div>
          </div>
        </div>

        <div class="width_middle">
          <img src="~@/assets/images/prodline_all.png" class="prodline" />

          <img
            v-for="item in equipmentStatusData"
            :key="item.id"
            :src="
              require(`@/assets/images/${imageColor[item.workingProcedure]}/${
                item.workingProcedure
              }.png`)
            "
            :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"
          />
        </div>

        <div class="width_right">
          <div class="box1">
            <div class="echarts-box border_left1">
              <div class="echarts-title">统计图3</div>
              <EquipmentRunStatus4 :equipmentStatusData="equipmentStatusData" />
            </div>
          </div>
          <br>
          <br> <br>
          <div class="box1">
            <div class="echarts-box border_left1">
              <div class="echarts-title">统计图4</div>
              <EquipmentRunStatus5 :equipmentStatusData="equipmentStatusData" />
            </div>
          </div>
        </div>
      </div>

      <!-- <button @click="flag=true">data改变</button> -->
      <div class="main-bottom">
        <div class="echarts-box border_left1">
          <div class="echarts-title">设备运行状态统计图</div>
          <EquipmentRunStatus :equipmentStatusData="equipmentStatusData" />
        </div>
        <div class="echarts-box border_left2">
          <div class="echarts-title">产线健康能力图</div>
          <ProdlineHealthy />
        </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;
            "
          >
            {{ qualityData.qualityType }}
          </div>
          <div>
            <div
              style="
                margin: 0 0.13rem;
                height: 0.13rem;
                background-color: #f14158;
              "
            ></div>
            <div
              style="
                margin: 0 0.13rem;
                height: 0.13rem;
                background-color: #a7cf29;
              "
            ></div>
          </div>
          <QualityDataTrendse :qualityData="qualityData.list" />
          <div>
            <div
              style="
                margin: 0 0.13rem;
                height: 0.13rem;
                background-color: #a7cf29;
              "
            ></div>
            <div
              style="
                margin: 0 0.13rem;
                height: 0.13rem;
                background-color: #f14158;
              "
            ></div>
          </div>
        </div>
        <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
            >
            {{ produceStatisData.currentShiftPlanNum }}
          </div>
          <div class="pie-label-right">
            {{ produceStatisData.currentMonthProduceNum }}
            <span
              v-if="
                produceStatisData.currentMonthPlanNum ||
                produceStatisData.currentMonthPlanNum == 0
              "
              >/</span
            >
            {{ produceStatisData.currentMonthPlanNum }}
          </div>
        </div>
        <div class="echarts-box border_right2">
          <div class="echarts-title">生产完成趋势</div>
          <ProductionCompletionTrend
            :produceCompletionData="produceCompletionData"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import OperationalAvailability from "./OperationalAvailability.vue";
// import EquipmentStatus from "./EquipmentStatus.vue";
// import ProductionCapacity from "./ProductionCapacity.vue";
import EquipmentRunStatus from "./EquipmentRunStatus.vue";
import EquipmentRunStatus2 from "./EquipmentRunStatus2.vue";
import EquipmentRunStatus3 from "./EquipmentRunStatus3.vue";
import EquipmentRunStatus4 from "./EquipmentRunStatus4.vue";
import EquipmentRunStatus5 from "./EquipmentRunStatus5.vue";

import ProdlineHealthy from "./ProdlineHealthy.vue";
import ProductionCompletionTrend from "./ProductionCompletionTrend.vue";
import ProductionStatistics from "./ProductionStatistics.vue";
import QualityDataTrendse from "./QualityDataTrends.vue";
import moment from "moment";

import {
  GetEquipmentCurrentState,
  getQualityData,
  getLargeScreenFrequency,
  getProduceCompletionStatus,
  getCurrentProduceInfo,
} from "@/api/common";

export default {
  name: "MainContentZg",
  components: {
    EquipmentRunStatus,
    EquipmentRunStatus2,
    EquipmentRunStatus3,
    EquipmentRunStatus4,
    EquipmentRunStatus5,
    ProductionStatistics,
    ProductionCompletionTrend,
    QualityDataTrendse,
    ProdlineHealthy,
  },
  data() {
    return {
      dataTimer: null,
      dateTimer: null,
      time: 5000,
      nowTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
      // flag: false,
      option: {},
      myChart: {},
      EquipmentEnums: [
        {
          code: 1,
          color: "green",
        },
        {
          code: 2,
          color: "white",
        },
        {
          code: 3,
          color: "blue",
        },
        {
          code: 4,
          color: "yellow",
        },
        {
          code: 5,
          color: "red",
        },
      ],
      imageColor: {
        OP05: "blue",
        OP10: "blue",
        OP20: "blue",
        OP30: "blue",
        OP35: "blue",
        OP40: "blue",
        OP50: "blue",
        OP60: "blue",
        OP70: "blue",
        OP80: "blue",
        unit: "blue",
      },
      equipmentStatusData: [
        { workingProcedure: "OP05" },
        { workingProcedure: "OP10" },
        { workingProcedure: "OP20" },
        { workingProcedure: "OP30" },
        { workingProcedure: "OP35" },
        { workingProcedure: "OP40" },
        { workingProcedure: "OP50" },
        { workingProcedure: "OP60" },
        { workingProcedure: "OP70" },
        { workingProcedure: "OP80" },
        { workingProcedure: "unit" },
      ],
      qualityData: [],
      produceCompletionData: [],
      produceStatisData: {},
    };
  },
  watch: {},
  created() {
    this.getLargeScreenFrequency();
    this.getEquipmentCurrentState();
    this.getQualityData();
    this.getProduceCompletionStatus();
    this.getCurrentProduceInfo();
    this.dataTimer = setInterval(this.timerHandler, this.time);
    this.dateTimer = setInterval(() => {
      this.nowTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
    }, 1000);
  },
  methods: {
    // å®šæ—¶å™¨å‡½æ•°
    timerHandler() {
      this.getEquipmentCurrentState();
      this.getQualityData();
      this.getProduceCompletionStatus();
      this.getCurrentProduceInfo();
    },
    // èŽ·å–设备状态
    async getEquipmentCurrentState() {
      try {
        let { data } = await GetEquipmentCurrentState();
        let equipmentData = [];
        data.forEach((item) => {
          const res = this.equipmentStatusData.filter(
            (obj) => obj.workingProcedure == item.workingProcedure
          );
          if (res.length > 0) {
            equipmentData.push(item);
          }
        });
        this.equipmentStatusData = equipmentData;
        this.getImageColor(data);
      } catch (error) {
        console.log(error);
      }
    },
    // æ ¹æ®è®¾å¤‡çŠ¶æ€è®¾ç½®è®¾å¤‡é¢œè‰²
    getImageColor(data) {
      data.forEach((item) => {
        let result = this.EquipmentEnums.filter(
          (obj) => obj.code == item.equipmentCurrentState
        );
        // console.log(item.equipmentCurrentState);
        if (result.length > 0) {
          this.imageColor[item.workingProcedure] = result[0].color;
        }
      });
      // console.log(this.imageColor, "getImageColor");
    },
    // èŽ·å–质量数据
    async getQualityData() {
      let { qualityData } = this;
      try {
        let { data } = await getQualityData({
          qualityType: qualityData.qualityType,
        });
        this.qualityData = data;
        // console.log(this.qualityData);
      } catch (error) {
        console.log(error);
      }
    },
    // èŽ·å–生产完成趋势数据
    async getProduceCompletionStatus() {
      try {
        let { data } = await getProduceCompletionStatus();
        this.produceCompletionData = data;
      } catch (error) {
        console.log(error);
      }
    },
    // èŽ·å–产量统计数据
    async getCurrentProduceInfo() {
      try {
        let { data } = await getCurrentProduceInfo();
        this.produceStatisData = data;
        // console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
    // èŽ·å–定时器时间
    async getLargeScreenFrequency() {
      try {
        let { data } = await getLargeScreenFrequency();
        this.time = data;
      } catch (error) {
        console.log(error);
      }
    },
  },
  // beforeDestroy(){
  //   clearInterval(this.dataTimer)
  //   clearInterval(this.dateTimer)
  // }
};
</script>

<style lang="scss" scoped>
$allHeight: 13.5rem;
$titleHeight: 2rem;

.container {
  width: 100%;
  height: auto;

  .header {
    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 {
      color: #41c7de;
      font-size: 0.38rem;
      font-weight: 700;
      position: absolute;
      top: 0.31rem;
      left: 50%;
      transform: translate(-50%);
      letter-spacing: 8px;
    }

    .left-text {
      font-size: 0.19rem;
      color: #fff;
      position: absolute;
      top: 1.15rem;
      left: 5rem;
    }

    .right-text {
      font-size: 0.19rem;
      text-align: right;
      color: #fff;
      position: absolute;
      top: 1.15rem;
      right: 5.3rem;
    }
  }

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

    .main-top {
      width: 100%;
      margin: 0 auto;
      height: 7.42rem;
      display: flex;
      margin-bottom: 0.29rem;

      .width_left {
        width: 18%;
        height: 7.42rem;
      }
      .width_right {
        width: 18%;
        height: 7.42rem;
      }

      .width_middle {
        width: 60%;
        margin: 0 auto;
        height: 7.42rem;
        // background-color: #fff;
        background-image: url("~@/assets/images/border_prodline.png");
        background-size: 100% 100%;
        // background-size: 101.1% 101.8%;
        // background-position: -0.13rem -0.13rem;
        position: relative;
        .prodline {
          width: 95%;
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        .prodline_op35 {
          position: absolute;
          top: 2.82rem;
          left: 2.6rem;
          width: 1.8%;
        }

        .euip {
          // width: 95%;
          // position: absolute;
          // top: -1.59rem;
          // left: 1.28rem;

          margin-top: 1.9rem;
    width: 100%;
    position: absolute;
    margin-left: -.2rem;

        }

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

        .OP10,
        .OP40 {
          top: -1.48rem;
          left: 0.5rem;
        }

        .OP20 {
          top: -1.8rem;
          left: 0.3rem;
        } 

        .OP30 {
          top: -2.05rem;
          left: 0.3rem;
        }

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

        .OP50 {
          top: -1.69rem;
          left: 0.5rem;
        }

        .OP60 {
          top: -1.65rem;
          left: .7rem;
        }

        .OP70 {
          top: -1.52rem;
          left: 0.9rem;
        }

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

      // img:nth-child(2) {
      //   width:100%;
      //   top: -2.05rem;
      //   left: 1.07rem;
      // }
    }

    .main-bottom,
    .main-top {
      height: auto;
      display: flex;
      // background-color: skyblue;

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

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

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

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

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

      .echarts-box {
        height: auto;
        border: 2px solid #3a45de;

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

      .echarts-box:nth-child(4) {
        position: relative;

        .pie-label-left {
          position: absolute;
          bottom: 0.1rem;
          left: 0.7rem;
          color: #fff;
          font-size: 0.2rem;
          font-weight: 300;
        }

        .pie-label-right {
          position: absolute;
          bottom: 0.1rem;
          right: 0.7rem;
          color: #fff;
          font-size: 0.2rem;
          font-weight: 300;
        }
      }

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

      .bgi {
        background-image: url("~@/assets/bg1.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
  }

  .box1{
    .echarts-box{
      width: 100% !important;
    }
    .border_left1{
      margin-right: 0 !important;
    }
  }

}
</style>

 yiqi_screen/src/components/EquipmentRunStatus2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,71 @@
<template>
  <div class="box-container" id="echarts10"></div>
</template>

<script>
let timer = null;
export default {
  data() {
    return {
      option: {},
      myChart: {},
      currentIndex: -1,
      lineData: [],  // æ·»åŠ ç”¨äºŽå­˜å‚¨æ›²çº¿å›¾æ•°æ®çš„属性
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts10"));
    
    // ç”Ÿæˆå‡æ•°æ®
    this.generateFakeData();

    this.option = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: this.lineData.map(item => item.time) // ä½¿ç”¨å‡æ•°æ®ä¸­çš„时间作为 x è½´
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '状态数据',
        type: 'line',
        data: this.lineData.map(item => item.value), // ä½¿ç”¨å‡æ•°æ®ä¸­çš„值作为 y è½´
        smooth: true // å¹³æ»‘曲线
      }]
    };

    this.myChart.setOption(this.option);
    const that = this;
    window.addEventListener("resize", () => {
      that.myChart.resize();
    });
  },
  methods: {
    generateFakeData() {
      // ç”Ÿæˆ 10 ä¸ªå‡æ•°æ®ç‚¹
      const fakeData = [];
      for (let i = 0; i < 10; i++) {
        fakeData.push({
          time: `时间${i + 1}`,
          value: Math.floor(Math.random() * 100) + 1  // éšæœºç”Ÿæˆ 1-100 çš„值
        });
      }
      this.lineData = fakeData;
    },
  },
};
</script>

<style>
#echarts10 {
  width: 3.84rem;
}
.box-container{
  margin: 0 auto;
  display: block;
}
</style>

 yiqi_screen/src/components/EquipmentRunStatus3.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,67 @@
<template>
  <div class="box-container" id="echarts30"></div>
</template>

<script>
let timer = null;
export default {
  data() {
    return {
      option: {},
      myChart: {},
      currentIndex: -1,
      lineData: [],  // æ·»åŠ ç”¨äºŽå­˜å‚¨æ›²çº¿å›¾æ•°æ®çš„属性
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts30"));
    
    // ç”Ÿæˆå‡æ•°æ®
    this.generateFakeData();

    this.option = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: this.lineData.map(item => item.time) // ä½¿ç”¨å‡æ•°æ®ä¸­çš„数据作为 x è½´
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '状态数据',
        type: 'line',
        data: this.lineData.map(item => item.value), // ä½¿ç”¨å‡æ•°æ®ä¸­çš„值作为 y è½´
        smooth: true // å¹³æ»‘曲线
      }]
    };

    this.myChart.setOption(this.option);
    const that = this;
    window.addEventListener("resize", () => {
      that.myChart.resize();
    });
  },
  methods: {
    generateFakeData() {
      // ç”Ÿæˆ 10 ä¸ªå‡æ•°æ®ç‚¹
      const fakeData = [];
      for (let i = 0; i < 10; i++) {
        fakeData.push({
          time: `数据${i + 1}`,
          value: Math.floor(Math.random() * 100) + 1  // éšæœºç”Ÿæˆ 1-100 çš„值
        });
      }
      this.lineData = fakeData;
    },
  },
};
</script>

<style>
#echarts30 {
  width: 3.84rem;
}
</style>

 yiqi_screen/src/components/EquipmentRunStatus4.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,71 @@
<template>
  <div class="box-container" id="echarts40"></div>
</template>

<script>
let timer = null;
export default {
  data() {
    return {
      option: {},
      myChart: {},
      currentIndex: -1,
      lineData: [],  // æ·»åŠ ç”¨äºŽå­˜å‚¨é¥¼å›¾æ•°æ®çš„属性
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts40"));
    
    // ç”Ÿæˆå‡æ•°æ®
    this.generateFakeData();

    this.option = {
      tooltip: {
        trigger: 'item'  // ä¿®æ”¹ä¸º 'item' ä»¥é€‚应饼图
      },
      series: [{
        name: '状态数据',
        type: 'pie',  // ä¿®æ”¹ä¸º 'pie'
        radius: '50%',
        data: this.lineData.map(item => ({
          name: item.time,  // é¥¼å›¾ä¸­çš„每一项名称
          value: item.value  // å¯¹åº”的数值
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    };

    this.myChart.setOption(this.option);
    const that = this;
    window.addEventListener("resize", () => {
      that.myChart.resize();
    });
  },
  methods: {
    generateFakeData() {
  // ç”Ÿæˆ 4 ä¸ªå‡æ•°æ®ç‚¹
  const fakeData = [];
  for (let i = 0; i < 4; i++) {
    fakeData.push({
      time: `数据${i + 1}`,
      value: Math.floor(Math.random() * 100) + 1  // éšæœºç”Ÿæˆ 1-100 çš„值
    });
  }
  this.lineData = fakeData;
},

  },
};
</script>

<style>
#echarts40 {
  width: 3.84rem;
}
</style>

 yiqi_screen/src/components/EquipmentRunStatus5.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,67 @@
<template>
  <div class="box-container" id="echarts50"></div>
</template>

<script>
let timer = null;
export default {
  data() {
    return {
      option: {},
      myChart: {},
      currentIndex: -1,
      lineData: [],  // æ·»åŠ ç”¨äºŽå­˜å‚¨æ›²çº¿å›¾æ•°æ®çš„属性
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts50"));
    
    // ç”Ÿæˆå‡æ•°æ®
    this.generateFakeData();

    this.option = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: this.lineData.map(item => item.time) // ä½¿ç”¨å‡æ•°æ®ä¸­çš„数据作为 x è½´
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '状态数据',
        type: 'bar',
        data: this.lineData.map(item => item.value), // ä½¿ç”¨å‡æ•°æ®ä¸­çš„值作为 y è½´
        smooth: true // å¹³æ»‘曲线
      }]
    };

    this.myChart.setOption(this.option);
    const that = this;
    window.addEventListener("resize", () => {
      that.myChart.resize();
    });
  },
  methods: {
    generateFakeData() {
      // ç”Ÿæˆ 10 ä¸ªå‡æ•°æ®ç‚¹
      const fakeData = [];
      for (let i = 0; i < 10; i++) {
        fakeData.push({
          time: `数据${i + 1}`,
          value: Math.floor(Math.random() * 100) + 1  // éšæœºç”Ÿæˆ 1-100 çš„值
        });
      }
      this.lineData = fakeData;
    },
  },
};
</script>

<style>
#echarts50 {
  width: 3.84rem;
}
</style>

 yiqi_screen/src/components/ProductionCompletionTrend.vue

@@ -1,12 +1,16 @@
<template>
  <div>
    <div class="box-container" id="echarts5" style="width: 100%;height:230px"></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'
import { zhu } from "./img/t.js";

export default {
  props: {
@@ -20,7 +24,6 @@
      option: {},
      myChart: {},
      timechartes: null,

      myChart2: null,
      textureImg: null,
      // img,
@@ -33,15 +36,30 @@
        yData2 = [],
        yData3 = [];
      val.forEach((item) => {
        console.log('ceshi', item.completionNum);
        console.log("ceshi", item.completionNum);
        xData.push(item.month);
        yData1.push({
          value: item.completionNum,
          // value: item.completionNum,
          value: 100,
          symbolRepeat: false,
        }); //实际
        // yData1.push(item.completionNum); //实际
        yData2.push(item.planCompletionRate); //planCompletionRate
        yData3.push(item.planCompletionNum); //计划
        var num = 0; //已完成数 / è®¡åˆ’完成数
        if (item.completionNum > 0) {
          if (item.planCompletionNum > item.completionNum) {
            // 5/10
            num = item.completionNum / item.planCompletionNum;
          } else if (item.planCompletionNum <= 0) {
            // 10/0
            num = 100;
          } else if (item.completionNum >= item.planCompletionNum) {
            // 10/5
            num = 100;
          }
        }
        yData2.push(num.toFixed(2)); //planCompletionRate
        // yData2.push(item.planCompletionRate); //planCompletionRate
        // yData3.push(item.planCompletionNum); //计划
      });
      this.$set(this.option.xAxis, "data", xData);
      this.$set(this.option.series[0], "data", yData1);
@@ -58,7 +76,7 @@
        trigger: "axis",
        formatter:
          "{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,#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,#fff,#eee);border-radius:50%"></a> {a1}: {c1}%<br />', // æ·»åŠ ç”Ÿäº§è®¡åˆ’数提示
        backgroundColor: "rgba(0,0,0,0.7)",
@@ -87,7 +105,6 @@
        axisLine: {
          lineStyle: {
            color: "#326e92",
          
          },
        },
      },
@@ -105,7 +122,7 @@
            show: true,
            margin: 5,
            color: "#326e92",
            // formatter: '{value}%'
            formatter: "{value}%",
          },
          alignTicks: false,
          nameTextStyle: {
@@ -148,9 +165,8 @@
          name: "生产完成数",
          type: "pictorialBar",
          // type: "bar",
          symbol: 'image://'+zhu,
          symbol: "image://" + zhu,
           data: [],
         
          // yAxisIndex: 0,
          // color: {
          //   type: "linear",
@@ -174,10 +190,11 @@
          name: "生产完成率",
          type: "line",
          data: [],
          z: 5,
          showSymbol: true,
          yAxisIndex: 1,
          smooth: true, // ä½¿æŠ˜çº¿å›¾å¹³æ»‘
          color: "rgba(255,205,86,0.85)",
          color: "#ff9600",
          lineStyle: {
            width: 1,
          },
@@ -216,7 +233,6 @@
    // window.addEventListener("resize",  ()=> {
    //   this.myChart.resize();
    // });

    // this.init()
  },
  methods: {
@@ -270,7 +286,7 @@
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      var rocket =''
      var rocket = "";
        
      option = {
        legend: {
@@ -286,7 +302,7 @@
          {
            type: "pictorialBar",
            name: "tu1",
            symbol: 'image://'+zhu,
            symbol: "image://" + zhu,
            data: [
              {
                value: 60,
@@ -310,7 +326,6 @@
      };
      myChart.setOption(option);
    },
    
  },
};
</script>

 yiqi_screen/src/components/ProductionStatistics copy 2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,458 @@
<template>
  <!-- æœ¬ç­/本月产量统计 -->
  <div class="box-container box4" id="echarts4"></div>
</template>

<script>
let timer = null;
import * as echarts from "echarts";
export default {
  props: {
    produceStatisData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      option: {},
      myChart: {},
      currentIndex: -1,
      data1: [],
      data2: [{ actualData: 2782, planData: 11128 }],
    };
  },
  // watch: {
  //   produceStatisData(val) {
  //     // æµ‹è¯•ç”¨ï¼š
  //     val.currentShiftProduceNum = 280;
  //     val.currentShiftPlanNum = 300;
  //     // å½“前班组实际生产数量 currentShiftProduceNum
  //     // å½“前班组计划生产数量 currentShiftPlanNum
  //     var num1 = val.currentShiftProduceNum; //实际生产数量
  //     var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //计划生产数量
  //     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,
  //       },
  //     ]);
  //     var num3 = val.currentMonthProduceNum;
  //     var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum;
  //     if (val.currentMonthPlanNum == 0) {
  //       //分母为0 æ˜¾ç¤º0%
  //       num3 = 0;
  //       num4 = 10;
  //     }
  //     this.$set(this.option.series[1], "data", [
  //       { value: num3 },
  //       { value: num4 },
  //     ]);

  //     this.myChart.setOption(this.option);
  //     this.hignLightPie();
  //   },
  // },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts4"));
    var value = 60;
    var value2 = 15;
    let data1 = [
      {
        value: value,
        name: "",
        itemStyle: {
          normal: {
            color: "#62fbf8",
          },
        },
      },
      {
        value: 100 - value,
        name: "",
        label: {
          normal: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            color: "rgba(0,0,0,0)",
          },
        },
      },
    ];

    let data2 = [
      {
        value: value2,
        name: "",
        itemStyle: {
          normal: {
            color: "rgb(105,206,195)",
          },
        },
      },
      {
        value: 100 - value2,
        name: "",
        label: {
          normal: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            color: "rgba(0,0,0,0)",
          },
        },
      },
    ];

    this.option = {
      color: ["#00f6fe", "rgba(5, 19, 96, 0.5)"],
      // æ’入背景图
      //    graphic: [
      //   {
      //     type: "image",
      //     id: "background1",
      //     left: "13px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     top: "61px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [0, 0],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // ç¬¬ä¸€ä¸ªçŽ¯å½¢å›¾çš„背景图片路径
      //       width: 100,
      //       height: 100,
      //     },
      //   },
      //   {
      //     type: "image",
      //     id: "background2",
      //     left: "131px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     top: "61px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [0, 0],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // ç¬¬ä¸€ä¸ªçŽ¯å½¢å›¾çš„背景图片路径
      //       width: 100,
      //       height: 100,
      //     },
      //   },
      // ],
      series: [
        // å·¦ä¾§
        {
          name: "å·¦-数据",
          type: "pie",
          // radius: ['65%', '75%'],
          radius: ["29%", "36%"], //环变细
          center: ["25%", "49%"],
          silent: true,
          // clockwise: false,
          startAngle: 90,
          z: 1,
          zlevel: 0,
          label: {
            normal: {
              position: "center",
            },
          },
          data: data1,
        },
        {
          name: "å·¦-中间渐变",
          type: "pie",
          startAngle: 90,
          z: 20,
          zlevel: 20,
          radius: "28%",
          hoverAnimation: false,
          center: ["25%", "49%"],

          // zlevel: 2,
          itemStyle: {
            normal: {
              labelLine: {
                show: false,
              },
              color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                {
                  offset: 1,
                  color: "rgba(55,70,130, 1)",
                },
                {
                  offset: 0,
                  color: "rgba(55,70,130, 0)",
                },
              ]),
              shadowBlur: 10,
              // shadowColor: 'rgba(55,70,130, 1)'
            },
          },
          data: [
            {
              value: 100,
            },
          ],
        },
        {
          name: "å·¦-刻度间隔",
          z: 2,
          // zlevel: 1,
          type: "gauge",
          radius: "57%",
          center: ["25%", "49%"],
          startAngle: 20,
          endAngle: -360,
          splitNumber: 10,
          hoverAnimation: true,
          axisTick: {
            show: true,
            splitNumber: 1,
            length: 14, //刻度长度
            // Distance: 40, //刻度间隔距离
            lineStyle: {
              width: 5,
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(8, 52, 106, 0.039)", // 0% å¤„的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(8, 52, 106, 0.239)", // 100% å¤„的颜色
                  },
                ],
                false
              ),
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              opacity: 0,
            },
          },
          detail: {
            show: false,
          },
          data: [100],
        },

        // å³ä¾§
        {
          name: "右-数据",
          type: "pie",
          // radius: ['65%', '75%'],
          radius: ["29%", "36%"], //环变细
          center: ["74%", "49%"],
          silent: true,
          // clockwise: false,
          startAngle: 90,
          z: 1,
          zlevel: 0,
          label: {
            normal: {
              position: "center",
            },
          },
          data: data2,
        },
        {
          name: "右-中间渐变",
          type: "pie",
          startAngle: 90,
          radius: "28%",
          hoverAnimation: false,
          center: ["74%", "49%"],
          itemStyle: {
            normal: {
              labelLine: {
                show: false,
              },
              color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                {
                  offset: 1,
                  color: "rgba(55,70,130, 1)",
                },
                {
                  offset: 0,
                  color: "rgba(55,70,130, 0)",
                },
              ]),
              shadowBlur: 10,
              // shadowColor: 'rgba(55,70,130, 1)'
            },
          },
          data: [
            {
              value: 100,
            },
          ],
        },
        {
          name: "右-刻度间隔",
          z: 2,
          type: "gauge",
          radius: "45%",
          center: ["74%", "49%"],
          startAngle: 90,
          endAngle: -360,
          splitNumber: 10,
          hoverAnimation: true,
          axisTick: {
            show: true,
            splitNumber: 1,
            length: 20,
            lineStyle: {
              width: 10,
              color: "#1183a7",
              shadowColor: "rgb(4,31,62, 0.5)",
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              opacity: 0,
            },
          },
          detail: {
            show: false,
          },
          data: [100],
        },
      ],
    };
    this.myChart.setOption(this.option);
    const that = this;
    window.addEventListener("resize", () => {
      that.myChart.resize();
    });
    // this.getData();
    this.defineEvent();
    // this.selectPie();
    this.hignLightPie();
    // timer = setInterval(this.selectPie, 1500);
  },
  methods: {
    // getData() {
    //   this.data1 = [{ actualData: 144, planData: 288 }];
    //   this.$set(this.option.series[0], "data", [
    //     { value: this.data1[0].actualData },
    //     { value: this.data1[0].planData - this.data1[0].actualData },
    //   ]);
    //   this.$set(this.option.series[1], "data", [
    //     { value: this.data2[0].actualData },
    //     { value: this.data2[0].planData - this.data2[0].actualData },
    //   ]);
    //   console.log(this.option.series[0].data);
    //   this.myChart.setOption(this.option);
    // },
    selectPie() {
      let dataLen = this.option.series[0].data.length;
      this.currentIndex = (this.currentIndex + 1) % dataLen;
      this.hignLightPie();
    },
    // è½®æ’­ç‚¹äº®é¥¼å›¾
    hignLightPie() {
      const dataPie = this.option.series[0].data;
      // ç†„灭所有扇形区域
      for (var index in dataPie) {
        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index,
        });

        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 1,
          dataIndex: index,
        });
      }

      // ç‚¹äº®å½“前扇形区域
      this.myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });

      this.myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 1,
        dataIndex: 0,
      });
    },

    // é¼ æ ‡è§¦æ‘¸è½®æ’­æ‚¬åœäº‹ä»¶
    defineEvent() {
      // é¼ æ ‡ç§»å‡ºè½®æ’­ç»§ç»­
      this.myChart.on("mouseout", () => {
        if (timer) clearInterval(timer);
        timer = setInterval(this.selectPie, 1500);
      });

      // é¼ æ ‡è¿›å…¥è½®æ’­æ‚¬åœ
      this.myChart.on("mouseover", (params) => {
        clearInterval(timer);
        this.currentIndex = params.dataIndex;
        this.hignLightPie();
      });

      // é¼ æ ‡ç§»å…¥legend轮播悬停
      this.myChart.getZr().on("mouseover", (event) => {
        const legendDataIndex = event.topTarget.parent.__legendDataIndex; // æ¯ä¸ªlegend的index
        clearInterval(timer);
        this.currentIndex = legendDataIndex;
        this.hignLightPie();
      });

      // é¼ æ ‡ç§»å‡ºlegend轮播继续
      this.myChart.getZr().on("mouseout", () => {
        if (timer) clearInterval(timer);
        timer = setInterval(this.selectPie, 1500);
      });
    },
  },
};
</script>

<style>
#echarts4 {
  transform: scaleY(2);
}
</style>

 yiqi_screen/src/components/ProductionStatistics copy.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,277 @@
<template>
  <!-- æœ¬ç­/本月产量统计 -->
  <div class="box-container box4" id="echarts4"></div>
</template>

<script>
let timer = null;
export default {
  props: {
    produceStatisData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      option: {},
      myChart: {},
      currentIndex: -1,
      data1: [],
      data2: [{ actualData: 2782, planData: 11128 }],
    };
  },
  watch: {
    produceStatisData(val) {
      // æµ‹è¯•ç”¨ï¼š
      val.currentShiftProduceNum = 280;
      val.currentShiftPlanNum = 300;
      // å½“前班组实际生产数量 currentShiftProduceNum
      // å½“前班组计划生产数量 currentShiftPlanNum
      var num1 = val.currentShiftProduceNum; //实际生产数量
      var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //计划生产数量
      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,
        },
      ]);
      var num3 = val.currentMonthProduceNum;
      var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum;
      if (val.currentMonthPlanNum == 0) {
        //分母为0 æ˜¾ç¤º0%
        num3 = 0;
        num4 = 10;
      }
      this.$set(this.option.series[1], "data", [
        { value: num3 },
        { value: num4 },
      ]);

      this.myChart.setOption(this.option);
      this.hignLightPie();
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts4"));
    this.option = {
      color: ["#00f6fe", "transparent"],
      // æ’入背景图
      //    graphic: [
      //   {
      //     type: "image",
      //     id: "background1",
      //     left: "13px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     top: "61px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [0, 0],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // ç¬¬ä¸€ä¸ªçŽ¯å½¢å›¾çš„背景图片路径
      //       width: 100,
      //       height: 100,
      //     },
      //   },
      //   {
      //     type: "image",
      //     id: "background2",
      //     left: "131px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     top: "61px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [0, 0],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // ç¬¬ä¸€ä¸ªçŽ¯å½¢å›¾çš„背景图片路径
      //       width: 100,
      //       height: 100,
      //     },
      //   },
      // ],
      series: [
        {
          name: "Access From",
          type: "pie",
          // padAngle: 5, //环与环之间的间隙
          radius: ["29%", "36%"], //环变细
          center: ["25%", "49%"],
          // avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
            formatter: function (params) {
              return params.percent < 1
                ? params.percent + "%"
                : Math.floor(params.percent) + "%"; // å››èˆäº”入到整数
            },
            color: "#fff",
            fontSize: 12,
          },
          emphasis: {
            //饼图中间的字体大小
            scale: false,
            label: {
              show: true,
              fontSize: 22,
              color: "#19d8d0",
              fontWeight: "normal",
            },
          },
          labelLine: {
            show: false,
          },
          itemStyle: {
            borderRadius: 3,
            borderColor: "transparent",
            borderWidth: 10,
          },
          data: [],
        },
        {
          name: "Access From",
          type: "pie",
          // padAngle: 5, //环与环之间的间隙
          // radius: ["25%", "40%"],
          radius: ["29%", "36%"], //环变细
          center: ["74%", "49%"],
          // avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
            formatter: function (params) {
              return params.percent < 1
                ? params.percent + "%"
                : Math.floor(params.percent) + "%"; // å››èˆäº”入到整数
            },
            color: "#fff",
            fontSize: 12,
          },
          itemStyle: {
            borderRadius: 3,
            borderColor: "transparent",
            borderWidth: 10,
          },
          emphasis: {
            scale: false,
            label: {
              show: true,
              fontSize: 22,
              color: "#19d8d0",
              fontWeight: "normal",
            },
          },
          labelLine: {
            show: false,
          },
          data: [],
        },
      ],
    };
    this.myChart.setOption(this.option);
    const that = this;
    window.addEventListener("resize", () => {
      that.myChart.resize();
    });
    // this.getData();
    this.defineEvent();
    // this.selectPie();
    this.hignLightPie();
    // timer = setInterval(this.selectPie, 1500);
  },
  methods: {
    // getData() {
    //   this.data1 = [{ actualData: 144, planData: 288 }];
    //   this.$set(this.option.series[0], "data", [
    //     { value: this.data1[0].actualData },
    //     { value: this.data1[0].planData - this.data1[0].actualData },
    //   ]);
    //   this.$set(this.option.series[1], "data", [
    //     { value: this.data2[0].actualData },
    //     { value: this.data2[0].planData - this.data2[0].actualData },
    //   ]);
    //   console.log(this.option.series[0].data);
    //   this.myChart.setOption(this.option);
    // },
    selectPie() {
      let dataLen = this.option.series[0].data.length;
      this.currentIndex = (this.currentIndex + 1) % dataLen;
      this.hignLightPie();
    },
    // è½®æ’­ç‚¹äº®é¥¼å›¾
    hignLightPie() {
      const dataPie = this.option.series[0].data;
      // ç†„灭所有扇形区域
      for (var index in dataPie) {
        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index,
        });

        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 1,
          dataIndex: index,
        });
      }

      // ç‚¹äº®å½“前扇形区域
      this.myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });

      this.myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 1,
        dataIndex: 0,
      });
    },

    // é¼ æ ‡è§¦æ‘¸è½®æ’­æ‚¬åœäº‹ä»¶
    defineEvent() {
      // é¼ æ ‡ç§»å‡ºè½®æ’­ç»§ç»­
      this.myChart.on("mouseout", () => {
        if (timer) clearInterval(timer);
        timer = setInterval(this.selectPie, 1500);
      });

      // é¼ æ ‡è¿›å…¥è½®æ’­æ‚¬åœ
      this.myChart.on("mouseover", (params) => {
        clearInterval(timer);
        this.currentIndex = params.dataIndex;
        this.hignLightPie();
      });

      // é¼ æ ‡ç§»å…¥legend轮播悬停
      this.myChart.getZr().on("mouseover", (event) => {
        const legendDataIndex = event.topTarget.parent.__legendDataIndex; // æ¯ä¸ªlegend的index
        clearInterval(timer);
        this.currentIndex = legendDataIndex;
        this.hignLightPie();
      });

      // é¼ æ ‡ç§»å‡ºlegend轮播继续
      this.myChart.getZr().on("mouseout", () => {
        if (timer) clearInterval(timer);
        timer = setInterval(this.selectPie, 1500);
      });
    },
  },
};
</script>

<style>
#echarts4 {
  transform: scaleY(2);
}
</style>

 yiqi_screen/src/components/ProductionStatistics copy1113.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,325 @@
<template>
  <!-- æœ¬ç­/本月产量统计 -->
  <div class="box-container box4" id="echarts4"></div>
</template>

<script>
let timer = null;
import * as echarts from "echarts";
export default {
  props: {
    produceStatisData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      option: {},
      myChart: {},
      currentIndex: -1,
      data1: [],
      data2: [{ actualData: 2782, planData: 11128 }],
    };
  },
  // watch: {
  //   produceStatisData(val) {
  //     // æµ‹è¯•ç”¨ï¼š
  //     val.currentShiftProduceNum = 280;
  //     val.currentShiftPlanNum = 300;
  //     // å½“前班组实际生产数量 currentShiftProduceNum
  //     // å½“前班组计划生产数量 currentShiftPlanNum
  //     var num1 = val.currentShiftProduceNum; //实际生产数量
  //     var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //计划生产数量
  //     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,
  //       },
  //     ]);
  //     var num3 = val.currentMonthProduceNum;
  //     var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum;
  //     if (val.currentMonthPlanNum == 0) {
  //       //分母为0 æ˜¾ç¤º0%
  //       num3 = 0;
  //       num4 = 10;
  //     }
  //     this.$set(this.option.series[1], "data", [
  //       { value: num3 },
  //       { value: num4 },
  //     ]);

  //     this.myChart.setOption(this.option);
  //     this.hignLightPie();
  //   },
  // },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts4"));
    var value = 60;
    var value2 = 15;
    let data1 = [
      {
        value: value,
        name: "",
        itemStyle: {
          normal: {
            color: "#62fbf8",
          },
        },
      },
      {
        value: 100 - value,
        name: "",
        label: {
          normal: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            color: "rgba(0,0,0,0)",
          },
        },
      },
    ];

    let data2 = [
      {
        value: value2,
        name: "",
        itemStyle: {
          normal: {
            color: "rgb(105,206,195)",
          },
        },
      },
      {
        value: 100 - value2,
        name: "",
        label: {
          normal: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            color: "rgba(0,0,0,0)",
          },
        },
      },
    ];

    this.option = {
      color: ["#00f6fe", "transparent"],
      series: [
        // å·¦ä¾§
        {
          name: "å·¦-中间渐变",
          type: "pie",
          startAngle: 90,
          radius: "38%",
          hoverAnimation: false,
          center: ["25%", "49%"],
          itemStyle: {
            normal: {
              labelLine: {
                show: false,
              },

              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.4,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(55,70,130, 0)", // 0% å¤„的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(55,70,130, 1)", // 100% å¤„的颜色
                  },
                ],
              },
              // color:'red',
              shadowBlur: 10,
              // shadowColor: 'rgba(55,70,130, 1)'
            },
          },
          data: [
            {
              value: 100,
            },
          ],
        },
        {
          name: "å·¦-数据",
          type: "pie",
          // radius: ['65%', '75%'],
          radius: ["29%", "36%"], //环变细
          center: ["25%", "49%"],
          silent: true,
          // clockwise: false,
          startAngle: 90,
          z: 1,
          zlevel: 1,
          label: {
            normal: {
              position: "center",
            },
          },
          data: data1,
        },

        {
          name: "å·¦-刻度间隔",
          z: 2,
          zlevel: 1,
          type: "gauge",
          radius: "55%",
          center: ["25%", "49%"],
          startAngle: 90,
          endAngle: -360,
          splitNumber: 10,
          hoverAnimation: true,
          axisTick: {
            show: true,
            splitNumber: 1,
            length: 15,
            lineStyle: {
              width: 5,
              color: "rgba(55,70,130, 0.1)",
              // shadowColor: "rgb(4,31,62, 0.5)",
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              opacity: 0,
            },
          },
          detail: {
            show: false,
          },
          data: [10],
        },
      ],
    };
    this.myChart.setOption(this.option);
    const that = this;
    window.addEventListener("resize", () => {
      that.myChart.resize();
    });
    // this.getData();
    this.defineEvent();
    // this.selectPie();
    this.hignLightPie();
    // timer = setInterval(this.selectPie, 1500);
  },
  methods: {
    // getData() {
    //   this.data1 = [{ actualData: 144, planData: 288 }];
    //   this.$set(this.option.series[0], "data", [
    //     { value: this.data1[0].actualData },
    //     { value: this.data1[0].planData - this.data1[0].actualData },
    //   ]);
    //   this.$set(this.option.series[1], "data", [
    //     { value: this.data2[0].actualData },
    //     { value: this.data2[0].planData - this.data2[0].actualData },
    //   ]);
    //   console.log(this.option.series[0].data);
    //   this.myChart.setOption(this.option);
    // },
    selectPie() {
      let dataLen = this.option.series[0].data.length;
      this.currentIndex = (this.currentIndex + 1) % dataLen;
      this.hignLightPie();
    },
    // è½®æ’­ç‚¹äº®é¥¼å›¾
    hignLightPie() {
      const dataPie = this.option.series[0].data;
      // ç†„灭所有扇形区域
      for (var index in dataPie) {
        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index,
        });

        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 1,
          dataIndex: index,
        });
      }

      // ç‚¹äº®å½“前扇形区域
      this.myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });

      this.myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 1,
        dataIndex: 0,
      });
    },

    // é¼ æ ‡è§¦æ‘¸è½®æ’­æ‚¬åœäº‹ä»¶
    defineEvent() {
      // é¼ æ ‡ç§»å‡ºè½®æ’­ç»§ç»­
      this.myChart.on("mouseout", () => {
        if (timer) clearInterval(timer);
        timer = setInterval(this.selectPie, 1500);
      });

      // é¼ æ ‡è¿›å…¥è½®æ’­æ‚¬åœ
      this.myChart.on("mouseover", (params) => {
        clearInterval(timer);
        this.currentIndex = params.dataIndex;
        this.hignLightPie();
      });

      // é¼ æ ‡ç§»å…¥legend轮播悬停
      this.myChart.getZr().on("mouseover", (event) => {
        const legendDataIndex = event.topTarget.parent.__legendDataIndex; // æ¯ä¸ªlegend的index
        clearInterval(timer);
        this.currentIndex = legendDataIndex;
        this.hignLightPie();
      });

      // é¼ æ ‡ç§»å‡ºlegend轮播继续
      this.myChart.getZr().on("mouseout", () => {
        if (timer) clearInterval(timer);
        timer = setInterval(this.selectPie, 1500);
      });
    },
  },
};
</script>

<style>
#echarts4 {
  /* transform: scaleY(2); */
}
</style>

 yiqi_screen/src/components/ProductionStatistics.vue

@@ -1,7 +1,6 @@
<template>
  <!-- æœ¬ç­/本月产量统计 -->
  <div class="box-container box4" id="echarts4"></div>
  
</template>

<script>
@@ -25,8 +24,9 @@
  watch: {
    produceStatisData(val) {
      // æµ‹è¯•ç”¨ï¼š
      val.currentShiftProduceNum = 300;
      val.currentShiftPlanNum = 300;
      // val.currentShiftProduceNum = 280;
      // val.currentShiftPlanNum = 300;

      // å½“前班组实际生产数量 currentShiftProduceNum
      // å½“前班组计划生产数量 currentShiftPlanNum
      var num1 = val.currentShiftProduceNum; //实际生产数量
@@ -36,15 +36,15 @@
        num1 = 0;
        num2 = 10;
      }


      
      this.$set(this.option.series[0], "data", [
        // { value: 1 },  //实际生产数量 1/ (9+1) = 10%
        // { value: 9 },
        { value: num1,
        {
          value: num1,
         }, //实际生产数量
        { value: num2 },
        {
          value: num2,
        },
      ]);
      var num3 = val.currentMonthProduceNum;
      var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum;
@@ -67,52 +67,51 @@
    this.option = {
      color: ["#00f6fe", "transparent"],
         // æ’入背景图
         graphic: [
        {
          type: "image",
          id: "background1",
          left: "11px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
          top: "59.5px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
          z: -10,
          bounding: "raw",
          origin: [0, 0],
          style: {
            image: require(`@/assets/images/quan.png`), // ç¬¬ä¸€ä¸ªçŽ¯å½¢å›¾çš„背景图片路径
            width: 100,
            height: 100,
            opacity: 1,
          },
        },
        {
          type: "image",
          id: "background2",
          left: "130px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
          top: "59.5px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
          z: -10,
          bounding: "raw",
          origin: [0, 0],
          style: {
            image: require(`@/assets/images/quan.png`), // ç¬¬ä¸€ä¸ªçŽ¯å½¢å›¾çš„背景图片路径
            width: 100,
            height: 100,
            opacity: 1,
          },
        },
      ],
      //    graphic: [
      //   {
      //     type: "image",
      //     id: "background1",
      //     left: "13px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     top: "61px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [0, 0],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // ç¬¬ä¸€ä¸ªçŽ¯å½¢å›¾çš„背景图片路径
      //       width: 100,
      //       height: 100,
      //     },
      //   },
      //   {
      //     type: "image",
      //     id: "background2",
      //     left: "131px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     top: "61px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [0, 0],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // ç¬¬ä¸€ä¸ªçŽ¯å½¢å›¾çš„背景图片路径
      //       width: 100,
      //       height: 100,
      //     },
      //   },
      // ],
      series: [
        {
          name: "Access From",
          type: "pie",
          // padAngle: 5, //环与环之间的间隙
          radius: ["30%", "37%"], //环变细
          center: ["26%", "47%"],
          silent: true,clockwise: true,
          radius: ["29%", "36%"], //环变细
          center: ["25%", "49%"],
          // avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
            formatter: function (params) {
              return Math.floor(params.percent) + '%'; // å››èˆäº”入到整数
              return params.percent < 1
                ? params.percent + "%"
                : Math.floor(params.percent) + "%"; // å››èˆäº”入到整数
            },
            color: "#fff",
            fontSize: 12,
@@ -126,7 +125,6 @@
              color: "#19d8d0",
              fontWeight: "normal",
            },
         
          },
          labelLine: {
            show: false,
@@ -143,14 +141,16 @@
          type: "pie",
          // padAngle: 5, //环与环之间的间隙
          // radius: ["25%", "40%"],
          radius: ["30%", "37%"], //环变细
          center: ["74%", "47%"],
          radius: ["29%", "36%"], //环变细
          center: ["74%", "49%"],
          // avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
            formatter: function (params) {
              return Math.floor(params.percent) + '%'; // å››èˆäº”入到整数
              return params.percent < 1
                ? params.percent + "%"
                : Math.floor(params.percent) + "%"; // å››èˆäº”入到整数
            },
            color: "#fff",
            fontSize: 12,
@@ -274,35 +274,5 @@
<style>
#echarts4 {
  transform: scaleY(2);
}

.box4::before{
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    content: "";
    width: 95px;
    height: 47px;
    z-index: -1;
    top: 86px;
    left: 13px;
    transform: scaleY(2);
    border: 1px solid #074d95;
    border-radius: 100%;
}

.box4::after{
  position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    content: "";
    width: 95px;
    height: 47px;
    z-index: -1;
    top: 86px;
    left: 132px;
    transform: scaleY(2);
    border: 1px solid #074d95;
    border-radius: 100%;
}
</style>

 yiqi_screen/src/components/ProductionStatistics1.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,303 @@
<template>
  <!-- æœ¬ç­/本月产量统计 -->
  <div class="box-container box4" id="echarts4"></div>
</template>

<script>
let timer = null;
export default {
  props: {
    produceStatisData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      option: {},
      myChart: {},
      currentIndex: -1,
      data1: [],
      data2: [{ actualData: 2782, planData: 11128 }],
    };
  },
  watch: {
    produceStatisData(val) {
      // æµ‹è¯•ç”¨ï¼š
      val.currentShiftProduceNum = 280;
      val.currentShiftPlanNum = 300;
      // å½“前班组实际生产数量 currentShiftProduceNum
      // å½“前班组计划生产数量 currentShiftPlanNum
      var num1 = val.currentShiftProduceNum; //实际生产数量
      var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //计划生产数量
      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,
      //   },
      // ]);
      var num3 = val.currentMonthProduceNum;
      var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum;
      if (val.currentMonthPlanNum == 0) {
        //分母为0 æ˜¾ç¤º0%
        num3 = 0;
        num4 = 10;
      }
      // this.$set(this.option.series[1], "data", [
      //   { value: num3 },
      //   { value: num4 },
      // ]);

      let value1 = 90.56;
      let data1 = [
        {
          value: value1,
          name: "",
          itemStyle: {
            normal: {
              color: {
                // å®Œæˆçš„圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: "#0975af",
                  },
                  {
                    offset: 1,
                    color: "#00bdfe",
                  },
                ],
              },
            },
          },
        },
        {
          value: 100 - value1,
          name: "",
          label: {
            normal: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              color: "#163367",
            },
          },
        },
      ];
      this.$set(this.option.series[0], "data", data1);

      this.myChart.setOption(this.option);
      this.hignLightPie();
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts4"));
    this.option = {
      color: ["#00f6fe", "transparent"],
      // æ’入背景图
      //    graphic: [
      //   {
      //     type: "image",
      //     id: "background1",
      //     left: "13px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     top: "61px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [0, 0],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // ç¬¬ä¸€ä¸ªçŽ¯å½¢å›¾çš„背景图片路径
      //       width: 100,
      //       height: 100,
      //     },
      //   },
      //   {
      //     type: "image",
      //     id: "background2",
      //     left: "131px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     top: "61px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [0, 0],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // ç¬¬ä¸€ä¸ªçŽ¯å½¢å›¾çš„背景图片路径
      //       width: 100,
      //       height: 100,
      //     },
      //   },
      // ],
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["58%", "48%"],
          silent: true,
          clockwise: true,
          startAngle: 90,
          endAngle: -360,
          z: 0,
          zlevel: 0,
          label: {
            normal: {
              position: "center",
            },
          },

          animation: false,
          data: [],
        },

        {
          name: "",
          type: "gauge",
          radius: "58%",
          center: ["50%", "50%"],
          startAngle: 90,
          endAngle: -360,
          splitNumber: 12,
          hoverAnimation: true,
          axisTick: {
            show: false,
          },
          splitLine: {
            length: 60,
            distance: -10,
            lineStyle: {
              width: 25,
              color: "#0a0d35",
            },
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              opacity: 0,
            },
          },
          detail: {
            show: false,
          },
          animation: false,
          data: [
            {
              value: 0,
              name: "",
            },
          ],
        },
      ],
    };
    this.myChart.setOption(this.option);
    const that = this;
    window.addEventListener("resize", () => {
      that.myChart.resize();
    });
    // this.getData();
    this.defineEvent();
    // this.selectPie();
    this.hignLightPie();
    // timer = setInterval(this.selectPie, 1500);
  },
  methods: {
    // getData() {
    //   this.data1 = [{ actualData: 144, planData: 288 }];
    //   this.$set(this.option.series[0], "data", [
    //     { value: this.data1[0].actualData },
    //     { value: this.data1[0].planData - this.data1[0].actualData },
    //   ]);
    //   this.$set(this.option.series[1], "data", [
    //     { value: this.data2[0].actualData },
    //     { value: this.data2[0].planData - this.data2[0].actualData },
    //   ]);
    //   console.log(this.option.series[0].data);
    //   this.myChart.setOption(this.option);
    // },
    selectPie() {
      let dataLen = this.option.series[0].data.length;
      this.currentIndex = (this.currentIndex + 1) % dataLen;
      this.hignLightPie();
    },
    // è½®æ’­ç‚¹äº®é¥¼å›¾
    hignLightPie() {
      const dataPie = this.option.series[0].data;
      // ç†„灭所有扇形区域
      for (var index in dataPie) {
        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index,
        });

        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 1,
          dataIndex: index,
        });
      }

      // ç‚¹äº®å½“前扇形区域
      this.myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });

      this.myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 1,
        dataIndex: 0,
      });
    },

    // é¼ æ ‡è§¦æ‘¸è½®æ’­æ‚¬åœäº‹ä»¶
    defineEvent() {
      // é¼ æ ‡ç§»å‡ºè½®æ’­ç»§ç»­
      this.myChart.on("mouseout", () => {
        if (timer) clearInterval(timer);
        timer = setInterval(this.selectPie, 1500);
      });

      // é¼ æ ‡è¿›å…¥è½®æ’­æ‚¬åœ
      this.myChart.on("mouseover", (params) => {
        clearInterval(timer);
        this.currentIndex = params.dataIndex;
        this.hignLightPie();
      });

      // é¼ æ ‡ç§»å…¥legend轮播悬停
      this.myChart.getZr().on("mouseover", (event) => {
        const legendDataIndex = event.topTarget.parent.__legendDataIndex; // æ¯ä¸ªlegend的index
        clearInterval(timer);
        this.currentIndex = legendDataIndex;
        this.hignLightPie();
      });

      // é¼ æ ‡ç§»å‡ºlegend轮播继续
      this.myChart.getZr().on("mouseout", () => {
        if (timer) clearInterval(timer);
        timer = setInterval(this.selectPie, 1500);
      });
    },
  },
};
</script>

<style>
#echarts4 {
  transform: scaleY(2);
}
</style>

 yiqi_screen/src/components/ProductionStatistics±¸·Ý1113.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,458 @@
<template>
  <!-- æœ¬ç­/本月产量统计 -->
  <div class="box-container box4" id="echarts4"></div>
</template>

<script>
let timer = null;
import * as echarts from "echarts";
export default {
  props: {
    produceStatisData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      option: {},
      myChart: {},
      currentIndex: -1,
      data1: [],
      data2: [{ actualData: 2782, planData: 11128 }],
    };
  },
  // watch: {
  //   produceStatisData(val) {
  //     // æµ‹è¯•ç”¨ï¼š
  //     val.currentShiftProduceNum = 280;
  //     val.currentShiftPlanNum = 300;
  //     // å½“前班组实际生产数量 currentShiftProduceNum
  //     // å½“前班组计划生产数量 currentShiftPlanNum
  //     var num1 = val.currentShiftProduceNum; //实际生产数量
  //     var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //计划生产数量
  //     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,
  //       },
  //     ]);
  //     var num3 = val.currentMonthProduceNum;
  //     var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum;
  //     if (val.currentMonthPlanNum == 0) {
  //       //分母为0 æ˜¾ç¤º0%
  //       num3 = 0;
  //       num4 = 10;
  //     }
  //     this.$set(this.option.series[1], "data", [
  //       { value: num3 },
  //       { value: num4 },
  //     ]);

  //     this.myChart.setOption(this.option);
  //     this.hignLightPie();
  //   },
  // },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts4"));
    var value = 60;
    var value2 = 15;
    let data1 = [
      {
        value: value,
        name: "",
        itemStyle: {
          normal: {
            color: "#62fbf8",
          },
        },
      },
      {
        value: 100 - value,
        name: "",
        label: {
          normal: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            color: "rgba(0,0,0,0)",
          },
        },
      },
    ];

    let data2 = [
      {
        value: value2,
        name: "",
        itemStyle: {
          normal: {
            color: "rgb(105,206,195)",
          },
        },
      },
      {
        value: 100 - value2,
        name: "",
        label: {
          normal: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            color: "rgba(0,0,0,0)",
          },
        },
      },
    ];

    this.option = {
      color: ["#00f6fe", "rgba(5, 19, 96, 0.5)"],
      // æ’入背景图
      //    graphic: [
      //   {
      //     type: "image",
      //     id: "background1",
      //     left: "13px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     top: "61px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [0, 0],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // ç¬¬ä¸€ä¸ªçŽ¯å½¢å›¾çš„背景图片路径
      //       width: 100,
      //       height: 100,
      //     },
      //   },
      //   {
      //     type: "image",
      //     id: "background2",
      //     left: "131px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     top: "61px", // æ ¹æ®çŽ¯å½¢å›¾çš„位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [0, 0],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // ç¬¬ä¸€ä¸ªçŽ¯å½¢å›¾çš„背景图片路径
      //       width: 100,
      //       height: 100,
      //     },
      //   },
      // ],
      series: [
        // å·¦ä¾§
        {
          name: "å·¦-数据",
          type: "pie",
          // radius: ['65%', '75%'],
          radius: ["29%", "36%"], //环变细
          center: ["25%", "49%"],
          silent: true,
          // clockwise: false,
          startAngle: 90,
          z: 1,
          zlevel: 0,
          label: {
            normal: {
              position: "center",
            },
          },
          data: data1,
        },
        {
          name: "å·¦-中间渐变",
          type: "pie",
          startAngle: 90,
          z: 20,
          zlevel: 20,
          radius: "28%",
          hoverAnimation: false,
          center: ["25%", "49%"],

          // zlevel: 2,
          itemStyle: {
            normal: {
              labelLine: {
                show: false,
              },
              color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                {
                  offset: 1,
                  color: "rgba(55,70,130, 1)",
                },
                {
                  offset: 0,
                  color: "rgba(55,70,130, 0)",
                },
              ]),
              shadowBlur: 10,
              // shadowColor: 'rgba(55,70,130, 1)'
            },
          },
          data: [
            {
              value: 100,
            },
          ],
        },
        {
          name: "å·¦-刻度间隔",
          z: 2,
          // zlevel: 1,
          type: "gauge",
          radius: "57%",
          center: ["25%", "49%"],
          startAngle: 20,
          endAngle: -360,
          splitNumber: 10,
          hoverAnimation: true,
          axisTick: {
            show: true,
            splitNumber: 1,
            length: 14, //刻度长度
            // Distance: 40, //刻度间隔距离
            lineStyle: {
              width: 5,
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(8, 52, 106, 0.039)", // 0% å¤„的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(8, 52, 106, 0.239)", // 100% å¤„的颜色
                  },
                ],
                false
              ),
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              opacity: 0,
            },
          },
          detail: {
            show: false,
          },
          data: [100],
        },

        // å³ä¾§
        {
          name: "右-数据",
          type: "pie",
          // radius: ['65%', '75%'],
          radius: ["29%", "36%"], //环变细
          center: ["74%", "49%"],
          silent: true,
          // clockwise: false,
          startAngle: 90,
          z: 1,
          zlevel: 0,
          label: {
            normal: {
              position: "center",
            },
          },
          data: data2,
        },
        {
          name: "右-中间渐变",
          type: "pie",
          startAngle: 90,
          radius: "28%",
          hoverAnimation: false,
          center: ["74%", "49%"],
          itemStyle: {
            normal: {
              labelLine: {
                show: false,
              },
              color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                {
                  offset: 1,
                  color: "rgba(55,70,130, 1)",
                },
                {
                  offset: 0,
                  color: "rgba(55,70,130, 0)",
                },
              ]),
              shadowBlur: 10,
              // shadowColor: 'rgba(55,70,130, 1)'
            },
          },
          data: [
            {
              value: 100,
            },
          ],
        },
        {
          name: "右-刻度间隔",
          z: 2,
          type: "gauge",
          radius: "45%",
          center: ["74%", "49%"],
          startAngle: 90,
          endAngle: -360,
          splitNumber: 10,
          hoverAnimation: true,
          axisTick: {
            show: true,
            splitNumber: 1,
            length: 20,
            lineStyle: {
              width: 10,
              color: "#1183a7",
              shadowColor: "rgb(4,31,62, 0.5)",
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              opacity: 0,
            },
          },
          detail: {
            show: false,
          },
          data: [100],
        },
      ],
    };
    this.myChart.setOption(this.option);
    const that = this;
    window.addEventListener("resize", () => {
      that.myChart.resize();
    });
    // this.getData();
    this.defineEvent();
    // this.selectPie();
    this.hignLightPie();
    // timer = setInterval(this.selectPie, 1500);
  },
  methods: {
    // getData() {
    //   this.data1 = [{ actualData: 144, planData: 288 }];
    //   this.$set(this.option.series[0], "data", [
    //     { value: this.data1[0].actualData },
    //     { value: this.data1[0].planData - this.data1[0].actualData },
    //   ]);
    //   this.$set(this.option.series[1], "data", [
    //     { value: this.data2[0].actualData },
    //     { value: this.data2[0].planData - this.data2[0].actualData },
    //   ]);
    //   console.log(this.option.series[0].data);
    //   this.myChart.setOption(this.option);
    // },
    selectPie() {
      let dataLen = this.option.series[0].data.length;
      this.currentIndex = (this.currentIndex + 1) % dataLen;
      this.hignLightPie();
    },
    // è½®æ’­ç‚¹äº®é¥¼å›¾
    hignLightPie() {
      const dataPie = this.option.series[0].data;
      // ç†„灭所有扇形区域
      for (var index in dataPie) {
        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index,
        });

        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 1,
          dataIndex: index,
        });
      }

      // ç‚¹äº®å½“前扇形区域
      this.myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });

      this.myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 1,
        dataIndex: 0,
      });
    },

    // é¼ æ ‡è§¦æ‘¸è½®æ’­æ‚¬åœäº‹ä»¶
    defineEvent() {
      // é¼ æ ‡ç§»å‡ºè½®æ’­ç»§ç»­
      this.myChart.on("mouseout", () => {
        if (timer) clearInterval(timer);
        timer = setInterval(this.selectPie, 1500);
      });

      // é¼ æ ‡è¿›å…¥è½®æ’­æ‚¬åœ
      this.myChart.on("mouseover", (params) => {
        clearInterval(timer);
        this.currentIndex = params.dataIndex;
        this.hignLightPie();
      });

      // é¼ æ ‡ç§»å…¥legend轮播悬停
      this.myChart.getZr().on("mouseover", (event) => {
        const legendDataIndex = event.topTarget.parent.__legendDataIndex; // æ¯ä¸ªlegend的index
        clearInterval(timer);
        this.currentIndex = legendDataIndex;
        this.hignLightPie();
      });

      // é¼ æ ‡ç§»å‡ºlegend轮播继续
      this.myChart.getZr().on("mouseout", () => {
        if (timer) clearInterval(timer);
        timer = setInterval(this.selectPie, 1500);
      });
    },
  },
};
</script>

<style>
#echarts4 {
  transform: scaleY(2);
}
</style>

 yiqi_screen/src/components/img/t.js

@@ -1 +1 @@
export let zhu = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAB+CAYAAAA3MXHFAAABLElEQVRoge3bPyvEcRwH8NfpsEgWMdhsMrAou8dgMYtFyioZXELJbFZWBgvPAOEBGO4x3GCjM1xX59yf4X5n0Ps9fJfvu1596rN+SpP7dT1Swi5OMN6r2CdfOMPRSI/SNO5wMSBWQwU7GCt3Ka3hCrMDQFDFDQ4wovm0ZBSnuC8Ae8Qz9lqd1gnncY2VASG4xQzW2z+a8gZeC8DquMQyVjsVyljAHI4HxGhs4yEmuhXKWNJY+yLy3gvj99IMPQEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAFb8vXXYN8EDBgwYMCAAf85eIWPbndPRaaK7VrFA8Od8BPnWGxi/Lx7KjJv2KxVvLR/lPGErYKgOqZwUav47FT4BrulK2qVemffAAAAAElFTkSuQmCC"
export let zhu = 'data:image/png;base64,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';

 yiqi_screen1216¶þά.rar

Binary files differ