ll

liukangdong

2024-10-12 e3c4c450480930d377b1eeb832eb75c3b4f1aa45

ll

 admin/.env.development

@@ -2,6 +2,7 @@
NODE_ENV = 'development'

VUE_APP_API_URL  = 'http://localhost:10010'
# VUE_APP_API_URL  = 'http://192.168.0.103:10010'
VUE_APP_API_URL  = 'http://10.50.250.253:8088/gateway_interface'
# VUE_APP_API_URL  = 'http://192.168.0.139:10010'
# VUE_APP_API_URL  = 'http://10.50.250.253:8088/gateway_interface'
VUE_APP_API_URL  = 'https://dmtest.ahapp.net/antai_admin_interface/'


 screen/package.json

@@ -5,6 +5,7 @@
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "serve": "vite --host",
    "build": "vite build",
    "preview": "vite preview"
  },

 screen/src/assets/images/energy_ef/bg@2x.png

 screen/src/assets/images/energy_ef/car_kongxian@2x.png

 screen/src/assets/images/energy_ef/car_lixian@2x.png

 screen/src/assets/images/energy_ef/car_zaitu@2x.png

 screen/src/assets/images/energy_ef/china@2x.png

 screen/src/assets/images/energy_ef/chuku_ic_car@2x.png

 screen/src/assets/images/energy_ef/chuku_task.png

 screen/src/assets/images/energy_ef/chuku_task_ac.png

 screen/src/assets/images/energy_ef/ic_bili@2x.png

 screen/src/assets/images/energy_ef/ic_chukuxiaolv@2x.png

 screen/src/assets/images/energy_ef/ic_renwuzongliang@2x.png

 screen/src/assets/images/energy_ef/ic_rukuxiaolv@2x.png

 screen/src/assets/images/energy_ef/ic_wanchengrenwu@2x.png

 screen/src/assets/images/energy_ef/map_car_kongxian@2x.png

 screen/src/assets/images/energy_ef/map_car_lixian@2x.png

 screen/src/assets/images/energy_ef/map_car_zaitu@2x.png

 screen/src/assets/images/energy_ef/ruku_task.png

 screen/src/assets/images/energy_ef/ruku_task_ac.png

 screen/src/assets/images/maintitle.gif

 screen/src/router/index.js

@@ -6,7 +6,7 @@
  routes: [
    {
      path: '/',
      component: () => import('../views/PlatformCall.vue')
      component: () => import('../views/LogisticsEfficiency.vue')
    },
    {
      path: '/PlatformCall',
@@ -18,6 +18,11 @@
      name: 'EnergyConsum',
      component: () => import('../views/EnergyConsum.vue')
    },
    {
      path: '/LogisticsControl',
      name: 'LogisticsControl',
      component: () => import('../views/LogisticsEfficiency.vue')
    },
  ]
})


 screen/src/views/EnergyConsum.vue

@@ -1,10 +1,11 @@
<template>
  <v-scale-screen width="1920" height="960" :fullScreen="true">
  <div class="main_app">
    <img src="@/assets/images/bg_main_app.png" class="main_bg" alt="" />
    <div class="main_header">
      <img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
      <div class="title">安泰智慧物流园区-绿色低碳运营</div>
      <div class="time">
        <div class="time_wrap">
        <span class="date">{{ date }}</span>
        <span class="week">{{ week }}</span>
        <span class="time">{{ time }}</span>
@@ -236,6 +237,7 @@
      </div>
    </div>
  </div>
  </v-scale-screen>
</template>

<script setup>
@@ -243,6 +245,7 @@
import dayjs from 'dayjs'
import ChargeRate from '@/components/ChargeRate.vue'
import * as echarts from 'echarts'
import VScaleScreen from 'v-scale-screen'


