饼图背景优化、统计数量字体和位置调整、订单完成比率背景和颜色调整、工单进度列表修改

yangfeng

2023-12-07 83bff199d22d380fc7e1b83bb2db0f0814385530

饼图背景优化、统计数量字体和位置调整、订单完成比率背景和颜色调整、工单进度列表修改

 public/cockpitPage/machine-chart-bg.png

 public/cockpitPage/order-complete.png

 src/components/cockpitPage/BackgroundBoardLayout.vue

@@ -53,7 +53,7 @@
// 整体内边距
$layoutPadding: 12px;
// 上边固定高
$topBlockHeight: 90px;
$topBlockHeight: 100px;
// 左侧头部数据高度
$leftHeaderHeight: 8%;
// 左侧公共右边距
@@ -67,7 +67,7 @@
// 右侧布局块高度
$rightBlockHeight: calc(100vh - 120px);
// 左下上边距
$leftBottomMarginTop: 30px;
$leftBottomMarginTop: 40px;
// 左下左侧区域宽
$leftBottomLeftWidth: 37%;
// 左下右侧区域宽
@@ -77,8 +77,8 @@
  background-image: url("/cockpit-bg.jpg");
  background-position-x: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  // background-position: center center;
  // background-attachment: fixed;
  background-size: cover;
  display: flex;
  align-items: center;
@@ -89,7 +89,7 @@
    width: 100%;
    text-align: center;
    position: absolute;
    top: 0px;
    top: 10px;
    font-size: 32px;
    color: #01f5fe;
    font-weight: 700;

 src/views/cockpitPage/components/CountView.vue

@@ -7,10 +7,9 @@
        </div>
        <div class="value-view">
          <div class="title-margin-left">
            <span class="value-span1">
              {{ totalObject.InternalDeviceRunningAmount + "" }}
            <span class="value-span">
              {{ totalObject.InternalDeviceRunningAmount }}台
            </span>
            <span class="unit-span">台</span>
          </div>
        </div>
      </div>
@@ -20,38 +19,35 @@
        </div>
        <div class="value-view">
          <div class="title-margin-left">
            <span class="value-span1">{{
              totalObject.ExternalDeviceRunningAmount
            }}</span>
            <span>台</span>
            <span class="value-span"
              >{{ totalObject.ExternalDeviceRunningAmount }}台</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="left">
        <div class="title-view">
          <div>计划外加工数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">
            <span class="value-span">{{
              totalObject.OutPlanProductionAmount
            }}</span>
            <span>件</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title-view">
          <div>计划生产数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">
            <span class="value-span">{{
              totalObject.PlanProductionAmount
            }}</span>
            <span>件</span>
            <span class="value-span"
              >{{ totalObject.PlanProductionAmount }}件</span
            >
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title-view">
          <div>计划外加工数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">
            <span class="value-span"
              >{{ totalObject.OutPlanProductionAmount }}件</span
            >
          </div>
        </div>
      </div>
@@ -59,27 +55,25 @@
    <div class="box">
      <div class="left">
        <div class="title-view">
          <div>实际外加工数</div>
          <div>实际生产数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">
            <span class="value-span">{{
              totalObject.RealExternalProductionAmount
            }}</span>
            <span>件</span>
            <span class="value-span"
              >{{ totalObject.RealProductionAmount }}件</span
            >
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title-view">
          <div>实际生产数</div>
          <div>实际外加工数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">
            <span class="value-span">{{
              totalObject.RealProductionAmount
            }}</span>
            <span>件</span>
            <span class="value-span"
              >{{ totalObject.RealExternalProductionAmount }}件</span
            >
          </div>
        </div>
      </div>
@@ -156,7 +150,7 @@
          left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-size: 20px;
        font-size: 17px;
        color: #01f7fd;
        font-family: "Arial Normal", "Arial";
        font-weight: 400;
@@ -168,11 +162,11 @@
          // white-space: nowrap;
          display: flex;
          align-items: center;
          .value-span1 {
            margin-top: 5px;
            // height: 100%;
            // max-width: 3em;
          }
          // .value-span1 {
          // margin-top: 5px;
          // height: 100%;
          // max-width: 3em;
          // }
          // .value-span {
          // height: 100%;
          // max-width: 3em;

 src/views/cockpitPage/components/MachineStartupRate.vue

@@ -8,7 +8,7 @@
          <span class="top-rate">{{ startupRate + "%" }}</span>
        </div>
      </div>
      <div class="chart" ref="chart"></div>
      <div id="main" class="chart" ref="chart"></div>
    </div>
  </div>
