v3-school-level-big-data-web/src/views/safetyOverview/pageComponent/troubleDistributionComponents.vue

<!-- 安全隐患分布 -->
<template>
  <div class="troubleDistributionComponents">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="eCharts-max-big-box">
      <div class="button-box">
        <p class="left-button-box">一级指标隐患</p>
        <p class="right-button-box">未完成整改隐患</p>
        <checkSelectComponents :propsOption="propsOption" :placeholder="'全校'" class="position-check-select"></checkSelectComponents>
      </div>
      <div class="eCharts-flex">
        <div id="troubleDistributionEChartsLeft"></div>
        <div id="troubleDistributionEChartsRight"></div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getDeptDropList,
    reportReportBigDataDangerDistribution,
  } from "@/api/index";
  import checkSelectComponents from "@/components/checkSelectComponents.vue";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'troubleDistributionComponents',
    components: {
      checkSelectComponents,
      titlePageImgComponents
    },
    data () {
      return {
        propsData:{
          title:'安全隐患分布',
          // checkType:'troubleDistributionComponents', //二级未开发-暂时注掉
        },
        //eCharts定时器
        eChartsTimer:null,
        //选择器组件传参
        propsOption:[
          {label:'全校',value:'11'},
          {label:'农学院',value:'1'},
          {label:'理学院',value:'2'},
          {label:'生命科学',value:'3'},
          {label:'园林艺术',value:'4'},
          {label:'植物保护',value:'5'},
          {label:'化学与药物',value:'6'},
          {label:'资源环境',value:'7'},
          {label:'国重楼',value:'8'},
        ],
        deptId:0,
      }
    },
    created () {

    },
    mounted () {
      this.getDeptDropList();
      this.timedRefresh();
    },
    methods: {
      timedRefresh(){
        let self = this;
        self.getData();
        //定时动画
        window.clearInterval(self.eChartsTimer);
        self.eChartsTimer = setInterval(function(){
          self.getData();
        },1000*30);
      },
      getData(){
        reportReportBigDataDangerDistribution({deptId:this.deptId}).then( response => {
          let leftNameList = [];
          let leftDataList = [];
          let leftTextList = [];
          let rightNameList = [];
          let rightDataList = [];
          let rightTextList = [];
          let leftMax = 0;
          let rightMax = 0;
          for(let i=0;i<response.data.dangerOneList.length;i++){
            if(leftMax < response.data.dangerOneList[i].indicatorCount){
              leftMax = response.data.dangerOneList[i].indicatorCount;
            }
          }
          for(let i=0;i<response.data.dangerNoRectifyList.length;i++){
            if(rightMax < response.data.dangerNoRectifyList[i].indicatorCount){
              rightMax = response.data.dangerNoRectifyList[i].indicatorCount;
            }
          }
          for(let i=0;i<response.data.dangerOneList.length;i++){
            leftNameList.push({
              text:response.data.dangerOneList[i].indicatorName,
              max:leftMax,
            })
            leftDataList.push(response.data.dangerOneList[i].indicatorCount)
            leftTextList.push(response.data.dangerOneList[i].indicatorRate+'%')
          }
          for(let i=0;i<response.data.dangerNoRectifyList.length;i++){
            rightNameList.push({
              text:response.data.dangerNoRectifyList[i].indicatorName,
              max:rightMax,
            })
            rightDataList.push(response.data.dangerNoRectifyList[i].indicatorCount)
            rightTextList.push(response.data.dangerNoRectifyList[i].indicatorRate+'%')
          }
          this.eChartsMethodLeft(leftNameList,leftDataList,leftTextList);
          this.eChartsMethodRight(rightNameList,rightDataList,rightTextList);
        });
      },
      //组件方法
      checkSelectData(value){
        this.$set(this,'deptId',value);
        this.getData();
      },
      eChartsMethodLeft(leftNameList,leftDataList,leftTextList) {
        const indicatorList = leftNameList;
        let dataValue = leftDataList
        let option = {
          color: [
            "#FF6A00"
          ],
          radar: [
            {
              axisName: {
                rich: {
                  a: {
                    fontSize: 18,
                    color: "#fff",
                    fontWeight: 500,
                    padding: [
                      10,
                      10,
                      10,
                      10
                    ]
                  },
                  b: {
                    fontSize: 18,
                    fontWeight: 500,
                    verticalAlign: "middle",
                    color: "#FF6A00",
                  }
                },
                formatter: function (name, indicator) {
                  const text = indicator.text
                  const index = indicatorList.findIndex(item => item.text === text)
                  return `{a| ${name}}\n{b| ${leftTextList[index]}}`
                },
              },
              nameGap: 8,
              indicator: indicatorList,
              center: [
                "50%",
                "50%"
              ],
              radius: 80,
              splitNumber: 3,
              splitLine: {
                lineStyle: {
                  color: [
                    "rgba(53, 142, 254, 1)",
                    "#E5E5E5",
                    "#E5E5E5"
                  ],
                  type: [
                    5
                  ]
                }
              },
              splitArea: {
                areaStyle: {
                  color: [
                    "#77EADF",
                    "#26C3BE",
                    "#64AFE9",
                    "#428BD4"
                  ],
                  shadowColor: "rgba(0, 0, 0, 1)",
                  shadowBlur: 10,
                  opacity: 0
                }
              },
              axisLine: {
                lineStyle: {
                  color: "#eee"
                }
              }
            }
          ],
          series: [
            {
              type: "radar",
              radarIndex: 0,
              data: [
                {
                  value: dataValue,
                  name: "Data D",
                  areaStyle: {
                    color: "rgba(255,106,0, 0.6)"
                  },
                  lineStyle: {
                    join: "bevel"
                  },
                  itemStyle: {
                    borderType: "solid",
                    borderWidth: 4,
                    borderJoin: "bevel"
                  }
                }
              ]
            }
          ]
        };

        let echartsBox = this.$echarts.init(document.getElementById('troubleDistributionEChartsLeft'));
        echartsBox.clear();
        echartsBox.setOption(option);
      },
      eChartsMethodRight(rightNameList,rightDataList,rightTextList) {
        const indicatorList = rightNameList;
        let dataValue = rightDataList
        let option = {
          color: [
            "#00F6FF"
          ],
          radar: [
            {
              axisName: {
                rich: {
                  a: {
                    fontSize: 18,
                    color: "#fff",
                    fontWeight: 500,
                    padding: [
                      10,
                      10,
                      10,
                      10
                    ]
                  },
                  b: {
                    fontSize: 18,
                    fontWeight: 500,
                    verticalAlign: "middle",
                    color: "#00F6FF",
                  }
                },
                formatter: function (name, indicator) {
                  const text = indicator.text
                  const index = indicatorList.findIndex(item => item.text === text)
                  return `{a| ${name}}\n{b| ${rightTextList[index]}}`
                },
              },
              nameGap: 8,
              indicator: indicatorList,
              center: [
                "50%",
                "50%"
              ],
              radius: 80,
              splitNumber: 3,
              splitLine: {
                lineStyle: {
                  color: [
                    "rgba(53, 142, 254, 1)",
                    "#E5E5E5",
                    "#E5E5E5"
                  ],
                  type: [
                    5
                  ]
                }
              },
              splitArea: {
                areaStyle: {
                  color: [
                    "#77EADF",
                    "#26C3BE",
                    "#64AFE9",
                    "#428BD4"
                  ],
                  shadowColor: "rgba(0, 0, 0, 1)",
                  shadowBlur: 10,
                  opacity: 0
                }
              },
              axisLine: {
                lineStyle: {
                  color: "#eee"
                }
              }
            }
          ],
          series: [
            {
              type: "radar",
              radarIndex: 0,
              data: [
                {
                  value: dataValue,
                  name: "Data D",
                  areaStyle: {
                    color: "rgba(0,246,255, 0.6)"
                  },
                  lineStyle: {
                    join: "bevel"
                  },
                  itemStyle: {
                    borderType: "solid",
                    borderWidth: 4,
                    borderJoin: "bevel"
                  }
                }
              ]
            }
          ]
        };
        let echartsBox = this.$echarts.init(document.getElementById('troubleDistributionEChartsRight'));
        echartsBox.clear();
        echartsBox.setOption(option);
      },
      getDeptDropList(){
        getDeptDropList({level: 2, deptType: 1 }).then(response => {
          let list = [{label:'全校',value:'0'}];
          for(let i=0;i<response.data.length;i++){
            list.push({
              label:response.data[i].deptShortName,
              value:response.data[i].deptId,
            })
          }
          this.$set(this,'propsOption',list);
        });
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .troubleDistributionComponents{
    width:800px;
    height:474px;
    .eCharts-max-big-box {
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      .button-box {
        height: 113px;
        position: relative;
        .left-button-box{
          text-align: center;
          position: absolute;
          top: 73px;
          left:65px;
          width:280px;
          height:40px;
          background: no-repeat;
          background-image: url("../../../assets/ZDimages/img_bg_yjzbyh@1x.png");
          background-size: 100%;
          color:#00FFFF;
          font-size:22px;
          line-height:26px;
        }
        .right-button-box{
          text-align: center;
          position: absolute;
          top: 73px;
          left:453px;
          width:280px;
          height:40px;
          background: no-repeat;
          background-image: url("../../../assets/ZDimages/img_bg_yjzbyh@1x.png");
          background-size: 100%;
          color:#00FFFF;
          font-size:22px;
          line-height:26px;
        }
        .position-check-select{
          position: absolute;
          right:29px;
          top:20px;
        }
      }
      .eCharts-flex{
        width: 800px;
        height: 296px;
        display: flex;
        #troubleDistributionEChartsLeft{
          width:400px;
          height: 296px;
        }
        #troubleDistributionEChartsRight{
          width:400px;
          height: 296px;
        }
      }
    }
  }
</style>