内外业进度 + 日志填报按钮状态

src/components/plugins/table-form/hc-form-upload.vue

@@ -0,0 +1,86 @@
+<template>
+    <el-upload class="hc-upload-table-form" :disabled="isLoading" :placeholder="placeholder" :keyname="isKeyName" :headers="getTokenHeader()" :action="action" :accept="accept" :show-file-list="false"
+               :on-progress="uploadprogress" @exceed="formUploadExceed" :on-error="formUploadError" @success="formUploadSuccess" v-loading="isLoading" element-loading-text="上传中...">
+        <img v-if="isSrc" :src="isSrc" class="hc-table-form-img" alt="">
+        <div class="hc-table-form-icon" v-else>点此选择文件并上传</div>
+        <div v-if="isSrc" class="hc-table-form-del">
+            <el-button type="danger" plain @click.stop="delTableFormFile">删除当前文件</el-button>
+        </div>
+    </el-upload>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import {getTokenHeader} from '~src/api/request/header';
+const props = defineProps({
+    src: {
+        type: [Number,String],
+        default: ''
+    },
+    keyName: {
+        type: [Number,String],
+        default: ''
+    },
+    placeholder: {
+        type: [Number,String],
+        default: '相片'
+    },
+})
+
+//变量
+const isLoading = ref(false)
+const isSrc = ref(props.src)
+const isKeyName = ref(props.keyName)
+
+const action = '/api/blade-resource/oss/endpoint/put-file';
+const accept = 'image/png,image/jpg,image/jpeg';
+
+//监听
+watch(() => [
+    props.src,
+    props.keyName,
+], ([src, keyName]) => {
+    isSrc.value = src
+    isKeyName.value = keyName
+})
+
+//事件
+const emit = defineEmits(['success', 'del'])
+
+//上传进度
+const uploadprogress = () => {
+    isLoading.value = true
+}
+
+//上传完成
+const formUploadSuccess = (res) => {
+    isLoading.value = false
+    if (res.code === 200) {
+        const link = res.data?.link || ''
+        emit('success', {
+            res,
+            src: link,
+            key: isKeyName.value,
+        })
+    }
+}
+
+//上传失败
+const formUploadError = () => {
+    isLoading.value = false
+}
+
+//格式错误
+const formUploadExceed = () => {
+    isLoading.value = false
+}
+
+//删除上传的文件
+const delTableFormFile = () => {
+    emit('del', isKeyName.value)
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/plugins/HTableForm.js

@@ -1,15 +1,18 @@
 import {createApp} from "vue/dist/vue.esm-bundler.js";
 import {getTokenHeader} from '~src/api/request/header';
 import {toParse} from "vue-utils-plus";
+import HcTableFormUpload from "~com/plugins/table-form/hc-form-upload.vue"
+
 import {
     ElButton,ElTooltip,ElInput,ElDatePicker,ElUpload,
     ElInputNumber,ElTimePicker,ElSelect,ElOption,ElRadioGroup,
     ElRadio,ElCheckbox,ElCheckboxGroup
 } from 'element-plus'
+
 const components = {
     ElButton,ElTooltip,ElInput, ElDatePicker, ElUpload,
     ElInputNumber, ElTimePicker, ElSelect, ElOption, ElRadioGroup,
-    ElRadio, ElCheckbox, ElCheckboxGroup
+    ElRadio, ElCheckbox, ElCheckboxGroup, HcTableFormUpload
 }
 
 //表单渲染
@@ -20,7 +23,6 @@ export default class HTableForm {
                 return {
                     getTokenHeader: getTokenHeader(),
                     formData: tableForm,
-                    formUploadLoading: false,
                 }
             },
             template,
@@ -52,24 +54,9 @@ export default class HTableForm {
                 datePickerChange(val,key) {
                     this.formData[key] = val
                 },
-                //上传进度
-                uploadprogress() {
-                    this.formUploadLoading = true
-                },
                 //上传完成
-                formUploadSuccess(res,key) {
-                    this.formUploadLoading = false
-                    if (res.code === 200) {
-                        this.formData[key] = res.data?.link || ''
-                    }
-                },
-                //上传失败
-                formUploadError() {
-                    this.formUploadLoading = false
-                },
-                //格式错误
-                formUploadExceed() {
-                    this.formUploadLoading = false
+                formUploadSuccess({src,key}) {
+                    this.formData[key] = src
                 },
                 //删除上传的文件
                 delTableFormFile(key) {

src/styles/schedule/hc-data.scss

@@ -1,7 +1,91 @@
 .hc-layout-box {
+    display: flex;
+    flex-direction: column;
     position: relative;
-    padding: 0 24px 24px;
-    height: calc(100% - 60px);
+    height: 100%;
+    .hc-round-chart {
+        position: relative;
+        .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;
+                .card-title {
+                    color: #50545E;
+                    font-weight: 500;
+                }
+                .card-ratio-box {
+                    position: relative;
+                    align-items: center;
+                    display: flex;
+                    margin: 10px 0;
+                    .ratio-num {
+                        font-size: 40px;
+                        color: #1a1a1a;
+                    }
+                    .ratio-text {
+                        position: relative;
+                        margin-left: 10px;
+                        .unit {
+                            color: #1a1a1a;
+                            font-size: 16px;
+                        }
+                        .text {
+                            font-size: 12px;
+                            color: #999999;
+                            margin-top: 2px;
+                        }
+                    }
+                }
+                .card-amount-box {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    .amount-item {
+                        position: relative;
+                        text-align: center;
+                        .text {
+                            font-size: 12px;
+                            color: #999999;
+                        }
+                        .num {
+                            font-size: 14px;
+                            color: #50545e;
+                            font-weight: 500;
+                            margin-top: 5px;
+                        }
+                    }
+                    .amount-divider {
+                        position: relative;
+                        width: 1px;
+                        height: 35px;
+                        margin: 0 20px;
+                        background-color: #CCD0DE;
+                    }
+                }
+            }
+            .hc-card-chart-box {
+                position: relative;
+                height: 129px;
+                display: flex;
+                align-items: center;
+                .text-num {
+
+                }
+            }
+        }
+    }
+    .hc-chart-flex {
+        position: relative;
+        flex: auto;
+    }
+
     .hc-grid-box {
         position: relative;
         .hc-grid-card-box {

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

@@ -20,7 +20,9 @@ const echart = ref(null)
 const datas = ref(props.datas)
 
 //监听
-watch(() => props.datas, (data) => {
+watch(() => [
+    props.datas
+], ([data]) => {
     datas.value = data
     setDatas(data)
 })
@@ -43,7 +45,9 @@ const resizeEvent = () => {
 }
 
 const onResize = () => {
-    chart.resize();
+    nextTick(() => {
+        chart.resize();
+    })
 }
 
 //设置数据

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

@@ -115,6 +115,17 @@ onUnmounted(() => {
     chart.dispose()
     chart = null
 })
+
+const onResize = () => {
+    nextTick(() => {
+        chart.resize();
+    })
+}
+
+// 暴露出去
+defineExpose({
+    onResize
+})
 </script>
 
 <style lang="scss" scoped>

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

@@ -123,6 +123,18 @@ onUnmounted(() => {
     chart.dispose()
     chart = null
 })
+
+
+const onResize = () => {
+    nextTick(() => {
+        chart.resize();
+    })
+}
+
+// 暴露出去
+defineExpose({
+    onResize
+})
 </script>
 
 <style lang="scss" scoped>

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

@@ -94,6 +94,18 @@ onUnmounted(() => {
     chart.dispose()
     chart = null
 })
+
+
+const onResize = () => {
+    nextTick(() => {
+        chart.resize();
+    })
+}
+
+// 暴露出去
+defineExpose({
+    onResize
+})
 </script>
 
 <style lang="scss" scoped>

src/views/schedule/hc-data.vue

@@ -1,10 +1,139 @@
 <template>
-    <div>
-        内业资料进度
+    <div class="hc-layout-box">
+        <div class="hc-round-chart">
+            <el-row :gutter="30">
+                <el-col :span="6" v-for="item in processMaterialList">
+                    <div class="hc-round-chart-card-box">
+                        <div class="hc-card-content-box">
+                            <div class="card-title">{{item['title']}}</div>
+                            <div class="card-ratio-box">
+                                <div class="ratio-num">{{item['ratio']}}</div>
+                                <div class="ratio-text">
+                                    <div class="unit">%</div>
+                                    <div class="text">完成率</div>
+                                </div>
+                            </div>
+                            <div class="card-amount-box">
+                                <div class="amount-item">
+                                    <div class="text">应填(份)</div>
+                                    <div class="num">{{item['amount']}}</div>
+                                </div>
+                                <div class="amount-divider"/>
+                                <div class="amount-item">
+                                    <div class="text">已填(份)</div>
+                                    <div class="num">{{item['successAmount']}}</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="hc-card-chart-box">
+                            <RoundChart :ratio="item.ratio"/>
+                            <div class="text-num">{{item['ratio']}}%</div>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <div class="hc-chart-flex">
+            <el-row :gutter="30">
+                <el-col :span="18">
+                    1
+                </el-col>
+                <el-col :span="6">
+                    2
+                </el-col>
+            </el-row>
+        </div>
     </div>
 </template>
 
 <script setup>
+import {ref, watch, onMounted} from 'vue'
+import {useRouter} from 'vue-router'
+import {useAppStore} from "~src/store";
+import RoundChart from "./components/echarts/RoundChart.vue"
+import ReportChart from "./components/echarts/ReportChart.vue"
+import MediaChart from "./components/echarts/MediaChart.vue"
+import {getArrValue} from "vue-utils-plus"
+import DataApi from "~api/schedule/data"
+
+//变量
+const router = useRouter()
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId);
+const contractId = ref(useAppState.getContractId);
+const isCollapse = ref(useAppState.getCollapse)
+
+//渲染完成
+onMounted(() => {
+    queryMaterialProgress()
+    queryMaterialProgressStatus()
+    queryImageClassification()
+})
+
+
+//查询内业资料进度
+const isProcessLoading = ref(false)
+const processMaterialList = ref([])
+const queryMaterialProgress = async () => {
+    isProcessLoading.value = true
+    const { error, code, data } = await DataApi.queryMaterialProgress({
+        projectId: projectId.value,
+        contractId: contractId.value
+    });
+    //处理数据
+    isProcessLoading.value = false
+    if (!error && code === 200) {
+        processMaterialList.value = getArrValue(data?.processMaterialList);
+    } else {
+        processMaterialList.value = [];
+    }
+}
+
+
+//报表资料审批统计
+const materialList = ref(0)
+const isMaterialLoading = ref(false)
+const processMaterialStatusList = ref([])
+const queryMaterialProgressStatus = async () => {
+    isMaterialLoading.value = true
+    const { error, code, data } = await DataApi.queryMaterialProgressStatus({
+        projectId: projectId.value,
+        contractId: contractId.value
+    });
+    //处理数据
+    isMaterialLoading.value = false
+    if (!error && code === 200) {
+        let num = 0;
+        const listData = getArrValue(data?.processMaterialStatusList);
+        for (let i = 0; i < listData.length; i++) {
+            const Amount = listData[i]?.approvalAmount || 0
+            num += Amount
+        }
+        materialList.value = num
+        processMaterialStatusList.value = listData
+    } else {
+        materialList.value = 0
+        processMaterialStatusList.value = [];
+    }
+}
+
+//声像媒体资料统计
+const isImageClassLoading = ref(false)
+const contractImageClassificationList = ref([])
+const queryImageClassification = async () => {
+    isImageClassLoading.value = true
+    const { error, code, data } = await DataApi.queryImageClassification({
+        projectId: projectId.value,
+        contractId: contractId.value
+    });
+    //处理数据
+    isImageClassLoading.value = false
+    if (!error && code === 200) {
+        contractImageClassificationList.value = getArrValue(data?.contractImageClassificationList);
+    } else {
+        contractImageClassificationList.value = [];
+    }
+}
 
 </script>
 

src/views/schedule/write.vue

@@ -45,6 +45,7 @@ watch(() => [
     useAppState.getCollapse
 ], ([Collapse]) => {
     isCollapse.value = Collapse
+    barChartRef.value?.onResize()
 })
 
 //自动展开缓存
@@ -84,7 +85,6 @@ const queryNeiWaiYeProgress = async () => {
     }
 }
 
-
 //左右拖动，改变树形结构宽度
 const leftWidth = ref(382)
 const onmousedown = () => {