11-mes-new/src/views/3DOverview/components/LeftContentPublicConsume.vue

<template>
  <div class="public-consume__inner">
    <div style="min-height: calc(106px * var(--beilv)); flex: 1;">
      <TechyBox class="water-consume">
        <div class="header-part">
          <img src="./assets/consume/s.png" width="32" height="32" alt="water">
          <span>水</span>
        </div>
        <div class="content-part">
          <div class="row">
            <span class="name">纯 &nbsp;&nbsp;&nbsp;水</span>
            <span class="diy-process-bar bar-width-1 color-1" />
            <span class="amount">
              39m
              <sup>3</sup>
            </span>
          </div>
          <div class="row">
            <span class="name">循环水</span>
            <span class="diy-process-bar bar-width-2 color-2" />
            <span class="amount">
              23m
              <sup>3</sup>
            </span>
          </div>
          <div class="row">
            <span class="name">自来水</span>
            <span class="diy-process-bar bar-width-3 color-3" />
            <span class="amount">
              239m
              <sup>3</sup>
            </span>
          </div>
        </div>
      </TechyBox>
    </div>

    <div style="min-height: calc(106px * var(--beilv)); flex: 1;">
      <TechyBox class="gas-consume">
        <div class="header-part  ">
          <img src="./assets/consume/gas.png" width="32" height="32" alt="qi">
          <span>气</span>
        </div>
        <div class="content-part">
          <div class="row">
            <span class="name">氧&nbsp;&nbsp;&nbsp;&nbsp;气</span>
            <span class="diy-process-bar bar-width-4 color-1" />
            <span class="amount">
              0.42MPa
            </span>
          </div>
          <div class="row">
            <span class="name">CDA</span>
            <span class="diy-process-bar bar-width-5 color-2" />
            <span class="amount">
              0.61MPa
            </span>
          </div>
          <div class="row">
            <span class="name">天然气</span>
            <span class="diy-process-bar bar-width-6 color-3" />
            <span class="amount">
              0.31MPa
            </span>
          </div>
        </div>
      </TechyBox>
    </div>

    <div style="min-height: calc(168px * var(--beilv)); flex: 1;">
      <TechyBox class="dian-consume">
        <div class="header-part">
          <img src="./assets/consume/d.png" width="32" height="32" alt="dian">
          <span>电</span>
        </div>
        <div style="height: 100%; flex: 1; overflow: hidden">
          <DianChart id="dian" key="dian" />
        </div>
      </TechyBox>
    </div>

    <!-- <div style="min-height: calc(144px * var(--beilv)); flex: 1;">
      <TechyBox class="elec-consume">
        <div class="header-part">
          <img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
          <span>发电</span>
        </div>
        <div style="height: 100%; flex: 1; overflow: hidden">
          <DianChart id="fa-dian" key="fa-dian" />
        </div>
      </TechyBox>
    </div> -->
  </div>
</template>

<script>
// import TechyBarChart from './TechyBarChart.vue'
// import TechyLineChart from './TechyLineChart.vue'
import TechyBox from './TechyBox.vue'
// import FadianChart from './FadianChart.vue'
import DianChart from './DianChart.vue'
export default {
  name: 'LeftContentPublicConsume',
  components: { TechyBox, DianChart },
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped>
.public-consume__inner {
  overflow: hidden;
  overflow-y: auto;
  height: calc(100% - calc(32px * var(--beilv)));
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--beilv));
}

.techy-box {
  padding: calc(16px * var(--beilv));
  display: flex;
}

.header-part {
  height: 100%;
  width: calc(56px * var(--beilv));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* overflow: hidden; */
  margin-right: calc(16px * var(--beilv));
  position: relative;
}

.header-part.has-border::after {
  content: '';
  position: absolute;
  top: 0;
  right: calc(-8px * var(--beilv));
  width: calc(1px * var(--beilv));
  height: 100%;
  background: linear-gradient(to bottom, transparent, #fff9, transparent);
}

.header-part > span {
  color: #fffc;
  font-size: calc(12px * var(--beilv));
  line-height: calc(12px * var(--beilv));
  white-space: nowrap;
}

.content-part {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* height: calc(48px * var(--beilv)); */
  flex: 1 1;
  gap: calc(10px * var(--beilv));
  color: #fff9;
}

.content-part span.name {
  font-size: calc(12px * var(--beilv));
  line-height: calc(14px * var(--beilv));
}

.row {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(14px * var(--beilv));
}

.row > .name,
.row > .amount {
  white-space: nowrap;
  width: 12%;
}

.row > .amount {
  text-align: right;
}

.diy-process-bar {
  margin: 0 8px;
  border-radius: 7px;
  height: calc(8px * var(--beilv));
  flex: 1 1;
  background-color: #fff3;
  overflow: hidden;
  position: relative;
}

.diy-process-bar::after {
  content: '';
  position: absolute;
  border-radius: calc(6px * var(--beilv));
  width: 30%;
  height: 100%;
}

.bar-width-1::after {
  width: 60%;
}
.bar-width-2::after {
  width: 34%;
}
.bar-width-3::after {
  width: 99%;
}
.bar-width-4::after {
  width: 20%;
}
.bar-width-5::after {
  width: 29%;
}
.bar-width-6::after {
  width: 79%;
}

.diy-process-bar.color-1::after {
  background: linear-gradient(to right, #178be9, #67b3f2);
}
.diy-process-bar.color-2::after {
  background: linear-gradient(to right, #2ec6b4, #85f6e9);
}
.diy-process-bar.color-3::after {
  background: linear-gradient(to right, #ff8bc3, #eb46a1);
}

.dian-consume,
.elec-consume {
  padding: 0;
}

.dian-consume > .header-part,
.elec-consume > .header-part {
  padding: calc(16px * var(--beilv));
  margin: 0;
  margin-left: calc(16px * var(--beilv));
}
</style>