nsgk_mobile/src/views/lawEnforcement/caseStatistics/caseStatistics.vue

<template>
    <div class="home_wrapper">
      <div class="header_main">
        案件统计
        <div class="return_btn" @click="onClickLeft"></div>
      </div>
      <div style="height: 58px;"></div>

      <div class="top_main">
        <img src="../../../../static/images/lawEnforcement/icon/statistics_icon_01.png">
        <div class="main_text">
          <p>{{countNum}}</p>
          <p>案件数量</p>
        </div>
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="changeTime"
          placement="bottom-end"
        >
          <template #reference>
            <div class="select_box">
              <p>{{query.year}}</p>
              <van-icon name="arrow-down" color="#ffffff" />
            </div>
          </template>
        </van-popover>
      </div>

      <div class="main_box" style="margin-top: 10px;">
        <p class="tit">案件分类统计</p>

        <div id="main" style="width: 100%;height: 200px;margin-top: 10px"></div>

      </div>

      <div class="main_box" style="margin-top: 10px;">
        <p class="tit">案件来源分析</p>

        <div id="main2" style="width: 100%;height: 200px;margin-top: 10px"></div>

        <div class="len_box">
          <div class="len_box_01" v-for="( item,index ) in caseSourceArray">
            <p><i></i>{{item.name}}</p>
            <p>{{item.value}}</p>
          </div>
<!--          <div class="len_box_02">-->
<!--            <p><i></i>计划执法</p>-->
<!--            <p>64</p>-->
<!--          </div>-->
<!--          <div class="len_box_03">-->
<!--            <p><i></i>计划执法</p>-->
<!--            <p>64</p>-->
<!--          </div>-->
<!--          <div class="len_box_04">-->
<!--            <p><i></i>计划执法</p>-->
<!--            <p>64</p>-->
<!--          </div>-->
        </div>

      </div>

      <div class="main_box" style="margin-top: 10px;">
        <p class="tit">案件月度走势</p>

        <div id="main3" style="width: 100%;height: 200px;margin-top: 10px"></div>

      </div>

    </div>
</template>

<script>
  import { caseNumberAll , caseTypeAccount , caseSourceTypeAccount , casePreMonthNum } from "@/api/lawEnforcement/index";
  import * as echarts from 'echarts';
  export default {
    name: "caseAllocation",
    data() {
      return {
        showPopover: false,
        // 通过 actions 属性来定义菜单选项
        actions: [
          { text: '2022',value:'2022' },
          { text: '2021',value:'2021' },
          { text: '2020',value:'2020' },
          { text: '2019',value:'2019' },
          { text: '2018',value:'2018' },
        ],
        countNum:'',
        query:{
          year:'2022'
        },
        caseSourceArray:[]
      };
    },
    created() {

    },
    mounted(){
      this.getNum();
    },
    methods: {
      changeTime(val){
        console.log(val)
        this.query.year = val.value;
        this.getNum();
      },
      getNum(){
        caseNumberAll(this.query).then(response => {
          this.countNum = response.data;
        })
        caseTypeAccount(this.query).then(response => {
          this.chart(response.data);
        })
        caseSourceTypeAccount(this.query).then(response => {
          this.caseSourceArray =response.data.seriesData;
          this.chart2(response.data);
        })
        casePreMonthNum(this.query).then(response => {
          this.chart3(response.data);
        })
      },
      chart(data){
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '70%'],
              label: {
                // alignTo: 'edge',
                // edgeDistance: 10,
                color: "#000",

                normal: {
                  alignTo: 'edge',
                  edgeDistance: 10,
                  color:'#000',
                  formatter: "{c_set|{c}}\t{a_set|{b}}",
                  rich: {
                    a_set: {
                      // color: "#ffffff",
                      lineHeight: 20,
                      align: "left",
                      fontSize: 12,
                    },
                    c_set: {
                      // color: "#ffffff",
                      fontSize: 14,
                    },
                  },
                },
              },
              data: data.seriesData
            }
          ]
        };

        option && myChart.setOption(option);
      },
      chart2(data){
        var chartDom = document.getElementById('main2');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '70%'],
              label: {
                // alignTo: 'edge',
                // edgeDistance: 10,
                color: "#000",

                normal: {
                  alignTo: 'edge',
                  edgeDistance: 10,
                  color:'#000',
                  formatter: "{c_set|{c}}\t{a_set|{b}}",
                  rich: {
                    a_set: {
                      // color: "#ffffff",
                      lineHeight: 20,
                      align: "left",
                      fontSize: 12,
                    },
                    c_set: {
                      // color: "#ffffff",
                      fontSize: 14,
                    },
                  },
                },
              },
              data: data.seriesData
            }
          ]
        };

        option && myChart.setOption(option);
      },
      chart3(data){
        var chartDom = document.getElementById('main3');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          grid: {
            top:'5%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: data.xaxisData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: data.series,
              type: 'line'
            }
          ]
        };

        option && myChart.setOption(option);
      }
    },
  }
