<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/Group" 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/Owner" 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="content content_wap1">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">集团中标统计</span>
            <div class="tips">注：数据来源大司空建筑大数据平台，统计范围为全国公开的施工内土地交易项目，未公开的不含在内</div>
          </div>
          <div class="flex-box">
            <div class="search">
              <el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
                <el-form-item prop="address">
                  <el-select v-model="queryParams.address" @change="changeSelect1" clearable placeholder="项目地区" style="width: 120px;">
                    <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="type">
                  <el-select v-model="queryParams.type" @change="changeSelect1" multiple collapse-tags clearable placeholder="项目类型" :class="queryParams.type.length > 1 ? 'selectTag' : ''" style="width: 140px;">
                    <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"
                    timeValue="近七天"
                    placeholder="中标日期"
                    @handle-search="changeSelect1"/>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
        <el-row v-if="jtzbList.length > 0 &&!isSkeleton">
          <el-col :span="14">
            <div id="zbtj-echarts" style="height: 350px;"></div>
          </el-col>
          <el-col :span="10">
            <div class="box-right">
              <el-table
                :data="jtzbList"
                border
                max-height="320"
                fit
                ref="tableRef"
                highlight-current-row
              >
                <el-table-column prop="combineName" label="集团名称">
                  <template slot-scope="scope">
                    <router-link :to="`/groupAccount/${scope.row.combineId}?name=${scope.row.combineName}`" tag="a" class="a-link">{{scope.row.combineName}}</router-link>
                  </template>
                </el-table-column>
                <el-table-column prop="count" label="中标数量（个）" align="right" sortable  width="150"/>
                <el-table-column prop="money" label="中标金额（万元)" align="right" sortable/>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <div class="empty" v-if="jtzbList.length === 0 && !isSkeleton">
          <img class="img" src="@/assets/images/project/empty.png">
          <div class="p1">抱歉，暂无数据展示</div>
        </div>
      </div>
      <div class="content content_wap2">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">大项目中标排行榜</span>
            <div class="tips">注：数据来源大司空建筑大数据平台，统计范围为全国公开的施工内土地交易项目，未公开的不含在内</div>
          </div>
          <div class="flex-box">
            <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="changeSelect2" />
                </el-form-item>
                <el-form-item prop="address">
                  <el-select v-model="queryParams1.address" @change="changeSelect2" clearable placeholder="项目地区" style="width: 120px;">
                    <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="type">
                  <el-select v-model="queryParams1.type" multiple collapse-tags @change="changeSelect2" clearable placeholder="项目类型" :class="queryParams1.type.length > 1 ? 'selectTag' : ''" style="width: 140px;">
                    <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"
                    timeValue="近七天"
                    placeholder="中标日期"
                    @handle-search="changeSelect2"/>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <el-row v-if="dxmbList.length > 0 && !dxmzbState">
          <el-col :span="14">
            <div id="zbph-echarts" style="height: 350px;"></div>
          </el-col>
          <el-col :span="10">
            <div class="box-right">
              <el-table
                :data="dxmbList"
                border
                max-height="320"
                ref="tableRef1"
                fit
                highlight-current-row
              >
                <el-table-column prop="companyName" label="企业名称">
                  <template slot-scope="scope">
                    <!--<router-link v-if="scope.row.companyId" :to="`/enterprise/${encodeStr(scope.row.companyId)}`" tag="a" class="a-link companyName" v-html="scope.row.companyName" ></router-link>-->
                    <span style="cursor: pointer;" class="a-link companyName" @click="getUipIdByCid(scope.row.companyId)">{{scope.row.companyName}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="count" label="中标数量（个）" align="right" sortable width="150"/>
                <el-table-column prop="money" label="中标金额（万元)" align="right" sortable/>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <div class="empty" v-if="dxmbList.length === 0 && !dxmzbState">
          <img class="img" src="@/assets/images/project/empty.png">
          <div class="p1">抱歉，暂无数据展示</div>
        </div>
      </div>
      <div class="content_wap3" ref="returnTop">
        <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.pid}`" tag="a" class="a-link" v-if="item.pid" v-html="item.projectName"></router-link></p>
                <div class="list-content">
                  <p class="list-content-text">
                    <span>中标企业：</span>
                    <span @click="getUipIdByCid(item.jskEid)" class="a-link">{{item.ename}}</span>
                  </p>
                  <p class="list-content-text">
                    <span>中标金额：</span>
                    <span>{{item.winBidAmount}}万元</span>
                  </p>
                  <p class="list-content-text">
                    <span>中标日期：</span>
                    <span>{{item.winBidTime || '--'}}</span>
                  </p>
                  <p class="list-content-text">
                    <span>招标人：</span>
                    <span>{{item.buildCorpName || '--'}}</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="pagination-box" v-if="show_page && 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="`/radar/Notice/details/${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.bidMoney}}万元</span>
                  </p>
                  <p class="list-content-text">
                    <span>招标人：</span>
                    <span>{{item.companyName || '--'}}</span>
                  </p>
                  <p class="list-content-text">
                    <span>发布日期：</span>
                    <span>{{item.punishDate || '--'}}</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="pagination-box" v-if="show_page && 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"
                moneyValue="2亿以上"
                :placeholder="placeholder"
                @handle-search="changeSelect3" />
            </el-form-item>
            <el-form-item prop="provinceId">
              <el-select v-model="queryParams2.provinceId" @change="changeSelect3" clearable placeholder="项目地区" style="width: 120px;">
                <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: 140px;">
                <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"
                timeValue="近七天"
                :placeholder="timePlaceholder"
                @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 {encodeStr} from "@/assets/js/common.js"
  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 { countByCompany,bidRank,bigWinningBidsPage,bigBidPage } from '@/api/index'
  import { getUipIdByCid } from '@/api/macro/macro'
  import api from '@/api/radar/radar.js';
