优化

MrShi

7 天以前 cf69b541f8ef1ac4fae24bd99b0259b7af035490

 screen/src/views/LogisticsCenter.vue

@@ -4,7 +4,7 @@
      <img src="@/assets/images/LogisticsCenter/bg@2x.png" class="main_bg" alt="" />
      <div class="main_header">
        <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
        <div class="title">安徽中烟成品集控大屏</div>
        <div class="title">安徽中烟数智成品管控</div>
        <div class="time_wrap">
          <span class="date">{{ date }}</span>
          <span class="week">{{ week }}</span>
@@ -63,21 +63,22 @@
                  </div>

                </div>
                <div class="content">
                <div class="content" v-if="false">
                  <div class="unit_wrap">
                    <span class="la">同比</span>
                    <template v-if="StockOutData.currentNum && StockOutData.lastNum">
                      <img v-if="StockOutData.currentNum >= StockOutData.lastNum" src="@/assets/images/ic_up.png"
                    <template v-if="StockOutData.sameOutNum">
                      <img v-if="StockOutData.currentOutNum >= StockOutData.sameOutNum" src="@/assets/images/ic_up.png"
                        class="icon" alt="">
                      <img v-else src="@/assets/images/ic_down.webp" class="icon" alt="">
                    </template>
                    <span v-if="StockOutData.lastNum && StockOutData.currentNum">{{ Math.abs((((StockOutData.currentNum
                    <span v-if="StockOutData.sameOutNum">{{ Math.abs((((StockOutData.currentOutNum
                      -
                      StockOutData.lastNum) /
                      StockOutData.lastNum)
                      StockOutData.sameOutNum) /
                      StockOutData.sameOutNum)
                      * 100).toFixed(2)) }}%</span>
                    <span v-else style="margin-left: 6px;">-</span>
                    <span class="la" style="margin-left: 30px;margin-right: 10px;">累计出库车次</span>
                    <span v-if="StockOutData.totalCarNum" class="la"
                      style="margin-left: 30px;margin-right: 10px;">累计出库车次</span>
                    <span>{{ StockOutData.totalCarNum || '' }}</span>
                  </div>

@@ -438,7 +439,7 @@
          <div class="item">
            <div class="dian"></div>
            <div class="la">车辆位置：</div>
            <div class="val">{{ modalInfo.aa || '-' }}</div>
            <div class="val">{{ modalInfo.position || '-' }}</div>
          </div>
          <div class="item">
            <div class="dian"></div>
@@ -510,6 +511,7 @@
import VScaleScreen from 'v-scale-screen'
import Percent from '@/components/percent.vue'
import dayjs from 'dayjs'
import axios from "axios"
import * as echarts from 'echarts'
import 'swiper/css/swiper.min.css'
import Swiper from 'swiper'
@@ -524,6 +526,7 @@
import {
  getStoreOperationList,
  getStorecenterData,
  getStorecenterDataNew,
  getStoreenergyDataList,
  getStorelastMonthOil,
  getStoreTaskList,
@@ -814,6 +817,39 @@
        borderColor: '#fff'
      },
    },
    dataZoom: [
      {
        type: 'slider', // 滑动条类型
        orient: 'vertical',
        left: 'left',
        start: 0,       // 起始位置（百分比）
        end: 40,        // 结束位置（百分比），控制初始显示范围
        width: 1,
        backgroundColor: '#04141d', // 滑动条背景色
        // dataBackground: 'none',
        dataBackground: {
          areaStyle: { opacity: 0 }, // 设置背景透明
          lineStyle: { opacity: 0 } // 设置背景透明
        },
        borderColor: '#04141e', // 边框颜色
        moveOnMouseWheel: true,
        // showDetail: false, // 隐藏选中范围的文字
      },
      {
        type: 'inside',     // 用于监听滚轮事件
        orient: 'vertical',
        start: 0,
        end: 40,
        minSpan: 40,
        dataBackground: {
          areaStyle: { opacity: 0 } // 设置背景透明
        },
        maxSpan: 40,
        zoomLock: true,     // 锁定缩放（仅允许平移）
        moveOnMouseWheel: true, // 启用滚轮平移
        // zoomOnMouseWheel: false // 禁用滚轮缩放
      }
    ],
    grid: {
      left: '3%',
      right: '4%',
@@ -1008,6 +1044,21 @@
  showModal.value = true
  kzorderInfo({ contractNumber: item.contractNumber }).then(res => {
    modalInfo.value = res.data
    // const apiKey = 'd9a554b1808ce10a12a932ed9b0db1d0'
    const apiKey = '3916a7b434e7f13ae1a0af64e88ec0a3'
    if (modalInfo.value.gisList && modalInfo.value.gisList.length > 0) {
      const gisInfo = modalInfo.value.gisList[0]
      if (gisInfo && gisInfo.gisList && gisInfo.gisList.length > 0) {
        const adsInfo = gisInfo.gisList[gisInfo.gisList.length - 1]
        const location = adsInfo.lon1 + ',' + adsInfo.lat1
        axios.get(`https://restapi.amap.com/v3/geocode/regeo?key=${apiKey}&location=${location}`).then(res => {
          console.log('res', res.data)
          if (res.data.status == 1) {
            modalInfo.value.position = res.data.regeocode.formatted_address
          }
        })
      }
    }

    modalLoading.value = false
    nextTick(() => {
@@ -1212,7 +1263,7 @@
}
//  footer
const getData3 = () => {
  getStorecenterData({
  getStorecenterDataNew({
    factoryCode: activeCity.value.code
  }).then(res => {
    const obj = res.data || {}
@@ -1997,6 +2048,7 @@
      padding: 0px 10px 30px 20px;
      position: relative;
      height: 160px;

      .content_wrap {
        display: flex;
        justify-content: space-between;
@@ -2402,13 +2454,15 @@
                z-index: -1;
              }
            }
            .tooltip_wrap{
              .tooltip{

            .tooltip_wrap {
              .tooltip {
                z-index: 9999999999;
                top: 34px;
                transform: translate(70px, -42%);
              }
            }

            .tag1 {
              background-color: #28F0CC;
              border: 1px solid #28F0CC;
@@ -2862,12 +2916,12 @@
    flex-wrap: wrap;
    background-color: #0d2845;
    border-radius: 4px;
    padding: 10px 20px 0;
    padding: 10px 20px 0px;
    margin-bottom: 16px;

    .item {
      display: flex;
      align-items: center;
      /* align-items: center; */
      font-size: 13px;
      width: 55%;
      margin-bottom: 8px;
@@ -2882,10 +2936,16 @@
        background-color: #fff;
        border-radius: 50%;
        margin-right: 4px;
        margin-top: 7px;
      }

      .la {
        color: #01D9FE;
        width: 70px;
      }

      .val {
        flex: 1;
      }
    }
  }