初次提交

src/views/new-screen-zz/components/left-bottom.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="left-bottom-warp">
+    <item title="节能减排">
+      <dv-loading v-if="loading">Loading...</dv-loading>
+      <div v-else class="top-all-box">
+        <div class="top-con-box">
+          <div class="top-item-box">
+            <div class="data">{{ info.treePlanting }}<span class="unit">棵</span></div>
+            <div class="title">等效植树量</div>
+            <img :src="screenItemBg" class="item-bg-img">
+          </div>
+          <div class="top-item-box">
+            <div class="data">{{ info.reductionCO2 | kgFormat }}<span class="unit">{{ info.reductionCO2 | KgUnitFormat }}</span></div>
+            <div class="title">等效CO2减排</div>
+            <img :src="screenItemBg" class="item-bg-img">
+          </div>
+
+        </div>
+        <div class="top-con-box">
+          <div class="top-item-box">
+            <div class="data">{{ info.equivalentCoal | kgFormat }}<span class="unit">{{ info.equivalentCoal | KgUnitFormat }}</span></div>
+            <div class="title">等效节约煤</div>
+            <img :src="screenItemBg" class="item-bg-img">
+          </div>
+          <div class="top-item-box">
+            <div class="data">{{ info.income | moneyFormat }}<span class="unit">{{ info.income | moneyUnitFormat }}</span></div>
+            <div class="title">等效经济收入</div>
+            <img :src="screenItemBg" class="item-bg-img">
+          </div>
+        </div>
+
+      </div>
+    </item>
+  </div>
+</template>
+
+<script>
+import item from './item-warp.vue'
+import screenItemBg from '@/assets/new-screen/screen-item-bg.png'
+import { GetEnergySaving } from '@/api/screen/zzScreen'
+export default {
+  components: { item },
+  data() {
+    return {
+      screenItemBg,
+      loading: true,
+      info: {
+        treePlanting: null,
+        reductionCO2: null,
+        equivalentCoal: null,
+        income: null
+      }
+
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+
+  methods: {
+
+    async getData(deptId) {
+      try {
+        this.loading = true
+        const { data } = await GetEnergySaving({
+          deptId: deptId
+        })
+        this.info = data
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.left-bottom-warp {
+  width: 100%;
+  height: 100%;
+
+  .top-all-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    height: 100%;
+    padding: 10px 0;
+    .top-con-box {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      width: 100%;
+
+      .top-item-box {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        min-height: 110px;
+
+        .data {
+          color: #F5FAFF;
+          font-family: DIN;
+          font-size: 24px;
+          font-weight: 500;
+          line-height: normal;
+        }
+
+        .unit {
+          color: #F5FAFF;
+          font-family: DIN;
+          font-size: 12px;
+          line-height: normal;
+        }
+
+        .title {
+          color: #B7C1C9;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: normal;
+        }
+
+        .item-bg-img {
+          width: 90px;
+          height: auto;
+          position: absolute;
+          top: 38px;
+        }
+      }
+    }
+  }
+}</style>