大屏

liuying

2024-11-11 62ec1f19c3444695e21f1fe97472261ce3082075

大屏

 yiqi_screen/src/App.vue

@@ -24,7 +24,7 @@
        height: 1070px;
        /* width:100%; */
        /* height:100%; */
        /* overflow: hidden; */
        overflow: hidden; 
        background-color: #00083b;
        /* font-size: 80px !important; */
        /* background-image: url('~@/assets/images/bg.png'); */

 yiqi_screen/src/assets/images/huan.png

 yiqi_screen/src/assets/images/quan.png

 yiqi_screen/src/assets/t.js

@@ -1 +1 @@
export let zhu = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAB+CAYAAAA3MXHFAAAAAXNSR0IArs4c6QAAAedJREFUaEPtm80rRGEYxc8746OwmJSSZIOSspWtYaXI2gohOxtZWsjCTv4ApcRC7CeT/8CkrGQYzGAMKZIx5n48mqkRd+50u+4MqXPX7/uc5577O3U2V+GXnprweU+2vuZMldQTUVMpzEFhBUCth72M65f0evgqOWaYqtVWcCIpTX6FDSgMeRDKXX2OpB73jh+exgH4DFMFigSnUzIowCaAZi9iAlyGLm6P717fRgpzvgnOiFTLPZYFmM9t40XMFDncPU2Yr5rW+3XOp+BMStpNYBvAtwM/Ec3oRmgnetVtGNJmvZ8XHL2RhcYqLPm8gZGbLdfvchCOxvoANNgtmxesP5cxEWz95G2sd5RINBOPdZaaRUHXLtNSQkNoihxgLBgLxoKxKHKAsWAsGAvGwnUKCA2hITTODrB5s2I4U2I5QWgIDaFhxWDFcJ0CQkNoCI2zA6wYrBjOlLCXWhwgNISGFYMVw3UKCA2hITTODrCXsmI4U8Jeyl7qmpK/hkZETrLxWFepxcsefArSUtcpITSEhtAUOcBYMBb/Phabhi8xWdZfWGxjodSFEnNWH+jcz1lWSUFdAWt6um4Rwy3pwvepiKAAR36FaS3YEbGCoGrPpMMPBF0TYndB0ySTjAdMlVhFf79ud+QDhHReVZvashsAAAAASUVORK5CYII='
export let zhu = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAB+CAYAAAA3MXHFAAABLElEQVRoge3bPyvEcRwH8NfpsEgWMdhsMrAou8dgMYtFyioZXELJbFZWBgvPAOEBGO4x3GCjM1xX59yf4X5n0Ps9fJfvu1596rN+SpP7dT1Swi5OMN6r2CdfOMPRSI/SNO5wMSBWQwU7GCt3Ka3hCrMDQFDFDQ4wovm0ZBSnuC8Ae8Qz9lqd1gnncY2VASG4xQzW2z+a8gZeC8DquMQyVjsVyljAHI4HxGhs4yEmuhXKWNJY+yLy3gvj99IMPQEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAFb8vXXYN8EDBgwYMCAAf85eIWPbndPRaaK7VrFA8Od8BPnWGxi/Lx7KjJv2KxVvLR/lPGErYKgOqZwUav47FT4BrulK2qVemffAAAAAElFTkSuQmCC"

 yiqi_screen/src/components/Content.vue

@@ -88,7 +88,7 @@
              style="
                margin: 0 0.13rem;
                height: 0.13rem;
                background-color: #a7cf29;
                background-color: #e6e705;
              "
            ></div>
          </div>
@@ -98,7 +98,7 @@
              style="
                margin: 0 0.13rem;
                height: 0.13rem;
                background-color: #a7cf29;
                background-color: #e6e705;
              "
            ></div>
            <div
@@ -339,7 +339,6 @@
    //   easing: "easeOutExpo", // 运动效果
    //   loop: true, // 设置无限循环
    // });

    // // 第一个动画：横向移动
    // timeline
    //   .add({
