提交

MrShi

2025-04-16 090ea2c7d46a7082e978e6c0134d3fbeafaa34a0

 screen/src/views/LogisticsEfficiency.vue

@@ -17,7 +17,7 @@
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>累计出库量统计</div>
                <div>累计出库量统计（万只）</div>
              </div>
              <div class="tabs">
                <div class="tab" :class="{ active: activeTab1 == 0 }" @click="tabClick1(0)">本月</div>
@@ -31,7 +31,8 @@
                <div class="num" v-if="data1.monthOutTotal || data1.yearOutTotal">{{ activeTab1 == 0 ?
                  data1.monthOutTotal.toLocaleString() : data1.yearOutTotal.toLocaleString() }}</div>
                <div class="unit_wrap">
                  <span style="color: #869CC9;">{{ activeTab1 == 0 ? '同比' : '环比' }}</span>
                  <!-- <span style="color: #869CC9;">{{ activeTab1 == 0 ? '同比' : '环比' }}</span> -->
                  <span style="color: #869CC9;">环比</span>
                  <template v-if="activeTab1 == 0 && data1.monthLastOutTotal">
                    <img v-if="data1.monthOutTotal > data1.monthLastOutTotal" src="@/assets/images/ic_up.png"
                      class="icon" alt="">
@@ -101,7 +102,7 @@
                </div>
                <div class="one-swiper list_temp">
                  <div class="swiper-wrapper">
                    <div class="line swiper-slide one-swiper-slide" v-for="item in dataList3">
                    <div @click="taskClick(item)" class="line swiper-slide one-swiper-slide" v-for="item in dataList3">
                      <span class="item flag"><span :class="{ flag_bg: item.type == 1 || item.type == 3 }">{{ item.type
                        == 1
                        || item.type == 3 ? '出' : '入' }}</span></span>
@@ -151,7 +152,7 @@
                        data1.currentInDoneNum
                    }}</span>
                    <span v-else>0</span>
                    <span>万支</span>
                    万支
                  </div>
                </div>
              </div>
@@ -161,9 +162,10 @@
                  <div class="name">已完成比例</div>
                  <div class="num">
                    <span v-if="activeTab4 == 0 && data1.currentOutNum" class="finish">{{ ((data1.currentOutDoneNum /
                      data1.currentOutNum) * 100).toFixed(1) }}%</span>
                      data1.currentOutNum) * 100).toFixed(1) }}</span>
                    <span v-if="activeTab4 == 1 && data1.currentInNum" class="finish">{{ ((data1.currentInDoneNum /
                      data1.currentInNum) * 100).toFixed(1) }}%</span>
                      data1.currentInNum) * 100).toFixed(1) }}</span>
                    %
                  </div>
                </div>
              </div>
@@ -193,13 +195,19 @@
                <span>车辆报警</span>
              </div>
              <div v-if="isShowCarW" class="war_list">
                <div class="line" v-for="item in data7.eventList">
                <div class="line" v-for="item in eventList">
                  <div class="id_card">{{ item.carCode }}</div>
                  <div class="title">{{ item.title }}</div>
                  <div v-if="item.time">{{ item.time.slice(11) }}</div>
                </div>
              </div>
            </div>
            <div @click="openCloudAddr" class="monitoring">
              <img src="@/assets/images/ic_jiankong@2x.png" class="icon" alt="">
              <div>车辆监控平台</div>
              <img class="top" src="@/assets/images/SecurityControl/ar_open@2x.png" alt="">
            </div>

          </div>
        </div>
        <div class="right_box">
@@ -282,9 +290,10 @@
              </div>
              <div class="list two-swiper">
                <div class="swiper-wrapper">
                  <div class="item two-swiper-slide swiper-slide" v-for="item in data6.stockList">
                  <div :class="{ orange: item.num < 200 }" class="item two-swiper-slide swiper-slide"
                    v-for="item in data6.stockList">
                    <div class="la">{{ item.name }}</div>
                    <div class="val">{{ item.num }}万支</div>
                    <div class="val">{{ item.num }}{{item.name.indexOf('托盘') === -1 ? '万支' : '个'}}</div>
                  </div>
                </div>
              </div>
