Skip to content

D
dsk-operate-sys-cscec
Commit 145c204e authored by danfuman's avatar danfuman
Browse files
Options

修改

parent 9fde9f80
Hide whitespace changes
Inline Side-by-side
Showing with 2704 additions and 1035 deletions
dsk-operate-ui/src/views/index.vue
View file @ 145c204e
<template> <template>
<div class="app-container home"> <div class="app-container home">
<!--经理视角--> <el-row :gutter="20">
<div class="manage" v-if="user === 1"> <el-col :span="18">
<el-row> <div class="content-left">
<el-col :span="16">
<div class="task-wrap"> <div class="task-wrap">
<div class="item"> <div class="item">
<img class="icon-img" src="@/assets/images/index/icon1.png"/> <img class="left" src="@/assets/images/index/icon1.png"/>
<p class="text">项目管理</p> <div class="right">
</div> <p class="title">即将开标项目</p>
<div class="item"> <p class="number">36</p>
<img class="icon-img" src="@/assets/images/index/icon2.png"/> <p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p>
<p class="text">客户管理</p> </div>
</div> </div>
<div class="item"> <div class="item">
<img class="icon-img" src="@/assets/images/index/icon3.png"/> <img class="left" src="@/assets/images/index/icon2.png"/>
<p class="text">宏观经济</p> <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>
<div class="item"> <div class="item">
<img class="icon-img" src="@/assets/images/index/icon4.png"/> <img class="left" src="@/assets/images/index/icon3.png"/>
<p class="text">集团户</p> <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>
<div class="item"> <div class="item">
<img class="icon-img" src="@/assets/images/index/icon5.png"/> <img class="left" src="@/assets/images/index/icon4.png"/>
<p class="text">查城投平台</p> <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>
<div class="item"> <div class="item add">
<img class="icon-img" src="@/assets/images/index/icon6.png"/> <span class="yd"><i></i><i></i><i></i><i></i><i></i><i></i></span>
<p class="text">商机雷达</p> <div class="btn"><i class="el-icon-plus"></i>新建待办任务</div>
</div> </div>
</div> </div>
</el-col> <!--经理视角-->
<el-col :span="8"> <div v-if="user === 1" class="content-wrap">
<div class="user" @click="handleChange"> <el-col :span="12">
<h3>刘毅<span>总经理</span></h3> <div class="record">
<p>您好，祝您工作顺利每一天</p> <div class="flex-box query-box">
</div> <div class="flex-box query-params">
</el-col> <span class="common-title">跟进记录</span>
</el-row> </div>
<div class="tips">注：数据来源大司空建筑大数据平台，统计范围为全国公开的施工内土地交易项目，未公开的不含在内</div> <div class="flex-box query-ability">
<div class="content content_wap1"> <div class="select-popper">
<div class="flex-box query-box"> <div class="area">{{area}}<i class="sjx"></i></div>
<div class="flex-box query-params"> <el-select v-model="area" class="select-multiple" placeholder="请选择">
<span class="common-title">集团中标统计</span> <el-option v-for="(item,index) in areaList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</div>
<div class="select-popper">
<div class="month">{{date}}<i class="sjx"></i></div>
<el-select v-model="date" class="select-multiple" placeholder="请选择">
<el-option v-for="(item,index) in dateList" :key="index" :label="item" :value="item"></el-option>
</el-select>
</div>
</div>
</div>
<div class="list">
<div class="item" v-for="(item,index) in gjjlData" :key="index">
<h3>{{item.title}}</h3>
<p>
<span>跟进人：{{item.user}}</span>
<span>关联企业：{{item.name}}</span>
</p>
</div>
</div>
<p class="more">更多跟进记录 ></p>
</div>
</el-col>
<el-col :span="12">
<div class="ranking">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">业绩排名</span>
</div>
<div class="flex-box query-ability">
<div class="select-popper">
<div class="area">{{area}}<i class="sjx"></i></div>
<el-select v-model="area" class="select-multiple" placeholder="请选择">
<el-option v-for="(item,index) in areaList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</div>
<div class="select-popper">
<div class="month">{{date}}<i class="sjx"></i></div>
<el-select v-model="date" class="select-multiple" placeholder="请选择">
<el-option v-for="(item,index) in dateList" :key="index" :label="item" :value="item"></el-option>
</el-select>
</div>
</div>
</div>
<div class="main">
<div class="amount">
<p>
<span>实际已完成(万元)</span>
<span>产值目标(万元)</span>
</p>
<p>
<span class="money">359,800.00</span>
<span class="money">359,800.00</span>
</p>
<el-progress class="progress1" :text-inside="true" :stroke-width="14" :percentage="40"></el-progress>
<el-progress class="progress2" :text-inside="true" :stroke-width="14" :percentage="70"></el-progress>
</div>
<div style="background: #ffffff;margin: 0 12px 12px 12px;">
<div id="pm-echarts" style="height: 400px;"></div>
</div>
</div>
</div>
</el-col>
</div> </div>
</div> <div v-if="user === 1" class="analysis">
<el-row> <div class="flex-box query-box">
<el-col :span="14"> <div class="flex-box query-params">
<div id="zbtj-echarts" style="height: 300px;"></div> <span class="common-title">经营分析</span>
</el-col> </div>
<el-col :span="10"> <div class="flex-box query-ability">
<div class="search"> <div class="tabs">
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small"> <!--<div class="label" v-for="(item,index) in typeList" :class="typeIndex === index ? 'color':''" @click="handleClick(index)">{{item.name}}</div>-->
<el-form-item prop="address"> </div>
<el-select v-model="queryParams.address" placeholder="项目地区" style="width: 150px;"> <div class="select-popper">
<el-option v-for="(item,index) in addressList" :key="index" :label="item.label" :value="item.value"></el-option> <div class="area">{{area}}<i class="sjx"></i></div>
</el-select> <el-select v-model="area" class="select-multiple" placeholder="请选择">
</el-form-item> <el-option v-for="(item,index) in areaList" :key="index" :label="item.name" :value="item.name"></el-option>
<el-form-item prop="type">
<el-select v-model="queryParams.type" multiple collapse-tags clearable placeholder="项目类型" :class="queryParams.type.length > 1 ? 'selectTag' : ''" style="width: 170px;">
<el-option v-for="(item,index) in typeList" :key="index" :label="item" :value="item"></el-option>
</el-select> </el-select>
</el-form-item> </div>
<el-form-item prop="time"> </div>
<custom-time-select
:timeList="timeList"
placeholder="中标日期"
@handle-search="changeSelect"/>
</el-form-item>
</el-form>
</div> </div>
<div class="box-right"> <div>
<el-table <div id="fx-echarts" style="height: 280px;"></div>
:data="jtList"
border
max-height="250"
fit
highlight-current-row
>
<el-table-column prop="name" label="集团名称" width="120"/>
<el-table-column prop="count" label="中标数量（个）" align="right" sortable/>
<el-table-column prop="amount" label="中标金额（万元)" align="right" sortable/>
</el-table>
</div> </div>
</el-col>
</el-row>
</div>
<div class="content content_wap2">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">大项目中标排行榜</span>
</div> </div>
</div>
<el-row> <!--员工视角-->
<el-col :span="14"> <div v-if="user === 2" class="content-db">
<div id="zbph-echarts" style="height: 500px;"></div> <div class="flex-box query-box">
</el-col> <div class="flex-box query-params">
<el-col :span="10"> <span class="common-title">待办</span>
<div class="search">
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
<el-form-item prop="money">
<custom-money-select
:moneyList="moneyList"
v-model="queryParams.money"
placeholder="中标金额"
@handle-search="changeSelect" />
</el-form-item>
<el-form-item prop="address">
<el-select v-model="queryParams.address" placeholder="项目地区" style="width: 150px;">
<el-option v-for="(item,index) in addressList" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="type">
<el-select v-model="queryParams.type" multiple collapse-tags clearable placeholder="项目类型" :class="queryParams.type.length > 1 ? 'selectTag' : ''" style="width: 170px;">
<el-option v-for="(item,index) in typeList" :key="index" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="time">
<custom-time-select
:timeList="timeList"
v-model="queryParams.time"
placeholder="中标日期"
@handle-search="changeSelect"/>
</el-form-item>
</el-form>
</div>
<div class="box-right">
<el-table
:data="jtList"
border
max-height="400"
fit
highlight-current-row
>
<el-table-column prop="name" label="企业名称" width="120"/>
<el-table-column prop="count" label="中标数量（个）" align="right" sortable/>
<el-table-column prop="amount" label="中标金额（万元)" align="right" sortable/>
</el-table>
</div>
</el-col>
</el-row>
</div>
<div class="content_wap3">
<el-tabs v-model="activeName" @tab-click="handleClickTab">
<el-tab-pane label="大项目最新中标" name="first">
<skeleton v-if="zxzbIsSkeleton" style="padding: 16px"></skeleton>
<div class="list" v-if="!zxzbIsSkeleton">
<div class="item" v-for="(item,index) in projectList" :key="index">
<p class="list-title"><router-link :to="`/biddetail/${item.id}`" tag="a" class="a-link" v-if="item.id" v-html="item.projectName"></router-link></p>
<div class="list-content">
<p class="list-content-text">
<span>中标企业：</span>
<span>{{item.companyName || '--'}}</span>
</p>
<p class="list-content-text">
<span>中标金额：</span>
<span>{{item.amount}}万元</span>
</p>
<p class="list-content-text">
<span>中标日期：</span>
<span>{{item.winBidTime || '--'}}</span>
</p>
<p class="list-content-text">
<span>招标人：</span>
<span>{{item.projectUnit || '--'}}</span>
</p>
</div>
</div> </div>
<div class="flex-box query-ability"><span>9</span>全部待办 ></div>
</div> </div>
<div class="pagination-box" v-if="totalCount>queryParams2.pageSize && !zxzbIsSkeleton"> <div class="list">
<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 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>
</el-tab-pane> </div>
<el-tab-pane label="大项目最新招标" name="second"> <div v-if="user === 2" class="trends">
<skeleton v-if="zhaobiaoIsSkeleton" style="padding: 16px"></skeleton> <el-tabs v-model="activeName" @tab-click="handleClickTab">
<div v-if="!zhaobiaoIsSkeleton" class="list"> <el-tab-pane label="甲方舆情" name="first">
<div class="item" v-for="(item,index) in zbList" :key="index"> <div class="main-box">
<p class="list-title"><router-link :to="`/biddetail/${item.bid}`" tag="a" class="a-link" v-if="item.bid" v-html="item.projectName"></router-link></p> <el-timeline>
<div class="list-content"> <el-timeline-item
<p class="list-content-text"> v-for="(item, index) in trendsList"
<span>总投资：</span> :key="index"
<span>{{item.projectAmount}}万元</span> icon="el-icon-time">
</p> <div class="time">{{item.time}}<span class="company">{{item.name}}</span></div>
<p class="list-content-text"> <div class="cont">{{item.main}}</div>
<span>招标人：</span> </el-timeline-item>
<span>{{item.tenderee || '--'}}</span> </el-timeline>
</p> </div>
<p class="list-content-text"> <!--<div class="check">全部甲方舆情 ></div>-->
<span>发布日期：</span> </el-tab-pane>
<span>{{item.issueTime || '--'}}</span> <el-tab-pane label="监控动态" name="second">
</p> <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>
<!--<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 v-if="user === 1">刘毅<span>总经理</span></h3>
<h3 v-if="user === 2">李婷婷<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> </div>
<div class="pagination-box" v-if="zbTableTotal>queryParams2.pageSize && !zhaobiaoIsSkeleton"> <div class="list">
<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 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>
</el-tab-pane> </div>
</el-tabs> <div class="zbgg" v-if="user === 1">
<div class="search"> <span class="common-title">中标公告</span>
<el-form ref="queryForm" :model="queryParams2" :inline="true" size="small"> <div class="list">
<el-form-item prop="amount">
<custom-money-select
:moneyList="moneyList"
v-model="amount"
placeholder="中标金额"
@handle-search="changeSelect3" />
</el-form-item>
<el-form-item prop="provinceId">
<el-select v-model="queryParams2.provinceId" placeholder="项目地区" style="width: 150px;">
<el-option v-for="(item,index) in addressList" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="projects">
<el-select v-model="queryParams2.projects" multiple collapse-tags clearable placeholder="项目类型" :class="queryParams2.projects.length > 1 ? 'selectTag' : ''" style="width: 170px;">
<el-option v-for="(item,index) in typeList" :key="index" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="time">
<custom-time-select
:timeList="timeList"
v-model="queryParams2.time"
placeholder="中标日期"
@handle-search="changeSelect"/>
</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"> <div class="item">
<img class="left" src="@/assets/images/index/icon1.png"/> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<div class="right"> <p>
<p class="title">即将开标项目</p> <span>中标金额：4754.34</span>
<p class="number">36</p> <span>中标单位：中铁十二局集团</span>
<p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p> </p>
</div>
</div> </div>
<div class="item"> <div class="item">
<img class="left" src="@/assets/images/index/icon2.png"/> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<div class="right"> <p>
<p class="title">重点关注项目</p> <span>中标金额：4754.34</span>
<p class="number">36</p> <span>中标单位：中铁十二局集团</span>
<p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p> </p>
</div>
</div> </div>
<div class="item"> <div class="item">
<img class="left" src="@/assets/images/index/icon3.png"/> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<div class="right"> <p>
<p class="title">重点关注客户</p> <span>中标金额：4754.34</span>
<p class="number">36</p> <span>中标单位：中铁十二局集团</span>
<p class="compare">较上月 <span class="down">-3<img src="@/assets/images/index/down.png"/></span></p> </p>
</div>
</div> </div>
<div class="item"> <div class="item">
<img class="left" src="@/assets/images/index/icon4.png"/> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<div class="right"> <p>
<p class="title">储备合作客户</p> <span>中标金额：4754.34</span>
<p class="number">36</p> <span>中标单位：中铁十二局集团</span>
<p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p> </p>
</div>
</div> </div>
<div class="item add"> <div class="item">
<span class="yd"><i></i><i></i><i></i><i></i><i></i><i></i></span> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<div class="btn"><i class="el-icon-plus"></i>新建待办任务</div> <p>
<span>中标金额：4754.34</span>
<span>中标单位：中铁十二局集团</span>
</p>
</div> </div>
</div> <div class="item">
<div class="content-db"> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<div class="flex-box query-box"> <p>
<div class="flex-box query-params"> <span>中标金额：4754.34</span>
<span class="common-title">待办</span> <span>中标单位：中铁十二局集团</span>
</div> </p>
<div class="flex-box query-ability"><span>9</span>全部待办 ></div>
</div> </div>
<div class="list"> <div class="item">
<div class="item" v-for="(item,index) in gjjlData" :key="index" v-if='index < 3'> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<h3>{{item.title}}</h3> <p>
<p> <span>中标金额：4754.34</span>
<span>拜访时间：{{item.time}}</span> <span>中标单位：中铁十二局集团</span>
<span>关联企业：{{item.name}}</span> </p>
</p> </div>
<div class="btn">写跟进<i class="el-icon-edit"></i></div> <div class="item">
</div> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额：4754.34</span>
<span>中标单位：中铁十二局集团</span>
</p>
</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>
</div> </div>
</el-col> <div v-if="user === 2" class="zbhxr">
<el-col :span="6"> <span class="common-title">竞争对手中标候选人公告</span>
<div class="content-right"> <div class="list">
<div class="user" @click="handleChange"> <div class="item">
<h3>李婷婷<span>营销员</span></h3> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>您好，祝您工作顺利每一天</p> <p>
</div> <span>中标金额：4754.34</span>
<div class="search"> </p>
<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>
<div class="list"> <div class="item">
<div class="item"> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<img src="@/assets/images/index/cb_icon4.png"/> <p>
<p>电力项目</p> <span>中标金额：4754.34</span>
</div> </p>
<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> <div class="item">
<div class="zbhxr"> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<span class="common-title">竞争对手中标候选人公告</span> <p>
<div class="list"> <span>中标金额：4754.34</span>
<div class="item"> </p>
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> </div>
<p> <div class="item">
<span>中标金额：4754.34</span> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
</p> <p>
</div> <span>中标金额：4754.34</span>
<div class="item"> </p>
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> </div>
<p> <div class="item">
<span>中标金额：4754.34</span> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
</p> <p>
</div> <span>中标金额：4754.34</span>
<div class="item"> </p>
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> </div>
<p> <div class="item">
<span>中标金额：4754.34</span> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
</p> <p>
</div> <span>中标金额：4754.34</span>
<div class="item"> </p>
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> </div>
<p> <div class="item">
<span>中标金额：4754.34</span> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
</p> <p>
</div> <span>中标金额：4754.34</span>
<div class="item"> </p>
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> </div>
<p> <div class="item">
<span>中标金额：4754.34</span> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
</p> <p>
</div> <span>中标金额：4754.34</span>
<div class="item"> </p>
<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> </div>
</div> </div>
</el-col> </div>
</el-row> </el-col>
</div> </el-row>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import dataRegion from '@/assets/json/dataRegion'
import "@/assets/styles/public.css"; import "@/assets/styles/public.css";
import CustomTimeSelect from './component/CustomTimeSelect'
import CustomMoneySelect from './component/CustomMoneySelect'
import skeleton from './component/skeleton'
import { bigWinningBidsPage,bigBidPage } from '@/api/index'
export default { export default {
name: "Index", name: "Index",
components: {
CustomTimeSelect,CustomMoneySelect,skeleton
},
data() { data() {
return { return {
// 版本号 // 版本号
version: "3.8.5", version: "3.8.5",
typeList:[
{name:'待成交项目数'},
{name:'待成交总金额'},
{name:'成交项目金额'},
{name:'成交项目总数'},
{name:'储备项目总数'},
{name:'储备项目总金额'},
],
typeIndex:0,
jyfxData:['1月','2月','3月','4月','5月','6月'],
jyfxData1:[
{
dcjxm:'103',
dcjzje:'123',
cjxmje:'153',
cjxmzs:'113',
cbxmzs:'93',
cbxmzje:'193',
},
{
dcjxm:'256',
dcjzje:'223',
cjxmje:'113',
cjxmzs:'163',
cbxmzs:'193',
cbxmzje:'123',
},
{
dcjxm:'103',
dcjzje:'123',
cjxmje:'153',
cjxmzs:'113',
cbxmzs:'93',
cbxmzje:'193',
},
{
dcjxm:'256',
dcjzje:'223',
cjxmje:'113',
cjxmzs:'163',
cbxmzs:'193',
cbxmzje:'123',
},
{
dcjxm:'103',
dcjzje:'123',
cjxmje:'153',
cjxmzs:'113',
cbxmzs:'93',
cbxmzje:'193',
},
{
dcjxm:'256',
dcjzje:'223',
cjxmje:'113',
cjxmzs:'163',
cbxmzs:'193',
cbxmzje:'123',
},
],
gjjlData:[ gjjlData:[
{ {
title:'今天拜访了重庆交通局杨科长，洽谈比较愉快，预计下月有项目招标，希望能有机会合作。', title:'今天拜访了重庆交通局杨科长，洽谈比较愉快，预计下月有项目招标，希望能有机会合作。',
...@@ -499,55 +481,30 @@ export default { ...@@ -499,55 +481,30 @@ export default {
], ],
pmData:[ pmData:[
{ {
name:'中治建工集团有限公司', name:'朱博',
value:334, value:334,
value1:164, value1:164,
}, },
{ {
name:'中机中联工程有限公司', name:'陈伟',
value:230, value:230,
value1:130, value1:130,
}, },
{ {
name:'中铁五局集团第六公司', name:'张天翼',
value:156, value:156,
value1:150, value1:150,
}, },
{ {
name:'中铁长江交通设计公司', name:'李晨旭',
value:112, value:112,
value1:130, value1:130,
}, },
{ {
name:'重庆设计院有限公公司', name:'徐阳',
value:110, value:110,
value1:90, 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', rankIconsSize:'24',
rankIcons:[// 排序图标 rankIcons:[// 排序图标
...@@ -556,11 +513,6 @@ export default { ...@@ -556,11 +513,6 @@ export default {
require('@/assets/images/index/3.png'), require('@/assets/images/index/3.png'),
require('@/assets/images/index/4.png'), require('@/assets/images/index/4.png'),
require('@/assets/images/index/5.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, user:1,
activeName:'first', activeName:'first',
...@@ -606,254 +558,296 @@ export default { ...@@ -606,254 +558,296 @@ export default {
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。' main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
}, },
], ],
jtList:[ area:'西南地区',
{ areaList:[
name:'中交集团',
count:'24534',
amount:'23011'
},
{ {
name:'中建集团', name:'西南地区'
count:'11534',
amount:'22331'
}, },
{ {
name:'中冶集团', name:'华中地区'
count:'15534',
amount:'20231'
}, },
{ {
name:'中国铁路', name:'华南地区'
count:'6534',
amount:'11231'
}, },
{ {
name:'中国水利', name:'华东地区'
count:'9534',
amount:'4231'
}, },
{ {
name:'中建集团', name:'华北地区'
count:'14534',
amount:'23231'
}, },
{ {
name:'中建集团', name:'东北地区'
count:'24534',
amount:'15231'
}, },
{ {
name:'中国水利', name:'西北地区'
count:'2334',
amount:'5231'
},
{
name:'中建集团',
count:'2534',
amount:'8231'
},
{
name:'中交集团',
count:'2334',
amount:'9231'
}, },
], ],
addressList:[], date:'不限',
typeList:['施工类项目','施工类项目1','施工类项目2','施工类项目3','施工类项目4'], dateList:['不限','今日','昨日','近三天','近七天']
queryParams:{ };
address:'',
type:[],
money:'',
time:'',
},
queryParams1:{
address:'',
type:[],
money:'',
time:'',
},
queryParams2:{
provinceId:'',
projects:[],
amount:'',
time:'',
pageNum:1,
pageSize:10
},
amount:'',
timeList: ['近三天', '近七天', '近半月', '自定义'],
moneyList: ['2亿以上', '5亿以上', '10亿以上', '自定义'],
projectList:[],
zbList:[],
totalCount:0,
zbTableTotal:0,
zxzbIsSkeleton:true,
zhaobiaoIsSkeleton:true,
};
}, },
created() { created() {
this.dataRegion()
this.getBigWinningBidsPage()
if(this.user === 1){ if(this.user === 1){
this.$nextTick(()=>{ this.$nextTick(()=>{
this.initChart(this.jtList) this.initChart()
this.initChart1() this.initChart1()
}) })
} }
}, },
methods: { methods: {
getBigWinningBidsPage(){ handleClick(index){
let params=this.queryParams2; this.typeIndex=index;
if(params.amount){
}
this.zxzbIsSkeleton=true
bigWinningBidsPage(this.queryParams2).then(res=>{
this.zxzbIsSkeleton=false;
if(res.code == 200){
this.projectList=res.rows;
this.totalCount=res.total;
}
})
},
getBigBidPage(){
let params={};
this.zhaobiaoIsSkeleton=true
bigBidPage(this.queryParams2).then(res=>{
this.zhaobiaoIsSkeleton=false
if(res.code == 200){
this.zbList=res.rows;
this.zbTableTotal=res.total;
}
})
}, },
//地区 initChart() {
async dataRegion() { let myChart = echarts.init(document.getElementById("fx-echarts"))
var str = []; let option ={
for (let x = 0; x < 3; x++) { legend: {
for (let i = 0; i < dataRegion.length; i++) { x:'right',
if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) { padding:[3,120,0,0],
str.push({ itemHeight:8,
'id': dataRegion[i].id, itemWidth:16,
"label": dataRegion[i].regionName, },
"short": dataRegion[i].short, tooltip: {
"value": dataRegion[i].parentId, trigger: 'axis',
"children": [] axisPointer: {
}); type: 'line',
} label: {
} backgroundColor: '#FFFFFF'
}
this.addressList = str;
},
initChart(data) {
console.log(data)
this.$nextTick(()=>{
let myChart = echarts.init(document.getElementById("zbtj-echarts"))
let option ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
} }
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.jyfxData,
},
yAxis: {
type: 'value',
},
grid: {
top:40,
left:30,
right:10,
bottom:20,
},
// dcjxm:'256',
// dcjzje:'223',
// cjxmje:'113',
// cjxmzs:'163',
// cbxmzs:'193',
// cbxmzje:'123',
series: [
{
data: this.jyfxData1.map(item => item.dcjxm),
name:'待成交项目数',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#81D4BC",
},
itemStyle:{
color: "#81D4BC",
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(189, 249, 232, 1)'
}, {
offset: 1, color: 'rgba(189, 249, 232, 0)'
} ],
global: false
}
},
}, },
xAxis: { {
type: 'category', data: this.jyfxData1.map(item => item.dcjzje),
axisLabel: { //坐标轴刻度标签的相关设置 name:'待成交总金额',
margin: 15, //刻度标签与轴线之间的距离 type: 'line',
color:"#666666" smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#9EE474",
}, },
axisTick: false, //坐标轴刻度 itemStyle:{
axisPointer: { color: "#9EE474",
type: 'shadow' },
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(208, 250, 183, 1)'
}, {
offset: 1, color: 'rgba(208, 250, 183, 0)'
} ],
global: false
}
}, },
data: data.map(item => item.name),
}, },
yAxis: [ {
{ data: this.jyfxData1.map(item => item.cjxmje),
type: 'value', name:'成交项目金额',
axisLabel: { //坐标轴刻度标签的相关设置 type: 'line',
color:"#666666" smooth: true,
}, emphasis: {
name: '单位：个', disabled: true,
nameLocation: 'start', focus: 'none'
nameTextStyle: { },
padding: [0, 0, 0, -60], // 四个数字分别为上右下左与原位置距离 //设置折线颜色和粗细
color: '#666666', lineStyle: {
width: 2,
color: "#E1B3FF",
},
itemStyle:{
color: "#E1B3FF",
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(233, 200, 255, 1)'
}, {
offset: 1, color: 'rgba(233, 200, 255, 0)'
} ],
global: false
} }
}, },
{ },
type: 'value', {
axisLabel: { //坐标轴刻度标签的相关设置 data: this.jyfxData1.map(item => item.cjxmzs),
color:"#666666" name:'成交项目总数',
}, type: 'line',
name: '单位：万元', smooth: true,
nameLocation: 'start', emphasis: {
nameTextStyle: { disabled: true,
padding: [0, 0, 0, 72], // 四个数字分别为上右下左与原位置距离 focus: 'none'
color: '#666666', },
}, //设置折线颜色和粗细
splitLine: { lineStyle: {
show: true, width: 2,
lineStyle: { color: "#ADC0FF",
type: 'dashed', },
color: ['#FFFFFF'] itemStyle:{
} color: "#ADC0FF",
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(173, 192, 255, 1)'
}, {
offset: 1, color: 'rgba(173, 192, 255, 0)'
} ],
global: false
} }
} },
],
grid: {
top:30,
left:80,
right:90,
bottom:30,
}, },
series: [ {
{ data: this.jyfxData1.map(item => item.cbxmzs),
name:'中标金额（万元）', name:'储备项目总数',
smooth: false, //平滑 type: 'line',
type:"line", smooth: true,
symbolSize: 6, emphasis: {
yAxisIndex: 1, disabled: true,
tooltip: { focus: 'none'
valueFormatter: function (value) {
return value + '万元'
}
},
itemStyle: {
color: '#14C9C9'
},
data:data.map(item => item.amount),
}, },
{ //设置折线颜色和粗细
name:'中标总数（个）', lineStyle: {
type: 'bar', width: 2,
barWidth: 20, color: "#67B3FD",
tooltip: { },
valueFormatter: function (value) { itemStyle:{
return value + '个'; color: "#67B3FD",
} },
}, //设置面积区域为渐变效果
itemStyle: { areaStyle: {
normal:{ color: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ type: 'linear',
offset: 0, x: 0,
color: '#56A5FF' y: 0,
}, { x2: 0,
offset: 1, y2: 1,
color: '#1B8EFF' colorStops: [{
}]) offset: 0, color: 'rgba(192, 224, 255, 1)'
} }, {
}, offset: 1, color: 'rgba(192, 224, 255, 0)'
data:data.map(item => item.count), } ],
} global: false
] }
} },
myChart.setOption(option); },
window.addEventListener("resize", function () { {
myChart.resize();//图表跟随页面大小变化宽度 data: this.jyfxData1.map(item => item.cbxmzje),
}); name:'储备项目总金额',
}) type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#BEECFF",
},
itemStyle:{
color: "#BEECFF",
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(165, 229, 255, 1)'
}, {
offset: 1, color: 'rgba(165, 229, 255, 0)'
} ],
global: false
}
},
},
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
}, },
initChart1(){ initChart1(){
var rankPic = [ var rankPic = [
...@@ -862,20 +856,15 @@ export default { ...@@ -862,20 +856,15 @@ export default {
require('@/assets/images/index/3.png'), require('@/assets/images/index/3.png'),
require('@/assets/images/index/4.png'), require('@/assets/images/index/4.png'),
require('@/assets/images/index/5.png'), require('@/assets/images/index/5.png'),
require('@/assets/images/index/6.png'),
require('@/assets/images/index/7.png'),
require('@/assets/images/index/8.png'),
require('@/assets/images/index/9.png'),
require('@/assets/images/index/10.png'),
] ]
let myChart = echarts.init(document.getElementById("zbph-echarts")) let myChart = echarts.init(document.getElementById("pm-echarts"))
let option ={ let option ={
legend: { legend: {
show: true, show: true,
x:'right', x:'center',
y:'top', y:'bottom',
padding:[10,0,10,0], padding:[0,0,10,0],
itemWidth: 24, itemWidth: 24,
itemHeight: 10, itemHeight: 10,
textStyle:{ textStyle:{
...@@ -899,7 +888,7 @@ export default { ...@@ -899,7 +888,7 @@ export default {
} }
}, },
axisLabel: { axisLabel: {
margin: 200, margin: 80,
textStyle: { textStyle: {
align: 'left', align: 'left',
}, },
...@@ -911,7 +900,6 @@ export default { ...@@ -911,7 +900,6 @@ export default {
1: { 1: {
height: 24, height: 24,
width: 24, width: 24,
// marginBottom:-15,
align: 'center', align: 'center',
backgroundColor: { backgroundColor: {
image: rankPic[0] image: rankPic[0]
...@@ -949,46 +937,6 @@ export default { ...@@ -949,46 +937,6 @@ export default {
image: rankPic[4] 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]
}
},
} }
}, },
}, },
...@@ -997,7 +945,7 @@ export default { ...@@ -997,7 +945,7 @@ export default {
}, },
grid: { grid: {
left: '20%', left: '20%',
top: 40, top: 20,
right: 20, right: 20,
bottom: 60, bottom: 60,
}, },
...@@ -1016,6 +964,10 @@ export default { ...@@ -1016,6 +964,10 @@ export default {
data: this.pmData.map(item => item.value), data: this.pmData.map(item => item.value),
barGap: 0, barGap: 0,
type: 'bar', type: 'bar',
// stack: 'total',
// emphasis: {
// focus: 'series'
// },
itemStyle:{ itemStyle:{
color: '#14C9C9', color: '#14C9C9',
barBorderRadius:[0, 20, 20, 0] barBorderRadius:[0, 20, 20, 0]
...@@ -1023,10 +975,15 @@ export default { ...@@ -1023,10 +975,15 @@ export default {
barWidth: 8, barWidth: 8,
}, },
{ {
// realtimeSort: true,
name:'目标产值', name:'目标产值',
data: this.pmData.map(item => item.value1), data: this.pmData.map(item => item.value1),
barGap: 0, barGap: 0,
type: 'bar', type: 'bar',
// stack: 'total',
// emphasis: {
// focus: 'series'
// },
itemStyle:{ itemStyle:{
color: '#92C9FF', color: '#92C9FF',
barBorderRadius:[0, 20, 20, 0] barBorderRadius:[0, 20, 20, 0]
...@@ -1041,15 +998,8 @@ export default { ...@@ -1041,15 +998,8 @@ export default {
}); });
}, },
handleClickTab(){ handleClickTab(){
this.queryParams2.pageNum=1;
if(this.activeName === 'first'){
this.getBigWinningBidsPage()
}
if(this.activeName === 'second'){
this.getBigBidPage()
}
}, },
handleClickTab1(){},
handleChange(){ handleChange(){
this.user = this.user === 1 ? 2 : 1; this.user = this.user === 1 ? 2 : 1;
if(this.user === 1){ if(this.user === 1){
...@@ -1058,35 +1008,7 @@ export default { ...@@ -1058,35 +1008,7 @@ export default {
this.initChart1() this.initChart1()
}) })
} }
}, }
changeSelect(){
console.log("11111")
// this.$emit('handle-search')
},
changeSelect3(){
console.log(this.amount)
return
this.queryParams2.pageNum = 1
if(this.activeName === 'first'){
this.getBigWinningBidsPage()
}
if(this.activeName === 'second'){
this.getBigBidPage()
}
},
handleCurrentChange(){
},
handleSizeChange(){
this.queryParams2.pageNum = 1
this.queryParams2.pageSize = val
if(this.activeName === 'first'){
this.getBigWinningBidsPage()
}
if(this.activeName === 'second'){
this.getBigBidPage()
}
},
} }
}; };
</script> </script>
...@@ -1094,7 +1016,6 @@ export default { ...@@ -1094,7 +1016,6 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.app-container{ .app-container{
padding: 0; padding: 0;
margin: 16px 24px;
} }
p{ p{
padding: 0; padding: 0;
...@@ -1112,315 +1033,6 @@ export default { ...@@ -1112,315 +1033,6 @@ export default {
padding-right: 0 !important; padding-right: 0 !important;
} }
} }
.manage{
.task-wrap{
height: 99px;
background: #FFFFFF;
border-radius: 4px;
display: flex;
justify-content: space-between;
.item{
width: 20%;
text-align: center;
margin: 0 auto;
cursor: pointer;
.icon-img{
width: 48px;
height: 48px;
margin-top: 16px;
}
.text{
color: #3D3D3D;
font-size: 12px;
margin-top: 5px;
}
}
}
.user{
height: 99px;
border-radius: 4px;
background-image: url("../assets/images/index/user_bg.png");
background-size: cover;
padding-left: 24px;
h3{
font-weight: 700;
color: #1C1C28;
font-size: 18px;
padding-top: 16px;
padding-bottom: 8px;
margin: 0px;
span{
height: 20px;
background: #FFF2E2;
display: inline-block;
border-radius: 11px;
border: 1px solid #FFB010;
color: #FFB010;
font-size: 12px;
line-height: 20px;
padding: 0 10px;
margin-left: 12px;
font-weight: 400;
}
}
p{
color: #666666;
font-size: 16px;
}
}
.tips{
color: #999999;
font-size: 12px;
margin: 12px 0;
}
.content{
background: #ffffff;
padding: 22px 16px;
}
.content_wap1{
height: 360px;
margin-bottom: 12px;
}
.content_wap2{
height: 540px;
}
.search{
float:right;
::v-deep .el-form{
.el-form-item--small.el-form-item{
margin-bottom: 16px;
}
.el-form-item{
height: 32px;
}
.el-form-item__content{
line-height: 32px;
}
.el-input{
line-height: 32px;
.el-input__inner{
height: 32px;
line-height: 32px;
border-radius: 4px
}
}
}
}
.box-right{
width: 90%;
float: right;
::v-deep .el-table{
.sort-caret.ascending{
border-bottom-color: rgba(0,129,255,0.5);
}
.ascending .sort-caret.ascending{
border-bottom-color: #0081FF;
}
.sort-caret.descending{
border-top-color: rgba(0,129,255,0.5);
}
.descending .sort-caret.descending{
border-top-color: #0081FF;
}
.el-table__header-wrapper{
background: #F0F3FA;
th{
background: #F0F3FA;
/*text-align: left;*/
}
}
.el-table__footer-wrapper{
background: #F0F3FA;
}
th {
font-size: 13px !important;
font-weight: 400 !important;
}
.cell {
padding-right: 12px !important;
padding-left: 12px !important;
line-height: 18px;
}
.el-table__fixed-header-wrapper{
th{
background: #F0F3FA;
}
}
td.el-table__cell{
border-bottom: 0;
}
tr{
&.current-row>td{
background-color: initial;
}
&:nth-child(2n) {
background: #F8FBFF;
}
}
.el-table__cell{
height: 40px;
padding: 0;
line-height: 40px;
}
.el-table__body tr:hover > td.el-table__cell{
background: #DCEBFF;
}
::-webkit-scrollbar-track-piece {
//滚动条凹槽的颜色，还可以设置边框属性
background-color: #F3F4F5;
height: 16px;
padding: 0 4px;
}
//滚动条的宽度
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #F3F4F5;
border-radius: 6px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
border-radius: 8px;
height: 8px;
margin: 0 4px;
background: rgba(98,110,126,0.2);
border: 4px solid rgba(98,110,126,0.2);;
&:hover{
background: #566380;
}
}
.has-gutter{
tr{
th:nth-last-child(2){
border-right:0;
}
td:nth-last-child(2){
border-right:0;
}
}
}
.el-table__cell.gutter{
background: #F0F3FA;
}
.el-table__row{
td:last-child{
.cell{
padding-right: 12px !important;
}
}
}
}
}
.content_wap3{
margin-top: 12px;
background: #ffffff;
position:relative;
::v-deep .el-tabs{
.el-tabs__header{
margin-bottom: 0;
}
.el-tabs__item{
height: 54px;
line-height: 54px;
font-size: 16px;
}
.el-tabs__item.is-active{
font-weight: 700;
color: #232323;
}
.el-tabs__nav-wrap{
padding:0 24px;
}
.el-tabs__active-bar{
border-radius: 8px;
}
.el-tabs__nav-wrap::after{
height: 1px;
}
}
.search{
position: absolute;
right: 8px;
top: 10px;
::v-deep .el-form {
.el-form-item--small.el-form-item {
margin-bottom: 0;
}
}
}
.list{
margin: 0 16px;
.item{
border-bottom: 1px solid #EFEFEF;
padding: 16px 0;
.list-title{
font-size: 16px;
font-weight: 700;
color: #3D3D3D;
line-height: 23px;
cursor: pointer;
.list-titel-a{
text-decoration: none;
color:#3D3D3D;
}
a{
color: #3D3D3D;
}
a:hover{
color:#0081FF;
}
}
.list-content {
margin-top: 16px;
display: flex;
justify-content: start;
align-items: center;
.list-content-text {
display: flex;
justify-content: start;
align-items: center;
margin-right: 32px;
font-size: 14px;
span:first-child {
font-weight: 400;
color: rgba(35, 35, 35, 0.4);
line-height: 15px
}
span:last-child {
font-weight: 400;
color: rgba(35, 35, 35, 0.8);
line-height: 15px
}
.blue {
color: #0081FF !important;
cursor: pointer;
}
}
}
}
}
}
::v-deep .selectTag{
.el-select__tags{
.el-tag{
&:first-child{
width: 90px;
}
}
}
}
}
.content-left{ .content-left{
.task-wrap{ .task-wrap{
height: 88px; height: 88px;
......
dsk-operate-ui/src/views/index_v1.vue → dsk-operate-ui/src/views/index_v2.vue
View file @ 145c204e
<template> <template>
<div class="app-container home"> <div class="app-container home">
<el-row :gutter="20"> <!--经理视角-->
<el-col :span="18"> <div class="manage" v-if="user === 1">
<div class="content-left"> <el-row>
<el-col :span="16">
<div class="task-wrap"> <div class="task-wrap">
<div class="item"> <div class="item">
<img class="left" src="@/assets/images/index/icon1.png"/> <img class="icon-img" src="@/assets/images/index/icon1.png"/>
<div class="right"> <p class="text">项目管理</p>
<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>
<div class="item"> <div class="item">
<img class="left" src="@/assets/images/index/icon2.png"/> <img class="icon-img" src="@/assets/images/index/icon2.png"/>
<div class="right"> <p class="text">客户管理</p>
<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>
<div class="item"> <div class="item">
<img class="left" src="@/assets/images/index/icon3.png"/> <img class="icon-img" src="@/assets/images/index/icon3.png"/>
<div class="right"> <p class="text">宏观经济</p>
<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>
<div class="item"> <div class="item">
<img class="left" src="@/assets/images/index/icon4.png"/> <img class="icon-img" src="@/assets/images/index/icon4.png"/>
<div class="right"> <p class="text">集团户</p>
<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>
<div class="item add"> <div class="item">
<span class="yd"><i></i><i></i><i></i><i></i><i></i><i></i></span> <img class="icon-img" src="@/assets/images/index/icon5.png"/>
<div class="btn"><i class="el-icon-plus"></i>新建待办任务</div> <p class="text">查城投平台</p>
</div>
<div class="item">
<img class="icon-img" src="@/assets/images/index/icon6.png"/>
<p class="text">商机雷达</p>
</div> </div>
</div> </div>
<!--经理视角--> </el-col>
<div v-if="user === 1" class="content-wrap"> <el-col :span="8">
<el-col :span="12"> <div class="user" @click="handleChange">
<div class="record"> <h3>刘毅<span>总经理</span></h3>
<div class="flex-box query-box"> <p>您好，祝您工作顺利每一天</p>
<div class="flex-box query-params">
<span class="common-title">跟进记录</span>
</div>
<div class="flex-box query-ability">
<div class="select-popper">
<div class="area">{{area}}<i class="sjx"></i></div>
<el-select v-model="area" class="select-multiple" placeholder="请选择">
<el-option v-for="(item,index) in areaList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</div>
<div class="select-popper">
<div class="month">{{date}}<i class="sjx"></i></div>
<el-select v-model="date" class="select-multiple" placeholder="请选择">
<el-option v-for="(item,index) in dateList" :key="index" :label="item" :value="item"></el-option>
</el-select>
</div>
</div>
</div>
<div class="list">
<div class="item" v-for="(item,index) in gjjlData" :key="index">
<h3>{{item.title}}</h3>
<p>
<span>跟进人：{{item.user}}</span>
<span>关联企业：{{item.name}}</span>
</p>
</div>
</div>
<p class="more">更多跟进记录 ></p>
</div>
</el-col>
<el-col :span="12">
<div class="ranking">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">业绩排名</span>
</div>
<div class="flex-box query-ability">
<div class="select-popper">
<div class="area">{{area}}<i class="sjx"></i></div>
<el-select v-model="area" class="select-multiple" placeholder="请选择">
<el-option v-for="(item,index) in areaList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</div>
<div class="select-popper">
<div class="month">{{date}}<i class="sjx"></i></div>
<el-select v-model="date" class="select-multiple" placeholder="请选择">
<el-option v-for="(item,index) in dateList" :key="index" :label="item" :value="item"></el-option>
</el-select>
</div>
</div>
</div>
<div class="main">
<div class="amount">
<p>
<span>实际已完成(万元)</span>
<span>产值目标(万元)</span>
</p>
<p>
<span class="money">359,800.00</span>
<span class="money">359,800.00</span>
</p>
<el-progress class="progress1" :text-inside="true" :stroke-width="14" :percentage="40"></el-progress>
<el-progress class="progress2" :text-inside="true" :stroke-width="14" :percentage="70"></el-progress>
</div>
<div style="background: #ffffff;margin: 0 12px 12px 12px;">
<div id="pm-echarts" style="height: 400px;"></div>
</div>
</div>
</div>
</el-col>
</div> </div>
<div v-if="user === 1" class="analysis"> </el-col>
<div class="flex-box query-box"> </el-row>
<div class="flex-box query-params"> <div class="tips">注：数据来源大司空建筑大数据平台，统计范围为全国公开的施工内土地交易项目，未公开的不含在内</div>
<span class="common-title">经营分析</span> <div class="content content_wap1">
</div> <div class="flex-box query-box">
<div class="flex-box query-ability"> <div class="flex-box query-params">
<div class="tabs"> <span class="common-title">集团中标统计</span>
<!--<div class="label" v-for="(item,index) in typeList" :class="typeIndex === index ? 'color':''" @click="handleClick(index)">{{item.name}}</div>--> </div>
</div> </div>
<div class="select-popper"> <el-row>
<div class="area">{{area}}<i class="sjx"></i></div> <el-col :span="14">
<el-select v-model="area" class="select-multiple" placeholder="请选择"> <div id="zbtj-echarts" style="height: 300px;"></div>
<el-option v-for="(item,index) in areaList" :key="index" :label="item.name" :value="item.name"></el-option> </el-col>
<el-col :span="10">
<div class="search">
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
<el-form-item prop="address">
<el-select v-model="queryParams.address" placeholder="项目地区" style="width: 150px;">
<el-option v-for="(item,index) in addressList" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
</div> </el-form-item>
</div> <el-form-item prop="type">
<el-select v-model="queryParams.type" multiple collapse-tags clearable placeholder="项目类型" :class="queryParams.type.length > 1 ? 'selectTag' : ''" style="width: 170px;">
<el-option v-for="(item,index) in typeList" :key="index" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="time">
<custom-time-select
:timeList="timeList"
placeholder="中标日期"
@handle-search="changeSelect"/>
</el-form-item>
</el-form>
</div> </div>
<div> <div class="box-right">
<div id="fx-echarts" style="height: 280px;"></div> <el-table
:data="jtList"
border
max-height="250"
fit
highlight-current-row
>
<el-table-column prop="name" label="集团名称" width="120"/>
<el-table-column prop="count" label="中标数量（个）" align="right" sortable/>
<el-table-column prop="amount" label="中标金额（万元)" align="right" sortable/>
</el-table>
</div> </div>
</el-col>
</el-row>
</div>
<div class="content content_wap2">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">大项目中标排行榜</span>
</div> </div>
</div>
<!--员工视角--> <el-row>
<div v-if="user === 2" class="content-db"> <el-col :span="14">
<div class="flex-box query-box"> <div id="zbph-echarts" style="height: 500px;"></div>
<div class="flex-box query-params"> </el-col>
<span class="common-title">待办</span> <el-col :span="10">
</div> <div class="search">
<div class="flex-box query-ability"><span>9</span>全部待办 ></div> <el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
<el-form-item prop="money">
<custom-money-select
:moneyList="moneyList"
v-model="queryParams.money"
placeholder="中标金额"
@handle-search="changeSelect" />
</el-form-item>
<el-form-item prop="address">
<el-select v-model="queryParams.address" placeholder="项目地区" style="width: 150px;">
<el-option v-for="(item,index) in addressList" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="type">
<el-select v-model="queryParams.type" multiple collapse-tags clearable placeholder="项目类型" :class="queryParams.type.length > 1 ? 'selectTag' : ''" style="width: 170px;">
<el-option v-for="(item,index) in typeList" :key="index" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="time">
<custom-time-select
:timeList="timeList"
v-model="queryParams.time"
placeholder="中标日期"
@handle-search="changeSelect"/>
</el-form-item>
</el-form>
</div> </div>
<div class="list"> <div class="box-right">
<div class="item" v-for="(item,index) in gjjlData" :key="index" v-if='index < 3'> <el-table
<h3>{{item.title}}</h3> :data="jtList"
<p> border
<span>拜访时间：{{item.time}}</span> max-height="400"
<span>关联企业：{{item.name}}</span> fit
</p> highlight-current-row
<div class="btn">写跟进<i class="el-icon-edit"></i></div> >
</div> <el-table-column prop="name" label="企业名称" width="120"/>
<el-table-column prop="count" label="中标数量（个）" align="right" sortable/>
<el-table-column prop="amount" label="中标金额（万元)" align="right" sortable/>
</el-table>
</div> </div>
</div> </el-col>
<div v-if="user === 2" class="trends"> </el-row>
<el-tabs v-model="activeName" @tab-click="handleClickTab"> </div>
<el-tab-pane label="甲方舆情" name="first"> <div class="content_wap3">
<div class="main-box"> <el-tabs v-model="activeName" @tab-click="handleClickTab">
<el-timeline> <el-tab-pane label="大项目最新中标" name="first">
<el-timeline-item <skeleton v-if="zxzbIsSkeleton" style="padding: 16px"></skeleton>
v-for="(item, index) in trendsList" <div class="list" v-if="!zxzbIsSkeleton">
:key="index" <div class="item" v-for="(item,index) in projectList" :key="index">
icon="el-icon-time"> <p class="list-title"><router-link :to="`/biddetail/${item.id}`" tag="a" class="a-link" v-if="item.id" v-html="item.projectName"></router-link></p>
<div class="time">{{item.time}}<span class="company">{{item.name}}</span></div> <div class="list-content">
<div class="cont">{{item.main}}</div> <p class="list-content-text">
</el-timeline-item> <span>中标企业：</span>
</el-timeline> <span>{{item.companyName || '--'}}</span>
</p>
<p class="list-content-text">
<span>中标金额：</span>
<span>{{item.amount}}万元</span>
</p>
<p class="list-content-text">
<span>中标日期：</span>
<span>{{item.winBidTime || '--'}}</span>
</p>
<p class="list-content-text">
<span>招标人：</span>
<span>{{item.projectUnit || '--'}}</span>
</p>
</div> </div>
<!--<div 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 v-if="user === 1">刘毅<span>总经理</span></h3>
<h3 v-if="user === 2">李婷婷<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> </div>
<div class="list"> <div class="pagination-box" v-if="totalCount>queryParams2.pageSize && !zxzbIsSkeleton">
<div class="item"> <el-pagination background :current-page="queryParams2.pageNum" :page-size="queryParams2.pageSize" :total="totalCount" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
<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> </el-tab-pane>
<div class="zbgg" v-if="user === 1"> <el-tab-pane label="大项目最新招标" name="second">
<span class="common-title">中标公告</span> <skeleton v-if="zhaobiaoIsSkeleton" style="padding: 16px"></skeleton>
<div class="list"> <div v-if="!zhaobiaoIsSkeleton" class="list">
<div class="item"> <div class="item" v-for="(item,index) in zbList" :key="index">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> <p class="list-title"><router-link :to="`/biddetail/${item.bid}`" tag="a" class="a-link" v-if="item.bid" v-html="item.projectName"></router-link></p>
<p> <div class="list-content">
<span>中标金额：4754.34</span> <p class="list-content-text">
<span>中标单位：中铁十二局集团</span> <span>总投资：</span>
</p> <span>{{item.projectAmount}}万元</span>
</p>
<p class="list-content-text">
<span>招标人：</span>
<span>{{item.tenderee || '--'}}</span>
</p>
<p class="list-content-text">
<span>发布日期：</span>
<span>{{item.issueTime || '--'}}</span>
</p>
</div>
</div> </div>
</div>
<div class="pagination-box" v-if="zbTableTotal>queryParams2.pageSize && !zhaobiaoIsSkeleton">
<el-pagination background :current-page="queryParams2.pageNum" :page-size="queryParams2.pageSize" :total="zbTableTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
</div>
</el-tab-pane>
</el-tabs>
<div class="search">
<el-form ref="queryForm" :model="queryParams2" :inline="true" size="small">
<el-form-item prop="amount">
<custom-money-select
:moneyList="moneyList"
v-model="amount"
placeholder="中标金额"
@handle-search="changeSelect3" />
</el-form-item>
<el-form-item prop="provinceId">
<el-select v-model="queryParams2.provinceId" placeholder="项目地区" style="width: 150px;">
<el-option v-for="(item,index) in addressList" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="projects">
<el-select v-model="queryParams2.projects" multiple collapse-tags clearable placeholder="项目类型" :class="queryParams2.projects.length > 1 ? 'selectTag' : ''" style="width: 170px;">
<el-option v-for="(item,index) in typeList" :key="index" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="time">
<custom-time-select
:timeList="timeList"
v-model="queryParams2.time"
placeholder="中标日期"
@handle-search="changeSelect"/>
</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"> <div class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> <img class="left" src="@/assets/images/index/icon1.png"/>
<p> <div class="right">
<span>中标金额：4754.34</span> <p class="title">即将开标项目</p>
<span>中标单位：中铁十二局集团</span> <p class="number">36</p>
</p> <p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p>
</div>
</div> </div>
<div class="item"> <div class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> <img class="left" src="@/assets/images/index/icon2.png"/>
<p> <div class="right">
<span>中标金额：4754.34</span> <p class="title">重点关注项目</p>
<span>中标单位：中铁十二局集团</span> <p class="number">36</p>
</p> <p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p>
</div>
</div> </div>
<div class="item"> <div class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> <img class="left" src="@/assets/images/index/icon3.png"/>
<p> <div class="right">
<span>中标金额：4754.34</span> <p class="title">重点关注客户</p>
<span>中标单位：中铁十二局集团</span> <p class="number">36</p>
</p> <p class="compare">较上月 <span class="down">-3<img src="@/assets/images/index/down.png"/></span></p>
</div>
</div> </div>
<div class="item"> <div class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> <img class="left" src="@/assets/images/index/icon4.png"/>
<p> <div class="right">
<span>中标金额：4754.34</span> <p class="title">储备合作客户</p>
<span>中标单位：中铁十二局集团</span> <p class="number">36</p>
</p> <p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p>
</div>
</div> </div>
<div class="item"> <div class="item add">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> <span class="yd"><i></i><i></i><i></i><i></i><i></i><i></i></span>
<p> <div class="btn"><i class="el-icon-plus"></i>新建待办任务</div>
<span>中标金额：4754.34</span>
<span>中标单位：中铁十二局集团</span>
</p>
</div> </div>
<div class="item"> </div>
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> <div class="content-db">
<p> <div class="flex-box query-box">
<span>中标金额：4754.34</span> <div class="flex-box query-params">
<span>中标单位：中铁十二局集团</span> <span class="common-title">待办</span>
</p> </div>
<div class="flex-box query-ability"><span>9</span>全部待办 ></div>
</div> </div>
<div class="item"> <div class="list">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> <div class="item" v-for="(item,index) in gjjlData" :key="index" v-if='index < 3'>
<p> <h3>{{item.title}}</h3>
<span>中标金额：4754.34</span> <p>
<span>中标单位：中铁十二局集团</span> <span>拜访时间：{{item.time}}</span>
</p> <span>关联企业：{{item.name}}</span>
</p>
<div class="btn">写跟进<i class="el-icon-edit"></i></div>
</div>
</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> </div>
<div v-if="user === 2" class="zbhxr"> </el-col>
<span class="common-title">竞争对手中标候选人公告</span> <el-col :span="6">
<div class="list"> <div class="content-right">
<div class="item"> <div class="user" @click="handleChange">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> <h3>李婷婷<span>营销员</span></h3>
<p> <p>您好，祝您工作顺利每一天</p>
<span>中标金额：4754.34</span> </div>
</p> <div class="search">
</div> <span class="common-title">快捷搜索</span>
<div class="item"> <el-input placeholder="找客户/找项目/找甲方">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> <i slot="prefix" class="el-icon-search"></i>
<p> </el-input>
<span>中标金额：4754.34</span> <span class="common-title">储备项目类</span>
</p> <div class="list" style="margin-top: 8px;">
</div> <div class="item">
<div class="item"> <img src="@/assets/images/index/cb_icon1.png"/>
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> <p>EPC项目</p>
<p> </div>
<span>中标金额：4754.34</span> <div class="item">
</p> <img src="@/assets/images/index/cb_icon2.png"/>
</div> <p>投资项目</p>
<div class="item"> </div>
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> <div class="item">
<p> <img src="@/assets/images/index/cb_icon3.png"/>
<span>中标金额：4754.34</span> <p>房建项目</p>
</p> </div>
</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 class="item"> <div class="list">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> <div class="item">
<p> <img src="@/assets/images/index/cb_icon4.png"/>
<span>中标金额：4754.34</span> <p>电力项目</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="item"> </div>
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> <div class="zbhxr">
<p> <span class="common-title">竞争对手中标候选人公告</span>
<span>中标金额：4754.34</span> <div class="list">
</p> <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> </div>
</div> </div>
</div> </el-col>
</el-col> </el-row>
</el-row> </div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import dataRegion from '@/assets/json/dataRegion'
import "@/assets/styles/public.css"; import "@/assets/styles/public.css";
import CustomTimeSelect from './component/CustomTimeSelect'
import CustomMoneySelect from './component/CustomMoneySelect'
import skeleton from './component/skeleton'
import { bigWinningBidsPage,bigBidPage } from '@/api/index'
export default { export default {
name: "Index", name: "Index",
components: {
CustomTimeSelect,CustomMoneySelect,skeleton
},
data() { data() {
return { return {
// 版本号 // 版本号
version: "3.8.5", version: "3.8.5",
typeList:[
{name:'待成交项目数'},
{name:'待成交总金额'},
{name:'成交项目金额'},
{name:'成交项目总数'},
{name:'储备项目总数'},
{name:'储备项目总金额'},
],
typeIndex:0,
jyfxData:['1月','2月','3月','4月','5月','6月'],
jyfxData1:[
{
dcjxm:'103',
dcjzje:'123',
cjxmje:'153',
cjxmzs:'113',
cbxmzs:'93',
cbxmzje:'193',
},
{
dcjxm:'256',
dcjzje:'223',
cjxmje:'113',
cjxmzs:'163',
cbxmzs:'193',
cbxmzje:'123',
},
{
dcjxm:'103',
dcjzje:'123',
cjxmje:'153',
cjxmzs:'113',
cbxmzs:'93',
cbxmzje:'193',
},
{
dcjxm:'256',
dcjzje:'223',
cjxmje:'113',
cjxmzs:'163',
cbxmzs:'193',
cbxmzje:'123',
},
{
dcjxm:'103',
dcjzje:'123',
cjxmje:'153',
cjxmzs:'113',
cbxmzs:'93',
cbxmzje:'193',
},
{
dcjxm:'256',
dcjzje:'223',
cjxmje:'113',
cjxmzs:'163',
cbxmzs:'193',
cbxmzje:'123',
},
],
gjjlData:[ gjjlData:[
{ {
title:'今天拜访了重庆交通局杨科长，洽谈比较愉快，预计下月有项目招标，希望能有机会合作。', title:'今天拜访了重庆交通局杨科长，洽谈比较愉快，预计下月有项目招标，希望能有机会合作。',
...@@ -481,30 +499,55 @@ export default { ...@@ -481,30 +499,55 @@ export default {
], ],
pmData:[ pmData:[
{ {
name:'朱博', name:'中治建工集团有限公司',
value:334, value:334,
value1:164, value1:164,
}, },
{ {
name:'陈伟', name:'中机中联工程有限公司',
value:230, value:230,
value1:130, value1:130,
}, },
{ {
name:'张天翼', name:'中铁五局集团第六公司',
value:156, value:156,
value1:150, value1:150,
}, },
{ {
name:'李晨旭', name:'中铁长江交通设计公司',
value:112, value:112,
value1:130, value1:130,
}, },
{ {
name:'徐阳', name:'重庆设计院有限公公司',
value:110, value:110,
value1:90, 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', rankIconsSize:'24',
rankIcons:[// 排序图标 rankIcons:[// 排序图标
...@@ -513,6 +556,11 @@ export default { ...@@ -513,6 +556,11 @@ export default {
require('@/assets/images/index/3.png'), require('@/assets/images/index/3.png'),
require('@/assets/images/index/4.png'), require('@/assets/images/index/4.png'),
require('@/assets/images/index/5.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, user:1,
activeName:'first', activeName:'first',
...@@ -558,296 +606,253 @@ export default { ...@@ -558,296 +606,253 @@ export default {
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。' main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
}, },
], ],
area:'西南地区', jtList:[
areaList:[ {
name:'中交集团',
count:'24534',
amount:'23011'
},
{ {
name:'西南地区' name:'中建集团',
count:'11534',
amount:'22331'
}, },
{ {
name:'华中地区' name:'中冶集团',
count:'15534',
amount:'20231'
}, },
{ {
name:'华南地区' name:'中国铁路',
count:'6534',
amount:'11231'
}, },
{ {
name:'华东地区' name:'中国水利',
count:'9534',
amount:'4231'
}, },
{ {
name:'华北地区' name:'中建集团',
count:'14534',
amount:'23231'
}, },
{ {
name:'东北地区' name:'中建集团',
count:'24534',
amount:'15231'
}, },
{ {
name:'西北地区' name:'中国水利',
count:'2334',
amount:'5231'
},
{
name:'中建集团',
count:'2534',
amount:'8231'
},
{
name:'中交集团',
count:'2334',
amount:'9231'
}, },
], ],
date:'不限', addressList:[],
dateList:['不限','今日','昨日','近三天','近七天'] typeList:['施工类项目','施工类项目1','施工类项目2','施工类项目3','施工类项目4'],
}; queryParams:{
address:'',
type:[],
money:'',
time:'',
},
queryParams1:{
address:'',
type:[],
money:'',
time:'',
},
queryParams2:{
provinceId:'',
projects:[],
amount:'',
time:'',
pageNum:1,
pageSize:10
},
amount:'',
timeList: ['近三天', '近七天', '近半月', '自定义'],
moneyList: ['2亿以上', '5亿以上', '10亿以上', '自定义'],
projectList:[],
zbList:[],
totalCount:0,
zbTableTotal:0,
zxzbIsSkeleton:true,
zhaobiaoIsSkeleton:true,
};
}, },
created() { created() {
this.dataRegion()
this.getBigWinningBidsPage()
if(this.user === 1){ if(this.user === 1){
this.$nextTick(()=>{ this.$nextTick(()=>{
this.initChart() this.initChart(this.jtList)
this.initChart1() this.initChart1()
}) })
} }
}, },
methods: { methods: {
handleClick(index){ getBigWinningBidsPage(){
this.typeIndex=index; let params=this.queryParams2;
if(params.amount){
}
this.zxzbIsSkeleton=true
bigWinningBidsPage(this.queryParams2).then(res=>{
this.zxzbIsSkeleton=false;
if(res.code == 200){
this.projectList=res.rows;
this.totalCount=res.total;
}
})
}, },
initChart() { getBigBidPage(){
let myChart = echarts.init(document.getElementById("fx-echarts")) let params={};
let option ={ this.zhaobiaoIsSkeleton=true
legend: { bigBidPage(this.queryParams2).then(res=>{
x:'right', this.zhaobiaoIsSkeleton=false
padding:[3,120,0,0], if(res.code == 200){
itemHeight:8, this.zbList=res.rows;
itemWidth:16, this.zbTableTotal=res.total;
}, }
tooltip: { })
trigger: 'axis', },
axisPointer: { //地区
type: 'line', async dataRegion() {
label: { var str = [];
backgroundColor: '#FFFFFF' 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": []
});
} }
}, }
xAxis: { }
type: 'category', this.addressList = str;
boundaryGap: false, },
data: this.jyfxData, initChart(data) {
}, this.$nextTick(()=>{
yAxis: { let myChart = echarts.init(document.getElementById("zbtj-echarts"))
type: 'value', let option ={
}, tooltip: {
grid: { trigger: 'axis',
top:40, axisPointer: {
left:30, type: 'cross'
right:10, }
bottom:20,
},
// dcjxm:'256',
// dcjzje:'223',
// cjxmje:'113',
// cjxmzs:'163',
// cbxmzs:'193',
// cbxmzje:'123',
series: [
{
data: this.jyfxData1.map(item => item.dcjxm),
name:'待成交项目数',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#81D4BC",
},
itemStyle:{
color: "#81D4BC",
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(189, 249, 232, 1)'
}, {
offset: 1, color: 'rgba(189, 249, 232, 0)'
} ],
global: false
}
},
}, },
{ xAxis: {
data: this.jyfxData1.map(item => item.dcjzje), type: 'category',
name:'待成交总金额', axisLabel: { //坐标轴刻度标签的相关设置
type: 'line', margin: 15, //刻度标签与轴线之间的距离
smooth: true, color:"#666666"
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#9EE474",
}, },
itemStyle:{ axisTick: false, //坐标轴刻度
color: "#9EE474", axisPointer: {
}, type: 'shadow'
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(208, 250, 183, 1)'
}, {
offset: 1, color: 'rgba(208, 250, 183, 0)'
} ],
global: false
}
}, },
data: data.map(item => item.name),
}, },
{ yAxis: [
data: this.jyfxData1.map(item => item.cjxmje), {
name:'成交项目金额', type: 'value',
type: 'line', axisLabel: { //坐标轴刻度标签的相关设置
smooth: true, color:"#666666"
emphasis: { },
disabled: true, name: '单位：个',
focus: 'none' nameLocation: 'start',
}, nameTextStyle: {
//设置折线颜色和粗细 padding: [0, 0, 0, -60], // 四个数字分别为上右下左与原位置距离
lineStyle: { color: '#666666',
width: 2,
color: "#E1B3FF",
},
itemStyle:{
color: "#E1B3FF",
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(233, 200, 255, 1)'
}, {
offset: 1, color: 'rgba(233, 200, 255, 0)'
} ],
global: false
}
},
},
{
data: this.jyfxData1.map(item => item.cjxmzs),
name:'成交项目总数',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#ADC0FF",
},
itemStyle:{
color: "#ADC0FF",
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(173, 192, 255, 1)'
}, {
offset: 1, color: 'rgba(173, 192, 255, 0)'
} ],
global: false
} }
}, },
}, {
{ type: 'value',
data: this.jyfxData1.map(item => item.cbxmzs), axisLabel: { //坐标轴刻度标签的相关设置
name:'储备项目总数', color:"#666666"
type: 'line', },
smooth: true, name: '单位：万元',
emphasis: { nameLocation: 'start',
disabled: true, nameTextStyle: {
focus: 'none' padding: [0, 0, 0, 72], // 四个数字分别为上右下左与原位置距离
}, color: '#666666',
//设置折线颜色和粗细 },
lineStyle: { splitLine: {
width: 2, show: true,
color: "#67B3FD", lineStyle: {
}, type: 'dashed',
itemStyle:{ color: ['#FFFFFF']
color: "#67B3FD", }
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(192, 224, 255, 1)'
}, {
offset: 1, color: 'rgba(192, 224, 255, 0)'
} ],
global: false
} }
}, }
],
grid: {
top:30,
left:80,
right:90,
bottom:30,
}, },
{ series: [
data: this.jyfxData1.map(item => item.cbxmzje), {
name:'储备项目总金额', name:'中标金额（万元）',
type: 'line', smooth: false, //平滑
smooth: true, type:"line",
emphasis: { symbolSize: 6,
disabled: true, yAxisIndex: 1,
focus: 'none' tooltip: {
}, valueFormatter: function (value) {
//设置折线颜色和粗细 return value + '万元'
lineStyle: { }
width: 2, },
color: "#BEECFF", itemStyle: {
}, color: '#14C9C9'
itemStyle:{ },
color: "#BEECFF", data:data.map(item => item.amount),
},
//设置面积区域为渐变效果
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(165, 229, 255, 1)'
}, {
offset: 1, color: 'rgba(165, 229, 255, 0)'
} ],
global: false
}
}, },
}, {
] name:'中标总数（个）',
} type: 'bar',
myChart.setOption(option); barWidth: 20,
window.addEventListener("resize", function () { tooltip: {
myChart.resize();//图表跟随页面大小变化宽度 valueFormatter: function (value) {
}); return value + '个';
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#56A5FF'
}, {
offset: 1,
color: '#1B8EFF'
}])
}
},
data:data.map(item => item.count),
}
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
}, },
initChart1(){ initChart1(){
var rankPic = [ var rankPic = [
...@@ -856,15 +861,20 @@ export default { ...@@ -856,15 +861,20 @@ export default {
require('@/assets/images/index/3.png'), require('@/assets/images/index/3.png'),
require('@/assets/images/index/4.png'), require('@/assets/images/index/4.png'),
require('@/assets/images/index/5.png'), require('@/assets/images/index/5.png'),
require('@/assets/images/index/6.png'),
require('@/assets/images/index/7.png'),
require('@/assets/images/index/8.png'),
require('@/assets/images/index/9.png'),
require('@/assets/images/index/10.png'),
] ]
let myChart = echarts.init(document.getElementById("pm-echarts")) let myChart = echarts.init(document.getElementById("zbph-echarts"))
let option ={ let option ={
legend: { legend: {
show: true, show: true,
x:'center', x:'right',
y:'bottom', y:'top',
padding:[0,0,10,0], padding:[10,0,10,0],
itemWidth: 24, itemWidth: 24,
itemHeight: 10, itemHeight: 10,
textStyle:{ textStyle:{
...@@ -888,7 +898,7 @@ export default { ...@@ -888,7 +898,7 @@ export default {
} }
}, },
axisLabel: { axisLabel: {
margin: 80, margin: 200,
textStyle: { textStyle: {
align: 'left', align: 'left',
}, },
...@@ -900,6 +910,7 @@ export default { ...@@ -900,6 +910,7 @@ export default {
1: { 1: {
height: 24, height: 24,
width: 24, width: 24,
// marginBottom:-15,
align: 'center', align: 'center',
backgroundColor: { backgroundColor: {
image: rankPic[0] image: rankPic[0]
...@@ -937,6 +948,46 @@ export default { ...@@ -937,6 +948,46 @@ export default {
image: rankPic[4] 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]
}
},
} }
}, },
}, },
...@@ -945,7 +996,7 @@ export default { ...@@ -945,7 +996,7 @@ export default {
}, },
grid: { grid: {
left: '20%', left: '20%',
top: 20, top: 40,
right: 20, right: 20,
bottom: 60, bottom: 60,
}, },
...@@ -964,10 +1015,6 @@ export default { ...@@ -964,10 +1015,6 @@ export default {
data: this.pmData.map(item => item.value), data: this.pmData.map(item => item.value),
barGap: 0, barGap: 0,
type: 'bar', type: 'bar',
// stack: 'total',
// emphasis: {
// focus: 'series'
// },
itemStyle:{ itemStyle:{
color: '#14C9C9', color: '#14C9C9',
barBorderRadius:[0, 20, 20, 0] barBorderRadius:[0, 20, 20, 0]
...@@ -975,15 +1022,10 @@ export default { ...@@ -975,15 +1022,10 @@ export default {
barWidth: 8, barWidth: 8,
}, },
{ {
// realtimeSort: true,
name:'目标产值', name:'目标产值',
data: this.pmData.map(item => item.value1), data: this.pmData.map(item => item.value1),
barGap: 0, barGap: 0,
type: 'bar', type: 'bar',
// stack: 'total',
// emphasis: {
// focus: 'series'
// },
itemStyle:{ itemStyle:{
color: '#92C9FF', color: '#92C9FF',
barBorderRadius:[0, 20, 20, 0] barBorderRadius:[0, 20, 20, 0]
...@@ -998,17 +1040,52 @@ export default { ...@@ -998,17 +1040,52 @@ export default {
}); });
}, },
handleClickTab(){ handleClickTab(){
this.queryParams2.pageNum=1;
if(this.activeName === 'first'){
this.getBigWinningBidsPage()
}
if(this.activeName === 'second'){
this.getBigBidPage()
}
}, },
handleClickTab1(){},
handleChange(){ handleChange(){
this.user = this.user === 1 ? 2 : 1; this.user = this.user === 1 ? 2 : 1;
if(this.user === 1){ if(this.user === 1){
this.$nextTick(()=>{ this.$nextTick(()=>{
this.initChart() this.initChart(this.jtList)
this.initChart1() this.initChart1()
}) })
} }
} },
changeSelect(){
console.log("11111")
// this.$emit('handle-search')
},
changeSelect3(){
console.log(this.amount)
return
this.queryParams2.pageNum = 1
if(this.activeName === 'first'){
this.getBigWinningBidsPage()
}
if(this.activeName === 'second'){
this.getBigBidPage()
}
},
handleCurrentChange(){
},
handleSizeChange(){
this.queryParams2.pageNum = 1
this.queryParams2.pageSize = val
if(this.activeName === 'first'){
this.getBigWinningBidsPage()
}
if(this.activeName === 'second'){
this.getBigBidPage()
}
},
} }
}; };
</script> </script>
...@@ -1016,6 +1093,7 @@ export default { ...@@ -1016,6 +1093,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.app-container{ .app-container{
padding: 0; padding: 0;
margin: 16px 24px;
} }
p{ p{
padding: 0; padding: 0;
...@@ -1033,6 +1111,315 @@ export default { ...@@ -1033,6 +1111,315 @@ export default {
padding-right: 0 !important; padding-right: 0 !important;
} }
} }
.manage{
.task-wrap{
height: 99px;
background: #FFFFFF;
border-radius: 4px;
display: flex;
justify-content: space-between;
.item{
width: 20%;
text-align: center;
margin: 0 auto;
cursor: pointer;
.icon-img{
width: 48px;
height: 48px;
margin-top: 16px;
}
.text{
color: #3D3D3D;
font-size: 12px;
margin-top: 5px;
}
}
}
.user{
height: 99px;
border-radius: 4px;
background-image: url("../assets/images/index/user_bg.png");
background-size: cover;
padding-left: 24px;
h3{
font-weight: 700;
color: #1C1C28;
font-size: 18px;
padding-top: 16px;
padding-bottom: 8px;
margin: 0px;
span{
height: 20px;
background: #FFF2E2;
display: inline-block;
border-radius: 11px;
border: 1px solid #FFB010;
color: #FFB010;
font-size: 12px;
line-height: 20px;
padding: 0 10px;
margin-left: 12px;
font-weight: 400;
}
}
p{
color: #666666;
font-size: 16px;
}
}
.tips{
color: #999999;
font-size: 12px;
margin: 12px 0;
}
.content{
background: #ffffff;
padding: 22px 16px;
}
.content_wap1{
height: 360px;
margin-bottom: 12px;
}
.content_wap2{
height: 540px;
}
.search{
float:right;
::v-deep .el-form{
.el-form-item--small.el-form-item{
margin-bottom: 16px;
}
.el-form-item{
height: 32px;
}
.el-form-item__content{
line-height: 32px;
}
.el-input{
line-height: 32px;
.el-input__inner{
height: 32px;
line-height: 32px;
border-radius: 4px
}
}
}
}
.box-right{
width: 90%;
float: right;
::v-deep .el-table{
.sort-caret.ascending{
border-bottom-color: rgba(0,129,255,0.5);
}
.ascending .sort-caret.ascending{
border-bottom-color: #0081FF;
}
.sort-caret.descending{
border-top-color: rgba(0,129,255,0.5);
}
.descending .sort-caret.descending{
border-top-color: #0081FF;
}
.el-table__header-wrapper{
background: #F0F3FA;
th{
background: #F0F3FA;
/*text-align: left;*/
}
}
.el-table__footer-wrapper{
background: #F0F3FA;
}
th {
font-size: 13px !important;
font-weight: 400 !important;
}
.cell {
padding-right: 12px !important;
padding-left: 12px !important;
line-height: 18px;
}
.el-table__fixed-header-wrapper{
th{
background: #F0F3FA;
}
}
td.el-table__cell{
border-bottom: 0;
}
tr{
&.current-row>td{
background-color: initial;
}
&:nth-child(2n) {
background: #F8FBFF;
}
}
.el-table__cell{
height: 40px;
padding: 0;
line-height: 40px;
}
.el-table__body tr:hover > td.el-table__cell{
background: #DCEBFF;
}
::-webkit-scrollbar-track-piece {
//滚动条凹槽的颜色，还可以设置边框属性
background-color: #F3F4F5;
height: 16px;
padding: 0 4px;
}
//滚动条的宽度
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #F3F4F5;
border-radius: 6px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
border-radius: 8px;
height: 8px;
margin: 0 4px;
background: rgba(98,110,126,0.2);
border: 4px solid rgba(98,110,126,0.2);;
&:hover{
background: #566380;
}
}
.has-gutter{
tr{
th:nth-last-child(2){
border-right:0;
}
td:nth-last-child(2){
border-right:0;
}
}
}
.el-table__cell.gutter{
background: #F0F3FA;
}
.el-table__row{
td:last-child{
.cell{
padding-right: 12px !important;
}
}
}
}
}
.content_wap3{
margin-top: 12px;
background: #ffffff;
position:relative;
::v-deep .el-tabs{
.el-tabs__header{
margin-bottom: 0;
}
.el-tabs__item{
height: 54px;
line-height: 54px;
font-size: 16px;
}
.el-tabs__item.is-active{
font-weight: 700;
color: #232323;
}
.el-tabs__nav-wrap{
padding:0 24px;
}
.el-tabs__active-bar{
border-radius: 8px;
}
.el-tabs__nav-wrap::after{
height: 1px;
}
}
.search{
position: absolute;
right: 8px;
top: 10px;
::v-deep .el-form {
.el-form-item--small.el-form-item {
margin-bottom: 0;
}
}
}
.list{
margin: 0 16px;
.item{
border-bottom: 1px solid #EFEFEF;
padding: 16px 0;
.list-title{
font-size: 16px;
font-weight: 700;
color: #3D3D3D;
line-height: 23px;
cursor: pointer;
.list-titel-a{
text-decoration: none;
color:#3D3D3D;
}
a{
color: #3D3D3D;
}
a:hover{
color:#0081FF;
}
}
.list-content {
margin-top: 16px;
display: flex;
justify-content: start;
align-items: center;
.list-content-text {
display: flex;
justify-content: start;
align-items: center;
margin-right: 32px;
font-size: 14px;
span:first-child {
font-weight: 400;
color: rgba(35, 35, 35, 0.4);
line-height: 15px
}
span:last-child {
font-weight: 400;
color: rgba(35, 35, 35, 0.8);
line-height: 15px
}
.blue {
color: #0081FF !important;
cursor: pointer;
}
}
}
}
}
}
::v-deep .selectTag{
.el-select__tags{
.el-tag{
&:first-child{
width: 90px;
}
}
}
}
}
.content-left{ .content-left{
.task-wrap{ .task-wrap{
height: 88px; height: 88px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment