fj-dc-ui/.svn/pristine/e9/e93cb3e46f0eb40ed407fef475b1d45c6686067d.svn-base

<!--  -->
<template>
	<div class="mainDiv" style="height:100%;" :style="backgroundChangeColor">
		<!-- 左侧组件 -->
		<!-- <el-button type="text" @click="showPicPanel">pic</el-button> -->
		<div class="left">

			<div class="left_qusLineChart">
				<!--<PublicSentiment></PublicSentiment>-->
        <jc-news @showNews="showNewsHandler" ></jc-news>
			</div>
			<div class="left_notices">
				<jc-notices @showAnnouncement="showAnnouncementHandler"></jc-notices>
			</div>
		</div>

		<!-- 中部组件 -->
		<div class="middle">

			<div class="middle_map">
        <template v-if="year !== null && batch !== null">
        <div class="map_header">
            <span>{{year}}</span>年第<span>{{batch}}</span>批稽察任务分布图
        </div>
        </template>
        <template v-else>
          <div class="map_header" style="display: none;"></div>
        </template>
        <div class="map_select" style="display: none">
          <el-select v-model="year"  placeholder="请选择年份" @change="yearChange">
            <el-option
              v-for="item in yearoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="round"  placeholder="请选择批次">
            <el-option
              v-for="item in roundoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div id="syMainMapContainer" style="width: 100%;height: calc(100%);">
          <!--<div style="width:100%;height:80%;" id="jcmapChart"></div>-->
          <div style="width:100%;height:90%;" id="myChart"></div>
        </div>
			</div>
			<div class="middle_bar">
        <div class="simple_header">
          <div class="simple_header_icon"></div>
          <div class="simple_header_text">稽察次数</div>
        </div>
        <div class="" style="width: 100%;" :style="{'height':heightCont +'px'}">
          <div style="width:100%;height:100%;" id="barChart" ref="barChart"></div>
        </div>
			</div>
		</div>
		<!-- 右侧组件 -->
		<div class="right">
			<div class="right_qus">
        <div class="firstDiv">
          <p class="p_header">本年度问题</p>
          <div class="flexBox">
            <div class="imgBox">
              <img src="../../assets/img/rtop1.png" alt="">
            </div>
            <div class="contentBox">
              <p class="firstP">{{questionCount}}</p>
              <p class="secondP">同比去年
                <template v-if="percolor">
                  <span class="spanBox" style="color: red;">
                    <span class="jian">↑</span> <span class="num">{{questionPercent}}%</span>
                  </span>
                </template>
                <template v-else="percolor">
                  <span class="spanBox" style="color: #73DEB3;">
                    <span class="jian">↓</span> <span class="num">{{questionPercent}}%</span>
                  </span>
                </template>
              </p>
            </div>
          </div>
        </div>
        <div class="secondDiv">
          <p class="p_header">稽察进度</p>
          <div class="flexBox">
            <div class="imgBox">
              <img src="../../assets/img/rtop2.png" alt="">
            </div>
            <div class="contentBox">
              <p class="firstP">剩余<span>{{progressCount}}</span>天</p>
              <p class="secondP">稽察进度<span>{{progressPercent}}%</span></p>
            </div>
          </div>
        </div>

			</div>

		<div class="right_pie_dcdx">
      <div class="simple_header">
        <div class="simple_header_icon"></div>
        <div class="simple_header_text">项目类型</div>
      </div>
      <div class="right_FinishRate_content" >
        <div style="width:100%;height:100%;"  ref="objTypechart"  id="objTypechart"></div>
      </div>
		</div>
		<div class="right_pie_wtfb">
      <div class="simple_header">
        <div class="simple_header_icon"></div>
        <div class="simple_header_text">问题类别</div>
      </div>
      <div class="left_ProblemPieChart_content">
        <div style="width:100%;height:100%;"  ref="problempiechart"  id="problempiechart"></div>
      </div>
		</div>
		</div>

    <el-dialog title="我的消息" :visible.sync="showAnnouncement2" :close-on-click-modal="false" width="40%">
      <div style="display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:100px;">
        <template v-if="announcementItem2.type == 1 || announcementItem2.type == 2">
          <div style="display:flex;flex-direction:row;justify-content:center;align-items:center">
            <h1>{{announcementItem2.title}}</h1>

          </div>
        </template>
        <template v-else>
          <div style="display:flex;flex-direction:row;">
            <div class="mainBox">
              <h2>
                尊敬的<span id="name">{{announcementItem2.exptNm}}</span>专家：
              </h2>
              <p style="text-indent: 2em;font-size: 20px;line-height: 30px;margin-top: 20px;margin-bottom: 20px;">
                您好！您已选择参加由水利部组织的&nbsp;&nbsp;<span style="font-weight: 600;text-decoration:underline;">{{announcementItem2.year}}</span>&nbsp;&nbsp;年度第&nbsp;&nbsp;<span style="font-weight: 600;text-decoration:underline;">{{announcementItem2.batch}}</span>&nbsp;&nbsp;批次稽察工作。您所要稽察的地点是：<span style="font-weight: 600;">{{announcementItem2.noticeInfo}}</span>，本次稽察工作时间为：<span style="font-weight: 600;">{{showNewsDate(announcementItem2.sttm)}}</span>-<span style="font-weight: 600;">{{showNewsDate(announcementItem2.entm)}}</span>。您所在组助理为：{{announcementItem2.assNm}}，助理联系方式为：{{announcementItem2.assPhone}}。如果您由于特殊原因无法参加本批次稽察工作，请您及时联系助理。
              </p>

            </div>
          </div>

        </template>
      </div>
    </el-dialog>
		<el-dialog title="通知公告" :visible.sync="showAnnouncement" :close-on-click-modal="false" width="40%">
			<div style="display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:200px;">
				<div style="display:flex;flex-direction:row;justify-content:center;align-items:center">
					<h1>{{announcementItem.title}}</h1>
				</div>
				<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;color:gray;margin-top:20px;">
					<p>{{announcementItem.persNm}}</p>

					<p style="margin-left:10px;">{{announcementItem.orgNm}}</p>
					<p style="margin-left:10px;">{{showStrDate(announcementItem.pubTm)}}</p>

				</div>
				<div  v-html="announcementItem.content" class="ql-editor">
					<!-- <p ></p> -->
				</div>
			</div>
    </el-dialog>
	</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