export default {
  name: "Index",
  components: {
    CustomTimeSelect,CustomMoneySelect,skeleton
  },
  data() {
    return {
      encodeStr,
      // 版本号
      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:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
      ],
      jtzbList:[],
      dxmbList:[],
      addressList:[],
      projectType:[], //项目类型
      queryParams:{
        address:'',
        type:[],
        time:'',
      },
      queryParams1:{
        address:'',
        type:[],
        money:'',
        time:'',
      },
      queryParams2:{
        provinceId:'',
        projects:[],
        amount:'',
        time:[this.formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)),this.formatDate(new Date())],
        pageNum:1,
        pageSize:10
      },
      amount:'',
      timeList: ['近三天', '近七天', '近半月', '自定义'],
      moneyList: ['2亿以上', '5亿以上', '10亿以上', '自定义'],
      projectList:[],
      zbList:[],
      totalCount:0,
      zbTableTotal:0,
      isSkeleton:true,
      zxzbIsSkeleton:true,
      dxmzbState:true,
      zhaobiaoIsSkeleton:true,
      placeholder:'中标金额',
      timePlaceholder:'中标日期',
      show_page:true,
      MaxPage:500,
    };
  },
  created() {
    this.searchDic()
    this.dataRegion()
    this.$nextTick(() => {
      this.getCountByCompany()
      this.getBidRank()
      this.getBigWinningBidsPage()
      this.getBigBidPage()
    })
  },
  methods: {
    //项目类型
    searchDic(){
      api.searchDic().then(res=>{
        this.projectType = res.projectType;
      }).catch(error=>{});
    },
    getCountByCompany(){
      let params={};
      if(this.queryParams.time.length > 1){
        params.startDate=this.queryParams.time[0]
        params.endDate=this.queryParams.time[1]
      }
      if(this.queryParams.type.length > 0){
        params.type=this.queryParams.type.join()
      }
      if(this.queryParams.address){
        params.provinceId=this.queryParams.address
      }
      countByCompany(params).then(res=>{
        this.isSkeleton=false;
        if(res.code == 200){
          this.jtzbList=res.data;
          if(this.jtzbList.length > 0){
            this.initChart(this.jtzbList)
            // setTimeout(() => {
            //   this.$nextTick(() => {
            //     this.$refs.tableRef.bodyWrapper.scrollTop = 0
            //   });
            // }, 500);
          }

        }
      })
    },
    getBidRank(){
      let params={};
      if(this.queryParams1.time.length > 1){
        params.startDate=this.queryParams1.time[0]
        params.endDate=this.queryParams1.time[1]
      }
      if(this.queryParams1.type.length > 0){
        params.type=this.queryParams1.type.join()
      }
      if(this.queryParams1.address){
        params.provinceId=this.queryParams1.address
      }
      if(this.queryParams1.money){
        if(this.queryParams1.money.length > 1){
          params.endMoney=this.queryParams1.money[1]
          params.startMoney=this.queryParams1.money[0]
        }else {
          params.startMoney=this.queryParams1.money[0]
        }
      }
      bidRank(params).then(res=>{
        if(res.code == 200){
          this.dxmzbState=false;
          this.dxmbList=res.data;
          if(this.dxmbList.length > 0){
            this.initChart1(this.dxmbList)
            setTimeout(() => {
              this.$nextTick(() => {
                this.$refs.tableRef1.bodyWrapper.scrollTop = 0
              });
            }, 500);
          }
        }
      })
    },
    getBigWinningBidsPage(){
      let params={};
      params.recentlyBidQueryDto=[]
      let recentlyBidQueryDto={};
      params.pageNum=this.queryParams2.pageNum;
      params.pageSize=this.queryParams2.pageSize;
      if(this.amount){
        if(this.amount.length > 1){
          recentlyBidQueryDto.endMoney=this.amount[1]
          recentlyBidQueryDto.startMoney=this.amount[0]
        }else {
          recentlyBidQueryDto.startMoney=this.amount[0]
        }
      }
      if(this.queryParams2.time){
        recentlyBidQueryDto.startTenderTime=this.queryParams2.time[0]
        recentlyBidQueryDto.endTenderTime=this.queryParams2.time[1]
      }
      if(this.queryParams2.provinceId){
        recentlyBidQueryDto.province=this.queryParams2.provinceId
      }
      if(this.queryParams2.projects){
        recentlyBidQueryDto.projectTypeNew=this.queryParams2.projects.join()
      }
      params.recentlyBidQueryDto.push(recentlyBidQueryDto)
      this.zxzbIsSkeleton=true
      bigWinningBidsPage(params).then(res=>{
        this.zxzbIsSkeleton=false;
        if(res.code == 200){
          this.projectList=res.data.list;
          this.totalCount=res.data.total;
        }
        // window.scrollTo({
        //   top: 600,
        //   behavior: 'smooth' // 滚动行为：smooth平滑滚动，instant瞬间滚动，默认值auto，等同于instant
        // })
      })
    },
    getBigBidPage(){
      let params={};
      let jskBidQueryDto={};
      params.pageNum=this.queryParams2.pageNum;
      params.pageSize=this.queryParams2.pageSize;
      if(this.amount){
        if(this.amount.length > 1){
          jskBidQueryDto.endBidMoney=this.amount[1]
          jskBidQueryDto.startBidMoney=this.amount[0]
        }else {
          jskBidQueryDto.startBidMoney=this.amount[0]
        }
      }
      if(this.queryParams2.time){
        jskBidQueryDto.startPunishDate=this.queryParams2.time[0]
        jskBidQueryDto.endPunishDate=this.queryParams2.time[1]
      }
      if(this.queryParams2.provinceId){
        jskBidQueryDto.province=this.queryParams2.provinceId
      }
      if(this.queryParams2.projects){
        jskBidQueryDto.projectType=this.queryParams2.projects.join()
      }
      params.jskBidQueryDto=jskBidQueryDto
      this.zhaobiaoIsSkeleton=true
      bigBidPage(params).then(res=>{
        this.zhaobiaoIsSkeleton=false
        if(res.code == 200){
          this.zbList=res.data.list;
          this.zbTableTotal=res.data.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(list) {
      let data=[]
      for(var i=0;i<10;i++){
        data.push(list[i])
      }
      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.combineName),
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: { //坐标轴刻度标签的相关设置
                color:"#666666"
              },
              name: '单位：个',
              nameLocation: 'end',
              nameTextStyle: {
                padding: [0, 10, 0, -60],    // 四个数字分别为上右下左与原位置距离
                color: '#666666',
              }
            },
            {
              type: 'value',
              axisLabel: { //坐标轴刻度标签的相关设置
                color:"#666666"
              },
              name: '单位：万元',
              nameLocation: 'end',
              nameTextStyle: {
                padding: [0, 0, 0, 100],    // 四个数字分别为上右下左与原位置距离
                color: '#666666',
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: ['#FFFFFF']
                }
              }
            }
          ],
          grid: {
            top:30,
            left:80,
            right:90,
            bottom:50,
          },
          series: [
            {
              name:'中标金额（万元）',
              smooth: false, //平滑
              type:"line",
              symbolSize: 6,
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value + '万元'
                }
              },
              itemStyle: {
                normal:{
                  color: '#67B3FD',
                  lineStyle: {
                    width:3
                  },
                }
              },
              data:data.map(item => item.money),
            },
            {
              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'
                  }]),
                  barBorderRadius:[20,20, 0, 0]
                }
              },
              data:data.map(item => item.count),
            }
          ]
        }
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      })
    },
    initChart1(list){
      let data=[]
      let arr=list.sort(function(a, b) {
        return b.count - a.count;
      });
      if(arr.length > 10){
        for(var i=0;i<10;i++){
          data.push(arr[i])
        }
      }else {
        data=arr;
      }

      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'),
      ]
      this.$nextTick(()=>{
        let myChart = echarts.init(document.getElementById("zbph-echarts"))
        // let option ={
        //   legend: {
        //     show: false,
        //     x:'right',
        //     y:'top',
        //     padding:[10,0,10,0],
        //     itemWidth: 24,
        //     itemHeight: 10,
        //     textStyle:{
        //       borderRadius:30,
        //     }
        //   },
        //   yAxis: {
        //     type: 'category',
        //     inverse: true, // 反向坐标
        //     data: data.map(item => item.companyName),
        //     axisLine: {
        //       show: false,
        //     },
        //     axisTick: {
        //       show: false,
        //     },
        //     axisPointer: {
        //       label: {
        //         show: true,
        //         // margin: 30
        //       }
        //     },
        //     axisLabel: {
        //       margin: 220,
        //       textStyle: {
        //         align: 'left',
        //       },
        //       formatter: function (value,index) {
        //         let idx=index+1;
        //         if (value.length > 15) {
        //           value=`${value.slice(0, 15)}...`
        //         }
        //         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: 50,
        //     bottom: 60,
        //   },
        //   tooltip: {
        //     show: true,
        //     backgroundColor: 'rgba(0,0,0,.7)',
        //     borderWidth: 0,
        //     textStyle: {
        //       color: '#fff',
        //     },
        //   },
        //   series: [
        //     {
        //       // realtimeSort: true,
        //       name:'中标金额（万元）',
        //       data: data.map(item => item.money),
        //       barGap: 0,
        //       type: 'bar',
        //       itemStyle:{
        //         color: '#14C9C9',
        //         barBorderRadius:[0, 20, 20, 0]
        //       },
        //       barWidth: 8,
        //     }
        //   ],
        // }
        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.companyName),
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: { //坐标轴刻度标签的相关设置
                color:"#666666"
              },
              name: '单位：个',
              nameLocation: 'end',
              nameTextStyle: {
                padding: [0, 10, 0, 0],    // 四个数字分别为上右下左与原位置距离
                color: '#666666',
              }
            },
            {
              type: 'value',
              axisLabel: { //坐标轴刻度标签的相关设置
                color:"#666666"
              },
              name: '单位：万元',
              nameLocation: 'end',
              // nameLocation: 'start',
              nameTextStyle: {
                padding: [0, 0, 0, 100],    // 四个数字分别为上右下左与原位置距离
                color: '#666666',
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: ['#FFFFFF']
                }
              }
            }
          ],
          grid: {
            top:30,
            left:60,
            right:90,
            bottom:50,
            // containLabel: true
          },
          // dataZoom:[
          //   {
          //     type: 'slider',
          //     realtime: true,
          //     start: 0,
          //     end: 25, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
          //     height: 5, // 组件高度
          //     left: 5, // 左边的距离
          //     right: 5, // 右边的距离
          //     bottom: 10, // 下边的距离
          //     show: 0, // 是否展示
          //     handleSize: 0, // 两边手柄尺寸
          //     showDetail: false, // 拖拽时是否展示滚动条两侧的文字
          //     zoomLock: true, // 是否只平移不缩放
          //     moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
          //     // zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放
          //   },
          //   {
          //     type: 'inside', // 支持内部鼠标滚动平移
          //     start: 0,
          //     end: 50,
          //     zoomOnMouseWheel: false, // 关闭滚轮缩放
          //     moveOnMouseWheel: true, // 开启滚轮平移
          //     moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
          //   }
          // ],
          series: [
            {
              name:'中标金额（万元）',
              smooth: false, //平滑
              type:"line",
              symbolSize: 6,
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value + '万元'
                }
              },
              itemStyle: {
                normal:{
                  color: '#67B3FD',
                  lineStyle: {
                    width:3
                  },
                }
              },
              data:data.map(item => item.money),
            },
            {
              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'
                  }]),
                  barBorderRadius:[20,20, 0, 0]
                }
              },
              data:data.map(item => item.count),
            }
          ]
        }
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      })

    },
    handleClickTab(){
      this.queryParams2.pageNum=1;
      if(this.activeName === 'first'){
        this.getBigWinningBidsPage()
        this.placeholder='中标金额'
        this.timePlaceholder='中标日期'
      }
      if(this.activeName === 'second'){
        this.getBigBidPage()
        this.placeholder='总投资'
        this.timePlaceholder='发布日期'
      }
    },
    handleClickTab1(){},
    handleChange(){
      this.user = this.user === 1 ? 2 : 1;
      if(this.user === 1){
        this.$nextTick(()=>{
          this.initChart(this.jtzbList)
          this.initChart1(this.dxmbList)
        })
      }
    },
    changeSelect1(){
      this.getCountByCompany()
    },
    changeSelect2(){
      this.getBidRank()
    },
    changeSelect3(){
      this.queryParams2.pageNum = 1
      if(this.activeName === 'first'){
        this.getBigWinningBidsPage()
      }
      if(this.activeName === 'second'){
        this.getBigBidPage()
      }
    },
    handleCurrentChange(val){
      if(this.MaxPage<val){
        this.show_page = false
        this.$nextTick(() => {
          this.queryParams2.pageNum = 1
          this.$message.warning(`对不起，最多只能访问${this.MaxPage}页`)
          this.show_page = true
        })
      }else {
        this.queryParams2.pageNum = val
        if(this.activeName === 'first'){
          this.getBigWinningBidsPage()
        }
        if(this.activeName === 'second'){
          this.getBigBidPage()
        }
        // this.jump()
      }

    },
    handleSizeChange(val){
      this.queryParams2.pageNum = 1
      this.queryParams2.pageSize = val
      if(this.activeName === 'first'){
        this.getBigWinningBidsPage()
      }
      if(this.activeName === 'second'){
        this.getBigBidPage()
      }
    },
    getUipIdByCid(companyId){
      var params=[companyId]
      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=>{

      });
    },
    jump() {
      let total = 500
      let distance = document.documentElement.scrollTop || document.body.scrollTop
      // 平滑滚动，时长500ms，每10ms一跳，共50跳
      let step = total / 50
      if (total > distance) {
        smoothDown()
      } else {
        let newTotal = distance - total
        step = newTotal / 50
        smoothUp()
      }

      function smoothDown() {

        if (distance < total) {
          distance += step
          document.body.scrollTop = distance
          document.documentElement.scrollTop = distance
          setTimeout(smoothDown, 10)
        } else {
          document.body.scrollTop = total
          document.documentElement.scrollTop = total
        }
      }

      function smoothUp() {
        if (distance > total) {
          distance -= step
          document.body.scrollTop = distance
          document.documentElement.scrollTop = distance
          setTimeout(smoothUp, 10)
        } else {
          document.body.scrollTop = total
          document.documentElement.scrollTop = total
        }
      }
    },
    // 时间格式化
    formatDate(timeStr) {
      let date = new Date(Number(timeStr))
      let year = date.getFullYear()
      let month = String(date.getMonth() + 1).padStart(2, 0)
      let day = String(date.getDate()).padStart(2, 0)
      return `${year}-${month}-${day}`
    },
  }
};
</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;
        padding-left: 16px;
      }
      .content{
        background: #ffffff;
        padding: 16px;
        margin-top: 12px;
        .query-box{
          margin-bottom: 16px;
        }
      }
      .content_wap1{
        height: 430px;

      }
      .content_wap2{
        height: 430px;
      }
      .search{
        float:right;
        ::v-deep .el-form{
          .el-form-item--small.el-form-item{
            margin-bottom: 0;
          }
          .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: 13px 0;
            .list-title{
              font-size: 16px;
              font-weight: 700;
              color: #3D3D3D;
              line-height: 20px;
              cursor: pointer;
              .list-titel-a{
                text-decoration: none;
                color:#3D3D3D;
              }
              a{
                color: #3D3D3D;
              }
              a:hover{
                color:#0081FF;
              }
            }
            .list-content {
              margin-top: 12px;
              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;
              }
            }

          }
        }
      }
      .pagination-box{
        padding: 16px;
      }
      ::v-deep .selectTag{
        .el-select__tags{
          .el-tag{
            &:first-child{
              width: 65px;
            }
          }
        }
      }
    }
    .empty{
      margin: 0 auto;
      height: 300px;
      text-align: center;
      .img{
        width: 108px;
        height: 108px;
        margin-bottom: 24px;
        margin-top: 70px;
      }
      .p1{
        color: #333333;
        font-size: 16px;
      }
    }



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

