大屏

liukangdong

2024-09-03 749e8b25314323fe2197a1b3af97224ef70c7e4e

大屏

 screen/src/assets/images/bg_data@2x.png

 screen/src/assets/images/bg_main_app.png

 screen/src/assets/images/city_bottom@2x.png

 screen/src/assets/images/ic_co2@2x.png

 screen/src/assets/images/ic_dianliang@2x.png

 screen/src/assets/images/ic_dianliang_b@2x.png

 screen/src/assets/images/ic_down.png

 screen/src/assets/images/ic_down.webp

Binary files differ

 screen/src/assets/images/ic_title@2x.png

 screen/src/assets/images/ic_up.png

 screen/src/assets/images/ic_up.webp

Binary files differ

 screen/src/assets/images/ic_yongdian@2x.png

 screen/src/assets/images/ic_yongqi@2x.png

 screen/src/assets/images/ic_yongshui@2x.png

 screen/src/assets/images/img_city@2x.png

 screen/src/assets/images/maintitle@2x.png

 screen/src/assets/images/title@2x.png

 screen/src/router/index.js

@@ -1,5 +1,6 @@
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import EnergyConsum from '../views/EnergyConsum.vue'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -9,6 +10,11 @@
      name: 'home',
      component: HomeView
    },
    {
      path: '/EnergyConsum',
      name: 'EnergyConsum',
      component: () => import('../views/EnergyConsum.vue')
    },
  ]
})


 screen/src/views/EnergyConsum.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,552 @@
<template>
  <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">
        <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>
            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
          </div>
          <div class="content">
            <div class="item">
              <div class="lab">A相电流(A)</div>
              <div class="val">60</div>
            </div>
            <div class="item">
              <div class="lab">B相电流(A)</div>
              <div class="val">60</div>
            </div>
            <div class="item">
              <div class="lab">C相电流(A)</div>
              <div class="val">60</div>
            </div>
            <div class="item">
              <div class="lab">有功功率(KW)</div>
              <div class="val">60</div>
            </div>
            <div class="item">
              <div class="lab">功率因数</div>
              <div class="val">60</div>
            </div>
            <div class="item">
              <div class="lab">有功电度(°)</div>
              <div class="val">60</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>
            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
          </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>
            <div class="tabs">
              <div class="tab active">用电</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>
      </div>
      <div class="center_box">
        <div class="center_box_one">
          <div class="list">
            <div class="item">
              <div class="header">
                <img
                  class="icon"
                  src="@/assets/images/ic_yongdian@2x.png"
                  alt=""
                />
                <div class="content">
                  <div class="name">上月用电(kw·h)</div>
                  <div class="num">450</div>
                </div>
              </div>
              <div class="static">
                <span class="lab">同比</span>
                <img class="icon" src="@/assets/images/ic_up.webp" alt="" />
                <span class="val">11</span>
                <span class="lab">环比</span>
                <img class="icon" src="@/assets/images/ic_down.webp" alt="" />
                <span class="val">11</span>
              </div>
            </div>
            <div class="item">
              <div class="header">
                <img
                  class="icon"
                  src="@/assets/images/ic_yongshui@2x.png"
                  alt=""
                />
                <div class="content">
                  <div class="name">上月用水(t)</div>
                  <div class="num">450</div>
                </div>
              </div>
              <div class="static">
                <span class="lab">同比</span>
                <img class="icon" src="@/assets/images/ic_up.webp" alt="" />
                <span class="val">11</span>
                <span class="lab">环比</span>
                <img class="icon" src="@/assets/images/ic_down.webp" alt="" />
                <span class="val">11</span>
              </div>
            </div>
            <div class="item">
              <div class="header">
                <img
                  class="icon"
                  src="@/assets/images/ic_yongqi@2x.png"
                  alt=""
                />
                <div class="content">
                  <div class="name">上月用气(t)</div>
                  <div class="num">450</div>
                </div>
              </div>
              <div class="static">
                <span class="lab">同比</span>
                <img class="icon" src="@/assets/images/ic_up.webp" alt="" />
                <span class="val">11</span>
                <span class="lab">环比</span>
                <img class="icon" src="@/assets/images/ic_down.webp" alt="" />
                <span class="val">11</span>
              </div>
            </div>
          </div>
        </div>
        <div class="center_box_two">
          <img class="bg" src="@/assets/images/img_city@2x.png" alt="" />
          <div class="item item1">
            <div class="num fs_linear">240<span class="unit">kw·h</span></div>
            <div class="name">联合工房</div>
            <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
          </div>
          <div class="item item2">
            <div class="num fs_linear">240<span class="unit">kw·h</span></div>
            <div class="name">联合工房</div>
            <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
          </div>
          <div class="item item3">
            <div class="num fs_linear">240<span class="unit">kw·h</span></div>
            <div class="name">联合工房</div>
            <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
          </div>
          <div class="item item4">
            <div class="num fs_linear">240<span class="unit">kw·h</span></div>
            <div class="name">联合工房</div>
            <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
          </div>
          <div class="item item5">
            <div class="num fs_linear">240<span class="unit">kw·h</span></div>
            <div class="name">联合工房</div>
            <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
          </div>
          <div class="bottom_wrap">
            <div class="bottom bottom1">
              <div class="num fs_linear">240</div>
              <div class="name">昨日用电</div>
              <div class="unit">kw·h</div>
              <img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
            </div>
            <div class="bottom bottom2">
              <div class="num">240</div>
              <div class="name">今日用电</div>
              <div class="unit">kw·h</div>
              <img src="@/assets/images/ic_dianliang@2x.png" class="bg" alt="" />
            </div>
            <div class="bottom bottom3">
              <div class="num fs_linear">240</div>
              <div class="name">本月用电</div>
              <div class="unit">kw·h</div>
              <img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
            </div>
          </div>
        </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>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'

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)

