ll

liukangdong

2024-12-13 75428aa3f870b62c7ccc7ebc7c0360c5fa4fb3e6

 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,9 +129,7 @@
            </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> -->
            <img class="point_icon" src="@/assets/ani/apngb-animated.png" alt="">
            <div class="work_modal" @click="showWorkModal = false" v-if="showWorkModal">
              <img class="bg" src="@/assets/images/LogisticsCenter/bg_yuetai@2x.png" alt="">
              <div class="head">
@@ -165,9 +162,11 @@
            </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">
              <div class="video" v-for="indexCode in data4.videoIndexCodes">
                <Video v-if="indexCode" :href="data4.videoPluginUrl" :indexCode="indexCode" />
              </div>
            </div>
            <div class="list">
              <div class="line header">
                <div>月台名称</div>
@@ -227,22 +226,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 +274,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 +306,7 @@
dayjs.extend(duration)
import 'swiper/css/swiper.min.css'
import Swiper from 'swiper'
import Video from './videoUrl/Video.vue'
import {
  cnplatformGroupFinish,
  cnplatformDuration,
@@ -563,7 +565,7 @@
    }]),
  ]
  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 })
@@ -754,7 +756,7 @@

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

const showWorkModal = ref(false)
const workModalParam = ref({})
// point_icon
const pointList = ref([
  { left: 230, top: 190 },
  { left: 265, top: 180 },
  { left: 300, top: 170 },
  { left: 335, top: 160 },
  { left: 370, top: 150 },

  { left: 530, top: 50  },
  { left: 550, top: 65 },
  { left: 570, top: 75 },
  { left: 590, top: 75 },
  { left: 600, top: 80 },
  { left: 850, top: 60 },

])

const platformClick = (val) => {
  workModalParam.value = val
  console.log(val)
@@ -812,6 +831,15 @@
    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
  })
}
const autoplayFlag = (list = [], leng = 4, time = 2000) => {
  if (list.length > leng) {
    return { delay: time, disableOnInteraction: false }
@@ -845,6 +873,7 @@
    loopFn2()
    loopFn5()
    loopFn7()
    loopFn6()
  }, 12000)
})

@@ -1068,6 +1097,13 @@
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .point_icon {
        position: absolute;
        left: 850px;
        top: 60px;
      }

      .no {
        width: 28px;
        height: 28px;
@@ -1149,8 +1185,7 @@

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

      .videos {
        width: 100%;
@@ -1173,7 +1208,8 @@
        width: 100%;
        height: 210px;
        overflow-y: auto;

        background: rgba(0, 86, 255, 0.05);
      backdrop-filter: blur(5px);
        .two-swiper {
          height: 180px;
          overflow: hidden;
@@ -1203,7 +1239,7 @@
        }

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

@@ -1226,6 +1262,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 +1298,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 +1360,7 @@
    .right_box_two {
      padding: 20px 20px 0;
      margin-top: 20px;

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

        .item {
          display: flex;
          font-size: 13px;
@@ -1561,12 +1602,6 @@
  position: relative;
  z-index: -2;
  font-size: 14px;

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

  .main_bg {
    position: absolute;