zhgdlarge/src/views/sevenLargeScreen/comprehensiveManage/integratedView/bottomDwon.vue

<template>
  <div class="leftTop">
    <div class="title">
      <div><img src="@/assets/images/titleIcon.png" alt="" /></div>
      <div class="titltText">
        <i>东莞拼接厂</i>
      </div>
    </div>
    <div class="content-main">
      <div class="main1">
        <div class="item-box item-box1">
          <div class="item-box_header">生产进度统计</div>
          <div class="item-box1_bottom">
            <div class="box1_bottom-item">
              <div class="box1-item_header">
                <div></div>
                <div>{{ props.statisticsCount.jdpz }}<span>吨</span></div>
              </div>
              <div class="schedule-box">
                <div>{{ props.statisticsCount.jdpzPct }}%</div>
                <div class="schedule-bg">
                  <div :style="`width:${props.statisticsCount.jdpzPct}%`"></div>
                  <div :style="`left:${props.statisticsCount.jdpzPct}%`"></div>
                </div>
                <div>节段拼装完成量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main2">
        <div class="item-box item-box2">
          <div class="item-box_header">节段拼装列表</div>
          <div class="bottom-left">
            <div class="left-content">
              <div class="tab-list">
                <div style="width: 33%">大节段号</div>
                <div style="width: 33%">小节段号</div>
                <div style="width: 33%">重量(吨)</div>
              </div>
              <SeamlessScroll
                :key="1"
                :limitMoveNum="7"
                :memberCareList="bigScreenCountJdpzList"
              >
                <div class="list-box">
                  <div
                    v-for="(item, index) in bigScreenCountJdpzList"
                    class="list-style"
                    :key="item.id"
                  >
                    <div style="width: 33%">{{ item.largeSectionNumber }}</div>
                    <div style="width: 33%">{{ item.smallSectionNumber }}</div>
                    <div style="width: 33%">{{ item.weight }}</div>
                  </div>
                  <div class="not-data" v-if="bigScreenCountJdpzList.length == 0">
                    <img src="@/assets/images/noData.png" alt="" />
                    <p>暂无数据</p>
                  </div>
                </div>
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
      <div class="main3">
        <div class="item-box item-box2">
          <div class="item-box_header">焊接采集动态记录</div>
          <div class="bottom-left">
            <div class="left-content">
              <div class="tab-list">
                <div style="width: 7.5%">序号</div>
                <div style="width: 7.5%">梁段号</div>
                <div style="width: 8%">车间</div>
                <div style="width: 10%">设备编号</div>
                <div style="width: 10%">设备名称</div>
                <div style="width: 10%">作业者名称</div>
                <div style="width: 7.5%">焊道</div>
                <div style="width: 16%">开始焊接时间</div>
                <div style="width: 16%">结束焊接时间</div>
                <div style="width: 7.5%">时长(秒)</div>
              </div>
              <SeamlessScroll :key="2" :limitMoveNum="7" :memberCareList="weldingList">
                <div class="list-box">
                  <div
                    v-for="(item, index) in weldingList"
                    class="list-style"
                    :key="item.id"
                  >
                    <div style="width: 7.5%">{{ index + 1 }}</div>
                    <div style="width: 7.5%">{{ item.beamSegmentNumber }}</div>
                    <div style="width: 8%">{{ item.workshop }}</div>
                    <div style="width: 10%">{{ item.devSn }}</div>
                    <div style="width: 10%">{{ item.equipmentName }}</div>
                    <div style="width: 10%">{{ item.operatorName }}</div>
                    <div style="width: 7.5%">{{ item.weldBead }}</div>
                    <div style="width: 16%">{{ item.startWeldingTime }}</div>
                    <div style="width: 16%">{{ item.endWeldingTime }}</div>
                    <div class="weldbox" @click="onWeldClick(item)" style="width: 7.5%">
                      {{ item.duration }}
                    </div>
                  </div>
                  <div class="not-data" v-if="weldingList.length == 0">
                    <img src="@/assets/images/noData.png" alt="" />
                    <p>暂无数据</p>
                  </div>
                </div>
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
      <div class="main4">
        <div class="item-box item-box2">
          <div class="item-box_header">桥位环缝列表</div>
          <div class="bottom-left">
            <div class="left-content">
              <div class="tab-list">
                <div style="width: 25%">序号</div>
                <div style="width: 25%">桥位环缝编号</div>
                <div style="width: 25%">完成</div>
                <div style="width: 25%">日期</div>
              </div>
              <SeamlessScroll :key="3" :limitMoveNum="7" :memberCareList="bridgeSiteList">
                <div class="list-box">
                  <div
                    v-for="(item, index) in bridgeSiteList"
                    class="list-style"
                    :key="item.id"
                  >
                    <div style="width: 25%">{{ index + 1 }}</div>
                    <div style="width: 25%">{{ item.bridgeSiteNumber }}</div>
                    <div style="width: 25%">
                      {{
                        item.status == 2 ? "已完成" : item.status == 1 ? "未完成" : "--"
                      }}
                    </div>
                    <div style="width: 25%">{{ item.date }}</div>
                  </div>
                  <div class="not-data" v-if="bridgeSiteList.length == 0">
                    <img src="@/assets/images/noData.png" alt="" />
                    <p>暂无数据</p>
                  </div>
                </div>
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
    <projectInfoDialog ref="projectInfoDialogRef"></projectInfoDialog>
  </div>
