项目看板

src/components/bpmnProcessDesigner/package/theme/process-panel.scss

@@ -97,7 +97,11 @@
   padding-bottom: 0;
 }
 .el-input.is-disabled .el-input__inner {
-  color: #999999;
+  color:#606266
+}
+.el-textarea.is-disabled .el-textarea__inner{
+  color:#606266
+
 }
 .el-form-item.el-form-item--mini {
   margin-bottom: 0;

src/views/BOMmanage/ProjectDetailDialog.vue

@@ -264,20 +264,20 @@
               </div>
             </el-col>
 
-            <el-col :span="21" style="height: calc(100vh - 200px)">
+            <el-col :span="21" style="height: calc(100vh - 170px)">
               <ele-split-layout
                 :left-style="{
                   overflow: 'hidden',
                   width: '100%'
                 }"
                 :vertical="true"
-                style="height: calc(100vh - 230px)"
+                style="height: calc(100vh - 180px)"
                 :min-size="1"
                 :resizable="true"
                 :responsive="true"
                 :width="activeName=='任务'||activeName=='计划'?'450px':'100%'"
                 :right-style="{ overflow: 'hidden' }"
-                allow-collapse
+                :allow-collapse="false"
               >
                 <div class="card_2_layout_content">
                   <el-tabs
@@ -332,164 +332,6 @@
                           v-if="refreshPlan"
                         ></planManageList>
 
-                        <!--    <ele-pro-table
-                  class="el-table"
-                  ref="table"
-                  row-key="id"
-                  :columns="columns"
-                  :datasource="planAndTaskTree"
-                  height="100%"
-                  @row-click="handleTableNodeClick"
-                  @row-contextmenu="showTableRightMenu"
-                  :toolkit="[]"
-                  :default-expand-all="true"
-                  cache-key="project-initiationTable"
-                  :tree-props="{ children: 'children' }"
-                  :need-page="false"
-                  :indent="0"
-                >
-                  <template v-slot:name="{ row }">
-                    <span
-                      v-if="!row.children.length && row.level == 1"
-                      style="margin-left: 25px; display: inline-block"
-                    ></span>
-                    <span class="dot" v-if="row.milepost == '1'"></span>
-                    <span class="name"> {{ row.name }}</span>
-                  </template>
-                  <template v-slot:type="{ row }">
-                    <el-tag v-if="row.type == 0" type="info">计划</el-tag>
-                    <el-tag v-else-if="row.type == 1" type="info"
-                      >计划节点</el-tag
-                    >
-                    <el-tag v-else-if="row.type == 2" type="info"
-                      >任务</el-tag
-                    >
-                  </template>
-                  <template v-slot:speedPercent="{ row }">
-                    <el-progress
-                      style="padding: 0 5px"
-                      :stroke-width="20"
-                      text-color="#606266"
-                      :text-inside="true"
-                      :percentage="row.speedPercent || 0"
-                      :color="customColorMethod"
-                    ></el-progress>
-                    <vue-context-menu
-                      :transferIndex="0"
-                      :class="'vue-contextmenuName-' + row.name"
-                      v-if="row.name == contextTableMenuData.menuName"
-                      :contextMenuData="contextTableMenuData"
-                      @addPlan="() => handleAddPlan('add', '', row, 'plan')"
-                      @editPlan="
-                        () => handleAddPlan('edit', '', row, 'plan')
-                      "
-                      @removePlan="() => handleRemovePlan([row.id])"
-                      @terminationPlan="
-                        () =>
-                          handleStatus(
-                            planTerminationAPI,
-                            '确定终止该计划吗？',
-                            '',
-                            row
-                          )
-                      "
-                      @pausePlan="
-                        () =>
-                          handleStatus(
-                            planPauseAPI,
-                            '确定暂停该计划吗',
-                            '',
-                            row
-                          )
-                      "
-                      @startupPlan="
-                        () =>
-                          handleStatus(
-                            planStartupAPI,
-                            '确定启动该计划吗',
-                            '',
-                            row
-                          )
-                      "
-                      @finishPlan="
-                        () =>
-                          handleStatus(
-                            planFinishAPI,
-                            '确定完成该计划吗',
-                            '',
-                            row
-                          )
-                      "
-                      @terminationPlanStage="
-                        () =>
-                          handleStatus(
-                            planStageTerminationAPI,
-                            '确定终止该计划节点吗？',
-                            '',
-                            row
-                          )
-                      "
-                      @pausePlanStage="
-                        () =>
-                          handleStatus(
-                            planStagePauseAPI,
-                            '确定暂停该计划节点吗',
-                            '',
-                            row
-                          )
-                      "
-                      @startupPlanStage="
-                        () =>
-                          handleStatus(
-                            planStageStartupAPI,
-                            '确定启动该计划节点吗',
-                            '',
-                            row
-                          )
-                      "
-                      @finishPlanStage="
-                        () =>
-                          handleStatus(
-                            planStageFinishAPI,
-                            '确定完成该计划节点吗',
-                            '',
-                            row
-                          )
-                      "
-                      @addTask="() => handleAddTask('add', '', row, 'plan')"
-                      @updateTask="
-                        () =>
-                          handleAddTask(
-                            'edit',
-                            '',
-                            { ...row, type: 2 },
-                            'plan'
-                          )
-                      "
-                      @removeTask="() => handleRemoveTask([row.id])"
-                      @startTask="
-                        () =>
-                          handleStartTask(row, 1, '是否确定执行该任务？')
-                      "
-                      @finishTask="
-                        () =>
-                          handleStartTask(row, 3, '是否确定报工该任务？')
-                      "
-                      @pauseTask="
-                        () =>
-                          handleStartTask(row, 2, '是否确定暂停该任务？')
-                      "
-                      @terminationTask="
-                        () =>
-                          handleStartTask(row, 4, '是否确定终止该任务？')
-                      "
-                      @handleTransfer="() => handleTransfer(row)"
-                      @handleSubmitDeliverables="
-                        () => handleSubmitDeliverables(row)
-                      "
-                    ></vue-context-menu>
-                  </template>
-                </ele-pro-table> -->
                       </div>
                     </el-tab-pane>
                     <el-tab-pane
