newcpms/ui/src/views/monitor/elec/center.vue

<template>
  <div id="center">
    <div class="up">
      <!--<div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
        <p class="ml-3 colorBlue fw-b">{{item.title}}</p>
        <div>
          <dv-digital-flop :config="item.number" style="width:1.25rem;height:.625rem;" />
        </div>
      </div>-->
      <!-- 4个主要的数据 -->
      <div class="bottom-data">
        <div class="item-box" v-for="(item,index) in numberData" :key="index">
          <div class="d-flex">
            <span class="coin"></span>
            <dv-digital-flop :config="item.number" style="width:2.5rem;height:.525rem;" />
          </div>
          <p class="text" style="text-align: center;">
            {{item.text}}
            <span class="colorYellow">(MW)</span>
          </p>
        </div>
      </div>
    </div>
    <div class="center">
      <centerChart class="percentNum" :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
      <centerChart class="percentNum" :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
      <centerChart class="percentNum" :id="rate[2].id" :tips="rate[2].tips" :colorObj="rate[2].colorData" />
      <centerChart class="percentNum" :id="rate[3].id" :tips="rate[3].tips" :colorObj="rate[3].colorData" />
      <centerChart class="percentNum" :id="rate[4].id" :tips="rate[4].tips" :colorObj="rate[4].colorData" />
    </div>
    <div class="down">
      <div class="ranking bg-color-black">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2 mb-1" style="display: none">每日能耗状态</span>
          <div id="naturalGasChart" style="width:100%;height:2.5rem;"></div>
      </div>
      <div class="percent">
        <div class="item bg-color-black">
          <svg-icon icon-class="alarm" class="alarmIcon" />
        </div>
        <div class="water">
          <dv-water-level-pond :config="water" style="height: 1.5rem" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import centerChart from "./echart/center/centerChartRate";