</script>

<style lang="scss" scoped>
.main_content {
  display: flex;
  padding: 20px 24px 0;
  .left_box {
    flex: 4;
    .left_box_one {
      width: 100%;
      margin-bottom: 20px;
      .content {
        width: 100%;
        padding: 24px 5%;
        display: flex;
        flex-wrap: wrap;
        .item {
          width: 33.3%;
          margin-bottom: 12px;
          .lab {
            font-size: 14px;
            color: #ffffff;
          }
          .val {
            font-weight: 600;
            font-size: 20px;
            color: #01d9fe;
            margin-top: 4px;
          }
        }
      }
    }
    .left_box_two {
      margin-bottom: 20px;
    }
    .left_box_three {
    }
  }
  .center_box {
    flex: 9;
    padding: 0 60px;
    .center_box_one {
      padding: 30px 18px;
      margin-bottom: 18px;
      .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item {
          flex: 1;
          .header {
            display: flex;
            margin-bottom: 14px;
            .icon {
              width: 70px;
              height: 73px;
              margin-right: 20px;
            }
            .content {
              .name {
                font-size: 16px;
                color: #d2e0ff;
              }
              .num {
                font-weight: bold;
                font-size: 36px;
                color: #ffffff;
                line-height: 54px;
              }
            }
          }
          .static {
            font-size: 12px;
            display: flex;
            align-items: center;
            .lab {
              color: #869cc9;
            }
            .val {
              color: #d2e0ff;
              margin-right: 20px;
            }
            .icon {
              width: 12px;
              height: 12px;
              margin: 0 5px;
            }
          }
        }
      }
    }
    .center_box_two {
      position: relative;
      width: 100%;
      height: 544px;
      .item {
        width: 120px;
        height: 112px;
        position: absolute;
        text-align: center;
        .num {
          font-size: 35px;
          line-height: 50px;
          height: 50px;
          font-weight: 600;
          .unit {
            font-size: 13px;
          }
        }
        .name {
          font-weight: 500;
          font-size: 17px;
          color: #ffffff;
        }
        .bg {
          width: 120px;
          height: 88px;
          top: 24px;
        }
      }
      .item1{
        left: 50%;
        top: 0;
        transform: translate(-50%, 0);
      }
      .item2{
        top: 112px;
        left: 106px;
      }
      .item3{
        top: 112px;
        right: 106px;
      }
      .item4{
        top: 291px;
        left: 56px;
      }
      .item5{
        top: 291px;
        right: 56px;
      }
      .bottom_wrap{
        position: absolute;
        bottom:-110px;
        left: 50%;
        width: 600px;
        height: 100px;
        transform: translate(-50%, 0);
      }
      .bottom{
        width: 140px;
        height: 194px;
        position: absolute;
        text-align: center;
        padding-top: 70px;
        .num{
          font-size: 24px;
          color: #D0FFFA;
          line-height: 33px;
        }
        .name{
          font-size: 15px;
          color: #D0FFFA;
          line-height: 21px;
        }
        .unit{
          font-size: 14px;
          color: #D0FFFA;
        }
      }
      .bottom1{
        bottom: -0px;
        left: 40px;  
      }
      .bottom3{
        bottom: -0px;
        right: 40px;  
      }
      .bottom2{
        bottom: -0px;
        left: 50%;  
        transform: translate(-50%, 0);
        padding-top: 50px;
        .num{
          font-size: 36px;
          color: #01D9FE;
          line-height: 54px;
          font-weight: bold;
        }
      }
    }
  }
  .right_box {
    flex: 4;
  }
}
.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;
    .tab {
      font-size: 14px;
      color: #d2e0ff;
    }
    .separate {
      width: 1px;
      height: 14px;
      background-color: #d2e0ff;
      margin: 0 6px;
    }
    .active {
      color: #0094eb;
    }
  }
}
.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.fs_linear {
  background-image: -webkit-linear-gradient(
    top,
    #ffffff 0%,
    #c8ddff 70%,
    #85b4ff 80%,
    #74a9ff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.main_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 92px;
  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 {
    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;
  }
}
.main_app {
  width: 100%;
  min-height: 100vh;
  color: #ffffff;
  position: relative;
  .main_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}
</style>

 screen/src/views/HomeView.vue

@@ -19,7 +19,7 @@
    <div class="main_content">
      <div class="box in_box">
        <div class="title">安泰物流入库月台</div>
        <div class="line">
        <div class="line head">
          <div class="no item">序号</div>
          <div class="item">车牌号</div>
          <div class="item">状态</div>

 screen/src/views/LogisticsControl.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,67 @@
<template>
  <div class="main_app">
    <div class="main_header">
      <div class="title">安泰智慧物流园区-绿色低碳运营</div>
      <div class="time">
        <span>{{date}}</span>
        <span>{{week}}</span>
        <span>{{time}}</span>
      </div>
    </div>
    <div class="main_content">
      <div class="left_box">
        <div class="left_box_one"></div>
        <div class="left_box_two"></div>
        <div class="left_box_three"></div>
      </div>
      <div class="center_box">
        <div class="center_box_one"></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>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'

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)

</script>

<style lang="scss" scoped>
.main_app{
  width: 100%;
  min-height: 100vh;
  background: #0b2539;
  color: #FFFFFF;
}
.main_content{
  display: flex;
  .left_box{}
  .center_box{}
  .right_box{}
}
.main_header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 71px;
  border: 1px solid;
}
</style>