</template>

<script setup>
import { GlobalStore } from "@/stores";
import { ref, onMounted, watch, computed, reactive } from "vue";
import {
  getBigScreenCountJdpzPageApi,
  getWeldingRecordPageApi,
  getBridgeSitePageApi,
  getProjectConfigListApi,
} from "@/api/modules/projectOverview";
import SeamlessScroll from "./components/seamlessScroll.vue";
import projectInfoDialog from "./projectInfoDialog.vue";
import * as echarts from "echarts";
const props = defineProps({
  statisticsCount: {
    type: Object,
    default: {
      jdpz: 0,
      jdpzPct: 0,
    },
  },
});
const projectInfoDialogRef = ref(null);
const store = GlobalStore();
const countNum = ref(30);
const pageInfo = reactive({
  pageNo: 1,
  pageSize: 10,
});
const bridgeSiteList = ref([]);
const bigScreenCountJdpzList = ref([]);
const weldingList = ref([]);
const showBigScreenType = ref(0);
// 桥位环缝列表
function getBridgeSitePage() {
  let data = {
    pageNo: pageInfo.pageNo,
    pageSize: 100,
    projectSn: store.sn,
  };
  getBridgeSitePageApi(data).then((res) => {
    if (res.code == 200) {
      bridgeSiteList.value = res.result.records;
    }
  });
}
// 节段拼装列表
function getBigScreenCountJdpzPage() {
  let data = {
    pageNo: pageInfo.pageNo,
    pageSize: 100,
    projectSn: store.sn,
  };
  getBigScreenCountJdpzPageApi(data).then((res) => {
    if (res.code == 200) {
      bigScreenCountJdpzList.value = res.result.records;
    }
  });
}
// 板单元完成量动态信息
function getWeldingRecordPage() {
  let data = {
    pageNo: pageInfo.pageNo,
    pageSize: 100,
    projectSn: store.sn,
  };
  if(showBigScreenType.value == 0) {
    data.showBigScreenType = 1;
  }
  getWeldingRecordPageApi(data).then((res) => {
    if (res.code == 200) {
      weldingList.value = res.result.records;
    }
  });
}
// 焊接项目配置
function getProjectConfigList() {
  const data = {
    projectSn: store.sn,
  };
  getProjectConfigListApi(data).then((res) => {
    if (res.code == 200) {
      if (!res.result || res.result.length == 0) {
        showBigScreenType.value = 0;
      } else {
        showBigScreenType.value = res.result[0].showBigScreenType;
      }
      getWeldingRecordPage();
    }
  });
}
const onWeldClick = (item) => {
  console.log(7744, item);
  projectInfoDialogRef.value.openDialog(item);
};
//将方法暴露给父组件
defineExpose({
  // projectTypeEnum
});
onMounted(() => {
  getProjectConfigList();
  getBigScreenCountJdpzPage();
  getBridgeSitePage();
});
</script>

