<template>
	<div>
		<div class="content">
			<div class="content_item content_item_padding0">
			    <div class="label">项目名称</div>
			    <div class="content_right">
			        <el-input class="ename_input"
					placeholder="请输入项目名称关键字" v-model="projectName" ></el-input>
			        <template v-if="projectName">
			            <span v-for=" (item,k)  in nameTypeList" :key="k" style="margin-right: 24px;">
			                <el-radio v-model="nameType" :label="item.key">{{item.value}}</el-radio>
			            </span>
			        </template>
			    </div>
			</div>
			<div class="content_item ">
			    <div class="label">项目当事人</div>
			    <div class="content_right">
			        <div class="item_ckquery_list" >
			        	<div class="ckquery_list_right">
			        		<el-input  ref="inp"
			        			v-model="projectEntity" autocomplete="off" type="text"
			        			class="register_count_ipt" placeholder="请输入企业名称">
			        			<el-dropdown trigger="click" slot="prepend" placement="bottom-start"  style="cursor:pointer;"
			        				@command="changeCommand">
			        				<span class="el-dropdown-link">
			        					{{chargeDepartment.value}}<i class="el-icon-caret-bottom"></i>
			        				</span>
			        				<el-dropdown-menu class="default_header_dropdown" slot="dropdown">
			        					<el-dropdown-item v-for="(item,k) in countTypelist" :key="k" :command="item">{{item.value}}</el-dropdown-item>
			        				</el-dropdown-menu>
			        			</el-dropdown>
			        		</el-input>
			        	</div>
			        </div>
			    </div>
			</div>
			<div class="content_item content_item16">
			    <div class="label">项目地区</div>
			    <div class="content_right">
			       <div class="select-popper">
			       	<div class=" select-caret" :class="addressType.length>0?'select-active':''">
					    <span>
							项目地区{{addressType.length>0?(addressType.length+'项'):''}}
						</span>

			       		<i class="el-icon-caret-bottom"></i>
			       	</div>
			       	<el-cascader ref="address"   class="cascader-region select-location" @input="addressListbtn" v-model="addressType"
			       		:options="addressList" :props="props" collapse-tags></el-cascader>
			       </div>
			    </div>
			</div>
			<div class="content_item content_item16">
			    <div class="label">项目类型</div>
			    <div class="content_right">
					<!-- <div class="content-projecttype">
						<template  v-for="(item,i) in specialBondProjectType">
							<span class="projecttype" :class="item.status?'activetype':''" @click="projecttypebtn(i)">
									{{item.value}}
							</span>
						</template>
					</div> -->
					<div class="select-popper">
					  <span :class="{ color_text: projectType.length }">
					    项目类型{{projectType.length? projectType.length + "项": ""}}
					    <i class="el-icon-caret-bottom"></i>
					  </span>
					  <el-select v-model="projectType" class="select-multiple"  multiple placeholder="请选择">
					    <el-option v-for="(item, i) in specialBondProjectType" :key="i":label="item" :value="item">
					    </el-option>
					  </el-select>
					</div>

			    </div>
			</div>
			<div class="content_item content_item_padding0">
			    <div class="geduan">

			    </div>
			</div>
			<div class="content_item content_item_padding0">
				<div class="search-new">
					<span @click="search()">查询</span>
					<span @click="reset">重置</span>
				</div>
			</div>
		</div>
		<div class="bottomlist">
			<div class="bottomlist-title">
				<div class="bottomlist-title-left" >
          <p class="title-left">
            <span style="margin-right:4px;color:#005BBC;font-size: 22px;position: relative;top:3px;">·</span>共有<span style="color:#F56C6C;">{{total}}</span>条结果
            <span style="padding-left: 12px;">
              项目投资总额：<span style="color:#E6A23C;">{{sumMoney}}万元</span>
            </span>
          </p>
				</div>
				<div class="title-right">
					<p>
						<img src="@/assets/images/EXCEL.png" alt="">
						<span class="excel" @click="$message({message: '功能正在开发中',type: 'warning'})">导出EXCEL</span>
					</p>
				</div>
			</div>
      <div class="chart" v-if="echartsDataState === false && !isSkeleton">
        <div class="chart-left">
          <div class="echarts-item">
            <div class="echarts-title">项目类型分布</div>
            <div id="echarts1" style="height: 240px"></div>
          </div>
          <div class="echarts-item">
            <div class="echarts-title">项目地区分布</div>
            <div id="echarts2" style="height: 240px"></div>
          </div>
        </div>
        <div class="chart-right" @click="handledialog">
          更<br/>多<br/>分<br/>析<br/>
          <i class="el-icon-more"></i>
        </div>
      </div>
			<div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton">
				<img class="item-jf-img" src="@/assets/images/kong.png" alt="">
				<div class="item-jf-titel">抱歉，没找到相关数据！</div>
				<div class="item-jf-text">建议调整关键词或筛选条件，重新搜索！</div>
			</div>
			<skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
			<ul class="bottomlist-content"  v-if="!isSkeleton&&tableData.length>0">
				<li class="bottomlist-list" v-for="item in tableData">
					<p class="list-titel">
						<router-link  :to="'/radar/debtProject/details/'+ item.id" tag="a" class="list-titel-a" v-html="item.projectName" ></router-link>
					</p>

					<div class="content-label" v-if="item.domicile">
						<span class="list-label">{{item.domicile}}</span>
					</div>

					<div  class="list-content">
						<p class="list-content-text" v-if="item.projectType&&item.projectType!='空白'">
							<span>项目类型：</span>
							<span>{{item.projectType}}</span>
						</p>
						<p class="list-content-text"v-if="item.projectTotalInvestment">
							<span>项目总投资(亿)：</span>
							<span>{{item.projectTotalInvestment}}</span>
						</p>
						<p class="list-content-text" v-if="item.projectCapital">
							<span>项目资本金(亿)：</span>
							<span>{{item.projectCapital}}</span>
						</p>
						<p class="list-content-text" v-if="item.specialBondCapital">
							<span>专项债金额(亿)：</span>
							<span>{{item.specialBondCapital}}</span>
						</p>
					</div>
					<div  class="list-content">
						<p class="list-content-text" v-if="item.projectEntity">
							<span>项目主体：</span>
							<span v-if="item.projectEntityId">
								 <span class="blue"   @click="getUipIdByCid(item.projectEntityId)" v-html="item.projectEntity"></span>
							</span>
							<span v-else  v-html="item.projectEntity">
							</span>
						</p>
						<p class="list-content-text" v-if="item.chargeDepartment">
							<span>主管部门：</span>
							<span  v-html="item.chargeDepartment" >

							</span>
						</p>
						<p class="list-content-text"  v-if="item.piu" >
							<span>实施单位：</span>
							<span v-if="item.piuId">
								 <span class="blue"   @click="getUipIdByCid(item.piuId)" v-html="item.piu"></span>
							</span>
							<span v-else  v-html="item.piu">
							</span>
						</p>
					</div>
				</li>
			</ul>
			<template v-if="pageFlag">
				<div class="pagination clearfix"  v-if="total>0&&pageFlag">
					  <el-pagination
					    background
					    :page-size="pageSize"
					    :current-page="page"
					    @current-change="handleCurrentChange"
					    layout="prev, pager, next"
					    :total="total>limit*500?501*limit:total">
					  </el-pagination>
				</div>
			</template>
		</div>

    <el-dialog title="政府专项债项目宏观分析" :visible.sync="dialogEchartsVisible" width="1160px" append-to-body class="dialogEcharts" :close-on-click-modal="false">
      <div class="dialog-content">
        <div class="echarts-item">
          <div class="echarts-title">项目类型分布</div>
          <div id="echarts-xmlx" style="height: 240px"></div>
        </div>
        <div class="echarts-item">
          <div class="echarts-title">项目地区分布</div>
          <div id="echarts-xmdq" style="height: 240px"></div>
        </div>
        <div class="echarts-item" style="width: 100%;">
          <div class="echarts-title">项目投资额分布</div>
          <div id="echarts-xmtz" style="height: 240px"></div>
        </div>
        <div class="echarts-item" style="width: 100%;">
          <div class="echarts-title">投资额前十业主</div>
          <div id="echarts-tze" style="height: 240px"></div>
        </div>
        <div class="echarts-item" style="width: 100%;">
          <div class="echarts-title">项目数前十业主</div>
          <div id="echarts-xms" style="height: 240px"></div>
        </div>
      </div>
    </el-dialog>

	</div>

