taicangZongzhi/src/views/privateOrder/positiveEnergy/components/componentRight.vue

<!--
 * @Author: lough
 * @Date: 2021-12-17 10:07:07
 * @LastEditors: lough
 * @LastEditTime: 2022-11-15 14:16:58
 * @Description:
-->
<template>
  <div class="container">
    <div class="module-container">
      <div class="section-proportion">
        <span class="proportion-title">本级上级网评指令比例（月）</span>
        <div>
          <!-- 圆柱 -->
          <div id="cylinder" />
          <img
            src="@/assets/privateOrder/positiveEnergy/底座3.png"
            alt=""
            class="cylinderBottom"
          />
          <div class="proportion-ratio">
            <div class="proportion-ratio-bl">
              <img
                src="@/assets/privateOrder/positiveEnergy/本级网评指令比例.png"
                alt=""
              />
              <span>本级网评指令比例 </span>
              <span style="margin-left: 20px; color: #71e8fb">
                {{ sjNum   }}%
              </span>
              <div class="progress">
                <div
                  :style="{
                    backgroundColor: '#71e8fb',
                    height: 9,
                    width: sjNum+'%',
                  }"
                ></div>
              </div>
            </div>
            <div class="proportion-ratio-bl">
              <img
                src="@/assets/privateOrder/positiveEnergy/上级网评指令比例.png"
                alt=""
              />
              <span>上级网评指令比例</span>
              <span style="margin-left: 20px; color: #79ffd0">
                {{ bjNum}}%
              </span>
              <div class="progress">
                <div
                  :style="{
                    backgroundColor: '#79ffd0',
                    height: 9,
                    width: bjNum+'%',
                  }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="setion-percentage">
        <span class="percentage-title">网评员任务完成率</span>
        <div id="bar" />
      </div>
    </div>
  </div>
</template>

