ll

liukangdong

2024-12-24 abfe6985b2678445ea8da974b204d9fe2ffdb887

 screen/src/views/LogisticsCenter.vue

@@ -3,7 +3,7 @@
    <div class="main_app">
      <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="" /> -->
        <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
        <div class="title">全省物流在途</div>
        <div class="time_wrap">
          <span class="date">{{ date }}</span>
@@ -21,6 +21,7 @@
            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
          </div>
          <div class="left_box_one">
            <Loading v-if="loading1" />
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
@@ -36,7 +37,7 @@
            </div>
            <div class="content_wrap">
              <div class="num_wrap">
                <div class="num_list" v-if="StockOutData.currentNum">
                <div class="num_list" v-if="StockOutData.currentNum || StockOutData.currentNum == 0">
                  <div class="num" v-for="i in StockOutData.currentNum + ''">
                    {{ i }}
                    <img class="bg" src="@/assets/images/LogisticsCenter/bg_number@2x.png" alt="">
@@ -89,7 +90,7 @@
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
                <div>当前运输任务</div>
                <div>当前订单任务</div>
              </div>
              <div class="search_wrap">
                <img src="@/assets/images/LogisticsCenter/ic_search@2x.png" alt="">
@@ -117,7 +118,12 @@
                  </div>
                </div>
              </div>

              <template v-if="isLoadingTask || transportTask.length == 0">
                <Loading v-if="isLoadingTask" />
                <div class="empty" v-else>
                  <img src="@/assets/images/default_nodata.png" alt="">
                </div>
              </template>
            </div>
          </div>
        </div>
@@ -172,7 +178,7 @@
            </div>
            <div class="footer">
              <div class="wrap">
                <div class="content">
                <div class="content" :style='{ width: cneterData.level1 }'>
                  <div class="scale">0</div>
                  <!-- <div class="node">
                    <div>8h</div>
@@ -181,24 +187,39 @@
                      <div class="icon icon2"></div>
                    </div>
                  </div> -->
                  <div class="box">
                    <div class="tag">
                  <div :style="{ width: cneterData.level3 }"
                    :class="{ box23: cneterData.crrentOutNum >= cneterData.hoursAbility }" class="box">
                    <div v-if="cneterData.crrentOutNum < cneterData.hoursAbility" class="tag">
                      <div class="icon"></div>
                      <span>今日出库</span>
                    </div>
                  </div>
                  <div class="box box1">
                    <div class="tag tag1">
                  <div :style="{ width: cneterData.level2 }" class="box box1">
                    <div v-if="cneterData.hoursAbility >= cneterData.currentPlanNum" class="tag tag1">
                      <div class="icon"></div>
                      <span>当日计划</span>
                    </div>
                  </div>
                </div>
                <!-- <div class="side">
                  <div class="box"></div>
                <div class="side">
                  <div v-if="cneterData.crrentOutNum >= cneterData.hoursAbility" :style="{ width: cneterData.level33 }"
                    class="box box22">
                    <div class="tag">
                      <div class="icon"></div>
                      <span>今日出库</span>
                    </div>
                  </div>
                  <div v-if="cneterData.hoursAbility <= cneterData.currentPlanNum"
                    :style="{ width: cneterData.level22 }" class="box box1 box11">
                    <div class="tag tag1">
                      <div class="icon"></div>
                      <span>当日计划</span>
                    </div>
                  </div>
                  <!-- <div class="box"></div> -->
                  <div class="scale" style="left: -12px;">8h</div>
                  <div class="scale scale1">最大</div>
                </div> -->
                </div>
              </div>
            </div>
          </div>
@@ -208,13 +229,13 @@
              <div class="list">
                <div class="head line">
                  <div class="item">车牌号</div>
                  <div class="item contract">合同号</div>
                  <div class="item">目的地</div>
                  <div class="item">合同号</div>
                  <div class="item addr">目的地</div>
                </div>
                <div class="line" v-for="item in active1List">
                  <div class="item">{{ item.platNumber }}</div>
                  <div class="item contract">{{ item.contractNumber }}</div>
                  <div class="item">{{ item.repertotyName }}</div>
                  <div class="item">{{ item.contractNumber }}</div>
                  <div class="item addr">{{ item.repertotyName }}</div>
                </div>
              </div>
            </div>
