<template>
  <div class="app-container home">
    <!--经理视角-->
    <div class="manage" v-if="user === 1">
      <el-row>
        <el-col :span="16">
          <div class="task-wrap">
            <div class="item">
              <router-link to="/project/overview" tag="a">
                <img class="icon-img" src="@/assets/images/index/icon1.png"/>
                <p class="text">项目管理</p>
              </router-link>
            </div>
            <div class="item">
              <router-link to="/custom/overview" tag="a">
                <img class="icon-img" src="@/assets/images/index/icon2.png"/>
                <p class="text">客户管理</p>
              </router-link>
            </div>
            <div class="item">
              <router-link to="/macro/nationalEconomies" tag="a">
                <img class="icon-img" src="@/assets/images/index/icon3.png"/>
                <p class="text">宏观经济</p>
              </router-link>
            </div>
            <div class="item">
              <router-link to="/enterpriseData?type=2" tag="a">
                <img class="icon-img" src="@/assets/images/index/icon4.png"/>
                <p class="text">集团户</p>
              </router-link>
            </div>
            <div class="item">
              <router-link to="/enterpriseData" tag="a">
                <img class="icon-img" src="@/assets/images/index/icon5.png"/>
                <p class="text">查城投平台</p>
              </router-link>
            </div>
            <div class="item">
              <router-link to="/radar" tag="a">
                <img class="icon-img" src="@/assets/images/index/icon6.png"/>
                <p class="text">商机雷达</p>
              </router-link>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="user" @click="handleChange">
            <h3>刘毅<span>总经理</span></h3>
            <p>您好，祝您工作顺利每一天</p>
          </div>
        </el-col>
      </el-row>
      <div class="tips">注：数据来源大司空建筑大数据平台，统计范围为全国公开的施工内土地交易项目，未公开的不含在内</div>
      <div class="content content_wap1">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">集团中标统计</span>
          </div>
        </div>
        <el-row>
          <el-col :span="14">
            <div id="zbtj-echarts" style="height: 300px;"></div>
          </el-col>
          <el-col :span="10">
            <div class="search">
              <el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
                <el-form-item prop="address">
                  <el-select v-model="queryParams.address" placeholder="项目地区" style="width: 150px;">
                    <el-option v-for="(item,index) in addressList" :key="index" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="type">
                  <el-select v-model="queryParams.type" multiple collapse-tags clearable placeholder="项目类型" :class="queryParams.type.length > 1 ? 'selectTag' : ''" style="width: 170px;">
                    <el-option v-for="(item,index) in projectType" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="time">
                  <custom-time-select
                    :timeList="timeList"
                    v-model="queryParams.time"
                    placeholder="中标日期"
                    @handle-search="changeSelect"/>
                </el-form-item>
              </el-form>
            </div>
            <div class="box-right">
              <el-table
                :data="jtList"
                border
                max-height="250"
                fit
                highlight-current-row
              >
                <el-table-column prop="name" label="集团名称" width="120"/>
                <el-table-column prop="count" label="中标数量（个）" align="right" sortable/>
                <el-table-column prop="amount" label="中标金额（万元)" align="right" sortable/>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="content content_wap2">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">大项目中标排行榜</span>
          </div>
        </div>
        <el-row>
          <el-col :span="14">
            <div id="zbph-echarts" style="height: 500px;"></div>
          </el-col>
          <el-col :span="10">
            <div class="search">
              <el-form ref="queryForm" :model="queryParams1" :inline="true" size="small">
                <el-form-item prop="money">
                  <custom-money-select
                    :moneyList="moneyList"
                    v-model="queryParams1.money"
                    placeholder="中标金额"
                    @handle-search="changeSelect" />
                </el-form-item>
                <el-form-item prop="address">
                  <el-select v-model="queryParams1.address" placeholder="项目地区" style="width: 150px;">
                    <el-option v-for="(item,index) in addressList" :key="index" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="type">
                  <el-select v-model="queryParams1.type" multiple collapse-tags clearable placeholder="项目类型" :class="queryParams1.type.length > 1 ? 'selectTag' : ''" style="width: 170px;">
                    <el-option v-for="(item,index) in projectType" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="time">
                  <custom-time-select
                    :timeList="timeList"
                    v-model="queryParams1.time"
                    placeholder="中标日期"
                    @handle-search="changeSelect"/>
                </el-form-item>
              </el-form>
            </div>
            <div class="box-right">
              <el-table
                :data="jtList"
                border
                max-height="400"
                fit
                highlight-current-row
              >
                <el-table-column prop="name" label="企业名称" width="120"/>
                <el-table-column prop="count" label="中标数量（个）" align="right" sortable/>
                <el-table-column prop="amount" label="中标金额（万元)" align="right" sortable/>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="content_wap3">
        <el-tabs v-model="activeName" @tab-click="handleClickTab">
          <el-tab-pane label="大项目最新中标" name="first">
            <skeleton v-if="zxzbIsSkeleton" style="padding: 16px"></skeleton>
            <div class="list" v-if="!zxzbIsSkeleton">
              <div class="item" v-for="(item,index) in projectList" :key="index">
                <p class="list-title"><router-link :to="`/biddetail/${item.id}`" tag="a" class="a-link" v-if="item.id" v-html="item.projectName"></router-link></p>
                <div class="list-content">
                  <p class="list-content-text">
                    <span>中标企业：</span>
                    <span>{{item.companyName || '--'}}</span>
                  </p>
                  <p class="list-content-text">
                    <span>中标金额：</span>
                    <span>{{item.amount}}万元</span>
                  </p>
                  <p class="list-content-text">
                    <span>中标日期：</span>
                    <span>{{item.winBidTime || '--'}}</span>
                  </p>
                  <p class="list-content-text">
                    <span>招标人：</span>
                    <span>{{item.projectUnit || '--'}}</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="pagination-box" v-if="totalCount>queryParams2.pageSize && !zxzbIsSkeleton">
              <el-pagination background :current-page="queryParams2.pageNum" :page-size="queryParams2.pageSize" :total="totalCount" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="大项目最新招标" name="second">
            <skeleton v-if="zhaobiaoIsSkeleton" style="padding: 16px"></skeleton>
            <div v-if="!zhaobiaoIsSkeleton" class="list">
              <div class="item" v-for="(item,index) in zbList" :key="index">
                <p class="list-title"><router-link :to="`/biddetail/${item.bid}`" tag="a" class="a-link" v-if="item.bid" v-html="item.projectName"></router-link></p>
                <div class="list-content">
                  <p class="list-content-text">
                    <span>总投资：</span>
                    <span>{{item.projectAmount}}万元</span>
                  </p>
                  <p class="list-content-text">
                    <span>招标人：</span>
                    <span>{{item.tenderee || '--'}}</span>
                  </p>
                  <p class="list-content-text">
                    <span>发布日期：</span>
                    <span>{{item.issueTime || '--'}}</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="pagination-box" v-if="zbTableTotal>queryParams2.pageSize && !zhaobiaoIsSkeleton">
              <el-pagination background :current-page="queryParams2.pageNum" :page-size="queryParams2.pageSize" :total="zbTableTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="search">
          <el-form ref="queryForm" :model="queryParams2" :inline="true" size="small">
            <el-form-item prop="amount">
              <custom-money-select
                :moneyList="moneyList"
                v-model="amount"
                placeholder="中标金额"
                @handle-search="changeSelect3" />
            </el-form-item>
            <el-form-item prop="provinceId">
              <el-select v-model="queryParams2.provinceId" @change="changeSelect3" placeholder="项目地区" style="width: 150px;">
                <el-option v-for="(item,index) in addressList" :key="index" :label="item.label" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="projects">
              <el-select v-model="queryParams2.projects" @change="changeSelect3" multiple collapse-tags clearable placeholder="项目类型" :class="queryParams2.projects.length > 1 ? 'selectTag' : ''" style="width: 170px;">
                <el-option v-for="(item,index) in projectType" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="time">
              <custom-time-select
                :timeList="timeList"
                v-model="queryParams2.time"
                placeholder="中标日期"
                @handle-search="changeSelect3"/>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!--员工视角-->
    <div class="staff" v-if="user === 2">
      <el-row :gutter="20">
        <el-col :span="18">
          <div class="content-left">
            <div class="task-wrap">
              <div class="item">
                <img class="left" src="@/assets/images/index/icon1.png"/>
                <div class="right">
                  <p class="title">即将开标项目</p>
                  <p class="number">36</p>
                  <p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p>
                </div>
              </div>
              <div class="item">
                <img class="left" src="@/assets/images/index/icon2.png"/>
                <div class="right">
                  <p class="title">重点关注项目</p>
                  <p class="number">36</p>
                  <p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p>
                </div>
              </div>
              <div class="item">
                <img class="left" src="@/assets/images/index/icon3.png"/>
                <div class="right">
                  <p class="title">重点关注客户</p>
                  <p class="number">36</p>
                  <p class="compare">较上月 <span class="down">-3<img src="@/assets/images/index/down.png"/></span></p>
                </div>
              </div>
              <div class="item">
                <img class="left" src="@/assets/images/index/icon4.png"/>
                <div class="right">
                  <p class="title">储备合作客户</p>
                  <p class="number">36</p>
                  <p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p>
                </div>
              </div>
              <div class="item add">
                <span class="yd"><i></i><i></i><i></i><i></i><i></i><i></i></span>
                <div class="btn"><i class="el-icon-plus"></i>新建待办任务</div>
              </div>
            </div>
            <div class="content-db">
              <div class="flex-box query-box">
                <div class="flex-box query-params">
                  <span class="common-title">待办</span>
                </div>
                <div class="flex-box query-ability"><span>9</span>全部待办 ></div>
              </div>
              <div class="list">
                <div class="item" v-for="(item,index) in gjjlData" :key="index" v-if='index < 3'>
                  <h3>{{item.title}}</h3>
                  <p>
                    <span>拜访时间：{{item.time}}</span>
                    <span>关联企业：{{item.name}}</span>
                  </p>
                  <div class="btn">写跟进<i class="el-icon-edit"></i></div>
                </div>
              </div>
            </div>
            <div class="trends">
              <el-tabs v-model="activeName" @tab-click="handleClickTab1">
                <el-tab-pane label="甲方舆情" name="first">
                  <div class="main-box">
                    <el-timeline>
                      <el-timeline-item
                        v-for="(item, index) in trendsList"
                        :key="index"
                        icon="el-icon-time">
                        <div class="time">{{item.time}}<span class="company">{{item.name}}</span></div>
                        <div class="cont">{{item.main}}</div>
                      </el-timeline-item>
                    </el-timeline>
                  </div>
                  <!--<div class="check">全部甲方舆情 ></div>-->
                </el-tab-pane>
                <el-tab-pane label="监控动态" name="second">
                  <div class="main-box">
                    <el-timeline>
                      <el-timeline-item
                        v-for="(item, index) in trendsList"
                        :key="index"
                        icon="el-icon-time">
                        <div class="time">{{item.time}}<span class="company">{{item.name}}</span></div>
                        <div class="cont">{{item.main}}</div>
                      </el-timeline-item>
                    </el-timeline>
                  </div>
                  <!--<div class="check">全部监控动态 ></div>-->
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="content-right">
            <div class="user" @click="handleChange">
              <h3>李婷婷<span>营销员</span></h3>
              <p>您好，祝您工作顺利每一天</p>
            </div>
            <div class="search">
              <span class="common-title">快捷搜索</span>
              <el-input placeholder="找客户/找项目/找甲方">
                <i slot="prefix" class="el-icon-search"></i>
              </el-input>
              <span class="common-title">储备项目类</span>
              <div class="list" style="margin-top: 8px;">
                <div class="item">
                  <img src="@/assets/images/index/cb_icon1.png"/>
                  <p>EPC项目</p>
                </div>
                <div class="item">
                  <img src="@/assets/images/index/cb_icon2.png"/>
                  <p>投资项目</p>
                </div>
                <div class="item">
                  <img src="@/assets/images/index/cb_icon3.png"/>
                  <p>房建项目</p>
                </div>
              </div>
              <div class="list">
                <div class="item">
                  <img src="@/assets/images/index/cb_icon4.png"/>
                  <p>电力项目</p>
                </div>
                <div class="item">
                  <img src="@/assets/images/index/cb_icon5.png"/>
                  <p>市政项目</p>
                </div>
                <div class="item">
                  <img src="@/assets/images/index/cb_icon6.png"/>
                  <p>水利项目</p>
                </div>
              </div>
            </div>
            <div class="zbhxr">
              <span class="common-title">竞争对手中标候选人公告</span>
              <div class="list">
                <div class="item">
                  <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                  <p>
                    <span>中标金额：4754.34</span>
                  </p>
                </div>
                <div class="item">
                  <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                  <p>
                    <span>中标金额：4754.34</span>
                  </p>
                </div>
                <div class="item">
                  <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                  <p>
                    <span>中标金额：4754.34</span>
                  </p>
                </div>
                <div class="item">
                  <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                  <p>
                    <span>中标金额：4754.34</span>
                  </p>
                </div>
                <div class="item">
                  <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                  <p>
                    <span>中标金额：4754.34</span>
                  </p>
                </div>
                <div class="item">
                  <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                  <p>
                    <span>中标金额：4754.34</span>
                  </p>
                </div>
                <div class="item">
                  <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                  <p>
                    <span>中标金额：4754.34</span>
                  </p>
                </div>
                <div class="item">
                  <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                  <p>
                    <span>中标金额：4754.34</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import dataRegion from '@/assets/json/dataRegion'
  import "@/assets/styles/public.css";
  import CustomTimeSelect from './component/CustomTimeSelect'
  import CustomMoneySelect from './component/CustomMoneySelect'
  import skeleton from './component/skeleton'
  import { bidRank,bigWinningBidsPage,bigBidPage } from '@/api/index'
  import api from '@/api/radar/radar.js';