</script>

<style scoped lang="scss">
.home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    padding: 0 3% 0.2rem;
    .header_main{
        height: 116px;
        background: url('../../../../static/images/lawEnforcement/new/list_head.png') no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 36px;
        line-height: 116px;
        text-align: center;
        color: #fff;
        z-index: 999;
        .return_btn{
            width: 24px;
            height: 43.2px;
            background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
            background-size: 20px 36px;
            position: absolute;
            left: 38px;
            top: 36px;
        }
        .add_btn{
            width: 56.4px;
            height: 40.8px;
            background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
            background-size: 47px 34px;
            position: absolute;
            right: 38px;
            top: 36px;
        }
    }
}
.top_main{
  display: flex;
  align-items: center;
  background: url('../../../../static/images/lawEnforcement/new/list_head.png') no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
  padding: 15PX;
  margin-top: 10PX;
  border-radius: 8PX;
  .main_text{
    margin-left: 15PX;
    p{
      &:first-child{
        font-size: .6rem;
      }
    }
  }
  /deep/ .van-popover__wrapper{
    margin-left: auto;
  }
}
.select_box{
  border: 1px solid #ffffff;
  border-radius: 50PX;
  padding: 0 12PX ;
  height: 25PX;
  line-height: 25PX;
  display: flex;
  justify-content: space-around;
  align-items: center;
  p{
    margin-right: 10PX;
  }
}
.main_box {
  width: 100%;
  margin: 0 auto;
  border-radius: 10PX;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  background-color: #FFF;
  padding: 15PX;
  .tit{
    background: url('../../../../static/images/lawEnforcement/icon/statistics_icon_02.png') no-repeat left center;
    padding-left: 10PX;
    font-size: .4rem;
  }
}
.len_box{
  display: flex;
  justify-content: space-between;
  div{
    background: rgba(196,218,249,0.2);
    width: 24%;
    border-radius: 5PX;
    padding: 8PX;
    i{
      width: 10PX;
      height: 10PX;
      display: inline-block;
      border-radius: 2PX;
      margin-right: 5PX;
    }
    p:last-child{
      padding-left: 15PX;
      margin-top: 8PX;
      font-size: .4rem;
    }
    &:nth-child(1){
      i{
        background-color: rgb(84,112,198);
      }
    }
    &:nth-child(2){
      i{
        background-color: rgb(145,204,117);
      }
    }
    &:nth-child(3){
      i{
        background-color: rgb(250,200,88);
      }
    }
    &:nth-child(4){
      i{
        background-color: rgb(238,102,102);
      }
    }
  }
  /*.len_box_01{*/
  /*  i{*/
  /*    background: #1CB8B1;*/
  /*  }*/
  /*}*/
  /*.len_box_02{*/
  /*  i{*/
  /*    background: #508EEC;*/
  /*  }*/
  /*}*/
  /*.len_box_03{*/
  /*  i{*/
  /*    background: #F68E68;*/
  /*  }*/
  /*}*/
  /*.len_box_04{*/
  /*  i{*/
  /*    background: #6163B0;*/
  /*  }*/
  /*}*/
}
</style>