<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" v-model="keyword"
						placeholder="请输入项目名称、文章关键词，多关键词用空格隔开，如：房建 地基"></el-input>

				</div>
			</div>
			<div class="content_item">
				<div class="label">招采单位</div>
				<div class="content_right">
					<el-input  v-model="jskBidQueryDto.companyName" clearable
						class="land_ipt_470" placeholder="请输入招标采购单位名称"></el-input>

				</div>
			</div>
			<div class="content_item">
				<div class="label">招标代理</div>
				<div class="content_right">
					<el-input v-model="jskBidQueryDto.agency" clearable class="land_ipt_470"
						placeholder="请输入招标代理机构名称"></el-input>

				</div>
			</div>
			<div class="content_item">
				<div class="label">阶段类型</div>
				<div class="content_right">
					<div class="select-popper">
						<span :class="{ color_text: jskBidQueryDto.tenderStage.length }">
							招采环节阶段{{jskBidQueryDto.tenderStage.length? jskBidQueryDto.tenderStage.length + "项": ""}}
							<i class="el-icon-caret-bottom"></i>
						</span>
						<el-select v-model="jskBidQueryDto.tenderStage" class="select-multiple" multiple placeholder="请选择">
							<el-option v-for="(item, i) in tenderStageOptions" :key="i" :label="item.label":value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="select-popper">
						<span :class="{ color_text: jskBidQueryDto.tenderingManner.length }">
							招采交易类型{{jskBidQueryDto.tenderingManner.length? jskBidQueryDto.tenderingManner.length + "项" : ""}}
							<i class="el-icon-caret-bottom"></i>
						</span>
						<el-select v-model="jskBidQueryDto.tenderingManner" class="select-multiple" multiple placeholder="请选择">
							<el-option v-for="(item, i) in tenderingMannerOptions" :key="i" :label="item.label":value="item.value">
							</el-option>
						</el-select>
					</div>

				</div>
			</div>
			<div class="content_item">
				<div class="label">更多筛选</div>
				<div class="content_right">
					<div class="select-popper select-popper1">
						<span :class="{color_text: jskBidQueryDto.province.length ||jskBidQueryDto.city.length ||jskBidQueryDto.county.length,}">
							行政区划{{jskBidQueryDto.province.length ||jskBidQueryDto.city.length ||jskBidQueryDto.county.length?
							 jskBidQueryDto.province.length +jskBidQueryDto.city.length +jskBidQueryDto.county.length + "项": ""}}
							<i class="el-icon-caret-bottom"></i>
						</span>
						<el-cascader ref="address" class="cascader-region" v-model="addressType" :options="addressList":props="props" @change="domicileChange" collapse-tags clearable>
						</el-cascader>
					</div>
					<el-dropdown @command="punishDatehandleCommand" trigger="click"  placement="bottom-start"  class="el-dropdown-land" ref="punishDateShowPopper":hide-on-click="false">
						<span class="el-dropdown-link" :class="punishDateValue ? 'color_text' : ''">发布时间{{ punishDateValue ? " 1项" : ""}}
						        <i class="el-icon-caret-bottom"></i>
						</span>
						<div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item v-for="(item, i) in punishDateOptions" :class="punishDateValue && punishDateValue == item.value? 'color_text' : ''" :key="i" :command="item.value">
									<div @mouseenter="hidePoper">{{ item.label }}</div>
								</el-dropdown-item>
								<el-dropdown-item command="自定义" style="padding: 0; text-indent: 20px">
									<div @mouseenter="mouseenter">
										<span :class="punishDateValue == '自定义' ? 'color_text' : ''">
									        自定义<i class="el-icon-arrow-right"></i>
										</span>
										<el-date-picker v-if="punishDateShowPopper" @change="changepunishDate"class="land_date_picker" v-model="punishDate" ref="datePicker"
										        value-format="yyyy-MM-dd" type="daterange" range-separator="至"
												start-placeholder="开始日期" end-placeholder="结束日期">
										</el-date-picker>
									</div>
								</el-dropdown-item>
							</el-dropdown-menu>
						</div>
					</el-dropdown>
					<div class="select-popper ">
						<span :class="{ color_text: jskBidQueryDto.projectType.length }">
								项目类别{{jskBidQueryDto.projectType.length? jskBidQueryDto.projectType.length + "项": ""}}
								<i class="el-icon-caret-bottom"></i>
						</span>
						<el-select v-model="jskBidQueryDto.projectType" class="select-multiple" multiple placeholder="请选择">
							<el-option v-for="(item, i) in projectTypeOptions" :key="i" :label="item" :value="item">
							</el-option>
						</el-select>
					</div>
					<div class="select-popper">
						<span :class="{ color_text: jskBidQueryDto.subjectMatter.length }">
							招标采购分类{{jskBidQueryDto.subjectMatter.length? jskBidQueryDto.subjectMatter.length + "项": ""}}
							<i class="el-icon-caret-bottom"></i>
						</span>
						<el-select v-model="jskBidQueryDto.subjectMatter" class="select-multiple" multiple placeholder="请选择">
							<el-option v-for="(item, i) in subjectMatterOptions" :key="i" :label="item" :value="item">
							</el-option>
						</el-select>
					</div>
					<el-dropdown @command="bidMoneyhandleCommand"  placement="bottom-start"  class="el-dropdown-land" trigger="click" ref="bidMoneyShowPopper":hide-on-click="false">
						<span class="el-dropdown-link" :class=" jskBidQueryDto.startBidMoney || jskBidQueryDto.endBidMoney? 'color_text' : ''">
							预算金额{{jskBidQueryDto.startBidMoney || jskBidQueryDto.endBidMoney? " 1项": ""}}
							<i class="el-icon-caret-bottom"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-for="(item, i) in bidMoneyOptions" :class="jskBidQueryDto.startBidMoney == item.value[0] &&jskBidQueryDto.endBidMoney == item.value[1] &&
					            !startBidMoney &&!endBidMoney? 'color_text': ''" :key="i" :command="item.value">
								{{ item.label }}
							</el-dropdown-item>
							<el-dropdown-item command="" style="padding: 0; text-indent: 20px">
								<div @mouseenter="bidMoneyShowPopper = true" @mouseleave="bidMoneyShowPopper = false">
									<span :class="(startBidMoney || endBidMoney) &&jskBidQueryDto.startBidMoney == startBidMoney &&jskBidQueryDto.endBidMoney == endBidMoney? 'color_text' : ''">
										自定义<i class="el-icon-arrow-right"></i>
									</span>
									<div class="jabph_popper_box" style="position: absolute" v-if="bidMoneyShowPopper">
										<div class="jabph_popper_wrap">
											从
											<el-input class="jabph_popper_input" v-limit-num clearable v-model="startBidMoney"></el-input>
											万
										</div>
										<div class="jabph_popper_wrap">
											到
											<el-input class="jabph_popper_input" v-limit-num clearable v-model="endBidMoney"></el-input>
											万
										</div>
										<div style="">
											<el-button size="mini" @click="bidMoneyCancel">取消</el-button>
											<el-button type="primary" size="mini" @click="bidMoneyPopperConfirm">确定
											</el-button>
										</div>
									</div>
								</div>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<div class="select-popper">
						<span :class="{ color_text: jskBidQueryDto.source.length }">
						    来源网站{{jskBidQueryDto.source.length? jskBidQueryDto.source.length + "项": ""}}
						    <i class="el-icon-caret-bottom"></i>
					    </span>
						<Select ref="sourceNameSelect" @getSelectValue="getSourceName" />
					</div>
					<div class="select-popper">
						<span :class="{ color_text: jskBidQueryDto.phonePoint.length }">
							有无联系电话{{jskBidQueryDto.phonePoint.length? jskBidQueryDto.phonePoint.length + "项": ""}}
							<i class="el-icon-caret-bottom"></i>
						</span>
						<el-select v-model="jskBidQueryDto.phonePoint" class="select-multiple" multiple placeholder="请选择" @change="phonePointBtn">
							<el-option v-for="(item, i) in phonePointType" :key="i" :label="item.label":value="item.value">
							</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="tableData.length>0&& !isSkeleton">
				<li class="bottomlist-list" v-for="item in tableData">
					<p class="list-titel">
						 <router-link :to="'/radar/Tender/details/'+ item.id" tag="a" class="list-titel-a" v-html="item.projectName"></router-link>
					</p>

					<div class="content-label" v-if="item.tenderStage ||item.domicile ||item.tenderingManner ||item.projectType">
						<span class="list-label " v-if="item.tenderStage&&item.tenderStage!='其他'&&item.tenderStage!='空白'">
						 {{item.tenderStage}}
						</span>
						  <span class="list-label list-label-zb" v-if="item.domicile">
						    {{item.domicile}}
						  </span>
						  <span class="list-label list-label-zb" v-if="item.tenderingManner&&item.tenderingManner!='其他'&&item.tenderingManner!='空白'&&item.tenderingManner!='未知'">
						     {{ item.tenderingManner}}
						  </span>
						  <span class="list-label list-label-lx" v-if="item.projectType&&item.projectType!='其他'&&item.projectType!='空白'">
						     {{item.projectType}}
						  </span>
					</div>

					<div  class="list-content list-content1"  v-if="item.companyName||item.agency">
						<p class="list-content-text" v-if="item.companyName">
							<span>招采单位：</span>
							<span v-if="item.jskEid">
								 <span class="blue"   @click="getUipIdByCid(item.jskEid)" v-html="item.companyName"></span>
							</span>
							<span v-else  v-html="item.companyName">
							</span>
						</p>
						<p class="list-content-text" v-if="item.agency">
							<span>代理单位：</span>
							<span v-if="item.agencyId">
								 <span class="blue"   @click="getUipIdByCid(item.agencyId)" v-html="item.agency"></span>
							</span>
							<span v-else  v-html="item.agency">
							</span>
						</p>

					</div>
					<div  class="list-content" v-if="item.bidMoney||item.contactTel || item.agencyContactTel">
						<p class="list-content-text" v-if="item.bidMoney">
							<span>预算金额：</span>
							<span>{{item.bidMoney||'--'}}万元</span>
						</p>
						<p class="list-content-text" v-if="item.contactTel || item.agencyContactTel">
							<span>联系方式：</span>
							<span >
								<template v-if="item.contactTel">
									招采单位 {{ item.contact }} {{ item.contactTel}}{{item.contactTel && item.agencyContactTel ? ";" : ""}}
								</template>
								<template v-if="item.agencyContactTel">
									代理单位 {{ item.agencyContact }} {{ item.agencyContactTel }}
								</template>
							</span>
						</p>
					</div>

					<div  class="list-content" v-if="item.punishDate||item.overTime||item.source">
						<p class="list-content-text" v-if="item.punishDate">
							<span>发布时间：</span>
							<span >{{item.punishDate||'--'}}</span>
						</p>
						<p class="list-content-text" v-if="item.overTime">
							<span>报名截止日期：</span>
							<span >{{item.overTime||'--'}}</span>
						</p>
						<p class="list-content-text" v-if="item.source">
							<span>来源网站：</span>
							<span >{{item.source||'--'}}</span>
						</p>
					</div>
				</li>
			</ul>
			<div class="pagination clearfix"  v-if="total>0&&pageFlag">
				  <el-pagination
				    background
				    :page-size="limit"
				    :current-page="page"
				    @current-change="handleCurrentChange"
				    layout="prev, pager, next"
				    :total="total>limit*500?501*limit:total">
				  </el-pagination>
			</div>
		</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 Select from "./Select.vue";
	import jsk_data from '../../../../../public/jsk.json';
	import {encodeStr} from "@/assets/js/common.js"
	import skeleton from '@/views/project/projectList/component/skeleton'
	import api from '@/api/radar/radar.js';
  import * as echarts from 'echarts';
	export default {
		name: 'Tender',
		components: {
			Select,skeleton
		},

		data() {
			return {
				//有无联系方式
				encodeStr,
				isSkeleton:true,
				phonePointType: [
				  {
						value: '',
						label: '不限'
					},
					{
						value: 'hasPhone',
						label: '有联系电话'
					},
					{
						value: 'hasContactTel',
						label: '有招标单位联系电话'
					},
					{
						value: 'hasAgencyTel',
						label: '有代理机构联系电话'
					},
					{
						value: 'noPhone',
						label: '无联系电话'
					}
				],
				phonePointList: [],
				punishDateOptions: [
				  {
						label: "不限",
						value: "",
					},
					{
						label: "今天",
						value: "今天",
					},
					{
						label: "近3日",
						value: "近3日",
					},
					{
						label: "近7日",
						value: "近7日",
					},
					{
						label: "近1个月",
						value: "近1个月",
					},
					{
						label: "近3个月",
						value: "近3个月",
					},
					{
						label: "近半年",
						value: "近半年",
					},
					{
						label: "近1年",
						value: "近1年",
					},
				],
				addressList: [],
				addressType: [],
				props: {
					multiple: true,
					expandTrigger: "hover",
					value: "id",
				},
				keyword: "",
				keywordNot: "",
				tenderType: "",
				tenderTypeOptions: [
				  {
						value: "不限",
						key: "",
						status: true,
					},
					{
						value: "招标采购信息",
						key: "招标采购信息",
						status: false,
					},
					{
						value: "中标、成交信息",
						key: "中标、成交信息",
						status: false,
					},
					{
						value: "参投信息",
						key: "参投信息",
						status: false,
					},
				],
				tenderStageOptions: [
				  {
						value: "招标公告",
						label: "招标公告",
					},
					{
						value: "招标计划",
						label: "招标计划",
					},
					{
						value: "补充公告",
						label: "补充公告",
					},
					{
						value: "终止公告",
						label: "终止公告",
					},
					{
						value: "废标公告",
						label: "废标公告",
					},
					{
						value: "流标公告",
						label: "流标公告",
					},
					{
						value: "重新招标",
						label: "重新招标",
					},
					{
						value: "更正公告",
						label: "更正公告",
					},
					{
						value: "资格预审公告",
						label: "资格预审公告",
					},
					{
						value: "澄清公告",
						label: "澄清公告",
					},
					{
						value: "答疑补遗公告",
						label: "答疑补遗公告",
					}
				],
				tenderStageOptions2: [
				  {
						value: "中标公示",
						label: "中标公示",
					},
					{
						value: "中标公告",
						label: "中标公告",
					},
					{
						value: "成交",
						label: "成交",
					},
					{
						value: "终止",
						label: "终止",
					},
					{
						value: "非标",
						label: "非标",
					},
					{
						value: "流标",
						label: "流标",
					},
					{
						value: "合同及验收",
						label: "合同及验收",
					},
				],
				tenderStageOptions3: [
				  {
						value: "开标",
						label: "开标",
					},
					{
						value: "参投记录",
						label: "参投记录",
					},
				],
				tenderingMannerOptions: [
				  {
						value: "询价",
						label: "询价",
					},
					{
						value: "比选",
						label: "比选",
					},
					{
						value: "邀请",
						label: "邀请",
					},
					{
						value: "竞争性谈判",
						label: "竞争性谈判",
					},
					{
						value: "竞争性磋商",
						label: "竞争性磋商",
					},
					{
						value: "单一来源",
						label: "单一来源",
					},
					{
						value: "直接发包",
						label: "直接发包",
					},
					{
						value: "竞价",
						label: "竞价",
					},
					{
						value: "公开招标",
						label: "公开招标",
					},
					{
						value: "其他",
						label: "其他",
					},
				],
				scopeOptions: [
				  {
						value: "contentInfo",
						label: "正文",
					},
					{
						value: "companyName",
						label: "企业名称",
					},
					{
						value: "projectName",
						label: "项目名称",
					},
				],
				selectedHeight: 64,
				projectTypeOptions: [],
				contactOptions: [
				  {
						value: "不限",
						label: "不限",
					},
					{
						value: "有招采单位联系人",
						label: "有招采单位联系人",
					},
					{
						value: "有中标单位联系人",
						label: "有中标单位联系人",
					},
					{
						value: "有招标代理机构联系人",
						label: "有招标代理机构联系人",
					},
				],
				subjectMatterOptions: [],
				jskBidQueryDto: {
					province: [],
					city: [],
					county: [],
					tenderStage: [],
					tenderingManner: [],
					queryScope: [],
					projectType: [],
					subjectMatter: [],
					source: [],
					phonePoint: [],
				},

				punishDate: "",
				punishDateShowPopper: false,
				punishDateValue: "",
				startBidMoney: "",
				endBidMoney: "",
				bidMoneyShowPopper: false,
				bidMoneyOptions: [
				  {
						value: "不限",
						label: "不限",
					},
					{
						value: [0, 100],
						label: "100万元以下",
					},
					{
						value: [100, 300],
						label: "100万-300万元",
					},
					{
						value: [300, 1000],
						label: "300万-1000万元",
					},
					{
						value: [1000, 5000],
						label: "1000万-5000万元",
					},
					{
						value: [5000, 20000],
						label: "5000万-2亿元",
					},
					{
						value: [20000, ""],
						label: "2亿元以上",
					},
				],
				fieldshow: false,
				fieldText: '默认排序',
				field: '', //查询结果排序方式
				fieldOptions: [
				  {
						key: "",
						value: "默认排序",
						status: true,
					},
					{
						key: "punishDate",
						value: "发布日期从晚到早",
						status: false,
					},
					{
						key: "projectAmount",
						value: "预算金额从大到小",
						status: false,
					},
					{
						key: "overTime",
						value: "报名截止日期从晚到早",
						status: false,
					},
				],
				domicile: [],
				conditionsArr: [],

				total: 0,
				page: 1,
				pageFlag: true,
				tableData:[],
				limit: 20,
        dialogEchartsVisible:false,
        echartsData:{},
        echartsDataState:false,
        sumMoney:0,
			};
		},
		computed: {
			checkjskBidQueryDto() {
				let arr = [];
				let flag = false;
				let data = {};
				let keyid, value, title;
				if (this.domicile.length > 0) {
					data = {
						title: "行政区划:",
						value: this.domicile.join(","),
					}
					arr.push(data)
				}
				if (this.keyword) {
					data = {
						title: "项目包含:",
						value: this.keyword,
					}
					arr.push(data)
					flag = true;
				}
				if (this.keywordNot) {
					data = {
						title: "项目排除:",
						value: this.keywordNot,
					}
					arr.push(data)
					flag = true;
				}
				if (this.punishDateValue == "自定义") {
					data = {
						title: "发布时间:",
						value: this.jskBidQueryDto.startPunishDate + "~" + this.jskBidQueryDto.endPunishDate,
					}
					arr.push(data)
				}
				if (this.punishDateValue && this.punishDateValue != "自定义") {
					data = {
						title: "发布时间:",
						value: this.punishDateValue,
					}
					arr.push(data)
				}
				for (var i in this.jskBidQueryDto) {
					if (this.jskBidQueryDto[i]) {
						keyid = i;
						value = this.jskBidQueryDto[i];
						if (
							Object.prototype.toString.call(this.jskBidQueryDto[i]) ===
							"[object Array]"
						) {
							if (this.jskBidQueryDto[i].length > 0) {
								flag = true;
								switch (i) {
									case 'tenderStage':
										title = "招采环节阶段:";
										break;
									case 'tenderingManner':
										title = "招采交易类型:";
										break;
									case 'projectType':
										title = "项目类别:";
										break;
									case 'subjectMatter':
										title = "招标采购分类:";
										break;
									case 'source':
										title = "来源网站:";
										break;
									case 'phonePoint':
										title = "有无联系方式:";
										break;
									default:
										title = "";
										break;
								}
							} else {
								title = ""
							}
						} else {
							title = ""
							flag = true;
						}
						if (title) {
							data = {
								keyid: keyid,
								value: value,
								title: title,
								key: value
							}
							arr.push(data)
						}
					}
				}
				this.conditionsArr = arr
				return flag;
			},
		},
		created() {
			this.searchDic();
			this.search();
		},
		mounted() {
			this.addressListfn();
		},
		methods: {
			searchDic(){
				api.searchDic().then(res=>{
						this.projectTypeOptions = res.projectType;
						this.subjectMatterOptions = res.subjectMatter
				}).catch(error=>{

				});

			},
			//有无联系方式
			phonePointBtn(e) {
				for (var i = 0; e.length > i; i++) {
					if (!e[i]) {
						this.jskBidQueryDto.phonePoint = []
					}
				}
			},
			refresh(value) {
				if (value) {
					this.$router.go(0)
				}
			},
			search(page, limit, exportFlag) {
				if (!page) {
					this.page = 1;
				}
				if (!limit) {
					this.limit = 20;
				}
				if (!page && !limit) {
					this.reloadPage();
				}
				var data = JSON.parse(JSON.stringify(this.jskBidQueryDto));
				data.province = data.province.join(",");
				data.city = data.city.join(",");
				data.county = data.county.join(",");
				data.tenderStage = data.tenderStage.join(",");
				data.tenderingManner = data.tenderingManner.join(",");
				data.queryScope = data.queryScope.join(",");
				data.projectType = data.projectType.join(",");
				data.subjectMatter = data.subjectMatter.join(",");
				data.source = data.source.join(",");
				data.phonePoint = data.phonePoint.join(",");

				let params = {
					page: {
						page: this.page,
						limit: this.limit,
						field: this.field,
					},
					jskBidQueryDto: data,
				};
				params.keyword = this.keyword;
				params.keywordNot = this.keywordNot;
				this.isSkeleton = true;
				api.jskBidPage(params).then(res=>{
					if (res.code==200) {
						this.tableData=res.data.list;
						this.total=res.data.total;
					}
				}).catch(error=>{

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

            });
          }else {
            this.echartsDataState=true;
          }
        }).catch(error => {

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

        });
			},

			selectedHeightfn() {
				if (this.selectedHeight == 64) {
					this.selectedHeight = 'auto'
				} else {
					this.selectedHeight = 64;
				}
			},
			reset() {
				Object.assign(this.$data, this.$options.data.call(this)); //重置data
				this.$refs.sourceNameSelect.selectValue = []
				this.addressListfn();
				this.searchDic();
				this.search();
			},
			handsequencingList(index) {
				this.fieldshow = false;
				this.field = this.fieldOptions[index].key;
				for (let i = 0; i < this.fieldOptions.length; i++) {
					this.fieldOptions[i].status = false;
				}
				this.fieldText = this.fieldOptions[index].value;
				this.fieldOptions[index].status = true;
				this.search();
			},
			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();
				}
			},
			handleSizeChange(limit) {
				this.limit = limit;
				this.search(this.page, limit);
			},
			addressListfn() {
				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) {
							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;
			},
			deleteDomicile() {
				this.$refs.address.handleClear();
			},
			domicileChange() {
				let arr = this.$refs.address.getCheckedNodes();
				let province = [],
					city = [],
					county = [];
				this.domicile = [];
				for (var i in arr) {
					if (arr[i].parent) {
						if (!arr[i].parent.checked) {
							arr[i].hasChildren && city.push(arr[i].value);
							arr[i].hasChildren && this.domicile.push(arr[i].label);
							!arr[i].hasChildren && county.push(arr[i].value);
							!arr[i].hasChildren && this.domicile.push(arr[i].label);
						}
					} else {
						province.push(arr[i].value);
						this.domicile.push(arr[i].label);
					}
				}
				var obj = JSON.parse(JSON.stringify(this.jskBidQueryDto));
				obj.province = province;
				obj.city = city;
				obj.county = county;
				this.jskBidQueryDto = obj;
			},
			bidMoneyhandleCommand(command) {
				if (command) {
					this.$refs.bidMoneyShowPopper.hide();
					var obj = JSON.parse(JSON.stringify(this.jskBidQueryDto));
					this.startBidMoney = "";
					this.endBidMoney = "";
					if (command == "不限") {
						obj.startBidMoney = "";
						obj.endBidMoney = "";
					} else {
						obj.startBidMoney = command[0];
						obj.endBidMoney = command[1];
					}
					this.jskBidQueryDto = obj;
				}
			},
			bidMoneyPopperConfirm() {
				if (
					this.startBidMoney &&
					this.endBidMoney &&
					!(Number(this.endBidMoney) > Number(this.startBidMoney))
				) {
					return this.$message.warning("最小值必须小于最大值,请重新输入！");
				}
				this.bidMoneyShowPopper = false;
				var obj = JSON.parse(JSON.stringify(this.jskBidQueryDto));
				obj.startBidMoney = this.startBidMoney;
				obj.endBidMoney = this.endBidMoney;
				this.jskBidQueryDto = obj;
				this.$refs.bidMoneyShowPopper.hide();
			},
			bidMoneyCancel() {
				this.bidMoneyShowPopper = false;
				this.$refs.bidMoneyShowPopper.hide();
			},
			punishDatehandleCommand(command) {
				var obj = JSON.parse(JSON.stringify(this.jskBidQueryDto));
				if (command && command != "自定义") {
					this.punishDateValue = command;
					this.$refs.punishDateShowPopper.hide();
					const datetime = new Date();
					var startTime, endTime, Year, Month, Day;
					Year = datetime.getFullYear();
					Month = datetime.getMonth() + 1;
					Day = datetime.getDate();
					switch (command) {
						case "今天":
							startTime = Year + "-" + Month + "-" + Day;
							endTime = Year + "-" + Month + "-" + Day;
							break;
						case "近3日":
							var newTime = datetime.getTime() - 3 * 24 * 60 * 60 * 1000;
							startTime =
								new Date(newTime).getFullYear() +
								"-" +
								(new Date(newTime).getMonth() + 1) +
								"-" +
								new Date(newTime).getDate();
							endTime = Year + "-" + Month + "-" + Day;
							break;
						case "近7日":
							var newTime = datetime.getTime() - 7 * 24 * 60 * 60 * 1000;
							startTime =
								new Date(newTime).getFullYear() +
								"-" +
								(new Date(newTime).getMonth() + 1) +
								"-" +
								new Date(newTime).getDate();
							endTime = Year + "-" + Month + "-" + Day;
							break;
						case "近1个月":
							if (Month > 1) {
								startTime = Year + "-" + (Month - 1) + "-1";
							} else {
								startTime = Year - 1 + "-" + (12 + Month - 1) + "-1";
							}
							endTime = Year + "-" + Month + "-" + Day;
							break;
						case "近3个月":
							if (Month > 3) {
								startTime = Year + "-" + (Month - 3) + "-1";
							} else {
								startTime = Year - 1 + "-" + (12 + Month - 3) + "-1";
							}
							endTime = Year + "-" + Month + "-" + Day;
							break;
						case "近半年":
							if (Month > 6) {
								startTime = Year + "-" + (Month - 6) + "-1";
							} else {
								startTime = Year - 1 + "-" + (12 + Month - 6) + "-1";
							}
							endTime = Year + "-" + Month + "-" + Day;
							break;
						case "近1年":
							startTime = Year - 1 + "-" + Month + "-" + Day;
							endTime = Year + "-" + Month + "-" + Day;
							break;
						case "近3年":
							startTime = Year - 3 + "-" + Month + "-" + Day;
							endTime = Year + "-" + Month + "-" + Day;
							break;
						case "自定义":
							if (!this.punishDate) {
								this.punishDateValue = "";
							}
							break;
					}
					if (startTime) {
						var start = startTime.split('-');
						startTime = start.map((item) => {
							if (item.length == 1) {
								return '0' + item
							} else {
								return item
							}
						})
						startTime = startTime.join('-')
					}
					if (endTime) {
						var end = endTime.split('-');
						endTime = end.map((item) => {
							if (item.length == 1) {
								return '0' + item
							} else {
								return item
							}
						})
						endTime = endTime.join('-')
					}
					obj.startPunishDate = startTime;
					obj.endPunishDate = endTime;
				} else if (command == "自定义") {
					this.$refs.datePicker.pickerVisible = true;
				} else {
					this.$refs.punishDateShowPopper.hide();
					this.punishDateValue = "";
					this.punishDate = "";
					obj.startPunishDate = "";
					obj.endPunishDate = "";
				}
				this.jskBidQueryDto = obj;
			},
			clearContractSignTime() {
				this.punishDate = "";
				this.punishDateValue = "";
				var obj = JSON.parse(JSON.stringify(this.jskBidQueryDto));
				obj.startPunishDate = "";
				obj.endPunishDate = "";
				this.jskBidQueryDto = obj;
			},
			changepunishDate() {
				if (this.punishDate) {
					this.punishDateValue = "自定义";
					var obj = JSON.parse(JSON.stringify(this.jskBidQueryDto));
					obj.startPunishDate = this.punishDate[0];
					obj.endPunishDate = this.punishDate[1];
					this.jskBidQueryDto = obj;
				}
			},
			hidePoper() {
				if (this.$refs.datePicker) {
					this.$refs.datePicker.pickerVisible = false;
				}
			},
			mouseenter() {
				this.punishDateShowPopper = true;
				if (this.punishDateValue == '自定义') {
					this.$nextTick(() => {
						//this.$refs.datePicker.focus()
						this.$refs.datePicker.pickerVisible = true;
					});
				}
			},

			tenderTypeClick(index) {
				this.tenderTypeOptions.map((item) => {
					item.status = false;
				});

				if (index == 2) {
					this.tenderStageOptions = this.tenderStageOptions2;
				}
				if (index == 3) {
					this.tenderStageOptions = this.tenderStageOptions3;
				}
				this.tenderTypeOptions[index].status = true;
			},

			getSourceName(arr) {
				for (var a in arr) {
					if (arr[a] == "不限") {
						this.jskBidQueryDto.source = [];
						this.$refs.sourceNameSelect.selectValue = [];
						this.$refs.sourceNameSelect.$refs.select.blur();
					} else {
						this.jskBidQueryDto.source = arr;
					}
				}
			},
			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=>{

				 });
			},

      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: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: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: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: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" 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;

				}
				.land_ipt_470 {
					width: 640px;
				}
			}

			.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;
			}

			.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;
		}

	}

	.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: 12px;
				margin-bottom:4px;

				.list-label {
					background: #F3F3FF;
					color: #8491E8;
					border-radius: 1px 1px 1px 1px;
                    margin-right: 8px;
					padding: 3px 7px;
					font-size: 12px;

				}
				.list-label-zb{
					font-weight: 400;
					color: #5A88F9;
					background: #E7EDFC;
				}
				.list-label-lx{
					font-weight: 400;
					color: #41A1FD;
					background: #E4F3FD;
				}
			}


			.list-content {
				margin-top:8px;
				display: flex;
				justify-content: start;
				align-items: center;
				.list-content-text {
					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;

					}

				}


			}
			.list-content1{
				margin-top: 12px;
			}


		}

		.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>
