|
@@ -45,18 +45,20 @@
|
|
|
</div>
|
|
|
<div class="card-item-common card-flex-col">
|
|
|
<CardTitle title="合同信息" />
|
|
|
- <CardItemThree />
|
|
|
+ <CardItemThree @init="initData" />
|
|
|
<CardTitle title="成本情况">
|
|
|
<template #rightTitle>
|
|
|
- <span style="font-size: 12px; color: #8b969c"> 单位:万元 </span>
|
|
|
+ <span style="font-size: 12px; color: #8b969c"> 单位:元 </span>
|
|
|
</template>
|
|
|
</CardTitle>
|
|
|
- <div style="flex: 1"> <LineChart /></div>
|
|
|
+ <div style="flex: 1"> <MyEchart :options="options" /></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
import { useRouter } from 'vue-router'
|
|
|
+import { EChartsOption } from 'echarts'
|
|
|
+import * as echarts from 'echarts'
|
|
|
import CompanyNews from './components/CompanyNews.vue'
|
|
|
import CardTitle from './components/CardTitle.vue'
|
|
|
import CardItemSeven from './components/CardItemSeven.vue'
|
|
@@ -64,7 +66,7 @@ import HandleEvents from './components/HandleEvents.vue'
|
|
|
import CardItemThree from './components/CardItemThree.vue'
|
|
|
import ProjectInfo from './components/ProjectInfo.vue'
|
|
|
import PersonInfo from './components/PersonInfo.vue'
|
|
|
-import LineChart from './components/LineChart.vue'
|
|
|
+import MyEchart from '@/components/Echart/src/Echart.vue'
|
|
|
import CardItemSeven3 from './components/CardItemSeven3.vue'
|
|
|
|
|
|
import { ref } from 'vue'
|
|
@@ -100,4 +102,74 @@ const toNewPageHandle = (path: string | null = null) => {
|
|
|
router.push({ path: path })
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 折线图
|
|
|
+ */
|
|
|
+const chartData = ref([
|
|
|
+ { value: 0, name: '差旅费用' },
|
|
|
+ { value: 0, name: '报销成本' },
|
|
|
+ { value: 0, name: '用款成本' }
|
|
|
+])
|
|
|
+
|
|
|
+const xAxisData = ['差旅费用', '报销成本', '用款成本']
|
|
|
+
|
|
|
+const options = reactive<EChartsOption>({
|
|
|
+ grid: {
|
|
|
+ left: '10%',
|
|
|
+ right: '0%',
|
|
|
+ bottom: '16%',
|
|
|
+ top: '10%'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: xAxisData,
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ color: '#E3E3E3'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#666'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'bar',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 20,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: 10,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: '#7BB5FA' },
|
|
|
+ { offset: 1, color: '#448ADC' }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData.value
|
|
|
+ }
|
|
|
+ ]
|
|
|
+})
|
|
|
+const initData = (result) => {
|
|
|
+ chartData.value[0]['value'] = result.travelCost
|
|
|
+ chartData.value[1]['value'] = result.reimbursementCost
|
|
|
+ chartData.value[2]['value'] = result.paymentCost
|
|
|
+ // options['series'][0]['data'] = chartData
|
|
|
+}
|
|
|
</script>
|