ChargEco/WebApp-Lite/pages/charge/views/InfoView.vue

<template>
  <view class="info-view" v-if="info.status !== 'Unknown' && !isLoading">
    <view class="info-header" :class="{show: info.status && info.type}">
      <view class="site-icon">
        <svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <ellipse cx="10.0631" cy="10" rx="10.0631" ry="10" fill="#0D1D18"/>
          <g clip-path="url(#clip0_1099_2273)">
            <path d="M15.207 5.90632L13.9941 4.70921C13.8883 4.60706 13.7463 4.55039 13.5988 4.55144C13.4513 4.55249 13.3101 4.61119 13.2058 4.71484C13.1015 4.8185 13.0424 4.95878 13.0413 5.10536C13.0403 5.25194 13.0973 5.39305 13.2001 5.49818L13.9865 6.28169L13.4062 6.88366C13.315 6.97715 13.264 7.10223 13.264 7.23242C13.264 7.36261 13.315 7.48769 13.4062 7.58117C13.4501 7.62823 13.5035 7.66561 13.5629 7.69089C13.6223 7.71616 13.6863 7.72877 13.7509 7.72791L14.4075 7.72655V12.8405C14.4075 12.931 14.3713 13.0178 14.3069 13.0818C14.2425 13.1458 14.1552 13.1818 14.0641 13.1818C13.973 13.1818 13.8857 13.1458 13.8213 13.0818C13.7569 13.0178 13.7207 12.931 13.7207 12.8405V9.65871C13.7207 9.26713 13.5642 8.8916 13.2856 8.61465C13.007 8.3377 12.6292 8.182 12.2352 8.18177H11.8917V5.4545C11.8918 5.33511 11.8682 5.21687 11.8222 5.10655C11.7762 4.99624 11.7089 4.896 11.6239 4.81158C11.5389 4.72715 11.4381 4.66019 11.3271 4.61452C11.2161 4.56885 11.0971 4.54537 10.9769 4.54541H6.17545C6.05531 4.54537 5.93632 4.56885 5.82531 4.61452C5.7143 4.66019 5.61343 4.72715 5.52847 4.81158C5.44352 4.896 5.37613 4.99624 5.33017 5.10655C5.28422 5.21687 5.26058 5.33511 5.26063 5.4545V14.3188H5.14662C4.99507 14.3188 4.84972 14.3786 4.74256 14.4851C4.6354 14.5916 4.5752 14.7361 4.5752 14.8867C4.5752 15.0373 4.6354 15.1817 4.74256 15.2882C4.84972 15.3947 4.99507 15.4545 5.14662 15.4545H12.0078C12.1594 15.4545 12.3047 15.3947 12.4119 15.2882C12.519 15.1817 12.5792 15.0373 12.5792 14.8867C12.5792 14.7361 12.519 14.5916 12.4119 14.4851C12.3047 14.3786 12.1594 14.3188 12.0078 14.3188H11.8917V9.3195H12.2352C12.3262 9.3195 12.4136 9.35546 12.478 9.41945C12.5424 9.48345 12.5786 9.57025 12.5786 9.66075V12.8412C12.5785 13.0352 12.617 13.2272 12.6917 13.4064C12.7663 13.5856 12.8758 13.7485 13.0138 13.8856C13.1518 14.0228 13.3157 14.1316 13.496 14.2058C13.6763 14.2801 13.8696 14.3183 14.0648 14.3183C14.26 14.3183 14.4533 14.2801 14.6336 14.2058C14.8139 14.1316 14.9778 14.0228 15.1158 13.8856C15.2538 13.7485 15.3633 13.5856 15.438 13.4064C15.5126 13.2272 15.5511 13.0352 15.5511 12.8412V6.72259C15.5512 6.57063 15.5208 6.42018 15.4617 6.28002C15.4026 6.13987 15.316 6.01282 15.207 5.90632ZM9.94156 11.7376L8.23278 14.1434C8.22475 14.1518 8.21507 14.1585 8.20436 14.163C8.19364 14.1676 8.18211 14.1699 8.17046 14.1699C8.16565 14.1702 8.16082 14.1696 8.15625 14.1681C8.15169 14.1666 8.14747 14.1641 8.14384 14.161C8.10229 14.149 8.08752 14.1257 8.09937 14.0904L8.3753 12.4713H7.17339C7.16061 12.4723 7.14784 12.4694 7.13672 12.4631C7.12561 12.4567 7.11667 12.4472 7.11106 12.4358C7.09343 12.4125 7.09641 12.386 7.11999 12.3563L8.9711 9.95047C8.99497 9.91516 9.02158 9.90935 9.05129 9.93341C9.08099 9.93938 9.09576 9.9631 9.09576 10.0042L8.81983 11.6228H9.87889C9.89164 11.6218 9.90439 11.6246 9.9155 11.6309C9.92661 11.6372 9.93556 11.6467 9.94122 11.6581C9.94736 11.6842 9.94748 11.7114 9.94156 11.7376ZM10.7486 8.59196C10.7488 8.65762 10.7359 8.72268 10.7107 8.78338C10.6855 8.84409 10.6485 8.89924 10.6018 8.94567C10.555 8.9921 10.4995 9.0289 10.4384 9.05393C10.3774 9.07897 10.3119 9.09175 10.2458 9.09155H6.90622C6.84008 9.09175 6.77456 9.07894 6.71343 9.05387C6.65229 9.02879 6.59676 8.99194 6.55003 8.94543C6.50329 8.89893 6.46628 8.84369 6.44113 8.78291C6.41598 8.72213 6.40318 8.657 6.40347 8.59127V6.18205C6.40327 6.11638 6.41614 6.05133 6.44133 5.99062C6.46652 5.92992 6.50355 5.87476 6.55027 5.82833C6.59699 5.7819 6.6525 5.74511 6.71358 5.72007C6.77467 5.69504 6.84014 5.68225 6.90622 5.68246H10.2455C10.3115 5.68225 10.377 5.69504 10.4381 5.72007C10.4992 5.74511 10.5547 5.7819 10.6014 5.82833C10.6481 5.87476 10.6852 5.92992 10.7104 5.99062C10.7356 6.05133 10.7484 6.11638 10.7482 6.18205L10.7486 8.59196Z" fill="#38D29A"/>
          </g>
        </svg>
      </view>
      <image
        v-if="info.type == 'AC'"
        class="rate-icon"
        src="@/static/icons/ic-type-ac.png"/>
      <image
        v-else
        class="rate-icon"
        src="@/static/icons/ic-type-dc.png"/>
      <view class="info-header-text">{{info.type || "-"}} {{info.power}}</view>
      <view class="info-header-divide"></view>
      <view class="rate-icon">
        <svg width="100%" height="100%" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M8.71531 4.96165C8.86396 5.02731 9.00541 5.12942 9.18099 5.28819L9.43892 5.55166L10.3764 4.59404L10.1099 4.32181C9.82266 4.0284 9.40415 3.7015 8.76769 3.56116V2.5816H7.43225V3.58638C6.54895 3.8245 5.93206 4.51795 5.93206 5.42465C5.93206 6.02418 6.17787 6.44866 6.53392 6.76313C6.87112 7.06096 7.30957 7.26089 7.69196 7.43526L7.69687 7.4375C8.05061 7.59972 8.34629 7.73724 8.55954 7.91241C8.75654 8.07423 8.86233 8.25095 8.86233 8.50364C8.86233 8.73968 8.78776 8.88025 8.67907 8.96928C8.56047 9.0664 8.35421 9.14056 8.02286 9.14056C7.57569 9.14056 7.1236 8.9743 6.64723 8.59292L6.33841 8.35634L5.51456 9.43451L5.80945 9.66042C6.25202 10.0285 6.84596 10.2972 7.43225 10.4135V11.4183H8.78171V10.4195C9.2193 10.3152 9.59434 10.1152 9.87467 9.82529C10.2128 9.47558 10.3941 9.0142 10.3941 8.48932C10.3941 7.80667 10.1225 7.33463 9.73388 6.99287C9.38141 6.6829 8.93309 6.48252 8.55655 6.31421L8.50087 6.28929L8.49768 6.2879C8.15879 6.1406 7.88955 6.01954 7.70028 5.87268C7.52675 5.73803 7.44978 5.60509 7.44978 5.42465C7.44978 5.24366 7.5164 5.11236 7.62117 5.0223C7.73027 4.92852 7.90531 4.85934 8.14904 4.85934C8.39548 4.85934 8.56824 4.89669 8.71531 4.96165Z" fill="#0D1D18"/>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M0.97168 7C0.97168 10.8565 4.13503 14 8.01584 14C11.8967 14 15.06 10.8565 15.06 7C15.06 3.14352 11.8967 0 8.01584 0C4.13503 0 0.97168 3.14352 0.97168 7ZM2.27711 7C2.27711 3.85648 4.8525 1.29725 8.01584 1.29725C11.1792 1.29725 13.7546 3.85648 13.7546 7C13.7546 10.1435 11.1792 12.7028 8.01584 12.7028C4.8525 12.7028 2.27711 10.1435 2.27711 7Z" fill="#0D1D18"/>
        </svg>
      </view>
      <view class="info-header-text">{{info.rate || "-"}}</view>
    </view>
    <view class="info-card-view" :class="{show: (info.status == 'Charging' || info.status == 'Finishing') && info.estimatedCost}">
      <view class="info-row">
        <text class="info-item-label">Time Elapsed</text>
        <text class="info-item-value">{{info.timeElapsed || "-"}}</text>
      </view>
      <view class="info-row">
        <text class="info-item-label">Power Delivered</text>
        <text class="info-item-value">{{info.powerConsumption || "-"}}</text>
      </view>
      <view class="info-row">
        <text class="info-item-label">Total Charges</text>
        <text class="info-item-value">{{info.estimatedCost || "-"}}</text>
      </view>
      <view class="info-row" v-if="info.batteryPercent">
        <text class="info-item-label">SOC</text>
        <text class="info-item-value">{{info.batteryPercent || "-"}}</text>
      </view>
    </view>
    <view class="info-card-empty" v-if="info.status != 'Charging'">
      <svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="39" cy="39" r="39" fill="#CCCCCC" fill-opacity="0.1"/>
        <path d="M53.6617 38.5931L37.3956 60.2841C36.375 61.6279 34.1424 60.956 34.1424 59.2971V45.8164C34.1424 44.8715 33.3344 44.1156 32.3563 44.1156H25.7861C24.7867 44.1156 24 43.3597 24 42.4148C24 42.0578 24.1063 41.7218 24.3402 41.4279L40.585 19.7159C41.6056 18.3721 43.8382 19.044 43.8382 20.7028V34.1836C43.8382 35.1285 44.6462 35.8844 45.6243 35.8844H52.1946C53.6617 35.9054 54.5122 37.4592 53.6617 38.5931Z" fill="#222222" fill-opacity="0.1"/>
      </svg>
    </view>
  </view>
  <view class="info-view" v-else>
    <view class="info-card-empty">
      <svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="39" cy="39" r="39" fill="#CCCCCC" fill-opacity="0.1"/>
        <path d="M53.6617 38.5931L37.3956 60.2841C36.375 61.6279 34.1424 60.956 34.1424 59.2971V45.8164C34.1424 44.8715 33.3344 44.1156 32.3563 44.1156H25.7861C24.7867 44.1156 24 43.3597 24 42.4148C24 42.0578 24.1063 41.7218 24.3402 41.4279L40.585 19.7159C41.6056 18.3721 43.8382 19.044 43.8382 20.7028V34.1836C43.8382 35.1285 44.6462 35.8844 45.6243 35.8844H52.1946C53.6617 35.9054 54.5122 37.4592 53.6617 38.5931Z" fill="#222222" fill-opacity="0.1"/>
      </svg>
      <view class="empty-text">We appreciate your patience.</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "InfoView",
  props: {
    isLoading: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
    
  }
}
</script>

