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

src/styles/schedule/write.scss

@@ -47,9 +47,13 @@
             height: calc(100% - 80px);
         }
     }
-    .hc-layout-content-box {
+    .hc-chart-content-box {
         flex: 1;
         position: relative;
         margin-left: 24px;
+        background: #f1f5f8;
+        border-radius: 10px;
+        padding-top: 24px;
+        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
     }
 }

src/views/ledger/components/table-form.vue

@@ -107,7 +107,7 @@ import queryApi from '~api/ledger/query';
 import wbsQueryApi from '~api/data-fill/query';
 import HTableForm from "~src/plugins/HTableForm"
 import DateCalendar from "./dateCalendar/index.vue"
-import {getObjValue, getObjNullValue, isString, getArrValue} from "vue-utils-plus"
+import {getObjValue, getObjNullValue, isString, getArrValue, isValueNull} from "vue-utils-plus"
 
 //参数
 const props = defineProps({
@@ -286,7 +286,7 @@ const checkTheLogTaskStatus = async (choices,primaryKeyId) => {
             recordTime: choices
         }, false)
         //处理数据
-        const res = isString(data) ? data || '' : ''
+        const res = isValueNull(data) ? '' : data || ''
         if (!error && code === 200 && res) {
             //1和2的时候所有按钮皆可操作，废除 除外
             //3和4时, 除了预览和废除 都不行

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

@@ -6,16 +6,29 @@
 
 <script setup>
 import * as echarts from 'echarts'
-import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+const props = defineProps({
+    datas: {
+        type: Array,
+        default: () => ([])
+    }
+})
 
 //初始变量
 let chart = null;
 const echart = ref(null)
+const datas = ref(props.datas)
+
+//监听
+watch(() => props.datas, (data) => {
+    datas.value = data
+    setDatas(data)
+})
 
 //初始化图表
 const initChart = () => {
     chart = echarts.init(echart.value)
-    setOptions()
+    setDatas(props.datas)
 }
 
 //监听浏览器窗口变化
@@ -29,8 +42,24 @@ const resizeEvent = () => {
     })
 }
 
+const onResize = () => {
+    chart.resize();
+}
+
+//设置数据
+const setDatas = (data) => {
+    let AxisData = [], neiYeRatio = [], waiYeRatio = [];
+    for (let i = 0; i < data.length; i++) {
+        AxisData.push(data[i].title)
+        neiYeRatio.push(data[i]?.neiYeRatio)
+        waiYeRatio.push(data[i]?.waiYeRatio)
+    }
+    setOptions(AxisData,neiYeRatio,waiYeRatio)
+}
+
 //设置图表