import axios from 'axios' //引入axios
//左侧组件
import JcNews from  "./jcNews";
import JcNotices from "./jcNotices";


//方法引用脚本
import request from "@util/gw_ajax_request.js";
import echarts from 'echarts';
// import 'echarts/map/js/china.js'
import {dateFormat} from "@util/gw_date.js"

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      JcNotices,
      JcNews,
    },
    props: [],
    data() {
		//这里存放数据
		return {
      isRead:'',
      year:new Date().getFullYear(),
      batch:'',
      yearoptions: [{
        value: '2019',
        label: '2019年'
      }, {
        value: '2018',
        label: '2018年'
      }, {
        value: '2017',
        label: '2017年'
      }],
      round:'1',
      roundoptions: [{
        value: '1',
        label: '第1批'
      }, {
        value: '2',
        label: '第2批'
      }, {
        value: '3',
        label: '第3批'
      }],
      barData:'',   //稽察次数获取data
      xData1:[],   // 稽察次数X轴数据
      yData1:[],    //稽察次数y轴数据
      questionCount:'',     //右侧本年度问题数量
      questionPercent:'',   //右侧本年度问题百分比数量
      percolor:false,       //右侧本年度问题箭头方向颜色
      progressCount:'',     //右侧稽察进度剩余天数
      progressPercent:'',   //右侧稽察进度百分比
      basePieData1:'',      //右侧项目类型
      objData:[],           //右侧项目类型option
      legendDataPie1:[],       //右侧项目类型option--legend
      basePieData2:'',      //右侧问题类别
      queData:[],           //右侧问题类别option
      legendDataPie2:[],       //右侧问题类别option--legend
      themeColor:'rgba(93, 104, 118, 1)',
      themeColorSplitLine:'#888ea3',
			backgroundChangeColor:'background: rgba(239,240,244,1);',
			transformScale:1,
      finishNumber:'85',
      unfinishNumber:'15',
      viewHeight:window.innerHeight,     //右侧饼图用的数据开始
      viewWidth:window.innerWidth,
      itemWidthChart:25,
      itemHeightChart:14,
      topChart:'',
      pcOrPadFontSize:12,               //右侧饼图用的数据结束
			showAnnouncement:false,
			announcementItem:{
				"id": "c2219c04336a46bd92163bf0463a773e",
				"type": null,
				"title": "测试",
				"content": "<p>测试</p>",
				"url": null,
				"note": null,
				"persId": "89E69B31FE1344A98316A0153BA7386C",
				"persNm": "王晓辰",
				"orgId": "041",
				"orgNm": "北京金水公司",
				"pubState": "0",
				"pubTm": null,
				"intm": 1561363050000,
				"uptm": 1561363050000
			},
      showAnnouncement2:false,
      announcementItem2:{
        "id": "c2219c04336a46bd92163bf0463a773e",
        "type": null,
        "title": "测试",
        "content": "<p>测试</p>",
        "url": null,
        "note": null,
        "persId": "89E69B31FE1344A98316A0153BA7386C",
        "persNm": "王晓辰",
        "orgId": "041",
        "orgNm": "北京金水公司",
        "pubState": "0",
        "pubTm": null,
        "intm": 1561363050000,
        "uptm": 1561363050000
      },

			mapPointColor:'#13C5A6',//用于地图关注焦点数字气泡颜色
      addvCenters:{},
      mapData:[{"name":"天津市","total":"18","objType":null,"adCode":"120000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"辽宁省","total":"10","objType":null,"adCode":"210000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"上海市","total":"7","objType":null,"adCode":"310000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"江西省","total":"50","objType":null,"adCode":"360000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"广东省","total":"103","objType":null,"adCode":"440000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"云南省","total":"22","objType":null,"adCode":"530000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"甘肃省","total":"6","objType":null,"adCode":"620000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"吉林省","total":"10","objType":null,"adCode":"220000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"浙江省","total":"8","objType":null,"adCode":"330000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"广西壮族自治区","total":"50","objType":null,"adCode":"450000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"宁夏回族自治区","total":"3","objType":null,"adCode":"640000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"内蒙古自治区","total":"18","objType":null,"adCode":"150000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"江苏省","total":"21","objType":null,"adCode":"320000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"福建省","total":"12","objType":null,"adCode":"350000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"湖南省","total":"77","objType":null,"adCode":"430000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"海南省","total":"15","objType":null,"adCode":"460000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"贵州省","total":"22","objType":null,"adCode":"520000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"青海省","total":"6","objType":null,"adCode":"630000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"新疆维吾尔自治区","total":"7","objType":null,"adCode":"650000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"重庆市","total":"8","objType":null,"adCode":"500000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"陕西省","total":"6","objType":null,"adCode":"610000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"黑龙江省","total":"9","objType":null,"adCode":"230000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"河南省","total":"124","objType":null,"adCode":"410000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"河北省","total":"63","objType":null,"adCode":"130000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"山东省","total":"79","objType":null,"adCode":"370000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"西藏自治区","total":"5","objType":null,"adCode":"540000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"北京市","total":"32","objType":null,"adCode":"110000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"山西省","total":"24","objType":null,"adCode":"140000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"安徽省","total":"28","objType":null,"adCode":"340000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"湖北省","total":"81","objType":null,"adCode":"420000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"四川省","total":"69","objType":null,"adCode":"510000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null},{"name":"新疆生产建设兵团","total":"6","objType":null,"adCode":"660000000000","children":null,"level":"2","pblmDtoList":null,"objGroupList":null}],
      mydata:[],
      mapName:'china',
		};
    },

    //监听属性 类似于data概念
    computed: {
      heightCont(){
        if(window.innerWidth <= 1366){
          return window.innerHeight *0.17;
        }else{
          return window.innerHeight *0.15;
        }
      },

      msg(){
        // return theme.state.testMsg;
        return this.$store.state.theme.testMsg;
      },
      organNm(){
          return localStorage.getItem('currentOrgNm') ? localStorage.getItem('currentOrgNm') : ''
      },
      organCode(){
          return localStorage.getItem('currentRlcode') ? localStorage.getItem('currentRlcode') : ''
      },

    },
    //监控data中的数据变化
    watch: {
    },
    mounted() {
      this.getMapData();
      this.drawLine();

      //获取稽查次数数据
      this.getBarData();
      //获取本年度问题数
      this.getQuestionData();
      //获取稽察进度数据
      this.getJCProgressData();
      //获取项目类型数据
      this.getObjTypeData();
      //获取问题类别数据
      this.getQueTypeData();


      if(this.viewWidth >= 1920){
        this.itemWidthChart = 25;
        this.itemHeightChart = 14;
        this.topChart = '85%';
      }else if(this.viewWidth <= 1024){
        this.itemWidthChart = 5;
        this.itemHeightChart = 5;
        this.topChart = '85%';
        this.pcOrPadFontSize = 8;
      }else if(this.viewWidth <= 1360){
        this.itemWidthChart = 5;
        this.itemHeightChart = 5;
        this.topChart = '75%';
        this.pcOrPadFontSize = 10;
      }else{
        this.itemWidthChart = 10;
        this.itemHeightChart = 10;
        this.topChart = '75%';
      }

    },
    //方法集合
    methods: {

      //获取中间稽察地图的数据
      getMapData(){
        request({
          url: "/tac/index/getAreaList",
          method:'POST',
          data: {
            year:this.year
          }
        }).then((response) => {
          console.log('mapdataresponse:'+JSON.stringify(response))
          if(response.success){

            var data = response.data;
            for(var i = 0 ;i<data.length;i++){
              this.year = data[i].year;
              this.batch = data[i].batch;
              this.mydata.push({name:data[i].name,value:data[i].value})
             }
            this.drawLine();
          }else{
            alert('稽察地图数据获取失败')
          }
        }).catch(function (err) {
          console.log(err);
        });
      },
      //配置中间地图的数据
      drawLine:async function(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))

        let geoAdcode = this.organCode.substr(0,6)  //省级切换时获取不同的行政区代码
        let geoJsonResult = await this.getAddvGeoData(geoAdcode);// 根据行政区划代码请求地图geoJson
        console.log(geoJsonResult)
        let geoJson = this.getTheCustomGeoDataByOrg(geoJsonResult.data,'');//根据可能的所选机构处理摘出需要的行政区数据
        echarts.registerMap(this.mapName, geoJson);//向echart注册地图

        // 绘制图表
        let option = {
          visualMap: {
            show:false,
            type: 'continuous',
            showLabel: true,
            seriesIndex: [0],
            min: 0,
            max:5,
            inRange: {
              color: ['#edfbfb', '#b7d6f3',]
            },
          },
          tooltip: {
            show: true,
            formatter: function(params) {
              return params.name
            },
          },
          geo: {
            roam: false,
            map: this.mapName,
            label: {
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              emphasis: {
                areaColor: '#fff464'
              }
            },
            // 这里是重点！！！
            regions: [
                {
                    name: "南海诸岛",
                    itemStyle: {
                        // 隐藏地图
                        normal: {
                            opacity: 0, // 为 0 时不绘制该图形
                        }
                    },
                    label: {
                        show: false // 隐藏文字
                    }
                }
            ],
            top: "50",
            bottom: "30",
            zoom: 1.2, 
          },
          series: [
            {
              name: '',
              type: 'map',
              mapType: this.mapName, // 自定义扩展图表类型
              roam: false,
              zoom: 1.5, 
              geoIndex: 0,
              itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: this.mydata
            }
          ]
        };
        myChart.setOption(option,true);
        // myChart.setOption({
        //
        // })
      },
      //年份改变，从新获取数据
      yearChange(val){
        this.year = val;
        //console.log('year:'+this.year);
        //获取稽查次数数据
        this.getBarData();
        //获取本年度问题数
        this.getQuestionData();
        //获取稽察进度数据
        this.getJCProgressData();
        //获取项目类型数据
        this.getObjTypeData();
        //获取问题类别数据
        this.getQueTypeData();
      },
      //获取稽察次数的数据
      getBarData(){
        request({
            url: "/tac/index/countAdcodeAuditByYear",
            method:'POST',
            data: {
              year:this.year
            }
        }).then((response) => {
            //console.log('bardataresponse:'+JSON.stringify(response))
            if(response.success){
              this.barData = response.data;
              this.barChart();
            }else{
              alert('稽察次数数据获取失败')
            }
        }).catch(function (err) {
            console.log(err);
        });
      },
      //稽察次数柱状图配置
      barChart:function(){
        var _self = this;
        var newbarData = _self.barData;
        newbarData.forEach(element => {
          _self.xData1.push(element.name.replace(/\省|\市|\自治区|\维吾尔自治区|\生产建设|\壮族|\回族/ig, ''));
          _self.yData1.push(element.count);
        });
        let chart = echarts.init(this.$refs['barChart']);
        let option = {
          // backgroundColor:'rgba(226,250,255,1)',
          grid:{
            top:'4%',
            bottom:'3%',
            left:'3%',
            right:'3%',
            containLabel:true
          },
          tooltip: {
            trigger: 'axis',
            label: {
              show: true
            },
            formatter: function (params) {
              return params[0].axisValue + ': ' +params[0].data + '次'
            }
          },
          xAxis: {
            axisLabel:{
              interval:0,
              rotate:30,
              color:'rgba(93, 104, 118, 1)'
            },
            axisLine: {
              show: true,
              lineStyle:{
                color:'#888ea3'
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            type: 'category',
            data: _self.xData1
          },
          // dataZoom: [{
          //   type: 'slider',
          //   show: true,
          //   xAxisIndex: [0],
          //   left: '9%',
          //   bottom: -5,
          //   start: 10,
          //   end: 90 //初始化滚动条
          // }],
          yAxis: {

            axisLabel:{
              interval:3,
              show:true,
              color:'rgba(93, 104, 118, 1)'
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              interval:3,
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#888ea3'
              }
            },
            axisTick: {
              show: false,
              interval:3
            },
            splitArea: {
              show: false,
              areaStyle: {
                color: 'transparent'//浅色主题
                // color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
              }
            },
            type: 'value',
            max: function(value) {
              return value.max;
            },
            min: function(value) {
              return value.min;
            },
            // splitNumber:2
          },
          series: [{
            barMaxWidth: '30%',
            symbolSize: 7,
            lineStyle: {
              color: 'rgba(124, 129, 255, 1)',
              shadowBlur: 12,
              shadowColor: 'rgba(33,148,246,0.9)',
              shadowOffsetX: 1,
              shadowOffsetY: 1
            },
            itemStyle: {

              borderWidth: 1,
              color: 'rgba(124, 129, 255, 1)',
              borderColor: 'rgba(124, 129, 255, 1)',
              normal: {
                barBorderRadius:[5,5,0,0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color:  "rgba(171, 228, 255, 1)"
                },
                  {
                    offset: 1,
                    color: "rgba(63, 161, 255, 1)"
                  }
                ])
              },
            },

            data: _self.yData1,
            type: 'bar',
            areaStyle: {
              // color: 'rgba(63, 158, 255, 0.3)',
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "rgba(171, 228, 255, 1)"
                },
                  {
                    offset: 1,
                    color: "rgba(63, 161, 255, 1)"
                  }
                ])
              }
            }
          }]
        };
        chart.setOption(option);
        this.xData1 = [];
        this.yData1 = [];
      },
      //获取右侧本年度问题数据
      getQuestionData(){
        request({
          url: "/tac/index/countPblmByYear",
          method:'POST',
          data: {
            year:this.year
          }
        }).then((response) => {
          //console.log('questionresponse:'+JSON.stringify(response))
          if(response.success){
            this.questionCount = response.data.count;    //右侧本年度问题数量
            if(response.data.percent > 0){
              this.percolor = true ;
              var newper = response.data.percent.toString().replace(/[-]/g,"");
              this.questionPercent = newper;
            }else{
              this.percolor = false;
              var newper = response.data.percent.toString().replace(/[-]/g,"");
              this.questionPercent = newper;
            }
          }else{
            alert('本年度问题数据获取失败')
          }
        }).catch(function (err) {
          console.log(err);
        });
      },
      //获取右侧稽察进度数据
      getJCProgressData(){
        request({
          url: "/tac/index/countAuditByYear",
          method:'POST',
          data: {
            year:this.year
          }
        }).then((response) => {
          //console.log('jcpressresponse:'+JSON.stringify(response))
          if(response.success){
            this.progressCount = response.data.count;    //右侧本年度问题数量
            this.progressPercent = response.data.percent;
          }else{
            alert('稽察进度数据获取失败')
          }
        }).catch(function (err) {
          console.log(err);
        });
      },
      //获取右侧项目类别数据
      getObjTypeData(){
        request({
          url: "/tac/index/countObjByYear",
          method:'POST',
          data: {
            year:this.year
          }
        }).then((response) => {
          console.log('objTyperesponse:'+JSON.stringify(response))
          if(response.success){
            this.basePieData1 = response.data;
            this.pieChart1();
          }else{
            alert('问题类别数据获取失败')
          }
        }).catch(function (err) {
          console.log(err);
        });
      },
      //右侧项目类型数据配置
      pieChart1:function(){
        let _self = this;
        let chart = echarts.init(this.$refs['objTypechart']);
        var newData = _self.basePieData1;
        newData.forEach(element => {
          //console.log('elme:'+JSON.stringify(element))
          _self.legendDataPie1.push(element.name)
          _self.objData.push({'name':element.name,'value':element.count});
        });
        let option = {
          backgroundColor:'rgba(0,0,0,0)',
          color:['#5CE9C7','#FEB23A','#E8684A','#5B8FF9','#aff6f4',],
          title: {
            text: '',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },
          legend: {
            textStyle:{
              fontSize:10,
              color:'#666666'
            },
            itemWidth: 10,  // 设置宽度
            itemHeight: 10, // 设置高度
            bottom: 10,
            left: 'center',
            data:_self.legendDataPie1,
            icon:'circle',
          },
          tooltip : {
            trigger: 'item',
            formatter: "{b} : {c}"
          },
          series : [
            {
              name:'项目类型',
              type:'pie',
              radius : '60%',
              center: ['50%', '30%'],
              hoverAnimation:false,
              data:_self.objData,
              label: {
                normal: {
                  show: true,
                  position: 'outside',
                  // formatter: '{b}\n{d}%',
                  // formatter: '{b}:{c}',
                    formatter(v) {
                      let text = v.name
                      return text.length < 4
                        ? text
                        : `${text.slice(0,6)}\n${text.slice(6)}`
                    },
                  textStyle: {
                    color: 'rgba(51,51,51,1)'
                  }
                }
                // normal:{

                // }
              },
              labelLine: {
                normal: {
                  show:true,
                  length: 6,
                }
              },
              animationType:'expansion'
            },
            {
              name:'项目类型',
              type:'pie',
              radius : '60%',
              center: ['50%', '30%'],
              hoverAnimation:false,
              data:_self.objData,
              label: {
                normal: {
                  show: true,
                  position: 'inner',
                  formatter: function(params, ticket, callback) {
                    var total = 0;
                    var percent = 0;
                    _self.objData.forEach(function(value, index, array) {
                      total += Number(value.value);
                    });
                    if(total != 0){
                      percent = ((params.value / total) * 100).toFixed(0);
                      return percent + '%';
                    }else{
                      return 0 + '%';;
                    }
                  },
                  textStyle: {
                    color: 'rgba(255,255,255,1)'
                  }
                }
              },
              animationType:'expansion'
            },

          ],
        };
        chart.setOption(option,true);
        _self.objData = []
      },
      //获取问题类别数据
      getQueTypeData(){
        request({
          url: "/tac/index/countPblmInfoByYear",
          method:'POST',
          data: {
            year:this.year
          }
        }).then((response) => {
          //console.log('queTyperesponse:'+JSON.stringify(response))
          if(response.success){
            this.basePieData2 = response.data;
            this.pieChart2();
          }else{
            alert('问题类别数据获取失败')
          }
        }).catch(function (err) {
          console.log(err);
        });
      },
      //右侧问题类别数据配置
      pieChart2:function(){
        let _self = this;
        let chart = echarts.init(this.$refs['problempiechart']);
        var newData = _self.basePieData2;
        newData.forEach(element => {
          //console.log('elme:'+JSON.stringify(element))
          _self.legendDataPie2.push(element.name)
          _self.queData.push({'name':element.name,'value':element.count});
        });
        let option = {
          backgroundColor:'rgba(0,0,0,0)',
          color:['#0195F2','#5CE9C7','#FED172','#FB6086','#F235D8','#20F274'],
          title: {
            text: '',
            left: 'center',
            bottom:10,
            textStyle: {
              color: '#ccc'
            }
          },
          legend: {
            icon:'circle',
            orient: 'horizontal',
            textStyle:{
              fontSize:10,
              color:'#666666'
            },
            itemWidth: 10,  // 设置宽度
            itemHeight: 10, // 设置高度
            bottom:10,
            left : 'center',
            data:_self.legendDataPie2,

          },
          tooltip : {
            trigger: 'item',
            formatter: "{b} : {c} "
          },
          series : [
            {
              name:'问题类别',
              type:'pie',
              // radius : ['40%','60%'],
              radius : ['25%','50%'],
              center: ['50%', '35%'],
              data:_self.queData,
              label: {
                normal: {
                  show: true,
                  position: 'outside',
                  formatter: '{b}',
                  textStyle: {
                    color: 'rgba(51,51,51,1)'
                  }
                }
              },
              labelLine: {
                normal: {
                  show:true,
                  length: 6,
                }
              },
              animationType:'expansion'

            },
            {
              name:'问题类别',
              type:'pie',
              // radius : ['40%','60%'],
              radius : ['25%','50%'],
              center: ['50%', '35%'],
              data:_self.queData,
              label: {
                normal: {
                  show: true,
                  position: 'inner',
                  formatter: function(params, ticket, callback) {
                    var total = 0;
                    var percent = 0;
                    _self.queData.forEach(function(value, index, array) {
                      total += Number(value.value);
                    });
                    if(total != 0){
                      percent = ((params.value / total) * 100).toFixed(0);
                      return percent + '%';
                    }else{
                      return 0 + '%';;
                    }
                  },
                  textStyle: {
                    color: 'rgba(255,255,255,1)'
                  }
                }
              },
              animationType:'expansion'

            }
          ],
          animationDuration: '400',
          animationDurationUpdate:'400',
          animationEasing: 'cubicOut',
          animationEasingUpdate: 'cubicOut',
        };
        chart.setOption(option,true);
        _self.queData = []
      },
      //弹框公告日期处理
      showStrDate:function(pubTm){
        //console.log(pubTm)
        if(pubTm){
          let d = new Date(pubTm);
          return dateFormat(d,'yyyy-MM-dd');
        }else{
          return '';
        }

      },
      //弹框消息（稽察批次）日期处理
      showNewsDate:function(pubTm){
        //console.log(pubTm)
        if(pubTm){
          let d = new Date(pubTm);
          return dateFormat(d,'yyyy年MM月dd日');
        }else{
          return '';
        }

      },
      showAnnouncementHandler:function(params){
        this.showAnnouncement = true;
        this.announcementItem  = params.announcement.item;
      },
      showNewsHandler:function(params){
        this.showAnnouncement2 = true;
        //console.log('newsparam:'+JSON.stringify(params.newsDetail.item))
        //let currentUrl = window.location.href.split("#")[0] +'#/inspection_Index';
        this.announcementItem2  = params.newsDetail.item;
        if(params.newsDetail.item.type == '3'){
          request({
            url: `/tac/insp/year/batch/group/meg/${params.newsDetail.item.id}`,
            method:'get',
            data: {

            }
          }).then((response) => {
            console.log('newsType3response:'+JSON.stringify(response))
            if(response.success){
              this.announcementItem2 = response.data;
              console.log('newsparam:'+JSON.stringify(this.announcementItem2))
            }else{
              console.log('稽察任务提示数据获取失败')
            }
          }).catch(function (err) {
            console.log(err);
          });
        }
      },
      getTheCustomGeoDataByOrg(originalGeoJson,useAdName){
        /*该方法接收原本的geoJson，从中挑选出所选机构涉及的行政区(其余的不要了) */
        let usedGeoJson = [];
        let originalGeoObject = {};

        originalGeoJson.features.forEach(item=>{//将要处理的originalGeoJson的Features数组转化为以adCode做key的对象，方便后续根据业务数据进行查找，避免嵌套循环
          originalGeoObject[item.id] = item;
        });
        this.mapData.forEach((dataItem)=>{//根据业务数据，将业务数据包含的行政区划代码对应的geo数据放到数组里以过滤不涉及的行政区划
          if(originalGeoObject[dataItem.adCode.substr(0,6)]){
            usedGeoJson.push(originalGeoObject[dataItem.adCode.substr(0,6)]);
          }
        });

        let _self = this;
        usedGeoJson.forEach(item=>{//在挑选完需要保留的geo数据后，将中间点取出单独存储，供散点图使用。防止过度嵌套的for循环影像效率。
          _self.addvCenters[item.properties.name] = item.properties.cp;
        });
        // originalGeoJson.features = usedGeoJson;//将处理过后的features赋回原有对象，保持对象格式，便于echarts引用
        // 2019.06.19 因为政治问题保留全部数据
        return originalGeoJson;
      },

      convertData:function() {//制作散点数据。
        var res = [];
        let _self = this;
        let mapSeriesData = _self.mapData;
        for (var i = 0; i < mapSeriesData.length; i++) {
          var geoCoord = _self.addvCenters[mapSeriesData[i].name];
          if (geoCoord) {
            res.push({
              name: mapSeriesData[i].name,
              value: geoCoord.concat(Number(mapSeriesData[i].total)),
            });
          }
        }
        return res;
      },
      getChartSeriesData:function(){
        let seriesData =this.convertData();
        //console.log(seriesData);
        return seriesData;

      },
      getChartOption:function(){
        var _self = this;
        //console.log(this.mapData);
        let seriesData = this.getChartSeriesData();
        let option = {
          title: {
            text: '',
            left: 'center',
          },
          tooltip: {
            show:false
          },
          geo: {
            itemStyle: {
              normal: {
                borderColor:'#778387',
                borderWidth: 1,
              },

            },
            show: true,
            map: this.mapName,
            label: {
              show: false,
              normal: {
                show: false
              },
              emphasis: {
                show: false,
              }
            },
            roam: false,
            // zoom: 1.2,
          },
          visualMap: {
            show: false,
            min: 0,
            max: 800,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            textStyle: {
              color: '#ccc'
            },
            calculable: true,
            seriesIndex: [1],
            inRange: {
              // color:['rgb(186,231,248)','rgb(92,168,222)']
              color:'rgb(195,240,255)'
            }
          },
          series: [
            {
              left:'20%',
              // name: '散点',
              tooltip: {
                show:true,
                formatter:function (params) { return params.name + ': ' + params.value[2]  },
              },
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: 'pin', //气泡
              symbolSize:40,
              data:seriesData,
              label: {
                normal: {
                  show: true,
                  formatter:function (params) { return params.value[2] },
                  textStyle: {
                    fontSize: 12,
                  }
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color:'#13C5A6',
                  borderColor: '#fff',
                  borderWidth: 1,
                  borderType: 'solid',
                }
              }
            },
            {
              type: 'map',
              map: this.mapName,
              geoIndex: 0,
              aspectScale: 0.75, //长宽比
              showLegendSymbol: false, // 存在legend时显示
              label: {
                show: false,
              },
              roam: false,
              animation: false,
              data: seriesData
            },
          ]
        };
        return option;
      },
      refreshTheChart:async function(){
        // 准备工作
        let _self = this;
        let myChart = echarts.init(document.getElementById('jcmapChart'));

        // 处理地图数据
        let geoAdcode = this.organCode.substr(0,6)  //省级切换时获取不同的行政区代码
        let geoJsonResult = await this.getAddvGeoData(geoAdcode);// 根据行政区划代码请求地图geoJson
        let geoJson = _self.getTheCustomGeoDataByOrg(geoJsonResult.data,'');//根据可能的所选机构处理摘出需要的行政区数据
        echarts.registerMap(this.mapName, geoJson);//向echart注册地图

        // 获取option
        let option = _self.getChartOption();

        myChart.setOption(option,true);


      },
      getAddvGeoData:function(adCode){
        let   geoJsonName = adCode+"DATA.json";
        return axios.get('/src/assets/addvGeoData/'+geoJsonName);
      },

		  autoSetScale() {
		    let zoom = (window.innerHeight / 1080).toFixed(3)
		    this.transformScale = `scale(${zoom})`
		    this.width = `${(window.innerWidth * zoom).toFixed(2)}px`
	    }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）

    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>

// @media screen and (min-width: 1024px) and (max-width:1360px) {
//   @import "@scss/home1024";
//   .mainDiv {
// 		padding: 5px;
// 		// background: rgb(255, 255, 255);
//   }
// }
@media  screen and (min-width: 1024px) and (max-width:1920px){
	@import "@scss/jchome";
	.mainDiv {
		padding: 15px;
		// background: rgb(255, 255, 255);
	}
}
@media screen and (min-width: 1920px) {
  @import "@scss/jchome1920";
  .mainDiv {
		padding: 20px;
		// background: rgb(255, 255, 255);
  }
}
</style>