mkm/engineering_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add

Browse Source
This commit is contained in:
zmj 2024-04-15 23:13:20 +08:00
parent 871926d217
commit 8b95e1d607
4 changed files with 323 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

275
src/views/bid_industry_analysis/index.vue Normal file
View File

@ -0,0 +1,275 @@
<template>
<el-card class="!border-none mb-4" shadow="never">
<el-form class="mb-[-16px]" inline>
<el-form-item label="图表类型">
<el-select v-model="chartType" placeholder="请选择图表类型" class="flex-1" @change="changeChartType">
<el-option v-for="item in chartTypeList" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="图标宽度" prop="num">
<el-input v-model="chartWitdth" clearable type="number" @blur="chartResize" />
</el-form-item>
<el-form-item label="图标高度" prop="project">
<el-input v-model="chartHeight" clearable type="number" @blur="chartResize" />
</el-form-item>
</el-form>
</el-card>
<el-card style="min-height: 75vh;">
<div class="tit">行业投标分析</div>
<div id="main" style="margin: 0 auto;" :style="{ width: chartWitdth + 'px', height: chartHeight + 'px' }"></div>
</el-card>
</template>
<script lang="ts" setup name="">
import * as echarts from 'echarts';
import { ref, reactive, onMounted } from "vue";
import { apibid_industry_analysis } from '@/api/marketing_bid_statistics'
import { cloneDeep } from 'lodash-es';
import { nextTick } from 'vue';
var chartDom: any;
var option: any;
var myChart: any
const chartWitdth = ref(1000)
const chartHeight = ref(500)
const chartType = ref(3)
const chartTypeList = reactive([
{
name: '柱状图',
value: 1
},
{
name: '折线图',
value: 2
},
{
name: '饼状图',
value: 3
},
{
name: '漏斗图',
value: 4
},
])
// 柱状图
let option1 = {
tooltip: {
trigger: 'item',
},
yAxis: {
type: 'value'
},
legend: {
data: ['总金额', '中标金额', '未中标金额']
},
xAxis: {
type: 'category',
// data: ['房屋建筑工程', '化工石油工程', '矿山工程', '市政公用工程', '通信与光电工程', '其他工程', 'Sun']
data: []
},
series: [
// 总金额
// {
// // name: '总金额',
// data: [120, 200, 150, 80, 70, 110, 130],
// type: 'bar',
// },
// // 中标金额
// {
// name: '中标金额',
// data: [10, 20, 50, 10, 32, 46, 55],
// type: 'bar',
// },
// // 未中标金额
// {
// name: '未中标金额',
// data: [33, 47, 21, 80, 95, 35, 120],
// type: 'bar',
// }
],
};
// 折线图
let option2 = {
tooltip: {
trigger: 'item'
},
legend: {
data: ['总金额', '中标金额', '未中标金额']
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
}
]
};
// 饼图
let option3 = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
// { value: 1048, name: 'Search Engine' },
// { value: 735, name: 'Direct' },
// { value: 580, name: 'Email' },
// { value: 484, name: 'Union Ads' },
// { value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
}
]
};
// 漏斗图
let option4 = {
tooltip: {
trigger: 'item',
},
// legend: {
// data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
// },
series: [
{
name: 'Funnel',
type: 'funnel',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20
}
},
data: [
{ value: 60, name: 'Visit' },
{ value: 40, name: 'Inquiry' },
{ value: 20, name: 'Order' },
{ value: 80, name: 'Click' },
{ value: 100, name: 'Show' }
],
}
]
};
let chartData: object;
const getData = async (fetchFun: Function) => {
let res = await fetchFun()
chartData = res
option3.series[0].data = chartData.total_series.data.map((item, index) => ({
value: item,
name: chartData.column[index + 1]
}));
option = option3
initChart()
}
const initChart = () => {
myChart = echarts.init(chartDom);
myChart.setOption(option, true);
}
const changeChartType = async (e: any) => {
console.log(chartData, 'chartData')
switch (e) {
case 1:
option1.xAxis.data = Object.values(chartData.column)
let data = cloneDeep(chartData)
delete data.column
option1.series = Object.values(data)
option1.series.forEach(item => {
item.type = 'bar'
})
option = option1
break;
case 2:
option2.xAxis.data = option1.xAxis.data
option2.series = option1.series
option2.series.forEach(item => {
item.type = 'line'
})
option = option2
break;
case 3:
option = option3
break;
case 4:
option4.series[0].data = option3.series[0].data
option = option4
break;
}
initChart()
}
const chartResize = () => {
myChart.resize()
}
onMounted(() => {
chartDom = document.getElementById('main');
getData(apibid_industry_analysis);
})
</script>
<style>
.tit {
margin: 10px 0;
text-align: center;
font-size: 20px;
}
</style>

53
src/views/bid_margin_statistics/index.vue
View File

