guan_client/src/views/modules_guAn/visualization/modules/RunningState.vue

<template>
  <div class="running-state-module">
    <common-title title="程序运行状态"></common-title>
    <div class="visualization-common-border box">
      <!-- 左边 -->
      <div class="le">
        <div class="itemHead">
          <div class="lee"></div>
          <div class="cee">全部</div>
          <div class="rii">内部</div>
        </div>
        <div class="item">
          <div class="lee">循环设定值</div>
          <div class="cee">0</div>
          <div class="rii">0</div>
        </div>
        <div class="item">
          <div class="lee">循环运行值</div>
          <div class="cee">0</div>
          <div class="rii">0</div>
        </div>
        <div class="itemHead">
          <div class="lee"></div>
          <div class="cee">起始</div>
          <div class="rii">目标</div>
        </div>
        <div class="item">
          <div class="lee">温度</div>
          <div class="cee">0</div>
          <div class="rii">0</div>
        </div>
        <div class="item">
          <div class="lee">湿度</div>
          <div class="cee">0</div>
          <div class="rii">0</div>
        </div>
        <div class="item">
          <div class="lee">辐射强度</div>
          <div class="cee">0</div>
          <div class="rii">0</div>
        </div>
        <div style="width: 100%; height: 12%; margin-bottom: 4.5px; display: flex;">
          <div style="width: 45%; height: 100%; font-size: 11px; color: #0CB8FF; display: flex; align-items: center; justify-content: center;">预计结束时间:</div>
          <div style="width: 60%; height: 100%; font-size: 8px; color: #FEFFFE; display: flex; align-items: center; justify-content: center;">2023年12月13日08时30分</div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="ce">
        <div class="itemHead">
          <div class="leece">内部循环</div>
          <div class="ceece">起始段</div>
          <div class="ceecee">结束段</div>
          <div class="riice">次数</div>
        </div>
        <div class="item">
          <div class="leece">1</div>
          <div class="ceece">0</div>
          <div class="ceecee">0</div>
          <div class="riice">0</div>
        </div>
        <div class="item">
          <div class="leece">2</div>
          <div class="ceece">0</div>
          <div class="ceecee">0</div>
          <div class="riice">0</div>
        </div>
        <div class="item">
          <div class="leece">3</div>
          <div class="ceece">0</div>
          <div class="ceecee">0</div>
          <div class="riice">0</div>
        </div>
        <div class="item">
          <div class="leece">4</div>
          <div class="ceece">0</div>
          <div class="ceecee">0</div>
          <div class="riice">0</div>
        </div>
        <div class="itemHead">
          <div class="leece">总运行</div>
          <div class="ceece"></div>
          <div class="ceecee"></div>
          <div class="riice"></div>
        </div>
        <div class="item">
          <div class="leece">运行段数</div>
          <div class="ceece">0</div>
          <div class="ceecee"></div>
          <div class="riice"></div>
        </div>
        <div class="item">
          <div class="leece">设定段数</div>
          <div class="ceece">0</div>
          <div class="ceecee"></div>
          <div class="riice"></div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="ri">
        <div class="itemHead">
          <div class="leeri">当前</div>
          <div class="riiri"></div>
        </div>
        <div class="item">
          <div class="leeri">运行程序号</div>
          <div class="riiri">0</div>
        </div>
        <div class="item">
          <div class="leeri">运行段号</div>
          <div class="riiri">0</div>
        </div>
        <div class="item">
          <div class="leeri">运行时间</div>
          <div class="riiri">0min</div>
        </div>
        <div class="item">
          <div class="leeri">剩余时间</div>
          <div class="riiri">0min</div>
        </div>
        <div class="item">
          <div class="leeri">总时间</div>
          <div class="riiri">0min</div>
        </div>
        <div class="echarts">
          <div style="width: 30%; height: 100%; font-size: 12px; color: #0CB8FF; display: flex; align-items: center; padding-left:1%;">进度:</div>
          <div style="width: 55%; height: 100%;" ref="zhuzhuang"></div>
          <div style="width: 10%; height: 100%; font-size: 9px; color: #FEFFFE; display: flex; align-items: center; justify-content: center; padding-top:2%">80%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonTitle from '../components/commonTitle.vue'