@@ -361,7 +360,6 @@
    //     duration: 0, // 不需要动画
    //     delay: 1000, // 隔断时间1秒
    //   });

    // setTimeout(() => {
    //   timeline.pause(); // 暂停动画
    //   document.getElementById('animatedImage').classList.add('hidden');
@@ -403,10 +401,10 @@
    margin-bottom: 0.25rem;

    .title {
      font-family: Source Han Sans CN;
      display: flex;
      vertical-align: middle;
      align-items: center;
      color: #41c7de;
      font-size: 40px;
      font-weight: 700;
      position: absolute;
@@ -414,6 +412,11 @@
      left: 50%;
      transform: translate(-50%);
      letter-spacing: 8px;

      background: linear-gradient(0deg, #a7ffff, #83d0dc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      .imgTitle {
        width: 117px;
        margin-right: 69px;
@@ -421,15 +424,16 @@
    }

    .left-text {
      font-size: 18px;
      font-size: 20px;
    color: #fff;
    position: absolute;
    top: 57px;
    left: 38px;
    width: 372px;
      top: 63px;
      left: 37px;
      width: 368px;
    text-align: right;
    line-height: 48px;
    font-weight: 700;
      letter-spacing: -2px;
    }

    .right-text {
@@ -437,10 +441,11 @@
    text-align: right;
    color: #fff;
    position: absolute;
    top: 57px;
      top: 63px;
    right: 268px;
    line-height: 48px;
    font-weight: 700;
      letter-spacing: -2px;
    }
  }

@@ -558,12 +563,9 @@
    }

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

      justify-content: center;
      .border_left1 {
        width: 284px;
        margin-right: 20px;
@@ -621,7 +623,8 @@
          font-weight: 700;
          color: #00f8c6;
          text-align: center;
          border-bottom: 2px solid #04279d;
          border-bottom: 2px solid #0739a3;
          
        }
      }

@@ -631,22 +634,22 @@
        .pie-label-left {
          position: absolute;
          bottom: 10px;
          left: 0.1rem;
          color: #d9dbe6;
          font-size: 18px;
          left: 0;
          color: white;
          font-size: 16px;
          font-weight: 300;
          width: 44%;
          width: 54%;
          text-align: center;
        }

        .pie-label-right {
          position: absolute;
          bottom: 10px;
          right: 0.3rem;
          right: 0;
          color: #fff;
          color: #d9dbe6;
          font-size: 18px;
          width: 44%;
          color: white;
          font-size: 16px;
          width: 54%;
          text-align: center;
        }
      }

 yiqi_screen/src/components/EquipmentRunStatus.vue