const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
@@ -591,10 +594,12 @@

    .left_box_two {
      margin-bottom: 20px;

      .load_wrap{
        width: 100%;
        height: 210px;
        padding: 12px 12px;

        .loadRef{
          width: 100%;
          height: 100%;
@@ -606,6 +611,7 @@
      .energy_wrap{
        width: 100%;
        height: 200px;

        .energyRef{
          width: 100%;
          height: 100%;
@@ -805,6 +811,7 @@

    .right_box_one {
      margin-bottom: 20px;

      .content {
        height: 164px;
        display: flex;
@@ -825,14 +832,18 @@
        }
      }
    }

    .right_box_two{
      margin-bottom: 20px;

      .list{
        padding: 20px 24px 4px;

        .line{
          display: flex;
          align-items: center;
          margin-bottom: 16px;

          .top{
            font-weight: 500;
            font-size: 12px;
@@ -844,18 +855,21 @@
            box-shadow: inset 0px 0px 3px 0px #01D9FE;
            margin-right: 10px;
          }

          .id_card{
            color: #DBEAEA;
            font-weight: 500;
            margin-right: 14px;
            font-size: 14px;
          }

          .num{
            font-weight: 500;
            font-size: 13px;
            color: #DBEAEA;
            margin-left: 15px;
          }

          .wrap{
            flex: 1;
            height: 20px;
@@ -864,9 +878,11 @@
        }
      }
    }

    .right_box_three{
      .wrap{
        padding: 8px;

        .analyseRef{
          width: 100%;
          height: 210px;
@@ -963,7 +979,7 @@
    -webkit-text-fill-color: transparent;
  }

  .time {
  .time_wrap {
    font-size: 26px;
    font-weight: 600;
    background-image: -webkit-linear-gradient(top,
@@ -1001,11 +1017,10 @@
}

.main_app {
  width: 100%;
  min-height: 100vh;
  width: 1920px;
  height: 980px;
  color: #ffffff;
  position: relative;

  .main_bg {
    position: absolute;
    left: 0;

 screen/src/views/LogisticsControl.vue

ÎļþÒÑɾ³ý

 screen/src/views/LogisticsEfficiency.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,637 @@
<template>
  <v-scale-screen width="1920" height="960" :fullScreen="true">
    <div class="main_app">
      <img src="@/assets/images/energy_ef/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@2x.png" class="main_header_bg" alt="" />
        <div class="title">安泰智慧物流园区-调度能效跟踪</div>
        <div class="time_wrap">
          <span class="date">{{ date }}</span>
          <span class="week">{{ week }}</span>
          <span class="time">{{ time }}</span>
        </div>
      </div>
      <div class="main_content">
        <div class="left_box">
          <div class="left_box_one">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>累计出库量统计</div>
              </div>
              <div class="tabs">
                <div class="tab active">本月</div>
                <div class="separate"></div>
                <div class="tab">本年</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="content_wrap">
              <div class="content">
                <div class="num">1000000</div>
                <div class="unit_wrap">
                  <span style="color: #869CC9;">同比</span>
                  <img src="@/assets/images/ic_up.png" class="icon" alt="">
                  <span>10.2%</span>
                </div>
              </div>
              <div class="train_wrap">
                <div class="icon_wrap">
                  <img src="@/assets//images/energy_ef/chuku_ic_car@2x.png" alt="">
                </div>
                <div class="total">
                  <span>累计出库车次</span>
                  <span><strong>3900</strong><span class="unit">次</span></span>
                </div>
              </div>
            </div>
          </div>
          <div class="left_box_two">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>月能耗分析</div>
              </div>
              <div class="tabs">
                <div class="tab active">近7日</div>
                <div class="separate"></div>
                <div class="tab">本月</div>
                <div class="separate"></div>
                <div class="tab">本年</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="energy_wrap">
              <div class="energyRef"></div>
            </div>
          </div>
          <div class="left_box_three">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>当前运输任务</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="list_wrap">
              <div class="list">
                <div class="header line">
                  <span class="item flag">标识</span>
                  <span class="item order">运输单号</span>
                  <span class="item id_card">运输车辆</span>
                  <span class="item status">作业状态</span>
                  <span class="item addr">收货单位</span>
                  <span class="item time">任务开始时间</span>
                </div>
                <div class="line" v-for="i in 7">
                  <span class="item flag"><span class="flag_bg">出</span></span>
                  <span class="item order">11</span>
                  <span class="item id_card">11</span>
                  <span class="item status">11</span>
                  <span class="item addr">11</span>
                  <span class="item time">11</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="center_box">
          <div class="center_box_one">
            <div class="tabs">
              <div class="tab active">
                <img src="@/assets/images/energy_ef/chuku_task_ac.png" alt="">
                <span>出库任务</span>
              </div>
              <div class="tab">
                <img src="@/assets/images/energy_ef/ruku_task.png" alt="">
                <span>入库任务</span>
              </div>
            </div>
            <div class="static_wrap">
              <div class="item">
                <img src="@/assets/images/energy_ef/ic_renwuzongliang@2x.png" alt="">
                <div class="content">
                  <div class="name">当前任务量</div>
                  <div class="num"><span>1000</span>万支</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/energy_ef/ic_wanchengrenwu@2x.png" alt="">
                <div class="content">
                  <div class="name">当日完成任务总量</div>
                  <div class="num"><span class="today">1000</span>万支</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/energy_ef/ic_bili@2x.png" alt="">
                <div class="content">
                  <div class="name">已完成比例</div>
                  <div class="num"><span class="finish">1000</span>万支</div>
                </div>
              </div>
            </div>
          </div>
          <div class="center_box_two"></div>
        </div>
        <div class="right_box">
          <div class="right_box_one"></div>
          <div class="right_box_two"></div>
          <div class="right_box_three"></div>
        </div>
      </div>
    </div>
  </v-scale-screen>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import VScaleScreen from 'v-scale-screen'
import dayjs from 'dayjs'
import * as echarts from 'echarts'

const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
const date = ref(dayjs().format('YYYY.MM.DD'))
const week = ref(weekMap[new Date().getDay()])
const time = ref(dayjs().format('HH:mm:ss'))
setInterval(() => {
  date.value = dayjs().format('YYYY-MM-DD')
  week.value = weekMap[new Date().getDay()]
  time.value = dayjs().format('HH:mm:ss')

}, 1000)

const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
const initEnergy = () => {
  var myChart = echarts.init(document.querySelector('.energyRef'))
  // ç»˜åˆ¶å›¾è¡¨
  const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
  myChart.setOption({
    grid: {
      top: '20%',
      left: '2%',
      right: '2%',
      bottom: '4%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
    },
    xAxis: {
      type: 'category',
      data: [1, 2, 3, 4, 4, 5]
    },
    yAxis: {
      type: 'value',
      name: 'kw·h',
      nameTextStyle: {
        padding: [0, 0, 4, -30]    // å››ä¸ªæ•°å­—分别为上右下左与原位置距离
      },
      splitLine: {
        show: true,
        lineStyle: {
          //这里输入线条的样式
          color: 'rgba(255,255,255,0.14)',
        }
      }
    },
    series: [
      {
        data: [1, 2, 3, 4, 5],
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: arr[1] },
                { offset: 1, color: '#080807' }
              ]
            ),
            barBorderRadius: [10, 10, 0, 0]
          }
        }
      }
    ]
  })
  window.addEventListener('resize', function () {//执行
    myChart.resize()
  })
}

onMounted(() => {
  initEnergy()
})


</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}

.main_content {
  display: flex;
  padding: 20px 25px 0;

  .left_box {
    width: 440px;

    .left_box_one {
      width: 100%;
      position: relative;
      margin-bottom: 20px;

      .content_wrap {
        height: 164px;
        padding: 22px 20px 0;

        .content {
          display: flex;
          align-items: flex-end;
          margin: 10px 0 22px;

          .num {
            margin-right: 10px;
            font-weight: bold;
            font-size: 46px;
            height: 44px;
            line-height: 52px;
            font-weight: bold;
            color: #00F2F3;
            letter-spacing: 3px;
            background-image: -webkit-linear-gradient(top,
                #01D9FE 0%,
                #0177FE 60%,
                #0177FE 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          .unit_wrap {
            display: flex;
            align-items: center;
          }

          .icon {
            width: 10px;
            height: 12px;
            margin-right: 6px;
            margin-left: 4px;
          }
        }

        .train_wrap {
          display: flex;
          height: 40px;
          margin-top: 18px;

          .icon_wrap {
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 4px;
            border: 1px solid;
            background: linear-gradient(180deg, rgba(0, 148, 235, 0.68) 0%, rgba(0, 148, 235, 0) 100%);
            border-image: linear-gradient(180deg, rgba(177, 210, 255, 0.64), rgba(0, 171, 255, 0.7)) 1 1;

            img {
              width: 26px;
            }
          }

          .total {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            font-size: 16px;
            border: 1px solid;
            border-image: linear-gradient(180deg, rgba(177, 210, 255, 0.64), rgba(0, 171, 255, 0.7)) 1 1;
            background: linear-gradient(180deg, rgba(0, 148, 235, 0.68) 0%, rgba(0, 148, 235, 0) 100%);

            .unit {
              margin-left: 5px;
              font-size: 13px;
            }
          }
        }
      }
    }

    .left_box_two {
      margin-bottom: 20px;

      .energy_wrap {
        width: 100%;
        height: 250px;

        .energyRef {
          width: 100%;
          height: 100%;
        }
      }
    }

    .left_box_three {
      .list_wrap {
        padding: 10px 0;

        .list {
          .line {
            display: flex;
            height: 30px;
            align-items: center;
            padding: 0 10px;
            font-size: 12px;

            &:nth-of-type(2n) {
              background: rgba(27, 64, 97, 0.52);

              .flag_bg {
                background: #01ABFE !important;
              }
            }

            .item {
              flex: 5;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .flag {
              flex: 3;
              display: flex;

              .flag_bg {
                width: 22px;
                height: 22px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                background: #00F2F3;
                font-weight: 500;
                color: #001B3C;
              }
            }

            .status {
              color: #FEAF01;
            }

            .addr {
              flex: 8;

            }

            .time {
              flex: 8;
            }
          }
        }
      }
    }
  }

  .center_box {
    flex: 1;
    padding: 16px 60px;
    .center_box_one {
      .tabs {
        display: flex;
        align-items: center;

        .tab {
          display: flex;
          align-items: center;
          margin-right: 30px;

          img {
            width: 20px;
            height: 20px;
            margin-right: 8px;
          }

          font-size: 20px;
          font-weight: 600;
          color: #D2E0FF;
        }

        .active {
          background-image: -webkit-linear-gradient(top,
              #fff 0%,
              #eec05f 60%,
              #eec05f 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .static_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px 0 54px;

        .item {
          display: flex;

          img {
            width: 68px;
            height: 71px;
            margin-right: 15px;
          }

          .content {
            font-size: 15px;

            .num {
              font-size: 12px;
              color: #D2E0FF;

              span {
                font-weight: bold;
                font-size: 30px;
                margin-right: 5px;
                font-weight: 600;
                background-image: -webkit-linear-gradient(top,
                    #01D9FE 0%,
                    #01D9FE 60%,
                    #fff 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }

              .today {
                background-image: -webkit-linear-gradient(top,
                    #fff 0%,
                    #20FFC5 50%,
                    #20FFC5 100%);
              }
              .finish{
                background-image: -webkit-linear-gradient(top,
                    #fff 0%,
                    #FFB120 50%,
                    #FFB120 100%);
              }
            }
          }
        }
      }
    }
    .center_box_two{
      width: 100%;
      border: 1px solid;
    }
  }

  .right_box {
    width: 440px;
  }
}

.main_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  position: relative;
  padding: 0px 40px 16px;
  font-weight: 600;
  font-size: 36px;

  .title {
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 70%,
        #85b4ff 80%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .time_wrap {
    font-size: 26px;
    font-weight: 600;
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 50%,
        #85b4ff 80%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;

    .time {
      width: 180px;
      display: flex;
      justify-content: flex-end;
      padding-bottom: 10px;
      font-size: 36px;
    }

    .week {
      margin-left: 36px;
    }
  }

  .main_header_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

.com_header {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px 0 13px;
  position: relative;

  .title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 66%,
        #85b4ff 72%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

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

  .tabs {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #d2e0ff;

    .separate {
      width: 1px;
      height: 14px;
      background-color: #d2e0ff;
      margin: 0 6px;
    }

    .active {
      color: #0094eb;
    }
  }
}

.main_app {
  width: 1920px;
  min-height: 960px;
  /* width: 100%;
  height: 100vh; */
  background: #0b2539;
  color: #FFFFFF;
  position: relative;
  z-index: -2;

  .main_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
</style>