ll

liukangdong

2024-12-24 abfe6985b2678445ea8da974b204d9fe2ffdb887

 screen/src/views/TaskEfficiency.vue

@@ -2,7 +2,6 @@
  <v-scale-screen width="1920" height="960">
    <div class="main_app">
      <img src="@/assets/images/task/bg@2x.png" class="main_bg" alt="" />
      <img class="point_icon" src="@/assets/ani/apngb-animated.png" alt="">
      <div class="main_header">
        <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
        <div class="title">安泰智慧物流园区-作业效能统筹</div>
@@ -66,7 +65,7 @@
            <div class="list one-swiper">
              <div class="swiper-wrapper">
                <div class="line one-swiper-slide swiper-slide" v-for="item, i in dataList2" :key="i">
                  <div class="top"><span v-if="i < 3">top</span>{{ i }}</div>
                  <div class="top"><span v-if="i < 3">top</span>{{ i + 1 }}</div>
                  <div class="id_card">{{ item.platformName }}</div>
                  <div class="wrap">
                    <ChargeRate :rate="item.rate" />
@@ -130,10 +129,11 @@
            </div>
          </div>
          <div class="center_box_bg">
            <!-- <div class="no no1" @click="workModalClick">1</div>
            <div class="no no2" @click="workModalClick">2</div>
            <div class="no no3" @click="workModalClick">3</div> -->
            <div class="work_modal" @click="showWorkModal = false" v-if="showWorkModal">
            <img v-if="showWorkModal" class="point_icon"
              :style="{ left: workModalParam.left + 'px', top: workModalParam.top + 'px' }"
              src="@/assets/ani/apngb-animated.png" alt="">
            <div class="work_modal" :style="{ left: workModalParam.left2 + 'px', top: workModalParam.top + 'px' }"
              @click="showWorkModal = false" v-if="showWorkModal">
              <img class="bg" src="@/assets/images/LogisticsCenter/bg_yuetai@2x.png" alt="">
              <div class="head">
                <div class="left">
@@ -163,11 +163,12 @@
                <div class="val">{{ workModalParam.finishTimeStr }}</div>
              </div>
            </div>
            <div class="modal_bg" v-if="showWorkModal" @click="showWorkModal = false"></div>
          </div>
          <div class="center_box_two">
            <!-- <div class="videos">
              <div class="video" v-for="i in 4"></div>
            </div> -->
            <div v-if="data4.videoIndexCodes && data4.videoIndexCodes.length > 0" class="videos">
              <Videos :href="data4.videoPluginUrl" :indexCodes="data4.videoIndexCodes" />
            </div>
            <div class="list">
              <div class="line header">
                <div>月台名称</div>
@@ -227,22 +228,24 @@
            <div class="echart_wrap">
              <div class="echart3" id="echart3"></div>
            </div>
            <div class="list">
              <div class="line" v-for="item, i in data6?.platformLogList">
                <div class="time_wrap">
                  <div class="time" :style="{
                    backgroundColor: item.objType == 5 ? '#4ca8f7' : item.objType == 6 ? '#f2b23e' : item.objType == 10 ? '#4673f6' : '#4aa38f'
                  }" v-if="item.createDate">{{ item.createDate.slice(11, 16) }}</div>
                  <div class="sp" :style="{
                    backgroundColor: item.objType == 5 ? '#4ca8f7' : item.objType == 6 ? '#f2b23e' : item.objType == 10 ? '#4673f6' : '#4aa38f'
                  }"></div>
                  <div class="dian" :style="{
                    backgroundColor: item.objType == 5 ? '#4ca8f7' : item.objType == 6 ? '#f2b23e' : item.objType == 10 ? '#4673f6' : '#4aa38f'
                  }"></div>
            <div class="list four-swiper">
              <div class="swiper-wrapper">
                <div class="line four-swiper-slide swiper-slide" v-for="item, i in data6?.platformLogList">
                  <div class="time_wrap">
                    <div class="time" :style="{
                      backgroundColor: item.objType == 5 ? '#4ca8f7' : item.objType == 6 ? '#f2b23e' : item.objType == 10 ? '#4673f6' : '#4aa38f'
                    }" v-if="item.createDate">{{ item.createDate.slice(11, 16) }}</div>
                    <div class="sp" :style="{
                      backgroundColor: item.objType == 5 ? '#4ca8f7' : item.objType == 6 ? '#f2b23e' : item.objType == 10 ? '#4673f6' : '#4aa38f'
                    }"></div>
                    <div class="dian" :style="{
                      backgroundColor: item.objType == 5 ? '#4ca8f7' : item.objType == 6 ? '#f2b23e' : item.objType == 10 ? '#4673f6' : '#4aa38f'
                    }"></div>
                  </div>
                  <div class="id_card">{{ item.carCodeFront || item.param4 }}</div>
                  <div class="status">{{ statusMap[item.objType] }}</div>
                  <div class="desc">{{ item.content }}</div>
                </div>
                <div class="id_card">{{ item.carCodeFront || item.param4 }}</div>
                <div class="status">{{ statusMap[item.objType] }}</div>
                <div class="desc">{{ item.content }}</div>
              </div>
            </div>
          </div>
