lanju-front/src/views/cs/index4.vue

<template>
  <div class="bg">

    <div :class="`menu`" style="left: 2%">
      <el-dropdown trigger="click" @command="dropdownLink">
                    <span class="el-dropdown-link">
                        {{ type }} <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
        <el-dropdown-menu slot="dropdown">
          <div class="topNavScroll"
               style="max-height: 300px;overflow: auto;background-color: #053563;padding: 0;border: none;">
            <el-dropdown-item command="成型">
                <span style="color: #f8fefd">
                  成型
                </span>
            </el-dropdown-item>
            <el-dropdown-item command="收坯">
                <span style="color: #f8fefd">
                  收坯
                </span>
            </el-dropdown-item>
          </div>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div :class="`menu`" style="left: 9%">
      <el-dropdown trigger="click" @command="dropdownLink1">
                    <span class="el-dropdown-link">
                        {{ bz }} <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
        <el-dropdown-menu slot="dropdown">
          <div class="topNavScroll"
               style="max-height: 300px;overflow: auto;background-color: #053563;padding: 0;border: none;">

            <el-dropdown-item command="白班">
                <span style="color: #f8fefd">
                  白班
                </span>
            </el-dropdown-item>
            <el-dropdown-item command="夜班">
                <span style="color: #f8fefd">
                  夜班
                </span>
            </el-dropdown-item>
          </div>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="title">{{ type }}工序生产信息</div>
    <div class="subTitle" style="top: 15.2%;  left: 2.7%;">{{ type }}计划与实际</div>
    <div class="subTitle" style="top: 15.2%;  left: 51.4%;">{{ type }}机信息</div>
    <Chart ref="chart1" class="chart1"></Chart>
    <div class="table1">

<!--      <div class="item">-->
<!--        <div class="itemTitle">{{ type }}{{ type }}</div>-->
<!--        <div class="info1">运行状态：</div>-->
<!--        <div class="info1-1" style="color:#77d75b">-->
<!--          &lt;!&ndash;            {{ i.completed_count > 0 ? '运行中' : '调试中' }}&ndash;&gt;-->
<!--          <span>{{ type }}</span>-->
<!--        </div>-->
<!--        <div class="info2">订单号：<span style="width: 100%;display: inline-block"></span></div>-->
<!--        <div class="info2-1">{{ type }}</div>-->
<!--        <div class="info3">产品名称：</div>-->
<!--        <div class="info3-1">{{ type }}</div>-->
<!--        <div class="info4">完成数量：</div>-->
<!--        <div class="info4-1">{{ type }}</div>-->
<!--      </div>-->
            <div v-for="(ii,kk) in lists">
              <div v-for="(i,k) in ii" class="item">
                <div class="itemTitle">{{ type }}{{ i.equipmentCode }}</div>
                <div class="info1">运行状态：</div>
                <div class="info1-1" style="color:#77d75b">
                  <!--            {{ i.completed_count > 0 ? '运行中' : '调试中' }}-->
                  <span v-if="equipmentCode === 'S' && ((kk * 3 + k) === 7)">调试中</span>
                  <span v-else>运行中</span>
                </div>
                <div class="info2">订单号：<span style="width: 100%;display: inline-block"></span></div>
                <div class="info2-1">{{ i.workorder_code }}</div>
                <div class="info3">产品名称：</div>
                <div class="info3-1">{{ i.product_name }}</div>
                <div class="info4">完成数量：</div>
                <div class="info4-1">{{ i.completed_count }}</div>
              </div>
            </div>
    </div>
  </div>
</template>
<script>

import Chart from "@/components/Charts/Chart";
import * as echarts from 'echarts'
import {getWhiteBoardProdDetails} from "../../api/board/cs4";