@@ -254,7 +275,7 @@
              </div>
              <div class="side">
                全省：
                <span>{{ data5.totalNum }}</span>
                <span>{{ data5.currentNum }}</span>
                <span class="unit">万支 | </span>
                <span v-if="data5.totalNum">{{ ((data5.currentNum / data5.totalNum) * 100).toFixed(1) }}%</span>
              </div>
@@ -269,7 +290,12 @@
                <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
                <div>出库能力利用率</div>
              </div>
              <div class="side">全省：<span>100<span class="unit">万支 |</span> 40.6%</span></div>
              <div class="side">
                全省：
                <span>{{ data6.currentNum }}</span>
                <span class="unit">万支 | </span>
                <span v-if="data6.totalNum">{{ ((data6.currentNum / data6.totalNum) * 100).toFixed(1) }}%</span>
              </div>
            </div>
            <div class="echart5_wrap">
              <div class="echart5" id="echart6"></div>
@@ -281,7 +307,12 @@
                <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
                <div>运用资源利用率</div>
              </div>
              <div class="side">全省：<span>100<span class="unit">万支 |</span> 40.6%</span></div>
              <div class="side">
                全省：
                <span>{{ data7.currentNum }}</span>
                <span class="unit">辆 | </span>
                <span v-if="data7.totalNum">{{ ((data7.currentNum / data7.totalNum) * 100).toFixed(1) }}%</span>
              </div>
            </div>
            <div class="echart5_wrap">
              <div class="echart5" id="echart7"></div>
@@ -334,7 +365,7 @@
          </div>
          <div id="map-container" ref="mapContainer"></div>
          <div class="fu_list">
            <div class="fu_item" v-for="item, i in modalInfo.cicleStatusList">
            <div class="fu_item" v-for="item, k in modalInfo.cicleStatusList">
              <div class="item_title">
                <div class="icon">
                  <img v-if="item.key == 0 && k != 0" src="@/assets/images/LogisticsCenter/ic_dingdan@2x.png"
@@ -378,8 +409,9 @@
            </div>
          </div>
        </div>
        <Loading v-if="modalLoading" />
      </div>
      <div class="modal_mask" v-if="showModal" @click="showModal = false"></div>
      <div class="modal_mask" v-if="showModal" @click="closeModal"></div>
    </div>
  </v-scale-screen>
</template>
@@ -396,9 +428,12 @@
import chinaJSON from '@/assets/china.json'
import fahuoImg from '@/assets/images/LogisticsCenter/ic_fahuodi@2x.png'
import shouImg from '@/assets/images/LogisticsCenter/ic_huowu@2x.png'
// import Loading from 'vue-loading-overlay'
// import 'vue-loading-overlay/dist/css/index.css'
import Loading from '@/components/Loading.vue'

import {
  getStoreOperationList,
  getStorearriveGoodsList,
  getStorecenterData,
  getStoreenergyDataList,
  getStorelastMonthOil,
@@ -424,67 +459,6 @@
  time.value = dayjs().format('HH:mm:ss')

}, 1000)

const initEchart2 = () => {
  const myChart = echarts.init(document.getElementById('echart1'))
  const option = {
    series: [
      {
        type: 'pie',
        radius: ['86%', '100%'],
        label: {
          show: false,
          position: 'center'
        },
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        color: colors,
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' }
        ]
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // 执行
    myChart.resize()
  })
}
const initEchart3 = () => {
  const myChart = echarts.init(document.getElementById('echart3'))
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: ['80%', '96%'],
        label: {
          show: false,
          position: 'center'
        },
        color: ['#72ecc5', '#19373a'],
        labelLine: {
          show: false
        },
        data: [3, 7]
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // 执行
    myChart.resize()
  })
}