</template>

<script>
	import {encodeStr} from "@/assets/js/common.js"
	import skeleton from '@/views/project/projectList/component/skeleton'
	import api from '@/api/radar/radar.js';
	import jsk_data from '../../../../../public/jsk.json';
  import * as echarts from 'echarts';
	export default {
		name: 'debtProject',
		components:{skeleton},
		data() {
			return {
				encodeStr,
				isSkeleton:true,
				projectName:'',
				nameTypeList: [
				  {
            key: 'like',
            status: true ,
            value: '模糊搜索',
          },
          {
            key: 'match',
            status: false,
            value: '精准匹配',
          },
				],
				nameType: 'like',
				projectEntity:'',
				countTypelist: [
				  {
						key: '1',
						value: '项目主体'
					},
					{
						key: '2',
						value: '主管部门'
					},
					{
						key: '3',
						value: '实施单位'
					}
				],
				chargeDepartment: {
					key: '3',
					value: '项目主体'
				},
				addressList: [],
				addressType: [],
				props: {
					multiple: true,
					expandTrigger: "hover",
					value: 'id'
				},
				specialBondProjectType: [],
				projectTypeText: ['不限'],
				projectType:[],
				arrList:[],
				pageFlag:true,
				tableData:[],
				total:0,
				page:1,
				pageSize:20,
        dialogEchartsVisible:false,
        echartsData:{},
        echartsDataState:false,
        sumMoney:0,
			}
		},
		created() {
			this.init();
		},
		methods: {
			init(){
				this.addressListfn();
				this.searchDic();
				this.search();
			},
       searchDic(){
        api.searchDic().then(res=>{
        this.specialBondProjectType=res.specialBondProjectType;
         }).catch(error=>{

         });

       },
      changeCommand(str) {
        this.chargeDepartment=str;
      },
			addressListfn() {
				var searchid;
				if(this.$route.name=='search-combinedYN'){
					searchid='530000'
				}else{
					searchid=''
				}

				var str = [];
				for (let x = 0; x < 3; x++) {
					for (let i = 0; i < jsk_data.length; i++) {
						if (jsk_data[i].regionLevel == x + 1 && x + 1 == 1) {
							if(searchid){
								if (jsk_data[i].id == searchid) {
									str.push({
										id: jsk_data[i].id,
										label: jsk_data[i].regionName,
										short: jsk_data[i].short,
										value: jsk_data[i].parentId,
										children: jsk_data[i].id == 900000 ? undefined : [],
									});
								}
							}else{
									str.push({
										id: jsk_data[i].id,
										label: jsk_data[i].regionName,
										short: jsk_data[i].short,
										value: jsk_data[i].parentId,
										children: jsk_data[i].id == 900000 ? undefined : [],
									});
							}



						} else if (jsk_data[i].regionLevel == x + 1 && x + 1 == 2 && str) {
							for (let j = 0; j < str.length; j++) {
								if (str[j].id == jsk_data[i].parentId) {
									str[j].children.push({
										id: jsk_data[i].id,
										label: jsk_data[i].regionName,
										short: jsk_data[i].short,
										value: jsk_data[i].parentId,
										children: [],
									});
								}
							}
						} else if (jsk_data[i].regionLevel == x + 1 && x + 1 == 3) {
							for (let j = 0; j < str.length; j++) {
								if (str[j].children) {
									for (let k = 0; k < str[j].children.length; k++) {
										if (str[j].children[k].id == jsk_data[i].parentId) {
											str[j].children[k].children.push({
												id: jsk_data[i].id,
												label: jsk_data[i].regionName,
												short: jsk_data[i].short,
												value: jsk_data[i].parentId,
											});
										}
									}
								}
							}
						}
					}
				}

				this.addressList = str;
			},
			// 项目属地
			addressListbtn() {
				for (let i = 0; i < this.arrList.length; i++) {
					if (this.arrList[i].keyid == 'address') {
						this.arrList.splice(i, 1);
						i--;
					}
				}
				let arr = (this.$refs.address.getCheckedNodes())
				let provinceCode = [],
					cityCode = [],
					areaCode = [];
				let province = [],
					city = [],
					area = [];

				for (var i in arr) {
					if (arr[i].parent) {
						if (!arr[i].parent.checked) {
							arr[i].hasChildren && cityCode.push(arr[i].value);
							!arr[i].hasChildren && areaCode.push(arr[i].value);
						}
					} else {
						provinceCode.push(arr[i].value)
					}
				}


				for (let j = 0; j < jsk_data.length; j++) {
					if (provinceCode.length > 0) {
						for (let i = 0; i < provinceCode.length; i++) {
							if (provinceCode[i] == jsk_data[j].id) {
								province.push({
									value: jsk_data[j].regionName,
									key: provinceCode[i]
								})
							}

						}

					}
					if (cityCode.length > 0) {
						for (let i = 0; i < cityCode.length; i++) {
							if (cityCode[i] == jsk_data[j].id) {
								city.push({
									value: jsk_data[j].regionName,
									key: cityCode[i]
								})
							}

						}
					}
					if (areaCode.length > 0) {
						for (let i = 0; i < areaCode.length; i++) {
							if (areaCode[i] == jsk_data[j].id) {
								area.push({
									value: jsk_data[j].regionName,
									key: areaCode[i]
								})
							}

						}
					}

				}
				if (province.length > 0 || city.length > 0 || area.length > 0) {
					let arrlist = [];
					if (province.length > 0) {
						for (let i in province) {
							arrlist.push(province[i].value)
						}
					}
					if (city.length > 0) {
						for (let i in city) {
							arrlist.push(city[i].value)
						}
					}
					if (area.length > 0) {
						for (let i in area) {
							arrlist.push(area[i].value)
						}
					}
					console.log(this.addressType);
					this.arrList.push({
						value: arrlist,
						keyid: 'address',
						provinceCode: provinceCode,
						cityCode: cityCode,
						areaCode: areaCode,
						title: '项目属地：',
						key: '',
						addressType:this.addressType
					})
				}
				// this.landMarketDto = obj
			},
			projecttypebtn(){
					for(let i=0;i<this.projectType.length;i++){
						if(this.projectType[i]=='不限'){
							this.projectType=[];
						}
					}
			},
			reloadPage() {
				this.pageFlag = false;
				this.$nextTick(() => {
					this.pageFlag = true;
				});
			},
			handleCurrentChange(page) {
				if(page>500){
				this.$message.warning(`对不起，最多只能访问500页`);
				this.reloadPage()
				}else{
				this.page = page;
				this.search(page, this.limit);
				this.jump1();
				}
			},
			search(page, limit,exportFlag) {
			  if (!page) {
				this.page = 1;
			  }
			  if (!limit) {
				this.limit = 20;
			  }
			  if (!page && !limit) {
				this.reloadPage();
			  }
			  let params = {
				  page:{
					 "page":this.page,
					  "limit":this.limit,
					  "field":"",
					  "order":"desc"
				  },
				  specialBondProjectDto:{}
			  };

			  if(this.projectName){
				  params.specialBondProjectDto['projectName']=this.projectName;
				  params.specialBondProjectDto['nameType']=this.nameType;
			  }
			  if(this.projectEntity){

				  if(this.chargeDepartment.value=='项目主体'){
					  	params.specialBondProjectDto['projectEntity']=this.projectEntity;
				  }
				  if(this.chargeDepartment.value=='主管部门'){
				  		params.specialBondProjectDto['chargeDepartment']=this.projectEntity;
				  }
				  if(this.chargeDepartment.value=='实施单位'){
				  		params.specialBondProjectDto['piu']=this.projectEntity;
				  }


			  }
			  if(this.arrList.length>0){
				  for (let i = 0; i < this.arrList.length; i++) {
				    if (this.arrList[i].keyid == "address") {
				      params.specialBondProjectDto['province'] = this.arrList[i].provinceCode.join(',');
				      params.specialBondProjectDto['city'] = this.arrList[i].cityCode.join(',');
				      params.specialBondProjectDto['area'] = this.arrList[i].areaCode.join(',');
				    }
				}
			  }
			  if(this.projectType.length>0&&this.projectType[0]!='不限'){
				  params.specialBondProjectDto['projectType'] = this.projectType.join(',');
			  }
			  this.isSkeleton = true;
			  api.bondProjectPage(params).then(res=>{
            if (res.code==200) {
              this.tableData=res.data.list;
              this.total=res.data.total;
            }
           }).catch(error=>{

			   });
        api.zxzxmjctj(params).then(res => {
          this.isSkeleton = false;
          if(res.code === 200 && res.data){
            this.echartsData=res.data
            this.initChart(res.data)
            api.zxzxmqytj(params).then(res => {
              this.echartsData.topTenCompanyMoney=res.data.topTenCompanyMoney;
              this.echartsData.topTenCompany=res.data.topTenCompany;
            }).catch(error => {

            });
          }else {
            this.echartsDataState=true;
          }

        }).catch(error => {

        });
        api.zxzxmzjetj(params).then(res => {
          this.sumMoney=res.data.sumMoney
        }).catch(error => {

        });
			},
			ckhasValue(param){
				 var ckhasValue;
				 if(param){
					ckhasValue=this.hasValueThroughObj(0,param);
				 }else{
					ckhasValue=false;
				 }
				 return ckhasValue;
			 },
			 hasValueThroughObj(times,param,excludeKeys,excludeValues){

				   if(times==0){
				            this.hasValue=false;
				        }
				        var excludeKeys=['domicile','yitihuaSource'];
				        var excludeValues=['and','or','{}','[]','','null','undefined'];
				      　if(Array.isArray(param)){
				            for(let i=0;i<param.length;i++){
				                var objParam = param[i];
				                Object.keys(objParam).map(key => {
				                    if(Array.isArray(objParam[key])||objParam[key] instanceof Object){
				                        this.hasValueThroughObj(1,objParam[key],excludeKeys,excludeValues);
				                    }else{
				                        if(objParam instanceof Object) {
				                            if (!excludeKeys.includes(key)&&!excludeValues.includes(objParam[key])) {

				                                this.hasValue =true;
				                                // return hasValue;
				                            }
				                        }
				                    }
				              })
				            }
				      　}else{
				      　    if(param instanceof Object) {
				               Object.keys(param).map(key => {
				                    if(Array.isArray(param[key])||param[key] instanceof Object){
				                        this.hasValueThroughObj(1,param[key],excludeKeys,excludeValues);
				                    }else{
				                        if (!excludeKeys.includes(key)&&!excludeValues.includes(param[key])) {

				                           this.hasValue =true;
				                            // return hasValue;
				                        }
				                    }
				                })
				            }
				        }
				        return this.hasValue;
			},
			getUipIdByCid(companyId){
				var params=[companyId]
				api.getUipIdByCid(params).then(res=>{
							if (res.code==200) {
									if(res.data&&res.data.length>0&&res.data[0].uipId){
										this.$router.push({path: '/enterprise/'+this.encodeStr(companyId)})
									}else{
										this.$router.push({path: '/company/'+this.encodeStr(companyId)})
									}

							}
				 }).catch(error=>{

				 });
			},
			reset(){
				Object.assign(this.$data, this.$options.data.call(this)); //重置data
				this.init();
			},
      handledialog(){
        this.dialogEchartsVisible=true;
        this.initChart1(this.echartsData)
      },
      initChart(row) {
        var data=[];
        for(let key in row.projectTypeList){
          for(const i in row.projectTypeList[key]){
            var obj={};
            obj.name=i;
            obj.value=row.projectTypeList[key][i];
            data.push(obj)
          }
        }
        var data1=[];
        for(let key in row.provinceList){
          for(const i in row.provinceList[key]){
            var obj={};
            obj.name=i;
            obj.value=row.provinceList[key][i];
            data1.push(obj)
          }
        }

        this.$nextTick(() => {
          let myChart = echarts.init(document.getElementById("echarts1"))
          let option ={
            tooltip: {
              trigger: 'item',
            },
            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
            series: [
              {
                type: 'pie',
                radius: '85%',
                center: ['50%', '50%'],
                data: data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myChart.setOption(option);
          let myChart1 = echarts.init(document.getElementById("echarts2"))
          let option1 ={
            tooltip: {
              trigger: 'item',
            },
            // legend: {
            //   type: 'scroll',
            //   orient: 'horizontal',
            //   bottom: 0,
            //   data: data1,
            //   itemHeight:8,
            //   itemWidth:12,
            //   pageButtonPosition: 'end',
            // },
            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
            series: [
              {
                type: 'pie',
                radius: '85%',
                center: ['50%', '50%'],
                data: data1,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myChart1.setOption(option1);

          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
            myChart1.resize();//图表跟随页面大小变化宽度
          });
        })

      },
      initChart1(row) {
        let data=[];
        for(let key in row.projectTypeList){
          for(const i in row.projectTypeList[key]){
            let obj={};
            obj.name=i;
            obj.value=row.projectTypeList[key][i];
            data.push(obj)
          }
        }
        let data1=[];
        for(let key in row.provinceList){
          for(const i in row.provinceList[key]){
            let obj={};
            obj.name=i;
            obj.value=row.provinceList[key][i];
            data1.push(obj)
          }
        }

        let data2=[]
        for(let i=0; i<row.moneyRange.length; i++){
          let obj={};
          obj.name=row.moneyRange[i].rangeName;
          obj.value=row.moneyRange[i].rate;
          data2.push(obj)
        }

        let data3=[];
        for(let key in row.topTenCompanyMoney){
          for(const i in row.topTenCompanyMoney[key]){
            let obj={};
            obj.name=i;
            obj.value=row.topTenCompanyMoney[key][i]/10000;
            data3.push(obj)
          }
        }
        let data4=[];
        for(let key in row.topTenCompany){
          for(const i in row.topTenCompany[key]){
            let obj={};
            obj.name=i;
            obj.value=row.topTenCompany[key][i];
            data4.push(obj)
          }
        }

        this.$nextTick(() => {
          let myChart = echarts.init(document.getElementById("echarts-xmlx"))
          let option ={
            tooltip: {
              trigger: 'item',
            },
            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
            series: [
              {
                type: 'pie',
                radius: '75%',
                center: ['50%', '50%'],
                data: data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myChart.setOption(option);

          let myChart1 = echarts.init(document.getElementById("echarts-xmdq"))
          let option1 ={
            tooltip: {
              trigger: 'item',
            },
            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
            series: [
              {
                type: 'pie',
                radius: '75%',
                center: ['50%', '50%'],
                data: data1,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myChart1.setOption(option1);

          let myChart2 = echarts.init(document.getElementById("echarts-xmtz"))
          let option2 ={
            tooltip: {
              trigger: 'item',
            },
            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
            series: [
              {
                type: 'pie',
                radius: '75%',
                center: ['50%', '50%'],
                data: data2,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myChart2.setOption(option2);

          let myChart3 = echarts.init(document.getElementById("echarts-tze"))
          let option3 ={
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            xAxis: {
              type: 'category',
              axisLabel: {
                formatter: function (params) {
                  var str = "";                 // 最终拼接成的字符串
                  var paramsLen = params.length;// 获取每项文字的个数
                  var len = 6;                  // 每行能显示的字的个数（根据实际情况自己设置）
                  var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                  if (paramsLen > len) {        //大于设定的len就换行，不大于就不变化
                    for (var i = 0; i < rowNumber; i++) {
                      var temp = "";            // 表示每一次截取的字符串
                      var start = i * len;      // 开始截取的位置
                      var end = start + len;    // 结束截取的位置
                      if (i == rowNumber - 1) { // 最后一次不换行
                        temp = params.substring(start, paramsLen);
                      } else {                  // 每一次拼接字符串并换行
                        temp = params.substring(start, end) + "\n";
                      }
                      str += temp;              // 最终拼成的字符串
                    }
                  } else {                      // 给新的字符串赋值
                    str = params;
                  }
                  return str;                   //返回字符串
                }
              },
              axisTick: false, //坐标轴刻度
              axisPointer: {
                type: 'shadow'
              },
              data: data3.map(item => item.name),
            },
            yAxis: [
              {
                type: 'value',
                axisLabel: { //坐标轴刻度标签的相关设置
                  color:"#666666"
                },
                name: '单位：亿元',
                nameLocation: 'end',
                nameTextStyle: {
                  padding: [0, 10, 0, -30],    // 四个数字分别为上右下左与原位置距离
                  color: '#666666',
                }
              },
            ],
            grid: {
              top:40,
              left:80,
              right:20,
              bottom:50,
            },
            series: [
              {
                name:'项目金额',
                type: 'bar',
                barWidth: 20,
                tooltip: {
                  valueFormatter: function (value) {
                    return value;
                  }
                },
                itemStyle: {
                  normal:{
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#E49708'
                    }, {
                      offset: 1,
                      color: '#E49708'
                    }]),
                    // barBorderRadius:[20,20, 0, 0]
                  }
                },
                data:data3.map(item => item.value),
              }
            ]
          }
          myChart3.setOption(option3);

          let myChart4 = echarts.init(document.getElementById("echarts-xms"))
          let option4 ={
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            xAxis: {
              type: 'category',
              axisLabel: {
                formatter: function (params) {
                  var str = "";                 // 最终拼接成的字符串
                  var paramsLen = params.length;// 获取每项文字的个数
                  var len = 6;                  // 每行能显示的字的个数（根据实际情况自己设置）
                  var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                  if (paramsLen > len) {        //大于设定的len就换行，不大于就不变化
                    for (var i = 0; i < rowNumber; i++) {
                      var temp = "";            // 表示每一次截取的字符串
                      var start = i * len;      // 开始截取的位置
                      var end = start + len;    // 结束截取的位置
                      if (i == rowNumber - 1) { // 最后一次不换行
                        temp = params.substring(start, paramsLen);
                      } else {                  // 每一次拼接字符串并换行
                        temp = params.substring(start, end) + "\n";
                      }
                      str += temp;              // 最终拼成的字符串
                    }
                  } else {                      // 给新的字符串赋值
                    str = params;
                  }
                  return str;                   //返回字符串
                }
              },
              axisTick: false, //坐标轴刻度
              axisPointer: {
                type: 'shadow'
              },
              data: data4.map(item => item.name),
            },
            yAxis: [
              {
                type: 'value',
                axisLabel: { //坐标轴刻度标签的相关设置
                  color:"#666666"
                },
                name: '单位：个',
                nameLocation: 'end',
                nameTextStyle: {
                  padding: [0, 10, 0, -30],    // 四个数字分别为上右下左与原位置距离
                  color: '#666666',
                }
              },
            ],
            grid: {
              top:40,
              left:60,
              right:20,
              bottom:60,
            },
            series: [
              {
                name:'项目数量',
                type: 'bar',
                barWidth: 20,
                tooltip: {
                  valueFormatter: function (value) {
                    return value;
                  }
                },
                itemStyle: {
                  normal:{
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#E49708'
                    }, {
                      offset: 1,
                      color: '#E49708'
                    }]),
                    // barBorderRadius:[20,20, 0, 0]
                  }
                },
                data:data4.map(item => item.value),
              }
            ]
          }
          myChart4.setOption(option4);


          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
            myChart1.resize();//图表跟随页面大小变化宽度
            myChart2.resize();//图表跟随页面大小变化宽度
            myChart3.resize();//图表跟随页面大小变化宽度
            myChart4.resize();//图表跟随页面大小变化宽度

          });
        })

      },
		}
	}
</script>
<style lang="scss">
  .default_header_dropdown{
    left: 266px !important;
    top: 218px !important;
    border-radius: 4px;
  }
</style>
<style lang="scss" scoped>
	.content{
	  padding: 0px 16px;
	  padding-top: 16px;
      border-radius: 4px 4px 4px 4px;
	   background: #FFFFFF;
	   .content_item{
		   padding-top: 20px;
		   display: flex;
		   align-items: center;
	       .label{
	           width: 84px;
			   font-size: 14px;
			   font-weight: 400;
			   color: rgba(35,35,35,0.8);
	       }
	       .content_right{

	           .ename_input{
	               width: 640px;

	               margin-right: 20px;

	           }
	       }

		 .item_ckquery_list {
			display: flex;

		}


		 .item_ckquery_list .el-input__icon {
			position: relative;
			top: 1px;
		}
		.ckquery_list_right {
			width: 640px;
		}
		.register_count_ipt{
			margin-left: 0px;

		}
		.register_count_ipt .el-input__inner{
			width: 174px;
		}
		::v-deep .el-input-group__prepend{
			padding: 0 8px;
			background-color:#F3F4F5;
			border-radius:2px;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
		.content-projecttype{
			display: flex;
			align-items: center;
			justify-content: center;
			.projecttype{
				font-weight: 400;
				color: #232323;
				padding: 1px 5px;
				margin-right: 4px;
				cursor: pointer;
				border-radius: 3px 3px 3px 3px;
				font-size: 14px;
			}
			.projecttype:first-child{
				padding-left: 0px;
			}
			.projecttype:hover{
				background: #F3F4F5;
				padding: 1px 5px;
			}
			.activetype{
				background: #F3F4F5;
				padding: 1px 5px !important;
			}
		}



	   }
	   .content_item_padding0{
		   padding: 0;
	   }
	   .content_item18{
	   	padding-top: 16px;
	   }

	}

	.bottomlist{
		width: 100%;
		background-color: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
		.bottomlist-title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 12px;
			padding: 16px ;
			border-bottom: 1px solid #EFEFEF;
			.bottomlist-title-left{
				display: inline-flex;;
				align-items: center;
				.title-left{
				  height:16px;
				  line-height: 16px;
				  font-size: 12px;
				  font-weight: 400;
				  color: #3D3D3D;
			   }
			}
			.title-right{
				display: flex;
				align-items: center;

				p:last-child{
					display: flex;
					align-items: center;
					font-size: 14px;
					font-weight: 400;
					color: rgba(35,35,35,0.8);
				}
				img{
					width: 18px;
					height: 18px;
				}
				.excel{
					cursor: pointer;
				}
			}
		}
		.bottomlist-content{
			padding-bottom: 0px;
		}
		.bottomlist-list{
			padding: 14px;
			font-size: 14px;
			border-bottom: 1px solid #EFEFEF;
			padding-bottom: 14px;
			.list-titel{
				font-size: 16px;
				font-weight: 700;
				color: #3D3D3D;
				line-height: 19px;
				.list-titel-a{
					text-decoration: none;
					color:#3D3D3D;
				}
				a:hover, a:visited, a:link, a:active{
					color:#3D3D3D;
				}
			}
			.content-label{
				margin-top: 5px;
				margin-bottom: 5px;
				.list-label{
					background: #F3F3FF;
					color: #8491E8;
					border-radius: 1px 1px 1px 1px;

					padding: 3px 7px;
					font-size: 12px;

				}
			}


			.list-content{
				margin-top: 3px;
				display: flex;
				justify-content: start;
				align-items: center;

				.list-content-text{
					margin-top: 7px;
					display: flex;
					justify-content: start;
					align-items: center;
					margin-right: 32px;
					font-size: 14px;

					span:first-child{
						font-weight: 400;
						color: rgba(35,35,35,0.4);
						line-height: 15px
					}
					span:last-child{
						font-weight: 400;
						color: rgba(35,35,35,0.8);
						line-height: 15px
					}
					.blue{
						color: #0081FF !important;
						cursor: pointer;

					}

				}


			}


		}
		.bottomlist-list:hover{
			background: #F6F9FC;
			cursor: pointer;
		}
		.pagination{
			padding: 14px ;
		   .el-pagination{
			   float: right;
		   }
		}

    .chart{
      height: 306px;
      display: flex;
      margin: 16px 20px;
      width: calc(100% - 40px);
      .chart-left{
        height: 306px;
        border: 1px solid #EFEFEF;
        border-radius: 4px;
        width: calc(100% - 74px);
        display: flex;
        .echarts-title{
          color: #303133;
          font-size: 14px;
          font-weight: 700;
          padding-bottom: 14px;
        }
        .echarts-item{
          width: calc(50% - 16px);
          padding: 16px 0 16px 16px;
        }
      }
      .chart-right{
        height: 306px;
        border-radius: 8px;
        border: 1px solid #1373D9;
        color: #1373D9;
        text-align: center;
        font-size: 14px;
        padding-top: 103px;
        cursor: pointer;
        margin-left: 16px;
        width: 56px;
      }
      .chart-right:hover{
        background: #E8F1FC;
      }
    }

	}

  .dialogEcharts{
    ::v-deep .el-dialog {
      .el-dialog__body{
        padding: 16px 19px 0 16px;
        max-height: 664px;
        overflow: auto;
      }
      .echarts-item{
        border: 1px solid #DCDFE6;
        width: 550px;
        display: inline-block;
        border-radius: 4px;
        padding: 16px;
        margin-bottom: 16px;
      }
      .echarts-item:nth-child(2){
        margin-left: 16px;
      }
    }
  }

</style>
