<template>
  <div class="home">
    <!--经理视角-->
    <div class="manage" v-if="user === 1">
      <el-row>
        <el-col :span="16">
          <div class="task-wrap">
            <div class="item" v-for="item in routerLink" @click="handleUrl(item)">
              <img class="icon-img" :src="`${item.imgUrl}`" />
              <p class="text">{{item.name}}</p>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="user" @click="handleChange">
            <h3>{{nickName}}
              <!--<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" :class="[`select-adaptive-${inputID1}`]" @change="iptAdaptive(inputID1,'','changeSelect1')"
                    clearable placeholder="项目地区">
                    <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="iptAdaptive(inputID2,true,'changeSelect1')"
                    :class="[`select-adaptive-${inputID2}`,queryParams.type.length > 1 ? 'selectTag' : '']" multiple collapse-tags clearable
                    placeholder="项目类型">
                    <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" :class="[`select-adaptive-${inputID3}`]" timeValue="近七天"
                    placeholder="中标日期" @handle-search="iptAdaptive(inputID3,'','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">
                  <template slot-scope="scope">
                    {{scope.row.count}}个
                  </template>
                </el-table-column>
                <el-table-column prop="money" label="中标金额" align="right" :sort-method="(a,b)=>{return a.money - b.money}" sortable>
                  <template slot-scope="scope">
                    {{scope.row.money}}万元
                  </template>
                </el-table-column>
              </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" :class="[`select-adaptive-${inputID4}`]" placeholder="中标金额"
                    @handle-search="iptAdaptive(inputID4,'','changeSelect2')" />
                </el-form-item>
                <el-form-item prop="address">
                  <el-select v-model="queryParams1.address" :class="[`select-adaptive-${inputID5}`]"
                    @change="iptAdaptive(inputID5,true,'changeSelect2')" clearable placeholder="项目地区">
                    <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="iptAdaptive(inputID6,true,'changeSelect2')"
                    :class="[`select-adaptive-${inputID6}`,queryParams1.type.length > 1 ? 'selectTag' : '']" clearable placeholder="项目类型">
                    <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" :class="[`select-adaptive-${inputID7}`]" timeValue="近七天"
                    placeholder="中标日期" @handle-search="iptAdaptive(inputID7,'','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">
                  <template slot-scope="scope">
                    {{scope.row.count}}个
                  </template>
                </el-table-column>
                <el-table-column prop="money" label="中标金额" align="right" :sort-method="(a,b)=>{return a.money - b.money}" sortable>
                  <template slot-scope="scope">
                    {{scope.row.money}}万元
                  </template>
                </el-table-column>
              </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="empty" v-if="projectList.length === 0 && !zxzbIsSkeleton">
              <img class="img" src="@/assets/images/project/empty.png">
              <div class="p1">抱歉，没找到相关数据</div>
            </div>
            <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 class="empty" v-if="zbList.length === 0 && !zhaobiaoIsSkeleton">
              <img class="img" src="@/assets/images/project/empty.png">
              <div class="p1">抱歉，没找到相关数据</div>
            </div>

            <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" :class="[`select-adaptive-${inputID8}`]" moneyValue="2亿以上"
                :placeholder="placeholder" @handle-search="iptAdaptive(inputID8,'','changeSelect3')" />
            </el-form-item>
            <el-form-item prop="provinceId">
              <el-select v-model="queryParams2.provinceId" :class="[`select-adaptive-${inputID9}`]" @change="iptAdaptive(inputID9,'','changeSelect3')"
                clearable placeholder="项目地区">
                <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="iptAdaptive(inputID10,true,'changeSelect3')" multiple collapse-tags clearable
                placeholder="项目类型" :class="[`select-adaptive-${inputID10}`,queryParams2.projects.length > 1 ? 'selectTag' : '']">
                <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" :class="[`select-adaptive-${inputID11}`]" timeValue="近七天"
                :placeholder="timePlaceholder" @handle-search="iptAdaptive(inputID11,'','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.scss";
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';
import { v4 } from "uuid";
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,
      nickName: '',
      permissions: [],
      routerLink: [
        { url: '/project/overview', name: '项目管理', imgUrl: require('@/assets/images/index/icon1.png') },
        { url: '/custom/overview', name: '客户管理', imgUrl: require('@/assets/images/index/icon2.png') },
        { url: '/macro/nationalEconomies', name: '全国经济大全', imgUrl: require('@/assets/images/index/icon3.png') },
        { url: '/enterpriseData/Group', name: '集团户', imgUrl: require('@/assets/images/index/icon4.png') },
        { url: '/enterpriseData/Owner', name: '查城投平台', imgUrl: require('@/assets/images/index/icon5.png') },
        { url: '/radar', name: '商机雷达', imgUrl: require('@/assets/images/index/icon6.png') },
      ],
      inputID1: this.getUid(),
      inputID2: this.getUid(),
      inputID3: this.getUid(),
      inputID4: this.getUid(),
      inputID5: this.getUid(),
      inputID6: this.getUid(),
      inputID7: this.getUid(),
      inputID8: this.getUid(),
      inputID9: this.getUid(),
      inputID10: this.getUid(),
      inputID11: this.getUid(),
    };
  },
  watch: {
    user(newValue) {
      this.getPlaceholder();
    }
  },
  created() {
    this.getPlaceholder();
    this.searchDic();
    this.getInfo();
    this.dataRegion();
    this.$nextTick(() => {
      this.getCountByCompany();
      this.getBidRank();
      this.getBigWinningBidsPage();
      this.getBigBidPage();
    });
  },
  methods: {
    //项目类型
    searchDic() {
      api.searchDic().then(res => {
        this.projectType = res.projectType;
      }).catch(error => { });
    },
    getInfo() {
      this.permissions = this.$store.state.user.permissions;
      this.nickName = this.$store.state.user.name;
    },
    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(() => {
        // 让  指定id 的 div 的_echarts_instance_属性值 为 空状态
        document.getElementById("zbtj-echarts").removeAttribute('_echarts_instance_');
        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: '#14C9C9',
                  lineStyle: {
                    width: 2
                  },
                }
              },
              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.money - a.money;
      });
      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(() => {
        // 让  指定id 的 div 的_echarts_instance_属性值 为 空状态
        document.getElementById("zbph-echarts").removeAttribute('_echarts_instance_');
        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: '#14C9C9',
                  lineStyle: {
                    width: 2
                  },
                }
              },
              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();
        }
      }

    },
    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 => {

      });
    },
    // 时间格式化
    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}`;
    },
    handleUrl(item) {
      switch (item.name) {
        case '项目管理':
          if (this.permissions.includes('project:info')) {
            this.$router.push({ path: item.url });
          } else {
            this.$message({
              message: '您好，请联系管理员开通页面权限',
              type: 'warning'
            });
          }
          break;
        case '客户管理':
          if (this.permissions.includes('customer:info')) {
            this.$router.push({ path: item.url });
          } else {
            this.$message({
              message: '您好，请联系管理员开通页面权限',
              type: 'warning'
            });
          }
          break;
        case '全国经济大全':
          if (this.permissions.includes('nationalEconomies:query')) {
            this.$router.push({ path: item.url });
          } else {
            this.$message({
              message: '您好，请联系管理员开通页面权限',
              type: 'warning'
            });
          }
          break;
        case '集团户':
          if (this.permissions.includes('group:query')) {
            this.$router.push({ path: item.url });
          } else {
            this.$message({
              message: '您好，请联系管理员开通页面权限',
              type: 'warning'
            });
          }
          break;
        case '查城投平台':
          if (this.permissions.includes('owner:query')) {
            this.$router.push({ path: item.url });
          } else {
            this.$message({
              message: '您好，请联系管理员开通页面权限',
              type: 'warning'
            });
          }
          break;
        case '商机雷达':
          if (this.permissions.includes('radar:query')) {
            this.$router.push({ path: item.url });
          } else {
            this.$message({
              message: '您好，请联系管理员开通页面权限',
              type: 'warning'
            });
          }
          break;
        default:
          break;
      }
    },
    handleSearch(name) {
      if (name === 'changeSelect1') {
        this.changeSelect1();
      }
      if (name === 'changeSelect2') {
        this.changeSelect2();
      }
      if (name === 'changeSelect3') {
        this.changeSelect3();
      }
    },
    async getPlaceholder() {
      try {
        await this.$nextTick();
        const doms = document.querySelectorAll("[class*='select-adaptive-']");
        if (doms?.length) {
          doms.forEach(dom => {
            const realStyles = window.getComputedStyle(dom);
            const ipt = dom.querySelector("input");
            const text = ipt.getAttribute("placeholder");
            const textContainer = document.createElement("span");
            textContainer.style.setProperty("visibility", "hidden");
            textContainer.style.setProperty("display", "inline-block");
            textContainer.style.setProperty("font-size", "14px");
            const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
            hasPadding ? textContainer.style.setProperty("padding", realStyles.paddingRight) : null;
            textContainer.style.setProperty("box-sizing", "border-box");
            textContainer.textContent = text;
            document.body.append(textContainer);
            // 加上按钮宽度 以及按钮左外边距
            let containerWidth = textContainer.offsetWidth + 50;
            textContainer.remove();
            dom.style.setProperty("width", `${containerWidth}px`);
          });
        }
      } catch (error) {

      }
    },
    iptAdaptive(uid, multiple = false, name) {
      multiple ? this.multipleAdaptiveHandle(uid, name) : this.iptAdaptiveHandle(uid, name);
    },
    getUid() {
      return v4();
    },
    // 多选处理
    async multipleAdaptiveHandle(uid, name) {
      try {
        await this.$nextTick();
        const dom = document.querySelector(`.select-adaptive-${uid}`);
        const iptChild = dom.querySelector(".el-input__inner");
        if (dom) {
          const textContainer = document.createElement("span");
          const textName = `text-${uid}`;
          textContainer.classList.add(textName);
          const selectChildren = dom.querySelectorAll(".el-tag");
          if (selectChildren.length) {
            let width = 0;
            selectChildren.forEach(item => {
              const text = item.textContent;
              const itemInfo = window.getComputedStyle(item);
              textContainer.style.setProperty("visibility", "hidden");
              textContainer.style.setProperty("display", "inline-block");
              textContainer.style.setProperty("font-size", "14px");
              textContainer.style.setProperty("padding", itemInfo.padding);
              textContainer.style.setProperty("box-sizing", "border-box");
              textContainer.textContent = text;
              document.body.append(textContainer);
              width += textContainer.offsetWidth + parseInt(itemInfo.marginLeft) + parseInt(itemInfo.marginRight);
              textContainer.remove();
            });
            dom.style.setProperty("width", `${width + 50}px`);
            this.handleSearch(name);
            return;
          }
          textContainer.style.setProperty("visibility", "hidden");
          textContainer.style.setProperty("display", "inline-block");
          textContainer.style.setProperty("font-size", "14px");
          textContainer.style.setProperty("padding", "0px 8px");
          textContainer.style.setProperty("box-sizing", "border-box");
          textContainer.textContent = iptChild.getAttribute("placeholder");
          document.body.append(textContainer);
          let containerWidth = textContainer.offsetWidth + 12 + 8;
          // let containerWidth = 130;
          textContainer.remove();
          dom.style.setProperty("width", `${containerWidth}px`);
          this.handleSearch(name);
        }

      } catch (error) {
        console.log(error);
      }
    },
    // 单选处理
    async iptAdaptiveHandle(uid, name) {
      try {
        await this.$nextTick();
        const dom = document.querySelector(`.select-adaptive-${uid}`);
        const realStyles = window.getComputedStyle(dom);
        if (dom) {
          const iptChild = dom.querySelector(".el-input__inner");
          const textContainer = document.createElement("span");
          const textName = `text-${uid}`;
          textContainer.classList.add(textName);
          textContainer.style.setProperty("visibility", "hidden");
          textContainer.style.setProperty("display", "inline-block");
          textContainer.style.setProperty("font-size", "14px");
          const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
          hasPadding ? textContainer.style.setProperty("padding", "0px 8px") : null;
          textContainer.style.setProperty("box-sizing", "border-box");
          textContainer.textContent = iptChild.value ? iptChild.value : iptChild.getAttribute("placeholder");
          document.body.append(textContainer);
          let containerWidth = textContainer.offsetWidth + 50;

          textContainer.remove();
          dom.style.setProperty("width", `${containerWidth}px`);
        }
        this.handleSearch(name);
      } catch (error) {

      }
    },
  }
};
</script>

<style scoped lang="scss">
p {
  padding: 0;
  margin: 0;
}
.home {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 16px 24px;
  box-sizing: border-box;
  @import "@/assets/styles/search-common.scss";
  ::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 {
    ::v-deep .el-form {
      .el-select {
        .el-select__tags {
          flex-wrap: inherit;
          .el-tag {
            /*max-width: 130px;*/
          }
        }
      }
    }
    .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;
            border: 0;
          }
        }
        .is-focus {
          .el-input__inner {
            background: #f4f6f9;
          }
        }
      }
    }
    .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;
          }
          .el-select {
            width: 108px;
          }
        }
      }
      .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;
    }
  }
  .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>