<script>
import { getComplete } from '@/api/common'
import { networkAppraisercomplete ,networkAppraiser} from '@/api/zongzhi/st.js'
export default {
  components: {},
  filters: {
    numFilter(value) {
      const realVal = Number(value).toFixed(2)
      return Number(realVal)
    }
  },
  data() {
    return {
      sjNum: 0,
      bjNum: 0,
      percentageList: null,
      percentageName: [],
      percentageValue: [],
      sjdata: null,
      bjdata: null
    }
  },
  computed: {},
  watch: {},
  created() {
    const tableObject = require('./data.json')
    this.tableData = tableObject['网评文章录用情况']
  },
  destroyed() { },
  mounted() {
    this.getpercentageData()
    this.getNetworkAppraiser()
    // this.sjdata = Math.round(this.sjNum)
    // this.bjdata = Math.round(this.bjNum)
    // this.inItCylinder()
  },
  methods: {
    getNetworkAppraiser(){
      networkAppraiser().then(res=>{
        this.sjNum = res.data[0].pt
        this.bjNum = res.data[1].pt
       this.sjdata = Math.round(this.bjNum)
    this.bjdata = Math.round(this.sjNum)
          this.inItCylinder()
      })
    },
    // 获取任务完成率data
    getpercentageData() {
      networkAppraisercomplete().then(res=>{
        res.data.forEach(item=>{
          this.percentageName.push(item.name)
          this.percentageValue.push(item.pt)
          this.inItBar()
        })
      })
      // this.percentageName = ['陆渡街道', '港区', '浮桥镇', '编办', '老干部局', '党校', '档案馆']
      // this.percentageValue = [80, 90, 60, 90, 90, 70, 50]
      // this.inItBar()
      // getComplete().then((res) => {
      //   this.percentageName = res['T_DEPT_COMPLETE[]'].map(e => {
      //     return e.dept_name
      //   })
      //   this.percentageValue = res['T_DEPT_COMPLETE[]'].map((e) => {
      //     return e.dept_completion_rate
      //   })
      //   this.inItBar()
      // })
    },
    inItBar() {
      const myChartBar = this.$echarts.init(document.getElementById('bar'))
      const option = {
        animation: true,
        grid: {
          top: '20%',
          bottom: '10%',
          left: '5%'
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b} : {c}%',
          textStyle: {
            fontSize: 26,
            fontWight: 'bold'
          }

        },
        xAxis: {
          data:this.percentageName,
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: 'rgb(255,255,255,0.5)'
            }
          },
          axisTick: {
            show: false // 隐藏X轴轴线
          },
          axisLabel: {
            interval: 0,
            show: true,
            margin: 12,
            fontSize: 28,
            textStyle: {
              color: 'rgb(255,255,255,1)' // X轴文字颜色
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            gridIndex: 0,
            min: 0,
            max: 100,
            interval: 20,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(77, 128, 254, 0.2)',
                width: 1
              }
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(77, 128, 254, 0)'
              }
            },
            axisLabel: {
              show: true,
              margin: 14,
              fontSize: 24,
              textStyle: {
                color: '#68cff9'
              }
            }
          }
        ],
        series: [
          {
            name: '网评员任务完成率',
            type: 'bar',
            barWidth: 25,
            itemStyle: {
              normal: {
                color: '#39b3ff'
              }
            },
            data: this.percentageValue,
            z: 10,
            zlevel: 0
          },
          {
            name: '网评员任务完成率',
            // 分隔
            type: 'pictorialBar',
            itemStyle: {
              normal: {
                color: '#0F375F'
              }
            },
            symbolRepeat: 'fixed',
            symbolMargin: 3,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [18, 7],
            symbolPosition: 'start',
            symbolOffset: [-3, 1],
            data: this.percentageValue,
            width: 2,
            z: 1,
            zlevel: 1
          },
          {
            name: '外框',
            type: 'bar',
            barGap: '-130%', // 设置外框粗细
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100],
            barWidth: 40,
            itemStyle: {
              normal: {
                color: 'rgba(14, 41, 78, 0.3)', // 填充色
                barBorderColor: '#2b405b', // 边框色
                barBorderWidth: 1, // 边框宽度
                label: {
                  // 标签显示位置
                  show: false,
                  position: 'top'
                }
              }
            },
            z: 0
          }
        ],
        dataZoom: [
          {
            type: 'slider',
            show: false,
            xAxisIndex: [0],
            endValue: 6,
            startValue: 0
          }
        ]
      }
      if (option && typeof option === 'object') {
        myChartBar.setOption(option, true)
        // 定时自动滚动
        setInterval(() => {
          if (option.dataZoom[0].endValue === this.percentageValue?.length) {
            option.dataZoom[0].endValue = 6
            option.dataZoom[0].startValue = 0
          } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
          }
          myChartBar.setOption(option, true)
        }, 2000)
      }
    },
    // 初始化圆柱
    inItCylinder() {
      const myChartCylinder = this.$echarts.init(
        document.getElementById('cylinder')
      )
      const option = {
        grid: {
          height: 280,
          width: 130
        },
        xAxis: {
          data: ['上级',],
          show: false
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        series: [
          // 最下面的圆片
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [111, 30],
            symbolOffset: [-9, 15],
            z: 12,
            data: [
              {
                name: '',
                value: this.sjdata,
                itemStyle: {
                  normal: {
                    color: 'rgba(89,211,255,1)' // 最下圆
                  }
                }
              }
            ]
          },
          // 上最面圆片
          {
            name: '', // 头部
            type: 'pictorialBar',
            symbolSize: [111, 30],
            symbolOffset: [-9, -15],
            z: 12,
            data: [
              {
                name: '',
                value: this.sjdata + this.sjdata / 2.4 + this.bjdata * 1.2,
                symbolPosition: 'end',
                itemStyle: {
                  normal: {
                    color: 'rgba(57,119,119,1)' // 最上面的圆
                  }
                }
              }
            ]
          },
          // 中部的圆
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [113, 40],
            symbolOffset: [-10, -20],
            z: 12,
            data: [
              {
                name: '',
                value: this.sjdata * 1.4 - 2,
                symbolPosition: 'end',
                itemStyle: {
                  normal: {
                    color: '#43bafe'
                  }
                }
              }
            ]
          },
          // 下半截柱状图
          {
            name: '',
            type: 'bar',
            barWidth: 250,
            barGap: '-100%',
            itemStyle: {
              // lenged文本
              color: 'rgba(56,117,168,0.2)'
            },
            data: [
              {
                name: '',
                value: this.sjdata * 1.4,
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        {
                          // 第一节下面
                          offset: 0,
                          color: 'rgba(56,117,168,0.3)'
                        },
                        {
                          offset: 1,
                          color: '#43bafe'
                        }
                      ]
                    }
                  }
                }
              }
            ],
            label: {
              show: true,
              position: 'inside',
              offset: [-10, this.sjdata / 3],
              color: '#70c1f9',
              fontSize: 20,
              fontStyle: 'bold',
              align: 'center',
              formatter: '上级' + '\n' + this.sjdata + '%'
            },
            textStyle: {}
          },
          // 。。。中下？？
          {
            // 替代柱状图 默认不显示颜色，是最下方柱图的value值 - 20
            type: 'bar',
            barWidth: 250,
            barGap: '-100%',
            stack: '网评',
            itemStyle: {
              color: 'transparent'
            },
            data: [this.sjdata + this.sjdata / 2.4]
          },

          // 上半部
          {
            name: '本级',
            type: 'bar',
            barWidth: 250,
            barGap: '-100%',
            stack: '网评',
            // 上班截开始
            data: [
              {
                name: '本级网评比例',
                value: this.bjdata * 1.2,
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(70,141,132,1)'
                        },
                        {
                          offset: 1,
                          color: 'rgba(131,237,169,1)'
                        }
                      ]
                    }
                  }
                }
              }
            ],
            label: {
              show: true,
              position: 'inside',
              offset: [-10, 10],
              color: 'rgba(131,237,169,1)',
              fontSize: 20,
              fontStyle: 'bold',
              align: 'center',
              formatter: '本级' + '\n' + this.bjdata + '%',
              rich: {
                a: {
                  color: '#fff'
                }
              }
            }
          }
        ]
      }
      myChartCylinder.setOption(option, true)
    }
  }
}
</script>