-const setOptions = () => {
+const setOptions = (AxisData,neiYeRatio,waiYeRatio) => {
+    let xLabelWidth = ((chart.getWidth() * 1 - 30 - 40) / AxisData.length) - 30
     chart.setOption({
         color: ['#4094C2', '#6DC8E1'],
         tooltip: {
@@ -45,8 +74,13 @@ const setOptions = () => {
         xAxis: [
             {
                 type: 'category',
-                data: ['名称1', '名称2', '名称3', '名称4', '名称5', '名称6', '名称7'],
-                axisLabel: { interval: 0, rotate: 30 }
+                data: AxisData,
+                axisLabel: {
+                    width: xLabelWidth,
+                    overflow:"breakAll",
+                    interval: 0,
+                    rotate: 0
+                }
             }
         ],
         yAxis: [
@@ -62,8 +96,8 @@ const setOptions = () => {
             {
                 name: '内业',
                 type: 'bar',
-                stack: '名称1',
-                data: [320, 332, 301, 334, 390, 330, 320],
+                //stack: '名称1',
+                data: neiYeRatio,
                 tooltip: {
                     valueFormatter(value) {
                         return value + '%';
@@ -73,8 +107,8 @@ const setOptions = () => {
             {
                 name: '外业',
                 type: 'bar',
-                stack: '名称1',
-                data: [120, 132, 101, 134, 90, 230, 210],
+                //stack: '名称1',
+                data: waiYeRatio,
                 tooltip: {
                     valueFormatter(value) {
                         return value + '%';
@@ -99,6 +133,11 @@ onUnmounted(() => {
     chart.dispose()
     chart = null
 })
+
+// 暴露出去
+defineExpose({
+    onResize
+})
 </script>
 
 <style lang="scss" scoped>

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

@@ -6,16 +6,41 @@
 
 <script setup>
 import * as echarts from 'echarts'
-import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+const props = defineProps({
+    datas: {
+        type: Array,
+        default: () => ([])
+    }
+})
 
 //初始变量
 let chart = null;
 const echart = ref(null)
+const datas = ref(props.datas)
+
+//监听
+watch(() => props.datas, (data) => {
+    datas.value = data
+    setDatas(data)
+})
 
 //初始化图表
 const initChart = () => {
     chart = echarts.init(echart.value)
-    setOptions()
+    setDatas(props.datas)
+}
+
+//设置数据
+const setDatas = (data) => {
+    console.log(data)
+    let AxisData = ['影像资料统计'];
+    for (let i = 0; i < data.length; i++) {
+        AxisData.push(data[i].amount)
+        AxisData.push(data[i].imageAmount)
+        AxisData.push(data[i].videoAmount)
+    }
+    setOptions(AxisData)
 }
 
 //监听浏览器窗口变化
@@ -30,7 +55,7 @@ const resizeEvent = () => {
 }
 
 //设置图表
-const setOptions = () => {
+const setOptions = (AxisData) => {
     chart.setOption({
         color: ['#D97558', '#E4C377', '#D9A67B'],
         tooltip: {
@@ -46,7 +71,7 @@ const setOptions = () => {
         dataset: {
             source: [
                 ['product', '总计', '图片', '视频'],
-                ['影像资料统计', 1620, 1220, 400],
+                AxisData,
             ]
         },
         xAxis: { type: 'category' },

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

@@ -6,16 +6,42 @@
 
 <script setup>
 import * as echarts from 'echarts'
-import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref,watch } from 'vue'
+const props = defineProps({
+    datas: {
+        type: Array,
+        default: () => ([])
+    }
+})
+
 
 //初始变量
 let chart = null;
 const echart = ref(null)
+const datas = ref(props.datas)
+
+//监听
+watch(() => props.datas, (data) => {
+    datas.value = data
+    setDatas(data)
+})
 
 //初始化图表
 const initChart = () => {
     chart = echarts.init(echart.value)
-    setOptions()
+    setDatas(props.datas)
+}
+
+//设置数据
+const setDatas = (data) => {
+    let AxisData = [], approvalAmount = [], awaitAmount = [], submitAmount = [];
+    for (let i = 0; i < data.length; i++) {
+        AxisData.push(data[i].title)
+        approvalAmount.push(data[i]?.approvalAmount)
+        awaitAmount.push(data[i]?.awaitAmount)
+        submitAmount.push(data[i]?.submitAmount)
+    }
+    setOptions(AxisData,approvalAmount,awaitAmount,submitAmount)
 }
 
 //监听浏览器窗口变化
@@ -30,7 +56,7 @@ const resizeEvent = () => {
 }
 
 //设置图表
-const setOptions = () => {
+const setOptions = (AxisData,approvalAmount,awaitAmount,submitAmount) => {
     chart.setOption({
         color: ['#5187EC', '#68BBC4', '#58A45D'],
         tooltip: {
@@ -49,13 +75,13 @@ const setOptions = () => {
         },
         yAxis: {
             type: 'category',
-            data: ['开工报告', '工序资料', '评定资料', '交工证书']
+            data: AxisData
         },
         series: [
             {
                 name: '待审批',
                 type: 'bar',
-                data: [3750, 2750, 3700, 3250],
+                data: awaitAmount,
                 label: {
                     show: true,
                     position: 'right'
@@ -64,7 +90,7 @@ const setOptions = () => {
             {
                 name: '已填报',
                 type: 'bar',
-                data: [1120, 4520, 2000, 2140],
+                data: submitAmount,
                 label: {
                     show: true,
                     position: 'right'
@@ -73,7 +99,7 @@ const setOptions = () => {
             {
                 name: '已审批',
                 type: 'bar',
-                data: [248, 365, 1452, 3741],
+                data: approvalAmount,
                 label: {
                     show: true,
                     position: 'right'

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

@@ -6,16 +6,26 @@
 
 <script setup>
 import * as echarts from 'echarts'
-import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+const props = defineProps({
+    ratio: {
+        type: [Number,String],
+        default: 0
+    }
+})
 
 //初始变量
 let chart = null;
 const echart = ref(null)
 
+watch(() => props.ratio, (ratio) => {
+    setOptions(ratio, 100 - ratio)
+})
+
 //初始化图表
 const initChart = () => {
     chart = echarts.init(echart.value)
-    setOptions()
+    setOptions(props.ratio, 100 - props.ratio)
 }
 
 //监听浏览器窗口变化
@@ -30,7 +40,7 @@ const resizeEvent = () => {
 }
 
 //设置图表
-const setOptions = () => {
+const setOptions = (val1,val2) => {
     chart.setOption({
         tooltip: {
             trigger: "item",
@@ -51,14 +61,14 @@ const setOptions = () => {
                 },
                 data: [
                     {
-                        value: 30,
+                        value: val1,
                         name: "完成率",
                         itemStyle: {
                             color: "#0081ff",
                         }
                     },
                     {
-                        value: 70,
+                        value: val2,
                         name: "",
                         itemStyle: {
                             color: "#F5F5F5",

src/views/schedule/write.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="hc-layout-box" id="first-item-node-layout-target">
+    <div class="hc-layout-box">
         <div class="hc-layout-left-box" :style="'width:' + leftWidth + 'px;'">
             <div class="hc-project-box">
                 <div class="hc-project-icon-box">
@@ -12,33 +12,26 @@
             </div>
             <div class="hc-tree-box">
                 <el-scrollbar>
-                    tree
+                    <WbsTree :autoExpandKeys="treeAutoExpandKeys" :projectId="projectId" :contractId="contractId" @nodeTap="wbsElTreeClick"/>
                 </el-scrollbar>
             </div>
             <!--左右拖动-->
             <div class="horizontal-drag-line" @mousedown="onmousedown"/>
         </div>
-        <div class="hc-layout-content-box">
-            <HcCard>
-                <template #header>
-                    123
-                </template>
-                <template #extra>
-                    <!--HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" @change="tabTypeChange"/-->
-                </template>
-                456
-            </HcCard>
+        <div class="hc-chart-content-box" v-loading="isLoading">
+            <BarChart ref="barChartRef" :datas="barChartDatas"/>
         </div>
-
     </div>
 </template>
 
 <script setup>
-import {onMounted, ref, watch} from 'vue'
+import {ref, watch} from 'vue'
 import {useAppStore} from "~src/store";
-//import WbsTree from "./components/WbsTree.vue"
+import WbsTree from "../data-fill/components/WbsTree.vue"
 import {getStoreData, setStoreData} from '~src/utils/storage'
-import {getArrValue, isString, getObjValue, getObjNullValue} from "vue-utils-plus"
+import BarChart from "./components/echarts/BarChart.vue"
+import DataApi from "~api/schedule/data"
+import {getArrValue} from "vue-utils-plus"
 
 //变量
 const useAppState = useAppStore()
@@ -54,6 +47,42 @@ watch(() => [
     isCollapse.value = Collapse
 })
 
+//自动展开缓存
+const treeAutoExpandKeys = ref(getStoreData('scheduleTreeKeys') || [])
+const barChartRef = ref(null)
+
+//树被点击
+const treeItemInfo = ref({})
+const wbsElTreeClick = ({data, keys}) => {
+    treeItemInfo.value = data
+    //缓存自动展开
+    treeAutoExpandKeys.value = keys
+    setStoreData('scheduleTreeKeys',keys)
+    //获取数据
+    queryNeiWaiYeProgress()
+}
+
+//获取数据
+const isLoading = ref(false)
+const barChartDatas = ref([])
+const queryNeiWaiYeProgress = async () => {
+    //获取数据
+    isLoading.value = true
+    const { primaryKeyId, contractIdRelation } = treeItemInfo.value
+    const { error, code, data } = await DataApi.queryNeiWaiYeProgress({
+        projectId:projectId.value,
+        contractId: contractIdRelation ? contractIdRelation : contractId.value,
+        contractIdRelation,
+        primaryKeyId,
+    });
+    //处理数据
+    isLoading.value = false
+    if (!error && code === 200) {
+        barChartDatas.value = getArrValue(data);
+    } else {
+        barChartDatas.value = [];
+    }
+}
 
 
 //左右拖动，改变树形结构宽度
@@ -67,6 +96,7 @@ const onmousedown = () => {
         }
     }
     document.onmouseup = () => {
+        barChartRef.value?.onResize()
         document.onmousemove = null;
         document.onmouseup = null;
     }