Commit 60ede402 authored by Administrator's avatar Administrator

Merge remote-tracking branch 'origin/dev20230707' into dev20230707

parents f8d1bbf2 c2b1e8ca
...@@ -27,11 +27,26 @@ public class BusinessOverviewController extends BaseController { ...@@ -27,11 +27,26 @@ public class BusinessOverviewController extends BaseController {
private IBusinessOverviewService baseService; private IBusinessOverviewService baseService;
/** /**
* 项目统计 * 项目状态统计
*/ */
@GetMapping("/statistics") @GetMapping("/status/statistics")
public AjaxResult statistics(){ public AjaxResult statusStatistics(){
return AjaxResult.success(baseService.statistics(new BusinessSearchDto(SecurityUtils.getUserId()))); return AjaxResult.success(baseService.statusStatistics(new BusinessSearchDto(SecurityUtils.getUserId())));
}
/**
* 项目资金分析
*/
@GetMapping("/amount/analyze")
public AjaxResult amountAnalyze(){
return AjaxResult.success(baseService.amountAnalyze(new BusinessSearchDto(SecurityUtils.getUserId(),0)));
}
/**
* 项目类型分析
*/
@GetMapping("/type/analyze")
public AjaxResult typeAnalyze(){
return AjaxResult.success(baseService.typeAnalyze(new BusinessSearchDto(SecurityUtils.getUserId(),2)));
} }
/** /**
......
package com.dsk.web.controller.dsk; package com.dsk.web.controller.dsk;
import com.alibaba.fastjson2.JSONObject;
import com.dsk.common.core.controller.BaseController; import com.dsk.common.core.controller.BaseController;
import com.dsk.common.core.domain.AjaxResult;
import com.dsk.common.core.domain.R; import com.dsk.common.core.domain.R;
import com.dsk.common.core.page.TableDataInfo; import com.dsk.common.core.page.TableDataInfo;
import com.dsk.system.domain.dsk.dto.JskCombineCertificateDto; import com.dsk.system.domain.dsk.dto.JskCombineCertificateDto;
...@@ -72,4 +74,36 @@ public class JskCombineInfoController extends BaseController { ...@@ -72,4 +74,36 @@ public class JskCombineInfoController extends BaseController {
public R groupCertificateCount(@RequestBody JskCombineSearchDto dto) throws Exception { public R groupCertificateCount(@RequestBody JskCombineSearchDto dto) throws Exception {
return baseService.groupCertificateCount(dto); return baseService.groupCertificateCount(dto);
} }
/**
* 集团户搜索
*/
@PostMapping("/index")
public AjaxResult index(@RequestBody JSONObject object) {
return baseService.index(object);
}
/**
* 查央企
*/
@PostMapping("/centralEnterprse")
public AjaxResult centralEnterprse() {
return baseService.centralEnterprse();
}
/**
* 查央企子公司
*/
@PostMapping("/centralEnterprse/child")
public AjaxResult centralEnterprseChild() {
return baseService.centralEnterprseChild();
}
/**
* 查地方国企
*/
@PostMapping("/centralEnterprse/local")
public AjaxResult centralEnterprseLocal(@RequestBody JSONObject object) {
return baseService.centralEnterprseLocal(object);
}
} }
<template>
<div :ref="refStr" class="custom-time-select screen-popper" id="custom-time-select">
<div :class="['input-block', isSelectOption?'rote':'']">
<div class="block" @click="isSelectOption=!isSelectOption" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
<el-input class="custom-time-input" v-model="value" :placeholder="placeholder" readonly>
<template slot="suffix">
<span @click.stop="handleClear" :class="[isClear&&isHover?'el-icon-circle-close':'el-icon-arrow-down']"></span>
</template>
</el-input>
</div>
<div class="options-block" v-if="isSelectOption">
<div class="arrow"></div>
<div @click="handleClick(option)" :class="['option', value==option?'active':'']" :key="i" v-for="(option, i) in options">
<template v-if="option == '自定义'">
<div style="position: relative">
自定义
<el-date-picker
ref="picker"
:default-value="defaultValue"
style="position: absolute;opacity: 0;"
v-model="pickerValue"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
@change="changePicker">
</el-date-picker>
</div>
</template>
<template v-else>
<span>{{option}}</span> <span v-if="value==option" class="el-icon-check"></span>
</template>
</div>
</div>
</div>
<div v-if="isSelectOption" class="picker-block" ref="picker-block"></div>
</div>
</template>
<script>
export default {
props: {
'placeholder': {
type: String,
default: '请选择',
},
'ref-str': {
type: String,
default: `timeselect${String(Math.random(0, 100)).slice(2)}`,
},
dateFrom: {
type: String,
default: ''
},
dateTo: {
type: String,
default: ''
},
timeList: {
type: Array,
default: () => [],
}
},
computed: {
isClear() {
if(!this.isSelectOption && this.value) {
return true
}else {
return false
}
},
pickerOptions() {
// 用计算属性
let _this = this
// 此时 this指向的就是vue实例
return {
disabledDate(time) {
if(_this.dateFrom){
return time.getTime() < new Date(_this.dateFrom.replace(/-/g, '/')).getTime() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
}
if(_this.dateTo){
return time.getTime() > new Date(_this.dateTo.replace(/-/g, '/')).getTime();//如果没有后面的-8.64e7就是不可以选择今天的
}
}
}
},
},
watch: {
refStr(refStr) {
return refStr
}
},
data() {
return {
value: '',
options: ['近1年', '近2年', '近3年', '近5年', '自定义',],
isSelectOption: false,
isHover: false,
pickerValue: [],
defaultValue:new Date()
}
},
mounted() {
if(this.dateTo){
this.defaultValue = new Date(this.dateTo)
}
this.handleAppClick()
if(this.timeList&&this.timeList.length>0){
this.options = this.timeList
}
},
methods: {
// 时间格式化
formatDate(timeStr) {
let date = new Date(Number(timeStr))
let year = date.getFullYear()
let month = String(date.getMonth() + 1).padStart(2, 0)
let day = String(date.getDate()).padStart(2, 0)
return `${year}-${month}-${day}`
},
// 判断是否点击的为组件内部
handleAppClick() {
const app = document.getElementById('app')
app.addEventListener('click', (e) => {
const dom = this.$refs[this.refStr]
const flag = dom && dom.contains(e.target)
// const flag = document.getElementById('custom-time-select').contains(e.target)
!flag ? this.isSelectOption = false : ''
if(this.value == '自定义' && (!this.pickerValue || !this.pickerValue.length)) {
this.value = ''
this.$emit('input', '')
this.$emit('handle-search')
}
}, true)
},
handleMouseenter() {
this.isHover = true
},
handleMouseleave() {
this.isHover = false
},
handleClear() {
if(this.isClear && this.isHover) {
this.value = ''
this.pickerValue = []
this.$emit('input', '')
this.$emit('handle-search')
}else {
this.isSelectOption = true
}
},
handleClick(value) {
this.value = value
if(value == '自定义') {
this.value = '自定义'
this.$refs.picker && this.$refs.picker.length && this.$refs.picker[0].focus()
this.$nextTick(() => {
this.$refs['picker-block'].appendChild(this.$refs.picker[0].popperElm)
})
}else {
this.pickerValue = []
this.isSelectOption = false
let timeStr = []
let startTime = ''
let endTime = new Date()
switch (value) {
case '近三天':
startTime = new Date(endTime.getTime() - 3600 * 1000 * 24 * 3)
timeStr = [this.formatDate(startTime), this.formatDate(endTime)]
break;
case '近七天':
startTime = new Date(endTime.getTime() - 3600 * 1000 * 24 * 7)
timeStr = [this.formatDate(startTime), this.formatDate(endTime)]
break;
case '近半月':
startTime = new Date(endTime.getTime() - 3600 * 1000 * 24 * 15)
timeStr = [this.formatDate(startTime), this.formatDate(endTime)]
break;
case '近1年':
startTime = new Date().setFullYear(new Date().getFullYear() - 1)
if(this.dateTo){
startTime = new Date(this.dateTo).setFullYear(new Date(this.dateTo).getFullYear() - 1)
}
timeStr = [this.formatDate(startTime), this.formatDate(endTime)]
break;
case '近2年':
startTime = new Date().setFullYear(new Date().getFullYear() - 2)
if(this.dateTo){
startTime = new Date(this.dateTo).setFullYear(new Date(this.dateTo).getFullYear() - 2)
}
timeStr = [this.formatDate(startTime), this.formatDate(endTime)]
break;
case '近3年':
startTime = new Date().setFullYear(new Date().getFullYear() - 3)
if(this.dateTo){
startTime = new Date(this.dateTo).setFullYear(new Date(this.dateTo).getFullYear() - 3)
}
timeStr = [this.formatDate(startTime), this.formatDate(endTime)]
break;
case '近5年':
startTime = new Date().setFullYear(new Date().getFullYear() - 5)
if(this.dateTo){
startTime = new Date(this.dateTo).setFullYear(new Date(this.dateTo).getFullYear() - 5)
}
timeStr = [this.formatDate(startTime), this.formatDate(endTime)]
break;
default:
if(this.pickerValue && this.pickerValue.length) {
timeStr = this.pickerValue
}else {
timeStr = []
this.value = ''
}
break;
}
this.$emit('input', timeStr)
this.$emit('handle-search')
}
},
// 时间选择改变后的回调
changePicker(value) {
this.isSelectOption = false
if(value && value.length) {
// this.value = '自定义'
this.value = String(this.pickerValue)
this.$emit('input', this.pickerValue)
}else {
this.value = ''
this.$emit('input', '')
}
this.$emit('handle-search')
}
}
}
</script>
<style lang="scss">
.custom-time-select {
width: 120px;
height: 34px;
.input-block {
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
.block {
width: 100%;
height: 100%;
>.custom-time-input.el-input {
width: 100%;
height: 100%;
>input {
width: 100%;
height: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 2px;
}
}
}
.el-input__suffix {
transform: rotateZ(0);
width: 25px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
&.rote {
.el-input__suffix {
transform: rotateZ(180deg);
}
}
}
.options-block {
position: absolute;
margin-top: 4px;
min-width: 120px;
font-size: 14px;
color: #666666;
background-color: #fff;
border: 1px solid #E4E7ED;
padding: 6px 0;
border-radius: 4px;
z-index: 10;
.option {
padding: 0 24px 0 16px;
box-sizing: border-box;
height: 36px;
display: flex;
justify-content: space-between;
align-items: center;
>span {
display: inline-block;
}
&.active {
background-color: #F2F7FF;
color: #0381FA;
}
&:hover {
background-color: #F5F7FA;
}
}
.active{
.el-date-editor{
left: -400px;
}
}
}
.picker-block {
position: relative;
&::after {
content:"";
display:block;
visibility:hidden;
clear:both;
}
.el-picker-panel.el-date-range-picker.el-popper {
left: -500px !important;
/*top: 205px !important;*/
}
.popper__arrow {
left: 30px !important;
}
}
}
</style>
<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 class="item add">
<span class="yd"><i></i><i></i><i></i><i></i><i></i><i></i></span>
<div class="btn"><i class="el-icon-plus"></i>新建待办任务</div>
</div> </div>
</div> <div class="item">
<!--经理视角--> <img class="icon-img" src="@/assets/images/index/icon5.png"/>
<div v-if="user === 1" class="content-wrap"> <p class="text">查城投平台</p>
<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 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>
</div>
</div>
</div>
<div>
<div id="fx-echarts" style="height: 280px;"></div>
</div>
</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>
<div class="list"> <div class="item">
<div class="item" v-for="(item,index) in gjjlData" :key="index" v-if='index < 3'> <img class="icon-img" src="@/assets/images/index/icon6.png"/>
<h3>{{item.title}}</h3> <p class="text">商机雷达</p>
<p>
<span>拜访时间:{{item.time}}</span>
<span>关联企业:{{item.name}}</span>
</p>
<div class="btn">写跟进<i class="el-icon-edit"></i></div>
</div>
</div> </div>
</div> </div>
<div v-if="user === 2" class="trends"> </el-col>
<el-tabs v-model="activeName" @tab-click="handleClickTab"> <el-col :span="8">
<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"> <div class="user" @click="handleChange">
<h3 v-if="user === 1">刘毅<span>总经理</span></h3> <h3>刘毅<span>总经理</span></h3>
<h3 v-if="user === 2">李婷婷<span>营销员</span></h3>
<p>您好,祝您工作顺利每一天</p> <p>您好,祝您工作顺利每一天</p>
</div> </div>
<div class="search"> </el-col>
<span class="common-title">快捷搜索</span> </el-row>
<el-input placeholder="找客户/找项目/找甲方"> <div class="tips">注:数据来源大司空建筑大数据平台,统计范围为全国公开的施工内土地交易项目,未公开的不含在内</div>
<i slot="prefix" class="el-icon-search"></i> <div class="content content_wap1">
</el-input> <div class="flex-box query-box">
<span class="common-title">储备项目类</span> <div class="flex-box query-params">
<div class="list" style="margin-top: 8px;"> <span class="common-title">集团中标统计</span>
<div class="item"> </div>
<img src="@/assets/images/index/cb_icon1.png"/> </div>
<p>EPC项目</p> <el-row>
</div> <el-col :span="14">
<div class="item"> <div id="zbtj-echarts" style="height: 300px;"></div>
<img src="@/assets/images/index/cb_icon2.png"/> </el-col>
<p>投资项目</p> <el-col :span="10">
</div> <div class="search">
<div class="item"> <el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
<img src="@/assets/images/index/cb_icon3.png"/> <el-form-item prop="address">
<p>房建项目</p> <el-select v-model="queryParams.address" placeholder="项目地区">
</div> <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" placeholder="项目类型">
<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 class="list"> <div class="box-right">
<div class="item"> <el-table
<img src="@/assets/images/index/cb_icon4.png"/> :data="jtList"
<p>电力项目</p> element-loading-text="Loading"
</div> border
<div class="item"> show-summary
<img src="@/assets/images/index/cb_icon5.png"/> max-height="250"
<p>市政项目</p> fit
</div> highlight-current-row
<div class="item"> >
<img src="@/assets/images/index/cb_icon6.png"/> <el-table-column prop="name" label="集团名称" width="120"/>
<p>水利项目</p> <el-table-column prop="count" label="中标数量(个)" align="right" sortable/>
</div> <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 class="zbgg" v-if="user === 1"> </div>
<span class="common-title">中标公告</span> <el-row>
<div class="list"> <el-col :span="12">
<div class="item"> <div id="zbph-echarts" style="height: 500px;"></div>
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> </el-col>
<p> <el-col :span="12">
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span> </el-col>
</p> </el-row>
</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="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> </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'
export default { export default {
name: "Index", name: "Index",
components: {
CustomTimeSelect,
},
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:'今天拜访了重庆交通局杨科长,洽谈比较愉快,预计下月有项目招标,希望能有机会合作。',
...@@ -558,296 +449,203 @@ export default { ...@@ -558,296 +449,203 @@ 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:['施工类项目'],
queryParams:{
address:'',
type:''
},
timeList: ['近三天', '近七天', '近半月', '自定义'],
}; };
}, },
created() { created() {
this.dataRegion()
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){ //地区
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() { initChart(data) {
let myChart = echarts.init(document.getElementById("fx-echarts")) this.$nextTick(()=>{
let option ={ let myChart = echarts.init(document.getElementById("zbtj-echarts"))
legend: { let option ={
x:'right', tooltip: {
padding:[3,120,0,0], trigger: 'axis',
itemHeight:8, axisPointer: {
itemWidth:16, type: 'cross'
},
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
}
},
},
{
data: this.jyfxData1.map(item => item.dcjzje),
name:'待成交总金额',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#9EE474",
},
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
}
},
}, },
{ xAxis: {
data: this.jyfxData1.map(item => item.cjxmje), type: 'category',
name:'成交项目金额', axisLabel: { //坐标轴刻度标签的相关设置
type: 'line', margin: 15, //刻度标签与轴线之间的距离
smooth: true, color:"#666666"
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#E1B3FF",
}, },
itemStyle:{ axisTick: false, //坐标轴刻度
color: "#E1B3FF", axisPointer: {
}, type: 'shadow'
//设置面积区域为渐变效果
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: data.map(item => item.name),
}, },
{ yAxis: [
data: this.jyfxData1.map(item => item.cjxmzs), {
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: "#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 = [
...@@ -857,7 +655,7 @@ export default { ...@@ -857,7 +655,7 @@ export default {
require('@/assets/images/index/4.png'), require('@/assets/images/index/4.png'),
require('@/assets/images/index/5.png'), require('@/assets/images/index/5.png'),
] ]
let myChart = echarts.init(document.getElementById("pm-echarts")) let myChart = echarts.init(document.getElementById("zbph-echarts"))
let option ={ let option ={
legend: { legend: {
...@@ -1008,7 +806,11 @@ export default { ...@@ -1008,7 +806,11 @@ export default {
this.initChart1() this.initChart1()
}) })
} }
} },
changeSelect(){
console.log("11111")
// this.$emit('handle-search')
},
} }
}; };
</script> </script>
...@@ -1016,6 +818,7 @@ export default { ...@@ -1016,6 +818,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 +836,215 @@ export default { ...@@ -1033,6 +836,215 @@ 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;
}
}
}
}
.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-left{ .content-left{
.task-wrap{ .task-wrap{
height: 88px; height: 88px;
......
<template> <template>
<div class="dashboard-editor-container"> <div class="app-container home">
<el-row :gutter="20">
<el-col :span="18">
<div class="content-left">
<div class="task-wrap">
<div class="item">
<img class="left" src="@/assets/images/index/icon1.png"/>
<div class="right">
<p class="title">即将开标项目</p>
<p class="number">36</p>
<p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p>
</div>
</div>
<div class="item">
<img class="left" src="@/assets/images/index/icon2.png"/>
<div class="right">
<p class="title">重点关注项目</p>
<p class="number">36</p>
<p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p>
</div>
</div>
<div class="item">
<img class="left" src="@/assets/images/index/icon3.png"/>
<div class="right">
<p class="title">重点关注客户</p>
<p class="number">36</p>
<p class="compare">较上月 <span class="down">-3<img src="@/assets/images/index/down.png"/></span></p>
</div>
</div>
<div class="item">
<img class="left" src="@/assets/images/index/icon4.png"/>
<div class="right">
<p class="title">储备合作客户</p>
<p class="number">36</p>
<p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p>
</div>
</div>
<div class="item add">
<span class="yd"><i></i><i></i><i></i><i></i><i></i><i></i></span>
<div class="btn"><i class="el-icon-plus"></i>新建待办任务</div>
</div>
</div>
<!--经理视角-->
<div 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 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>
</div>
</div>
</div>
<div>
<div id="fx-echarts" style="height: 280px;"></div>
</div>
</div>
<panel-group @handleSetLineChartData="handleSetLineChartData" /> <!--员工视角-->
<div v-if="user === 2" class="content-db">
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"> <div class="flex-box query-box">
<line-chart :chart-data="lineChartData" /> <div class="flex-box query-params">
</el-row> <span class="common-title">待办</span>
</div>
<el-row :gutter="32"> <div class="flex-box query-ability"><span>9</span>全部待办 ></div>
<el-col :xs="24" :sm="24" :lg="8"> </div>
<div class="chart-wrapper"> <div class="list">
<raddar-chart /> <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 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> </div>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :lg="8"> <el-col :span="6">
<div class="chart-wrapper"> <div class="content-right">
<pie-chart /> <div class="user" @click="handleChange">
</div> <h3 v-if="user === 1">刘毅<span>总经理</span></h3>
</el-col> <h3 v-if="user === 2">李婷婷<span>营销员</span></h3>
<el-col :xs="24" :sm="24" :lg="8"> <p>您好,祝您工作顺利每一天</p>
<div class="chart-wrapper"> </div>
<bar-chart /> <div class="search">
<span class="common-title">快捷搜索</span>
<el-input placeholder="找客户/找项目/找甲方">
<i slot="prefix" class="el-icon-search"></i>
</el-input>
<span class="common-title">储备项目类</span>
<div class="list" style="margin-top: 8px;">
<div class="item">
<img src="@/assets/images/index/cb_icon1.png"/>
<p>EPC项目</p>
</div>
<div class="item">
<img src="@/assets/images/index/cb_icon2.png"/>
<p>投资项目</p>
</div>
<div class="item">
<img src="@/assets/images/index/cb_icon3.png"/>
<p>房建项目</p>
</div>
</div>
<div class="list">
<div class="item">
<img src="@/assets/images/index/cb_icon4.png"/>
<p>电力项目</p>
</div>
<div class="item">
<img src="@/assets/images/index/cb_icon5.png"/>
<p>市政项目</p>
</div>
<div class="item">
<img src="@/assets/images/index/cb_icon6.png"/>
<p>水利项目</p>
</div>
</div>
</div>
<div class="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>
</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 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 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 class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额:4754.34</span>
<span>中标单位:中铁十二局集团</span>
</p>
</div>
</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>
</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-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import PanelGroup from './dashboard/PanelGroup' import * as echarts from 'echarts';
import LineChart from './dashboard/LineChart' import "@/assets/styles/public.css";
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
const lineChartData = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 165],
actualData: [120, 82, 91, 154, 162, 140, 145]
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130]
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130]
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130]
}
}
export default { export default {
name: 'Index', name: "Index",
components: {
PanelGroup,
LineChart,
RaddarChart,
PieChart,
BarChart
},
data() { data() {
return { return {
lineChartData: lineChartData.newVisitis // 版本号
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:'今天拜访了重庆交通局杨科长,洽谈比较愉快,预计下月有项目招标,希望能有机会合作。',
user:'李婷婷',
name:'重庆机场集团',
time:'2023-04-12 14: 00'
},
{
title:'今天拜访了重庆机场集团董事长,下个月招标项目预计1.2个亿。争取能拿到项目。',
user:'李婷婷',
name:'重庆机场集团',
time:'2023-04-12 14: 00'
},
{
title:'5月27日早上劳动局去杨局长说希望我们把项目预算清单做出来看一下。',
user:'李婷婷',
name:'重庆机场集团',
time:'2023-04-12 14: 00'
},
{
title:'拜访了重庆交通局杨科长,洽谈比较愉快,预计下月有项目招标,希望能有机会合作。',
user:'李婷婷',
name:'重庆机场集团',
time:'2023-04-12 14: 00'
},
{
title:'5月27日早上劳动局去杨局长说希望我们把项目预算清单做出来看一下。',
user:'李婷婷',
name:'重庆机场集团',
time:'2023-04-12 14: 00'
},
{
title:'拜访了重庆交通局杨科长,洽谈比较愉快,预计下月有项目招标,希望能有机会合作。',
user:'李婷婷',
name:'重庆机场集团',
time:'2023-04-12 14: 00'
},
{
title:'拜访了重庆交通局杨科长,洽谈比较愉快,预计下月有项目招标,希望能有机会合作。',
user:'李婷婷',
name:'重庆机场集团',
time:'2023-04-12 14: 00'
},
{
title:'拜访了重庆交通局杨科长,洽谈比较愉快,预计下月有项目招标,希望能有机会合作。',
user:'李婷婷',
name:'重庆机场集团',
time:'2023-04-12 14: 00'
},
{
title:'拜访了重庆交通局杨科长,洽谈比较愉快,预计下月有项目招标,希望能有机会合作。',
user:'李婷婷',
name:'重庆机场集团',
time:'2023-04-12 14: 00'
},
],
pmData:[
{
name:'朱博',
value:334,
value1:164,
},
{
name:'陈伟',
value:230,
value1:130,
},
{
name:'张天翼',
value:156,
value1:150,
},
{
name:'李晨旭',
value:112,
value1:130,
},
{
name:'徐阳',
value:110,
value1:90,
},
],
rankIconsSize:'24',
rankIcons:[// 排序图标
require('@/assets/images/index/1.png'),
require('@/assets/images/index/2.png'),
require('@/assets/images/index/3.png'),
require('@/assets/images/index/4.png'),
require('@/assets/images/index/5.png'),
],
user:1,
activeName:'first',
trendsList:[
{
time:'2018-04-03 10:20',
name:'重庆轨道交通集团有限公司',
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目,项目地区是重庆市-江北区,项目类型为工程建设。'
},
{
time:'2018-04-03 10:20',
name:'重庆轨道交通集团有限公司',
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目,项目地区是重庆市-江北区,项目类型为工程建设。'
},
{
time:'2018-04-03 10:20',
name:'重庆轨道交通集团有限公司',
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目,项目地区是重庆市-江北区,项目类型为工程建设。'
},
{
time:'2018-04-03 10:20',
name:'重庆轨道交通集团有限公司',
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目,项目地区是重庆市-江北区,项目类型为工程建设。'
},
{
time:'2018-04-03 10:20',
name:'重庆轨道交通集团有限公司',
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目,项目地区是重庆市-江北区,项目类型为工程建设。'
},
{
time:'2018-04-03 10:20',
name:'重庆轨道交通集团有限公司',
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目,项目地区是重庆市-江北区,项目类型为工程建设。'
},
{
time:'2018-04-03 10:20',
name:'重庆轨道交通集团有限公司',
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目,项目地区是重庆市-江北区,项目类型为工程建设。'
},
{
time:'2018-04-03 10:20',
name:'重庆轨道交通集团有限公司',
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目,项目地区是重庆市-江北区,项目类型为工程建设。'
},
],
area:'西南地区',
areaList:[
{
name:'西南地区'
},
{
name:'华中地区'
},
{
name:'华南地区'
},
{
name:'华东地区'
},
{
name:'华北地区'
},
{
name:'东北地区'
},
{
name:'西北地区'
},
],
date:'不限',
dateList:['不限','今日','昨日','近三天','近七天']
};
},
created() {
if(this.user === 1){
this.$nextTick(()=>{
this.initChart()
this.initChart1()
})
} }
}, },
methods: { methods: {
handleSetLineChartData(type) { handleClick(index){
this.lineChartData = lineChartData[type] this.typeIndex=index;
},
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
}
},
},
{
data: this.jyfxData1.map(item => item.dcjzje),
name:'待成交总金额',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#9EE474",
},
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: 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
}
},
},
{
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
}
},
},
{
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 = [
require('@/assets/images/index/1.png'),
require('@/assets/images/index/2.png'),
require('@/assets/images/index/3.png'),
require('@/assets/images/index/4.png'),
require('@/assets/images/index/5.png'),
]
let myChart = echarts.init(document.getElementById("pm-echarts"))
let option ={
legend: {
show: true,
x:'center',
y:'bottom',
padding:[0,0,10,0],
itemWidth: 24,
itemHeight: 10,
textStyle:{
borderRadius:30,
}
},
yAxis: {
type: 'category',
inverse: true, // 反向坐标
data: this.pmData.map(item => item.name),
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisPointer: {
label: {
show: true,
margin: 30
}
},
axisLabel: {
margin: 80,
textStyle: {
align: 'left',
},
formatter: function (value,index) {
let idx=index+1;
return '{' + idx + '|} {s|' + value + '}'
},
rich: {
1: {
height: 24,
width: 24,
align: 'center',
backgroundColor: {
image: rankPic[0]
},
},
2: {
height: 24,
width: 24,
align: 'center',
backgroundColor: {
image: rankPic[1]
}
},
3: {
height: 24,
width: 24,
align: 'center',
backgroundColor: {
image: rankPic[2]
}
},
4: {
height: 24,
width: 24,
align: 'center',
backgroundColor: {
image: rankPic[3]
}
},
5: {
height: 24,
width: 24,
align: 'center',
backgroundColor: {
image: rankPic[4]
}
},
}
},
},
xAxis: {
type: 'value',
},
grid: {
left: '20%',
top: 20,
right: 20,
bottom: 60,
},
tooltip: {
show: true,
backgroundColor: 'rgba(0,0,0,.7)',
borderWidth: 0,
textStyle: {
color: '#fff',
},
},
series: [
{
// realtimeSort: true,
name:'已完成产值',
data: this.pmData.map(item => item.value),
barGap: 0,
type: 'bar',
// stack: 'total',
// emphasis: {
// focus: 'series'
// },
itemStyle:{
color: '#14C9C9',
barBorderRadius:[0, 20, 20, 0]
},
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]
},
barWidth: 8,
},
],
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
},
handleClickTab(){
},
handleChange(){
this.user = this.user === 1 ? 2 : 1;
if(this.user === 1){
this.$nextTick(()=>{
this.initChart()
this.initChart1()
})
}
} }
} }
} };
</script> </script>
<style lang="scss" scoped> <style scoped lang="scss">
.dashboard-editor-container { .app-container{
padding: 32px; padding: 0;
background-color: rgb(240, 242, 245); }
position: relative; p{
padding: 0;
.chart-wrapper { margin: 0;
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
} }
} .home {
padding-bottom:24px;
::v-deep .el-row{
.el-col:nth-child(1){
padding-left: 0 !important;
padding-right: 0 !important;
}
.el-col:nth-child(2){
padding-left: 16px !important;
padding-right: 0 !important;
}
}
.content-left{
.task-wrap{
height: 88px;
background: #FFFFFF;
border-radius: 4px;
margin-bottom: 12px;
display: flex;
justify-content: space-between;
.item{
width: 20%;
display: flex;
padding-left: 16px;
margin-right: 9px;
margin-top: 14px;
margin-bottom: 14px;
border-right: 1px solid #EFEFEF;
cursor: pointer;
.left{
width: 48px;
height: 48px;
margin-right: 8px;
}
.right{
.title{
font-size: 12px;
color: #3D3D3D;
border-bottom: 0;
}
.number{
font-weight: bold;
color: #3D3D3D;
font-size: 18px;
padding: 4px 0;
}
.compare{
color: rgba(35,35,35,0.4);
font-size: 12px;
img{
width: 8px;
height: 10px;
margin-left: 4px;
margin-bottom: -1px;
}
.down{
color:#FF3C3C;
}
.up{
color:#0CBC6D;
}
}
}
}
.item:nth-child(4){
border-right: 0;
}
.item:last-child{
border-right: 0;
}
.item:hover{
.right{
.title{
color: #0081FF;
}
.number{
color: #0081FF;
}
}
}
.add{
padding-left: 0;
.yd{
display: inline-block;
width: 5px;
margin-right: 10%;
i{
width: 5px;
height: 5px;
border-radius: 2px;
background: #E6E6E9;
margin-bottom: 6px;
display: block;
}
}
.btn{
width: 100%;
height: 60px;
background: #FFFFFF;
border-radius: 4px;
/*border: 1px solid #E6E6E9;*/
color:#0081FF;
line-height: 64px;
font-size: 14px;
margin-left: 0;
margin-right: 7px;
i{
margin-right: 4px;
}
}
.btn:hover{
background: #F6F9FC;
}
}
}
.content-wrap{
margin-bottom: 12px;
height: 587px;
.select-popper{
margin-right:0;
}
.record{
height: 587px;
background: #FFFFFF;
border-radius: 4px;
padding: 16px;
position: relative;
.list{
height: 510px;
overflow: hidden;
.item{
border-bottom: 1px solid #EEEEEE;
padding: 16px 0;
h3{
color: #232323;
font-size: 14px;
font-weight: 400;
margin: 0;
}
p{
color: rgba(35,35,35,0.4);
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 8px;
span{
margin-right: 15px;
}
}
}
.item:last-child{
border-bottom: 0;
}
}
.more{
text-align: center;
color: #0081FF;
font-size: 14px;
cursor: pointer;
position: absolute;
width: 95%;
height: 60px;
line-height: 60px;
background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 17%, rgba(255,255,255,0.6) 100%);
bottom: 0;
}
}
.ranking{
height: 587px;
background: #FFFFFF;
border-radius: 4px;
padding: 16px;
.main{
background: url("../assets/images/index/yjpm_bg.png");
background-size: 100% 100%;
height: 525px;
margin-top: 10px;
}
.amount{
padding: 16px 12px;
p{
display: flex;
justify-content: space-between;
}
span{
font-weight: 400;
color: #184280;
font-size: 14px;
}
.money{
font-weight: bold;
color: #184280;
font-size: 18px;
margin-top: 2px;
}
.money:first-child{
color:#48C5A0;
}
.money:last-child{
color:#60B0FD;
}
.progress1{
height: 10px !important;
margin-bottom:6px;
margin-top:8px;
::v-deep .el-progress-bar__outer{
.el-progress-bar__inner{
background:#9AEAD3
}
}
}
.progress2{
height: 10px !important;
::v-deep .el-progress-bar__outer{
.el-progress-bar__inner{
background:#92C9FF
}
}
}
::v-deep .el-progress-bar__outer{
/*border: 1px solid #A2E8E8;*/
/*background-color:#ffffff !important;*/
height: 10px !important;
background-color: rgba(235, 238, 245, 0%) !important;
border-radius:0 20px 20px 0;
.el-progress-bar__inner{
/*<!--background: linear-gradient(-270deg, #C3F6F6 0%, #14C9C9 100%);-->*/
border-radius:0 20px 20px 0;
.el-progress-bar__innerText{
color: #ffffff;
opacity: 0;
}
}
}
}
}
.select-popper{
.area{
font-size: 14px;
color: #232323;
cursor: pointer;
i{
background: url("../assets/images/index/sjx.png");
background-size: 100% 100%;
width: 10px;
height: 6px;
display: inline-block;
margin-bottom: 2px;
margin-left: 4px;
}
}
.month{
font-size: 14px;
color: #232323;
margin-left: 16px;
cursor: pointer;
i{
background: url("../assets/images/index/sjx.png");
background-size: 100% 100%;
width: 10px;
height: 6px;
display: inline-block;
margin-bottom: 2px;
margin-left: 4px;
}
}
.color{
color: #0081FF;
i{
background: url("../assets/images/index/sjx2.png");
background-size: 100% 100%;
}
}
}
.select-popper:hover{
.area,.month{
color: #0081FF;
i{
background: url("../assets/images/index/sjx1.png");
background-size: 100% 100%;
}
}
}
}
.content-db{
height: 263px;
background: #FFFFFF;
border-radius: 4px;
margin-bottom: 12px;
padding: 16px;
overflow: hidden;
.query-ability{
color: #0081FF;
font-size: 14px;
cursor: pointer;
span{
width: 16px;
height: 16px;
background: #FF3C3C;
display: inline-block;
color:#ffffff;
font-size: 12px;
border-radius: 50%;
line-height: 16px;
text-align: center;
margin-right: 4px;
}
}
.list{
margin-top: 12px;
}
.item{
min-height: 62px;
background: #F6F9FD;
border-radius: 6px;
margin-bottom: 8px;
position: relative;
padding: 10px 16px;
h3{
font-weight: 400;
color: #232323;
font-size: 14px;
margin: 0;
padding-bottom: 6px;
width: 85%;
}
p{
color: rgba(35,35,35,0.4);
font-size: 14px;
span{
margin-right: 24px;
color:rgba(35, 35, 35, 0.8);
}
}
.btn{
position: absolute;
right: 50px;
top:22px;
color: #0CBC6D;
font-size: 12px;
}
}
}
.analysis{
height: 334px;
background: #FFFFFF;
border-radius: 4px;
padding: 16px;
position: relative;
.tabs{
.label{
display: inline-block;
padding: 0 14px;
height: 22px;
color: rgba(35,35,35,0.8);
font-size: 12px;
line-height: 22px;
border-top: 1px solid #EFEFEF;
border-bottom: 1px solid #EFEFEF;
border-left: 1px solid #EFEFEF;
cursor: pointer;
}
.label:first-child{
border-radius: 2px 0px 0px 2px;
}
.label:last-child{
border-radius: 0px 2px 2px 0px;
border-right: 1px solid #EFEFEF;
}
.color{
background: #0081FF;
color: #FFFFFF;
}
}
.select-popper{
position: absolute;
right: 0;
top: 27px;
z-index: 99;
.area{
font-size: 14px;
color: #232323;
margin-left: 16px;
cursor: pointer;
i{
background: url("../assets/images/index/sjx.png");
background-size: 100% 100%;
width: 10px;
height: 6px;
display: inline-block;
margin-bottom: 2px;
margin-left: 4px;
}
}
}
.select-popper:hover{
.area,.month{
color: #0081FF;
i{
background: url("../assets/images/index/sjx1.png");
background-size: 100% 100%;
}
}
}
}
.trends{
background: #FFFFFF;
border-radius: 4px;
padding: 16px;
height: 617px;
overflow: hidden;
position: relative;
::v-deep .el-tabs__header{
margin: 0 0 18px;
}
::v-deep .el-tabs__content{
overflow-y: auto;
height: 567px;
}
::v-deep .el-timeline{
.el-timeline-item{
padding-bottom: 18px;
}
.el-timeline-item__tail{
left: 7px;
border-left: 2px dotted rgba(0,129,255,0.5);
}
.el-timeline-item__node{
background-color:#ffffff;
.el-timeline-item__icon{
color:#0081FF;
font-size: 14px;
}
}
.el-timeline-item__node--normal{
left: 0px;
width: 16px;
height: 16px;
}
}
.time{
font-size: 14px;
color: rgba(35,35,35,0.8);
.company{
color: #0081FF;
margin-left: 16px;
}
}
.cont{
background: #F6F9FD;
border-radius: 6px;
padding: 16px;
margin-top: 8px;
font-size: 14px;
color: rgba(35,35,35,0.8);
margin-right: 16px;
}
.check{
height: 60px;
background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 17%, rgba(255,255,255,0.6) 100%);
font-size: 16px;
color: #0CBC6D;
line-height: 60px;
text-align: center;
width: 100%;
position: absolute;
bottom: 46px;
cursor: pointer;
}
@media (max-width:1024px) { }
.chart-wrapper { }
padding: 8px; .content-right{
.user{
height: 88px;
border-radius: 4px;
margin-bottom: 12px;
background-image: url("../assets/images/index/user_bg.png");
background-size: cover;
padding-left: 24px;
h3{
font-weight: 700;
color: #1C1C28;
font-size: 18px;
padding-top: 16px;
padding-bottom: 8px;
margin: 0px;
span{
height: 20px;
background: #FFF2E2;
display: inline-block;
border-radius: 11px;
border: 1px solid #FFB010;
color: #FFB010;
font-size: 12px;
line-height: 20px;
padding: 0 10px;
margin-left: 12px;
font-weight: 400;
}
}
p{
color: #666666;
font-size: 16px;
}
}
.search{
height: 322px;
background: #FFFFFF;
border-radius: 4px;
margin-bottom: 12px;
padding: 16px;
::v-deep .el-input{
height: 32px;
border-radius: 2px;
margin-bottom: 20px;
margin-top: 14px;
.el-input__inner{
height: 32px;
line-height: 32px;
background: #F3F3F4;
padding-left: 37px;
border: 0;
}
.el-icon-search{
font-size: 16px;
line-height: 32px;
color:#0081FF;
margin-left: 10px;
margin-right: 10px;
}
}
.list{
display: flex;
justify-content: space-between;
.item{
margin: 0 auto;
width: 33.3%;
height: 94px;
text-align: center;
cursor: pointer;
img{
width: 40px;
height: 40px;
margin-top: 16px;
}
p{
color: #3D3D3D;
font-size: 12px;
}
}
.item:hover{
background: #F6F9FC;
}
}
}
.zbgg{
height: 599px;
background: #FFFFFF;
border-radius: 4px;
padding: 16px;
.list{
margin-top: 16px;
}
.item{
border-bottom: 1px solid #EEEEEE;
padding: 10px 0;
cursor: pointer;
h3{
font-weight: 400;
color: rgba(35,35,35,0.8);
font-size: 14px;
padding-bottom: 8px;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
p{
color: rgba(35,35,35,0.4);
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
span{
margin-right: 15px;
}
}
}
.item:hover{
h3{
color:#0081FF;
}
}
.item:last-child{
border-bottom: 0;
}
}
.zbhxr{
height: 558px;
background: #FFFFFF;
border-radius: 4px;
padding: 16px;
.list{
margin-top: 16px;
}
.item{
border-bottom: 1px solid #EEEEEE;
padding: 10px 0;
cursor: pointer;
h3{
font-weight: 400;
color: rgba(35,35,35,0.8);
font-size: 14px;
padding-bottom: 8px;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
p{
color: rgba(35,35,35,0.4);
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
span{
margin-right: 15px;
}
}
}
.item:hover{
h3{
color:#0081FF;
}
}
.item:last-child{
border-bottom: 0;
}
}
}
} }
}
</style> </style>
...@@ -119,7 +119,6 @@ ...@@ -119,7 +119,6 @@
import dataRegion from '@/assets/json/dataRegion' import dataRegion from '@/assets/json/dataRegion'
import economiesDetail from './economies-detail' import economiesDetail from './economies-detail'
import skeleton from '../../component/skeleton' import skeleton from '../../component/skeleton'
import axios from 'axios'
export default { export default {
name: 'NationalEconomies', name: 'NationalEconomies',
components: { components: {
......
...@@ -33,8 +33,8 @@ ...@@ -33,8 +33,8 @@
<el-table-column prop="type" label="项目类型" :formatter="formatStatus" width="100"/> <el-table-column prop="type" label="项目类型" :formatter="formatStatus" width="100"/>
<el-table-column prop="count" label="中标数量 (个)" align="right" :formatter="formatStatus" sortable width="130"/> <el-table-column prop="count" label="中标数量 (个)" align="right" :formatter="formatStatus" sortable width="130"/>
<el-table-column prop="countRate" label="数量占比(%)" align="right" :formatter="formatStatus" sortable width="140"/> <el-table-column prop="countRate" label="数量占比(%)" align="right" :formatter="formatStatus" sortable width="140"/>
<el-table-column prop="money" label="中标总金额 (万元)" align="right" :formatter="formatStatus" width="150"/> <el-table-column prop="money" label="中标总金额 (万元)" align="right" :formatter="formatStatus" sortable width="170"/>
<el-table-column prop="moneyRate" label="金额占比(%)" align="right" :formatter="formatStatus" width="120"/> <el-table-column prop="moneyRate" label="金额占比(%)" align="right" :formatter="formatStatus" sortable width="140"/>
</el-table> </el-table>
</div> </div>
</div> </div>
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="province" label="地区" :formatter="formatStatus" width="100"/> <el-table-column prop="province" label="地区" :formatter="formatStatus" width="100"/>
<el-table-column prop="count" label="中标数量 (个)" align="right" :formatter="formatStatus" sortable width="130"/> <el-table-column prop="count" label="中标数量 (个)" align="right" :formatter="formatStatus" sortable width="130"/>
<el-table-column prop="countRate" label="数量占比(%)" align="right" :formatter="formatStatus" width="120"/> <el-table-column prop="countRate" label="数量占比(%)" align="right" :formatter="formatStatus" sortable width="150"/>
<el-table-column prop="sumMoney" label="中标总金额 (万元)" align="right" :formatter="formatStatus" width="140"/> <el-table-column prop="sumMoney" label="中标总金额 (万元)" align="right" :formatter="formatStatus" width="140"/>
<el-table-column prop="moneyRate" label="金额占比(%)" align="right" :formatter="formatStatus" width="120"/> <el-table-column prop="moneyRate" label="金额占比(%)" align="right" :formatter="formatStatus" width="120"/>
</el-table> </el-table>
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="rangeName" label="中标金额" :formatter="formatStatus"/> <el-table-column prop="rangeName" label="中标金额" :formatter="formatStatus"/>
<el-table-column prop="count" label="中标数量 (个)" align="right" :formatter="formatStatus" sortable/> <el-table-column prop="count" label="中标数量 (个)" align="right" :formatter="formatStatus" sortable/>
<el-table-column prop="rate" label="占比(%)" align="right" :formatter="formatStatus" width="100"/> <el-table-column prop="rate" label="占比(%)" align="right" :formatter="formatStatus" width="120" sortable/>
</el-table> </el-table>
</div> </div>
</div> </div>
...@@ -278,8 +278,19 @@ ...@@ -278,8 +278,19 @@
this.dataRegion() this.dataRegion()
this.yearsData() this.yearsData()
this.getCountBidByType() this.getCountBidByType()
this.$nextTick(() => {
})
setTimeout(() => {
this.getCountBidGroupByProvince()
this.getRangeBidMoney()
this.getRangeBidFiveYears()
this.getLowerRateByYear()
this.getLowerRangeTenderType()
}, 1000);
}, },
mounted() { mounted() {
}, },
beforeDestroy(){ beforeDestroy(){
...@@ -292,16 +303,14 @@ ...@@ -292,16 +303,14 @@
countBidByType(params).then(res => { countBidByType(params).then(res => {
this.isSkeleton=false; this.isSkeleton=false;
this.xmtjList=res.data.date; this.xmtjList=res.data.date;
this.xmtjList.forEach(item =>{
item.money=Number(item.money)
})
if(res.data){ if(res.data){
this.$nextTick(() => { this.$nextTick(() => {
this.initChart1(res.data.date) this.initChart1(res.data.date)
}) })
} }
this.getCountBidGroupByProvince()
this.getRangeBidMoney()
this.getRangeBidFiveYears()
this.getLowerRateByYear()
this.getLowerRangeTenderType()
}) })
}, },
getCountBidGroupByProvince(){ getCountBidGroupByProvince(){
...@@ -394,8 +403,6 @@ ...@@ -394,8 +403,6 @@
} }
}) })
}, },
initChart1(data) { initChart1(data) {
this.$nextTick(() => { this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts1")) let myChart = echarts.init(document.getElementById("echarts1"))
...@@ -408,57 +415,107 @@ ...@@ -408,57 +415,107 @@
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'line', type: 'cross'
label: {
backgroundColor: '#FFFFFF'
}
} }
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, axisLabel: { //坐标轴刻度标签的相关设置
axisLabel: { margin: 15, //刻度标签与轴线之间的距离
color:"#666666",
show: true, show: true,
interval: 0 interval: 0
}, },
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data.map(item => item.type), data: data.map(item => item.type),
}, },
yAxis: { yAxis: [
type: 'value', {
}, type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位:个',
nameLocation: 'start',
nameTextStyle: {
padding: [0, 0, 0, -60], // 四个数字分别为上右下左与原位置距离
color: '#666666',
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: ['#FFFFFF']
}
}
},
{
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: { grid: {
top:30, top:30,
left:100, left:80,
right:30, right:90,
bottom:30, bottom:30,
}, },
color:['#ADC0FF', '#E9C8FF'],
series: [ series: [
{ {
name:'中标数量(个)', name:'中标金额(万元)',
smooth: false, //平滑 smooth: false, //平滑
type:"line", type:"line",
symbolSize: 6, //折线拐点大小 symbolSize: 6,
itemStyle: { yAxisIndex: 1,
normal: { tooltip: {
borderWidth: 4, valueFormatter: function (value) {
lineStyle: { width: 2 } return value + '万元'
} }
}, },
data:list1, itemStyle: {
color: '#14C9C9'
},
data:data.map(item => item.money),
}, },
{ {
name:'中标总金额(万元)', name:'中标总数(个)',
smooth: false, //平滑 type: 'bar',
type:"line", barWidth: 20,
symbolSize: 6, //折线拐点大小 tooltip: {
valueFormatter: function (value) {
return value + '个';
}
},
itemStyle: { itemStyle: {
normal: { normal:{
borderWidth: 4, color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
lineStyle: { width: 2 } offset: 0,
color: '#56A5FF'
}, {
offset: 1,
color: '#1B8EFF'
}])
} }
}, },
data:list2, data:data.map(item => item.count),
} }
] ]
} }
...@@ -1006,18 +1063,20 @@ ...@@ -1006,18 +1063,20 @@
const { columns, data } = param; const { columns, data } = param;
const sums = []; const sums = [];
columns.forEach((column, index) => { columns.forEach((column, index) => {
if (index === 0) { if (index === 1) {
sums[index] = '合计'; sums[index] = '平均下浮率';
return; return;
} }
if (index === 1) { if (index === 0) {
sums[index] = '-'; sums[index] = '-';
return; return;
} }
const values = data.map(item => Number(item[column.property])); const values = data.map(item => Number(item[column.property]));
let length=0
sums[index] = values.reduce((prev, curr) => { sums[index] = values.reduce((prev, curr) => {
const value = Number(curr); const value = Number(curr);
if (!isNaN(value)) { if (!isNaN(value)) {
length=values.length
return Number(prev) + Number(curr) return Number(prev) + Number(curr)
} else { } else {
return prev; return prev;
...@@ -1025,7 +1084,7 @@ ...@@ -1025,7 +1084,7 @@
}, 0); }, 0);
if (index === 2||index === 3||index === 4) { if (index === 2||index === 3||index === 4) {
sums[index] = Number(sums[index]).toFixed(2); sums[index] = (Number(sums[index])/length).toFixed(2);
return; return;
} }
}); });
......
...@@ -19,9 +19,9 @@ ...@@ -19,9 +19,9 @@
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="招采单位:" class="row" prop="ownerCompany"> <el-form-item label="招采单位:" class="row" prop="ownerCompany">
<el-input type="text" placeholder="请输入" v-model="queryParam.ownerCompany" @input="getCompany" :οnkeyup="queryParam.ownerCompany=queryParam.ownerCompany.replace(/^\s+|\s+$/g,'')"></el-input> <el-input type="text" placeholder="请输入" v-model="queryParam.ownerCompany" @input="getCompany(1)" :οnkeyup="queryParam.ownerCompany=queryParam.ownerCompany.replace(/^\s+|\s+$/g,'')"></el-input>
<div class="resultlist" v-if="showlist" id="box"> <div class="resultlist infinite-list" v-if="showlist" v-infinite-scroll="load" id="box" style="overflow:auto">
<div v-for="(item,index) in companData" @click="selCompany(item)"><span v-html="item.name"></span></div> <div class="infinite-list-item" v-for="(item,index) in companData" @click="selCompany(item)"><span v-html="item.name" :key="companypage"></span></div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="项目阶段:" class="row"> <el-form-item label="项目阶段:" class="row">
...@@ -96,6 +96,8 @@ ...@@ -96,6 +96,8 @@
projectType:[],//项目类型 projectType:[],//项目类型
projectCategory:[],//项目类别 projectCategory:[],//项目类别
proList:[],//项目列表 proList:[],//项目列表
companypage:1,
isscroll:false,
} }
}, },
mounted(){ mounted(){
...@@ -135,20 +137,41 @@ ...@@ -135,20 +137,41 @@
}, },
//获取建设库客户 //获取建设库客户
getCompany(value){ getCompany(value){
this.queryParam.companyId = '' this.queryParam.companyId = null
if (value.length>=2){ if(value == 1){
this.companData = []
this.companypage = 1
}
if (this.queryParam.ownerCompany.length>=2){
let param = { let param = {
keyword:value, keyword:this.queryParam.ownerCompany,
page:{ page:{
limit:20, limit:20,
page:1 page:this.companypage
} }
} }
getEnterprise(JSON.stringify(param)).then(result=>{ getEnterprise(JSON.stringify(param)).then(result=>{
if(result.code != 200) if(result.code != 200){
return return false
this.showlist = true }
this.companData = result.data.list if(result.data.list != null && result.data.list.length>0){
this.isscroll = true
if (this.companData.length===0) {
this.companData = result.data.list
} else {
let arr2 = result.data.list
arr2.unshift(2, 0);
Array.prototype.splice.apply(this.companData, arr2);
}
if(this.companData.length===0) {
this.showlist = false
}else{
this.showlist = true
}
this.companypage += 1
}else{
this.isscroll = false
}
}) })
} }
}, },
...@@ -167,6 +190,11 @@ ...@@ -167,6 +190,11 @@
}) })
} }
}, },
load(){
if(this.isscroll){
this.getCompany(2)
}
},
selCompany(item){ selCompany(item){
this.queryParam.companyId = item.jskEid this.queryParam.companyId = item.jskEid
this.queryParam.ownerCompany = item.name.replace(/<[^>]+>/g, '') this.queryParam.ownerCompany = item.name.replace(/<[^>]+>/g, '')
......
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<div style="position: relative"> <div style="position: relative">
<el-input placeholder="待添加" id="biaoqian" :disabled="isDisabled" v-model="tipsvalue" @input="getValue" :style="spanWidth"></el-input><span class="spanText">{{ tipsvalue }}</span> <el-input placeholder="待添加" id="biaoqian" :disabled="isDisabled" v-model="tipsvalue" @input="getValue" :style="spanWidth"></el-input><span class="spanText">{{ tipsvalue }}</span>
</div> </div>
<div class="addbtn" v-if="isDisabled == false" @click="addtips"></div> <!--<div class="addbtn" v-if="isDisabled == false" @click="addtips"></div>-->
</div> </div>
</div> </div>
</div> </div>
......
...@@ -3,6 +3,7 @@ package com.dsk.system.domain.business.dto; ...@@ -3,6 +3,7 @@ package com.dsk.system.domain.business.dto;
import com.dsk.common.core.domain.BaseEntity; import com.dsk.common.core.domain.BaseEntity;
import lombok.Data; import lombok.Data;
import java.util.Date;
import java.util.List; import java.util.List;
import java.util.Map; import java.util.Map;
...@@ -72,4 +73,16 @@ public class BusinessListDto extends BaseEntity { ...@@ -72,4 +73,16 @@ public class BusinessListDto extends BaseEntity {
* 业主单位 * 业主单位
*/ */
private String ownerCompany; private String ownerCompany;
/**
* 项目状态
*/
private Integer status;
/**
* 开始时间
*/
private String startTime;
/**
* 结束时间
*/
private String endTime;
} }
package com.dsk.system.domain.business.dto; package com.dsk.system.domain.business.dto;
import lombok.AllArgsConstructor;
import lombok.Data; import lombok.Data;
import lombok.NoArgsConstructor; import lombok.NoArgsConstructor;
...@@ -14,30 +15,33 @@ import java.util.Map; ...@@ -14,30 +15,33 @@ import java.util.Map;
@Data @Data
@NoArgsConstructor @NoArgsConstructor
public class BusinessSearchDto implements Serializable { public class BusinessSearchDto implements Serializable {
/**
* 状态
*/
private Integer status;
/** /**
* 用户id * 用户id
*/ */
private Long userId; private Long userId;
/**
* 状态
*/
private Integer status;
/** /**
* 数据权限 * 数据权限
*/ */
private Map<String,Object> params; private Map<String, Object> params;
public Map<String, Object> getParams() public Map<String, Object> getParams() {
{ if (params == null) {
if (params == null)
{
params = new HashMap<>(); params = new HashMap<>();
} }
return params; return params;
} }
public BusinessSearchDto(Long userId){ public BusinessSearchDto(Long userId) {
this.userId = userId;
}
public BusinessSearchDto(Long userId, Integer status) {
this.userId = userId; this.userId = userId;
this.status = status;
} }
} }
package com.dsk.system.domain.business.vo;
import lombok.Data;
import java.io.Serializable;
/**
* 项目金额分析
*
* @author lcl
* @create 2023/8/15
*/
@Data
public class BusinessAnalyzeVo implements Serializable {
/**
* 项目类型
*/
private String projectType;
/**
* 资金来源
*/
private String amountSource;
/**
* 项目数量
*/
private Integer businessCount;
/**
* 总投资金额
*/
private Double totalAmount;
}
...@@ -3,6 +3,8 @@ package com.dsk.system.dskService; ...@@ -3,6 +3,8 @@ package com.dsk.system.dskService;
import cn.hutool.core.bean.BeanException; import cn.hutool.core.bean.BeanException;
import cn.hutool.core.bean.BeanUtil; import cn.hutool.core.bean.BeanUtil;
import cn.hutool.core.util.ObjectUtil; import cn.hutool.core.util.ObjectUtil;
import com.alibaba.fastjson2.JSONObject;
import com.dsk.common.core.domain.AjaxResult;
import com.dsk.common.core.domain.R; import com.dsk.common.core.domain.R;
import com.dsk.common.core.page.TableDataInfo; import com.dsk.common.core.page.TableDataInfo;
import com.dsk.common.utils.DskOpenApiUtil; import com.dsk.common.utils.DskOpenApiUtil;
...@@ -88,4 +90,24 @@ public class JskCombineInfoService { ...@@ -88,4 +90,24 @@ public class JskCombineInfoService {
Map<String, Object> map = dskOpenApiUtil.requestBody("/operate/combine/group/certificateCount", BeanUtil.beanToMap(dto, false, false)); Map<String, Object> map = dskOpenApiUtil.requestBody("/operate/combine/group/certificateCount", BeanUtil.beanToMap(dto, false, false));
return BeanUtil.toBean(map, R.class); return BeanUtil.toBean(map, R.class);
} }
public AjaxResult index(JSONObject object) {
Map<String, Object> map = dskOpenApiUtil.requestBody("/nationzj/enterprice/groupCompany", object);
return BeanUtil.toBean(map, AjaxResult.class);
}
public AjaxResult centralEnterprse() {
Map<String, Object> map = dskOpenApiUtil.requestBody("/nationzj/enterprice/centralEnterprse", null);
return BeanUtil.toBean(map, AjaxResult.class);
}
public AjaxResult centralEnterprseChild() {
Map<String, Object> map = dskOpenApiUtil.requestBody("/nationzj/enterprice/centralEnterprse/child", null);
return BeanUtil.toBean(map, AjaxResult.class);
}
public AjaxResult centralEnterprseLocal(JSONObject object) {
Map<String, Object> map = dskOpenApiUtil.requestBody("/nationzj/enterprice/centralEnterprse/local", object);
return BeanUtil.toBean(map, AjaxResult.class);
}
} }
package com.dsk.system.mapper; package com.dsk.system.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.dsk.common.annotation.DataScope;
import com.dsk.common.core.domain.entity.BusinessInfo; import com.dsk.common.core.domain.entity.BusinessInfo;
import com.dsk.system.domain.business.dto.BusinessListDto; import com.dsk.system.domain.business.dto.BusinessListDto;
import com.dsk.system.domain.business.dto.BusinessSearchDto; import com.dsk.system.domain.business.dto.BusinessSearchDto;
import com.dsk.system.domain.business.vo.BusinessAnalyzeVo;
import com.dsk.system.domain.business.vo.BusinessLikeProjectNameListVo; import com.dsk.system.domain.business.vo.BusinessLikeProjectNameListVo;
import com.dsk.system.domain.customer.dto.CustomerBusinessSearchDto; import com.dsk.system.domain.customer.dto.CustomerBusinessSearchDto;
import com.dsk.system.domain.customer.vo.CustomerBusinessListVo; import com.dsk.system.domain.customer.vo.CustomerBusinessListVo;
...@@ -112,4 +112,8 @@ public interface BusinessInfoMapper extends BaseMapper<BusinessInfo> { ...@@ -112,4 +112,8 @@ public interface BusinessInfoMapper extends BaseMapper<BusinessInfo> {
int selectCountByStatus(BusinessSearchDto dto); int selectCountByStatus(BusinessSearchDto dto);
List<BusinessAnalyzeVo> selectAmountAnalyze(BusinessSearchDto dto);
List<BusinessAnalyzeVo> selectTypeAnalyze(BusinessSearchDto dto);
} }
...@@ -3,7 +3,9 @@ package com.dsk.system.service; ...@@ -3,7 +3,9 @@ package com.dsk.system.service;
import com.alibaba.fastjson2.JSONObject; import com.alibaba.fastjson2.JSONObject;
import com.dsk.common.core.domain.AjaxResult; import com.dsk.common.core.domain.AjaxResult;
import com.dsk.system.domain.business.dto.BusinessSearchDto; import com.dsk.system.domain.business.dto.BusinessSearchDto;
import com.dsk.system.domain.business.vo.BusinessAnalyzeVo;
import java.util.List;
import java.util.Map; import java.util.Map;
/** /**
...@@ -12,7 +14,11 @@ import java.util.Map; ...@@ -12,7 +14,11 @@ import java.util.Map;
*/ */
public interface IBusinessOverviewService { public interface IBusinessOverviewService {
Map<String, Object> statistics(BusinessSearchDto dto); Map<String, Object> statusStatistics(BusinessSearchDto dto);
List<BusinessAnalyzeVo> amountAnalyze(BusinessSearchDto dto);
List<BusinessAnalyzeVo> typeAnalyze(BusinessSearchDto dto);
AjaxResult countGroupByProvince(JSONObject object); AjaxResult countGroupByProvince(JSONObject object);
......
package com.dsk.system.service.impl; package com.dsk.system.service.impl;
import com.dsk.common.annotation.DataScope;
import com.dsk.common.core.domain.entity.BusinessFollowRecord; import com.dsk.common.core.domain.entity.BusinessFollowRecord;
import com.dsk.common.utils.DateUtils; import com.dsk.common.utils.DateUtils;
import com.dsk.system.domain.business.dto.BusinessIdDto; import com.dsk.system.domain.business.dto.BusinessIdDto;
...@@ -44,6 +45,7 @@ public class BusinessFollowRecordServiceImpl implements IBusinessFollowRecordSer ...@@ -44,6 +45,7 @@ public class BusinessFollowRecordServiceImpl implements IBusinessFollowRecordSer
} }
@Override @Override
@DataScope(userAlias = "u",deptAlias = "d")
public List<BusinessFollowRecord> allFollow(BusinessListDto dto) { public List<BusinessFollowRecord> allFollow(BusinessListDto dto) {
//userId不传值,就查询全部 //userId不传值,就查询全部
// if (dto.getUserId() == null) { // if (dto.getUserId() == null) {
......
...@@ -4,10 +4,9 @@ import cn.hutool.core.bean.BeanUtil; ...@@ -4,10 +4,9 @@ import cn.hutool.core.bean.BeanUtil;
import com.alibaba.fastjson2.JSONObject; import com.alibaba.fastjson2.JSONObject;
import com.dsk.common.annotation.DataScope; import com.dsk.common.annotation.DataScope;
import com.dsk.common.core.domain.AjaxResult; import com.dsk.common.core.domain.AjaxResult;
import com.dsk.common.core.domain.BaseEntity;
import com.dsk.common.utils.DskOpenApiUtil; import com.dsk.common.utils.DskOpenApiUtil;
import com.dsk.common.utils.SecurityUtils;
import com.dsk.system.domain.business.dto.BusinessSearchDto; import com.dsk.system.domain.business.dto.BusinessSearchDto;
import com.dsk.system.domain.business.vo.BusinessAnalyzeVo;
import com.dsk.system.mapper.BusinessInfoMapper; import com.dsk.system.mapper.BusinessInfoMapper;
import com.dsk.system.service.IBusinessOverviewService; import com.dsk.system.service.IBusinessOverviewService;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Autowired;
...@@ -15,6 +14,7 @@ import org.springframework.stereotype.Service; ...@@ -15,6 +14,7 @@ import org.springframework.stereotype.Service;
import javax.annotation.Resource; import javax.annotation.Resource;
import java.util.HashMap; import java.util.HashMap;
import java.util.List;
import java.util.Map; import java.util.Map;
/** /**
...@@ -32,7 +32,7 @@ public class BusinessOverviewServiceImpl implements IBusinessOverviewService { ...@@ -32,7 +32,7 @@ public class BusinessOverviewServiceImpl implements IBusinessOverviewService {
@Override @Override
@DataScope(userAlias = "u",deptAlias = "d") @DataScope(userAlias = "u",deptAlias = "d")
public Map<String, Object> statistics(BusinessSearchDto dto) { public Map<String, Object> statusStatistics(BusinessSearchDto dto) {
Map<String, Object> resultMap = new HashMap<>(); Map<String, Object> resultMap = new HashMap<>();
//总 //总
resultMap.put("totalCount",businessInfoMapper.selectCountByStatus(dto)); resultMap.put("totalCount",businessInfoMapper.selectCountByStatus(dto));
...@@ -48,6 +48,18 @@ public class BusinessOverviewServiceImpl implements IBusinessOverviewService { ...@@ -48,6 +48,18 @@ public class BusinessOverviewServiceImpl implements IBusinessOverviewService {
return resultMap; return resultMap;
} }
@Override
@DataScope(userAlias = "u",deptAlias = "d")
public List<BusinessAnalyzeVo> amountAnalyze(BusinessSearchDto dto) {
return businessInfoMapper.selectAmountAnalyze(dto);
}
@Override
@DataScope(userAlias = "u",deptAlias = "d")
public List<BusinessAnalyzeVo> typeAnalyze(BusinessSearchDto dto) {
return businessInfoMapper.selectTypeAnalyze(dto);
}
@Override @Override
public AjaxResult countGroupByProvince(JSONObject object) { public AjaxResult countGroupByProvince(JSONObject object) {
Map<String, Object> map = dskOpenApiUtil.requestBody("/nationzj/marketAnalysis/project/countGroupByProvince", object); Map<String, Object> map = dskOpenApiUtil.requestBody("/nationzj/marketAnalysis/project/countGroupByProvince", object);
......
...@@ -68,10 +68,12 @@ ...@@ -68,10 +68,12 @@
from business_follow_record f from business_follow_record f
left join business_info i on i.id = f.business_id left join business_info i on i.id = f.business_id
left join sys_user u on f.user_id = u.user_id left join sys_user u on f.user_id = u.user_id
left join sys_dept d on u.dept_id = d.dept_id
<where> <where>
<if test="userId != null"> <if test="userId != null"> and (f.user_id = #{userId} or i.is_private = 1)</if>
and f.user_id = #{userId} <if test="startTime != null and startTime != '' "> and f.creat_time &gt;= #{startTime} </if>
</if> <if test="endTime != null and endTime != '' "> and f.creat_time &lt;= #{endTime} </if>
${params.dataScope}
</where> </where>
ORDER BY f.creat_time DESC ORDER BY f.creat_time DESC
</select> </select>
......
...@@ -114,6 +114,7 @@ ...@@ -114,6 +114,7 @@
</if> </if>
<if test="minAmount != null and minAmount != ''"> and i.investment_amount &gt;= #{minAmount} </if> <if test="minAmount != null and minAmount != ''"> and i.investment_amount &gt;= #{minAmount} </if>
<if test="maxAmount != null and maxAmount != ''"> and i.investment_amount &lt;= #{maxAmount}</if> <if test="maxAmount != null and maxAmount != ''"> and i.investment_amount &lt;= #{maxAmount}</if>
<if test="status != null "> and i.status = #{status}</if>
<if test="projectStage != null and projectStage != ''"> <if test="projectStage != null and projectStage != ''">
and i.project_stage in and i.project_stage in
<foreach collection="projectStage" item="projectStage" open="(" separator="," close=")"> <foreach collection="projectStage" item="projectStage" open="(" separator="," close=")">
...@@ -374,15 +375,32 @@ ...@@ -374,15 +375,32 @@
<if test="companyName != null and companyName != '' "> and ct.company_name =#{companyName}</if> <if test="companyName != null and companyName != '' "> and ct.company_name =#{companyName}</if>
</select> </select>
<select id="selectCountByStatus" resultType="java.lang.Integer"> <sql id="businessSearchSql">
select
count(bi.id)
from business_info bi from business_info bi
join business_user bu on bu.business_id = bi.id join business_user bu on bu.business_id = bi.id
left join sys_user u on bu.user_id = u.user_id left join sys_user u on bu.user_id = u.user_id
left join sys_dept d on u.dept_id = d.dept_id left join sys_dept d on u.dept_id = d.dept_id
where (bu.user_id = #{userId} or bi.is_private = 1) where (bu.user_id = #{userId} or bi.is_private = 1)
<if test="status != null"> and bi.status = #{status}</if> <if test="status != null"> and bi.status = #{status} </if>
${params.dataScope} ${params.dataScope}
</sql>
<select id="selectCountByStatus" resultType="java.lang.Integer">
select count(bi.id) <include refid="businessSearchSql"/>
</select>
<select id="selectAmountAnalyze" resultType="com.dsk.system.domain.business.vo.BusinessAnalyzeVo">
select
bi.amount_source,count(bi.id) businessCount,sum(bi.investment_amount) totalAmount
<include refid="businessSearchSql"/>
group by bi.amount_source
</select>
<select id="selectTypeAnalyze" resultType="com.dsk.system.domain.business.vo.BusinessAnalyzeVo">
select
bi.project_type,count(bi.id) businessCount,sum(bi.investment_amount) totalAmount
<include refid="businessSearchSql"/>
group by bi.project_type
</select> </select>
</mapper> </mapper>
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