export default {
  name: "Index",
  components: {
    CustomTimeSelect,CustomMoneySelect,skeleton
  },
  data() {
    return {
      // 版本号
      version: "3.8.5",
      gjjlData:[
        {
          title:'今天拜访了重庆交通局杨科长，洽谈比较愉快，预计下月有项目招标，希望能有机会合作。',
          user:'李婷婷',
          name:'重庆机场集团',
          time:'2023-04-12  14: 00'
        },
        {
          title:'今天拜访了重庆机场集团董事长，下个月招标项目预计1.2个亿。争取能拿到项目。',
          user:'李婷婷',
          name:'重庆机场集团',
          time:'2023-04-12  14: 00'
        },
        {
          title:'5月27日早上劳动局去杨局长说希望我们把项目预算清单做出来看一下。',
          user:'李婷婷',
          name:'重庆机场集团',
          time:'2023-04-12  14: 00'
        },
        {
          title:'拜访了重庆交通局杨科长，洽谈比较愉快，预计下月有项目招标，希望能有机会合作。',
          user:'李婷婷',
          name:'重庆机场集团',
          time:'2023-04-12  14: 00'
        },
        {
          title:'5月27日早上劳动局去杨局长说希望我们把项目预算清单做出来看一下。',
          user:'李婷婷',
          name:'重庆机场集团',
          time:'2023-04-12  14: 00'
        },
        {
          title:'拜访了重庆交通局杨科长，洽谈比较愉快，预计下月有项目招标，希望能有机会合作。',
          user:'李婷婷',
          name:'重庆机场集团',
          time:'2023-04-12  14: 00'
        },
        {
          title:'拜访了重庆交通局杨科长，洽谈比较愉快，预计下月有项目招标，希望能有机会合作。',
          user:'李婷婷',
          name:'重庆机场集团',
          time:'2023-04-12  14: 00'
        },
        {
          title:'拜访了重庆交通局杨科长，洽谈比较愉快，预计下月有项目招标，希望能有机会合作。',
          user:'李婷婷',
          name:'重庆机场集团',
          time:'2023-04-12  14: 00'
        },
        {
          title:'拜访了重庆交通局杨科长，洽谈比较愉快，预计下月有项目招标，希望能有机会合作。',
          user:'李婷婷',
          name:'重庆机场集团',
          time:'2023-04-12  14: 00'
        },
      ],
      pmData:[
        {
          name:'中治建工集团有限公司',
          value:334,
          value1:164,
        },
        {
          name:'中机中联工程有限公司',
          value:230,
          value1:130,
        },
        {
          name:'中铁五局集团第六公司',
          value:156,
          value1:150,
        },
        {
          name:'中铁长江交通设计公司',
          value:112,
          value1:130,
        },
        {
          name:'重庆设计院有限公公司',
          value:110,
          value1:90,
        },
        {
          name:'中铁五局集团第六公司',
          value:100,
          value1:91,
        },
        {
          name:'中铁五局集团第六公司',
          value:99,
          value1:102,
        },
        {
          name:'重庆设计院有限公公司',
          value:80,
          value1:90,
        },
        {
          name:'中铁五局集团第六公司',
          value:100,
          value1:91,
        },
        {
          name:'中铁五局集团第六公司',
          value:99,
          value1:102,
        },
      ],
      rankIconsSize:'24',
      rankIcons:[// 排序图标
        require('@/assets/images/index/1.png'),
        require('@/assets/images/index/2.png'),
        require('@/assets/images/index/3.png'),
        require('@/assets/images/index/4.png'),
        require('@/assets/images/index/5.png'),
        require('@/assets/images/index/6.png'),
        require('@/assets/images/index/7.png'),
        require('@/assets/images/index/8.png'),
        require('@/assets/images/index/9.png'),
        require('@/assets/images/index/10.png'),
      ],
      user:1,
      activeName:'first',
      trendsList:[
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
      ],
      jtList:[
        {
          name:'中交集团',
          count:'24534',
          amount:'23011'
        },
        {
          name:'中建集团',
          count:'11534',
          amount:'22331'
        },
        {
          name:'中冶集团',
          count:'15534',
          amount:'20231'
        },
        {
          name:'中国铁路',
          count:'6534',
          amount:'11231'
        },
        {
          name:'中国水利',
          count:'9534',
          amount:'4231'
        },
        {
          name:'中建集团',
          count:'14534',
          amount:'23231'
        },
        {
          name:'中建集团',
          count:'24534',
          amount:'15231'
        },
        {
          name:'中国水利',
          count:'2334',
          amount:'5231'
        },
        {
          name:'中建集团',
          count:'2534',
          amount:'8231'
        },
        {
          name:'中交集团',
          count:'2334',
          amount:'9231'
        },
      ],
      addressList:[],
      projectType:[], //项目类型
      queryParams:{
        address:'',
        type:[],
        time:'',
        money:'',
      },
      queryParams1:{
        address:'',
        type:[],
        money:'',
        time:'',
        sort:1
      },
      queryParams2:{
        provinceId:'',
        projects:[],
        amount:'',
        time:'',
        pageNum:1,
        pageSize:10
      },
      amount:'',
      timeList: ['近三天', '近七天', '近半月', '自定义'],
      moneyList: ['2亿以上', '5亿以上', '10亿以上', '自定义'],
      projectList:[],
      zbList:[],
      totalCount:0,
      zbTableTotal:0,
      zxzbIsSkeleton:true,
      zhaobiaoIsSkeleton:true,
    };
  },
  created() {
    this.searchDic()
    this.dataRegion()
    this.getWinningBidsRanking()
    this.getBigWinningBidsPage()
    if(this.user === 1){
      this.$nextTick(()=>{
        this.initChart(this.jtList)
        this.initChart1()
      })
    }
  },
  methods: {
    //项目类型
    searchDic(){
      api.searchDic().then(res=>{
        this.projectType = res.projectType;
      }).catch(error=>{});
    },
    getWinningBidsRanking(){
      let params=this.queryParams;
      if(params.time){
        params.startDate=params.time[0]
        params.endDate=params.time[1]
      }
      delete params.time
      delete params.amount
      console.log(params)
      bidRank(params).then(res=>{
        console.log(res.rows)
        // this.zxzbIsSkeleton=false;
        // if(res.code == 200){
        //   this.projectList=res.rows;
        //   this.totalCount=res.total;
        // }
      })
    },
    getBigWinningBidsPage(){
      let params=this.queryParams2;
      if(params.amount){
        if(params.amount.length > 1){
          params.amountEnd=params.amount[1]
        }else {
          params.amountStart=params.amount[0]
        }
      }
      if(params.time){
        params.timeStart=params.time[0]
        params.timeEnd=params.time[1]
      }
      delete params.time
      delete params.amount
      this.zxzbIsSkeleton=true
      bigWinningBidsPage(params).then(res=>{
        this.zxzbIsSkeleton=false;
        if(res.code == 200){
          this.projectList=res.rows;
          this.totalCount=res.total;
        }
      })
    },
    getBigBidPage(){
      let params=this.queryParams2;
      if(params.amount){
        if(params.amount.length > 1){
          params.amountEnd=params.amount[1]
        }else {
          params.amountStart=params.amount[0]
        }
      }
      if(params.time){
        params.timeStart=params.time[0]
        params.timeEnd=params.time[1]
      }
      delete params.time
      delete params.amount
      this.zhaobiaoIsSkeleton=true
      bigBidPage(params).then(res=>{
        this.zhaobiaoIsSkeleton=false
        if(res.code == 200){
          this.zbList=res.rows;
          this.zbTableTotal=res.total;
        }
      })
    },
    //地区
    async dataRegion() {
      var str = [];
      for (let x = 0; x < 3; x++) {
        for (let i = 0; i < dataRegion.length; i++) {
          if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
            str.push({
              'id': dataRegion[i].id,
              "label": dataRegion[i].regionName,
              "short": dataRegion[i].short,
              "value": dataRegion[i].parentId,
              "children": []
            });
          }
        }
      }
      this.addressList = str;
    },
    initChart(data) {
      this.$nextTick(()=>{
        let myChart = echarts.init(document.getElementById("zbtj-echarts"))
        let option ={
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          xAxis: {
            type: 'category',
            axisLabel: { //坐标轴刻度标签的相关设置
              margin: 15, //刻度标签与轴线之间的距离
              color:"#666666"
            },
            axisTick: false, //坐标轴刻度
            axisPointer: {
              type: 'shadow'
            },
            data: data.map(item => item.name),
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: { //坐标轴刻度标签的相关设置
                color:"#666666"
              },
              name: '单位：个',
              nameLocation: 'start',
              nameTextStyle: {
                padding: [0, 0, 0, -60],    // 四个数字分别为上右下左与原位置距离
                color: '#666666',
              }
            },
            {
              type: 'value',
              axisLabel: { //坐标轴刻度标签的相关设置
                color:"#666666"
              },
              name: '单位：万元',
              nameLocation: 'start',
              nameTextStyle: {
                padding: [0, 0, 0, 72],    // 四个数字分别为上右下左与原位置距离
                color: '#666666',
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: ['#FFFFFF']
                }
              }
            }
          ],
          grid: {
            top:30,
            left:80,
            right:90,
            bottom:30,
          },
          series: [
            {
              name:'中标金额（万元）',
              smooth: false, //平滑
              type:"line",
              symbolSize: 6,
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value + '万元'
                }
              },
              itemStyle: {
                color: '#14C9C9'
              },
              data:data.map(item => item.amount),
            },
            {
              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: '#56A5FF'
                  }, {
                    offset: 1,
                    color: '#1B8EFF'
                  }])
                }
              },
              data:data.map(item => item.count),
            }
          ]
        }
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      })
    },
    initChart1(){
      var rankPic = [
        require('@/assets/images/index/1.png'),
        require('@/assets/images/index/2.png'),
        require('@/assets/images/index/3.png'),
        require('@/assets/images/index/4.png'),
        require('@/assets/images/index/5.png'),
        require('@/assets/images/index/6.png'),
        require('@/assets/images/index/7.png'),
        require('@/assets/images/index/8.png'),
        require('@/assets/images/index/9.png'),
        require('@/assets/images/index/10.png'),
      ]
      let myChart = echarts.init(document.getElementById("zbph-echarts"))

      let option ={
        legend: {
          show: true,
          x:'right',
          y:'top',
          padding:[10,0,10,0],
          itemWidth: 24,
          itemHeight: 10,
          textStyle:{
            borderRadius:30,
          }
        },
        yAxis: {
          type: 'category',
          inverse: true, // 反向坐标
          data: this.pmData.map(item => item.name),
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisPointer: {
            label: {
              show: true,
              margin: 30
            }
          },
          axisLabel: {
            margin: 200,
            textStyle: {
              align: 'left',
            },
            formatter: function (value,index) {
              let idx=index+1;
              return '{' + idx + '|} {s|' + value + '}'
            },
            rich: {
              1: {
                height: 24,
                width: 24,
                // marginBottom:-15,
                align: 'center',
                backgroundColor: {
                  image: rankPic[0]
                },
              },
              2: {
                height: 24,
                width: 24,
                align: 'center',
                backgroundColor: {
                  image: rankPic[1]
                }
              },
              3: {
                height: 24,
                width: 24,
                align: 'center',
                backgroundColor: {
                  image: rankPic[2]
                }
              },
              4: {
                height: 24,
                width: 24,
                align: 'center',
                backgroundColor: {
                  image: rankPic[3]
                }
              },
              5: {
                height: 24,
                width: 24,
                align: 'center',
                backgroundColor: {
                  image: rankPic[4]
                }
              },
              6: {
                height: 24,
                width: 24,
                align: 'center',
                backgroundColor: {
                  image: rankPic[5]
                }
              },
              7: {
                height: 24,
                width: 24,
                align: 'center',
                backgroundColor: {
                  image: rankPic[6]
                }
              },
              8: {
                height: 24,
                width: 24,
                align: 'center',
                backgroundColor: {
                  image: rankPic[7]
                }
              },
              9: {
                height: 24,
                width: 24,
                align: 'center',
                backgroundColor: {
                  image: rankPic[8]
                }
              },
              10: {
                height: 24,
                width: 24,
                align: 'center',
                backgroundColor: {
                  image: rankPic[9]
                }
              },
            }
          },
        },
        xAxis: {
          type: 'value',
        },
        grid: {
          left: '20%',
          top: 40,
          right: 20,
          bottom: 60,
        },
        tooltip: {
          show: true,
          backgroundColor: 'rgba(0,0,0,.7)',
          borderWidth: 0,
          textStyle: {
            color: '#fff',
          },
        },
        series: [
          {
            // realtimeSort: true,
            name:'已完成产值',
            data: this.pmData.map(item => item.value),
            barGap: 0,
            type: 'bar',
            itemStyle:{
              color: '#14C9C9',
              barBorderRadius:[0, 20, 20, 0]
            },
            barWidth: 8,
          },
          {
            name:'目标产值',
            data: this.pmData.map(item => item.value1),
            barGap: 0,
            type: 'bar',
            itemStyle:{
              color: '#92C9FF',
              barBorderRadius:[0, 20, 20, 0]
            },
            barWidth: 8,
          },
        ],
      }
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();//图表跟随页面大小变化宽度
      });
    },
    handleClickTab(){
      this.queryParams2.pageNum=1;
      if(this.activeName === 'first'){
        this.getBigWinningBidsPage()
      }
      if(this.activeName === 'second'){
        this.getBigBidPage()
      }
    },
    handleClickTab1(){},
    handleChange(){
      this.user = this.user === 1 ? 2 : 1;
      if(this.user === 1){
        this.$nextTick(()=>{
          this.initChart(this.jtList)
          this.initChart1()
        })
      }
    },
    changeSelect(){
      console.log(this.queryParams)
      this.getWinningBidsRanking()
      // this.$emit('handle-search')
    },
    changeSelect3(){
      this.queryParams2.pageNum = 1
      if(this.activeName === 'first'){
        this.getBigWinningBidsPage()
      }
      if(this.activeName === 'second'){
        this.getBigBidPage()
      }
    },
    handleCurrentChange(){

    },
    handleSizeChange(){
      this.queryParams2.pageNum = 1
      this.queryParams2.pageSize = val
      if(this.activeName === 'first'){
        this.getBigWinningBidsPage()
      }
      if(this.activeName === 'second'){
        this.getBigBidPage()
      }
    },
  }
};
</script>

