v3-school-widescreen-web/src/views/cengterMaxBox/statisticalAnalysisOfHazardSources/index.vue

<!-- 危险源统计分析 -->
<template>
  <div class="statisticalAnalysisOfHazardSources">
    <titleComponentsMin :propsData="propsData"></titleComponentsMin>
    <div class="statisticalAnalysisOfHazardSourcesPage">
      <div class="title-num-max-box">
        <div class="num-box">
          <p>全部危险源</p>
          <dv-digital-flop :config="hazardTotal" class="dvDigitalFlop"/>
        </div>
        <div class="num-box" style="margin-left:20px;">
          <p>今日新增</p>
          <dv-digital-flop :config="todayAdded" class="dvDigitalFlop"/>
        </div>
      </div>
      <div id="statisticalAnalysisOfHazardSourcesECharts"></div>
    </div>
    <!--<add-page :propsData="propsData" v-if="pageType === 2"></add-page>-->
  </div>
</template>
<script>
  const configData = {
    content: '{nt}',
    textAlign: 'center',
    style: {
      fill: '#fff',
      fontSize: 60,
      fontWeight: 700,
      fontFamily: 'YouSheBiaoTiHei',
      gradientColor: ['#fff', '#FFB31A'],
      gradientType: 'linear',//'linear' | 'radial'
      gradientWith: 'fill',//'stroke' | 'fill'
      gradientParams: [0, 0, 0, 80]
    }
  }
  import { chemicalStockHazardClassStatistics } from "@/api/index";
  import titleComponentsMin from '@/components/titleComponentsMin/index.vue'
  export default {
    name: 'index',
    components: {
      titleComponentsMin
    },
    data () {
      return {
        hazardTotal: {
          number: [0],
          content: configData.content,
          textAlign: configData.textAlign,
          style: configData.style
        },
        todayAdded: {
          number: [0],
          content: configData.content,
          textAlign: configData.textAlign,
          style: configData.style
        },
        //组件传参
        propsData: {
          title: '危险源统计分析'
        },
        //echarts数据
        echartsBox:null,
        // 定时器
        echartsTimer:null,
      }
    },
    created () {

    },
    mounted () {
      this.getList();
      this.timeFunction();
    },
    methods: {
      getList(){
        chemicalStockHazardClassStatistics().then(response => {
          this.$set(this, 'hazardTotal', {
            number: [response.data.hazardTotal],
            content: configData.content,
            textAlign: configData.textAlign,
            style: configData.style
          })
          this.$set(this, 'todayAdded', {
            number: [response.data.todayAdded],
            content: configData.content,
            textAlign: configData.textAlign,
            style: configData.style
          })
          let payload = {
            id: 'left-center-1',
            toolTip: false,
            data: {
              total: '',
              data: [],
              x: [],
            },
          };
          let num = 0;
          response.data.chemicalStockStatisticsVo.forEach((item)=>{
            if(item.chemicalNumber > 0){
              payload.data.x.push(item.chemicalCategory);
              payload.data.data.push(item.chemicalNumber);
              num = num + item.chemicalNumber
            }
          })
          payload.data.total = num;
          this.eChartsMethod(payload);
        })
      },
      eChartsMethod(payload){
        let data = [];
        const color = [
          "#43D0FF",
          "#E7D961",
          "#49A8FF",
          "#FF5B5B",
          "#FFAD69",
          "#37B028",
          "#6950a1",
          "#00a6ac",
          "#426ab3",
          "#f58220",
          "#005831",
          "#ea66a6",
          "#84bf96",
        ];
        payload.data.x.forEach((item, index) => {
          data.push({ value: payload.data.data[index], name: item, label: { color: color[index] } });
        });

        const tooltip = payload.toolTip !== undefined ? payload.toolTip : true;
        let countdata = payload.data.data.reduce((a, b) => Number(a) + Number(b));
        let option = {
          grid: {
            left: 0,
            right: 0,
            bottom: 0,
            top: 0,
            containLabel: true,
          },
          tooltip: {
            show: tooltip,
            backgroundColor: 'rgba(9, 30, 60, 0.6)',
            extraCssText: 'box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;',
            borderWidth: 0,
            confine: false,
            appendToBody: true,
            textStyle: {
              color: '#fff',
              fontSize: 30,
            },
            // 轴触发提示才有效
            axisPointer: {
              type: 'shadow',
            },
            shadowStyle: {
              color: 'rgba(157, 168, 245, 0.1)',
            },
            formatter: function (parms) {
              var str =
                // parms.seriesName + "</br>" +
                parms.marker + parms.name + " </br>" +
                "数量：" + parms.data.value + "</br>";
              // "占比：" + parms.percent + "%";
              return str;
            }
          },
          legend: {
            show: false,
          },
          series: [
            {
              name: payload.title,
              type: 'pie',
              roseType: "area", // 展示南丁格尔图
              radius: ['24%', '75%'],
              minAngle: 8,
              itemStyle: {
                color(params) {
                  return color[params.dataIndex];
                },
              },
              labelLine: {
                // length2: 55,
                length: 40,
                length2: 240,
                lineStyle: {
                  // type: "dashed",
                  width: 2,
                },
              },
              label: {
                position: 'outer',
                alignTo: 'none',
                bleedMargin: 15,
                formatter: ' {a|{c}}\n{b|{b}}',
                padding: -85,
                rich: {
                  a: {
                    padding: [-20, 0, 5, 0],
                    fontSize: 40,
                    lineHeight: 40,
                    color: '#fff',
                    align:'center'
                  },
                  b: {
                    padding: [50, 0, 5, 0],
                    fontSize: 34,
                    lineHeight: 34,
                    color: '#fff',
                    align:'center'
                  },
                },
              },
              data,
            },
            {
              //内环
              type: "pie",
              radius: ["16%", "19%"],
              center: ["50%", "50%"],
              emphasis: {
                scale: false,
              },
              labelLine: {
                show: false,
                length: 30,
                length2: 55,
              },
              data: [
                {
                  name: "",
                  value: 0,
                  itemStyle: {
                    color: "#00B7FF",
                  },
                  tooltip: {
                    show: false,
                  },
                },
              ],
            },
            {
              type: "pie",
              radius: ["24%", "90%"],
              center: ["50%", "50%"],
              emphasis: {
                scale: false,
              },
              labelLine: {
                show: false,
                length: 30,
                length2: 55,
              },
              data: [
                {
                  name: "",
                  value: 0,
                  itemStyle: {
                    color: "rgba(0,183,255,0.1)",
                  },
                  tooltip: {
                    show: false,
                  },
                },
              ],
            },
            {
              type: "pie",
              radius: ["90%", "91%"],
              center: ["50%", "50%"],
              emphasis: {
                scale: false,
              },
              labelLine: {
                show: false,
                length: 30,
                length2: 55,
              },
              data: [
                {
                  name: "",
                  value: 0,
                  itemStyle: {
                    color: "rgba(0,183,255,0.8)",
                  },
                  tooltip: {
                    show: false,
                  },
                },
              ],
            },
            {
              type: "pie",
              radius: ["97%", "98%"],
              center: ["50%", "50%"],
              emphasis: {
                scale: false,
              },
              labelLine: {
                show: false,
                length: 30,
                length2: 55,
              },
              data: [
                {
                  name: "",
                  value: 0,
                  itemStyle: {
                    color: "rgba(0,183,255,0.8)",
                  },
                  tooltip: {
                    show: false,
                  },
                },
              ],
            },
          ],
        };
        this.echartsBox = this.$echarts.init(document.getElementById('statisticalAnalysisOfHazardSourcesECharts'));
        this.echartsBox.clear();
        this.echartsBox.setOption(option);
      },
      //时间定时器
      timeFunction(){
        let self = this;
        this.echartsTimer = window.setInterval(showTime, 180000);
        function showTime() {
          self.getList();
        }
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.echartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.echartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .statisticalAnalysisOfHazardSources{
    margin: 216px 0 0 0;
    .statisticalAnalysisOfHazardSourcesPage{
      width:1194px;
      height:792px;
      overflow: hidden;
      .title-num-max-box{
        margin-left:231px;
        margin-top:40px;
        display: flex;
        .num-box{
          display: flex;
          p{
            font-family: SOURCEHANSANSCN;
            color:#fff;
            padding:0 10px;
            font-size:40px;
            height:60px;
            line-height:60px;
            text-align: center;
          }
          .dvDigitalFlop{
            width:230px;
            height:60px;
            line-height:60px;
          }
        }
      }
      #statisticalAnalysisOfHazardSourcesECharts{
        margin-top:100px;
        width:1194px;
        height:500px;
      }
    }
  }
</style>