<style scoped>
.info-view {
  flex: 1;
  padding: 32rpx;
  position: relative;
  margin: 32rpx 32rpx 0;
  border-radius: 24rpx;
  background-color: white;
}
.info-header {
  opacity: 0;
  display: flex;
  padding: 12rpx 32rpx;
  padding-left: 12rpx;
  align-items: center;
  transition: all .3s;
  border-radius: 60rpx;
  background-color: #ececec;
}
.info-header.show {
  opacity: 1;
}
.site-icon {
  width: 40rpx;
  height: 40rpx;
}
.rate-icon {
  width: 28rpx;
  height: 28rpx;
  margin-left: 24rpx;
}
.info-header-text {
  color: #333;
  font-size: 28rpx;
  padding: 0 12rpx;
}
.info-header-divide {
  flex: 1;
  position: relative;
}
.info-header-divide:before {
  right: 0;
  left: 50%;
  width: 2rpx;
  height: 36rpx;
  content: " ";
  margin-top: -18rpx;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
}
.info-card-view {
  opacity: 0;
  z-index: 2;
  padding: 0 32rpx;
  margin-top: 24rpx;
  transition: all .4s;
  border-radius: 24rpx;
  position: relative;
  background-color: #F7F7F7;
}
.info-card-view.show {
  opacity: 1;
}
.info-card-empty {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: .8;
  display: flex;
  position: absolute;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.empty-text {
  color: #222;
  font-size: 28rpx;
  padding-top: 32rpx;
}
.info-row {
  display: flex;
  padding: 32rpx 0;
  align-items: center;
}
.info-row + .info-row {
  border-top: 2rpx solid #EBEBEB;
}
.info-item-label {
  flex: 1;
  color: #333;
  font-size: 28rpx;
}
.info-item-value {
  color: #111;
  font-size: 28rpx;
  text-align: center;
  font-weight: 700;
  padding-left: 24rpx;
}
</style>