</template>
@@ -40,6 +40,8 @@
      }
      myChart = echarts.init(chartDom);
      let img = "/cockpitPage/machine-chart-bg.png";
      let height = myChart.getHeight() / 1;
      let width = height + 5;
      let option;
      if (data) {
        option = {
@@ -52,11 +54,10 @@
              {
                type: "image",
                z: 5,
                right: 25,
                style: {
                  image: img,
                  width: 240,
                  height: 245,
                  width: width,
                  height: height,
                  opacity: 0.55,
                },
                left: "center",
@@ -112,6 +113,20 @@
        };

        option && myChart.setOption(option);
        // window.addEventListener("resize", function () {
        //   // var chart = echarts.getInstanceByDom(document.getElementById("main"));
        //   let width = myChart.getWidth();
        //   let height = myChart.getHeight();
        //   console.log(width, height, "sssssssssss");
        //   let logo = myChart.getOption().graphic[0].elements[0];
        //   console.log(logo, "fffff");
        //   logo.style.width = width / 2;
        //   logo.style.height = height / 2;
        //   myChart.setOption({
        //     graphic: [logo],
        //   });
        //   myChart.resize();
        // });
      } else {
        option = {};
        myChart.setOption(option, true);

 src/views/cockpitPage/components/OrderCompleteRadio.vue

@@ -14,7 +14,13 @@
              :percentage="item.radio"
              :define-back-color="'#083f55'"
              :text-color="'#fec718'"
              :class="item.radio < 90 ? 'setTitle-right' : 'setTitle-left'"
              :class="
                item.radio < 90
                  ? 'setTitle-right'
                  : item.radio == 100
                  ? 'setTitle-complete'
                  : 'setTitle-left'
              "
            ></el-progress>
          </div>
        </div>
@@ -120,6 +126,12 @@
    background: url("../../../../public/cockpitPage/order-bg.png") no-repeat
      center center / cover;
  }
  .setTitle-complete .el-progress-bar__inner {
    position: relative;
    // background: #552d08;
    background: url("../../../../public/cockpitPage/order-complete.png")
      no-repeat center center / cover;
  }
  .setTitle-right .el-progress-bar__innerText {
    position: absolute;
    top: 2px;
@@ -129,9 +141,14 @@
    width: 60px;
  }
  .setTitle-left .el-progress-bar__innerText {
    color: rgb(226, 146, 27) !important;
    color: #fffb00 !important;
    font-size: 18px;
    width: 60px;
  }
  .setTitle-complete .el-progress-bar__innerText {
    color: #fff !important;
    font-size: 16px;
    width: 60px;
  }
}
</style>

 src/views/cockpitPage/components/PerSonnelProductivity.vue

