project-html/src/views/project/report/index.vue

<template>
  <div class="dashboard-editor-container">
    <div class="card" style="">
      <div class="" style="position: absolute;left: 20px">
        <span class="fontT" style="font-weight: bold">项目年份：</span>

        <el-radio-group v-model="yearRadio2" @change="changeList">
          <el-radio-button label="999" border selected><span class="fontT">2016年至今</span></el-radio-button>
          <el-radio-button
            v-for="dict in yearOptions"
            :key="dict"
            :label="dict"
            border
          ><span class="fontT">{{ dict }}</span></el-radio-button
          >
          <el-radio-button label="2015" border><span class="fontT">2016年以前</span></el-radio-button>
        </el-radio-group>

        <!--          <el-button slot="append" icon="el-icon-search" @click="searchToPage"></el-button>-->
      </div>


    </div>


    <el-row :gutter="32">

      <el-col :xs="12" :sm="22" :lg="8" class="boders">
        <div class="chart-wrapper" >
          <!-- <raddar-chart /> -->
          <BarLineChart height="430px" :blXData="blX" :blLgData="blLg" :blSerData="blSer" :blTitle="blTitle" @yearToPage="toYearPage"/>
        </div>
      </el-col>

      <el-col :xs="12" :sm="22" :lg="8" class="boders">
        <div class="chart-wrapper" >
          <SecretPieChart height="430px"  :secretData="secretData" :otTitle="otTitle" @secToPage="toSecPage"/>
        </div>
      </el-col>


      <el-col :xs="12" :sm="22" :lg="8" class="boders">
        <div class="chart-wrapper" >
          <TypePieChart height="430px" :typelg="typelg" :typeData="typeData" :otTitle="otTitle" @typeToPage="toTypePage"/>
        </div>
      </el-col>

      <el-col :xs="12" :sm="22" :lg="8" class="boders">
        <div class="chart-wrapper">
          <pie-chart height="430px" :pieLegend="pieLgData" :pieData="pieData" :otTitle="otTitle" @deptToPage="toDeptPage"/>
        </div>
      </el-col>

      <el-col :xs="12" :sm="22" :lg="8" class="boders">
        <div class="chart-wrapper">
          <BLYiTuoChart height="430px" :xAxisDataLeft7="xAxisCenter7" :seriesData1="seriesCenter7" :otTitle="otTitle"  @yituoUnitPage="toyituoUnitPage"/>
        </div>
      </el-col>

      <el-col :xs="12" :sm="22" :lg="8" class="boders">
        <div class="chart-wrapper">
          <bar-chart3 height="430px" :xAxisDataLeft8="xAxisCenter8" :seriesDataLeft8="seriesCenter8" :otTitle="otTitle" @userNamePage="toUserNamePage"/>
        </div>
      </el-col>
      <el-col :xs="12" :sm="22" :lg="8" class="boders">
        <div class="chart-wrapper">
          <circle-chart2 height="430px" :chartData="imKeyData" :otTitle="otTitle" @circlePage="toCirclePage"/>
        </div>
      </el-col>

      <el-col :xs="12" :sm="22" :lg="8" class="boders">
        <div class="chart-wrapper">
          <china-map height="430px" :mapData="areaData" :otTitle="otTitle" @mapToPage="toMapPage"/>
        </div>
      </el-col>







    </el-row>
  </div>
</template>

