<!-- 一级下转页面 -->
<template>
	<screenHeader :currentKey="currentKey">
		<div class="breadcrumb">
			<div class="left">
				{{ $i18n.locale === 'zh-CN'?'当前位置':'Current position'}}：
				<div class="crumb-item" @click="balckTwo()">
					<span> {{ $i18n.locale === 'zh-CN'?'运营主题':'Operation Theme'}}</span>
				</div>
				<div class="crumb-item-active">
					<span>
						{{ $i18n.locale === 'zh-CN'?firstPageName.targetName:firstPageName.targetNameEn}}
					</span>
				</div>
			</div>
		</div>
		<div class="screen-body">
			<div class="screen-body-col col-top">
				<div class="top-header">
					<div class="title">
						{{$i18n.locale === 'zh-CN'?indexData.targetName:indexData.targetNameEn}}({{indexData.targetUnit}})
					</div>
				</div>
				<div class="top-content">
					<div class="cent-echarts" v-for="(e,ex) in topList" :key="ex">
						<div class="echarts-title">{{ $i18n.locale === 'zh-CN'?e.targetName:e.targetNameEn}}</div>
						<div class="search" v-if="e.type==1">
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[0].dateReqVo.startYear" style="width: 110px;"
								@change="handleTop(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
							</el-date-picker>
							至
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[0].dateReqVo.endYear" value-format="yyyy"
								@change="handleTop(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
							</el-date-picker>
						</div>
						<div class="search" v-if="e.type==2">
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[1].dateReqVo.startYear" style="width: 110px;"
								@change="handleTop(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
							</el-date-picker>
							至
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[1].dateReqVo.endYear" value-format="yyyy"
								@change="handleTop(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
							</el-date-picker>
							&nbsp;
							<el-select popper-class="screen-select-picker" v-model="parmas.queryList[1].dateReqVo.customer" placeholder="请选择客户" clearable
								@change="handleTop(e.type,ex)">
								<el-option v-for="item in khList" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="search" v-if="e.type==3">
							年：
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[2].dateReqVo.year" type="year" value-format="yyyy"
								@change="handleTop(e.type,ex)" placeholder="选择年" style="width: 110px;">
							</el-date-picker>

							<!-- &nbsp;
							<el-select popper-class="screen-select-picker" v-model="parmas.queryList[2].dateReqVo.customer" placeholder="请选择客户" clearable
								@change="handleTop(e.type,ex)">
								<el-option v-for="item in khList" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select> -->
						</div>
						<div class="search" v-if="e.type==4">
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[3].dateReqVo.startYear" style="width: 110px;"
								@change="handleTop(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
							</el-date-picker>
							至
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[3].dateReqVo.endYear" value-format="yyyy"
								@change="handleTop(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
							</el-date-picker>
							&nbsp;
							<el-select popper-class="screen-select-picker" v-model="parmas.queryList[3].dateReqVo.product" placeholder="请选择产品" clearable
								@change="handleTop(e.type,ex)">
								<el-option v-for="item in productList" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="search" v-if="e.type==5">
							年：
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[4].dateReqVo.year" type="year" value-format="yyyy"
								@change="handleTop(e.type,ex)" placeholder="选择年" style="width: 110px;">
							</el-date-picker>
							<!-- 	&nbsp;
							<el-select popper-class="screen-select-picker" v-model="parmas.queryList[4].dateReqVo.product" placeholder="请选择产品" clearable @change="handleTop(e.type,ex)">
								<el-option v-for="item in productList" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select> -->
						</div>
						<div class="search" v-if="e.type==6">
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[5].dateReqVo.year" type="year" value-format="yyyy"
								@change="handleTop(e.type,ex)" placeholder="选择年" style="width: 110px;">
							</el-date-picker>
							年
							<el-select popper-class="screen-select-picker" v-model="parmas.queryList[5].dateReqVo.startMonth" placeholder="请选择开始月份"
								@change="handleTop(e.type,ex)" style="width: 110px;">
								<el-option v-for="item in monthList" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
							至
							<el-select popper-class="screen-select-picker" v-model="parmas.queryList[5].dateReqVo.endMonth" placeholder="请选择结束月份" clearable
								@change="handleTop(e.type,ex)" style="width: 110px;">
								<el-option v-for="item in monthList" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="search" v-if="e.type==7">
							年：
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[6].dateReqVo.year" type="year" value-format="yyyy"
								@change="handleTop(e.type,ex)" placeholder="选择年" style="width: 110px;">
							</el-date-picker>
							<!-- &nbsp;
							<el-select popper-class="screen-select-picker" v-model="parmas.queryList[6].dateReqVo.subjectCode" placeholder="请选择类别"
								clearable @change="handleTop(e.type,ex)">
								<el-option v-for="item in subjectList" :key="item.code" :label="item.nameEn"
									:value="item.code">
								</el-option>
							</el-select> -->
						</div>
						<div class="search" v-if="e.type==8">
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[7].dateReqVo.year" type="year" value-format="yyyy"
								@change="handleTop(e.type,ex)" placeholder="选择年" style="width: 110px;">
							</el-date-picker>

							<!-- &nbsp;
							<el-cascader popper-class="cascader" :options="allList"
								v-model="parmas.queryList[7].dateReqVo.enterpriseCode" :props='propsData' clearable @change="handleTop(e.type,ex)"
								placeholder="请选择企业" style="width: 250px;" :show-all-levels="false">
								<template slot-scope="{ node, data }">
									<span v-if="data.id"> {{ data.code }} </span>
									<span v-else>{{ data.continent }}</span>
								</template>
							</el-cascader> -->
						</div>
						<div class="search" v-if="e.type==9">
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[8].dateReqVo.startYear" style="width: 110px;"
								@change="handleTop(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
							</el-date-picker>
							至
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[8].dateReqVo.endYear" value-format="yyyy"
								@change="handleTop(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
							</el-date-picker>
						</div>
						<div class="search" v-if="e.type==10">
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[9].dateReqVo.startYear" style="width: 110px;"
								@change="handleTop(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
							</el-date-picker>
							至
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[9].dateReqVo.endYear" value-format="yyyy"
								@change="handleTop(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
							</el-date-picker>
						</div>
						<div class="search" v-if="e.type==11">
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[10].dateReqVo.startYear" style="width: 110px;"
								@change="handleTop(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
							</el-date-picker>
							至
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[10].dateReqVo.endYear" value-format="yyyy"
								@change="handleTop(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
							</el-date-picker>
							&nbsp;
							<el-select popper-class="screen-select-picker" v-model="parmas.queryList[10].dateReqVo.customer" placeholder="请选择客户" clearable
								@change="handleTop(e.type,ex)">
								<el-option v-for="item in khList" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="search" v-if="e.type==12">
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[11].dateReqVo.startYear" style="width: 110px;"
								@change="handleTop(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
							</el-date-picker>
							至
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[11].dateReqVo.endYear" value-format="yyyy"
								@change="handleTop(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
							</el-date-picker>
							&nbsp;
							<el-select popper-class="screen-select-picker" v-model="parmas.queryList[11].dateReqVo.customer" placeholder="请选择客户" clearable
								@change="handleTop(e.type,ex)">
								<el-option v-for="item in khList" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="search" v-if="e.type==13">
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[12].dateReqVo.startYear" style="width: 110px;"
								@change="handleTop(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
							</el-date-picker>
							至
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[12].dateReqVo.endYear" value-format="yyyy"
								@change="handleTop(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
							</el-date-picker>
							&nbsp;
							<el-select popper-class="screen-select-picker" v-model="parmas.queryList[12].dateReqVo.analyseType" placeholder="请选择区域"
								clearable @change="handleTop(e.type,ex)">
								<el-option v-for="item in zbList" :key="item.value" :label="item.name"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="search" v-if="e.type==14">
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[13].dateReqVo.startYear" style="width: 110px;"
								@change="handleTop(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
							</el-date-picker>
							至
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[13].dateReqVo.endYear" value-format="yyyy"
								@change="handleTop(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
							</el-date-picker>
							&nbsp;
							<el-select popper-class="screen-select-picker" v-model="parmas.queryList[13].dateReqVo.analyseType" placeholder="请选择区域"
								clearable @change="handleTop(e.type,ex)">
								<el-option v-for="item in zbList" :key="item.value" :label="item.name"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="search" v-if="e.type==15">
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[14].dateReqVo.startYear" style="width: 110px;"
								@change="handleTop(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
							</el-date-picker>
							至
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[14].dateReqVo.endYear" value-format="yyyy"
								@change="handleTop(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
							</el-date-picker>

						</div>
						<div class="search" v-if="e.type==16">
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[15].dateReqVo.startYear" style="width: 110px;"
								@change="handleTop(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
							</el-date-picker>
							至
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[15].dateReqVo.endYear" value-format="yyyy"
								@change="handleTop(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
							</el-date-picker>
							&nbsp;
							<el-select popper-class="screen-select-picker" v-model="parmas.queryList[15].dateReqVo.subjectCode" placeholder="请选择类别"
								clearable @change="handleTop(e.type,ex)">
								<el-option v-for="item in subjectList" :key="item.code" :label="item.nameEn"
									:value="item.code">
								</el-option>
							</el-select>
						</div>
						<div class="search" v-if="e.type==17">
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[16].dateReqVo.startYear" style="width: 110px;"
								@change="handleTop(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
							</el-date-picker>
							至
							<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[16].dateReqVo.endYear" value-format="yyyy"
								@change="handleTop(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
							</el-date-picker>
							&nbsp;
							<el-cascader popper-class="cascader" :options="allList"
								v-model="parmas.queryList[16].dateReqVo.enterpriseCode" :props='propsData' clearable
								@change="handleTop(e.type,ex)" placeholder="请选择企业" style="width: 250px;"
								:show-all-levels="false">
								<template slot-scope="{ node, data }">
									<span v-if="data.id"> {{ data.code }} </span>
									<span v-else>{{ data.continent }}</span>
								</template>
							</el-cascader>
						</div>
						<div :id="'topChart'+ex" class="full"></div>
					</div>
				</div>

			</div>

			<div class="screen-body-col col-footer">
				<div class="footer-echarts" v-for="(e,ex) in dataList"
					:key="ex"
					:style="{height:(100/Math.ceil(dataList.length/3)<=50?48:100/Math.ceil(dataList.length/3)-2)+'%'}"
					:class="{ lastLine: (ex + 1 ) % 3 == 0 }">
					<echartsTitle :orderData="e" :isClick="false" :hierarchy="hierarchy" :lowerType="lowerType">
						{{ $i18n.locale === 'zh-CN'?e.targetName:e.targetNameEn}}({{e.targetUnit}})
					</echartsTitle>
					<div class="search" v-if="e.type==1">
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[0].dateReqVo.startYear" style="width: 110px;"
							@change="handleData(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
						</el-date-picker>
						至
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[0].dateReqVo.endYear" value-format="yyyy"
							@change="handleData(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
						</el-date-picker>
					</div>
					<div class="search" v-if="e.type==2">
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[1].dateReqVo.startYear" style="width: 110px;"
							@change="handleData(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
						</el-date-picker>
						至
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[1].dateReqVo.endYear" value-format="yyyy"
							@change="handleData(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
						</el-date-picker>
						&nbsp;
						<el-select popper-class="screen-select-picker" v-model="parmas.queryList[1].dateReqVo.customer" placeholder="请选择客户" clearable
							@change="handleData(e.type,ex)">
							<el-option v-for="item in khList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="search" v-if="e.type==3">
						年：
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[2].dateReqVo.year" type="year" value-format="yyyy"
							@change="handleData(e.type,ex)" placeholder="选择年" style="width: 110px;">
						</el-date-picker>

						<!-- &nbsp;
						<el-select popper-class="screen-select-picker" v-model="parmas.queryList[2].dateReqVo.customer" placeholder="请选择客户" clearable
							@change="handleData(e.type,ex)">
							<el-option v-for="item in khList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select> -->
					</div>
					<div class="search" v-if="e.type==4">
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[3].dateReqVo.startYear" style="width: 110px;"
							@change="handleData(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
						</el-date-picker>
						至
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[3].dateReqVo.endYear" value-format="yyyy"
							@change="handleData(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
						</el-date-picker>
						&nbsp;
						<el-select popper-class="screen-select-picker" v-model="parmas.queryList[3].dateReqVo.product" placeholder="请选择产品" clearable
							@change="handleData(e.type,ex)">
							<el-option v-for="item in productList" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="search" v-if="e.type==5">
						年：
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[4].dateReqVo.year" type="year" value-format="yyyy"
							@change="handleData(e.type,ex)" placeholder="选择年" style="width: 110px;">
						</el-date-picker>
						<!-- &nbsp;
						<el-select popper-class="screen-select-picker" v-model="parmas.queryList[4].dateReqVo.product" placeholder="请选择产品" clearable
							@change="handleData(e.type,ex)">
							<el-option v-for="item in productList" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select> -->
					</div>
					<div class="search" v-if="e.type==6">
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[5].dateReqVo.year" type="year" value-format="yyyy"
							@change="handleData(e.type,ex)" placeholder="选择年" style="width: 110px;">
						</el-date-picker>
						年
						<el-select popper-class="screen-select-picker" v-model="parmas.queryList[5].dateReqVo.startMonth" placeholder="请选择开始月份"
							@change="handleData(e.type,ex)" style="width: 110px;">
							<el-option v-for="item in monthList" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
						至
						<el-select popper-class="screen-select-picker" v-model="parmas.queryList[5].dateReqVo.endMonth" placeholder="请选择结束月份" clearable
							@change="handleData(e.type,ex)" style="width: 110px;">
							<el-option v-for="item in monthList" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="search" v-if="e.type==7">
						年：
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[6].dateReqVo.year" type="year" value-format="yyyy"
							@change="handleData(e.type,ex)" placeholder="选择年" style="width: 110px;">
						</el-date-picker>
						<!-- &nbsp;
						<el-select popper-class="screen-select-picker" v-model="parmas.queryList[6].dateReqVo.subjectCode" placeholder="请选择类别" clearable
							@change="handleData(e.type,ex)">
							<el-option v-for="item in subjectList" :key="item.code" :label="item.nameEn"
								:value="item.code">
							</el-option>
						</el-select> -->
					</div>
					<div class="search" v-if="e.type==8">
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[7].dateReqVo.year" type="year" value-format="yyyy"
							@change="handleData(e.type,ex)" placeholder="选择年" style="width: 110px;">
						</el-date-picker>

						<!-- &nbsp;
						<el-cascader popper-class="cascader" :options="allList" clearable
							v-model="parmas.queryList[7].dateReqVo.enterpriseCode" :props='propsData'
							@change="handleData(e.type,ex)" placeholder="请选择企业" style="width: 250px;"
							:show-all-levels="false">
							<template slot-scope="{ node, data }">
								<span v-if="data.id"> {{ data.code }} </span>
								<span v-else>{{ data.continent }}</span>
							</template>
						</el-cascader> -->
					</div>
					<div class="search" v-if="e.type==9">
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[8].dateReqVo.startYear" style="width: 110px;"
							@change="handleData(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
						</el-date-picker>
						至
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[8].dateReqVo.endYear" value-format="yyyy"
							@change="handleData(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
						</el-date-picker>
					</div>
					<div class="search" v-if="e.type==10">
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[9].dateReqVo.startYear" style="width: 110px;"
							@change="handleData(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
						</el-date-picker>
						至
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[9].dateReqVo.endYear" value-format="yyyy"
							@change="handleData(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
						</el-date-picker>
					</div>
					<div class="search" v-if="e.type==11">
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[10].dateReqVo.startYear" style="width: 110px;"
							@change="handleData(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
						</el-date-picker>
						至
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[10].dateReqVo.endYear" value-format="yyyy"
							@change="handleData(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
						</el-date-picker>
						&nbsp;
						<el-select popper-class="screen-select-picker" v-model="parmas.queryList[10].dateReqVo.customer" placeholder="请选择客户" clearable
							@change="handleData(e.type,ex)">
							<el-option v-for="item in khList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="search" v-if="e.type==12">
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[11].dateReqVo.startYear" style="width: 110px;"
							@change="handleData(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
						</el-date-picker>
						至
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[11].dateReqVo.endYear" value-format="yyyy"
							@change="handleData(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
						</el-date-picker>
						&nbsp;
						<el-select popper-class="screen-select-picker" v-model="parmas.queryList[11].dateReqVo.customer" placeholder="请选择客户" clearable
							@change="handleData(e.type,ex)">
							<el-option v-for="item in khList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="search" v-if="e.type==13">
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[12].dateReqVo.startYear" style="width: 110px;"
							@change="handleData(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
						</el-date-picker>
						至
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[12].dateReqVo.endYear" value-format="yyyy"
							@change="handleData(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
						</el-date-picker>
						&nbsp;
						<el-select popper-class="screen-select-picker" v-model="parmas.queryList[12].dateReqVo.analyseType" placeholder="请选择区域" clearable
							@change="handleData(e.type,ex)">
							<el-option v-for="item in zbList" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="search" v-if="e.type==14">
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[13].dateReqVo.startYear" style="width: 110px;"
							@change="handleData(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
						</el-date-picker>
						至
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[13].dateReqVo.endYear" value-format="yyyy"
							@change="handleData(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
						</el-date-picker>
						&nbsp;
						<el-select popper-class="screen-select-picker" v-model="parmas.queryList[13].dateReqVo.analyseType" placeholder="请选择区域" clearable
							@change="handleData(e.type,ex)">
							<el-option v-for="item in zbList" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="search" v-if="e.type==15">
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[14].dateReqVo.startYear" style="width: 110px;"
							@change="handleData(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
						</el-date-picker>
						至
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[14].dateReqVo.endYear" value-format="yyyy"
							@change="handleData(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
						</el-date-picker>

					</div>
					<div class="search" v-if="e.type==16">
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[15].dateReqVo.startYear" style="width: 110px;"
							@change="handleData(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
						</el-date-picker>
						至
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[15].dateReqVo.endYear" value-format="yyyy"
							@change="handleData(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
						</el-date-picker>
						&nbsp;
						<el-select popper-class="screen-select-picker" v-model="parmas.queryList[15].dateReqVo.subjectCode" placeholder="请选择类别" clearable
							@change="handleData(e.type,ex)">
							<el-option v-for="item in subjectList" :key="item.code" :label="item.nameEn"
								:value="item.code">
							</el-option>
						</el-select>
					</div>
					<div class="search" v-if="e.type==17">
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[16].dateReqVo.startYear" style="width: 110px;"
							@change="handleData(e.type,ex)" value-format="yyyy" type="year" placeholder="开始时间">
						</el-date-picker>
						至
						<el-date-picker popper-class="screen-date-picker" v-model="parmas.queryList[16].dateReqVo.endYear" value-format="yyyy"
							@change="handleData(e.type,ex)" style="width: 110px;" type="year" placeholder="结束时间">
						</el-date-picker>
						&nbsp;
						<el-cascader popper-class="cascader" :options="allList"
							v-model="parmas.queryList[16].dateReqVo.enterpriseCode" :props='propsData' clearable
							@change="handleData(e.type,ex)" placeholder="请选择企业" style="width: 250px;"
							:show-all-levels="false">
							<template slot-scope="{ node, data }">
								<span v-if="data.id"> {{ data.code }} </span>
								<span v-else>{{ data.continent }}</span>
							</template>
						</el-cascader>
					</div>


					<div :id="'pieChart'+ex" class="otherFull full3"></div>
				</div>
			</div>
		</div>
		<relationshipDialog ref="relationshipDialog" @callback="callback"></relationshipDialog>


	</screenHeader>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import moment from "moment"
	import * as echarts from 'echarts'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import humanResourceTheme from '@/api/bigScrenn/humanResourceTheme.js'
	// import moreDialog from '@/views/BigScrenn/components/moreDialog.vue'
	import financialTheme from '@/api/bigScrenn/financialTheme.js'
	import screenHeader from '@/views/BigScrenn/components/screenHeader.vue'
	import echartsTitle from '@/views/BigScrenn/humanResourceTheme/components/echartsTitle.vue'
	import echartsDialog from '@/views/BigScrenn/components/echartsDialog.vue'
	import relationshipDialog from '@/views/BigScrenn/components/relationshipDialog.vue'
	import operationTheme from '@/api/bigScrenn/operationTheme.js'




	export default {
		components: {
			screenHeader,
			echartsTitle,
			echartsDialog,
			// moreDialog,
			relationshipDialog
		},
		data() {
			return {
				currentKey: 'humanResourceTheme',
				hierarchy: 2, //页面层级
				allList: [],
				zbList: [],
				poolCode: '',
				propsData: {
					children: 'list',
					label: 'name',
					value: 'code',
					expandTrigger: 'hover'
				},
				newParams: {
					pageBean: {
						page: 1,
						pageSize: -1,
					},
					querys: []
				},
				parmas: {
					targetId: '',
					// enterpriseCode:'',
					queryList: [{
							type: 1,
							dateReqVo: {
								endMonth: null,
								endYear: moment().format('YYYY'),
								month: null,
								startMonth: null,
								startYear: moment().subtract(5, 'year').format('YYYY'),
								year: null
							}
						}, {
							type: 2,
							dateReqVo: {
								customer: '',
								endMonth: null,
								endYear: moment().format('YYYY'),
								month: null,
								startMonth: null,
								startYear: moment().subtract(5, 'year').format('YYYY'),
								year: null
							}
						},
						{
							type: 3,
							dateReqVo: {
								customer: '',
								endMonth: null,
								endYear: null,
								month: null,
								startMonth: null,
								startYear: null,
								year: moment().format('YYYY')
							}
						},
						{
							type: 4,
							dateReqVo: {
								product: '',
								endMonth: null,
								endYear: moment().format('YYYY'),
								month: null,
								startMonth: null,
								startYear: moment().subtract(5, 'year').format('YYYY'),
								year: null
							}
						}, {
							type: 5,
							dateReqVo: {
								product: '',
								endMonth: null,
								endYear: null,
								month: null,
								startMonth: null,
								startYear: null,
								year: moment().format('YYYY')
							}
						}, {
							type: 6,
							dateReqVo: {
								endMonth: moment().subtract(1, 'month').format('M'),
								endYear: null,
								month: null,
								startMonth: '1',
								startYear: null,
								year: moment().format('YYYY')
							}
						}, {
							type: 7,
							dateReqVo: {
								subjectCode: '',
								endMonth: null,
								endYear: null,
								month: null,
								startMonth: null,
								startYear: null,
								year: moment().format('YYYY')
							}
						}, {
							type: 8,
							dateReqVo: {
								enterpriseCode: '',
								endMonth: null,
								endYear: null,
								month: null,
								startMonth: null,
								startYear: null,
								year: moment().format('YYYY')
							}
						}, {
							type: 9,
							dateReqVo: {
								endMonth: null,
								endYear: moment().format('YYYY'),
								month: null,
								startMonth: null,
								startYear: moment().subtract(5, 'year').format('YYYY'),
								year: null
							}
						}, {
							type: 10,
							dateReqVo: {
								endMonth: null,
								endYear: moment().format('YYYY'),
								month: null,
								startMonth: null,
								startYear: moment().subtract(5, 'year').format('YYYY'),
								year: null
							}
						}, {
							type: 11,
							dateReqVo: {
								customer: '',
								endMonth: null,
								endYear: moment().format('YYYY'),
								month: null,
								startMonth: null,
								startYear: moment().subtract(5, 'year').format('YYYY'),
								year: null
							}
						}, {
							type: 12,
							dateReqVo: {
								customer: '',
								endMonth: null,
								endYear: moment().format('YYYY'),
								month: null,
								startMonth: null,
								startYear: moment().subtract(5, 'year').format('YYYY'),
								year: null
							}
						}, {
							type: 13,
							dateReqVo: {
								analyseType: '',
								endMonth: null,
								endYear: moment().format('YYYY'),
								month: null,
								startMonth: null,
								startYear: moment().subtract(5, 'year').format('YYYY'),
								year: null
							}
						}, {
							type: 14,
							dateReqVo: {
								analyseType: '',
								endMonth: null,
								endYear: moment().format('YYYY'),
								month: null,
								startMonth: null,
								startYear: moment().subtract(5, 'year').format('YYYY'),
								year: null
							}
						}, {
							type: 15,
							dateReqVo: {
								endMonth: null,
								endYear: moment().format('YYYY'),
								month: null,
								startMonth: null,
								startYear: moment().subtract(5, 'year').format('YYYY'),
								year: null
							}
						}, {
							type: 16,
							dateReqVo: {
								subjectCode: '',
								endMonth: null,
								endYear: moment().format('YYYY'),
								month: null,
								startMonth: null,
								startYear: moment().subtract(5, 'year').format('YYYY'),
								year: null
							}
						}, {
							type: 17,
							dateReqVo: {
								enterpriseCode: '',
								endMonth: null,
								endYear: moment().format('YYYY'),
								month: null,
								startMonth: null,
								startYear: moment().subtract(5, 'year').format('YYYY'),
								year: null
							}
						},
					]
				},
				yearData: {}, //年度
				quarterData: {}, //季度
				monthData: {}, //月度
				dataList: [], //其他数据
				datalength: 0, //长度
				leftNum: 0, // 左边展示个数
				rightNum: 0, // 右边展示个数
				leftList: [],
				rightList: [],
				showType: false,
				startDatePicker: this.beginDate(),
				endDatePicker: this.processDate(),
				monthList: [{
					value: '1',
					label: '一月份'
				}, {
					value: '2',
					label: '二月份',
				}, {
					value: '3',
					label: '三月份'
				}, {
					value: '4',
					label: '四月份'
				}, {
					value: '5',
					label: '五月份'
				}, {
					value: '6',
					label: '六月份'
				}, {
					value: '7',
					label: '七月份'
				}, {
					value: '8',
					label: '八月份'
				}, {
					value: '9',
					label: '九月份'
				}, {
					value: '10',
					label: '十月份'
				}, {
					value: '11',
					label: '十一月份'
				}, {
					value: '12',
					label: '十二月份'
				}],
				rightData: [],
				leftData: [],
				leftType: 1,
				rightType: 1,
				yearChart: null,
				quarterChart: null,
				monthChart: null,
				otherChart: null,
				leftMove: 0,
				rightMove: 0,
				pageName: '',
				firstPageName: {},
				tjwdList: [],
				topList: [],
				lowerType: true,
				indexData: {},
				linksType: '',
				linksTypeName: '',
				ssywList: [],
				dpzbList: [],
				khList: [], //客户
				productList: [], //产品
				subjectList: [], //类别
				containType: [], //当前页面type
			}
		},
		created() {
			this.indexData = JSON.parse(window.localStorage.getItem('indexData'))
			this.containType = this.indexData.containType ? this.indexData.containType.split(',') : this.indexData
				.containType
			this.parmas.targetId = this.indexData.targetId
			this.pageName = window.localStorage.getItem('pageName')
			this.firstPageName = JSON.parse(window.localStorage.getItem('firstPageName'))
			this.tjwdList = this.$i18n.locale === 'zh-CN' ? dictUtils.getDictItemsFromCache('tjwd') : dictUtils
				.getDictItemsFromCache('tjwd_en')
			
			this.ssywList = dictUtils.getDictItemsFromCache('ssyw')
			this.zbList = dictUtils.getDictItemsFromCache('zb_en')
			this.dpzbList = dictUtils.getDictItemsFromCache('dpzb')
			this.khList = dictUtils.getDictItemsFromCache('kh')
			this.parmas.queryList[1].dateReqVo.customer = this.khList[0].value
			this.parmas.queryList[10].dateReqVo.customer = this.khList[0].value
			this.parmas.queryList[11].dateReqVo.customer = this.khList[0].value
			this.parmas.queryList[12].dateReqVo.analyseType = this.zbList[0].value
			this.parmas.queryList[13].dateReqVo.analyseType = this.zbList[0].value
			this.geTproduct()
			this.getSubjectList()
		},
		mounted() {
			this.getAreaTree()
			this.$root.$on('resize', () => {
				this.resize(500)
			})
		},

		watch: {},

		computed: {},
		methods: {
			//获取类别
			getSubjectList() {
				operationTheme.getSubjectList({}, res => {
					if (res.state) {
						this.subjectList = res.value
						this.parmas.queryList[15].dateReqVo.subjectCode = this.subjectList[0].code
					}
				})
			},
			//获取产品
			geTproduct() {
				operationTheme.getProductList({}, res => {
					if (res.state) {
						this.productList = []
						for (let key in res.value) {
							this.productList.push({
								label: res.value[key],
								value: key
							})
						}
						this.parmas.queryList[3].dateReqVo.product = this.productList[0].value
					}
				})
			},
			callback() {
				this.indexData = JSON.parse(window.localStorage.getItem('indexData'))
				this.parmas.targetId = this.indexData.targetId
				this.pageName = window.localStorage.getItem('pageName')
				this.firstPageName = JSON.parse(window.localStorage.getItem('firstPageName'))
				// this.secondPageName = JSON.parse(window.localStorage.getItem('secondPageName'))

				this.getAreaTree()
				this.$root.$on('resize', () => {
					this.resize(500)
				})
			},
			getAreaTree() {
				this.newParams.querys[{
					group: "main",
					operation: "EQUAL",
					parentGroup: "",
					property: "pool_type_",
					relation: "AND",
					value: 1
				}, {
					group: "main",
					operation: "EQUAL",
					parentGroup: "",
					property: "run_status_",
					relation: "AND",
					value: 1
				}]
				financialTheme.getAreaTree(this.newParams, res => {
					if (res) {
						res.value.forEach(e => {
							this.dpzbList.forEach(s => {
								if (e.continent == s.name) {
									e.code = s.value
								}
							})
						})
						this.allList = res.value
						this.parmas.queryList[15].dateReqVo.enterpriseCode = this.allList[0].code
						// let enterpriseCode = window.localStorage.getItem('enterpriseCode')
						// if (enterpriseCode) {
						// 	this.poolCode = enterpriseCode.split(',')
						// } else {
						// 	this.poolCode = [res.value[0].code, res.value[0].list[0].code]
						// }
						this.getData()
					}
				})
			},
			balckTwo() {
				this.$router.push({
					name: 'operationTheme',
				})

			},
			// 动态计算高度，自适应当前容器
			resize(delay) {
				setTimeout(() => {
					this.yearChart.resize()
					this.quarterChart.resize()
					this.monthChart.resize()
				}, delay || 0)
			},
			// 选择年份范围选择时开始时间不能大于结束时间，结束时间不能小于开始时间
			// 提出开始时间必须小于提出结束时间
			beginDate() {
				let self = this
				return {
					disabledDate(time) {
						if (self.parmas.endYear !== '') {
							let fixedTime = new Date()
							return fixedTime.getFullYear() > self.parmas.endYear
						}
					}
				}
			},
			// 提出结束时间必须大于提出开始时间
			processDate() {
				let self = this
				return {
					disabledDate(time) {
						let fixedTime = new Date(time)
						return fixedTime.getFullYear() < self.parmas.startYear
					}
				}
			},
			arraySort(property) {
				return function(a, b) {
					var value1 = a[property]
					var value2 = b[property]
					return value1 - value2
				}
			},
			handleData(val, index) {
				let parmas = JSON.parse(JSON.stringify(this.parmas))
				parmas.queryList = []
				this.containType.forEach(e => {
					this.parmas.queryList.forEach(q => {
						if (e == q.type) {
							parmas.queryList.push(q)
						}
					})
				})
				operationTheme.fromUnderDataProduct(parmas, res => {
					if (res.value) {
						// res.value.sort(this.arraySort('type'))
						this.$nextTick(() => {
							this.dataEcharts(res.value[3 + index], index)
						})
					}
				})
			},
			handleTop(val, index) {
				let parmas = JSON.parse(JSON.stringify(this.parmas))
				parmas.queryList = []
				this.containType.forEach(e => {
					this.parmas.queryList.forEach(q => {
						if (e == q.type) {
							parmas.queryList.push(q)
						}
					})
				})
				operationTheme.fromUnderDataProduct(parmas, res => {
					if (res.value) {
						// res.value.sort(this.arraySort('type'))
						this.$nextTick(() => {
							this.topEcharts(res.value[index], index)
						})
					}
				})
			},
			getData() {
				this.showType = false
				this.leftList = []
				this.rightList = []
				this.dataList = []
				this.topList = []
				let parmas = JSON.parse(JSON.stringify(this.parmas))
				parmas.queryList = []
				this.containType.forEach(e => {
					this.parmas.queryList.forEach(q => {
						if (e == q.type) {
							parmas.queryList.push(q)
						}
					})
				})
				operationTheme.fromUnderDataProduct(parmas, res => {
					if (res.value) {
						let arr = JSON.parse(JSON.stringify(res.value))
						this.topList = arr.slice(0, 3)
						this.dataList = arr.slice(3)
						this.topList.forEach((t, tx) => {
							this.$nextTick(() => {
								this.topEcharts(t, tx)
							})
						})
						this.dataList.forEach((c, cx) => {
							this.$nextTick(() => {
								this.dataEcharts(c, cx)
							})
						})
					}

				})
			},
			// 判断是否为整数
			isInteger(obj) {
				return obj % 1 === 0
			},

			topEcharts(c, cx) {
				let otherChart = echarts.init(document.getElementById(`topChart${cx}`))
				let option = {}
				let xLabel = []
				//折线图
				if (c.type == 1 || c.type == 2 || c.type == 4 || c.type == 6 || c.type == 9 || c.type == 10 || c.type ==
					11 || c.type == 12 || c.type == 13 || c.type == 14 || c.type == 15 || c.type == 16 || c.type == 17) {
					let arr = []
					c.resultData.forEach(r => {
						if(c.type==6){
							xLabel.push(r.year+'.'+r.month)
						}else{
							xLabel.push(r.year)
						}
					})
					if (c.staLat.split(',').length > 1) {
						this.tjwdList.forEach(s => {
							c.staLat.split(',').forEach(t => {
								if (s.value == t) {
									let datalist = []
									if (t == 1) {
										c.resultData.forEach(r => {
											datalist.push(r.actual)
										})
									} else if (t == 2) {
										c.resultData.forEach(r => {
											datalist.push(r.budget)
										})
									} else if (t == 3) {
										c.resultData.forEach(r => {
											datalist.push(r.actual)
										})
									} else if (t == 4) {
										c.resultData.forEach(r => {
											datalist.push(r.budget)
										})
									} else if (t == 5) {
										c.resultData.forEach(r => {
											datalist.push(r.actual)
										})
									} else if (t == 6) {
										c.resultData.forEach(r => {
											datalist.push(r.actual)
										})
									} else if (t == 7) {
										c.resultData.forEach(r => {
											datalist.push(r.actual)
										})
									}
									if (t == 1 || t == 3) {
										arr.push({
											name: s.name,
											type: 'bar',
											symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
											smooth: true,
											lineStyle: {
												normal: {
													width: 3,
												},
											},
											itemStyle: {
												normal: {
													label: {
														show: false, //开启显示
														color: '#fff',
														position: 'top', //在上方显示
														formatter: function(res) {
															if (res.value) {
																return res.value
															} else {
																return 0
															}
														},
													},
												},

											},
											symbolSize: 8, //设定实心点的大小
											data: datalist

										}, )
									} else {
										arr.push({
											name: s.name,
											type: 'line',
											symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
											smooth: true,
											lineStyle: {
												normal: {
													width: 3,
												},
											},
											itemStyle: {
												normal: {
													label: {
														show: false, //开启显示
														color: '#fff',
														position: 'top', //在上方显示
														formatter: function(res) {
															if (res.value) {
																return res.value
															} else {
																return 0
															}
														},
													},
												},

											},
											symbolSize: 8, //设定实心点的大小
											data: datalist

										}, )
									}

								}
							})
						})
					} else {
						this.tjwdList.forEach(s => {
							let data1list = []
							if (c.staLat == 1) {
								c.resultData.forEach(r => {
									data1list.push(r.actual)
								})
							} else if (c.staLat == 2) {
								c.resultData.forEach(r => {
									data1list.push(r.budget)
								})
							} else if (c.staLat == 3) {
								c.resultData.forEach(r => {
									data1list.push(r.actual)
								})
							} else if (c.staLat == 4) {
								c.resultData.forEach(r => {
									data1list.push(r.budget)
								})
							} else if (c.staLat == 5) {
								c.resultData.forEach(r => {
									data1list.push(r.actual)
								})
							} else if (c.staLat == 6) {
								c.resultData.forEach(r => {
									data1list.push(r.actual)
								})
							} else if (c.staLat == 7) {
								c.resultData.forEach(r => {
									data1list.push(r.actual)
								})
							}
							if (s.value == c.staLat) {
								arr.push({
									name: s.name,
									type: 'line',
									symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
									smooth: true,
									lineStyle: {
										normal: {
											width: 3,
											// color: '#518EF5', // 线条颜色
										},
									},
									itemStyle: {
										normal: {
											// color: '#518EF5', //拐点颜色
											// borderColor: '#fff600',//拐点边框颜色
											// borderWidth: 13//拐点边框大小
											label: {
												show: false, //开启显示
												color: '#fff',
												position: 'top', //在上方显示
												formatter: function(res) {
													if (res.value) {
														return res.value
													} else {
														return 0
													}
												},
											},
										},

									},
									symbolSize: 8, //设定实心点的大小
									data: data1list
								}, )
							}
						})
					}

					option = {
						backgroundColor: '',
						tooltip: {
							trigger: 'axis',
							// 自定义tooltip内容
							formatter: (item) => {
								let str =
									`<div style="text-align:center;font-weight:700;font-size:16px">${item[0].name}</div>`
								let index = 0 // 命名一个索引，用于匹配增减值、增减率
								let leftClass =
									`<span style="display: inline-block; width: ${this.$i18n.locale === 'zh-CN'?'100px':'150px'}; text-align: left;">`
								let rightClass =
									'<span style="display: inline-block; width: 80px; text-align: right;">'
								item.forEach(it => {
									str +=
										`${ leftClass + it.seriesName}:</span>${ rightClass + it.value}</span></br>`
									index = it.dataIndex
								})
								if (c.resultData[index].differenceValue !== undefined) {
									str = str +
										`${leftClass}${this.$i18n.locale === 'zh-CN'?'增减值':'Value of increase or decrease'}:</span>${rightClass + c.resultData[index].differenceValue}</span></br>`
									if (c.resultData[index].differenceRate !== undefined) {
										str = str +
											`${leftClass}${this.$i18n.locale === 'zh-CN'?'增减率':'Rate of increase and decrease'}:</span>${rightClass + c.resultData[index].differenceRate}</span>`
									}
								}
								return str
							}
						},
						legend: {
							show: true,
							textStyle: {
								color: '#fff',
								fontSize: 14,
								padding: [0, 8, 0, 8]
							}
						},
						grid: {
							top: '18%',
							left: '14%',
							right: '5%',
							bottom: '14%',
						},
						xAxis: [{
							type: 'category',

							axisLabel: {
								textStyle: {
									color: '#FFFFFF',
									fontSize: 12,
								},
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: '#233653',
								},
							},
							axisTick: {
								show: false,
							},
							data: xLabel,
						}, ],
						yAxis: [{
							// name: c.targetUnit,
							nameTextStyle: {
								color: "#fff",
								fontSize: 12,
								padding: [0, 60, 0, 0]
							},
							type: 'value',
							splitLine: {
								show: true,
								lineStyle: {
									color: '#1160a0',
									type: 'dashed'
								},
							},
							axisLabel: {
								interval: 0, //标签设置为全部显示
								formatter: function(params) {
									let num = ''
									let unit = '';
									var k = 10000,
										sizes = ['', '万', '亿', '万亿'],
										i;
									if (params < 0) {
										params = Math.abs(params)
										if (params < k) {
											params = params;
										} else {
											i = Math.floor(Math.log(params) / Math.log(k));
											params = ((params / Math.pow(k, i))).toFixed(0);
											unit = sizes[i];
										}
										num = (0 - params) + unit;
									} else {
										if (params < k) {
											params = params;
										} else {
											i = Math.floor(Math.log(params) / Math.log(k));
											params = ((params / Math.pow(k, i))).toFixed(0);
											unit = sizes[i];
										}
										num = params + unit;
									}
									return num

								},
								textStyle: {
									color: '#fff',
									fontSize: 14
								}
							},
							axisTick: {
								show: false,
							},
							triggerEvent: true

						}, ],
						series: arr
					}

				} else if (c.type == 3 || c.type == 5 || c.type == 7 || c.type == 8) {
					let arr = []
					c.resultData.forEach(e => {
						if (c.type == 3) {
							arr.push({
								name: e.customer,
								value: e.actual
							})
						} else if (c.type == 5) {
							arr.push({
								name: e.product,
								value: e.actual
							})
						} else if (c.type == 7) {
							arr.push({
								name: e.subjectName,
								value: e.actual
							})
						} else if (c.type == 8) {
							arr.push({
								name: e.enterpriseCode,
								value: e.actual
							})
						}

					})
					option = {
						tooltip: {
							show: true,
						},
						legend: {
							orient: 'vertical',
							right: 'right',
							textStyle: {
								color: "#fff",
								width: 80
							},
							formatter: (name) => {
								if (!name) return ''
								if (name.length > 10) {
									name = name.slice(0, 10) + '...'
								}
								return name
							}
						},
						series: [{
							type: 'pie',
							radius: '80%',
							center: ['30%', '50%'],
							label: {
								show: false
							},
							data: arr,
						}]
					};
				}
				option && otherChart.setOption(option)
				// const echartAll = document.getElementsByClassName('otherFull')
				// window.onresize = function() {
				// 	for (let i = 0; i < echartAll.length; i++) {
				// 		var myChart = echarts.init(echartAll[i])
				// 		myChart.resize()
				// 	}
				// }



			},
			searchParentCodes(data, code, result = []) {
				data.forEach((item) => {
					if (item.code === code) {
						return;
					}
					if (Array.isArray(item.list)) {
						item.list.forEach((child) => {
							if (child.code === code) {
								result.push(item.code);
								this.searchParentCodes(data, item.code, result);
							} else {
								this.searchParentCodes([child], code, result);
							}
						});
					}
				});
				return result;
			},

			//其他
			dataEcharts(c, cx) {
				let otherChart = echarts.getInstanceByDom(document.getElementById(
					`pieChart${cx}`)); //有的话就获取已有echarts实例的DOM节点。
				if (otherChart == null) { // 如果不存在，就进行初始化。
					otherChart = echarts.init(document.getElementById(`pieChart${cx}`));
				}
				let option = {}
				let xLabel = []
				if (c.type == 1 || c.type == 2 || c.type == 4 || c.type == 6 || c.type == 9 || c.type == 10 || c.type ==
					11 || c.type == 12 || c.type == 13 || c.type == 14 || c.type == 15 || c.type == 16 || c.type == 17) {
					let arr = []
					
					c.resultData.forEach(r => {
						if(c.type==6){
							xLabel.push(r.year+'.'+r.month)
						}else{
							xLabel.push(r.year)
						}
					})
					if (c.staLat.split(',').length > 1) {
						this.tjwdList.forEach(s => {
							c.staLat.split(',').forEach(t => {
								if (s.value == t) {
									let datalist = []
									if (t == 1) {
										c.resultData.forEach(r => {
											datalist.push(r.actual)
										})
									} else if (t == 2) {
										c.resultData.forEach(r => {
											datalist.push(r.budget)
										})
									} else if (t == 3) {
										c.resultData.forEach(r => {
											datalist.push(r.actual)
										})
									} else if (t == 4) {
										c.resultData.forEach(r => {
											datalist.push(r.budget)
										})
									} else if (t == 5) {
										c.resultData.forEach(r => {
											datalist.push(r.actual)
										})
									} else if (t == 6) {
										c.resultData.forEach(r => {
											datalist.push(r.actual)
										})
									} else if (t == 7) {
										c.resultData.forEach(r => {
											datalist.push(r.actual)
										})
									}
									if (t == 1 || t == 3) {
										arr.push({
											name: s.name,
											type: 'bar',
											symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
											smooth: true,
											lineStyle: {
												normal: {
													width: 3,
												},
											},
											itemStyle: {
												normal: {
													label: {
														show: false, //开启显示
														color: '#fff',
														position: 'top', //在上方显示
														formatter: function(res) {
															if (res.value) {
																return res.value
															} else {
																return 0
															}
														},
													},
												},

											},
											symbolSize: 8, //设定实心点的大小
											data: datalist

										}, )
									} else {
										arr.push({
											name: s.name,
											type: 'line',
											symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
											smooth: true,
											lineStyle: {
												normal: {
													width: 3,
												},
											},
											itemStyle: {
												normal: {
													label: {
														show: false, //开启显示
														color: '#fff',
														position: 'top', //在上方显示
														formatter: function(res) {
															if (res.value) {
																return res.value
															} else {
																return 0
															}
														},
													},
												},

											},
											symbolSize: 8, //设定实心点的大小
											data: datalist

										}, )
									}

								}
							})
						})
					} else {
						this.tjwdList.forEach(s => {
							let data1list = []
							if (c.staLat == 1) {
								c.resultData.forEach(r => {
									data1list.push(r.actual)
								})
							} else if (c.staLat == 2) {
								c.resultData.forEach(r => {
									data1list.push(r.budget)
								})
							} else if (c.staLat == 3) {
								c.resultData.forEach(r => {
									data1list.push(r.actual)
								})
							} else if (c.staLat == 4) {
								c.resultData.forEach(r => {
									data1list.push(r.budget)
								})
							} else if (c.staLat == 5) {
								c.resultData.forEach(r => {
									data1list.push(r.actual)
								})
							} else if (c.staLat == 6) {
								c.resultData.forEach(r => {
									data1list.push(r.actual)
								})
							} else if (c.staLat == 7) {
								c.resultData.forEach(r => {
									data1list.push(r.actual)
								})
							}
							if (s.value == c.staLat) {
								arr.push({
									name: s.name,
									type: 'line',
									symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
									smooth: true,
									lineStyle: {
										normal: {
											width: 3,
											// color: '#518EF5', // 线条颜色
										},
									},
									itemStyle: {
										normal: {
											// color: '#518EF5', //拐点颜色
											// borderColor: '#fff600',//拐点边框颜色
											// borderWidth: 13//拐点边框大小
											label: {
												show: false, //开启显示
												color: '#fff',
												position: 'top', //在上方显示
												formatter: function(res) {
													if (res.value) {
														return res.value
													} else {
														return 0
													}
												},
											},
										},

									},
									symbolSize: 8, //设定实心点的大小
									data: data1list
								}, )
							}
						})
					}

					option = {
						backgroundColor: '',
						tooltip: {
							trigger: 'axis',
							// 自定义tooltip内容
							formatter: (item) => {
								let str =
									`<div style="text-align:center;font-weight:700;font-size:16px">${item[0].name}</div>`
								let index = 0 // 命名一个索引，用于匹配增减值、增减率
								let leftClass =
									`<span style="display: inline-block; width: ${this.$i18n.locale === 'zh-CN'?'100px':'150px'}; text-align: left;">`
								let rightClass =
									'<span style="display: inline-block; width: 80px; text-align: right;">'
								item.forEach(it => {
									str +=
										`${ leftClass + it.seriesName}:</span>${ rightClass + it.value}</span></br>`
									index = it.dataIndex
								})
								if (c.resultData[index].differenceValue !== undefined) {
									str = str +
										`${leftClass}${this.$i18n.locale === 'zh-CN'?'增减值':'Value of increase or decrease'}:</span>${rightClass + c.resultData[index].differenceValue}</span></br>`
									if (c.resultData[index].differenceRate !== undefined) {
										str = str +
											`${leftClass}${this.$i18n.locale === 'zh-CN'?'增减率':'Rate of increase and decrease'}:</span>${rightClass + c.resultData[index].differenceRate}</span>`
									}
								}
								return str
							}
						},
						legend: {
							show: true,
							textStyle: {
								color: '#fff',
								fontSize: 14,
								padding: [0, 8, 0, 8]
							}
						},
						grid: {
							top: '18%',
							left: '14%',
							right: '5%',
							bottom: '14%',
						},
						xAxis: [{
							type: 'category',

							axisLabel: {
								textStyle: {
									color: '#FFFFFF',
									fontSize: 12,
								},
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: '#233653',
								},
							},
							axisTick: {
								show: false,
							},
							data: xLabel,
						}, ],
						yAxis: [{
							// name: c.targetUnit,
							nameTextStyle: {
								color: "#fff",
								fontSize: 12,
								padding: [0, 60, 0, 0]
							},
							type: 'value',
							splitLine: {
								show: true,
								lineStyle: {
									color: '#1160a0',
									type: 'dashed'
								},
							},
							axisLabel: {
								interval: 0, //标签设置为全部显示
								formatter: function(params) {
									let num = ''
									let unit = '';
									var k = 10000,
										sizes = ['', '万', '亿', '万亿'],
										i;
									if (params < 0) {
										params = Math.abs(params)
										if (params < k) {
											params = params;
										} else {
											i = Math.floor(Math.log(params) / Math.log(k));
											params = ((params / Math.pow(k, i))).toFixed(0);
											unit = sizes[i];
										}
										num = (0 - params) + unit;
									} else {
										if (params < k) {
											params = params;
										} else {
											i = Math.floor(Math.log(params) / Math.log(k));
											params = ((params / Math.pow(k, i))).toFixed(0);
											unit = sizes[i];
										}
										num = params + unit;
									}
									return num

								},
								textStyle: {
									color: '#fff',
									fontSize: 14
								}
							},
							axisTick: {
								show: false,
							},
							triggerEvent: true

						}, ],
						series: arr
					}

				} else if (c.type == 3 || c.type == 5 || c.type == 7 || c.type == 8) {
					let num = 100 / Math.ceil(this.dataList.length / 3) <= 50 ? 48 : 100 / Math.ceil(this.dataList.length /
						3)
					let arr = []
					c.resultData.forEach(e => {
						if (c.type == 3) {
							arr.push({
								name: e.customer,
								value: e.actual
							})
						} else if (c.type == 5) {
							arr.push({
								name: e.product,
								value: e.actual
							})
						} else if (c.type == 7) {
							arr.push({
								name: e.subjectName,
								value: e.actual
							})
						} else if (c.type == 8) {
							arr.push({
								name: e.enterpriseCode,
								value: e.actual
							})
						}

					})
					let series = []
					let legend = {}
					if (num > 50) {
						legend = {
							textStyle: {
								color: "#fff",
							}
						}
						series = [{
							top: 0,
							type: 'pie',
							radius: '50%',
							center: ['50%', '50%'],
							label: {
								show: false
							},
							data: arr,
						}]
					} else {
						legend = {
							orient: 'vertical',
							right: 'right',
							textStyle: {
								color: "#fff",
							}
						}
						series = [{
							type: 'pie',
							radius: '80%',
							center: ['30%', '50%'],
							label: {
								show: false
							},
							data: arr,
						}]
					}
					option = {
						tooltip: {
							show: true,
						},
						legend: legend,
						series: series
					};
				}
				option && otherChart.setOption(option)
				const echartAll = document.getElementsByClassName('otherFull')
				window.onresize = function() {
					for (let i = 0; i < echartAll.length; i++) {
						var myChart = echarts.init(echartAll[i])
						myChart.resize()
					}
				}
			},
			//更多企业
			handleMore(val) {
				this.$refs.echartsDialog.add(val)
			},

		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'YouSheBiaoTiHei';
		src: url(~@/assets/fonts/YouSheBiaoTiHei-2.ttf);
	}

	/deep/::-webkit-scrollbar {
		width: 0 !important;
	}

	.full {
		margin-top: 40px;
		height: calc(100% - 72px);
	}

	.full2 {
		margin-top: 10px;
		height: calc(100% - 42px);
	}

	.full3 {
		margin-top: 40px;
		height: calc(100% - 72px);
	}



	.screen-body {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: calc(100% - 45px);
		box-sizing: border-box;
		padding: 0 20px;
		position: relative;

		.col-top {
			height: 38%;
			background-color: #091d3d;
			border: 1px solid #10408c;

			.top-header {
				width: 100%;
				height: 42px;
				display: flex;
				justify-content: space-between;
				background: url('~@/assets/img/title-big-bg.png') center / 100% 100% no-repeat;

				.title {
					font-size: 20px;
					font-family: Alimama ShuHeiTi;
					font-weight: bold;
					font-style: italic;
					color: #cfdfec;
					margin-left: 2%;
				}

				.right {
					height: 24px;
					color: #FFFFFF;
					display: flex;
					margin: 3px 10px;

					div {
						padding: 0 10px;
						margin-left: 5px;
						box-sizing: border-box;
						font-size: 12px;
						line-height: 24px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
						// background-color: #0F3662;
						// background: linear-gradient(0deg, rgba(3,0,0), rgba(255,255,255));
						// border: 1px solid #4980BD;
						background: url('~@/assets/img/tab-bg1.png') center / 100% 100% no-repeat;
					}

					div:hover {
						background: url('~@/assets/img/tab-bg2-active.png') center / 100% 100% no-repeat;
					}
				}
			}
		}

		.top-content {
			display: flex;
			height: calc(100% - 42px);
			justify-content: space-between;
			background-color: #091d3d;
			border: 1px solid #10408c;

			.cent-echarts {
				position: relative;
				width: 33%;
				padding: 0 5px;
				box-sizing: border-box;


				// background: url('~@/assets/img/cent-bg.png') center / 100% 100% no-repeat;
				// .echarts-top {
				// 	width: 100%;
				// 	display: flex;
				// 	justify-content: space-between;
				// 	align-items: center;
				// }
				.echarts-title {
					font-size: 20px;
					font-family: Alimama ShuHeiTi;
					font-weight: bold;
					font-style: italic;
					color: #cfdfec;
					text-align: center;
				}

				.search {
					z-index: 999;
					position: absolute;
					right: 10px;
					color: #FFFFFF;
				}

				.titleYear {
					width: 100%;
					height: 40px;
					margin-left: 20px;
					background: url('~@/assets/img/month-bg.png') center no-repeat;
				}

				.titleQuarter {
					width: 100%;
					height: 40px;
					margin-left: 20px;
					background: url('~@/assets/img/tongbi.png') center no-repeat;
				}

				.titleMonth {
					width: 100%;
					height: 40px;
					margin-left: 20px;
					background: url('~@/assets/img/zhanbi.png') center no-repeat;
				}
			}

		}


		.screen-body-col {
			width: 100%;
		}

		.col-footer {
			height: 61%;
			display: flex;
			overflow-y: auto;
			flex-wrap: wrap;

			.footer-echarts {
				width: 32.5%;
				margin-right: 1%;
				position: relative;
				background-color: #091d3d;
				border: 1px solid #10408c;
				margin-bottom: 10px;
				.search {
					z-index: 999;
					position: absolute;
					right: 10px;
					color: #FFFFFF;
				}
			}

			.lastLine {
				margin-right: 0 !important;
			}
		}


	}

	.title-icon {
		width: 42px;
		height: 42px;
		position: absolute;
		right: 0;
		top: 0;
		cursor: pointer;
		background: url('~@/assets/img/titlle-icon.png') center / 100% 100% no-repeat;

		.more {
			top: 40px;
			left: -40px;
			width: 81px;
			height: 44px;
			background: #1E75B9;
			opacity: 0.61;
			border-radius: 5px;
			display: none;
		}

		.moreActive {
			font-size: 14px;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #fff;
			text-align: center;
			position: absolute;
			top: 40px;
			padding: 10px;
			box-sizing: border-box;
			left: -40px;
			width: 81px;
			height: 44px;
			background: rgba(29, 112, 178, 0.42);
			// opacity: 0.61;
			border-radius: 5px;

			span:hover {
				color: aqua;
			}
		}
	}


	.breadcrumb {
		width: 100%;
		height: 45px;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 30px;
		padding: 0 20px;
		box-sizing: border-box;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;

		// border: 1px solid #fff;
		.left {
			height: 30px;
			display: flex;
			align-items: center;

			.crumb-item {
				height: 22px;
				line-height: 22px;
				padding: 0 20px;
				box-sizing: border-box;
				font-size: 12px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ADC9E9;
				margin-left: 5px;
				transform: skew(-25deg);
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb.png') center / 100% 100% no-repeat;

				span {
					display: inline-block;
					transform: skew(25deg);
				}
			}

			.crumb-item:hover {
				height: 22px;
				line-height: 22px;
				padding: 0 20px;
				box-sizing: border-box;
				font-size: 12px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				margin-left: 5px;
				color: #FFFFFF;
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb-active.png') center / 100% 100% no-repeat;
			}

			.crumb-item-active {
				height: 22px;
				line-height: 22px;
				padding: 0 20px;
				box-sizing: border-box;
				font-size: 12px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				margin-left: 5px;
				transform: skew(-25deg);
				color: #FFFFFF;
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb-active.png') center / 100% 100% no-repeat;

				span {
					display: inline-block;
					transform: skew(25deg);
				}
			}
		}

	}

	/deep/ .el-input__inner {
		color: #fff;
		background-color: transparent !important;
		border-color: #80ffff;
		border: 1px solid #0F3662;
		height: 30px;
		padding: 0;
		text-align: center;
	}

	/deep/ .el-range-editor {
		color: #fff;
	}

	/deep/.el-range-separator {
		color: #fff;
	}

	/deep/.el-range-input {
		color: #fff !important;
		background-color: transparent !important;
	}

	/deep/.el-range-editor .el-range__icon {
		display: none;

	}

	/deep/.el-input__icon {
		line-height: 30px;
	}

	.el-range__icon {
		display: none;

	}

	.cascader {

		//下拉框
		/deep/.el-select-dropdown {
			border: none !important;
			background-color: rgba(1, 28, 82, 0.8) !important;
		}

		//输入框
		/deep/ .el-input {
			height: 35px !important;
		}

		/deep/ .el-input__inner {
			height: 35px !important;
			color: #eee !important;
			border-color: #0F3662 !important;
			background-color: rgba(1, 28, 82, 0.8) !important;
		}

		//聚焦时的样式
		.el-select .el-input.is-focus .el-input__inner {
			border-color: #0B61AA !important;
			background-color: rgba(1, 28, 82, 0.8) !important;
			color: #00D3E9 !important;
		}

		//下拉框选中
		.el-select-dropdown__item {
			color: #eee !important;
		}

		//鼠标经过下拉框
		.el-select-dropdown__item.hover,
		.el-select-dropdown__item:hover {
			color: #00D3E9 !important;
			background-color: #0F3360 !important;
		}
	}
</style>
<style>
	.cascader .el-cascader-panel {
		background-color: #0F3360;
		border: none !important;
	}

	.cascader .el-cascader-menu {
		color: #fff !important;
		border: none !important;
	}

	.cascader .el-scrollbar__wrap {
		overflow: hidden
	}

	.el-popper[x-placement^="bottom"] {
		border: 1px solid #0B61AA;
	}

	.cascader .el-cascader-menu .el-cascader-node:hover {
		background-color: #0B61AA;
	}
</style>