@@ -236,7 +236,6 @@
    },
    getChartRight(chartName, data) {
      let chartDom = this.$refs[chartName];
      // let myRightChart = echarts.init(chartDom);
      if (
        myRightChart != null &&
        myRightChart != "" &&
@@ -246,6 +245,8 @@
      }
      myRightChart = echarts.init(chartDom);
      let img = "/cockpitPage/dotted-circle.png";
      let height = myRightChart.getHeight() / 1;
      let width = height + 5;
      let option;
      if (data) {
        option = {
@@ -257,11 +258,11 @@
            elements: [
              {
                type: "image",
                z: 3,
                // z: 3,
                style: {
                  image: img,
                  width: 240,
                  height: 240,
                  width: width,
                  height: height,
                },
                left: "center",
                top: "center",
@@ -286,8 +287,8 @@
                  borderRadius: 4,
                  formatter: function (params) {
                    let label =
                      params.name.length > 5
                        ? `${params.name.slice(0, 4)}...`
                      params.name.length > 4
                        ? `${params.name.slice(0, 3)}...`
                        : params.name;
                    return `{a|${label}} {b|${params.value + "%"}}`;
                  },
@@ -350,7 +351,7 @@

    .chart-left {
      width: calc(60% - 20px);
      height: 100%;
      height: calc(100% - 20px);
      margin-right: 20px;
      float: left;
      border: 1px solid #00ffff;
@@ -360,7 +361,7 @@
    .chart-right {
      width: 40%;
      float: left;
      height: 100%;
      height: calc(100% - 20px);
      position: relative;
      .chart-bg {
        width: 100%;

 src/views/cockpitPage/components/StatisticalBox.vue

@@ -4,12 +4,15 @@
      <div class="box">
        <div class="commom-title">{{ item.label }}</div>
        <div
          v-if="item.label == '物料不足/待排程'"
          class="commom-value redColor"
        >
          {{ item.value }}/{{ item.value1 }}
        </div>
        <div
          v-else
          class="commom-value"
          :class="
            item.label == '延期交付' || item.label == '物料不足'
              ? 'redColor'
              : ''
          "
          :class="item.label == '延期交付' ? 'redColor' : ''"
        >
          {{ item.value }}
        </div>
@@ -43,7 +46,8 @@
        },
        {
          value: 10,
          label: "物料不足",
          value1: 0,
          label: "物料不足/待排程 ",
        },
        {
          value: 2,

 src/views/cockpitPage/components/WorkOrderProgress.vue

@@ -26,6 +26,7 @@
            prop="Product"
            label="产品"
            align="center"
            min-width="100"
            show-overflow-tooltip
          >
          </el-table-column>
@@ -51,7 +52,7 @@
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="完成进度" align="center" min-width="160">
          <el-table-column label="完成进度" align="center" min-width="130">
            <template slot-scope="scope">
              <div class="progerss-bg">
                <div
@@ -71,12 +72,13 @@
              </div>
            </template>
          </el-table-column>
          <el-table-column label="延期预警" align="center">
          <el-table-column label="延期预警" align="center" width="90">
            <template slot-scope="scope">
              <div v-show="scope.row.DelayDays > 0" class="round-view">
                <div class="round red-bg"></div>
                <div class="title red-color">
                  {{ scope.row.DelayDays + "天" }}
                  {{ scope.row.DelayDays > 10 ? ">10" : scope.row.DelayDays
                  }}{{ "天" }}
                </div>
              </div>
              <div v-show="scope.row.DelayDays < 0" class="round-view">
@@ -198,12 +200,11 @@
      .round-view {
        display: flex;
        justify-content: center;

        align-items: center;
        .round {
          width: 22px;
          height: 22px;
          border-radius: 11px;

          width: 16px;
          height: 16px;
          border-radius: 8px;
          margin-right: 5px;
        }
        .red-bg {

 src/views/cockpitPage/index.vue

@@ -75,7 +75,7 @@
        { value: 0, label: "总产量" },
        { value: 0, label: "生产工单数" },
        { value: 0, label: "延期交付" },
        { value: 0, label: "物料不足" },
        { value: 0, label: "物料不足/待排程" },
        { value: 0, label: "计划达成率" },
      ],
      // 机器开机率
@@ -165,8 +165,9 @@
          item.value = data?.WorkOrderAmount ?? 0;
        } else if (item.label === "延期交付") {
          item.value = data?.DelayWorkOrderAmount ?? 0;
        } else if (item.label === "物料不足") {
        } else if (item.label === "物料不足/待排程") {
          item.value = data?.MaterialMissWorkOrderAmount ?? 0;
          item.value1 = data?.WaitSchedulingWorkOrderAmount ?? 0;
        } else if (item.label === "计划达成率") {
          let value =
            typeof data?.PlanOrderFinishRate === "string"
@@ -206,7 +207,9 @@
    setLeftBlock3(data) {
      console.log(this.setNumbers(data?.OutPlanProductionAmount ?? 0));
      this.totalObject = {
        InternalDeviceRunningAmount: data?.InternalDeviceRunningAmount ?? 0,
        InternalDeviceRunningAmount: (
          data?.InternalDeviceRunningAmount ?? 0
        ).toString(),
        ExternalDeviceRunningAmount: data?.ExternalDeviceRunningAmount ?? 0,
        OutPlanProductionAmount: this.setNumbers(
          data?.OutPlanProductionAmount ?? 0
@@ -309,10 +312,10 @@
    // 计算加工数 生产数
    setNumbers(val) {
      if (val > 1000 && val < 10000) {
        let count = (val / 1000).toFixed(1);
        let count = (val / 1000).toFixed(2);
        return count.toString() + "千";
      } else if (val >= 10000 && val < 100000) {
        let count1 = (val / 10000).toFixed(1);
        let count1 = (val / 10000).toFixed(2);
        return count1.toString() + "万";
      } else if (val >= 100000 && val < 1000000) {
        let count1 = (val / 100000).toFixed(0);
@@ -324,8 +327,8 @@
        let count1 = (val / 10000000).toFixed(0);
        return count1.toString() + "千万";
      } else if (val >= 100000000 && val < 1000000000) {
        let count1 = (val / 100000000).toFixed(1);
        return count1.toString() + "亿";
        let count1 = (val / 100000000).toFixed(2);
        return count1 + "亿";
      } else if (val >= 1000000000 && val < 10000000000) {
        let count1 = (val / 1000000000).toFixed(0);
        return count1.toString() + "十亿";
@@ -339,7 +342,7 @@
        let count1 = (val / 1000000000000).toFixed(0);
        return count1.toString() + "万亿";
      } else {
        return val;
        return val.toString();
      }
    },
  },