优化

MrShi

2025-09-28 8995a87dc1599e2cbbfc7bc4ef0a8f68a159b5e5

 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="">
@@ -171,7 +172,7 @@
            </div>
          </div>
          <div class="center_box_two">
            <div class="list">
            <div class="list"  style="z-index: 10000">
              <div class="item">
                <img src="@/assets/images/LogisticsCenter/car_zaitu@2x.png" alt="">
                <span>在途：{{ data7.busyNum }}</span>
@@ -185,10 +186,10 @@
                <span>离线：{{ data7.offlineNum }}</span>
              </div>
            </div>
            <div class="echart_wrap">
            <div class="echart_wrap" style="width: 100%;height: 100%">
              <div ref="echartMap" class="echart_map" id="echartMap"></div>
            </div>
            <div class="warnning_info">
            <div class="warnning_info"  style="z-index: 10000">
              <div class="head" @click="isShowCarW = !isShowCarW">
                <img src="../assets/images/FireFighting/fire_right.png" alt="">
                <span>车辆报警</span>
@@ -201,6 +202,12 @@
                </div>
              </div>
            </div>
            <div @click="openCloudAddr" class="monitoring"  style="z-index: 10000">
              <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">
@@ -286,7 +293,7 @@
                  <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>
@@ -346,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">
@@ -384,6 +392,7 @@
  wltransportMeasure,
  carsListPost,
  getCarsJobDetails,
  getJobDetailsById,
  carsEventListP
} from '@/api'
import 'swiper/css/swiper.min.css'
@@ -454,7 +463,6 @@
    ],
    yAxis: [
      {
        type: 'value',
        name: '万支',
        offset: 0,
        type: 'value',
@@ -625,6 +633,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 => {
@@ -722,22 +732,26 @@
    },
    geo: [{
      map: 'js',
      roam: false, //是否允许缩放
      roam: true, //是否允许缩放
      zoom: 1.2, //默认显示级别
      scaleLimit: {
        min: 0,
        max: 3
        max: 50
      }, //缩放级别
      label: {
        show: true, // 始终显示文字
        color: '#fff' // 设置文字颜色
      },
      itemStyle: {
        normal: {
          areaColor: 'transparent',
          borderColor: '#3fdaff',
          borderWidth: 2,
          shadowColor: 'rgba(63, 218, 255, 0.5)',
          shadowBlur: 30
          areaColor: '#1d3b60',
          borderColor: '#428598',
          borderWidth: 1,
          // shadowColor: 'rgba(63, 218, 255, 0.5)',
          // shadowBlur: 30
        },
        emphasis: {
          areaColor: '#2B91B7',
          areaColor: '#5bc7d5',
        }
      },
      tooltip: {
@@ -783,12 +797,13 @@
        }
      },

      //地图
     /* //地图
      {
        type: 'map',
        mapType: 'js',
        geoIndex: -1,
        zoom: 1.2, //默认显示级别
        // roam: true, // 开启缩放和平移
        label: {
          show: true,
          color: '#ffffff',
@@ -813,7 +828,7 @@
          }
        },
        data: data
      },
      },*/
      ...serData,
    ]
  }
@@ -822,6 +837,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 }
@@ -843,11 +859,16 @@
  activeCar.value = {}
}
const taskClick = (item) => {
  getCarsJobDetails({ carCode: item.carCodeFront }).then(res => {
  // 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')
}


@@ -925,6 +946,7 @@
      i.rate = count == 0 ? 0 : ((i.num / count) * 100).toFixed(0)
    })
    data5.value = count
    console.log(data5.value)
    initEchart1()
  })
}
@@ -943,6 +965,11 @@
  carsListPost().then(res => {
    const result = res.data || {}
    data7.value = result
    initMap()
  }, () => {
    data7.value = {
      carsList: []
    }
    initMap()
  })
  carsEventListP().then(res => {
@@ -1279,7 +1306,9 @@
        }
      }
    }
    .center_box_three{

    }
    .center_box_two {
      flex: 1;
      width: 100%;
@@ -1347,6 +1376,7 @@
          overflow: auto;
          padding-left: 10px;
          padding-bottom: 12px;

          .line {
            font-size: 13px;
            color: #D2E0FF;
@@ -1366,6 +1396,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;
        }
      }
    }
@@ -1872,6 +1931,7 @@
          line-height: 36px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.16);
          margin-bottom: 10px;
          padding-right: 10px;

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