211 lines
5.5 KiB
Vue
211 lines
5.5 KiB
Vue
<template>
|
|
<el-card style="width: 49.9%;">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>项目投标</span>
|
|
</div>
|
|
</template>
|
|
<div style="display: flex;justify-content: space-around;">
|
|
<router-link :to="{
|
|
path: item.url,
|
|
query: item.query ? { ...item.query } : null
|
|
}" v-for=" item in customList" :key="item" class="header-btn">
|
|
<div>
|
|
<div>{{ item.value.toFixed(2) }}</div>
|
|
<div>{{ item.name }}</div>
|
|
</div>
|
|
</router-link>
|
|
</div>
|
|
<div id="main"></div>
|
|
</el-card>
|
|
</template>
|
|
<script setup>
|
|
import * as echarts from 'echarts';
|
|
import { apistatisticsbidding } from '@/api/statistics'
|
|
|
|
const customList = reactive([
|
|
{
|
|
name: "投标决策",
|
|
value: 0,
|
|
url: "/construction/tender/bid_bidding_decision"
|
|
},
|
|
{
|
|
name: "购买标书",
|
|
value: 0,
|
|
url: "/construction/tender/bid_buy_bidding_document"
|
|
|
|
},
|
|
{
|
|
name: "标书审查",
|
|
value: 0,
|
|
url: "/construction/tender/reviewTender/bid_document_examination"
|
|
|
|
},
|
|
{
|
|
name: "未退保证金额",
|
|
value: 0,
|
|
url: "/construction/finance/deposit/BidBond"
|
|
|
|
},
|
|
{
|
|
name: "中标项目",
|
|
value: 0,
|
|
url: "/construction/tender/bid_result"
|
|
|
|
}
|
|
|
|
|
|
])
|
|
|
|
|
|
const initChart = (id, opt) => {
|
|
var chartDom = document.getElementById(id);
|
|
var myChart = echarts.init(chartDom);
|
|
myChart.setOption(opt);
|
|
}
|
|
|
|
const getData = async () => {
|
|
let res = await apistatisticsbidding()
|
|
let value = (+res.bidding_rate * 100).toFixed(2)
|
|
let option3 = {
|
|
title: {
|
|
text: '{a|' + value + '}{c|%}',
|
|
x: 'center',
|
|
y: 'center',
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
fontSize: 20,
|
|
color: 'black',
|
|
fontWeight: 'bold'
|
|
},
|
|
c: {
|
|
fontSize: 20,
|
|
color: 'black',
|
|
fontWeight: 'normal'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
//外环
|
|
{
|
|
name: "外环",
|
|
type: 'pie',
|
|
silent: true,
|
|
clockwise: true,
|
|
radius: ['70%', '75%'],
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
color: 'white',
|
|
},
|
|
data: [0]
|
|
},
|
|
//内环
|
|
{
|
|
name: "内环",
|
|
type: 'pie',
|
|
silent: true,
|
|
clockwise: true,
|
|
radius: ['45%', '46%'],
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
color: '#414f63',
|
|
},
|
|
data: [0]
|
|
},
|
|
//外环
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
radius: ['55%', '65%'],
|
|
silent: true,
|
|
clockwise: true,
|
|
startAngle: 90,
|
|
label: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: value,
|
|
itemStyle: {
|
|
normal: {
|
|
//外环发光
|
|
borderWidth: 0.5,
|
|
shadowBlur: 20,
|
|
borderColor: '#4bf3f9',
|
|
shadowColor: '#9bfeff',
|
|
color: { // 圆环的颜色
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: '#15caff', // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: '#159bfe', // 100% 处的颜色
|
|
}]
|
|
},
|
|
}
|
|
}
|
|
},
|
|
{
|
|
value: 100 - value,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#364662"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
]
|
|
};
|
|
initChart("main", option3)
|
|
customList[0].value = res.decision
|
|
customList[1].value = res.document
|
|
customList[2].value = res.examination
|
|
customList[3].value = res.not_return_margin_amount
|
|
customList[4].value = res.successful
|
|
|
|
|
|
}
|
|
getData()
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
#main,
|
|
#main2,
|
|
#main3 {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
|
|
.chart {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
|
|
.header-btn {
|
|
text-align: center;
|
|
cursor: pointer;
|
|
padding: 0px 10px;
|
|
|
|
}
|
|
|
|
.header-btn:active {
|
|
background-color: #EDEFFF;
|
|
}
|
|
</style> |