@@ -273,7 +276,7 @@
                          <span>告警：{{ item.eventContent }}</span>
                        </div>
                        <div class="wrap">
                          <!-- <span style="margin-right: 30px;">状态：待处理</span> -->
                          <span style="margin-right: 50px;">{{ item.platformName }}</span>
                          <span>已发生：{{ item.haveTime }}</span>
                        </div>
                      </div>
@@ -305,6 +308,7 @@
dayjs.extend(duration)
import 'swiper/css/swiper.min.css'
import Swiper from 'swiper'
import Videos from './videoUrl/Videos.vue'
import {
  cnplatformGroupFinish,
  cnplatformDuration,
@@ -361,9 +365,9 @@
  const option = {
    grid: {
      top: '32%',
      left: '0%',
      left: '6%',
      right: '7%',
      bottom: '0%',
      bottom: '10%',
      containLabel: true,
    },
    legend: {
@@ -415,8 +419,11 @@
        name: '万支',
        type: 'value',
        axisLabel: {
          show: true,
          color: "#9eaaba",
          color: '#869CC9'
        },
        nameTextStyle: {
          color: '#869CC9',
          padding: [0, 0, 0, 12]    // 四个数字分别为上右下左与原位置距离
        },
        axisLine: {
          show: true,
@@ -563,11 +570,10 @@
    }]),
  ]
  const temp = []
  temp.push({ name: '签到数', value: data4.value?.signedNum || 0, rate: data4.value?.signedNum ? '100.0' : 0 })
  temp.push({ name: '签到数', value: data4.value?.signedNum || 0, rate: data4.value?.signedNum ? '100' : 0 })
  temp.push({ name: '已叫号', value: data4.value?.calledNum || 0, rate: data4.value?.signedNum ? (data4.value.calledNum / data4.value?.signedNum * 100).toFixed(1) : 0 })
  temp.push({ name: '已作业', value: data4.value?.workedNum || 0, rate: data4.value?.signedNum ? (data4.value.workedNum / data4.value?.signedNum * 100).toFixed(1) : 0 })
  temp.push({ name: '已完成', value: data4.value?.doneNum || 0, rate: data4.value?.signedNum ? (data4.value.doneNum / data4.value?.signedNum * 100).toFixed(1) : 0 })
  console.log('temp', temp)

  const option = {
    color: colors,
@@ -749,12 +755,14 @@
      i.finishTime = dayjs(i.finishTime).format('HH:mm')
      return i
    })
    console.log('dataList5', dataList5.value)

  })
}