@@ -66,7 +66,6 @@
    this.option = {
      // #00ff99 #fffff0 #0a0d7f #ffcc00 #fe0000
      color: ["#00ff99", "#fffff0", "#0a0d7f", "#ffcc00", "#fe0000"],
      
      legend: {
        orient: "vertical",
        top: "28%",
@@ -90,17 +89,15 @@
        {
          type: "pie",
          center: ["33%", "50%"],
          radius: ["29%", "39%"],
          radius: ["30%", "37%"],
          padAngle: 5, //环与环之间的间隙
          // avoidLabelOverlap: false,
          // left: "-30%",
          // top: "10%",
          label: {
            show: true,
            formatter: `{d}%`,
            color: "#fff",
            // color: "#fff",
            fontSize: 11,
            position: "outside",
            color: "inherit", //继承上面的颜色
          },
          labelLine: {
            show: true,
@@ -111,10 +108,10 @@
            borderRadius: 3,
            borderColor: "transparent",
            borderWidth: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
          shadowBlur: 10, // 阴影模糊程度
          shadowOffsetX: 20, // 水平阴影偏移
          shadowOffsetY: 20 // 垂直阴影偏移
            // shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
            // shadowBlur: 10, // 阴影模糊程度
            // shadowOffsetX: 20, // 水平阴影偏移
            // shadowOffsetY: 20, // 垂直阴影偏移
          },
          emphasis: {
            label: {
@@ -212,10 +209,10 @@
  background-repeat: no-repeat;
  content: "";
  width: 56px;
  height: 32px;
  height: 29px;
  z-index: -1;
  /* opacity: 0.5; */
  top: 101px;
  top: 103px;
  left: 73px;
  transform: scaleY(2);
}

 yiqi_screen/src/components/ProductionCompletionTrend.vue

@@ -34,7 +34,6 @@
        yData3 = [];
      val.forEach((item) => {
        console.log('ceshi', item.completionNum);
        
        xData.push(item.month);
        yData1.push({
          value: item.completionNum,
@@ -45,11 +44,8 @@
        yData3.push(item.planCompletionNum); //计划
      });
      this.$set(this.option.xAxis, "data", xData);
      // console.log('---', yData1);
      
      this.$set(this.option.series[0], "data", yData1);
      this.$set(this.option.series[1], "data", yData2);
      // this.$set(this.option.series[2], "data", yData3);
      this.$nextTick(() => {
        this.myChart.setOption(this.option);
      });

 yiqi_screen/src/components/ProductionStatistics.vue

@@ -1,5 +1,7 @@
<template>
  <div class="box-container" id="echarts4"></div>
  <!-- 本班/本月产量统计 -->
  <div class="box-container box4" id="echarts4"></div>
  
</template>

<script>
@@ -22,6 +24,9 @@
  },
  watch: {
    produceStatisData(val) {
      // 测试用：
      val.currentShiftProduceNum = 300;
      val.currentShiftPlanNum = 300;
      // 当前班组实际生产数量 currentShiftProduceNum
      // 当前班组计划生产数量 currentShiftPlanNum
      var num1 = val.currentShiftProduceNum; //实际生产数量
@@ -31,11 +36,15 @@
        num1 = 0;
        num2 = 10;
      }


      
      this.$set(this.option.series[0], "data", [
        // { value: 1 },  //实际生产数量 1/ (9+1) = 10%
        // { value: 9 },
        { value: Math.floor(num1) }, //实际生产数量
        { value: Math.floor(num2) },
        { value: num1,
         }, //实际生产数量
        { value: num2 },
      ]);
      var num3 = val.currentMonthProduceNum;
      var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum;
@@ -45,8 +54,8 @@
        num4 = 10;
      }
      this.$set(this.option.series[1], "data", [
        { value: Math.floor(num3) },
        { value: Math.floor(num4) },
        { value: num3 },
        { value: num4 },
      ]);

      this.myChart.setOption(this.option);
@@ -56,57 +65,58 @@
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts4"));
    this.option = {
      color: ["#00f6fe", "#c4c3d6"],
      color: ["#00f6fe", "transparent"],
      // 插入背景图
      // graphic: [
      //   {
      //     type: "image",
      //     id: "background1",
      //     left: "20px", // 根据环形图的位置调整
      //     top: "60px", // 根据环形图的位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [-25, -25],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // 第一个环形图的背景图片路径
      //       width: 100,
      //       height: 100,
      //       opacity: 1,
      //     },
      //   },
      //   {
      //     type: "image",
      //     id: "background2",
      //     left: "153px", // 根据环形图的位置调整
      //     top: "60px", // 根据环形图的位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [0, 0],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // 第一个环形图的背景图片路径
      //       width: 100,
      //       height: 100,
      //       opacity: 1,
      //     },
      //   },
      // ],
    
         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,
          },
        },
      ],
      series: [
        {
          name: "Access From",
          type: "pie",
          // radius: ["25%", "40%"],
          // padAngle: 5, //环与环之间的间隙
          radius: ["30%", "37%"], //环变细
          center: ["26%", "47%"],
          avoidLabelOverlap: false,
          silent: true,clockwise: true,
          // avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
            formatter: `{d}%`,
            formatter: function (params) {
              return Math.floor(params.percent) + '%'; // 四舍五入到整数
            },
            color: "#fff",
            fontSize: 12,
          },

          emphasis: {
            //饼图中间的字体大小
            scale: false,
@@ -116,6 +126,7 @@
              color: "#19d8d0",
              fontWeight: "normal",
            },
         
          },
          labelLine: {
            show: false,
@@ -130,14 +141,17 @@
        {
          name: "Access From",
          type: "pie",
          // padAngle: 5, //环与环之间的间隙
          // radius: ["25%", "40%"],
          radius: ["30%", "37%"], //环变细
          center: ["74%", "47%"],
          avoidLabelOverlap: false,
          // avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
            formatter: `{d}%`,
            formatter: function (params) {
              return Math.floor(params.percent) + '%'; // 四舍五入到整数
            },
            color: "#fff",
            fontSize: 12,
          },
@@ -261,4 +275,34 @@
#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/QualityDataTrends.vue

@@ -65,7 +65,6 @@
        xData.push(item.workPieceID)
        yData.push(item.qualityDataVaule)
      });
      // console.log(xData,yData,this,'x,y');
      this.$set(this.option.xAxis,'data',xData)
      this.$set(this.option.series[0],'data',yData)
      this.myChart.setOption(this.option);
@@ -144,5 +143,8 @@
      <style>
   .echarts3Box{
    height: 150px !important;
    /* background-color: #040d3d; */
    /* width: 96%; */
    margin: 0 auto;
   }
</style>

 yiqi_screen/src/components/img/t.js

@@ -1 +1 @@
export let zhu = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAB+CAYAAAA3MXHFAAAAAXNSR0IArs4c6QAAAedJREFUaEPtm80rRGEYxc8746OwmJSSZIOSspWtYaXI2gohOxtZWsjCTv4ApcRC7CeT/8CkrGQYzGAMKZIx5n48mqkRd+50u+4MqXPX7/uc5577O3U2V+GXnprweU+2vuZMldQTUVMpzEFhBUCth72M65f0evgqOWaYqtVWcCIpTX6FDSgMeRDKXX2OpB73jh+exgH4DFMFigSnUzIowCaAZi9iAlyGLm6P717fRgpzvgnOiFTLPZYFmM9t40XMFDncPU2Yr5rW+3XOp+BMStpNYBvAtwM/Ec3oRmgnetVtGNJmvZ8XHL2RhcYqLPm8gZGbLdfvchCOxvoANNgtmxesP5cxEWz95G2sd5RINBOPdZaaRUHXLtNSQkNoihxgLBgLxoKxKHKAsWAsGAvGwnUKCA2hITTODrB5s2I4U2I5QWgIDaFhxWDFcJ0CQkNoCI2zA6wYrBjOlLCXWhwgNISGFYMVw3UKCA2hITTODrCXsmI4U8Jeyl7qmpK/hkZETrLxWFepxcsefArSUtcpITSEhtAUOcBYMBb/Phabhi8xWdZfWGxjodSFEnNWH+jcz1lWSUFdAWt6um4Rwy3pwvepiKAAR36FaS3YEbGCoGrPpMMPBF0TYndB0ySTjAdMlVhFf79ud+QDhHReVZvashsAAAAASUVORK5CYII='
export let zhu = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAB+CAYAAAA3MXHFAAABLElEQVRoge3bPyvEcRwH8NfpsEgWMdhsMrAou8dgMYtFyioZXELJbFZWBgvPAOEBGO4x3GCjM1xX59yf4X5n0Ps9fJfvu1596rN+SpP7dT1Swi5OMN6r2CdfOMPRSI/SNO5wMSBWQwU7GCt3Ka3hCrMDQFDFDQ4wovm0ZBSnuC8Ae8Qz9lqd1gnncY2VASG4xQzW2z+a8gZeC8DquMQyVjsVyljAHI4HxGhs4yEmuhXKWNJY+yLy3gvj99IMPQEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAFb8vXXYN8EDBgwYMCAAf85eIWPbndPRaaK7VrFA8Od8BPnWGxi/Lx7KjJv2KxVvLR/lPGErYKgOqZwUav47FT4BrulK2qVemffAAAAAElFTkSuQmCC"