<style lang="scss" scoped>
.weldbox {
  cursor: pointer;
  color: #65d7f9;
}
.content-main {
  margin-top: 20px;
  height: calc(100% - 40px - 20px);
  display: flex;
  justify-content: space-between;
  > div:not(:first-child) {
    margin-left: 20px;
  }
  > div {
    height: 100%;
    background-image: url("@/assets/images/cardImg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .main1 {
    width: 255px;
  }
  .main2 {
    width: 304px;
  }
  .main3 {
    width: 766px;
  }
  .main4 {
    width: 495px;
  }
}

.leftTop {
  width: 100%;
  height: 100%;
  .item-box2 {
    height: 100%;
    .bottom-left {
      width: 100%;
      height: calc(100% - 66px);
      box-sizing: border-box;
      // padding: 0 2%;
      .left-content {
        height: 100%;
        width: 100%;
        // background: url("@/assets/images/cardImg.png") no-repeat;
        // background-size: 100% 100%;
        .tab-list {
          display: flex;
          align-items: center;
          width: 100%;
          height: 25px;
          background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
          background-size: 100% 100%;
          // position: absolute;
          left: 75.5%;
          top: 75%;
          color: #ccc;
          font-size: calc(100vw * 14 / 1920);
          line-height: 30px;
          div {
            text-align: center;
            width: 24%;
          }
        }
        .list-box {
          height: calc(90% - 25px);
          position: relative;
          .list-style:nth-child(even) {
            background: rgba(39, 88, 192, 0.06);
          }
          .list-style {
            display: flex;
            align-items: center;
            color: #fff;
            line-height: 24px;
            font-size: 12px;
            div {
              text-align: center;
              width: 24%;
              white-space: nowrap;
            }
          }
          .list-style:hover {
            background: #091f3f;
          }
        }
      }
    }
    .not-data {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      img {
        width: 40%;
        margin: 5% 30%;
      }
      p {
        color: #fff;
        font-size: calc(100vw * 14 / 1920);
        margin: -6% 0%;
      }
    }
  }
  .item-box1 {
    .item-box1_bottom {
      width: calc(100% - 40px);
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .box1_bottom-item {
        width: calc(100%);
        // height: 115px;
        background-image: url("@/assets/images/cardImg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 10px 15px 10px 37px;
        .schedule-box {
          width: 100%;
          margin-top: 6px;
          > div:first-child {
            text-align: right;
            font-weight: bold;
            font-size: 15px;
            color: #ffffff;
            margin-bottom: 6px;
          }
          > div:last-child {
            font-family: PingFang SC, PingFang SC;
            font-weight: 800;
            font-size: 15px;
            color: #65d7f9;
            margin-top: 12px;
          }
          .schedule-bg {
            width: 100%;
            height: 2px;
            background: #1d497f;
            position: relative;
            > div:first-child {
              width: 50%;
              height: 100%;
              background: linear-gradient(180deg, rgba(76, 196, 248, 0) 0%, #4cc4f8 100%);
              position: absolute;
              top: 0;
              left: 0;
            }
            > div:last-child {
              width: 16px;
              height: 16px;
              background-image: url("@/assets/images/integrated-icon1.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
        .box1-item_header {
          font-family: PangMenZhengDao, PangMenZhengDao;
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
          position: relative;
          > div:first-child {
            width: 15px;
            height: 15px;
            background-image: url("@/assets/images/integrated-icon.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: absolute;
            left: -25px;
            top: 50%;
            transform: translateY(-50%);
          }
          span {
            color: rgba(255, 255, 255, 0.7);
            font-size: 13px;
          }
        }
        .charts {
          width: 100%;
          height: 90px;
        }
      }
    }
  }
  .item-box {
    .item-box_header {
      font-family: OPPOSans, OPPOSans;
      font-weight: bold;
      font-size: 18px;
      color: #ffffff;
      padding: 20px;
    }
  }
  .title {
    background: url("@/assets/images/titleImg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    position: relative;
    div {
      font-size: 18px;
      color: #ffffff;
      img {
        width: 110%;
        margin-left: 30%;
      }
      i {
        font-family: OPPOSansH;
        font-style: normal;
      }
    }
    .titltText {
      margin: 0% 0% 10px 20px;
      letter-spacing: 2px; /* 设置文字间距为2像素 */
    }
  }
}
// ::v-deep .h-card .content {
// 	height: 80%;
// }
::v-deep .h-card {
  position: relative;
}
</style>