@@ -607,6 +449,7 @@
                       name="项目看板"
                       class="el-tab-pane-tree"
                     >
+                    <project-statistics></project-statistics>
                     </el-tab-pane>
                     <el-tab-pane
                       label="项目审核流程"
@@ -786,6 +629,7 @@
   import addPlanDialog from '@/views/project-manage/planManage/components/addOrEditDialog.vue';
   import planDetailDialog from '@/views/project-manage/planManage/components/detailDialog.vue';
   import taskDetailDialog from '@/views/project-manage/task-manage/components/detailDialog.vue';
+  import projectStatistics from '@/views/project-manage/project-statistics/index.vue';
   import planForm from '@/views/project-manage/planManage/components/plan-form.vue';
   import {
     planFinishAPI,
@@ -848,7 +692,7 @@
       planManageList,
       projectCalendar,
       projectInfoTable,
-      addOrEditStageDialog
+      addOrEditStageDialog,projectStatistics
     },
     data() {
       return {
@@ -930,32 +774,7 @@
         loadingInstance: null,
         treeId: null,
         dialogType: null,
-        // columnsLeft: [
-        //   /*  {
-        //     columnKey: 'index',
-        //     label: '序号',
-        //     type: 'index',
-        //     width: 55,
-        //     align: 'center',
-        //     showOverflowTooltip: true
-        //   }, */
-        //   {
-        //     prop: 'code',
-        //     label: '项目编码',
-        //     showOverflowTooltip: true,
-        //     minWidth: 160,
-        //     slot: 'code',
-        //     align: 'center'
-        //   },
-        //   {
-        //     prop: 'name',
-        //     label: '项目名称',
-        //     align: 'center',
-        //     showOverflowTooltip: true,
-        //     minWidth: 140
-        //   }
-        // ],
-        // leftTreeData: [],
+
         rowData: {},
         refreshPlan: true
       };
@@ -1465,11 +1284,11 @@
         this.treeLoading = false;
       },
       async handleNodeClick1(data){
-        if(data.type==''){
-
-        }
-        this.rowData=this.dialogForm = await projectsGetByIdDetailsAPI(data.id);
+        if(data.type=="projectType"){
+          this.rowData=this.dialogForm = await projectsGetByIdDetailsAPI(data.id);
         this.getTreeData()
+        }
+       
 
       },
       getIconClass(node, data) {

src/views/BOMmanage/components/addBOMDialog.vue

@@ -6,6 +6,8 @@
     :title="title"
     :close-on-click-modal="false"
     width="50%"
+    :append-to-body="true"
+
     :before-close="handleClose"
   >
     <el-form

src/views/project-manage/project-calendar/index.vue

@@ -28,10 +28,8 @@
         </el-form>
       </div>
       <div class="box-container-top-cell">
-        <el-card class="card-cell middle-cell">
-          <!--        <el-date-picker v-model="value1" type="date" placeholder="选择日期"> </el-date-picker>-->
+        <!-- <el-card class="card-cell middle-cell">
           <el-calendar >
-            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
             <template
               v-slot:dateCell="{date, data}">
               <p @click="aaa(date,data)" class="dateCellText" :class="data.isSelected ? 'is-selected' : ''">
@@ -39,7 +37,7 @@
               </p>
             </template>
           </el-calendar>
-        </el-card>
+        </el-card> -->
         <el-card class="card-cell middle-cell">
           <gantt ref="gantt"  v-show="showGantt" :ganttTasks="tableData"></gantt>
         </el-card>
@@ -203,7 +201,7 @@ export default {
       // await this.getDictList('task_type')
       const data = await projectsPageAPI({
         pageNum: page,
-        size: 9999,
+        size: 10,
         parentId: parent?.id ?? '0',
         ...where
       });
@@ -217,7 +215,7 @@ export default {
           ...item,
           level: 1,
           text: item.name, // 名称-gantt必填字段
-          start_date:ndayjs(item.planStartDate).format('YYYY-MM-DD'), // 开始时间-gantt必填字段
+          start_date:dayjs(item.planStartDate||new Date()).format('YYYY-MM-DD'), // 开始时间-gantt必填字段
           duration: 10, //工作时长-gantt必填字段
           executor: item.responsibleUserName
         }
@@ -227,7 +225,7 @@ export default {
     },
     /* 刷新表格 */
     reload() {
-      this.$refs.table.reload({...this.form, size: 1, pageNum: 9999});
+      this.$refs.table.reload({...this.form, size: 1, pageNum: 10});
     },
   }
 }
