Skip to content

D
dsk-cr20g
Commit 7d041a28 authored by caixingbing's avatar caixingbing
Browse files
Options

*

parent 195b2f50
Hide whitespace changes
Inline Side-by-side
Showing with 513 additions and 7 deletions
dsk-operate-ui/src/views/detail/party-a/overview/component/bidding.vue 0 → 100644
View file @ 7d041a28
<template>
<div class="flex-box app-container part-container">
<div class="bid-zbph">
<div class="common-title">招标偏好</div>
<div class="flex-box zbph-item">
<div>历史招标总数
<el-popover
placement="top-start"
trigger="hover"
content="历史招标总数">
<img src="@/assets/images/detail/overview/zbph_question.png" slot="reference">
</el-popover>
<span class="zbph-item-num">356</span></div>
<div>近一年招标总数
<el-popover
placement="top-start"
trigger="hover"
content="近一年招标总数">
<img src="@/assets/images/detail/overview/zbph_question.png" slot="reference">
</el-popover>
<span class="zbph-item-num">356</span></div>
<div>历史招标总额
<el-popover
placement="top-start"
trigger="hover"
content="历史招标总额">
<img src="@/assets/images/detail/overview/zbph_question.png" slot="reference">
</el-popover>
<span class="zbph-item-num">356</span></div>
</div>
<div class="zbph-account">招标动态
<div class="labels">
<div :class="{'on':datatype==1}" @click="getDT(1)">周</div>
<div :class="{'on':datatype==2}" @click="getDT(2)">月</div>
<div :class="{'on':datatype==3}" @click="getDT(3)">年</div>
</div>
</div>
<div id="myEcharts" style="width: 100%;height:250px; margin: 0 auto;"></div>
</div>
<div class="bid-ywwl">
<div class="common-title">业务往来供应商TOP5</div>
<div class="table-item">
<el-table
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
>
<el-table-column
prop="ico"
width="55"
label="排行">
<template slot-scope="scope">
<img class="ywwl-ico" :src="scope.row.ico">
</template>
</el-table-column>
<el-table-column
prop="name"
label="公司名称">
<template slot-scope="scope">
<router-link to="" tag="a" class="a-link">{{ scope.row.name }}</router-link>
</template>
</el-table-column>
<el-table-column
prop="number"
width="160"
label="合作次数">
</el-table-column>
<el-table-column
prop="amount"
width="160"
label="合作总金额（万元）">
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'Bidding',
data() {
return {
datatype:'1',//切换类型
dtdata:[],//数据
dttime:[],//坐标
//表格数据
tableData:[
{name: '中国建筑第八工程局有限公司', companyId: '6034', number: '11%', amount: '2134', ico: require("@/assets/images/detail/overview/ywwl_top1.png")},
{name: '中建三局集团有限公司', companyId: '3068', number: '11%', amount: '2134', ico: require("@/assets/images/detail/overview/ywwl_top2.png")},
{name: '中国建筑一局（集团）有限公司', companyId: '428280', number: '11%', amount: '2134', ico: require("@//assets/images/detail/overview/ywwl_top3.png")},
{name: '上海宝冶集团有限公司', companyId: '7759', number: '11%', amount: '2134', ico: require("@/assets/images/detail/overview/ywwl_top4.png")},
{name: '中国五冶集团有限公司', companyId: '10951', number: '11%', amount: '2134', ico: require("@/assets/images/detail/overview/ywwl_top5.png")},
]
}
},
created() {
},
mounted() {
this.$nextTick(()=>{
this.getDT(1)
})
},
methods: {
initDT(datas,labels){
let myChart = echarts.init(document.getElementById("myEcharts"))
let option = {
xAxis: {
type: 'category',
data: labels
},
yAxis: {
type: 'value'
},
grid:{
left:'6%',
top:'8%',
right:'2%',
bottom:'8%',
},
tooltip:{
axisPointer:{ //悬浮于圆点展示标签
type:'axis'
},
},
series: [
{
name: '招标数',
data: datas,
type: 'line',
smooth: true,
itemStyle: {
normal:{
color:'#0081FF'
}
},
label:{
normal:{
show:false
}
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(0, 129, 255, 0.5)'
}, {
offset: 1, color: 'rgba(0, 129, 255, 0)'
} ],
global: false
}
},
}
]
}
myChart.setOption(option)
},
getDT(type){
this.datatype = type
let time = new Date()
let week = ['周一','周二','周三','周四','周五','周六','周日']
let weekdata = [200,150,300,240,400,380,460]
let monthdata = [400,200,350,170,190,280,260,308,406,387,458,695,125,360,512,546,298,365,458,536,345,200,150,300,240,400,380,460,472,365,547]
let yeardata = [1908,1500,2300,1456,2354,2564,1254,1236,4561,4521,1236,4561,3521]
let datas = []
let labels = []
switch (type) {
case 1:
time = time.getDay()
// week.length = time
weekdata.length = time
for(var i=0;i<7;i++){
if(i > time){
weekdata.push('')
}
}
labels = week
datas = weekdata
break;
case 2:
let days = new Date(time.getFullYear(),time.getMonth()+1,0).getDate()//获取到本月天数
time = time.getDate()
monthdata.length = time
for(var i=1;i<days;i++){
labels.push(i+'日')
if(i > time){
monthdata.push("")
}
}
datas = monthdata
break;
case 3:
time = time.getMonth()+1
yeardata.length = time
for(var i=1;i<12;i++){
labels.push(i+'月')
if(i>time){
yeardata.push('')
}
}
datas = yeardata
break;
default:
break;
}
this.dtdata = datas
this.dttime = labels
this.initDT(datas,labels)
}
}
}
</script>
<style lang="scss" scoped>
.part-container{
margin: 0;
padding: 0;
justify-content: space-between;
align-items: normal;
.bid-zbph{
width: calc(50% - 8px);
padding: 24px 16px;
background: #FFFFFF;
overflow: hidden;
.zbph-item{
justify-content: space-around;
padding-top: 26px;
>div{
width: 33%;
font-size: 12px;
color: #3D3D3D;
text-align: center;
border-left: 1px solid #EEEEEE;
&:first-child{
border-left: 0;
}
img{
display: inline;
vertical-align: text-top;
}
.zbph-item-num{
font-weight: bold;
display: block;
padding-top: 8px;
}
}
}
.zbph-account{
position: relative;
font-weight: bold;
margin-top: 35px;
.labels{
width: 120px;
height: 22px;
position: absolute;
border-radius: 2px;
right: 0;
top: 2px;
>div{
width: 40px;
height: 100%;
text-align: center;
line-height: 22px;
float: left;
border: 1px solid #EFEFEF;
margin-left: -1px;
font-weight: 400;
font-size: 12px;
color: rgba(35, 35, 35, 0.80);
cursor: pointer;
&.on{
background: #0081FF;
color: #FFFFFF;
}
&:first-child{
border-radius: 2px 0px 0px 2px;
}
&:last-child{
border-radius: 0px 2px 2px 0px;
}
}
}
}
}
.bid-ywwl{
width: calc(50% - 8px);
padding: 24px 16px;
background: #FFFFFF;
.table-item{
margin-top:15px;
.ywwl-ico{
margin-left: -6px;
}
::v-deep .el-table .el-table__body-wrapper tr:nth-child(2n){
background: #FFFFFF;
}
}
}
}
</style>
dsk-operate-ui/src/views/detail/party-a/overview/component/busclue.vue 0 → 100644
View file @ 7d041a28
<template>
<div class="app-container clue-container">
<div class="common-title">商机线索</div>
<el-tabs v-model="activeName" @tab-click="handleClick" class="tabpane selfTab">
<el-tab-pane label="按金额" name="first"></el-tab-pane>
<el-tab-pane label="按项目" name="second"></el-tab-pane>
</el-tabs>
<div class="flex-box clue-box">
<div class="clue-echarts"><div id="echartsClue" style="width: 100%;height:300px; margin: 0 auto;"></div></div>
<div class="table-item">
<el-table
:data="tableData"
border
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
>
<el-table-column
prop="name"
label="名称"></el-table-column>
<el-table-column
prop="number"
label="数量">
<template slot-scope="scope">
<div style="text-align: right">{{ scope.row.number }}</div>
</template>
</el-table-column>
<el-table-column
prop="amount"
label="占比">
<template slot-scope="scope">
<div style="text-align: right">{{ scope.row.amount }}</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="flex-box clue-type">
<div class="flex-box clue-type-item" :class="{'on':typeName==index}" v-for="(item, index) in typeList" :key="index" @click="handleType(index)"><img :src="item.ico">{{item.name}}</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'Busclue',
data() {
return {
viewData:[
{
name:'7亿~12亿',
value:'12'
},
{
name:'4亿~6亿',
value:'2'
},
{
name:'1亿~3亿',
value:'42'
},
{
name:'5000万~1亿',
value:'2'
},
{
name:'5000万以下',
value:'2'
},
],
activeName:'first',
typeName: 0,
//表格数据
tableData:[
{name: '7亿～10亿', number: '2', amount: '0.19%'},
{name: '4亿~6亿', number: '2', amount: '0.19%'},
{name: '1亿~3亿', number: '2', amount: '0.19%'},
{name: '5000万~1亿', number: '2', amount: '0.19%'},
{name: '5000万以下', number: '2', amount: '0.19%'}
],
typeList:[
{name: '土地交易', ico: require("@/assets/images/detail/overview/clue_ico1.png")},
{name: '拟建项目', ico: require("@/assets/images/detail/overview/clue_ico2.png")},
{name: '专项债项目', ico: require("@//assets/images/detail/overview/clue_ico3.png")},
{name: '招标计划', ico: require("@/assets/images/detail/overview/clue_ico4.png")},
{name: '招标公告', ico: require("@/assets/images/detail/overview/clue_ico5.png")},
{name: '标讯Pro', ico: require("@/assets/images/detail/overview/clue_ico6.png")},
{name: '行政许可', ico: require("@/assets/images/detail/overview/clue_ico7.png")},
]
}
},
created() {
},
mounted() {
this.$nextTick(()=>{
this.getDT()
})
},
methods: {
getDT(){
let myChart = echarts.init(document.getElementById("echartsClue"))
let option = {
tooltip: {
trigger: 'item',
borderWidth:0,
backgroundColor:"rgba(255, 255, 255, 0.8)",
formatter: '{b}<br/>{d}%',
},
legend: {
type: 'scroll',
orient: 'horizontal',
bottom: 20,
data: this.viewData,
pageButtonPosition: 'end',
},
color: ['#8A82F3','#5B9CF7','#43BBE0','#8ECF95','#FFDC6B'],
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '40%'],
data: this.viewData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option)
},
handleClick(){
},
handleType(idx){
this.typeName = idx
}
}
}
</script>
<style lang="scss" scoped>
.clue-container{
margin: 0;
padding: 24px 16px;
background: #FFFFFF;
.selfTab{
margin: 30px 0 0 -12px;
::v-deep .el-tabs__nav-wrap::after{
display: none;
}
::v-deep .el-tabs__item{
height: 30px;
line-height: 30px;
padding: 0 12px;
}
}
.clue-box{
width: 100%;
justify-content: space-between;
align-items: normal;
margin-top: 4px;
.clue-echarts{
width: calc(50% - 8px);
}
.table-item{
width: calc(50% - 8px);
margin-top:15px;
}
}
.clue-type{
width: 100%;
justify-content: space-between;
border-top: 1px solid #EEEEEE;
padding-top: 22px;
margin-right: -16px;
margin-left: -16px;
padding-left: 16px;
padding-right: 16px;
.clue-type-item{
color: #232323;
cursor: pointer;
&.on{
color: #0081FF;
}
img{
width: 40px;
height: 40px;
margin-right: 8px;
}
}
}
}
</style>
dsk-operate-ui/src/views/detail/party-a/overview/component/operations.vue
View file @ 7d041a28
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
var Swiper = require('@/assets/lib/swiper/swiper-bundle.min.js') var Swiper = require('@/assets/lib/swiper/swiper-bundle.min.js')
import "@/assets/lib/swiper/swiper-bundle.css" import "@/assets/lib/swiper/swiper-bundle.css"
export default { export default {
name: 'Overview', name: 'Operations',
data() { data() {
return { return {
operList: [ operList: [
......
dsk-operate-ui/src/views/detail/party-a/overview/overview.vue
View file @ 7d041a28
<template> <template>
<div class="app-container part-container"> <div class="app-container part-container">
企业速览 企业速览
<div class="gsjy"> <div class="view-content"><Operations /></div>
<Operations /> <div class="view-content"><Bidding /></div>
</div> <div class="view-content"><Busclue /></div>
</div> </div>
</template> </template>
<script> <script>
import Operations from "./component/operations"; import Operations from "./component/operations"
import Bidding from "./component/bidding"
import Busclue from './component/busclue'
export default { export default {
name: 'Overview', name: 'Overview',
components: { components: {
Operations Operations,
Bidding,
Busclue
}, },
data() { data() {
return { return {
...@@ -29,7 +33,7 @@ export default { ...@@ -29,7 +33,7 @@ export default {
.part-container{ .part-container{
margin: 0; margin: 0;
padding: 0; padding: 0;
.gsjy{ .view-content{
margin-top: 12px; margin-top: 12px;
} }
} }
......
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