@@ -325,7 +334,7 @@
              <div class="icon_wrap">
                <img v-if="i != 0" class="dian" src="@/assets/images/ic_dangqian@2x.png" alt="">
                <img v-else src="@/assets/images/ic_jindu@2x.png" class="dian_ac" alt="">
                <div class="line"></div>
                <div v-if="i != activeCar.logList.length - 1" class="line"></div>
              </div>
              <div class="content">
                <div class="status" :class="{ ac: i == 0 }">{{ statusMapD[item.objType] }}</div>
@@ -344,7 +353,8 @@
          <div class="list">
            <div class="item" v-for="item in activeCar.contractList">
              <div class="head">
                <div class="code">合同号：{{ item.ioCode }}</div>
                <div class="code">合同号：<span v-if="item.detailList && item.detailList.length > 0">{{
                  item.detailList[0].contractNum }}</span></div>
                <div class="addr">收货地：{{ item.address }}</div>
              </div>
              <div class="line" v-for="i in item.detailList">
@@ -381,7 +391,9 @@
  wltotalInList,
  wltransportMeasure,
  carsListPost,
  getCarsJobDetails
  getCarsJobDetails,
  getJobDetailsById,
  carsEventListP
} from '@/api'
import 'swiper/css/swiper.min.css'
import Swiper from 'swiper'
@@ -452,26 +464,6 @@
    yAxis: [
      {
        type: 'value',
        name: '个',
        min: 0,
        axisLabel: {
          color: '#869CC9'
        },
        nameTextStyle: {
          color: '#869CC9',
          padding: [0, 0, 0, -18]    // 四个数字分别为上右下左与原位置距离
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "rgba(49,105,129,0.4)",
            type: 'dashed'
          }
        },
      },
      {
        type: 'value',
        name: '万支',
        offset: 0,
        type: 'value',
@@ -494,6 +486,26 @@
          padding: [0, 0, 0, 12]    // 四个数字分别为上右下左与原位置距离
        },
      },
      {
        type: 'value',
        name: '个',
        min: 0,
        axisLabel: {
          color: '#869CC9'
        },
        nameTextStyle: {
          color: '#869CC9',
          padding: [0, 0, 0, -18]    // 四个数字分别为上右下左与原位置距离
        },
        splitLine: {
          show: false,
          lineStyle: {
            width: 1,
            color: "rgba(49,105,129,0.4)",
            type: 'dashed'
          }
        },
      },
    ],
    series: [
      {
@@ -506,7 +518,7 @@
          position: 'top',
          color: '#fff',
        },
        yAxisIndex: 1,
        yAxisIndex: 0,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
@@ -530,7 +542,7 @@
        name: '任务完成量',
        type: 'bar',
        barWidth: 10,
        yAxisIndex: 1,
        yAxisIndex: 0,
        label: {
          show: false,
          position: 'top',
@@ -560,7 +572,7 @@
        type: 'line',
        smooth: false,
        showAllSymbol: true,
        yAxisIndex: 0,
        yAxisIndex: 1,
        symbol: 'none',
        lineStyle: {
          color: "#1a43bc"
@@ -590,7 +602,19 @@
          show: false,
          position: 'center'
        },
        padAngle: 5,
        tooltip: {
          trigger: 'none'
        },
        emphasis: {
          // 设置悬浮时样式为空
          scale: false, // 关闭放大效果
          itemStyle: {
            shadowBlur: 0, // 阴影模糊度为 0
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0)',
          },
        },
        padAngle: 3,
        itemStyle: {
          borderRadius: 10
        },
@@ -610,6 +634,8 @@

const echartMap = ref()
const initMap = () => {
  console.log('----')

  var myChart = echarts.init(echartMap.value)
  echarts.registerMap('js', ahJSON)
  const scatterData = data7.value.carsList.map(item => {
@@ -807,6 +833,7 @@
  myChart.on('click', function (params) {
    const item = params.data
    getCarsJobDetails({ carCode: item.code }).then(res => {
      // getCarsJobDetails({ id: item.id }).then(res => {
      // getCarsJobDetails({ carCode: '皖AE5277' }).then(res => {
      showModal.value = true
      activeCar.value = { ...res.data, carCode: item.code }
@@ -826,6 +853,18 @@
const closeModal = () => {
  showModal.value = false
  activeCar.value = {}
}
const taskClick = (item) => {
  // getCarsJobDetails({ carCode: item.carCodeFront }).then(res => {
  getJobDetailsById({ id: item.id }).then(res => {
    // getCarsJobDetails({ carCode: '皖AE5277' }).then(res => {
    showModal.value = true
    activeCar.value = { ...res.data, carCode: item.carCodeFront }
  })
}

const openCloudAddr = () => {
  window.open('https://vms.hikvisionauto.com:8040/', '_blank')
}


@@ -916,11 +955,20 @@

const isShowCarW = ref(false)
const data7 = ref({})
const eventList = ref([])
const getData7 = () => {
  carsListPost().then(res => {
    const result = res.data || {}
    data7.value = result
    initMap()
  }, () => {
    data7.value = {
      carsList: []
    }
    initMap()
  })
  carsEventListP().then(res => {
    eventList.value = res.data || []
  })
}

@@ -1106,6 +1154,7 @@
            align-items: center;
            padding: 0 10px;
            font-size: 12px;
            cursor: pointer;

            &:nth-of-type(2n) {
              background: rgba(27, 64, 97, 0.52);
@@ -1295,13 +1344,13 @@
        bottom: 0;
        border-top: 1px solid #5ecbce;
        border-bottom: 1px solid #5ecbce;
        background: rgba(0, 30, 63, 0.4);
        /* backdrop-filter: blur(5px); */

        .head {
          display: flex;
          width: 280px;
          height: 57px;
          background: rgba(0, 30, 63, 0.4);
          backdrop-filter: blur(5px);
          display: flex;
          align-items: center;
          padding-left: 10px;
@@ -1318,6 +1367,8 @@
        .war_list {
          max-height: 300px;
          overflow: auto;
          padding-left: 10px;
          padding-bottom: 12px;

          .line {
            font-size: 13px;
@@ -1338,6 +1389,35 @@
              flex: 4;
            }
          }
        }
      }

      .monitoring {
        position: absolute;
        cursor: pointer;
        bottom: 10px;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 15px;
        width: 156px;
        height: 40px;
        background: linear-gradient(180deg, rgba(0, 148, 235, 0.68) 0%, rgba(0, 148, 235, 0) 100%);
        border-radius: 2px;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(177, 210, 255, 0.64), rgba(0, 171, 255, 0.7)) 1 1;

        .icon {
          width: 16px;
          height: 16px;
          margin-right: 10px;
        }

        .top {
          width: 7px;
          margin-left: 6px;
        }
      }
    }
@@ -1505,6 +1585,7 @@
            height: 36px !important;
            display: flex;
            align-items: center;
            font-size: 14px;

            &:nth-of-type(2n+1) {
              background: rgba(0, 152, 255, 0.13);
@@ -1518,6 +1599,10 @@
            .val {
              flex: 2;
            }
          }

          .orange {
            color: #FF5728;
          }
        }
      }
@@ -1839,6 +1924,7 @@
          line-height: 36px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.16);
          margin-bottom: 10px;
          padding-right: 10px;

          .code {
            font-weight: 500;
@@ -1904,4 +1990,4 @@
  object-fit: cover;
  z-index: -1;
}
</style>
</style>