明细、统计图

src/components/echarts/echarts.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="hc-echarts-box">
+        <div ref="echart" class="hc-echarts" :style="`width : ${chart?.clientWidth}px`" />
+    </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+import { getObjValue } from 'js-fast-way'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+const props = defineProps({
+    option: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+defineOptions({
+    name: 'HcCharts',
+})
+
+//初始变量
+let chart = null
+const echart = ref(null)
+const options = ref(getObjValue(props.option))
+
+//深度监听
+watch(() => [
+    props.option,
+], ([option]) => {
+    options.value = getObjValue(option)
+    setOptions(options.value)
+}, { deep: true })
+
+//初始化图表
+const initChart = () => {
+    chart = echarts.init(echart.value)
+    setOptions(options.value)
+}
+
+//监听浏览器窗口变化
+const windowResize = () => {
+    window.addEventListener('resize', resizeEvent)
+}
+
+const resizeEvent = () => {
+    window.requestAnimationFrame(() => {
+        chart.resize()
+    })
+}
+
+//设置图表
+const setOptions = (option) => {
+    nextTick(() => {
+        chart.setOption(option)
+    })
+}
+
+//渲染完成
+onMounted(() => {
+    nextTick(() => {
+        initChart()
+        windowResize()
+    })
+})
+
+//被卸载
+onUnmounted(() => {
+    window.removeEventListener('resize', resizeEvent)
+    chart.dispose()
+    chart = null
+})
+
+const onResize = () => {
+    nextTick(() => {
+        chart.resize()
+    })
+}
+
+// 暴露出去
+defineExpose({
+    onResize,
+})
+</script>
+
+<style lang="scss" scoped>
+.hc-echarts-box {
+    display: block;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    .hc-echarts {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

src/components/index.js

@@ -4,6 +4,7 @@ import HcChoiceUser from './choice-user/choice-user.vue'
 import HcReportDialog from './hc-report/hc-report.vue'
 import HcInfoTable from './info-table/info-table.vue'
 import HcInfoTableTd from './info-table/info-table-td.vue'
+import HcCharts from './echarts/echarts.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
@@ -13,4 +14,5 @@ export const setupComponents = (App) => {
     App.component('HcReportDialog', HcReportDialog)
     App.component('HcInfoTable', HcInfoTable)
     App.component('HcInfoTableTd', HcInfoTableTd)
+    App.component('HcCharts', HcCharts)
 }

src/views/debit-pay/ledgers/detail.vue

@@ -1,13 +1,67 @@
 <template>
-    <hc-card title="各期计量支付明细">
-        开发中...
+    <hc-card>
+        <template #header>
+            <el-date-picker v-model="searchForm.key2" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
+        </template>
+        <template #extra>
+            <el-button hc-btn type="primary">
+                <HcIcon name="download" />
+                <span>导出</span>
+            </el-button>
+        </template>
+        <div class="hc-table-ref-box no-border">
+            <el-table class="w-full" :data="tableData" row-key="id" height="100%" highlight-current-row border>
+                <el-table-column prop="key1" label="合同编号" />
+                <el-table-column prop="key1" label="施工单位名称" />
+                <el-table-column prop="key1" label="合同金额" />
+                <el-table-column prop="key1" label="变更后金额" />
+                <el-table-column label="支付金额（未扣款）" align="center">
+                    <el-table-column prop="key2" label="2020年08月" />
+                    <el-table-column prop="key3" label="2020年09月" />
+                    <el-table-column prop="key4" label="2020年10月" />
+                    <el-table-column prop="key4" label="2020年11月" />
+                    <el-table-column prop="key4" label="2023年03月" />
+                </el-table-column>
+                <el-table-column prop="key1" label="合计（元）" />
+                <el-table-column prop="key1" label="完成比例(%)" />
+            </el-table>
+        </div>
+        <template #action>
+            <hc-pages :pages="searchForm" @change="pageChange" />
+        </template>
     </hc-card>
 </template>
 
 <script setup>
+import { onMounted, ref } from 'vue'
 defineOptions({
     name: 'DebitPayLedgersDetail',
 })
+//渲染完成
+onMounted(() => {
+
+})
+
+//搜索表单
+const searchForm = ref({
+    current: 1, size: 10, total: 0,
+})
+
+//分页
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+
+const tableData = ref([
+    {
+        id: 1,
+        key1: '2016',
+        key2: '名称名称名称',
+        key3: '总额',
+        hasChildren: true,
+    },
+])
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/ledgers/section.vue

@@ -1,13 +1,38 @@
 <template>
     <hc-card title="章节完成投资柱状图">
-        开发中...
+        <hc-charts :option="chartsOption" />
     </hc-card>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 defineOptions({
     name: 'DebitPayLedgersSection',
 })
+
+const chartsOption = ref({
+    color: ['#99CC98', '#FF999A'],
+    legend: {},
+    tooltip: {},
+    grid: {
+        top: '50px',
+        left: '0',
+        right: '6px',
+        bottom: '0',
+        containLabel: true,
+    },
+    dataset: {
+        source: [
+            ['product', '变更后金额', '累计计量金额'],
+            ['100章', 43.3, 85.8],
+            ['200章', 83.1, 73.4],
+            ['300章', 86.4, 65.2],
+        ],
+    },
+    xAxis: { type: 'category' },
+    yAxis: {},
+    series: [{ type: 'bar' }, { type: 'bar' }],
+})
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/ledgers/standards.vue

@@ -1,13 +1,39 @@
 <template>
     <hc-card title="各标完成投资柱状图">
-        开发中...
+        <hc-charts :option="chartsOption" />
     </hc-card>
 </template>
 
 <script setup>
+import { ref } from 'vue'
+
 defineOptions({
     name: 'DebitPayLedgersStandards',
 })
+
+const chartsOption = ref({
+    color: ['#99CC98', '#FF999A'],
+    legend: {},
+    tooltip: {},
+    grid: {
+        top: '50px',
+        left: '0',
+        right: '6px',
+        bottom: '0',
+        containLabel: true,
+    },
+    dataset: {
+        source: [
+            ['product', '变更后金额', '累计计量金额'],
+            ['第一合同段', 43.3, 85.8],
+            ['第二合同段', 83.1, 73.4],
+            ['第一总监办', 86.4, 65.2],
+        ],
+    },
+    xAxis: { type: 'category' },
+    yAxis: {},
+    series: [{ type: 'bar' }, { type: 'bar' }],
+})
 </script>
 
 <style scoped lang="scss">