<style lang="scss" scoped>
	#tender_wrap {
		padding: 0 16px;
		font-size: 14px;

		.tender_content_wrap {
			display: flex;

			.tender_content_wrap_label {
				color: #666666;
				margin-right: 4px;
			}

			.tender_content_wrap_item {
				display: inline-block;
				height: 28px;
				line-height: 28px;
				padding: 0 12px;
				margin-right: 24px;
				color: #333333;
				cursor: pointer;

				&:hover {
					background: #e5f2ff;
					color: #0081ff;
					border-radius: 2px 2px 2px 2px;
				}
			}

			.tender_content_wrap_item_active {
				background: #0081ff;
				color: #ffffff;
				border-radius: 2px 2px 2px 2px;
			}
		}

		.tender_content_wrap1 {
			margin-bottom: -2.5px;
		}

		.data_list {
			width: 1200px;
			margin: 0 auto;
			margin-left: -16px;
			padding: 0 16px;
			box-sizing: border-box;

			.data_list_head {
				height: 50px;
				line-height: 50px;
				color: #666666;

				.data_list_count {
					color: #ff2a00;
					font-weight: bold;
				}
			}

			.data_list_item {
				border-top: 1px solid #efefef;
				padding: 24px 16px;
				padding-left: 16px;
				margin-left: -16px;
				width: 1200px;

				&:hover {
					background: #f5faff;
				}

				.data_list_h1 {
					width: 1168px;
					font-size: 18px;
					font-weight: bold;
					color: #333333;
					line-height: 24px;
					margin-bottom: 10px;
					word-break: break-all;
					display: inline-block;
				}

				.data_list_h1_1 {
					cursor: pointer;
				}

				.label_box {
					padding-bottom: 6px;
					display: flex;

					.label_span {
						padding: 0 8px;
						display: inline-block;
						height: 22px;
						line-height: 22px;
						border-radius: 2px 2px 2px 2px;
						margin-right: 8px;
						font-size: 12px;
					}

					.label_span1 {
						background: #e4f3fd;
						color: #41A1FD;
					}

					.label_span2 {
						background: #f3f3ff;
						color: #8491e8;
					}

					.label_span3 {
						background: #e8f7f0;
						color: #38c8bf;
					}
				}

				.label_wrap {
					font-size: 14px;
					margin-top: 10px;
					line-height: 18px;
					display: flex;

					.label_item {
						color: #999999;
					}

					.company {
						color: #0081ff;
						cursor: pointer;
						margin-right: 20px;
					}

					.label_con {
						color: #333333;
						margin-right: 20px;
					}

					.label_con1 {
						width: 1095px;
						margin: 0;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: inline-block;
						overflow: hidden;
					}

					.label_con2 {
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						max-width: 560px;
						display: inline-block;
					}
				}
			}
		}

		.content_li {
			padding: 16px 0;
			display: flex;
			align-items: center;
			position: relative;

			.content_item {
				.include-keywords {
					display: flex;
					align-items: center;
					position: relative;

					.lefttltel {
						display: inline-block;
						background: #f5f5f5;
						color: #333;
						border: 1px solid #efefef;
						border-right: none;
						opacity: 1;
						width: 71px;
						height: 40px;
						text-align: center;
						line-height: 40px;
					}

					.el-input {
						line-height: 40px;
						border-radius: 0;

						.el-input__inner {
							width: 100%;
							height: 40px;
							line-height: 40px;
							border-radius: 0;
						}
					}

					.commonly-input {
						.el-input__inner {
							padding-right: 100px;
						}
					}

					.commonly {
						position: absolute;
						top: 10px;
						right: 16px;
						font-size: 14px;
						font-weight: 400;
						color: #0081ff;
						cursor: pointer;
					}
				}

			}

		}
	}
</style>