@ -25,16 +25,16 @@
import * as echarts from 'echarts';
import { ref, reactive, onMounted } from "vue";
import { useRoute } from 'vue-router';
import { apibid_margin_list } from '@/api/financial_bid_statistics'
import { apibid_margin_statistics } from '@/api/financial_bid_statistics'
const route = useRoute()
var chartDom: any;
var option: any;
var myChart: any
const chartWitdth = ref(500)
const chartWitdth = ref(1000)
const chartHeight = ref(500)
const chartType = ref(1)
const chartType = ref(3)
const chartTypeList = reactive([
{
name: '柱状图',
@ -63,32 +63,34 @@ let option1 = {
yAxis: {
type: 'value'
},
legend: {
data: ['总金额', '中标金额', '未中标金额']
},
// legend: {
// // data: ['总金额', '中标金额', '未中标金额']
// },
xAxis: {
type: 'category',
data: ['房屋建筑工程', '化工石油工程', '矿山工程', '市政公用工程', '通信与光电工程', '其他工程', 'Sun']
// data: ['房屋建筑工程', '化工石油工程', '矿山工程', '市政公用工程', '通信与光电工程', '其他工程', 'Sun']
data: []
},
series: [
// 总金额
{
name: '总金额',
// name: '总金额',
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
// 中标金额
{
name: '中标金额',
data: [10, 20, 50, 10, 32, 46, 55],
type: 'bar',
},
// 未中标金额
{
name: '未中标金额',
data: [33, 47, 21, 80, 95, 35, 120],
type: 'bar',
}
// // 中标金额
// {
// name: '中标金额',
// data: [10, 20, 50, 10, 32, 46, 55],
// type: 'bar',
// },
// // 未中标金额
// {
// name: '未中标金额',
// data: [33, 47, 21, 80, 95, 35, 120],
// type: 'bar',
// }
],
};
@ -197,10 +199,8 @@ let chartData: object;
const getData = async (fetchFun: Function) => {
let res = await fetchFun()
chartData = res
// option1.xAxis.data = chartData.data.map(item => item.name)
// option1.series[0].data = chartData.data.map(item => item.value)
console.log(chartData, '保证金统计表')
option = option1
option3.series[0].data = res.data
option = option3
initChart()
}
@ -212,6 +212,7 @@ const initChart = () => {
const changeChartType = (e: any) => {
console.log(chartData, 'chartData')
switch (e) {
case 1:
option1.xAxis.data = chartData.data.map(item => item.name)
@ -224,7 +225,7 @@ const changeChartType = (e: any) => {
option = option2
break;
case 3:
option3.series[0].data = res.data
option3.series[0].data = chartData.data
option = option3
break;
case 4:
@ -244,7 +245,7 @@ const chartResize = () => {
onMounted(() => {
chartDom = document.getElementById('main');
getData(apibid_margin_list);
getData(apibid_margin_statistics);
})

41
src/views/bid_project_status/index.vue
View File

@ -25,14 +25,14 @@
import * as echarts from 'echarts';
import { ref, reactive, onMounted } from "vue";
import { useRoute } from 'vue-router';
import { apibid_project_status, apibid_project_number, apibid_project_analysis, apibid_industry_analysis } from '@/api/marketing_bid_statistics'
import { apibid_project_status, apibid_project_number, apibid_project_analysis } from '@/api/marketing_bid_statistics'
const route = useRoute()
var chartDom: any;
var option: any;
var myChart: any
const chartWitdth = ref(500)
const chartWitdth = ref(1000)
const chartHeight = ref(500)
const chartType = ref(3)
const chartTypeList = reactive([
@ -63,32 +63,34 @@ let option1 = {
yAxis: {
type: 'value'
},
legend: {
data: ['总金额', '中标金额', '未中标金额']
},
// legend: {
// // data: ['总金额', '中标金额', '未中标金额']
// },
xAxis: {
type: 'category',
data: ['房屋建筑工程', '化工石油工程', '矿山工程', '市政公用工程', '通信与光电工程', '其他工程', 'Sun']
// data: ['房屋建筑工程', '化工石油工程', '矿山工程', '市政公用工程', '通信与光电工程', '其他工程', 'Sun']
data: []
},
series: [
// 总金额
{
name: '总金额',
// name: '总金额',
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
// 中标金额
{
name: '中标金额',
data: [10, 20, 50, 10, 32, 46, 55],
type: 'bar',
},
// 未中标金额
{
name: '未中标金额',
data: [33, 47, 21, 80, 95, 35, 120],
type: 'bar',
}
// // 中标金额
// {
// name: '中标金额',
// data: [10, 20, 50, 10, 32, 46, 55],
// type: 'bar',
// },
// // 未中标金额
// {
// name: '未中标金额',
// data: [33, 47, 21, 80, 95, 35, 120],
// type: 'bar',
// }
],
};
@ -246,7 +248,6 @@ onMounted(() => {
if (route.path.includes('bid_project_status')) getData(apibid_project_status);
if (route.path.includes('bid_project_number')) getData(apibid_project_number);
if (route.path.includes('bid_project_analysis')) getData(apibid_project_analysis);
if (route.path.includes('bid_industry_analysis')) getData(apibid_industry_analysis);
})

1
src/views/financial_performance_money_apply/detail.js
View File

@ -65,7 +65,6 @@ const detailConfig = {
column: 1
},
{
label: "创建人",
value: "create_user",