import * as echarts from 'echarts';

export default {
  components: { commonTitle },
  name: '',
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
    this.drawzhuzhuang() //绘制进度条
    // echarts自适应
    window.addEventListener("resize", () =>{
      this.zhuChart.resize();
    });
  },
  methods: {
    drawzhuzhuang(){
      var chartDom = this.$refs.zhuzhuang
      this.zhuChart = echarts.init(chartDom);
      var option;
      const CubeLeft = echarts.graphic.extendShape({
          shape: {
              x: 0,
              y: 0
          },
          buildPath: function(ctx, shape) {
              console.log(ctx,shape);
              const yAxisPoint = shape.yAxisPoint
              const c0 = [shape.x, shape.y]
              const c1 = [shape.x + 9, shape.y - 9]
              const c2 = [yAxisPoint[0] + 9, yAxisPoint[1] - 9]
              const c3 = [yAxisPoint[0], yAxisPoint[1]]
              ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
          }
      })
      const CubeRight = echarts.graphic.extendShape({
          shape: {
              x: 0,
              y: 0
          },
          buildPath: function(ctx, shape) {
              const yAxisPoint = shape.yAxisPoint
              const c1 = [shape.x, shape.y]
              const c2 = [yAxisPoint[0], yAxisPoint[1]]
              const c3 = [yAxisPoint[0] + 9, yAxisPoint[1] + 18]
              const c4 = [shape.x + 9, shape.y + 18]
              ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
          }
      })
      const CubeTop = echarts.graphic.extendShape({
          shape: {
              x: 0,
              y: 0
          },
          buildPath: function(ctx, shape) {
              const c1 = [shape.x, shape.y]
              const c2 = [shape.x + 9, shape.y + 18]
              const c3 = [shape.x + 18, shape.y + 9]
              const c4 = [shape.x + 9, shape.y - 9]
              ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
          }
      })
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)
      const MAX = [6000]
      const VALUE = [5000]
      const NAMES = ['进度'];
      option = {
          // backgroundColor: "#010d3a",
          // title: {
          //     text: '',
          //     top: 32,
          //     left: 18,
          //     textStyle: {
          //         color: '#00F6FF',
          //         fontSize: 24
          //     }
          // },
          grid: {
              // left: 10,
              // right: 10,
              bottom: '10',
              top: 10,
              // containLabel: true
          },
          yAxis: {
              type: 'category',
              data: NAMES,
              axisLine: {
                  show: false,
                  lineStyle: {
                      color: 'white'
                  }
              },
              offset: 20,
              axisTick: {
                  show: false,
                  length: 9,
                  alignWithLabel: true,
                  lineStyle: {
                      color: '#7DFFFD'
                  }
              },
              axisLabel: {
                  fontSize: 10
              }
          },
          xAxis: {
              type: 'value',
              axisLine: {
                  show: false,
                  lineStyle: {
                      color: 'white'
                  }
              },
              splitLine: {
                  show: false
              },
              axisTick: {
                  show: false
              },
              axisLabel: {
                  show:false,
                  fontSize: 16
              },
              boundaryGap: ['20%', '20%']
          },
          series: [{
              type: 'custom',
              renderItem: function(params, api) {
                  const location = api.coord([api.value(0), api.value(1)])
                  return {
                      type: 'group',
                      children: [{
                          type: 'CubeLeft',
                          shape: {
                              api,
                              xValue: api.value(0),
                              yValue: api.value(1),
                              x: location[0],
                              y: location[1],
                              yAxisPoint: api.coord([0,api.value(1)])
                          },
                          style: {
                              fill: 'rgba(7,29,97,.6)'
                          }
                      }, {
                          type: 'CubeRight',
                          shape: {
                              api,
                              xValue: api.value(0),
                              yValue: api.value(1),
                              x: location[0],
                              y: location[1],
                              yAxisPoint: api.coord([0,api.value(1)])
                          },
                          style: {
                              fill: 'rgba(10,35,108,.7)'
                          }
                      }, {
                          type: 'CubeTop',
                          shape: {
                              api,
                              xValue: api.value(0),
                              yValue: api.value(1),
                              x: location[0],
                              y: location[1],
                              yAxisPoint: api.coord([0,api.value(1)])
                          },
                          style: {
                              fill: 'rgba(11,42,106,.8)'
                          }
                      }]
                  }
              },
              data: MAX
          },
          {
              type: 'custom',
              renderItem: (params, api) => {
                  const location = api.coord([api.value(0), api.value(1)])
                  return {
                      type: 'group',
                      children: [{
                          type: 'CubeLeft',
                          shape: {
                              api,
                              xValue: api.value(0),
                              yValue: api.value(1),
                              x: location[0],
                              y: location[1],
                              yAxisPoint: api.coord([0,api.value(1)])
                          },
                          style: {
                              fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                      offset: 0,
                                      color: '#3B80E2'
                                  },
                                  {
                                      offset: 1,
                                      color: '#49BEE5'
                                  }
                              ])
                          }
                      }, {
                          type: 'CubeRight',
                          shape: {
                              api,
                              xValue: api.value(0),
                              yValue: api.value(1),
                              x: location[0],
                              y: location[1],
                              yAxisPoint: api.coord([0,api.value(1)])
                          },
                          style: {
                              fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                      offset: 0,
                                      color: '#3B80E2'
                                  },
                                  {
                                      offset: 1,
                                      color: '#49BEE5'
                                  }
                              ])
                          }
                      }, {
                          type: 'CubeTop',
                          shape: {
                              api,
                              xValue: api.value(0),
                              yValue: api.value(1),
                              x: location[0],
                              y: location[1],
                              yAxisPoint: api.coord([0,api.value(1)])
                          },
                          style: {
                              fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                      offset: 0,
                                      color: '#3B80E2'
                                  },
                                  {
                                      offset: 1,
                                      color: '#49BEE5'
                                  }
                              ])
                          }
                      }]
                  }
              },
              data: VALUE
          },
          {
              type: 'bar',
              label: {
                  normal: {
                      show: true,
                      position: 'right',
                      formatter: (e) => {
                          switch (e.name) {
                              case '10kV线路':
                                  return VALUE[0]
                              case '公用配变':
                                  return VALUE[1]
                              case '35kV主变':
                                  return VALUE[2]
                              case '水':

                          }
                      },
                      fontSize: 16,
                      color: '#fff',
                      offset: [25, 4]
                  }
              },
              itemStyle: {
                  color: 'transparent'
              },
              data: MAX
          }]
      }
      option && this.zhuChart.setOption(option);
    }
    // drawzhuzhuang(){
    //   var chartDom = this.$refs.zhuzhuang
    //   this.zhuChart = echarts.init(chartDom);
    //   var option;

    //   option = {
    //     grid: {
    //     left: '0',
    //     // right: '1%',
    //     bottom: '58',
    //     // top: '1%',
    //     // 左侧文字显示
    //     // containLabel: true,
    //     },
    //     xAxis: {
    //         show: false,
    //         type: 'value',
    //         max: 100,
    //     },
    //     yAxis: [
    //         {
    //             type: 'category',
    //             inverse: false,
    //             axisLabel: {
    //                 show: true,
    //                 textStyle: {
    //                     fontSize: '8',
    //                     color: '#03fcfe',
    //                 },
    //             },
    //             splitLine: {
    //                 show: false,
    //             },
    //             axisTick: {
    //                 show: false,
    //             },
    //             axisLine: {
    //                 show: false,
    //             },
    //         },
    //         {
    //             type: 'category',
    //             inverse: true,
    //             axisTick: 'none',
    //             axisLine: 'none',
    //             show: true,
    //             data: [80],
    //         },
    //     ],
    //     series: [
    //         {
    //             type: 'bar',
    //             showBackground: true,
    //             backgroundStyle: {
    //                   color: 'rgba(180, 180, 180, 0.2)',
    //                   borderRadius:30
    //             },
    //             // 百分数显示
    //             // label:{
    //             //     show:true,
    //             //     position:'right',
    //             //     formatter:'{@score}%',
    //             //     textStyle: {
    //             //         color: '#03fcfe',
    //             //         fontSize: '8',
    //             //     },
    //             // },
    //             itemStyle: {
    //                 normal: {
    //                     barBorderRadius: 10,
    //                     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
    //                         {
    //                             offset: 0,
    //                             color: '#1badf9',
    //                         },
    //                         {
    //                             offset: 1,
    //                             color: '#03fcfe',
    //                         },
    //                     ]),
    //                 },
    //             },
    //             barWidth: 10,
    //             data: [80],
    //         },
    //     ],
    //   };
    //   option && this.zhuChart.setOption(option);
    // },
  }
}
</script>