// 
const mapList = ref([])
const mapEchart = ref()
@@ -536,6 +510,7 @@
    { name: '台湾省', value: 0 },
    { name: '香港特别行政区', value: 0 },
    { name: '澳门特别行政区', value: 0 },
    { name: '南海诸岛', value: 0 },
  ]
  mapData.forEach(item => {
    item.monthNum = 0
@@ -557,7 +532,7 @@
        { min: 100000, max: 99999999999, label: '出库量10w以上', color: '#be6f2b' },
        { min: 50000, max: 100000, label: '出库量5-10w', color: '#c39332' },
        { min: 20000, max: 50000, label: '出库量2-5w', color: '#5ecbaf' },
        { min: -1, max: 20000, label: '出库量2w以下', color: '#325a9b' },
        { min: -1, max: 20000, label: '出库量2w以下', color: '#3561a4' },
      ],
      itemWidth: 22,
      itemHeight: 22,
@@ -595,8 +570,8 @@
      center: [105.194115019531, 36.582111640625], // 地图中心位置， 此处的纬度与下面的center相差1度是形成阴影的距离，可自己随意调整
      itemStyle: {
        areaColor: '#152e4a', //地图阴影的颜色
        borderColor: '#f7f7f7', // 省份边框颜色
        borderWidth: 0.1, // 省份边框宽度
        borderColor: '#779dc8', // 省份边框颜色
        borderWidth: 0.5, // 省份边框宽度
        // shadowBlur: 5, // 省份边框聚焦
      },
      emphasis: {
@@ -737,6 +712,9 @@
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        color: '#D2E0FF'
      },
      splitLine: {
        show: true,
        lineStyle: {
@@ -749,6 +727,9 @@
    yAxis: {
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#D2E0FF'
      },
      type: 'category',
      axisLine: {
@@ -885,7 +866,7 @@

const dataList1 = ref([])
const getData1 = () => {
  getStorearriveGoodsList({
  arriveGoodsList({
    factoryCode: activeCity.value.code
  }).then(res => {
    dataList1.value = res.data || []
@@ -896,24 +877,30 @@
const transportTask = ref([])
const taskCode = ref('')
const showModal = ref(false)
const modalLoading = ref(false)
const modalInfo = ref({})
const modalTab = ref(0)
const pager = ref({
  page: 0,
  rows: 10
  rows: 50
})
const modalTabClick = (val) => {
  modalTab.value = val
}
const taskClick = (item) => {
  modalLoading.value = true
  showModal.value = true
  kzorderInfo({ contractNumber: item.contractNumber }).then(res => {
    modalInfo.value = res.data
    showModal.value = true
    console.log('modalInfo.value', modalInfo.value)

    modalLoading.value = false
    nextTick(() => {
      initGdMap()
    })
  }, () => {
    modalLoading.value = false
  })
}
const closeModal = () => {
  showModal.value = false
  modalInfo.value = {}
}


@@ -996,8 +983,9 @@
  })
  map.add(polyline)
}
const isLoadingTask = ref(false)
const getData2 = () => {

  isLoadingTask.value = true
  getStoreTaskList({
    pager: pager.value,
    parameters: {
@@ -1005,6 +993,7 @@
      facrotyCodeList: activeCity.value.code ? [activeCity.value.code] : []
    }
  }).then(res => {
    isLoadingTask.value = false
    let temp = res.data.rows || []
    transportTask.value = temp.map(item => {
      if (item.transportDate) {
@@ -1012,6 +1001,10 @@
      }
      return item
    })
    console.log('isLoadingTask', isLoadingTask.value)

  }, () => {
    isLoadingTask.value = false
  })
}

@@ -1020,7 +1013,7 @@
const cityList = ref()
const getCity = () => {
  kzfactoryList().then(res => {
    cityList.value = res.data
    cityList.value = [{ name: '全省', code: '' }, ...res.data]
  })
}
const activeCity = ref({ name: '全省', code: '' })
@@ -1060,9 +1053,12 @@
}

const activeTab1 = ref(0)
const loading1 = ref(false)
const StockOutData = ref({})
const getStockOut = () => {
  loading1.value = true
  kztotalOutQtyNum({ type: activeTab1.value, factoryCode: activeCity.value.code }).then(res => {
    loading1.value = false
    if (res.code == 200) {
      let obj = res.data
      obj.currentNum = (obj.currentOutNum + obj.currentInNum).toFixed(0) * 1
@@ -1077,15 +1073,54 @@
      initEchart1()
    }

  }, () => {
    loading1.value = false
  })
}
const tab1Click = (val) => {
  activeTab1.value = val
  getStockOut()
}
//  footer
const getData3 = () => {
  getStorecenterData().then(res => {
    cneterData.value = res.data || {}
  getStorecenterData({
    factoryCode: activeCity.value.code
  }).then(res => {
    const obj = res.data || {}
    console.log('obj', obj)

    // 8小时 计划 今日
    // obj.hoursAbility = 6000
    // obj.maxAbility = 8000
    // obj.currentPlanNum = 5000
    // obj.crrentOutNum = 7000

    obj.level1 = ((obj.hoursAbility / obj.maxAbility) * 100).toFixed(2) + '%'
    if (obj.currentPlanNum >= obj.hoursAbility) {
      obj.level2 = '100%'
      obj.level22 = (((obj.currentPlanNum - obj.hoursAbility) / (obj.maxAbility - obj.hoursAbility)) * 100).toFixed(2)
      obj.level22 = obj.level22 > 100 ? '100%' : obj.level22 + '%'
    } else {
      obj.level2 = ((obj.currentPlanNum / obj.hoursAbility) * 100).toFixed(2) + '%'
      obj.level22 = 0
    }
    if (obj.crrentOutNum >= obj.hoursAbility) {
      obj.level3 = '100%'
      obj.level33 = (((obj.crrentOutNum - obj.hoursAbility) / (obj.maxAbility - obj.hoursAbility)) * 100).toFixed(2)
      obj.level33 = obj.level33 > 100 ? '100%' : obj.level33 + '%'
    } else {
      obj.level3 = ((obj.crrentOutNum / obj.hoursAbility) * 100).toFixed(2) + '%'
      obj.level33 = 0
    }

    // console.log('obj1', obj.level1);
    // console.log('obj2', obj.level2);
    // console.log('obj22', obj.level22);
    // console.log('obj3', obj.level3);
    // console.log('obj33', obj.level33);

    cneterData.value = obj

  })
}

@@ -1100,7 +1135,7 @@
    legend: {
      itemGap: 12,
      // icon: 'circle',
      right: '16%',
      right: '12%',
      top: '0%',
      data: ['总库存', '当前库存', '库存利用率'],
      itemWidth: 20,
@@ -1130,8 +1165,7 @@
        },
      },
      axisLabel: {
        color: '#869CC9'
        // fontSize: 24,
        color: '#D2E0FF'
      },
      axisTick: {
        show: false,
@@ -1147,7 +1181,6 @@
        nameGap: 16,
        type: 'value',
        axisLabel: {
          show: true,
          color: "#869CC9",
        },
        axisLine: {
@@ -1167,10 +1200,13 @@
        name: '%',
        nameGap: 16,
        min: 0,
        max: 100,
        interval: 25,
        // max: 100,
        axisLabel: {
          formatter: '{value}'
          color: "#869CC9",
        },
        nameTextStyle: {
          color: '#869CC9',
          padding: [0, 0, 0, 12]
        },
        splitLine: false
      }
@@ -1274,7 +1310,7 @@
      // icon: 'circle',
      right: '10%',
      top: '0',
      data: ['出库能力', '当日出库量', '库存利用率'],
      data: ['出库能力', '当日出库量', '出库利用率'],
      itemWidth: 20,
      itemHeight: 10,
      textStyle: {
@@ -1302,8 +1338,10 @@
        },
      },
      axisLabel: {
        color: '#869CC9'
        // fontSize: 24,
        color: "#869CC9",
      },
      nameTextStyle: {
        color: '#869CC9',
      },
      axisTick: {
        show: false,
@@ -1312,15 +1350,15 @@
    }],
    yAxis: [
      {
        nameTextStyle: {
          color: '#869CC9',
        },
        name: '万支',
        nameGap: 16,
        type: 'value',
        axisLabel: {
          show: true,
          color: "#869CC9",
        },
        nameTextStyle: {
          color: '#869CC9',
          padding: [0, 0, 0, 12]
        },
        axisLine: {
          show: true,
@@ -1339,10 +1377,12 @@
        name: '%',
        nameGap: 16,
        min: 0,
        max: 100,
        interval: 25,
        axisLabel: {
          formatter: '{value}'
          color: "#869CC9",
        },
        nameTextStyle: {
          color: '#869CC9',
          padding: [0, 0, 0, 12]
        },
        splitLine: false
      }
@@ -1415,7 +1455,7 @@
        barGap: '-100%' // 设置柱子完全重叠
      },
      {
        name: '库存利用率',
        name: '出库利用率',
        type: 'line',
        smooth: false,
        showAllSymbol: true,
@@ -1447,9 +1487,9 @@
    legend: {
      itemGap: 12,
      // icon: 'circle',
      right: '16%',
      right: '10%',
      top: '0%',
      data: ['总库存', '当前库存', '库存利用率'],
      data: ['总运力资源', '当日提报运力', '车辆利用率'],
      itemWidth: 20,
      itemHeight: 10,
      textStyle: {
@@ -1477,8 +1517,11 @@
        },
      },
      axisLabel: {
        color: '#869CC9'
        // fontSize: 24,
        color: "#869CC9",
      },
      nameTextStyle: {
        color: '#869CC9',
        padding: [0, 0, 0, 12]
      },
      axisTick: {
        show: false,
@@ -1490,7 +1533,7 @@
        nameTextStyle: {
          color: '#869CC9',
        },
        name: '万支',
        name: '辆',
        nameGap: 16,
        type: 'value',
        axisLabel: {
@@ -1514,17 +1557,19 @@
        name: '%',
        nameGap: 16,
        min: 0,
        max: 100,
        interval: 25,
        axisLabel: {
          formatter: '{value}'
          color: "#869CC9",
        },
        nameTextStyle: {
          color: '#869CC9',
          padding: [0, 0, 0, 12]
        },
        splitLine: false
      }
    ],
    series: [
      {
        name: '总库存',
        name: '总运力资源',
        type: 'bar',
        barWidth: 10,
        barGap: '60%',
@@ -1538,11 +1583,11 @@
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#2e6bf3'
              color: '#73f0c6'
            },
            {
              offset: 1,
              color: '#5fcbab'
              color: '#3f8ca6'
            }
          ], false),
          lineStyle: {
@@ -1554,7 +1599,7 @@
        data: data7.value.detailList.map(i => i.totalNum)
      },
      {
        name: '当前库存',
        name: '当日提报运力',
        type: 'bar',
        barWidth: 10,
        label: {
@@ -1567,15 +1612,15 @@
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#eda13a'
              color: '#ed7e32'
            },
            {
              offset: 0.6,
              color: '#dfb44e'
              color: '#e99b5c'
            },
            {
              offset: 1,
              color: '#ccc16c'
              color: '#e7a774'
            }
          ], false),
          lineStyle: {
@@ -1587,7 +1632,7 @@
        data: data7.value.detailList.map(i => i.currentNum)
      },
      {
        name: '库存利用率',
        name: '车辆利用率',
        type: 'line',
        smooth: false,
        showAllSymbol: true,
@@ -1615,21 +1660,29 @@
  kzinventoryUseRate().then(res => {
    data5.value = res.data
    data5.value.detailList.forEach(item => {
      item.useRate = item.useRate * 100
      if (item.useRate) {
        item.useRate = (item.useRate * 100).toFixed(1)
      }

    })
    initEchart5()
  })
  outAbilityUseRate().then(res => {
    data6.value = res.data
    data6.value.detailList.forEach(item => {
      item.useRate = item.useRate * 100
      if (item.useRate) {
        item.useRate = (item.useRate * 100).toFixed(1)
      }
    })
    initEchart6()
  })
  tranportAbilityUseRate().then(res => {
    data7.value = res.data
    data7.value.detailList.forEach(item => {
      item.useRate = item.useRate * 100
      // item.useRate = item.useRate * 100
      if (item.useRate) {
        item.useRate = (item.useRate * 100).toFixed(1)
      }
    })
    initEchart7()
  })
@@ -1669,6 +1722,11 @@
  getCity()
  changeCity()
  getData5()
  setInterval(() => {
    getCity()
    changeCity()
    getData5()
  }, 1000 * 60 * 10)
  setTimeout(() => {
    loopFn1()
  }, 12000)
@@ -1729,6 +1787,7 @@
    .left_box_one {
      margin-top: 20px;
      padding: 0px 10px 30px 20px;
      position: relative;

      .content_wrap {
        display: flex;
@@ -1848,9 +1907,22 @@
      }

      .list_wrap {
        position: relative;

        .list {
          height: 200px;
          overflow: hidden;
        }

        .empty {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 200px;

          img {
            width: 144px;
          }
        }

        .line {
@@ -1873,7 +1945,7 @@
          }

          .status {
            flex: 5;
            flex: 3.2;
          }
        }

@@ -2041,47 +2113,18 @@
          height: 76px;

          .content {
            flex: 5;
            width: 80%;
            height: 16px;
            background: rgba(255, 255, 255, 0.13);
            border-radius: 8px;
            margin-right: 4px;
            margin-right: 6px;
            display: flex;
            position: relative;

            .node {
              position: absolute;
              left: 69%;
              top: -20px;
              width: 22px;
              height: 70px;
              z-index: 999;
              overflow: hidden;

              .node_icon {
                background-color: #051623;
                height: 16px;

                .icon {
                  background-color: #25333f;
                  height: 16px;
                  width: 16px;
                  position: absolute;
                  top: 20px;
                  right: -8px;
                  border-radius: 50%;
                  overflow: hidden;
                }

                .icon2 {
                  right: 12px;
                }
              }
            }
          }

          .box {
            width: 40%;
            width: 80%;
            height: 16px;
            background: linear-gradient(270deg, #FF9F02 0%, #FFEA70 100%);
            border-radius: 8px;
@@ -2102,6 +2145,9 @@
              border-radius: 12px;
              display: flex;
              align-items: center;
              justify-content: center;
              min-width: 76px;
              border: 1px solid #fff;

              .icon {
                position: absolute;
@@ -2126,9 +2172,21 @@
          }

          .box1 {
            width: 70%;
            width: 10%;
            z-index: 9;
            background: linear-gradient(270deg, #15FDC8 0%, #006BFF 100%);
            background: linear-gradient(270deg, #68dfd3 0%, #006BFF 100%);
          }

          .box11 {
            background: linear-gradient(270deg, #75f8cc 0%, #68dfd3 100%);
          }

          .box22 {
            background: linear-gradient(270deg, #f2a43b 0%, #ecbb61 100%);
          }

          .box23 {
            background: linear-gradient(270deg, #f4b34a 0%, #FFEA70 100%);
          }

          .scale {
@@ -2141,10 +2199,11 @@

          .scale1 {
            left: 84%;
            min-width: 36px;
          }

          .side {
            flex: 2;
            flex: 1;
            height: 16px;
            background: rgba(255, 255, 255, 0.13);
            border-radius: 8px;
@@ -2192,7 +2251,14 @@
            }

            .item {
              flex: 2;
              flex: 3;
            }

            .addr {
              flex: 5;
              display: flex;
              flex-wrap: nowrap;
              overflow: hidden;
            }
          }

@@ -2349,7 +2415,8 @@
    top: 220px;
    right: 10px;
    z-index: 999999;
    :deep(.amap-markers){

    :deep(.amap-markers) {
      left: -12px !important;
      top: -32px !important;
    }