const data6 = ref({})
const getData6 = () => {
  cncarWorkSituation({ size: 7 }).then(res => {
  cncarWorkSituation({ size: 30 }).then(res => {
    const result = res.data
    data6.value = result
  })
@@ -773,11 +781,27 @@

const showWorkModal = ref(false)
const workModalParam = ref({})
const platformClick = (val) => {
  workModalParam.value = val
  console.log(val)
// point_icon
const pointList = [
  { left: 230, top: 190, left2: 290, top2: 190, name: '出库月台3' },
  { left: 265, top: 180, left2: 325, top2: 190, name: '出库月台2' },
  { left: 300, top: 170, left2: 360, top2: 190, name: '出库月台1' },
  { left: 335, top: 160, left2: 390, top2: 190, name: '整托盘出库2' },
  { left: 370, top: 150, left2: 430, top2: 190, name: '整托盘出库1' },

  showWorkModal.value = !showWorkModal.value
  { left: 530, top: 50, left2: 590, top2: 190, name: '入库月台2' },
  { left: 550, top: 65, left2: 610, top2: 190, name: '入库月台1' },
  { left: 570, top: 75, left2: 630, top2: 190, name: '入库月台3' },
  { left: 590, top: 75, left2: 650, top2: 190, name: '1095整托盘入库' },
  { left: 600, top: 80, left2: 660, top2: 190, name: '1099整托盘入库' },
  { left: 850, top: 60, left2: 520, top2: 190, name: '市公司月台' },

]

const platformClick = (val) => {
  const index = pointList.findIndex(i => i.name == val.platformName)
  workModalParam.value = { ...val, ...pointList[index], index: pointList }
  showWorkModal.value = true
}
const loopFn2 = () => {
  var newSwiper1 = new Swiper('.one-swiper', {
@@ -809,6 +833,15 @@
    slidesPerView: 2,
    // autoplay: { delay: 500, disableOnInteraction: false },
    autoplay: autoplayFlag(dataList2.value, 2, 4000),
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}
const loopFn6 = () => {
  var newSwiper1 = new Swiper('.four-swiper', {
    initialSlide: 0,
    direction: 'vertical', //竖直方向
    slidesPerView: 7,
    autoplay: autoplayFlag(data6.value.platformLogList, 7, 4000),
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}
@@ -845,6 +878,7 @@
    loopFn2()
    loopFn5()
    loopFn7()
    loopFn6()
  }, 12000)
})

@@ -1068,6 +1102,14 @@
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .point_icon {
        position: absolute;
        left: 850px;
        top: 60px;
      }

      .no {
        width: 28px;
        height: 28px;
@@ -1085,8 +1127,10 @@
      .work_modal {
        width: 314px;
        height: 180px;
        position: relative;
        position: absolute;
        padding: 22px 20px;
        left: 850px;
        top: 60px;

        .head {
          display: flex;
@@ -1145,15 +1189,23 @@
        }

      }

      .modal_bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        /* background-color: rgba(0,0,0,.1); */
      }
    }

    .center_box_two {
      width: 100%;
      background: rgba(0, 86, 255, 0.05);
      backdrop-filter: blur(5px);

      .videos {
        width: 100%;
        height: 150px;
        display: flex;
        margin-bottom: 15px;

@@ -1173,6 +1225,8 @@
        width: 100%;
        height: 210px;
        overflow-y: auto;
        background: rgba(0, 86, 255, 0.05);
        backdrop-filter: blur(5px);

        .two-swiper {
          height: 180px;
@@ -1203,7 +1257,7 @@
        }

        .lined {
          background: rgba(0,160,255,0.6) !important;
          background: rgba(0, 160, 255, 0.6) !important;
          font-weight: 600 !important;
        }

@@ -1226,6 +1280,7 @@
      backdrop-filter: blur(5px);
      background: rgba(0, 86, 255, 0.05);
      backdrop-filter: blur(5px);

      .static_wrap {
        display: flex;
        padding: 20px 0 15px;
@@ -1261,14 +1316,16 @@

      .list {
        margin: 0 20px 0;
        width: 100%;
        height: 222px;
        width: 430px;
        height: 231px;
        overflow: hidden;
        scrollbar-width: none;

        .line {
          display: flex;
          align-items: center;
          font-size: 12px;
          height: 33px;
          height: 33px !important;
          color: #D2E0FF;
          width: 100%;

@@ -1321,6 +1378,7 @@
    .right_box_two {
      padding: 20px 20px 0;
      margin-top: 20px;

      .list {
        height: 220px;
        overflow: hidden;
@@ -1328,6 +1386,7 @@
        background: rgba(0, 86, 255, 0.05);
        backdrop-filter: blur(5px);
        padding-top: 15px;

        .item {
          display: flex;
          font-size: 13px;
@@ -1562,12 +1621,6 @@
  z-index: -2;
  font-size: 14px;

  .point_icon {
    position: absolute;
    left: 800px;
    top: 420px;
  }

  .main_bg {
    position: absolute;
    left: 0;
@@ -1588,4 +1641,4 @@
  object-fit: cover;
  z-index: -1;
}
</style>
</style>