表单处理

src/styles/schedule/hc-data.scss

@@ -1,18 +1,13 @@
 .hc-layout-box {
-    display: flex;
-    flex-direction: column;
     position: relative;
     height: 100%;
     .hc-round-chart {
         position: relative;
+        margin-bottom: 24px;
+        height: 177px;
         .hc-round-chart-card-box {
-            position: relative;
-            background: #f1f5f8;
-            border-radius: 10px;
-            padding: 24px;
             display: flex;
             align-items: center;
-            box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03);
             .hc-card-content-box {
                 position: relative;
                 flex: 1;
@@ -90,76 +85,87 @@
             }
         }
     }
-    .hc-chart-flex {
+    .hc-round-chart-card-box,
+    .hc-report-chart-card-box,
+    .hc-media-chart-card-box {
         position: relative;
-        flex: auto;
+        background: #f1f5f8;
+        border-radius: 10px;
+        padding: 24px;
+        box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03);
     }
-
-    .hc-grid-box {
+    .hc-chart-flex {
         position: relative;
-        .hc-grid-card-box {
+        height: calc(100% - 200px);
+        .hc-report-chart-card-box, .hc-media-chart-card-box {
             position: relative;
-            background-color: var(--hc-bg-color);
-            color: var(--hc-text-color);
-            padding: 20px;
-            border-radius: 5px;
-            .card-title {
-                font-size: 20px;
-                margin-bottom: 24px;
-            }
-            .card-body {
+            height: 100%;
+            overflow: hidden;
+            .hc-chart-title {
                 position: relative;
-                .card-flex {
-                    position: relative;
-                    height: 125px;
-                    width: 125px;
-                    text-align: left;
-                    .text-num {
-                        position: absolute;
-                        height: 100%;
-                        width: 100%;
-                        top: 0;
-                        text-align: center;
-                        line-height: 120px;
-                        font-size: 16px;
-                    }
+                .title {
+                    color: #333333;
+                    font-size: 18px;
+                    font-weight: 500;
                 }
-                .card-flex-text {
-                    position: relative;
-                    margin-left: 20px;
-                    font-size: 16px;
-                    line-height: 2.4;
-                    text-align: left;
+                .hc-chart-text {
+                    color: #999999;
+                    font-size: 14px;
+                    margin-left: 16px;
                 }
             }
-        }
-    }
-
-    .hc-chart-flex-box {
-        position: relative;
-        margin-top: 40px;
-        .hc-chart-flex-left, .hc-chart-flex-right {
-            position: relative;
-            .hc-chart-title {
+            .hc-report-chart-box {
                 position: relative;
-                font-size: 20px;
-                margin-bottom: 24px;
+                height: calc(100% - 55px);
+                margin-top: 30px;
+                background: #E7EEF4;
+                border-radius: 10px;
             }
-            .hc-report-chart-box {
+            .hc-media-chart-box {
                 position: relative;
-                height: 500px;
+                height: calc(100% - 70px);
+                margin-top: 30px;
+                background: #E7EEF4;
+                border-radius: 10px;
             }
         }
-        .hc-chart-flex-right .hc-chart-btn-view {
-            position: absolute;
-            right: 0;
-            top: 0;
+        .hc-media-chart-card-box {
+            .hc-chart-title {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+            .hc-media-chart-box .hc-media-pian-box {
+                position: absolute;
+                background: linear-gradient(0deg,rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.00) 100%);
+                border: 1px solid #ffffff;
+                border-radius: 10px;
+                color: #838791;
+                padding: 10px;
+                font-size: 14px;
+                top: 16px;
+                left: 16px;
+                .item {
+                    display: flex;
+                    align-items: center;
+                    .name {
+                        margin-right: 10px;
+                    }
+                    .num {
+                        color: #1A1A1A;
+                        font-size: 16px;
+                    }
+                    .num.c1 {
+                        color: #FF8F3E;
+                    }
+                    .num.c2 {
+                        color: #1573FF;
+                    }
+                    &+.item {
+                        margin-top: 8px;
+                    }
+                }
+            }
         }
     }
 }
-
-.hc-card-header {
-    position: relative;
-    font-size: initial;
-    font-weight: initial;
-}

src/styles/schedule/hc-table.scss

@@ -1,11 +1,4 @@
 .hc-layout-box {
     position: relative;
-    height: calc(100% - 60px);
-    padding: 0 24px 24px;
-}
-
-.hc-card-header {
-    position: relative;
-    font-size: initial;
-    font-weight: initial;
+    height: 100%;
 }

src/views/schedule/components/echarts/MediaChart.vue

@@ -33,12 +33,10 @@ const initChart = () => {
 
 //设置数据
 const setDatas = (data) => {
-    console.log(data)
-    let AxisData = ['影像资料统计'];
+    let AxisData = {image: 0, video: 0};
     for (let i = 0; i < data.length; i++) {
-        AxisData.push(data[i].amount)
-        AxisData.push(data[i].imageAmount)
-        AxisData.push(data[i].videoAmount)
+        AxisData.image = data[i].imageAmount
+        AxisData.video = data[i].videoAmount
     }
     setOptions(AxisData)
 }
@@ -57,45 +55,37 @@ const resizeEvent = () => {
 //设置图表
 const setOptions = (AxisData) => {
     chart.setOption({
-        color: ['#D97558', '#E4C377', '#D9A67B'],
+        color: ['#FF8F3E', '#1573FF'],
         tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow'
-            }
+            trigger: 'item'
         },
         legend: {
-            top: 'bottom',
-            data: ['总计', '图片', '视频']
-        },
-        dataset: {
-            source: [
-                ['product', '总计', '图片', '视频'],
-                AxisData,
-            ]
+            top: '5%',
+            left: 'center'
         },
-        xAxis: { type: 'category' },
-        yAxis: {},
         series: [
             {
-                type: 'bar',
-                label: {
-                    show: true,
-                    position: 'top'
-                }
-            },
-            {
-                type: 'bar',
-                label: {
-                    show: true,
-                    position: 'top'
-                }
-            }, {
-                type: 'bar',
-                label: {
-                    show: true,
-                    position: 'top'
-                }
+                name: '图像媒体资料',
+                type: 'pie',
+                radius: ['40%', '70%'],
+                center: ["50%", "55%"],
+                avoidLabelOverlap: false,
+                itemStyle: {
+                    borderRadius: 10,
+                    borderColor: '#fff',
+                    borderWidth: 2
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: '40',
+                        fontWeight: 'bold'
+                    }
+                },
+                data: [
+                    { value: AxisData.image, name: '图片' },
+                    { value: AxisData.video, name: '视频' },
+                ]
             }
         ]
     })

src/views/schedule/components/echarts/ReportChart.vue

@@ -58,7 +58,7 @@ const resizeEvent = () => {
 //设置图表
 const setOptions = (AxisData,approvalAmount,awaitAmount,submitAmount) => {
     chart.setOption({
-        color: ['#5187EC', '#68BBC4', '#58A45D'],
+        color: ['#F7AD2D', '#3187FF', '#1ACC96'],
         tooltip: {
             trigger: 'axis',
             axisPointer: {

src/views/schedule/hc-data.vue

@@ -34,12 +34,45 @@
             </el-row>
         </div>
         <div class="hc-chart-flex">
-            <el-row :gutter="30">
-                <el-col :span="18">
-                    1
+            <el-row :gutter="30" class="h-full">
+                <el-col :span="18" class="h-full">
+                    <div class="hc-report-chart-card-box">
+                        <div class="hc-chart-title">
+                            <span class="title">报表资料审批统计</span>
+                            <span class="hc-chart-text">(已审批{{materialList}}份)</span>
+                        </div>
+                        <div class="hc-report-chart-box">
+                            <ReportChart :datas="processMaterialStatusList"/>
+                        </div>
+                    </div>
                 </el-col>
-                <el-col :span="6">
-                    2
+                <el-col :span="6" class="h-full">
+                    <div class="hc-media-chart-card-box">
+                        <div class="hc-chart-title">
+                            <span class="title">声像媒体资料统计</span>
+                            <el-button size="large" round @click="toTableClick">
+                                <span>WBS节点进度</span>
+                                <HcIcon name="arrow-right-s" ui="ml-2" style="margin-right: 0;"/>
+                            </el-button>
+                        </div>
+                        <div class="hc-media-chart-box">
+                            <div class="hc-media-pian-box">
+                                <div class="item">
+                                    <span class="name">总计</span>
+                                    <span class="num">{{imageClassInfo.amount}}</span>
+                                </div>
+                                <div class="item">
+                                    <span class="name">图片</span>
+                                    <span class="num c1">{{imageClassInfo.image}}</span>
+                                </div>
+                                <div class="item">
+                                    <span class="name">视频</span>
+                                    <span class="num c2">{{imageClassInfo.video}}</span>
+                                </div>
+                            </div>
+                            <MediaChart :datas="contractImageClassificationList"/>
+                        </div>
+                    </div>
                 </el-col>
             </el-row>
         </div>
@@ -47,7 +80,7 @@
 </template>
 
 <script setup>
-import {ref, watch, onMounted} from 'vue'
+import {ref, onMounted} from 'vue'
 import {useRouter} from 'vue-router'
 import {useAppStore} from "~src/store";
 import RoundChart from "./components/echarts/RoundChart.vue"
@@ -120,6 +153,7 @@ const queryMaterialProgressStatus = async () => {
 //声像媒体资料统计
 const isImageClassLoading = ref(false)
 const contractImageClassificationList = ref([])
+const imageClassInfo = ref({amount: 0, image: 0, video: 0})
 const queryImageClassification = async () => {
     isImageClassLoading.value = true
     const { error, code, data } = await DataApi.queryImageClassification({
@@ -129,12 +163,25 @@ const queryImageClassification = async () => {
     //处理数据
     isImageClassLoading.value = false
     if (!error && code === 200) {
-        contractImageClassificationList.value = getArrValue(data?.contractImageClassificationList);
+        const imageClassList = getArrValue(data?.contractImageClassificationList);
+        contractImageClassificationList.value = imageClassList;
+        //数据显示
+        let AxisData = {amount: 0, image: 0, video: 0};
+        for (let i = 0; i < imageClassList.length; i++) {
+            AxisData.amount = imageClassList[i].amount
+            AxisData.image = imageClassList[i].imageAmount
+            AxisData.video = imageClassList[i].videoAmount
+        }
+        imageClassInfo.value = AxisData
     } else {
         contractImageClassificationList.value = [];
     }
 }
 
+//查看WBS节点进度
+const toTableClick = () => {
+    router.push({path: '/schedule/table'})
+}
 </script>
 
 <style lang="scss" scoped>

src/views/schedule/hc-table.vue

@@ -1,11 +1,103 @@
 <template>
     <div class="hc-layout-box">
-        内业资料进度
+        <HcCard scrollbar>
+            <template #header>
+                <el-button type="primary" hc-btn @click="toBackClick">
+                    <HcIcon name="arrow-go-back"/>
+                    <span>返回上一级</span>
+                </el-button>
+            </template>
+            <el-table :data="tableData" lazy :load="loadData" border height="100%" row-key="primaryKeyId">
+                <el-table-column prop="title" label="节点名称"></el-table-column>
+                <el-table-column label="施工台账" align="center">
+                    <el-table-column prop="standingBookNotAmount" label="未开始" align="center" width="80"></el-table-column>
+                    <el-table-column prop="standingBookEndAmount" label="已完成" align="center" width="80"></el-table-column>
+                </el-table-column>
+                <el-table-column label="开工报告" align="center">
+                    <el-table-column prop="workStartNotSubmitAmount" label="未开始" align="center" width="80"></el-table-column>
+                    <el-table-column prop="workStartNotTaskAmount" label="未上报" align="center" width="80"></el-table-column>
+                    <el-table-column prop="workStartAwaitAmount" label="待审批" align="center" width="80"></el-table-column>
+                    <el-table-column prop="workStartApprovalAmount" label="已审批" align="center" width="80"></el-table-column>
+                </el-table-column>
+                <el-table-column label="工序资料" align="center">
+                    <el-table-column prop="processNotSubmitAmount" label="未开始" align="center" width="80"></el-table-column>
+                    <el-table-column prop="processNotTaskAmount" label="未上报" align="center" width="80"></el-table-column>
+                    <el-table-column prop="processAwaitAmount" label="待审批" align="center" width="80"></el-table-column>
+                    <el-table-column prop="processApprovalAmount" label="已审批" align="center" width="80"></el-table-column>
+                </el-table-column>
+                <el-table-column label="质量评定" align="center">
+                    <el-table-column prop="evaluationNotSubmitAmount" label="未开始" align="center" width="80"></el-table-column>
+                    <el-table-column prop="evaluationNotTaskAmount" label="未上报" align="center" width="80"></el-table-column>
+                    <el-table-column prop="evaluationAwaitAmount" label="待审批" align="center" width="80"></el-table-column>
+                    <el-table-column prop="evaluationApprovalAmount" label="已审批" align="center" width="80"></el-table-column>
+                </el-table-column>
+                <el-table-column label="中间交工" align="center">
+                    <el-table-column prop="completionNotSubmitAmount" label="未开始" align="center" width="80"></el-table-column>
+                    <el-table-column prop="completionNotTaskAmount" label="未上报" align="center" width="80"></el-table-column>
+                    <el-table-column prop="completionAwaitAmount" label="待审批" align="center" width="80"></el-table-column>
+                    <el-table-column prop="completionApprovalAmount" label="已审批" align="center" width="80"></el-table-column>
+                </el-table-column>
+            </el-table>
+        </HcCard>
     </div>
 </template>
 
 <script setup>
+import {ref, onMounted} from "vue";
+import {useRouter} from 'vue-router'
+import {useAppStore} from "~src/store";
+import DataApi from "~api/schedule/data"
+import {getArrValue} from "vue-utils-plus"
 
+//变量
+const router = useRouter()
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId);
+const contractId = ref(useAppState.getContractId);
+
+//渲染完成
+onMounted(() => {
+    if (contractId.value) {
+        getTableData()
+    }
+})
+
+//初始数据获取
+const tableLoading = ref(false)
+const tableData = ref([])
+const getTableData = async () => {
+    tableLoading.value = true
+    const { error, code, data } = await DataApi.queryContractTreeMaterialProgress({
+        projectId: projectId.value,
+        contractId: contractId.value,
+        parentId: ''
+    });
+    tableLoading.value = false
+    if (!error && code === 200) {
+        tableData.value = getArrValue(data['treeMaterialProgressList']);
+    } else {
+        tableData.value = [];
+    }
+}
+
+//懒加载数据
+const loadData = async (row, treeNode, resolve) => {
+    const { error, code, data } = await DataApi.queryContractTreeMaterialProgress({
+        projectId: projectId.value,
+        contractId: row.contractId || contractId.value,
+        parentId: row.id
+    });
+    if (!error && code === 200) {
+        resolve(getArrValue(data['treeMaterialProgressList']))
+    } else {
+        resolve([])
+    }
+}
+
+//返回上级
+const toBackClick = () => {
+    router.push({path: '/schedule/hc-data'})
+}
 </script>
 
 <style lang="scss" scoped>