@@ -283,18 +281,19 @@ export default {
       flex: 1;
       width: 100%;
       .middle-cell {
+        flex: 1;
 
       }
 
-      .middle-cell:nth-child(1) {
-        flex: 0 0 20%;
-      }
+      // .middle-cell:nth-child(1) {
+      //   flex: 0 0 20%;
+      // }
 
-      .middle-cell:nth-child(2) {
-        flex: 0 0 79%;
+      // .middle-cell:nth-child(2) {
+      //   flex: 0 0 79%;
 
 
-      }
+      // }
 
 
     }

src/views/project-manage/project-initiation/components/addOrEditDialog.vue

@@ -5,6 +5,7 @@
     :visible.sync="addOrEditDialogFlag"
     :title="title"
     :close-on-click-modal="false"
+    :append-to-body="true"
     width="70%"
     :before-close="cancel">
     <headerTitle title="基础信息"></headerTitle>

src/views/project-manage/project-initiation/components/addOrEditStageDialog.vue

@@ -6,6 +6,8 @@
     :title="title"
     :close-on-click-modal="false"
     width="70%"
+    :append-to-body="true"
+
     :before-close="cancel">
 <!--    <headerTitle title="基础信息"></headerTitle>-->
 <!--    <project-form ref="projectForm" :dialog-type="dialogType" :dialogForm="dialogForm" :deptList="deptList"-->

src/views/project-manage/project-initiation/components/project-gantt.vue

