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:block">每日能耗状态</span>-->
<!--          <div id="naturalGasChart" style="width:100%;height:2.5rem;"></div>-->
<!--      </div>-->

      <div class="ranking bg-color-black" @click="openChartUsed">
        <div class="d-flex pt-2 pl-2">
                <span style="color:#5cd9e8">
                  <icon name="chart-bar"></icon>
                </span>
          <div class="d-flex">
            <span class="fs-xl text mx-2">每日煤耗状态</span>
          </div>
        </div>
        <div>
          <div id="naturalGasChart" style="width:100%;height:3rem;"></div>
        </div>
        <el-dialog class="my-info-dialog" :visible.sync="openChart" title="" @open="open" width="1600px" destroy-on-close append-to-body>
          <div id="naturalGasChartDialog" style="width:100%;height:600px;"></div>
        </el-dialog>
      </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: 2rem" />
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  props: ['dashboardelecdata', 'latest24HourData'],
  data() {
    return {
      openChart: false,
      queryParams:{},
      numberData: [

        {
          number: {
            number: [parseInt(this.dashboardelecdata.gtg1Lv)],
            toFixed: 1,
            content: "{nt}"
          },
          text: "1#GTG"
        },
        {
          number: {
            number: [parseInt(this.dashboardelecdata.gtg2Lv)],
            toFixed: 1,
            content: "{nt}"
          },
          text: "2#GTG"
        },
        {
          number: {
            number: [parseInt(this.dashboardelecdata.gtg3Lv)],
            toFixed: 1,
            content: "{nt}"
          },
          text: "3#GTG"
        },
        {
          number: {
            number: [parseInt(this.dashboardelecdata.stg1Lv)],
            toFixed: 1,
            content: "{nt}"
          },
          text: "STG"
        },
        {
          number: {
            number: [parseInt(this.dashboardelecdata.mwhLv)],
            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: [this.dashboardelecdata.sub],
        shape: "roundRect",
        formatter: "SUB {value}%",
        waveNum: 3
      },
      // 通过率和达标率的组件复用数据
      rate: [
        {
          id: "centerRate0",
          tips: parseInt(this.dashboardelecdata.mwhWr),
          colorData: {
            fontSize: 25,
            textStyle: "#3f83ff",
            series: {
              radius: ["60%", "95%", "85%", "90%"],
              color: ["#00bcd44a", "transparent"],
              dataColor: {
                normal: "#528cff",
                shadowColor: "#97e2f5"
              }
            }
          }
        },
        {
          id: "centerRate1",
          tips: parseInt(this.dashboardelecdata.stg1Wr),
          colorData: {
            fontSize: 23,
            textStyle: "#3fc0fb",
            series: {
              radius: ["65%", "85%", "85%", "90%"],
              color: ["#00bcd44a", "transparent"],
              dataColor: {
                normal: "#03a9f4",
                shadowColor: "#97e2f5"
              }
            }
          }
        },
        {
          id: "centerRate2",
          tips: parseInt(this.dashboardelecdata.gtg3Wr),
          colorData: {
            fontSize: 23,
            textStyle: "#67e0e3",
            series: {
              radius: ["65%", "85%", "85%", "90%"],
              color: ["#faf3a378", "transparent"],
              dataColor: {
                normal: "#ff9800",
                shadowColor: "#fcebad"
              }
            }
          }
        },
        {
          id: "centerRate3",
          tips: parseInt(this.dashboardelecdata.gtg2Wr),
          colorData: {
            fontSize: 23,
            textStyle: "#67e0e3",
            series: {
              radius: ["65%", "85%", "85%", "90%"],
              color: ["rgba(196,163,250,0.47)", "transparent"],
              dataColor: {
                normal: "#9d00ff",
                shadowColor: "#c9adfc"
              }
            }
          }
        },
        {
          id: "centerRate4",
          tips: parseInt(this.dashboardelecdata.gtg1Wr),
          colorData: {
            fontSize: 23,
            textStyle: "#67e0e3",
            series: {
              radius: ["65%", "85%", "85%", "90%"],
              color: ["rgba(163,250,177,0.47)", "transparent"],
              dataColor: {
                normal: "#00ff0d",
                shadowColor: "#b2fcad"
              }
            }
          }
        }
      ]
    };
  },
  components: {
    centerChart
    // centerChart1,
    // centerChart2
  },
  mounted() {
    this.initChart();
  },
  methods: {
    openChartUsed(){
      this.openChart = true
    },
    open(){
      this.$nextTick(() => {
        this.initChartDialog()
      })
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('naturalGasChart'))
      const hourArray = [];
      const carbonArray = [];
      let data = this.latest24HourData;
      for (let i = 0; i < data.length; i++) {
        if (i % 4 == 0) {
          hourArray.push(data[i].pullDate.toString().substr(14, 5));
          carbonArray.push(data[i].carbonRealTime);
        }
      }
      hourArray.reverse();
      carbonArray.reverse();
      this.chart.setOption({
        xAxis: {
          type: 'category',
          data: hourArray
        },
        yAxis: {
          type: 'value',
          name:  'Unit:(t)'
        },
        series: [
          {
            data: carbonArray,
            type: 'line',
            smooth: true,
            symbol: '',
            symbolSize: 15,
            lineStyle: {
              color: '#5470C6',
              width: 6,
              type: 'dashed'
            },
            itemStyle: {
              borderWidth: 3,
              borderColor: '#EE6666',
              color: 'yellow'
            }
          }
        ]
        // 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]
        //   },
        // ]
      })
    },
    initChartDialog() {
      // 基于准备好的dom，初始化echarts实例
      this.chart1 = this.echarts.init(document.getElementById('naturalGasChartDialog'))

      this.chart1.setOption({
        xAxis: {
          type: 'category',
          data: [
            '00:00-03:00',
            '03:00-06:00',
            '06:00-09:00',
            '09:00-12:00',
            '12:00-15:00',
            '15:00-18:00',
            '18:00-21:00',
            '21:00-00:00'
          ]
        },
        yAxis: {
          type: 'value',
          name:  'Unit:(t)'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'line',
            smooth: true,
            symbol: '',
            symbolSize: 15,
            label: {
              show: true,
              position: 'top'
            },
            lineStyle: {
              color: '#5470C6',
              width: 6,
              type: 'dashed'
            },
            itemStyle: {
              borderWidth: 3,
              borderColor: '#EE6666',
              color: 'yellow'
            }
          }
        ]
        // 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 {
    .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 {
        padding-top:60px;
        width: 100%;
        height: 2rem;
      }
    }
  }
}
</style>