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>