<style lang="scss" scoped>
//圆柱
#cylinder {
  position: absolute;
  left: 25px;
  top: 186px;
  width: 123px;
  height: 390px;
}
// //进度条
// #progress {
//   position: relative;
//   top: -8px;
//   left: 31px;
//   display: inline-block;
//   width: 799px;
//   height: 10px;
// }
//任务完成率
#bar {
  width: 1200px;
  height: 380px;
  position: relative;
  left: 60px;
  top: 10px;
}
.container {
  width: 100%;
  height: 100%;
  .module-container {
    width: 1229px;
    height: 971px;
    margin: 130px 0 0 -50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    .section-proportion {
      width: 1229px;
      height: 474px;
      background: url('~@/assets/privateOrder/positiveEnergy/网评比例-bj.png')
        no-repeat;
      background-size: 100% 100%;
      .proportion-title {
        position: relative;
        left: 389px;
        top: 50px;
        font-family: PangMenZhengDao;
        font-size: 38px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
      }
      .cylinderBottom {
        position: absolute;
        top: 432px;
        left: -6px;
      }
      .proportion-ratio {
        position: relative;
        left: 250px;
        top: 90px;
        .proportion-ratio-bl {
          margin-bottom: 40px;
          width: 910px;
          height: 127px;
          font-family: SourceHanSansCN-Regular;
          font-size: 36px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #ffffff;
          background: url('~@/assets/privateOrder/positiveEnergy/bjsj网评.png')
            no-repeat;
          background-size: 100% 100%;
          .progress {
            position: relative;
            top: 21px;
            left: 102px;
            width: 799px;
            height: 8px;
            background-color: #3a5270;
            div {
              height: 8px;
              display: inline-block;
              position: absolute;
            }
          }
        }
        div:nth-child(1) {
          position: relative;
          img {
            position: absolute;
            top: 40px;
            left: 32px;
          }
          span {
            display: inline-block;
            margin-top: 35px;
            margin-left: 120px;
          }
        }
        div:nth-child(2) {
          position: relative;
          img {
            position: absolute;
            top: 40px;
            left: 32px;
          }
          span {
            display: inline-block;
            margin-top: 35px;
            margin-left: 120px;
          }
        }
      }
    }
    .setion-percentage {
      width: 1229px;
      height: 474px;
      background: url('~@/assets/privateOrder/positiveEnergy/完成率-bj.png');
      background-size: 100% 100%;
      .percentage-title {
        position: relative;
        left: 473px;
        top: 47px;
        font-family: PangMenZhengDao;
        font-size: 38px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
      }
    }
  }
}
</style>