Commit 82577c29 authored by yht15023815643's avatar yht15023815643

Merge branch 'dev20230707' of http://192.168.60.201/root/dsk-operate-sys into dev20230707

parents 21718837 37fda6c3
package com.dsk.common.core.domain.model;
import com.dsk.common.utils.DateUtils;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.NoArgsConstructor;
......@@ -17,11 +18,11 @@ public class IndexBigBidPageBody extends BasePage
/**
* 开始时间
*/
private Date timeStart;
private Date timeStart = DateUtils.addDays(new Date(), -7);
/**
* 截止时间
*/
private Date timeEnd;
private Date timeEnd = new Date();
/**
* 金额起 默认2亿
*/
......
package com.dsk.common.core.domain.model;
import com.dsk.common.utils.DateUtils;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.NoArgsConstructor;
......@@ -16,11 +17,11 @@ public class IndexBigWinningBidsPageBody extends BasePage {
/**
* 开始时间
*/
private Date timeStart;
private Date timeStart = DateUtils.addDays(new Date(), -7);
/**
* 截止时间
*/
private Date timeEnd;
private Date timeEnd = new Date();
/**
* 金额起 默认2亿
*/
......
......@@ -189,7 +189,7 @@
}
.main-container {
margin-left: 54px;
margin-left: 48px;
}
.submenu-title-noDropdown {
......
......@@ -54,6 +54,7 @@
:forData="forData"
:tableDataTotal="tableDataTotal"
:queryParams="queryParams"
:MaxPage=500
@handle-current-change="handleCurrentChange"
@sort-change="sortChange"
>
......@@ -91,13 +92,13 @@
companyType:'',
},
forData: [
{label: '企业名称', prop: 'companyName', minWidth: '200', slot: true},
{label: '企业名称', prop: 'companyName', minWidth: '250', slot: true},
{label: '成员层级', prop: 'combineMemberLevel', minWidth: '100'},
{label: '法定代表人', prop: 'corporatePerson', minWidth: '100'},
{label: '注册资本', prop: 'regCapital', minWidth: '150', sortable: 'custom', descending: '3', ascending: '4'},
{label: '持股比例', prop: 'stockPercent', minWidth: '150', slot: true, sortable: 'custom', descending: '3', ascending: '4'},
{label: '成立日期', prop: 'registeredDate', minWidth: '150'},
{label: '企业地区', prop: 'address', minWidth: '150'},
{label: '持股比例', prop: 'stockPercent', minWidth: '100', slot: true, sortable: 'custom', descending: '3', ascending: '4'},
{label: '成立日期', prop: 'registeredDate', minWidth: '100'},
{label: '企业地区', prop: 'address', minWidth: '200'},
],
formData: [
{ type: 4, fieldName: 'combineMemberLevels', value: '', placeholder: '成员层级', options:[]},
......@@ -244,9 +245,11 @@
},
handleQuery(params){
this.paramsData=params;
this.tableLoading=true
let data = this.getAreaList(params || this.queryParams)
memberList(data).then(res=>{
this.isSkeleton = false
this.tableLoading = false
if(res.code === 200){
this.tableData = res.rows
this.tableDataTotal = res.total
......@@ -315,6 +318,7 @@
this.paramsData.companyType=this.queryParams.companyType
this.paramsData.companyTypes=this.queryParams.companyTypes
this.paramsData.pageNum =1
this.queryParams.pageNum =1
}
this.handleQuery(this.paramsData ? this.paramsData : this.queryParams);
},
......@@ -328,6 +332,7 @@
if(this.paramsData){
this.paramsData.companyType=this.queryParams.companyType
this.paramsData.pageNum =1
this.queryParams.pageNum =1
}
}
if(key === '2'){
......@@ -361,6 +366,7 @@
this.paramsData.minStockPercent=this.queryParams.minStockPercent
this.paramsData.maxStockPercent=this.queryParams.maxStockPercent
this.paramsData.pageNum =1
this.queryParams.pageNum =1
}
}
this.handleQuery(this.paramsData ? this.paramsData : this.queryParams);
......@@ -368,7 +374,6 @@
getAreaList(params){
if(params.province&&params.province.length>0){
let arr = this.$children[0].$refs.cascader[0].getCheckedNodes()
console.log(this.$children[0].$refs.cascader)
let provinceIds = [], cityIds = [], districtIds = []
for (var i in arr) {
if (arr[i].parent) {
......@@ -406,6 +411,18 @@
this.pageIndex = 1;
this.handleQuery()
},
//分页
handleCurrentChange(e){
let params = this.formParams()
params.pageNum = e
this.queryParams.pageNum = e
this.handleQuery(params)
setTimeout(() => {
this.$nextTick(() => {
this.$children[1].$refs.tableRef.bodyWrapper.scrollTop = 0
});
}, 500);
},
}
}
</script>
......@@ -468,7 +485,7 @@
.wrap_label{
color: rgba(35,35,35,0.8);
margin-right: 12px;
line-height: 30px;
line-height: 24px;
width: 77px;
text-align: right;
/*float: left;*/
......
......@@ -19,6 +19,7 @@
:tableLoading="tableLoading"
:tableData="tableData"
:forData="forData"
:MaxPage=500
:tableDataTotal="tableDataTotal"
:queryParams="queryParams"
@handle-current-change="handleCurrentChange"
......@@ -39,6 +40,12 @@
<router-link :to="scope.row.projectUnitUipId?`/enterprise/${encodeStr(scope.row.projectUnitId)}`:`/company/${encodeStr(scope.row.projectUnitId)}`" tag="a" class="a-link" v-if="scope.row.projectUnitId&&scope.row.projectUnit" v-html="scope.row.projectUnit"></router-link>
<div v-else v-html="scope.row.projectUnit || '--'"></div>
</template>
<template slot="stockPercent" slot-scope="scope">
<div>{{scope.row.stockPercent || '--'}}{{scope.row.stockPercent ? '%':''}}</div>
</template>
<template slot="bidAmount" slot-scope="scope">
<div>{{scope.row.bidAmount || '--'}}{{scope.row.bidAmount ? '万元':''}}</div>
</template>
</tables>
</div>
</template>
......@@ -67,9 +74,9 @@
forData: [
{label: '中标时间', prop: 'bidTime',slot: true,minWidth: '80'},
{label: '中标成员', prop: 'companyName', slot: true,minWidth: '190'},
{label: '持股比例(%)', prop: 'stockPercent',minWidth: '95'},
{label: '持股比例', prop: 'stockPercent',slot: true,minWidth: '95'},
{label: '项目名称', prop: 'projectName', slot: true,minWidth: '260'},
{label: '中标金额(万元)', prop: 'bidAmount',minWidth: '110'},
{label: '中标金额', prop: 'bidAmount',slot: true,minWidth: '110'},
{label: '中标地区', prop: 'address',minWidth: '80'},
{label: '业绩类型', prop: 'boundType',minWidth: '100'},
{label: '项目类型', prop: 'projectType',minWidth: '100'},
......@@ -159,6 +166,7 @@
this.tableData = res.code == 200 ? res.rows:[]
this.tableDataTotal = res.total
this.isSkeleton = false
this.tableLoading = false
})
},
formatDate(timestamp) {
......@@ -244,6 +252,17 @@
}
return params
},
//分页
handleCurrentChange(e){
let params = this.formParams()
params.pageNum = e
this.queryParams.pageNum = e
this.handleQuery(params)
console.log(this.$children[1].$refs.tableRef.bodyWrapper.scrollTop)
setTimeout(() => {
// this.$children[1].$refs.tableRef.bodyWrapper.scrollTop = 0
}, 500);
},
}
}
</script>
......
......@@ -14,6 +14,7 @@
:defaultSort="defaultSort"
:tableLoading="tableLoading"
:tableData="tableData"
:MaxPage=500
:forData="forData"
:tableDataTotal="tableDataTotal"
:queryParams="queryParams"
......
......@@ -5,6 +5,7 @@
v-loading="tableLoading"
:data="tableData"
element-loading-text="Loading"
ref="tableRef"
border
fit
highlight-current-row
......@@ -130,6 +131,14 @@ export default {
current_page: this.queryParams.pageNum,
show_page: this.paging
}
},
watch:{
'queryParams.pageNum'(newVal,oldVal){
this.current_page=newVal
}
},
created() {
},
methods:{
handleCurrentChange(e){
......
<template>
<div class="app-container home">
<!--经理视角-->
<div class="manage" v-if="user === 1">
<el-row>
<el-col :span="16">
<el-row :gutter="20">
<el-col :span="18">
<div class="content-left">
<div class="task-wrap">
<div class="item">
<img class="icon-img" src="@/assets/images/index/icon1.png"/>
<p class="text">项目管理</p>
</div>
<div class="item">
<img class="icon-img" src="@/assets/images/index/icon2.png"/>
<p class="text">客户管理</p>
<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="icon-img" src="@/assets/images/index/icon3.png"/>
<p class="text">宏观经济</p>
<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="icon-img" src="@/assets/images/index/icon4.png"/>
<p class="text">集团户</p>
<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="icon-img" src="@/assets/images/index/icon5.png"/>
<p class="text">查城投平台</p>
<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">
<img class="icon-img" src="@/assets/images/index/icon6.png"/>
<p class="text">商机雷达</p>
<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>
</el-col>
<el-col :span="8">
<div class="user" @click="handleChange">
<h3>刘毅<span>总经理</span></h3>
<p>您好,祝您工作顺利每一天</p>
</div>
</el-col>
</el-row>
<div class="tips">注:数据来源大司空建筑大数据平台,统计范围为全国公开的施工内土地交易项目,未公开的不含在内</div>
<div class="content content_wap1">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">集团中标统计</span>
<!--经理视角-->
<div v-if="user === 1" class="content-wrap">
<el-col :span="12">
<div class="record">
<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="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>
<el-row>
<el-col :span="14">
<div id="zbtj-echarts" style="height: 300px;"></div>
</el-col>
<el-col :span="10">
<div class="search">
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
<el-form-item prop="address">
<el-select v-model="queryParams.address" placeholder="项目地区" style="width: 150px;">
<el-option v-for="(item,index) in addressList" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="type">
<el-select v-model="queryParams.type" multiple collapse-tags clearable placeholder="项目类型" :class="queryParams.type.length > 1 ? 'selectTag' : ''" style="width: 170px;">
<el-option v-for="(item,index) in typeList" :key="index" :label="item" :value="item"></el-option>
<div v-if="user === 1" class="analysis">
<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="tabs">
<!--<div class="label" v-for="(item,index) in typeList" :class="typeIndex === index ? 'color':''" @click="handleClick(index)">{{item.name}}</div>-->
</div>
<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>
</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">
<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 id="fx-echarts" style="height: 280px;"></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>
<el-row>
<el-col :span="14">
<div id="zbph-echarts" style="height: 500px;"></div>
</el-col>
<el-col :span="10">
<div class="search">
<el-form ref="queryForm" :model="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 v-if="user === 2" 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="pagination-box" v-if="totalCount>queryParams2.pageSize && !zxzbIsSkeleton">
<el-pagination background :current-page="queryParams2.pageNum" :page-size="queryParams2.pageSize" :total="totalCount" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
<div 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>
</el-tab-pane>
<el-tab-pane label="大项目最新招标" name="second">
<skeleton v-if="zhaobiaoIsSkeleton" style="padding: 16px"></skeleton>
<div v-if="!zhaobiaoIsSkeleton" class="list">
<div class="item" v-for="(item,index) in zbList" :key="index">
<p class="list-title"><router-link :to="`/biddetail/${item.bid}`" tag="a" class="a-link" v-if="item.bid" v-html="item.projectName"></router-link></p>
<div class="list-content">
<p class="list-content-text">
<span>总投资:</span>
<span>{{item.projectAmount}}万元</span>
</p>
<p class="list-content-text">
<span>招标人:</span>
<span>{{item.tenderee || '--'}}</span>
</p>
<p class="list-content-text">
<span>发布日期:</span>
<span>{{item.issueTime || '--'}}</span>
</p>
</div>
<div v-if="user === 2" class="trends">
<el-tabs v-model="activeName" @tab-click="handleClickTab">
<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 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 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 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>
</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>
<div class="zbgg" v-if="user === 1">
<span class="common-title">中标公告</span>
<div class="list">
<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>
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
</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>
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
</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>
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
</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>
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
</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 class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
</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 class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
</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 class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
</div>
<div class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
</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 v-if="user === 2" 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="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 class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
</p>
</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 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>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from 'echarts';
import dataRegion from '@/assets/json/dataRegion'
import "@/assets/styles/public.css";
import CustomTimeSelect from './component/CustomTimeSelect'
import CustomMoneySelect from './component/CustomMoneySelect'
import skeleton from './component/skeleton'
import { bigWinningBidsPage,bigBidPage } from '@/api/index'
export default {
name: "Index",
components: {
CustomTimeSelect,CustomMoneySelect,skeleton
},
data() {
return {
// 版本号
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:[
{
title:'今天拜访了重庆交通局杨科长,洽谈比较愉快,预计下月有项目招标,希望能有机会合作。',
......@@ -499,55 +481,30 @@ export default {
],
pmData:[
{
name:'中治建工集团有限公司',
name:'朱博',
value:334,
value1:164,
},
{
name:'中机中联工程有限公司',
name:'陈伟',
value:230,
value1:130,
},
{
name:'中铁五局集团第六公司',
name:'张天翼',
value:156,
value1:150,
},
{
name:'中铁长江交通设计公司',
name:'李晨旭',
value:112,
value1:130,
},
{
name:'重庆设计院有限公公司',
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:[// 排序图标
......@@ -556,11 +513,6 @@ export default {
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',
......@@ -606,254 +558,296 @@ export default {
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目,项目地区是重庆市-江北区,项目类型为工程建设。'
},
],
jtList:[
{
name:'中交集团',
count:'24534',
amount:'23011'
},
area:'西南地区',
areaList:[
{
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'
name:'西北地区'
},
],
addressList:[],
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,
};
date:'不限',
dateList:['不限','今日','昨日','近三天','近七天']
};
},
created() {
this.dataRegion()
this.getBigWinningBidsPage()
if(this.user === 1){
this.$nextTick(()=>{
this.initChart(this.jtList)
this.initChart()
this.initChart1()
})
}
},
methods: {
getBigWinningBidsPage(){
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;
}
})
},
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;
}
})
handleClick(index){
this.typeIndex=index;
},
//地区
async dataRegion() {
var str = [];
for (let x = 0; x < 3; x++) {
for (let i = 0; i < dataRegion.length; i++) {
if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
str.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId,
"children": []
});
}
}
}
this.addressList = str;
},
initChart(data) {
console.log(data)
this.$nextTick(()=>{
let myChart = echarts.init(document.getElementById("zbtj-echarts"))
let option ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
initChart() {
let myChart = echarts.init(document.getElementById("fx-echarts"))
let option ={
legend: {
x:'right',
padding:[3,120,0,0],
itemHeight:8,
itemWidth:16,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
backgroundColor: '#FFFFFF'
}
}
},
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',
axisLabel: { //坐标轴刻度标签的相关设置
margin: 15, //刻度标签与轴线之间的距离
color:"#666666"
{
data: this.jyfxData1.map(item => item.dcjzje),
name:'待成交总金额',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#9EE474",
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
itemStyle:{
color: "#9EE474",
},
//设置面积区域为渐变效果
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: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位:个',
nameLocation: 'start',
nameTextStyle: {
padding: [0, 0, 0, -60], // 四个数字分别为上右下左与原位置距离
color: '#666666',
{
data: this.jyfxData1.map(item => item.cjxmje),
name:'成交项目金额',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
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: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位:万元',
nameLocation: 'start',
nameTextStyle: {
padding: [0, 0, 0, 72], // 四个数字分别为上右下左与原位置距离
color: '#666666',
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: ['#FFFFFF']
}
},
{
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
}
}
],
grid: {
top:30,
left:80,
right:90,
bottom:30,
},
},
series: [
{
name:'中标金额(万元)',
smooth: false, //平滑
type:"line",
symbolSize: 6,
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + '万元'
}
},
itemStyle: {
color: '#14C9C9'
},
data:data.map(item => item.amount),
{
data: this.jyfxData1.map(item => item.cbxmzs),
name:'储备项目总数',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
{
name:'中标总数(个)',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value + '个';
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#56A5FF'
}, {
offset: 1,
color: '#1B8EFF'
}])
}
},
data:data.map(item => item.count),
}
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#67B3FD",
},
itemStyle:{
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
}
},
},
{
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(){
var rankPic = [
......@@ -862,20 +856,15 @@ export default {
require('@/assets/images/index/3.png'),
require('@/assets/images/index/4.png'),
require('@/assets/images/index/5.png'),
require('@/assets/images/index/6.png'),
require('@/assets/images/index/7.png'),
require('@/assets/images/index/8.png'),
require('@/assets/images/index/9.png'),
require('@/assets/images/index/10.png'),
]
let myChart = echarts.init(document.getElementById("zbph-echarts"))
let myChart = echarts.init(document.getElementById("pm-echarts"))
let option ={
legend: {
show: true,
x:'right',
y:'top',
padding:[10,0,10,0],
x:'center',
y:'bottom',
padding:[0,0,10,0],
itemWidth: 24,
itemHeight: 10,
textStyle:{
......@@ -899,7 +888,7 @@ export default {
}
},
axisLabel: {
margin: 200,
margin: 80,
textStyle: {
align: 'left',
},
......@@ -911,7 +900,6 @@ export default {
1: {
height: 24,
width: 24,
// marginBottom:-15,
align: 'center',
backgroundColor: {
image: rankPic[0]
......@@ -949,46 +937,6 @@ export default {
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 {
},
grid: {
left: '20%',
top: 40,
top: 20,
right: 20,
bottom: 60,
},
......@@ -1016,6 +964,10 @@ export default {
data: this.pmData.map(item => item.value),
barGap: 0,
type: 'bar',
// stack: 'total',
// emphasis: {
// focus: 'series'
// },
itemStyle:{
color: '#14C9C9',
barBorderRadius:[0, 20, 20, 0]
......@@ -1023,10 +975,15 @@ export default {
barWidth: 8,
},
{
// realtimeSort: true,
name:'目标产值',
data: this.pmData.map(item => item.value1),
barGap: 0,
type: 'bar',
// stack: 'total',
// emphasis: {
// focus: 'series'
// },
itemStyle:{
color: '#92C9FF',
barBorderRadius:[0, 20, 20, 0]
......@@ -1041,15 +998,8 @@ export default {
});
},
handleClickTab(){
this.queryParams2.pageNum=1;
if(this.activeName === 'first'){
this.getBigWinningBidsPage()
}
if(this.activeName === 'second'){
this.getBigBidPage()
}
},
handleClickTab1(){},
handleChange(){
this.user = this.user === 1 ? 2 : 1;
if(this.user === 1){
......@@ -1058,35 +1008,7 @@ export default {
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>
......@@ -1094,7 +1016,6 @@ export default {
<style scoped lang="scss">
.app-container{
padding: 0;
margin: 16px 24px;
}
p{
padding: 0;
......@@ -1112,315 +1033,6 @@ export default {
padding-right: 0 !important;
}
}
.manage{
.task-wrap{
height: 99px;
background: #FFFFFF;
border-radius: 4px;
display: flex;
justify-content: space-between;
.item{
width: 20%;
text-align: center;
margin: 0 auto;
cursor: pointer;
.icon-img{
width: 48px;
height: 48px;
margin-top: 16px;
}
.text{
color: #3D3D3D;
font-size: 12px;
margin-top: 5px;
}
}
}
.user{
height: 99px;
border-radius: 4px;
background-image: url("../assets/images/index/user_bg.png");
background-size: cover;
padding-left: 24px;
h3{
font-weight: 700;
color: #1C1C28;
font-size: 18px;
padding-top: 16px;
padding-bottom: 8px;
margin: 0px;
span{
height: 20px;
background: #FFF2E2;
display: inline-block;
border-radius: 11px;
border: 1px solid #FFB010;
color: #FFB010;
font-size: 12px;
line-height: 20px;
padding: 0 10px;
margin-left: 12px;
font-weight: 400;
}
}
p{
color: #666666;
font-size: 16px;
}
}
.tips{
color: #999999;
font-size: 12px;
margin: 12px 0;
}
.content{
background: #ffffff;
padding: 22px 16px;
}
.content_wap1{
height: 360px;
margin-bottom: 12px;
}
.content_wap2{
height: 540px;
}
.search{
float:right;
::v-deep .el-form{
.el-form-item--small.el-form-item{
margin-bottom: 16px;
}
.el-form-item{
height: 32px;
}
.el-form-item__content{
line-height: 32px;
}
.el-input{
line-height: 32px;
.el-input__inner{
height: 32px;
line-height: 32px;
border-radius: 4px
}
}
}
}
.box-right{
width: 90%;
float: right;
::v-deep .el-table{
.sort-caret.ascending{
border-bottom-color: rgba(0,129,255,0.5);
}
.ascending .sort-caret.ascending{
border-bottom-color: #0081FF;
}
.sort-caret.descending{
border-top-color: rgba(0,129,255,0.5);
}
.descending .sort-caret.descending{
border-top-color: #0081FF;
}
.el-table__header-wrapper{
background: #F0F3FA;
th{
background: #F0F3FA;
/*text-align: left;*/
}
}
.el-table__footer-wrapper{
background: #F0F3FA;
}
th {
font-size: 13px !important;
font-weight: 400 !important;
}
.cell {
padding-right: 12px !important;
padding-left: 12px !important;
line-height: 18px;
}
.el-table__fixed-header-wrapper{
th{
background: #F0F3FA;
}
}
td.el-table__cell{
border-bottom: 0;
}
tr{
&.current-row>td{
background-color: initial;
}
&:nth-child(2n) {
background: #F8FBFF;
}
}
.el-table__cell{
height: 40px;
padding: 0;
line-height: 40px;
}
.el-table__body tr:hover > td.el-table__cell{
background: #DCEBFF;
}
::-webkit-scrollbar-track-piece {
//滚动条凹槽的颜色,还可以设置边框属性
background-color: #F3F4F5;
height: 16px;
padding: 0 4px;
}
//滚动条的宽度
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #F3F4F5;
border-radius: 6px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
border-radius: 8px;
height: 8px;
margin: 0 4px;
background: rgba(98,110,126,0.2);
border: 4px solid rgba(98,110,126,0.2);;
&:hover{
background: #566380;
}
}
.has-gutter{
tr{
th:nth-last-child(2){
border-right:0;
}
td:nth-last-child(2){
border-right:0;
}
}
}
.el-table__cell.gutter{
background: #F0F3FA;
}
.el-table__row{
td:last-child{
.cell{
padding-right: 12px !important;
}
}
}
}
}
.content_wap3{
margin-top: 12px;
background: #ffffff;
position:relative;
::v-deep .el-tabs{
.el-tabs__header{
margin-bottom: 0;
}
.el-tabs__item{
height: 54px;
line-height: 54px;
font-size: 16px;
}
.el-tabs__item.is-active{
font-weight: 700;
color: #232323;
}
.el-tabs__nav-wrap{
padding:0 24px;
}
.el-tabs__active-bar{
border-radius: 8px;
}
.el-tabs__nav-wrap::after{
height: 1px;
}
}
.search{
position: absolute;
right: 8px;
top: 10px;
::v-deep .el-form {
.el-form-item--small.el-form-item {
margin-bottom: 0;
}
}
}
.list{
margin: 0 16px;
.item{
border-bottom: 1px solid #EFEFEF;
padding: 16px 0;
.list-title{
font-size: 16px;
font-weight: 700;
color: #3D3D3D;
line-height: 23px;
cursor: pointer;
.list-titel-a{
text-decoration: none;
color:#3D3D3D;
}
a{
color: #3D3D3D;
}
a:hover{
color:#0081FF;
}
}
.list-content {
margin-top: 16px;
display: flex;
justify-content: start;
align-items: center;
.list-content-text {
display: flex;
justify-content: start;
align-items: center;
margin-right: 32px;
font-size: 14px;
span:first-child {
font-weight: 400;
color: rgba(35, 35, 35, 0.4);
line-height: 15px
}
span:last-child {
font-weight: 400;
color: rgba(35, 35, 35, 0.8);
line-height: 15px
}
.blue {
color: #0081FF !important;
cursor: pointer;
}
}
}
}
}
}
::v-deep .selectTag{
.el-select__tags{
.el-tag{
&:first-child{
width: 90px;
}
}
}
}
}
.content-left{
.task-wrap{
height: 88px;
......
<template>
<div class="app-container home">
<el-row :gutter="20">
<el-col :span="18">
<div class="content-left">
<!--经理视角-->
<div class="manage" v-if="user === 1">
<el-row>
<el-col :span="16">
<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>
<img class="icon-img" src="@/assets/images/index/icon1.png"/>
<p class="text">项目管理</p>
</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>
<img class="icon-img" src="@/assets/images/index/icon2.png"/>
<p class="text">客户管理</p>
</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>
<img class="icon-img" src="@/assets/images/index/icon3.png"/>
<p class="text">宏观经济</p>
</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>
<img class="icon-img" src="@/assets/images/index/icon4.png"/>
<p class="text">集团户</p>
</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 class="item">
<img class="icon-img" src="@/assets/images/index/icon5.png"/>
<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 v-if="user === 1" class="content-wrap">
<el-col :span="12">
<div class="record">
<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="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>
</el-col>
<el-col :span="8">
<div class="user" @click="handleChange">
<h3>刘毅<span>总经理</span></h3>
<p>您好,祝您工作顺利每一天</p>
</div>
<div v-if="user === 1" class="analysis">
<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="tabs">
<!--<div class="label" v-for="(item,index) in typeList" :class="typeIndex === index ? 'color':''" @click="handleClick(index)">{{item.name}}</div>-->
</div>
<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-col>
</el-row>
<div class="tips">注:数据来源大司空建筑大数据平台,统计范围为全国公开的施工内土地交易项目,未公开的不含在内</div>
<div class="content content_wap1">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">集团中标统计</span>
</div>
</div>
<el-row>
<el-col :span="14">
<div id="zbtj-echarts" style="height: 300px;"></div>
</el-col>
<el-col :span="10">
<div class="search">
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
<el-form-item prop="address">
<el-select v-model="queryParams.address" placeholder="项目地区" style="width: 150px;">
<el-option v-for="(item,index) in addressList" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div>
</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"
placeholder="中标日期"
@handle-search="changeSelect"/>
</el-form-item>
</el-form>
</div>
<div>
<div id="fx-echarts" style="height: 280px;"></div>
<div class="box-right">
<el-table
:data="jtList"
border
max-height="250"
fit
highlight-current-row
>
<el-table-column prop="name" label="集团名称" width="120"/>
<el-table-column prop="count" label="中标数量(个)" align="right" sortable/>
<el-table-column prop="amount" label="中标金额(万元)" align="right" sortable/>
</el-table>
</div>
</el-col>
</el-row>
</div>
<div class="content content_wap2">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">大项目中标排行榜</span>
</div>
<!--员工视角-->
<div v-if="user === 2" 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>
<el-row>
<el-col :span="14">
<div id="zbph-echarts" style="height: 500px;"></div>
</el-col>
<el-col :span="10">
<div class="search">
<el-form ref="queryForm" :model="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="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 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>
</div>
<div v-if="user === 2" class="trends">
<el-tabs v-model="activeName" @tab-click="handleClickTab">
<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>
</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 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 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 class="pagination-box" v-if="totalCount>queryParams2.pageSize && !zxzbIsSkeleton">
<el-pagination background :current-page="queryParams2.pageNum" :page-size="queryParams2.pageSize" :total="totalCount" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
</div>
</div>
<div class="zbgg" v-if="user === 1">
<span class="common-title">中标公告</span>
<div class="list">
<div class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
</el-tab-pane>
<el-tab-pane label="大项目最新招标" name="second">
<skeleton v-if="zhaobiaoIsSkeleton" style="padding: 16px"></skeleton>
<div v-if="!zhaobiaoIsSkeleton" class="list">
<div class="item" v-for="(item,index) in zbList" :key="index">
<p class="list-title"><router-link :to="`/biddetail/${item.bid}`" tag="a" class="a-link" v-if="item.bid" v-html="item.projectName"></router-link></p>
<div class="list-content">
<p class="list-content-text">
<span>总投资:</span>
<span>{{item.projectAmount}}万元</span>
</p>
<p class="list-content-text">
<span>招标人:</span>
<span>{{item.tenderee || '--'}}</span>
</p>
<p class="list-content-text">
<span>发布日期:</span>
<span>{{item.issueTime || '--'}}</span>
</p>
</div>
</div>
</div>
<div class="pagination-box" v-if="zbTableTotal>queryParams2.pageSize && !zhaobiaoIsSkeleton">
<el-pagination background :current-page="queryParams2.pageNum" :page-size="queryParams2.pageSize" :total="zbTableTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
</div>
</el-tab-pane>
</el-tabs>
<div class="search">
<el-form ref="queryForm" :model="queryParams2" :inline="true" size="small">
<el-form-item prop="amount">
<custom-money-select
:moneyList="moneyList"
v-model="amount"
placeholder="中标金额"
@handle-search="changeSelect3" />
</el-form-item>
<el-form-item prop="provinceId">
<el-select v-model="queryParams2.provinceId" 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">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
<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">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
<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">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
<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">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
<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">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
<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 class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
</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="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
<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>
<div v-if="user === 2" 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>
</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="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
</p>
<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 class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
</p>
</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>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import dataRegion from '@/assets/json/dataRegion'
import "@/assets/styles/public.css";
import CustomTimeSelect from './component/CustomTimeSelect'
import CustomMoneySelect from './component/CustomMoneySelect'
import skeleton from './component/skeleton'
import { bigWinningBidsPage,bigBidPage } from '@/api/index'
export default {
name: "Index",
components: {
CustomTimeSelect,CustomMoneySelect,skeleton
},
data() {
return {
// 版本号
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:[
{
title:'今天拜访了重庆交通局杨科长,洽谈比较愉快,预计下月有项目招标,希望能有机会合作。',
......@@ -481,30 +499,55 @@ export default {
],
pmData:[
{
name:'朱博',
name:'中治建工集团有限公司',
value:334,
value1:164,
},
{
name:'陈伟',
name:'中机中联工程有限公司',
value:230,
value1:130,
},
{
name:'张天翼',
name:'中铁五局集团第六公司',
value:156,
value1:150,
},
{
name:'李晨旭',
name:'中铁长江交通设计公司',
value:112,
value1:130,
},
{
name:'徐阳',
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:[// 排序图标
......@@ -513,6 +556,11 @@ export default {
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',
......@@ -558,296 +606,253 @@ export default {
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目,项目地区是重庆市-江北区,项目类型为工程建设。'
},
],
area:'西南地区',
areaList:[
jtList:[
{
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:'不限',
dateList:['不限','今日','昨日','近三天','近七天']
};
addressList:[],
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() {
this.dataRegion()
this.getBigWinningBidsPage()
if(this.user === 1){
this.$nextTick(()=>{
this.initChart()
this.initChart(this.jtList)
this.initChart1()
})
}
},
methods: {
handleClick(index){
this.typeIndex=index;
getBigWinningBidsPage(){
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() {
let myChart = echarts.init(document.getElementById("fx-echarts"))
let option ={
legend: {
x:'right',
padding:[3,120,0,0],
itemHeight:8,
itemWidth:16,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
backgroundColor: '#FFFFFF'
}
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;
}
})
},
//地区
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": []
});
}
},
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
}
},
}
}
this.addressList = str;
},
initChart(data) {
this.$nextTick(()=>{
let myChart = echarts.init(document.getElementById("zbtj-echarts"))
let option ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
{
data: this.jyfxData1.map(item => item.dcjzje),
name:'待成交总金额',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#9EE474",
xAxis: {
type: 'category',
axisLabel: { //坐标轴刻度标签的相关设置
margin: 15, //刻度标签与轴线之间的距离
color:"#666666"
},
itemStyle:{
color: "#9EE474",
},
//设置面积区域为渐变效果
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
}
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data.map(item => item.name),
},
{
data: this.jyfxData1.map(item => item.cjxmje),
name:'成交项目金额',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
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
}
},
},
{
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
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位:个',
nameLocation: 'start',
nameTextStyle: {
padding: [0, 0, 0, -60], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
},
{
data: this.jyfxData1.map(item => item.cbxmzs),
name:'储备项目总数',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#67B3FD",
},
itemStyle:{
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
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位:万元',
nameLocation: 'start',
nameTextStyle: {
padding: [0, 0, 0, 72], // 四个数字分别为上右下左与原位置距离
color: '#666666',
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: ['#FFFFFF']
}
}
},
}
],
grid: {
top:30,
left:80,
right:90,
bottom:30,
},
{
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
}
series: [
{
name:'中标金额(万元)',
smooth: false, //平滑
type:"line",
symbolSize: 6,
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + '万元'
}
},
itemStyle: {
color: '#14C9C9'
},
data:data.map(item => item.amount),
},
},
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
{
name:'中标总数(个)',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value + '个';
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#56A5FF'
}, {
offset: 1,
color: '#1B8EFF'
}])
}
},
data:data.map(item => item.count),
}
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
},
initChart1(){
var rankPic = [
......@@ -856,15 +861,20 @@ export default {
require('@/assets/images/index/3.png'),
require('@/assets/images/index/4.png'),
require('@/assets/images/index/5.png'),
require('@/assets/images/index/6.png'),
require('@/assets/images/index/7.png'),
require('@/assets/images/index/8.png'),
require('@/assets/images/index/9.png'),
require('@/assets/images/index/10.png'),
]
let myChart = echarts.init(document.getElementById("pm-echarts"))
let myChart = echarts.init(document.getElementById("zbph-echarts"))
let option ={
legend: {
show: true,
x:'center',
y:'bottom',
padding:[0,0,10,0],
x:'right',
y:'top',
padding:[10,0,10,0],
itemWidth: 24,
itemHeight: 10,
textStyle:{
......@@ -888,7 +898,7 @@ export default {
}
},
axisLabel: {
margin: 80,
margin: 200,
textStyle: {
align: 'left',
},
......@@ -900,6 +910,7 @@ export default {
1: {
height: 24,
width: 24,
// marginBottom:-15,
align: 'center',
backgroundColor: {
image: rankPic[0]
......@@ -937,6 +948,46 @@ export default {
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 {
},
grid: {
left: '20%',
top: 20,
top: 40,
right: 20,
bottom: 60,
},
......@@ -964,10 +1015,6 @@ export default {
data: this.pmData.map(item => item.value),
barGap: 0,
type: 'bar',
// stack: 'total',
// emphasis: {
// focus: 'series'
// },
itemStyle:{
color: '#14C9C9',
barBorderRadius:[0, 20, 20, 0]
......@@ -975,15 +1022,10 @@ export default {
barWidth: 8,
},
{
// realtimeSort: true,
name:'目标产值',
data: this.pmData.map(item => item.value1),
barGap: 0,
type: 'bar',
// stack: 'total',
// emphasis: {
// focus: 'series'
// },
itemStyle:{
color: '#92C9FF',
barBorderRadius:[0, 20, 20, 0]
......@@ -998,17 +1040,52 @@ export default {
});
},
handleClickTab(){
this.queryParams2.pageNum=1;
if(this.activeName === 'first'){
this.getBigWinningBidsPage()
}
if(this.activeName === 'second'){
this.getBigBidPage()
}
},
handleClickTab1(){},
handleChange(){
this.user = this.user === 1 ? 2 : 1;
if(this.user === 1){
this.$nextTick(()=>{
this.initChart()
this.initChart(this.jtList)
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>
......@@ -1016,6 +1093,7 @@ export default {
<style scoped lang="scss">
.app-container{
padding: 0;
margin: 16px 24px;
}
p{
padding: 0;
......@@ -1033,6 +1111,315 @@ export default {
padding-right: 0 !important;
}
}
.manage{
.task-wrap{
height: 99px;
background: #FFFFFF;
border-radius: 4px;
display: flex;
justify-content: space-between;
.item{
width: 20%;
text-align: center;
margin: 0 auto;
cursor: pointer;
.icon-img{
width: 48px;
height: 48px;
margin-top: 16px;
}
.text{
color: #3D3D3D;
font-size: 12px;
margin-top: 5px;
}
}
}
.user{
height: 99px;
border-radius: 4px;
background-image: url("../assets/images/index/user_bg.png");
background-size: cover;
padding-left: 24px;
h3{
font-weight: 700;
color: #1C1C28;
font-size: 18px;
padding-top: 16px;
padding-bottom: 8px;
margin: 0px;
span{
height: 20px;
background: #FFF2E2;
display: inline-block;
border-radius: 11px;
border: 1px solid #FFB010;
color: #FFB010;
font-size: 12px;
line-height: 20px;
padding: 0 10px;
margin-left: 12px;
font-weight: 400;
}
}
p{
color: #666666;
font-size: 16px;
}
}
.tips{
color: #999999;
font-size: 12px;
margin: 12px 0;
}
.content{
background: #ffffff;
padding: 22px 16px;
}
.content_wap1{
height: 360px;
margin-bottom: 12px;
}
.content_wap2{
height: 540px;
}
.search{
float:right;
::v-deep .el-form{
.el-form-item--small.el-form-item{
margin-bottom: 16px;
}
.el-form-item{
height: 32px;
}
.el-form-item__content{
line-height: 32px;
}
.el-input{
line-height: 32px;
.el-input__inner{
height: 32px;
line-height: 32px;
border-radius: 4px
}
}
}
}
.box-right{
width: 90%;
float: right;
::v-deep .el-table{
.sort-caret.ascending{
border-bottom-color: rgba(0,129,255,0.5);
}
.ascending .sort-caret.ascending{
border-bottom-color: #0081FF;
}
.sort-caret.descending{
border-top-color: rgba(0,129,255,0.5);
}
.descending .sort-caret.descending{
border-top-color: #0081FF;
}
.el-table__header-wrapper{
background: #F0F3FA;
th{
background: #F0F3FA;
/*text-align: left;*/
}
}
.el-table__footer-wrapper{
background: #F0F3FA;
}
th {
font-size: 13px !important;
font-weight: 400 !important;
}
.cell {
padding-right: 12px !important;
padding-left: 12px !important;
line-height: 18px;
}
.el-table__fixed-header-wrapper{
th{
background: #F0F3FA;
}
}
td.el-table__cell{
border-bottom: 0;
}
tr{
&.current-row>td{
background-color: initial;
}
&:nth-child(2n) {
background: #F8FBFF;
}
}
.el-table__cell{
height: 40px;
padding: 0;
line-height: 40px;
}
.el-table__body tr:hover > td.el-table__cell{
background: #DCEBFF;
}
::-webkit-scrollbar-track-piece {
//滚动条凹槽的颜色,还可以设置边框属性
background-color: #F3F4F5;
height: 16px;
padding: 0 4px;
}
//滚动条的宽度
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #F3F4F5;
border-radius: 6px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
border-radius: 8px;
height: 8px;
margin: 0 4px;
background: rgba(98,110,126,0.2);
border: 4px solid rgba(98,110,126,0.2);;
&:hover{
background: #566380;
}
}
.has-gutter{
tr{
th:nth-last-child(2){
border-right:0;
}
td:nth-last-child(2){
border-right:0;
}
}
}
.el-table__cell.gutter{
background: #F0F3FA;
}
.el-table__row{
td:last-child{
.cell{
padding-right: 12px !important;
}
}
}
}
}
.content_wap3{
margin-top: 12px;
background: #ffffff;
position:relative;
::v-deep .el-tabs{
.el-tabs__header{
margin-bottom: 0;
}
.el-tabs__item{
height: 54px;
line-height: 54px;
font-size: 16px;
}
.el-tabs__item.is-active{
font-weight: 700;
color: #232323;
}
.el-tabs__nav-wrap{
padding:0 24px;
}
.el-tabs__active-bar{
border-radius: 8px;
}
.el-tabs__nav-wrap::after{
height: 1px;
}
}
.search{
position: absolute;
right: 8px;
top: 10px;
::v-deep .el-form {
.el-form-item--small.el-form-item {
margin-bottom: 0;
}
}
}
.list{
margin: 0 16px;
.item{
border-bottom: 1px solid #EFEFEF;
padding: 16px 0;
.list-title{
font-size: 16px;
font-weight: 700;
color: #3D3D3D;
line-height: 23px;
cursor: pointer;
.list-titel-a{
text-decoration: none;
color:#3D3D3D;
}
a{
color: #3D3D3D;
}
a:hover{
color:#0081FF;
}
}
.list-content {
margin-top: 16px;
display: flex;
justify-content: start;
align-items: center;
.list-content-text {
display: flex;
justify-content: start;
align-items: center;
margin-right: 32px;
font-size: 14px;
span:first-child {
font-weight: 400;
color: rgba(35, 35, 35, 0.4);
line-height: 15px
}
span:last-child {
font-weight: 400;
color: rgba(35, 35, 35, 0.8);
line-height: 15px
}
.blue {
color: #0081FF !important;
cursor: pointer;
}
}
}
}
}
}
::v-deep .selectTag{
.el-select__tags{
.el-tag{
&:first-child{
width: 90px;
}
}
}
}
}
.content-left{
.task-wrap{
height: 88px;
......
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