@@ -67,7 +67,8 @@ export default {
                 <div class="gantt-span-${obj.level}" style="width:130px;text-overflow:ellipsis;overflow: hidden;">${obj.name}</div>
               `;
           },
-        }
+        },
+ 
       ];
       let daysStyle = function (date) {
         let todayDate = new Date().setHours(0, 0, 0, 0)

src/views/project-manage/project-statistics/data.js

@@ -0,0 +1,382 @@
+// 引入Day.js库
+const dayjs = require('dayjs');
+// 获取本月日期列表的函数
+function getDatesInMonth() {
+    let year = dayjs().year()
+    let month = dayjs().month()
+    const dates = [];
+    const startDate = dayjs(new Date(year, month, 1));
+    const endDate = dayjs(new Date(year, month + 1, 1)).subtract(1, 'day');
+    let currentDate = startDate;
+    while (currentDate.isBefore(endDate) || currentDate.isSame(endDate, 'day')) {
+        dates.push(currentDate.format('YYYY-MM-DD'));
+        currentDate = currentDate.add(1, 'day');
+    }
+    return dates;
+}
+export const columns = [
+
+    {
+        prop: 'name',
+        minWidth: '120',
+        label: '里程碑名称',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name',
+        minWidth: '120',
+        label: '计划进度',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name1',
+        minWidth: '120',
+        label: '实际进度',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'qualified',
+        label: '状态',
+        minWidth: '120',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'qualified',
+        label: '执行者',
+        minWidth: '120',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name12',
+        minWidth: '120',
+        label: '延期天数',
+        align: 'center',
+        showOverflowTooltip: true,
+    }
+
+];
+export const columns1 = [
+
+    {
+        prop: 'name',
+        minWidth: '120',
+        label: '任务名称',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name',
+        minWidth: '150',
+        label: '计划开始时间',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name1',
+        minWidth: '150',
+        label: '计划结束时间',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'qualified',
+        label: '计划进度',
+        minWidth: '120',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'qualified',
+        label: '实际进度',
+        minWidth: '120',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name12',
+        minWidth: '120',
+        label: '状态',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name12',
+        minWidth: '120',
+        label: '执行者',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name12',
+        minWidth: '120',
+        label: '延期天数',
+        align: 'center',
+        showOverflowTooltip: true,
+    }
+
+];
+export const columns2 = [
+
+    {
+        prop: 'name',
+        minWidth: '120',
+        label: '任务名称',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name',
+        minWidth: '150',
+        label: '计划开始时间',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name1',
+        minWidth: '150',
+        label: '计划结束时间',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'qualified',
+        label: '计划进度',
+        minWidth: '120',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'qualified',
+        label: '实际进度',
+        minWidth: '120',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name12',
+        minWidth: '120',
+        label: '状态',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name12',
+        minWidth: '120',
+        label: '执行者',
+        align: 'center',
+        showOverflowTooltip: true,
+    }
+
+];
+export const columns3 = [
+
+    {
+        prop: 'name',
+        minWidth: '120',
+        label: '名称',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name',
+        minWidth: '150',
+        label: '任务数量',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name1',
+        minWidth: '150',
+        label: '未完成任务数量',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'qualified',
+        label: '延期任务数量',
+        minWidth: '120',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    
+];
+export const lineOption = (data, itemStyle = {}) => {
+    return {
+        tooltip: {
+            formatter: (item) => {
+                return item.name + "：" + item.seriesName + " " + item.value
+            },
+            trigger: 'item'
+        },
+        legend: {
+            // bottom: '2%',
+            itemGap: window.innerHeight * 0.014,
+
+            textStyle: {
+                fontSize: window.innerHeight * 0.013,
+            }
+        },
+        grid: {
+            left: 40,
+            bottom: "13%"//也可设置left和right设置距离来控制图表的大小
+        },
+        color: ['#1890ff'],
+        xAxis: {
+            type: 'category',
+            data: ['10/2', '10/3', '10/4', '10/5', '10/6', '10/7', '10/8'],
+            axisLabel: {
+                fontSize: window.innerHeight * 0.012,
+            }
+
+        },
+        yAxis: [
+            {
+                type: 'value',
+                max: 100,
+                min: 0,
+                axisLabel: {
+                    show: true,
+                    formatter: "{value}%", //右侧Y轴文字显示
+
+                },
+                nameTextStyle: {
+                    align: 'center',
+                    color: "#333",
+                    fontSize: window.innerHeight * 0.012,
+                    padding: [0, 20, -3, 0]
+                },
+            },
+
+        ],
+        series: [
+            {
+                name: '过程控',
+                symbolSize: 10,
+                data: data[0],
+                type: 'line',
+
+                itemStyle: {
+                    // color: '#ffab08'
+                },
+
+            }, {
+                name: '产品控',
+                symbolSize: 10,
+                data: data[1],
+                type: 'line', 
+                itemStyle: {
+                    // color: '#ffab08'
+                },
+
+            }
+        ]
+    }
+}
+export const barOption = ( xData,series) => {
+    return {
+        tooltip: {
+            formatter: (item) => {
+                return item.name + "：" + item.seriesName + " " + item.value
+            },
+            trigger: 'item'
+        },
+        legend: {
+            // bottom: '2%',
+            itemGap: window.innerHeight * 0.014,
+
+            textStyle: {
+                fontSize: window.innerHeight * 0.013,
+            }
+        },
+        grid: {
+            left: 40,
+            right: 55,
+            bottom: "13%"//也可设置left和right设置距离来控制图表的大小
+        },
+        color: ['#1890ff'],
+        xAxis: {
+            type: 'category',
+            data:xData ,
+            axisLabel: {
+                fontSize: window.innerHeight * 0.012,
+
+            }
+
+        },
+        yAxis: [
+            {
+                type: 'value',
+                // name: '(个)',
+                nameTextStyle: {
+                    align: 'center',
+                    color: "#333",
+                    fontSize: window.innerHeight * 0.012,
+                    padding: [0, 20, -3, 0]
+                },
+            },
+            {
+                type: 'value',
+                max: 100,
+                min: 0,
+                axisLabel: {
+                    show: true,
+                    formatter: "{value}%", //右侧Y轴文字显示
+
+                }
+            }
+        ],
+        series 
+    }
+}
+
+export const pieOption = (data) => {
+    return {
+        color: ['#fd625e','#458ef7'],
+        tooltip: {
+            // formatter: '{b}：{c}' + '%',
+            trigger: 'item'
+        },
+        // legend: {
+        //     orient: 'horizontal',
+        //     left: 'right',
+        //     right: '15%',
+        //     bottom: '5%',
+        //     itemGap: window.innerHeight * 0.018,
+        //     textStyle: {
+        //         fontSize: window.innerHeight * 0.014,
+        //     }
+        // },
+        series: [
+            {
+                center: ['50%', '50%'],
+                label: {
+                    position: 'outside',
+                    show: true,
+                    formatter: (item) => {
+                        return item.name + "：" + item.value+'/'+item.percent +'%'
+                    },
+                    fontSize: window.innerHeight * 0.014,
+                    // color:"#fff"
+                },
+                labelLine: {
+                    show: true,
+
+                },
+                type: 'pie',
+                radius: '70%',
+                itemStyle: {
+                    borderWidth: 0,
+                    shadowBlur: 10,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                },
+                data
+            }
+        ]
+    }
+}
+

src/views/project-manage/project-statistics/index.vue

@@ -0,0 +1,369 @@
+<template>
+  <div class="ele-body">
+    <el-row :gutter="5">
+      <el-col :span="8" style="height: 300px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>概览</span>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="7" style="height: 300px">
+        <el-card class="box-card" style="height: 100%">
+          <div slot="header" class="clearfix">
+            <span>任务总体进展</span>
+          </div>
+          <v-chart ref="pieRef" style="height: 100%" :option="pieOption" />
+        </el-card>
+      </el-col>
+
+      <el-col :span="9" style="height: 300px">
+        <el-card class="box-card" style="height: 100%">
+          <div slot="header" class="clearfix">
+            <span>里程碑任务进展</span>
+          </div>
+          <ele-pro-table
+            ref="table"
+            :columns="columns"
+            :datasource="datasource"
+            :needPage="false"
+            :toolbar="false"
+          >
+          </ele-pro-table>
+        </el-card>
+      </el-col>
+      <el-col :span="12" style="height: 340px; margin-top: 5px">
+        <el-card class="box-card" style="height: 100%">
+          <div slot="header" class="clearfix">
+            <span>本周任务</span>
+          </div>
+          <ele-pro-table
+            ref="table"
+            :columns="columns1"
+            :datasource="datasource"
+            :needPage="false"
+            :toolbar="false"
+          >
+          </ele-pro-table>
+        </el-card>
+      </el-col>
+      <el-col :span="12" style="height: 340px; margin-top: 5px">
+        <el-card class="box-card" style="height: 100%">
+          <div slot="header" class="clearfix">
+            <span>下周任务</span>
+          </div>
+          <ele-pro-table
+            ref="table"
+            :columns="columns2"
+            :datasource="datasource"
+            :needPage="false"
+            :toolbar="false"
+          >
+          </ele-pro-table>
+        </el-card>
+      </el-col>
+      <el-col :span="12" style="height: 340px; margin-top: 5px">
+        <el-card class="box-card" style="height: 100%">
+          <div slot="header" class="clearfix">
+            <span>团队成员工时</span>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" style="height: 340px; margin-top: 5px">
+        <el-card class="box-card" style="height: 100%">
+          <div slot="header" class="clearfix">
+            <span>团队成员执行情况</span>
+          </div>
+          <ele-pro-table
+            ref="table"
+            :columns="columns3"
+            :datasource="datasource"
+            :needPage="false"
+            :toolbar="false"
+          >
+          </ele-pro-table>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+  // import {
+  //   queryHomePage,
+  //   queryFactory,
+  //   queryTeam,
+  //   queryProductionLine
+  // } from '@/api/qms';
+  import {
+    pieOption,
+    barOption,
+    lineOption,
+    columns,
+    columns1,
+    columns2,
+    columns3
+  } from './data';
+  import { use } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { BarChart, PieChart, LineChart } from 'echarts/charts';
+  import {
+    GridComponent,
+    TooltipComponent,
+    LegendComponent
+  } from 'echarts/components';
+
+  import VChart from 'vue-echarts';
+  import { echartsMixin } from '@/utils/echarts-mixin';
+  // 按需加载 echarts
+  use([
+    CanvasRenderer,
+    BarChart,
+    PieChart,
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    LineChart
+  ]);
+  export default {
+    mixins: [echartsMixin(['pieRef', 'barRef1', 'lineRef', 'barRef3'])],
+
+    components: { VChart },
+    data() {
+      return {
+        columns,
+        columns1,
+        columns2,
+        arr: [
+          {
+            name: '在制工单数',
+            num: '188',
+            // imgUrl: require('../../assets/Group1.png'),
+            unit: '个'
+          },
+          {
+            name: '在制工单计划生产数',
+            num: '188',
+            // imgUrl: require('../../assets/Group2.png'),
+            unit: 'pcs'
+          },
+          {
+            name: '在制工单已入库数',
+            num: '188',
+            // imgUrl: require('../../assets/Group3.png'),
+            unit: 'pcs'
+          },
+          {
+            name: '在制工单延期生产数',
+            num: '188',
+            // imgUrl: require('../../assets/Group4.png'),
+            unit: 'pcs',
+            color: '#f97876'
+          }
+        ],
+
+        pieOption: {},
+        barOption: {},
+        barOption1: {},
+        lineOption: {},
+        form: {
+          finishTime: '',
+          timeType: '1'
+        }
+      };
+    },
+
+    created() {},
+    mounted() {
+      this.pieOption = pieOption([
+        { value: 60, name: '延期' },
+        { value: 60, name: '正常' }
+      ]);
+      this.barOption = barOption(
+        [
+          '一月',
+          '二月',
+          '三月',
+          '四月',
+          '五月',
+          '六月',
+          '七月',
+          '八月',
+          '九月',
+          '十月',
+          '十一月',
+          '十二月'
+        ],
+        [
+          {
+            name: '任务量',
+            barWidth: '25%',
+            data: [50, 78, 88, 76, 75, 91, 50, 78, 88, 76, 75, 91],
+            type: 'bar',
+            yAxisIndex: 0, // 使用第一个Y轴
+            itemStyle: {
+              color: '#f9cd5d'
+            }
+          },
+          {
+            name: '完成量',
+            barWidth: '25%',
+            data: [50, 78, 88, 76, 75, 91, 50, 78, 88, 76, 75, 91],
+            type: 'bar',
+            yAxisIndex: 0, // 使用第一个Y轴
+            itemStyle: {
+              color: '#5893eb'
+            }
+          },
+          {
+            name: '达成率',
+            symbolSize: 10,
+            data: [50, 78, 88, 76, 75, 91, 50, 78, 88, 76, 75, 91],
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 1, // 使用第一个Y轴
+            itemStyle: {
+              color: '#59b9fe'
+            }
+          }
+        ]
+      );
+      this.barOption1 = barOption(
+        [
+          '一月',
+          '二月',
+          '三月',
+          '四月',
+          '五月',
+          '六月',
+          '七月',
+          '八月',
+          '九月',
+          '十月',
+          '十一月',
+          '十二月'
+        ],
+        [
+          {
+            name: '应完成订单',
+            barWidth: '25%',
+            data: [50, 78, 88, 76, 75, 91, 78, 87, 81, 67, 95, 73],
+            type: 'bar',
+            yAxisIndex: 0 // 使用第一个Y轴
+          },
+          {
+            name: '实际完成订单',
+            barWidth: '25%',
+            data: [50, 78, 88, 76, 75, 91, 78, 87, 81, 67, 95, 73],
+            type: 'bar',
+            yAxisIndex: 0 // 使用第一个Y轴
+          },
+          {
+            name: '准时交付率',
+            symbolSize: 10,
+            data: [50, 78, 88, 76, 75, 91, 78, 87, 81, 67, 95, 73],
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 1, // 使用第一个Y轴
+            itemStyle: {
+              color: '#ff8856'
+            }
+          }
+        ]
+      );
+      this.lineOption = lineOption([
+        [30, 58, 68, 36, 55, 41, 73],
+        [55, 81, 90, 80, 78, 95, 80]
+      ]);
+      setTimeout(() => {
+        this.$refs.pieRef.resize();
+        // this.$refs.barRef1.resize();
+        // this.$refs.lineRef.resize();
+        // this.$refs.barRef3.resize();
+      }, 300);
+    },
+    methods: {
+      datasource({ page, where, limit }) {
+        return [];
+        return getList({
+          ...where,
+          pageNum: page,
+          size: limit
+        });
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .clearfix {
+    font-size: 0.7vw;
+
+    > span {
+      font-weight: bold;
+    }
+    :deep(.el-radio-button__inner) {
+      font-size: 0.7vw;
+    }
+  }
+  .ele-body {
+    height: calc(100vh - 136px);
+    overflow: auto;
+    
+    > .el-row {
+      height: 100%;
+    }
+    .el-card {
+      height: 100%;
+      :deep(.el-card__body) {
+        padding: 0.3vw;
+      }
+      :deep(.el-card__header) {
+        padding: 0.6vw;
+      }
+      :deep(.el-card__body) {
+        height: calc(100% - 2.3vw);
+      }
+      :deep(.ele-pro-table) {
+        height: 99%;
+      }
+      :deep(.el-table) {
+        // font-size: 0.65vw;
+      }
+    };
+  }
+
+  .item {
+    width: 100%;
+    height: 100%;
+    // background: url(../../assets/main_item.png);
+    background-size: cover;
+    border-radius: 6px;
+    padding: 1vw;
+    color: #333;
+    > .header {
+      font-size: 0.85vw;
+      font-weight: 600;
+      width: 100%;
+      padding-bottom: 0.7vw;
+      border-bottom: 1px solid #f3f3f3;
+      text-align: center;
+      color: #3a92edd1;
+    }
+    > .content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      font-size: 0.85vw;
+      font-weight: 500;
+      height: calc(100% - 1.5vw);
+      p {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        height: 33%;
+      }
+    }
+  }
+</style>

src/views/project-manage/task-manage/components/addOrEditDialog.vue

@@ -4,6 +4,7 @@
     :centered="true"
     :visible.sync="addOrEditDialogFlag"
     :title="title"
+    append-to-body
     :close-on-click-modal="false"
     width="70%"
     :before-close="cancel">

src/views/project-manage/task-manage/components/detailDialog.vue

@@ -6,7 +6,7 @@
     :title="title"
     :close-on-click-modal="false"
     append-to-body
-    modal-append-to-body
+
     width="70%"
     :before-close="cancel"
   >