<script>
  import BarLineChart from "../../dashboard/BarLineChart";
  import SecretPieChart from "../../dashboard/SecretPieChart";
  import TypePieChart from "../../dashboard/TypePieChart";
  import BLYiTuoChart from "../../dashboard/BLYiTuoChart";
  import PieChart from "../../dashboard/PieChart";
  import BarChart2 from "../../dashboard/BarChart2";
  import BarChart3 from "../../dashboard/BarChart3";
  import ChinaMap from "../../dashboard/ChinaMap";
  import CircleChart2 from "../../dashboard/CircleChart2";
  import { left1Data,center5Data,center2Data,right3Data,left4Data,right6Data,left7Data,center8Data,left7Data2} from "@/api/project/info3";
  import Utils from "@/utils/utils";
  import {mapMutations, mapState} from 'vuex'
  export default {
    name: "Index",
    components: {
      BarLineChart,
      SecretPieChart,
      TypePieChart,
      BLYiTuoChart,
      PieChart,
      ChinaMap,
      BarChart2,
      BarChart3,
      CircleChart2
    },
    data() {
      return {
        title:'综合视图',
        name: "",
        searchTime: "",
        yearRadio2: "999",
        yearOptions: [],
        cnCount:0,
        cgCount:0,
        lxCount:0,
        allCount:0,
        xAxisLeft1:[],
        seriesLeft1:[],
        xAxisCenter5:[],
        seriesCenter5:[],
        xAxisCenter7:[],
        seriesCenter7:[],
        xAxisCenter8:[],
        seriesCenter8:[],
        pieData:[],
        pieLgData:[],
        areaData:[],
        blTitle:"",
        otTitle:"",
        blX:[],
        blLg:[],
        blSer:[],
        typelg:[],
        typeData:[],
        secretData:[],
        imKeyData:[]
      };
    },
    mounted() {
      // const year = new Date().getFullYear();
      // // console.log(year);
      // for(let i=0;i<3;i++){
      //   // console.log(year-i);
      //   this.timeOptions.push(year-i)
      // }
    },
    created(){
      var date = new Date();
      var year = date.getFullYear();

      this.yearOptions[0] = year;
      this.yearOptions[1] = year - 1;
      this.yearOptions[2] = year - 2;
      this.yearOptions[3] = year - 3;
      this.yearOptions[4] = year - 4;
      this.yearOptions[5] = year - 5;
      const queryParams = {
        // name:this.name,
        yearRadio2:'999'
      };
      this.getLeft1(queryParams);
      this.getCenter5(queryParams);
      this.getCenter2(queryParams);
      this.getRight3(queryParams);
      this.getLeft4(queryParams);
      this.getRight6(queryParams);
      this.getLeft7(queryParams);
      this.getCenter8(queryParams);

    },
    methods: {
      ...mapMutations(['changeTitle']),
      plan(title){
        Utils.$emit('demo',title);//msg为传递参数，后面可以紧跟多个参数

      },
      searchToPage(){
        let yearRadio = this.yearRadio2;
        this.plan('咨询项目')
        this.changeTitle('zxxm')
        this.$router.push({path:"/project/infoShow/query",query:{yearRadio2:yearRadio}} );
      },
      toYearPage(year){
        this.plan('咨询项目')
        this.changeTitle('zxxm')
        this.$router.push({path:"/project/infoShow/query",query:{yearRadio2:year}} );
      },
      toSecPage(secLevel){
        this.plan('咨询项目')
        this.changeTitle('zxxm')
        let yearRadio = this.yearRadio2;
        this.$router.push({path:"/project/infoShow/query",query:{secrecyLevel:secLevel,yearRadio2:yearRadio}} );
      },
      toTypePage(type){
        this.plan('咨询项目')
        this.changeTitle('zxxm')
        let yearRadio = this.yearRadio2;
        this.$router.push({path:"/project/infoShow/query",query:{type:type,yearRadio2:yearRadio}} );
      },
      toDeptPage(departmentId){
        this.plan('咨询项目')
        this.changeTitle('zxxm')
        let yearRadio = this.yearRadio2;
        this.$router.push({path:"/project/infoShow/query",query:{departmentId:departmentId,yearRadio2:yearRadio}} );
      },
      toyituoUnitPage(unit){
        this.plan('咨询项目')
        this.changeTitle('zxxm')
        let yearRadio = this.yearRadio2;
        this.$router.push({path:"/project/infoShow/query",query:{yituoUnit:unit,yearRadio2:yearRadio}} );

      },
      toUserNamePage(userName){
        this.plan('咨询项目')
        this.changeTitle('zxxm')
        let yearRadio = this.yearRadio2;
        this.$router.push({path:"/project/infoShow/query",query:{userName:userName,yearRadio2:yearRadio}} );

      },
      toCirclePage(importKey){
        this.plan('咨询项目')
        this.changeTitle('zxxm')
        let yearRadio = this.yearRadio2;
        this.$router.push({path:"/project/infoShow/query",query:{importantKey:importKey,yearRadio2:yearRadio}} );

      },
      toMapPage(area){
        this.plan('咨询项目')
        this.changeTitle('zxxm')
        let yearRadio = this.yearRadio2;
        this.$router.push({path:"/project/infoShow/query",query:{yituoArea:area,yearRadio2:yearRadio}} );

      },
      toInstructionStatus(){
        this.plan('院士建议')
        this.changeTitle('ysjj')
        let yearRadio = this.yearRadio2;
        this.$router.push({path:"/project/infoShow/adviseList",query:{yituoArea:area,yearRadio2:yearRadio}} );

      },

      changeList(){
        const queryParams = {
          // name:this.name,
          yearRadio2:this.yearRadio2
        };
        this.getLeft1(queryParams);
        this.getCenter5(queryParams);
        this.getCenter2(queryParams);
        this.getRight3(queryParams);
        this.getLeft4(queryParams);
        this.getRight6(queryParams);
        this.getLeft7(queryParams);
        this.getCenter8(queryParams);
      },
      toPanelPage(val){
        let yearRadio = this.searchTime;
        if(val == 'all'){
          this.$router.push({path:"../infoShow",query:{yearRadio:yearRadio}} );
        }else if(val == 'lx'){
          this.$router.push({path:"../infoShow",query:{status:'15',yearRadio:yearRadio}} );
        }else if(val == 'cg'){
          this.$router.push({path:"../infoShow",query:{isResult:'3',yearRadio:yearRadio}} );
        }else if(val == 'cn'){
          this.$router.push({path:"../infoShow",query:{pishiStatus:'9',yearRadio:yearRadio}} );
        }
      },
      toCNPage(name,year){
        let pishiStatus = "";
        if(name == "已采纳"){
          pishiStatus = "9"
        }else if(name == "部委采纳"){
          pishiStatus = "2"
        }else if(name == "中央采纳"){
          pishiStatus = "1"
        }
        this.$router.push({path:"../infoShow",query:{pishiStatus:pishiStatus,yearRadio:year}} );
      },
      searchForAll(){
        const queryParams = {
          // name:this.name,
          yearRadio2:this.yearRadio2
        };
        this.getCenter5(queryParams);
        this.getCenter2(queryParams);
        this.getRight3(queryParams);
        this.getLeft4(queryParams);
        this.getRight6(queryParams);
        this.getLeft7(queryParams);
        this.getCenter8(queryParams);
      },
      getLeft1(queryParams){
        left1Data(queryParams).then(
          resp=>{
            if(this.yearRadio2 =='2015'){
              this.blTitle="2016年以前"
            }else{
              this.blTitle="2016-今"
            }

            this.blLg = ['项目数', '经费数'];
            this.blX =resp.data.yearArray;
            let temp = [];
            let item = {};
            item.name = '项目数';
            item.type='bar';
            item.barWidth=50;
            item.data=resp.data.numArray;
            item.itemStyle={
              normal: {
                //这里是重点
                color: '#5470c6'
              }

            };
            temp.push(item);
            let item1 = {};
            item1.name = '经费数';
            item1.type='line';
            item1.yAxisIndex= 1;
            item1.data=resp.data.bugetArray;
            item1.itemStyle={
              normal: {
                //这里是重点
                color: '#ffa200'
              }

            };
            temp.push(item1);
            this.blSer=temp;

          }
        );
      },
      getCenter5(queryParams){
        center5Data(queryParams).then(
          resp=>{
            if(this.yearRadio2 =='2015'){
              this.otTitle="2016年以前"
            }else if(this.yearRadio2 =='999'){
              this.otTitle="2016-今"
            }else{
              this.otTitle=this.yearRadio2 +"年"
            }
            this.areaData=resp.data.mapData
          }
        );
      },
      getCenter2(queryParams){
        center2Data(queryParams).then(
          resp=>{
            if(this.yearRadio2 =='2015'){
              this.otTitle="2016年以前"
            }else if(this.yearRadio2 =='999'){
              this.otTitle="2016-今"
            }else{
              this.otTitle=this.yearRadio2 +"年"
            }
            this.secretData = resp.data.secretData;
            // this.secretData.forEach(item=>{
            //   if (item.name=='机密'){
            //     item.itemStyle= {
            //       color: "#e8240e"
            //     };
            //   }else if (item.name=='秘密'){
            //     item.itemStyle={
            //       color: "#ff604e"
            //     }
            //   }else if (item.name=='内部'){
            //     item.itemStyle={
            //       color: "#2250bb"
            //     }
            //   }else if (item.name=='非密'){
            //     item.itemStyle={
            //       color:"#0095ff"
            //     }
            //   }
            // })
          }
        );
      },
      getRight3(queryParams){
        right3Data(queryParams).then(
          resp=>{
            if(this.yearRadio2 =='2015'){
              this.otTitle="2016年以前"
            }else if(this.yearRadio2 =='999'){
              this.otTitle="2016-今"
            }else{
              this.otTitle=this.yearRadio2 +"年"
            }
            this.typelg = resp.data.legendData;
            this.typeData=resp.data.pieData;
          }
        );
      },
      getLeft4(queryParams){
        left4Data(queryParams).then(
          resp=>{
            if(this.yearRadio2 =='2015'){
              this.otTitle="2016年以前"
            }else if(this.yearRadio2 =='999'){
              this.otTitle="2016-今"
            }else{
              this.otTitle=this.yearRadio2 +"年"
            }
            this.pieLgData = resp.data.legendData;
            this.pieData=resp.data.pieData;
          }
        );
      },
      getRight6(queryParams){
        var colorList = [[
          '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
          '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
          '#1e90ff', '#ff6347', '#7b68ee', '#d0648a', '#ffd700',
          '#6b8e23', '#4ea397', '#3cb371', '#b8860b', '#7bd9a5'
        ],
          [
            '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
            '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
            '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
            '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
          ],
          [
            '#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe',
            '#bb60b2', '#433e7c', '#f47a75', '#009db2', '#024b51',
            '#0780cf', '#765005', '#e75840', '#26ccd8', '#3685fe',
            '#9977ef', '#f5616f', '#f7b13f', '#f9e264', '#50c48f'
          ]][2];
        right6Data(queryParams).then(
          resp=>{
            if(this.yearRadio2 =='2015'){
              this.otTitle="2016年以前"
            }else if(this.yearRadio2 =='999'){
              this.otTitle="2016-今"
            }else{
              this.otTitle=this.yearRadio2 +"年"
            }
            const serData = resp.data.serData;
            let data = [];
            serData.forEach(s=>{
              let obj = {
                name:s[2],
                value:s[1],
                symbolSize:(s[1]+60),
                draggable:true,
                itemStyle: {
                  normal: {
                    shadowBlur: 100,
                    shadowColor: colorList[s[0]],
                    color: colorList[s[0]]
                  }
                }
              };
              data.push(obj)
            });
            this.imKeyData=data
          }
        );
      },
      getLeft7(queryParams){
        left7Data(queryParams).then(
          resp => {
            if(this.yearRadio2 =='2015'){
              this.otTitle="2016年以前"
            }else if(this.yearRadio2 =='999'){
              this.otTitle="2016-今"
            }else{
              this.otTitle=this.yearRadio2 +"年"
            }

            let temp = [];
            let item = {};
            item.name = '经费数';
            item.type='bar';
            item.barGap="-100%";
            item.data=resp.data.yjfArray;
            item.itemStyle={
              normal: {
                //这里是重点
                color: 'rgb(129,162,255)'
              }

            };
            temp.push(item);
            let item1 = {};
            item1.name = '实际经费';
            item1.type='bar';
            item1.yAxisIndex= 1;
            item1.barGap="-100%";
            item1.data=resp.data.ySjjfArray;
            item1.itemStyle={
              normal: {
                //这里是重点
                color: '#5470c6'
              }

            };
            temp.push(item1);
            let item2 = {};
            item2.name = '项目数';
            item2.type='line';
            item2.yAxisIndex= 2;
            item2.data=resp.data.yNumArray;
            item2.itemStyle={
              normal: {
                //这里是重点
                color: '#ffa200'
              }
            };
            temp.push(item2);
            this.seriesCenter7 = temp;
            this.xAxisCenter7 = resp.data.xAxisArray;

          }
        );
      },
      getCenter8(queryParams){
        center8Data(queryParams).then(
          resp => {
            if(this.yearRadio2 =='2015'){
              this.otTitle="2016年以前"
            }else if(this.yearRadio2 =='999'){
              this.otTitle="2016-今"
            }else{
              this.otTitle=this.yearRadio2 +"年"
            }
            this.seriesCenter8 = resp.data.xAxisArray;
            this.xAxisCenter8 = resp.data.yAxisArray;
          }
        );
      }

    },
    computed:{
      ...mapState(['title'])
    }
  };
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(246,247,251);
    position: relative;
    .flex1 {
      flex: 1;
    }
    .chart-wrapper {

      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
  .card {
    position: relative;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    font-size: 18px;
    background-color: white;
    margin-bottom: 20px;
  }
  .box-card {

    background-color: #f3f3f3;
    flex: 1;
    margin: 20px;
    border-radius: 5px;
    /deep/ .el-card__body {

      display: flex;
      justify-content: flex-start;
      align-items: center;
      .icon {
        width: 50px;
        height: 50px;
        font-size: 50px;
        margin-right: 30px;
      }
      .num {
        font-weight: 600;
        margin-top: 10px;
      }
      .blue {
        color: rgb(15, 59, 180);
      }
      .red {
        color: rgb(218, 39, 39);
      }
      .orange {
        color: orange;
      }
      .green {
        color: green;
      }
    }
  }
  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
  .boders{
    /*border: 1px solid white;*/
  }
  .fontT{
    font-size: 20px;

  }
</style>