<style scoped>
  @import '~@/assets/less/uStyle.less';
</style>
<style lang="less" scoped>
  .running-state-module{
    width: 100%;
    height: 100%;
  }
  .box {
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
    /* row (默认值) : 主轴为水平万向，起点在左端。*/
    flex-direction: row;
  }
  .le {
    height: 93%;
    width: 37%;
    margin: 2% 0% 2% 2%;
    // border: 1px solid rgb(255, 255, 255);
  }
  .ce{
    height: 93%;
    width: 37%;
    margin: 2% 0% 2% 2%;
    // border: 1px solid rgb(255, 255, 255);
  }
  .ri{
    height: 93%;
    width: 24%;
    margin: 2%;
    // border: 1px solid rgb(255, 255, 255);
  }
  .itemHead{
    width: 100%;
    height: 10%;
    // border: 1px solid rgb(255, 255, 255);
    margin-bottom: 4.5px;
    background-color: #094F8D;
    color: #0CB8FE;
    padding-left: 2%;
    border-radius: 2px;
    display: flex;
    align-items: center;
  }
  .item{
    width: 100%;
    height: 10%;
    // border: 1px solid rgb(255, 255, 255);
    margin-bottom: 4.5px;
    background-color: #072A54;
    color: #FEFFFE;
    padding-left: 2%;
    border-radius: 2px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  // 左
  .lee{
    width: 40%;
    height: 100%;
    font-size: 12px;
    // border: 1px solid rgb(255, 255, 255);
    color: #0CB8FF;
    display: flex;
    align-items: center;
  }
  .cee{
    width: 30%;
    height: 100%;
    font-size: 12px;
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .rii{
    width: 30%;
    height: 100%;
    font-size: 12px;
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  // 中
  .leece{
    width: 33%;
    height: 100%;
    font-size: 12px;
    // border: 1px solid rgb(255, 255, 255);
    color: #0CB8FF;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ceece{
    width: 24%;
    height: 100%;
    font-size: 12px;
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ceecee{
    width: 24%;
    height: 100%;
    font-size: 12px;
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  // 右
  .riice{
    width: 19%;
    height: 100%;
    font-size: 12px;
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .leeri{
    width: 65%;
    height: 100%;
    font-size: 12px;
    // border: 1px solid rgb(255, 255, 255);
    color: #0CB8FF;
    display: flex;
    align-items: center;
  }
  .riiri{
    width: 35%;
    height: 100%;
    font-size: 12px;
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  // echarts
  .echarts{
    width: 100%;
    height: 15%;
    margin-top: 5%;
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
  }
</style>