<style scoped lang="scss">
  .app-container{
    padding: 0;
    margin: 16px 24px;
  }
  p{
    padding: 0;
    margin: 0;
  }
  .home {
    padding-bottom:24px;
    ::v-deep .el-row{
      .el-col:nth-child(1){
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .el-col:nth-child(2){
        padding-left: 16px !important;
        padding-right: 0 !important;
      }
    }

    .manage{
      .task-wrap{
        height: 99px;
        background: #FFFFFF;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        .item{
          width: 20%;
          text-align: center;
          margin: 0 auto;
          cursor: pointer;
          .icon-img{
            width: 48px;
            height: 48px;
            margin-top: 16px;
          }
          .text{
            color: #3D3D3D;
            font-size: 12px;
            margin-top: 5px;
          }
        }
      }
      .user{
        height: 99px;
        border-radius: 4px;
        background-image: url("../assets/images/index/user_bg.png");
        background-size: cover;
        padding-left: 24px;
        h3{
          font-weight: 700;
          color: #1C1C28;
          font-size: 18px;
          padding-top: 16px;
          padding-bottom: 8px;
          margin: 0px;
          span{
            height: 20px;
            background: #FFF2E2;
            display: inline-block;
            border-radius: 11px;
            border: 1px solid #FFB010;
            color: #FFB010;
            font-size: 12px;
            line-height: 20px;
            padding: 0 10px;
            margin-left: 12px;
            font-weight: 400;
          }
        }
        p{
          color: #666666;
          font-size: 16px;
        }
      }
      .tips{
        color: #999999;
        font-size: 12px;
        margin: 12px 0;
      }
      .content{
        background: #ffffff;
        padding: 22px 16px;
      }
      .content_wap1{
        height: 360px;
        margin-bottom: 12px;
      }
      .content_wap2{
        height: 540px;
      }
      .search{
        float:right;
        ::v-deep .el-form{
          .el-form-item--small.el-form-item{
            margin-bottom: 16px;
          }
          .el-form-item{
            height: 32px;
          }
          .el-form-item__content{
            line-height: 32px;
          }
          .el-input{
            line-height: 32px;
            .el-input__inner{
              height: 32px;
              line-height: 32px;
              border-radius: 4px
            }
          }

        }
      }
      .box-right{
        width: 90%;
        float: right;
        ::v-deep .el-table{
          .sort-caret.ascending{
            border-bottom-color: rgba(0,129,255,0.5);
          }
          .ascending .sort-caret.ascending{
            border-bottom-color: #0081FF;
          }
          .sort-caret.descending{
            border-top-color: rgba(0,129,255,0.5);
          }
          .descending .sort-caret.descending{
            border-top-color: #0081FF;
          }

          .el-table__header-wrapper{
            background: #F0F3FA;
            th{
              background: #F0F3FA;
              /*text-align: left;*/
            }
          }
          .el-table__footer-wrapper{
            background: #F0F3FA;
          }
          th {
            font-size: 13px !important;
            font-weight: 400 !important;
          }
          .cell {
            padding-right: 12px !important;
            padding-left: 12px !important;
            line-height: 18px;
          }
          .el-table__fixed-header-wrapper{
            th{
              background: #F0F3FA;
            }
          }
          td.el-table__cell{
            border-bottom: 0;
          }
          tr{
            &.current-row>td{
              background-color: initial;
            }
            &:nth-child(2n) {
              background: #F8FBFF;
            }
          }
          .el-table__cell{
            height: 40px;
            padding: 0;
            line-height: 40px;
          }
          .el-table__body tr:hover > td.el-table__cell{
            background: #DCEBFF;
          }
          ::-webkit-scrollbar-track-piece {
            //滚动条凹槽的颜色，还可以设置边框属性
            background-color: #F3F4F5;
            height: 16px;
            padding: 0 4px;
          }
          //滚动条的宽度
          ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color: #F3F4F5;
            border-radius: 6px;
          }
          //滚动条的滑块
          ::-webkit-scrollbar-thumb {
            border-radius: 8px;
            height: 8px;
            margin: 0 4px;
            background: rgba(98,110,126,0.2);
            border: 4px solid rgba(98,110,126,0.2);;
            &:hover{
              background: #566380;
            }
          }
          .has-gutter{
            tr{
              th:nth-last-child(2){
                border-right:0;
              }
              td:nth-last-child(2){
                border-right:0;
              }
            }
          }
          .el-table__cell.gutter{
            background: #F0F3FA;
          }
          .el-table__row{
            td:last-child{
              .cell{
                padding-right: 12px !important;
              }
            }
          }
        }
      }
      .content_wap3{
        margin-top: 12px;
        background: #ffffff;
        position:relative;
        ::v-deep .el-tabs{
          .el-tabs__header{
            margin-bottom: 0;
          }
          .el-tabs__item{
            height: 54px;
            line-height: 54px;
            font-size: 16px;
          }
          .el-tabs__item.is-active{
            font-weight: 700;
            color: #232323;
          }
          .el-tabs__nav-wrap{
            padding:0 24px;
          }
          .el-tabs__active-bar{
            border-radius: 8px;
          }
          .el-tabs__nav-wrap::after{
            height: 1px;
          }
        }

        .search{
          position: absolute;
          right: 8px;
          top: 10px;
          ::v-deep .el-form {
            .el-form-item--small.el-form-item {
              margin-bottom: 0;
            }
          }
        }
        .list{
          margin: 0 16px;
          .item{
            border-bottom: 1px solid #EFEFEF;
            padding: 16px 0;
            .list-title{
              font-size: 16px;
              font-weight: 700;
              color: #3D3D3D;
              line-height: 23px;
              cursor: pointer;
              .list-titel-a{
                text-decoration: none;
                color:#3D3D3D;
              }
              a{
                color: #3D3D3D;
              }
              a:hover{
                color:#0081FF;
              }
            }
            .list-content {
              margin-top: 16px;
              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;

                }

              }
            }
          }
        }
      }
      ::v-deep .selectTag{
        .el-select__tags{
          .el-tag{
            &:first-child{
              width: 90px;
            }
          }
        }
      }
    }




    .content-left{
      .task-wrap{
        height: 88px;
        background: #FFFFFF;
        border-radius: 4px;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        .item{
          width: 20%;
          display: flex;
          padding-left: 16px;
          margin-right: 9px;
          margin-top: 14px;
          margin-bottom: 14px;
          border-right: 1px solid #EFEFEF;
          cursor: pointer;
          .left{
            width: 48px;
            height: 48px;
            margin-right: 8px;
          }
          .right{
            .title{
              font-size: 12px;
              color: #3D3D3D;
              border-bottom: 0;
            }
            .number{
              font-weight: bold;
              color: #3D3D3D;
              font-size: 18px;
              padding: 4px 0;
            }
            .compare{
              color: rgba(35,35,35,0.4);
              font-size: 12px;
              img{
                width: 8px;
                height: 10px;
                margin-left: 4px;
                margin-bottom: -1px;
              }
              .down{
                color:#FF3C3C;
              }
              .up{
                color:#0CBC6D;
              }
            }
          }
        }
        .item:nth-child(4){
          border-right: 0;
        }
        .item:last-child{
          border-right: 0;
        }
        .item:hover{
          .right{
            .title{
              color: #0081FF;
            }
            .number{
              color: #0081FF;
            }
          }
        }
        .add{
          padding-left: 0;
          .yd{
            display: inline-block;
            width: 5px;
            margin-right: 10%;
            i{
              width: 5px;
              height: 5px;
              border-radius: 2px;
              background: #E6E6E9;
              margin-bottom: 6px;
              display: block;
            }
          }
          .btn{
            width: 100%;
            height: 60px;
            background: #FFFFFF;
            border-radius: 4px;
            /*border: 1px solid #E6E6E9;*/
            color:#0081FF;
            line-height: 64px;
            font-size: 14px;
            margin-left: 0;
            margin-right: 7px;
            i{
              margin-right: 4px;
            }
          }
          .btn:hover{
            background: #F6F9FC;
          }
        }
      }
      .content-wrap{
        margin-bottom: 12px;
        height: 587px;
        .select-popper{
          margin-right:0;
        }
        .record{
          height: 587px;
          background: #FFFFFF;
          border-radius: 4px;
          padding: 16px;
          position: relative;
          .list{
            height: 510px;
            overflow: hidden;
            .item{
              border-bottom: 1px solid #EEEEEE;
              padding: 16px 0;
              h3{
                color: #232323;
                font-size: 14px;
                font-weight: 400;
                margin: 0;
              }
              p{
                color: rgba(35,35,35,0.4);
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-top: 8px;
                span{
                  margin-right: 15px;
                }
              }
            }
            .item:last-child{
              border-bottom: 0;
            }
          }
          .more{
            text-align: center;
            color: #0081FF;
            font-size: 14px;
            cursor: pointer;
            position: absolute;
            width: 95%;
            height: 60px;
            line-height: 60px;
            background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 17%, rgba(255,255,255,0.6) 100%);
            bottom: 0;
          }
        }
        .ranking{
          height: 587px;
          background: #FFFFFF;
          border-radius: 4px;
          padding: 16px;
          .main{
            background: url("../assets/images/index/yjpm_bg.png");
            background-size: 100% 100%;
            height: 525px;
            margin-top: 10px;
          }
          .amount{
            padding: 16px 12px;
            p{
              display: flex;
              justify-content: space-between;
            }
            span{
              font-weight: 400;
              color: #184280;
              font-size: 14px;
            }
            .money{
              font-weight: bold;
              color: #184280;
              font-size: 18px;
              margin-top: 2px;
            }
            .money:first-child{
              color:#48C5A0;
            }
            .money:last-child{
              color:#60B0FD;
            }
            .progress1{
              height: 10px !important;
              margin-bottom:6px;
              margin-top:8px;
              ::v-deep .el-progress-bar__outer{
                .el-progress-bar__inner{
                  background:#9AEAD3
                }
              }
            }
            .progress2{
              height: 10px !important;
              ::v-deep .el-progress-bar__outer{
                .el-progress-bar__inner{
                  background:#92C9FF
                }
              }
            }
            ::v-deep .el-progress-bar__outer{
              /*border: 1px solid #A2E8E8;*/
              /*background-color:#ffffff !important;*/
              height: 10px !important;
              background-color: rgba(235, 238, 245, 0%) !important;
              border-radius:0 20px 20px 0;
              .el-progress-bar__inner{
                /*<!--background: linear-gradient(-270deg, #C3F6F6 0%, #14C9C9 100%);-->*/
                border-radius:0 20px 20px 0;
                .el-progress-bar__innerText{
                  color: #ffffff;
                  opacity: 0;
                }
              }
            }

          }
        }
        .select-popper{
          .area{
            font-size: 14px;
            color: #232323;
            cursor: pointer;
            i{
              background: url("../assets/images/index/sjx.png");
              background-size: 100% 100%;
              width: 10px;
              height: 6px;
              display: inline-block;
              margin-bottom: 2px;
              margin-left: 4px;
            }
          }
          .month{
            font-size: 14px;
            color: #232323;
            margin-left: 16px;
            cursor: pointer;
            i{
              background: url("../assets/images/index/sjx.png");
              background-size: 100% 100%;
              width: 10px;
              height: 6px;
              display: inline-block;
              margin-bottom: 2px;
              margin-left: 4px;
            }
          }
          .color{
            color: #0081FF;
            i{
              background: url("../assets/images/index/sjx2.png");
              background-size: 100% 100%;
            }
          }
        }
        .select-popper:hover{
          .area,.month{
            color: #0081FF;
            i{
              background: url("../assets/images/index/sjx1.png");
              background-size: 100% 100%;
            }
          }
        }

      }
      .content-db{
        height: 263px;
        background: #FFFFFF;
        border-radius: 4px;
        margin-bottom: 12px;
        padding: 16px;
        overflow: hidden;
        .query-ability{
          color: #0081FF;
          font-size: 14px;
          cursor: pointer;
          span{
            width: 16px;
            height: 16px;
            background: #FF3C3C;
            display: inline-block;
            color:#ffffff;
            font-size: 12px;
            border-radius: 50%;
            line-height: 16px;
            text-align: center;
            margin-right: 4px;
          }
        }
        .list{
          margin-top: 12px;
        }
        .item{
          min-height: 62px;
          background: #F6F9FD;
          border-radius: 6px;
          margin-bottom: 8px;
          position: relative;
          padding: 10px 16px;
          h3{
            font-weight: 400;
            color: #232323;
            font-size: 14px;
            margin: 0;
            padding-bottom: 6px;
            width: 85%;
          }
          p{
            color: rgba(35,35,35,0.4);
            font-size: 14px;
            span{
              margin-right: 24px;
              color:rgba(35, 35, 35, 0.8);
            }
          }
          .btn{
            position: absolute;
            right: 50px;
            top:22px;
            color: #0CBC6D;
            font-size: 12px;
          }
        }
      }
      .analysis{
        height: 334px;
        background: #FFFFFF;
        border-radius: 4px;
        padding: 16px;
        position: relative;
        .tabs{
          .label{
            display: inline-block;
            padding: 0 14px;
            height: 22px;
            color: rgba(35,35,35,0.8);
            font-size: 12px;
            line-height: 22px;
            border-top: 1px solid #EFEFEF;
            border-bottom: 1px solid #EFEFEF;
            border-left: 1px solid #EFEFEF;
            cursor: pointer;
          }
          .label:first-child{
            border-radius: 2px 0px 0px 2px;
          }
          .label:last-child{
            border-radius: 0px 2px 2px 0px;
            border-right: 1px solid #EFEFEF;
          }
          .color{
            background: #0081FF;
            color: #FFFFFF;
          }
        }
        .select-popper{
          position: absolute;
          right: 0;
          top: 27px;
          z-index: 99;
          .area{
            font-size: 14px;
            color: #232323;
            margin-left: 16px;
            cursor: pointer;
            i{
              background: url("../assets/images/index/sjx.png");
              background-size: 100% 100%;
              width: 10px;
              height: 6px;
              display: inline-block;
              margin-bottom: 2px;
              margin-left: 4px;
            }
          }
        }
        .select-popper:hover{
          .area,.month{
            color: #0081FF;
            i{
              background: url("../assets/images/index/sjx1.png");
              background-size: 100% 100%;
            }
          }
        }
      }
      .trends{
        background: #FFFFFF;
        border-radius: 4px;
        padding: 16px;
        height: 617px;
        overflow: hidden;
        position: relative;
        ::v-deep .el-tabs__header{
          margin: 0 0 18px;
        }
        ::v-deep .el-tabs__content{
          overflow-y: auto;
          height: 567px;
        }
        ::v-deep .el-timeline{
          .el-timeline-item{
            padding-bottom: 18px;
          }
          .el-timeline-item__tail{
            left: 7px;
            border-left: 2px dotted rgba(0,129,255,0.5);
          }
          .el-timeline-item__node{
            background-color:#ffffff;
            .el-timeline-item__icon{
              color:#0081FF;
              font-size: 14px;
            }
          }
          .el-timeline-item__node--normal{
            left: 0px;
            width: 16px;
            height: 16px;
          }
        }
        .time{
          font-size: 14px;
          color: rgba(35,35,35,0.8);
          .company{
            color: #0081FF;
            margin-left: 16px;
          }
        }
        .cont{
          background: #F6F9FD;
          border-radius: 6px;
          padding: 16px;
          margin-top: 8px;
          font-size: 14px;
          color: rgba(35,35,35,0.8);
          margin-right: 16px;
        }
        .check{
          height: 60px;
          background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 17%, rgba(255,255,255,0.6) 100%);
          font-size: 16px;
          color: #0CBC6D;
          line-height: 60px;
          text-align: center;
          width: 100%;
          position: absolute;
          bottom: 46px;
          cursor: pointer;
        }

      }
    }
    .content-right{
      .user{
        height: 88px;
        border-radius: 4px;
        margin-bottom: 12px;
        background-image: url("../assets/images/index/user_bg.png");
        background-size: cover;
        padding-left: 24px;
        h3{
          font-weight: 700;
          color: #1C1C28;
          font-size: 18px;
          padding-top: 16px;
          padding-bottom: 8px;
          margin: 0px;
          span{
            height: 20px;
            background: #FFF2E2;
            display: inline-block;
            border-radius: 11px;
            border: 1px solid #FFB010;
            color: #FFB010;
            font-size: 12px;
            line-height: 20px;
            padding: 0 10px;
            margin-left: 12px;
            font-weight: 400;
          }
        }
        p{
          color: #666666;
          font-size: 16px;
        }
      }
      .search{
        height: 322px;
        background: #FFFFFF;
        border-radius: 4px;
        margin-bottom: 12px;
        padding: 16px;
        ::v-deep .el-input{
          height: 32px;
          border-radius: 2px;
          margin-bottom: 20px;
          margin-top: 14px;
          .el-input__inner{
            height: 32px;
            line-height: 32px;
            background: #F3F3F4;
            padding-left: 37px;
            border: 0;
          }
          .el-icon-search{
            font-size: 16px;
            line-height: 32px;
            color:#0081FF;
            margin-left: 10px;
            margin-right: 10px;
          }
        }
        .list{
          display: flex;
          justify-content: space-between;
          .item{
            margin: 0 auto;
            width: 33.3%;
            height: 94px;
            text-align: center;
            cursor: pointer;
            img{
              width: 40px;
              height: 40px;
              margin-top: 16px;
            }
            p{
              color: #3D3D3D;
              font-size: 12px;
            }
          }
          .item:hover{
            background: #F6F9FC;
          }
        }
      }
      .zbgg{
        height: 599px;
        background: #FFFFFF;
        border-radius: 4px;
        padding: 16px;
        .list{
          margin-top: 16px;
        }
        .item{
          border-bottom: 1px solid #EEEEEE;
          padding: 10px 0;
          cursor: pointer;
          h3{
            font-weight: 400;
            color: rgba(35,35,35,0.8);
            font-size: 14px;
            padding-bottom: 8px;
            margin: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          p{
            color: rgba(35,35,35,0.4);
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            span{
              margin-right: 15px;
            }
          }
        }
        .item:hover{
          h3{
            color:#0081FF;
          }
        }
        .item:last-child{
          border-bottom: 0;
        }
      }
      .zbhxr{
        height: 558px;
        background: #FFFFFF;
        border-radius: 4px;
        padding: 16px;
        .list{
          margin-top: 16px;
        }
        .item{
          border-bottom: 1px solid #EEEEEE;
          padding: 10px 0;
          cursor: pointer;
          h3{
            font-weight: 400;
            color: rgba(35,35,35,0.8);
            font-size: 14px;
            padding-bottom: 8px;
            margin: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          p{
            color: rgba(35,35,35,0.4);
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            span{
              margin-right: 15px;
            }
          }
        }
        .item:hover{
          h3{
            color:#0081FF;
          }
        }
        .item:last-child{
          border-bottom: 0;
        }
      }
    }
  }
</style>