export default {
  data() {
    return {
      numberData: [

        {
          number: {
            number: [15],
            toFixed: 1,
            content: "{nt}"
          },
          text: "1#GTG"
        },
        {
          number: {
            number: [1144],
            toFixed: 1,
            content: "{nt}"
          },
          text: "2#GTG"
        },
        {
          number: {
            number: [361],
            toFixed: 1,
            content: "{nt}"
          },
          text: "3#GTG"
        },
        {
          number: {
            number: [157],
            toFixed: 1,
            content: "{nt}"
          },
          text: "STG"
        },
        {
          number: {
            number: [2000],
            toFixed: 1,
            content: "{nt}"
          },
          text: "发电量"
        },
      ],
      ranking: {
        data: [
          {
            name: "公应工程",
            value: 55
          },
          {
            name: "BCC",
            value: 120
          },
          {
            name: "碳一",
            value: 78
          },
          {
            name: "EU",
            value: 66
          },
          {
            name: "电厂",
            value: 80
          },
          {
            name: "AE",
            value: 80
          },
          {
            name: "AA",
            value: 80
          },
          {
            name: "苯乙烯",
            value: 80
          }
        ],
        waitTime: 4000,
        carousel: "page",
        unit: "mw"
      },
      water: {
        data: [24, 45],
        shape: "roundRect",
        formatter: "SUB {value}%",
        waveNum: 3
      },
      // 通过率和达标率的组件复用数据
      rate: [
        {
          id: "centerRate0",
          tips: 66,
          colorData: {
            textStyle: "#3fc0fb",
            series: {
              color: ["#00bcd44a", "transparent"],
              dataColor: {
                normal: "#03a9f4",
                shadowColor: "#97e2f5"
              }
            }
          }
        },
        {
          id: "centerRate1",
          tips: 60,
          colorData: {
            textStyle: "#3fc0fb",
            series: {
              color: ["#00bcd44a", "transparent"],
              dataColor: {
                normal: "#03a9f4",
                shadowColor: "#97e2f5"
              }
            }
          }
        },
        {
          id: "centerRate2",
          tips: 40,
          colorData: {
            textStyle: "#67e0e3",
            series: {
              color: ["#faf3a378", "transparent"],
              dataColor: {
                normal: "#ff9800",
                shadowColor: "#fcebad"
              }
            }
          }
        },
        {
          id: "centerRate3",
          tips: 40,
          colorData: {
            textStyle: "#67e0e3",
            series: {
              color: ["rgba(196,163,250,0.47)", "transparent"],
              dataColor: {
                normal: "#9d00ff",
                shadowColor: "#c9adfc"
              }
            }
          }
        },
        {
          id: "centerRate4",
          tips: 40,
          colorData: {
            textStyle: "#67e0e3",
            series: {
              color: ["rgba(163,250,177,0.47)", "transparent"],
              dataColor: {
                normal: "#00ff0d",
                shadowColor: "#b2fcad"
              }
            }
          }
        }
      ]
    };
  },
  components: {
    centerChart
    // centerChart1,
    // centerChart2
  },
  mounted() {
    this.initChart();
  },
  // methods: {
  //   initChart() {
  //     // 基于准备好的dom，初始化echarts实例
  //     this.chart = this.echarts.init(document.getElementById('naturalGasChart'))
  //
  //     this.chart.setOption({
  //       color: ['#00DDFF', '#37A2FF'],
  //       tooltip: {
  //         trigger: 'axis',
  //         type: 'category',
  //       },
  //       /* 标识 */
  //       legend: {
  //         data: ['实际', '计划'],
  //         textStyle:{
  //           color: '#ffffff'//字体颜色
  //         }
  //       },
  //       /* 周围边距 */
  //       grid: {
  //         left: '3%',
  //         right: '3%',
  //         bottom: '1%',
  //         top: '13%',
  //         containLabel: true
  //       },
  //       xAxis: [
  //         {
  //           type: 'category',
  //           boundaryGap: false,
  //           data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
  //           axisLabel: {//x轴文字的配置
  //             show: true,
  //             textStyle: {
  //               color: '#ffffff',
  //             }
  //           },
  //         }
  //       ],
  //       yAxis: [
  //         {
  //           type: 'value',
  //           axisLabel: {
  //             textStyle: {
  //               fontSize: 10,
  //               color: '#ffffffff',
  //               margin: 15
  //             },
  //           }
  //         }
  //       ],
  //       series: [
  //         {
  //           name: this.$t('实际'),
  //           type: 'line',
  //           symbol: "none",
  //           data: [20, 32, 1, 34, 90, 30, 20, 20, 32, 1, 34, 90, 40, 10, 20, 82, 11, 34, 20, 30, 10, 20, 82, 11, 34, 20, 40, 10]
  //         },
  //         {
  //           name: this.$t('计划'),
  //           type: 'line',
  //           symbol: "none",
  //           data: [20, 82, 11, 24, 20, 30, 10, 20, 82, 11, 24, 20, 10, 20, 20, 32, 21, 34, 10, 30, 20, 20, 32, 21, 34, 19, 13, 20]
  //         },
  //       ]
  //     })
  //   }
  // }
};
</script>

<style lang="scss" scoped>
#center {
  display: flex;
  flex-direction: column;
  .up {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      border-radius: 0.0625rem;
      padding-top: 0.2rem;
      margin-top: 0.1rem;
      width: 32%;
      height: 0.875rem;
    }
  }
  .bottom-data {
    margin-top: 10px;
    .item-box {
      float: right;
      position: relative;
      width: 20%;
      color: #d3d6dd;
      // 金币
      .coin {
        position: absolute;
        left: 0.1rem;
        top: 0.2125rem;
        font-size: 0.25rem;
        color: #ffc107;
      }
      .colorYellow {
        color: yellowgreen;
      }
    }
  }
  .center {
    padding: 0.07rem 0.05rem;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    float: right;
    position: relative;
    .percentNum {
      width: 19%;
    }
  }
  .down {
    padding: 0.07rem 0.05rem;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    height: 3.1875rem;
    justify-content: space-between;
    .bg-color-black {
      border-radius: 0.0625rem;
    }
    .ranking {
      padding: 0.125rem;
      width: 59%;
    }
    .percent {
      width: 40%;
      display: flex;
      flex-wrap: wrap;
      .bg-color-black {
        border-radius: 0.0625rem;
        position: relative;
        .alarmIcon {
          width: 40px !important;
          height: 40px !important;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .item {
        width: 100%;
        height: 1rem;
      }
      .water {
        width: 100%;
      }
    }
  }
}
</style>