export default {
  components: {
    Chart,
  },
  data() {
    return {
      list: [],
      lists: [],
      type: '成型',
      bz: '白班',
      equipmentCode: 'C',
      shiftId: '5'
    }
  },
  mounted() {
    this.getData()
    setInterval(() => {
      this.getData()
    }, 1000 * 60)
  },
  methods: {
    getColor(e) {
      if (e === 1) {
        return '#77d75b'
      }
      if (e === 0) {
        return '#ff0000'
      }
    },
    getData() {
      getWhiteBoardProdDetails({
        shiftId: this.shiftId,
        equipmentCode: this.equipmentCode
      }).then((e) => {
        let aa = [
          {
            "equipmentCode": "C1",
            "workorder_code": "DD2024123000011-1",
            "completed_count": 61,
            "product_name": "Φ130mm微烟免拆白坯"
          },
          {
            "equipmentCode": "C2",
            "workorder_code": "DD2024123000012-1",
            "completed_count": 83,
            "product_name": "Φ130mm微烟白坯"
          },
          {
            "equipmentCode": "C3",
            "workorder_code": "DD2024123000012-1",
            "completed_count": 78,
            "product_name": "Φ130mm微烟白坯"
          },
          {
            "equipmentCode": "C4",
            "workorder_code": "DD2024123000012-2",
            "completed_count": 81,
            "product_name": "Φ130mm微烟白坯"
          },
          {
            "equipmentCode": "C5",
            "workorder_code": "DD2024123000013-1",
            "completed_count": 71,
            "product_name": "Φ125mm微烟白坯"
          },
          {
            "equipmentCode": "C6",
            "workorder_code": "DD2024123000013-1",
            "completed_count": 72,
            "product_name": "Φ125mm微烟白坯"
          },
          {
            "equipmentCode": "C7",
            "workorder_code": "DD2024123000013-2",
            "completed_count": 82,
            "product_name": "Φ125mm微烟白坯"
          },
          {
            "equipmentCode": "C8",
            "workorder_code": "DD2024123000012-3",
            "completed_count": 22,
            "product_name": "Φ130mm微烟白坯"
          }
        ]
        // this.list = aa.slice(0, 8).map(v => {
          this.list = e.data.rightlist.slice(0, 8).map(v => {
          return {
            ...v,
            equipmentCode: v.equipmentCode.split('').at(-1)
          }
        })
        this.lists = this.groupByCount(this.list)
        this.$refs.chart1.setData({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            left: "2%",
            right: "4%",
            bottom: "5%",
            top: "10%",
            containLabel: true,
          },
          legend: {
            top: '2%',
            x: 'center',
            textStyle: {
              color: "#fff",
            },
            itemWidth: 12,
            itemHeight: 10,
            // itemGap: 35
          },
          xAxis: {
            type: "category",
            data: e.data.leftList.map(v => v.workorder_code),

            axisLine: {
              show: true,
              lineStyle: {
                color: "#999",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: "#9996",
              },
            },
            axisLabel: {
              // interval: 0,
              // rotate: 40,
              textStyle: {
                fontFamily: "Microsoft YaHei",
              },
            },
          },

          yAxis: {
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#999",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: "#9996",
              },
            },
            axisLabel: {},
          },
          series: [
            {
              name: "计划数量",
              type: "bar",
              showBackground: true,
              backgroundStyle: {
                color: '#fff1'
              },
              barGap: "0%",
              barWidth: "30%",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#01a5fe",
                    },
                    {
                      offset: 1,
                      color: "#0057ff",
                    },
                  ]),
                },
              },
              data: e.data.leftList.map(v => v.plan_number),
            },
            {
              name: "完成数量",
              type: "bar",
              barGap: "30%",
              showBackground: true,
              backgroundStyle: {
                color: '#fff1'
              },
              barWidth: "30%",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#19fdb4",
                    },
                    {
                      offset: 1,
                      color: "#0abb62",
                    },
                  ]),
                },
              },
              data: e.data.leftList.map(v => v.completed_count),
            },
          ],
        })
      })
    },
    groupByCount(array) {
      let result = [];
      for (let i = 0; i < array.length; i += 3) {
        result.push(array.slice(i, i + 3));
      }
      return result;
    },

    dropdownLink(e) {
      this.type = e
      if (e === '成型') {
        this.equipmentCode = 'C'
      }
      if (e === '收坯') {
        this.equipmentCode = 'S'
      }
      this.getData()
    },
    dropdownLink1(e) {
      this.bz = e
      if (e === '白班') {
        this.shiftId = '5'
      }
      if (e === '夜班') {
        this.shiftId = '2'
      }
      this.getData()
    },
  },

}
</script>
<style scoped lang="less">

.el-dropdown-menu {
  padding: 0 !important;
  border: none !important;
}

.menu {
  background-image: url("~@/assets/board/cs3/subheadClick1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 8vw;
  height: 1.66vw;
  top: 8.5%;
  line-height: 1.66vw;
  font-size: 0.8vw;
  color: #d4d4d4;
  text-align: center;

  /deep/ .el-dropdown {
    color: #fff;
  }
}

.bg {
  background-image: url("~@/assets/board/cs3/bg2.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.title {
  position: absolute;
  top: 3%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 2vw;
  color: #fff;
  letter-spacing: 2px;
  transform: translateY(-50%);
}

.subTitle {
  position: absolute;
  color: #fff;
  transform: translateY(-50%);
  font-size: 1vw;
}

.chart1 {
  position: absolute;
  top: 18%;
  left: 2.2%;
  width: 46.9%;
  height: 78%;
}

.table1 {
  position: absolute;
  top: 18%;
  left: 50.9%;
  width: 46.9%;
  height: 78%;
  overflow: auto;
}

.table1::-webkit-scrollbar {
  display: inline-block;
}

.item {
  width: 30%;
  margin: 1.5%;
  height: 13.1vw;
  display: inline-block;
  background-image: url("~@/assets/board/cs3/bg3.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}

.itemTitle {
  position: absolute;
  top: 13.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: #f8f7f4;
}

.info1 {
  position: absolute;
  top: 33.7%;
  left: 7%;
  font-size: 0.8vw;
  transform: translateY(-50%);
  color: #028cf1;
  letter-spacing: 1px;
}

.info1-1 {
  position: absolute;
  top: 33.7%;
  left: 39%;
  font-size: 0.8vw;
  transform: translateY(-50%);
  letter-spacing: 1px;
}

.info2 {
  position: absolute;
  top: 54.5%;
  left: 7%;
  width: 30%;
  font-size: 0.8vw;
  transform: translateY(-50%);
  color: #028cf1;
  letter-spacing: 1px;
  text-align: justify;
}

.info2-1 {
  position: absolute;
  top: 50.5%;
  left: 37%;
  font-size: 0.8vw;
  transform: translateY(-50%);
  letter-spacing: 1px;
  color: #dbdde9;
  white-space: nowrap;
}

.info3 {
  position: absolute;
  top: 66.7%;
  left: 7%;
  font-size: 0.8vw;
  transform: translateY(-50%);
  color: #028cf1;
  letter-spacing: 1px;
}

.info3-1 {
  position: absolute;
  top: 66.7%;
  left: 37%;
  font-size: 0.8vw;
  transform: translateY(-50%);
  letter-spacing: 1px;
  color: #dbdde9;
}

.info4 {
  position: absolute;
  top: 83.7%;
  left: 7%;
  font-size: 0.8vw;
  transform: translateY(-50%);
  color: #028cf1;
  letter-spacing: 1px;
}

.info4-1 {
  position: absolute;
  top: 83.7%;
  left: 37%;
  font-size: 0.8vw;
  transform: translateY(-50%);
  letter-spacing: 1px;
  color: #dbdde9;
}
</style>