对接

shj

2022-08-19 444aeabb015bb0a101b80233e65939b35e8e622c

对接

 src/api/goalManagement/index.ts

@@ -233,6 +233,14 @@
                method: "get",
            })
        },
        //安全目标考核 列表
        gettargetExamineList: (params: object) => {
            return request({
                url: "/targetExamine/page/list",
                method: "post",
                data: params
            })
        },
        // 安全目标考核 查询单条数据
        gettargetExamineDetail: (params: any) => {
            return request({
@@ -394,5 +402,13 @@
                data:params
            })
        },
        // 目标 统计
        gettargetstatistics(params:any){
            return request({
                url:`/targetMng/statistics?targetType=${params}`,
                method:"get",
                // data:params
            })
        },
    }
}

 src/views/goalManagement/safetyAssessment/component/Dailog.vue

@@ -1,13 +1,15 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" title="目标考核" width="70%" draggable @close="closeDialog">
    <el-dialog v-model="dialogVisible" :before-close="resetForm" :fullscreen="full" title="目标分解" width="60%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="安全目标指标" size="default">
                        <el-input v-model="form.qName" :disabled="disabled">
                            <template #append> <el-button :icon="Search" @click="daiInpt" /> </template
                        ></el-input>
                            <template #append>
                                <el-button :icon="Search" @click="daiInpt" />
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
@@ -29,167 +31,187 @@
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="目标指标分解" name="1">
        <el-button type="primary" size="default" @click="daiAdd('新增')" :disabled="disabled">新增</el-button>
      </el-tab-pane>
                <!-- <el-button type="primary" size="default" @click="daiAdd('新增')" :disabled="disabled">新增</el-button> -->
            </el-tab-pane>
        </el-tabs>
        <el-table :data="formUp.examineList" style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="70" />
            <el-table-column align="center" prop="dutyDepartmentName" label="责任部门" />
            <el-table-column align="center" prop="examineValue" label="考核指标" />
            <el-table-column align="center" prop="makerDepartmentName" label="制定部门" />
            <el-table-column align="center" prop="makeDate" label="制定日期" />
            <el-table-column align="center" prop="uploadValue" label="上报值" />
            <el-table-column align="center" prop="uploadDate" label="上报时间" />
            <el-table-column align="center" prop="examineResult" label="考核结果" >
                <template #default="scope">
                    <div v-if="scope.row.examineResult==1">
                        合格
                    </div>
                    <div v-if="scope.row.examineResult==2">
                        不合格
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="examinePersonName" label="考核人" />
            <el-table-column align="center" prop="examineDate" label="考核时间" />
        <el-table :data="formUp.targetDivideDetailList" style="width: 100%">
            <el-table-column align="center" property="dutyDepartmentName" label="责任部门" width="180" />
            <el-table-column align="center" property="value" label="考核指标" width="180" />
            <el-table-column align="center" property="makerDepartmentName" label="制定人部门" />
            <el-table-column align="center" property="makeDate" :formatter="timeDate" label="制定日期" />
            <el-table-column align="center" property="commitPersonName" label="上报人" />
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <el-button link type="primary" @click="daiAdd('查看', scope.row)">查看</el-button>
                    <el-button link type="primary" @click="daiAdd('修改', scope.row)">修改</el-button>
                    <el-button link type="primary" @click="Delete(scope.row)">删除</el-button>
                    <el-button link :disabled="disabled" type="primary" @click="daiAdd('修改', scope.row)">考核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeDialog" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
                <el-button @click="resetForm" size="default">关闭</el-button>
                <el-button type="primary" v-if="disabled == false" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <DailogAdd ref="Show" @onAdd="add"></DailogAdd>
    <DailogSearch ref="Shows" @backNum="onNumber"></DailogSearch>
  <DailogAdd ref="Show" @onAdd="add"></DailogAdd>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { timeDate } from '/@/assets/index.ts';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogAdd from './DailogAdd.vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus';
import DailogSearch from '../../../../components/DailogSearch/DailogSearch.vue';
import DailogAdd from './DailogAdd.vue';
import { goalManagementApi } from '/@/api/goalManagement';
import {deepClone} from "/@/utils/other";
import { emit } from 'process';
import { deepClone } from '/@/utils/other';
export default defineComponent({
    components: { DailogSearch ,DailogAdd},
    setup() {
    components: { DailogAdd, DailogSearch },
    setup(props, { emit }) {
        const dialogVisible = ref<boolean>(false);
        const form = ref({});
        const form = ref({
            qName: '',
            indexNum: '',
            year: '',
            value: '',
            targetDivideDetailList: [],
        });
        const targetType = ref();
        const disabled = ref(false);
        const titles = ref();
        const numId=ref()
        const openDailog = (title: string, type: any, id: number) => {
            dialogVisible.value = true;
            titles.value = title;
            targetType.value = type;

            disabled.value = title == '查看' ? true : false;
            if (title == '查看' || title == '修改') {
                goalManagementApi()
                    .gettargetExamineDetail(id)
                    .getTargetMngDetail(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            form.value = res.data.data;
                            formUp.examineList = res.data.data.examineList
                            formUp.targetDivideDetailList = form.value.targetDivideDetailList;
                            for(let i=0;i<formUp.targetDivideDetailList.length;i++){
                                formUp.targetDivideDetailList[i].makeDate=timeC(formUp.targetDivideDetailList[i].makeDate)
                            }
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
            }
            numId.value=id
        };
        const closeDialog = () => {
            form.value = {}
            formUp.examineList = []
            dialogVisible.value = false
        const timeC = (timestamp: any) => {
            let a = new Date(timestamp).getTime();
            const date = new Date(a);
            const Y = date.getFullYear() + '-';
            const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '  ';
            const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            const s = date.getSeconds(); // 秒
            const dateString = Y + M + D + h + m +`:${s}`;
            // console.log('dateString', dateString); // > dateString 2021-07-06 14:23
            return dateString;
        };
        const submitForm = () => {
            // formUp.delTargetDivideDetails = arr.value.toString();
            // formUp.targetId = form.value.id;
            dialogVisible.value = false;
            for(let i=0;i<formUp.examineList.length;i++){
                delete formUp.examineList[i].dutyDepartmentName
                delete formUp.examineList[i].makerDepartmentName
            }
            formUp.id = form.value.id
            formUp.delIds = arr.value.toString();
            goalManagementApi()
                    .gettargetExamineAddOrUpdate(formUp)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ElMessage({
                                message: res.data.msg,
                                type: 'success',
                            });
                            emit('addList');
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
            form.value = {
                qName: '',
                indexNum: '',
                year: '',
                value: '',
                examineList: [],
            };
            tableData.value = [];
            formUp.targetId = '';
            formUp.delTargetDivideDetails = '';
            formUp.examineList = [];
        };
        const arr = ref([]);
        // 删除
        const Delete = (data: any) => {
            formUp.examineList.splice(form.value.examineList.indexOf(data), 1);
            arr.value.push(data.id);
        };
        const onNumber = (e: object) => {
            form.value = e;
        const onNumber = (val: object) => {
            form.value = val;
        };
        // 导航
        const activeName = ref('1');
        // 表格
        const tableData = ref([]);
        // 新增弹窗
        const index = ref<any>();
        const Show = ref();
        const daiAdd = (title: string, data: any) => {
            index.value = formUp.targetDivideDetailList.indexOf(data);
            Show.value.openDailog(title, data);
        };
        const formUp = reactive({
            targetId: '', //关联的目标指标/外键
            delTargetDivideDetails: '', //要删除的目标指标分解ID,多个用逗号隔开
            targetDivideDetailList: [], //目标指标分解列表
        });

        const add = (val: any) => {
                goalManagementApi()
                    .getTargetMngDetail(numId.value)
                    .then((res) => {
                        if (res.data.code == 200) {
                            form.value = res.data.data;
                            formUp.targetDivideDetailList = form.value.targetDivideDetailList;
                            for(let i=0;i<formUp.targetDivideDetailList.length;i++){
                                formUp.targetDivideDetailList[i].makeDate=timeC(formUp.targetDivideDetailList[i].makeDate)
                            }
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });

            // let obj=JSON.parse(JSON.stringify(form.value))
        };
        // 新增
        const submitForm = () => {
            formUp.delTargetDivideDetails = arr.value.toString();
            formUp.targetId = form.value.id;
            dialogVisible.value = false;
            for(let i=0;i<formUp.targetDivideDetailList.length;i++){
                delete formUp.targetDivideDetailList[i].dutyDepartmentName
                delete formUp.targetDivideDetailList[i].makerDepartmentName
            }
            goalManagementApi()
                .gettargetDivideDetail(formUp)
                .then((res) => {
                    if (res.data.code == 200) {
                        ElMessage({
                            message: res.data.msg,
                            type: 'success',
                        });
                        emit('addList');
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
            form.value = {
                qName: '',
                indexNum: '',
                year: '',
                value: '',
                targetDivideDetailList: [],
            };
            tableData.value = [];
            formUp.targetId = '';
            formUp.delTargetDivideDetails = '';
            formUp.targetDivideDetailList = [];
        };
        const arr = ref([]);
        // 安全目标指标弹窗
        const Shows = ref();
        const daiInpt = () => {
            Shows.value.openDailog(targetType.value);
        };

        // 新增弹窗
        const index=ref<any>()
        const Show = ref();
        const daiAdd = (title: string, data: any) => {
          index.value = formUp.examineList.indexOf(data);
          Show.value.openDailog(title, data);
        // 关闭
        const resetForm = () => {
            dialogVisible.value = false;
            form.value = {
                qName: '',
                indexNum: '',
                year: '',
                value: '',
                targetDivideDetailList: [],
            };
            tableData.value = [];
            formUp.targetId = '';
            formUp.delTargetDivideDetails = '';
            formUp.targetDivideDetailList = [];
        };
        const formUp = reactive({
          targetId: '', //关联的目标指标/外键
          delTargetDivideDetails: '', //要删除的目标指标分解ID,多个用逗号隔开
          examineList: [], //目标指标分解列表
        });

        const add = (val: any) => {
          const item = deepClone(val)
          if(index.value==-1){

            formUp.examineList.push(item);
          }else{
            formUp.examineList[index.value] = item;
          }
            console.log(formUp)
          // let obj=JSON.parse(JSON.stringify(form.value))
        };

        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
@@ -199,30 +221,38 @@
                full.value = false;
            }
        };
        // 时间格式处理
        // const timeDate = (data: any) => {
        //     let result = new Date(data).getTime();
        //     return result;
        // };
        return {
            timeC,
            index,
            timeDate,
            arr,
            form,
            dialogVisible,
            openDailog,
            targetType,
            onNumber,
            disabled,
            titles,
            activeName,
            tableData,
            Show,
            daiAdd,
            Shows,
            daiInpt,
            Search,
            full,
            toggleFullscreen,
            FullScreen,
            daiAdd,
            index,
            Show,
            formUp,
            add,
            closeDialog,
            onNumber,
            targetType,
            disabled,
            resetForm,
            titles,
            add,
            formUp,
            submitForm,
            Delete
            numId
        };
    },
});
@@ -231,4 +261,4 @@
.el-row {
    padding: 0 0 20px 0;
}
</style>
</style>

 src/views/goalManagement/safetyAssessment/component/DailogAdd.vue

@@ -2,7 +2,7 @@
    <el-dialog v-model="dialogVisible" :fullscreen="full" :title="titles" width="50%" draggable @close="resetForm(ruleFormRef)">
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" :disabled="disabled" label-width="120px" ref="ruleFormRef" :rules="rules">
            <el-row>
            <!-- <el-row>
                <el-col :span="11">
                    <el-form-item label="责任部门" prop="dutyDepartmentId" size="default">
                        <el-tree-select v-model="form.dutyDepartmentId" check-strictly="true" @current-change="dutyName" :data="data" class="w100" :props="propse" placeholder="请选择" />
@@ -31,7 +31,7 @@
                <el-col :span="11">
                    <el-form-item label="上报值" prop="uploadValue" size="default">
                        <el-input v-model="form.uploadValue">
<!--                            <template #append> <el-button :icon="Search" @click="openUser" /> </template>-->
                            <template #append> <el-button :icon="Search" @click="openUser" /> </template>
            </el-input>
                    </el-form-item>
                </el-col>
@@ -40,36 +40,35 @@
            <el-date-picker v-model="form.uploadDate" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择" style="width: 100%" />
          </el-form-item>
        </el-col>
            </el-row> -->
            <el-row>
                <el-col :span="11">
                    <el-form-item label="考核结果" prop="examineResult" size="default">
                        <el-select v-model="form.examineResult" placeholder="请选择" style="width: 100%">
                            <el-option label="合格" :value="1" />
                            <el-option label="不合格" :value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="考核人" prop="examinePersonName" size="default">
                        <el-input v-model="form.examinePersonName">
                            <template #append> <el-button :icon="Search" @click="openUser" /> </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="考核结果" prop="examineResult" size="default">
              <el-select v-model="form.examineResult" placeholder="请选择" style="width: 100%">
                  <el-option label="合格" :value="1" />
                  <el-option label="不合格" :value="2" />
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="2">
          <el-form-item label="考核人" prop="examinePersonName" size="default">
            <el-input v-model="form.examinePersonName">
              <template #append> <el-button :icon="Search" @click="openUser" /> </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
            <!-- <el-row>
        <el-col :span="11">
          <el-form-item label="考核时间" prop="examineDate" size="default">
            <el-date-picker v-model="form.examineDate" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="2"></el-col>
      </el-row>
      </el-row> -->
        </el-form>
        <template #footer>
            <span class="dialog-footer">
				
                <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)" size="default">确定</el-button>
            </span>
@@ -87,38 +86,34 @@
export default defineComponent({
    components: { DailogSearchUser },
    setup(props, { emit }) {
        const ruleFormRef = ref<FormInstance>()
        const ruleFormRef = ref<FormInstance>();
        const form = ref({
            "dutyDepartmentId": '', ////责任部门id/外键
            "examineDate": '', ////考核时间
            "examinePersonId": '', ////考核人ID/外键
            "examineResult": '', ////考核结果 1:合格 2：不合格
            "examineValue": '', ////考核指标
            "makeDate": '', ////制定日期
            "makerDepartmentId": '', ////制定部门/外键
            "uploadDate": '', ////上报时间
            "uploadValue": "", ////上报值
            targetDivideDetailId: "", //关联的目标分解/外键
            examinePersonId: "",
            examinePersonName: '',
            examineResult: "", //考核结果 1:合格 2：不合格
            id: "", //目标指标ID
        });
        //部门
        const department = () => {
            goalManagementApi()
                .getTreedepartment()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        const propse = {
            label: 'depName',
            children: 'children',
            value: 'depId',
        };
        onMounted(() => {
            department();
        });
        // const department = () => {
        //     goalManagementApi()
        //         .getTreedepartment()
        //         .then((res) => {
        //             if (res.data.code == 200) {
        //                 data.value = res.data.data;
        //             } else {
        //                 ElMessage.error(res.data.msg);
        //             }
        //         });
        // };
        // const propse = {
        //     label: 'depName',
        //     children: 'children',
        //     value: 'depId',
        // };
        // onMounted(() => {
        //     department();
        // });
        const disabled = ref(false);
        // 开启弹窗
        const titles = ref();
@@ -128,9 +123,19 @@
            if (title == '查看') {
                disabled.value = true;
                form.value = data;
                // form.value.id = data.targetId;
                form.value.targetDivideDetailId=data.id
                form.value.examinePersonName = data.examinePersonName;
                form.value.examinePersonId=data.examinePersonId
                form.value.examineResult=data.examineResult
            } else if (title == '修改') {
                console.log(data)
                disabled.value = false;
                form.value = data;
                // form.value.id = data.targetId;
                form.value.targetDivideDetailId=data.id
                form.value.examinePersonName = data.examinePersonName;
                form.value.examinePersonId=data.examinePersonId
                form.value.examineResult=data.examineResult
            } else {
                disabled.value = false;
            }
@@ -142,74 +147,87 @@
            Show.value.openDailog();
        };
        const rules = reactive<FormRules>({
            dutyDepartmentId: [
                {
                    required: true,
                    message: '责任部门不能为空',
                    trigger: 'blur',
                },
            ],
            makerDepartmentId: [
                {
                    required: true,
                    message: '制定人部门不能为空',
                    trigger: 'blur',
                },
            ],
            commitPersonId: [
                {
                    required: true,
                    message: '上报人不能为空',
                    trigger: 'blur',
                },
            ],
            examineValue: [
                {
                    required: true,
                    message: '考核指标值不能为空',
                    trigger: 'blur',
                },
                {
                    type: 'number',
                    message: '考核指标值只能为数字类型',
                    trigger: 'blur',
                },
            ],
            makeDate: [
                {
                    required: true,
                    message: '制定日期不能为空',
                    trigger: 'blur',
                },
            ],
            commitPersonName: [],
            // dutyDepartmentId: [
            //     {
            //         required: true,
            //         message: '责任部门不能为空',
            //         trigger: 'blur',
            //     },
            // ],
            // makerDepartmentId: [
            //     {
            //         required: true,
            //         message: '制定人部门不能为空',
            //         trigger: 'blur',
            //     },
            // ],
            // commitPersonId: [
            //     {
            //         required: true,
            //         message: '上报人不能为空',
            //         trigger: 'blur',
            //     },
            // ],
            // examineValue: [
            //     {
            //         required: true,
            //         message: '考核指标值不能为空',
            //         trigger: 'blur',
            //     },
            //     {
            //         type: 'number',
            //         message: '考核指标值只能为数字类型',
            //         trigger: 'blur',
            //     },
            // ],
            // makeDate: [
            //     {
            //         required: true,
            //         message: '制定日期不能为空',
            //         trigger: 'blur',
            //     },
            // ],
            examinePersonName: [],
            examineResult:[]

        });
        const dutyName=(data:any)=>{
            form.value.dutyDepartmentName=data.depName
        }
        const makerDepartmentName=(data:any)=>{
            form.value.makerDepartmentName=data.depName
        }
        // const dutyName = (data: any) => {
        //     form.value.dutyDepartmentName = data.depName;
        // };
        // const makerDepartmentName = (data: any) => {
        //     form.value.makerDepartmentName = data.depName;
        // };

        const submitForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            await formEl.validate((valid, fields) => {
                if (valid) {
                    emit('onAdd', form.value);
                    console.log(form.value)
                    dialogVisible.value = false;
                    goalManagementApi().gettargetExamineAddOrUpdate(form.value).then(res=>{
                        if(res.data.code==200){
                            ElMessage({
                            message: res.data.msg,
                            type: 'success',
                        });
                        }else{
                                ElMessage.error(res.data.msg);
                        }
                    })
                    // handleClose(formEl)
                } else {
                    console.log('error submit!', fields);
                }
            });
            emit('onAdd');
        };

        const resetForm = (formEl: FormInstance | undefined) => {
            // console.log(formEl);
            if (!formEl) return
            formEl.resetFields();
            if (!formEl) return;
            // formEl.resetFields();
            dialogVisible.value = false;
            form.value={}
            form.value = {};
        };
        // const handleClose = (formEl: any) => {
        //     formEl.resetFields();
@@ -223,9 +241,9 @@
                full.value = false;
            }
        };
        const data = ref();
        // const data = ref();
        const onUser = (e: any) => {
            console.log(e)
            console.log(e);
            form.value.examinePersonId = e.uid;
            form.value.examinePersonName = e.realName;
        };
@@ -234,8 +252,8 @@
            titles,
            // handleClose,
            form,
            propse,
            department,
            // propse,
            // department,
            dialogVisible,
            openDailog,
            Show,
@@ -244,14 +262,14 @@
            full,
            toggleFullscreen,
            FullScreen,
            data,
            // data,
            onUser,
            ruleFormRef,
            rules,
            submitForm,
            resetForm,
            dutyName,
            makerDepartmentName
            // dutyName,
            // makerDepartmentName,
        };
    },
});

 src/views/goalManagement/safetyAssessment/index.vue

@@ -21,16 +21,39 @@
            </el-row>
        </el-form>
        <div class="minCenter">
            <el-tabs v-model="ruleForm.searchParams.targetType" class="demo-tabs" @tab-click="handleClick">
            <div class="btns">
                <div>
                    <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button>
                    <!-- <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button> -->
                </div>
                <div>
                    <!-- <el-button size="default" :icon="Refresh"></el-button> -->
                </div>
            </div>
            <el-tab-pane label="目标定制(年)" name="1"> </el-tab-pane>
                <el-tab-pane label="目标定制(月)" name="2"></el-tab-pane>
                <el-tab-pane label="目标定制(半年)" name="3"></el-tab-pane>
                <el-tab-pane label="目标定制(季度)" name="4"></el-tab-pane>
            </el-tabs>
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
                <el-table-column label="序号" align="center" type="index" width="70" />
                <el-table-column type="expand">
                    <template #default="scope">
                        <div class="tableC">
                            <el-tabs v-model="activeNames">
                                <el-tab-pane label="目标指标分解" name="1">
                                    <el-table :data="scope.row.targetDivideDetailList" style="width: 100%">
                                        <el-table-column align="center" prop="dutyDepartmentName" label="责任部门" />
                                        <el-table-column align="center" prop="value" label="考核指标" />
                                        <el-table-column align="center" prop="makerDepartmentName" label="制定人部门" />
                                        <el-table-column align="center" prop="makeDate" :formatter="timeDate" label="制定日期" />
                                        <el-table-column align="center" prop="commitPersonName" label="上报人" />
                                    </el-table>
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="安全目标指标" align="center" property="qName" sortable />
                <el-table-column property="indexNum" align="center" label="考核指标编号" sortable />
                <el-table-column property="year" label="年度" align="center" sortable show-overflow-tooltip />
@@ -38,7 +61,7 @@
                <el-table-column label="操作" align="center" width="300" sortable show-overflow-tooltip>
                    <template #default="scope">
                        <el-button link type="primary" size="default" :icon="View" @click="openD('查看', scope.row.id)">查看</el-button>
                        <el-button link type="primary" size="default" :icon="View" @click="openD('修改', scope.row.id)">修改</el-button>
                        <el-button link type="primary" size="default" :icon="View" @click="openD('修改', scope.row.id)">考核</el-button>
                        <!--<el-button link type="primary" size="default" :icon="Delete" @click="onDelete(scope.row.id)">删除</el-button>-->
                    </template>
                </el-table-column>
@@ -59,6 +82,7 @@
    </div>
</template>
<script lang="ts">
import { timeDate } from '/@/assets/index.ts';
import Dailog from './component/Dailog.vue';
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
@@ -76,7 +100,7 @@
                qName: '', ////安全目标指标
                indexNum: '', ////目标指标编号
                targetType: '1', ////指标类型 1:年指标 2:月指标
                divideStatus: '', ////分解状态 1:已分解 2:未分解
                divideStatus: 1, ////分解状态 1:已分解 2:未分解
            },
        });
        // 重置
@@ -86,7 +110,7 @@
        };
        const listApi = () => {
            goalManagementApi()
                .getTargetMngList(ruleForm)
                .gettargetExamineList(ruleForm)
                .then((res) => {
                    if (res.data.code == 200) {
                        tableData.value = res.data.data;
@@ -159,10 +183,12 @@
        // 弹窗
        const openAdd = ref();
        const openD = (title: String, id: number) => {
            openAdd.value.openDailog(title, ruleForm.searchParams.targetType, id);
            openAdd.value.openDailog(title, ruleForm.searchParams.targetType,id);
        };

       const activeNames=ref("1")
        return {
            timeDate,
            activeNames,
            listApi,
            ruleForm,
            resetForm,
@@ -209,4 +235,7 @@
    display: flex;
    justify-content: right;
}
.tableC {
    margin: 0 10%;
}
</style>

 src/views/goalManagement/targetDecompositionHalfYear/index.vue

@@ -41,7 +41,7 @@
                                        <el-table-column align="center" prop="dutyDepartmentName" label="责任部门" />
                                        <el-table-column align="center" prop="value" label="考核指标" />
                                        <el-table-column align="center" prop="makerDepartmentName" label="制定人部门" />
                                        <el-table-column align="center" prop="makeDate" label="制定日期" />
                                        <el-table-column align="center" prop="makeDate" :formatter="timeDate" label="制定日期" />
                                        <el-table-column align="center" prop="commitPersonName" label="上报人" />
                                    </el-table>
                                </el-tab-pane>
@@ -77,6 +77,7 @@
    </div>
</template>
<script lang="ts">
import { timeDate } from '/@/assets/index.ts';
import search from '../targetSettings/component/search.vue';
import Dailog from '../targetDecompositionYear/component/Dailog.vue';
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
@@ -227,6 +228,7 @@
            listApi()
        }
        return {
            timeDate,
            add,
            listApi,
            resetForm,

 src/views/goalManagement/targetDecompositionMonth/index.vue

@@ -41,7 +41,7 @@
                                        <el-table-column align="center" prop="dutyDepartmentName" label="责任部门" />
                                        <el-table-column align="center" prop="value" label="考核指标" />
                                        <el-table-column align="center" prop="makerDepartmentName" label="制定人部门" />
                                        <el-table-column align="center" prop="makeDate" label="制定日期" />
                                        <el-table-column align="center" prop="makeDate" :formatter="timeDate" label="制定日期" />
                                        <el-table-column align="center" prop="commitPersonName" label="上报人" />
                                    </el-table>
                                </el-tab-pane>
@@ -77,6 +77,7 @@
    </div>
</template>
<script lang="ts">
import { timeDate } from '/@/assets/index.ts';
import search from '../targetSettings/component/search.vue';
import Dailog from '../targetDecompositionYear/component/Dailog.vue';
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
@@ -227,6 +228,7 @@
            listApi()
        }
        return {
            timeDate,
            add,
            listApi,
            resetForm,

 src/views/goalManagement/targetDecompositionQuarter/index.vue

@@ -41,7 +41,7 @@
                                        <el-table-column align="center" prop="dutyDepartmentName" label="责任部门" />
                                        <el-table-column align="center" prop="value" label="考核指标" />
                                        <el-table-column align="center" prop="makerDepartmentName" label="制定人部门" />
                                        <el-table-column align="center" prop="makeDate" label="制定日期" />
                                        <el-table-column align="center" prop="makeDate" :formatter="timeDate" label="制定日期" />
                                        <el-table-column align="center" prop="commitPersonName" label="上报人" />
                                    </el-table>
                                </el-tab-pane>
@@ -77,6 +77,7 @@
    </div>
</template>
<script lang="ts">
import { timeDate } from '/@/assets/index.ts';
import search from '../targetSettings/component/search.vue';
import Dailog from '../targetDecompositionYear/component/Dailog.vue';
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
@@ -227,6 +228,7 @@
            listApi()
        }
        return {
            timeDate,
            add,
            listApi,
            resetForm,

 src/views/goalManagement/targetDecompositionYear/index.vue

@@ -41,7 +41,7 @@
                                        <el-table-column align="center" prop="dutyDepartmentName" label="责任部门" />
                                        <el-table-column align="center" prop="value" label="考核指标" />
                                        <el-table-column align="center" prop="makerDepartmentName" label="制定人部门" />
                                        <el-table-column align="center" prop="makeDate" label="制定日期" />
                                        <el-table-column align="center" prop="makeDate" :formatter="timeDate" label="制定日期"  />
                                        <el-table-column align="center" prop="commitPersonName" label="上报人" />
                                    </el-table>
                                </el-tab-pane>
@@ -77,6 +77,7 @@
    </div>
</template>
<script lang="ts">
import { timeDate } from '/@/assets/index.ts';
import Dailog from './component/Dailog.vue';
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
@@ -225,6 +226,7 @@
            listApi()
        }
        return {
            timeDate,
            listApi,
            add,
            resetForm,

 src/views/goalManagement/targetStatistics/index.vue

@@ -1,19 +1,53 @@
<template>
    <div>
        <div ref="main" style="width: 100%; height: 400px"></div>
    <div style="background-color: #fff">
        <el-row style="padding:20px 0">
            <el-col :span="4" :offset="17">
                <el-select v-model="form.targetType" placeholder="" @change="listApi" style="width:100%">
                    <el-option label="年指标" :value="1" />
                    <el-option label="月指标" :value="2" />
                    <el-option label="半年" :value="3" />
                    <el-option label="季度" :value="4" />
                </el-select>
            </el-col>
        </el-row>
        <div ref="main" style="width: 100%; height: 400px;"></div>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    setup() {
        onMounted(() => {
            init();
        const form = ref({
            qName: '',
            indexNum: '',
            targetType: 1,
            divideStatus: '',
        });
        onMounted(() => {
            listApi();
        });
        const listApi = () => {
            goalManagementApi()
                .gettargetstatistics(form.value.targetType)
                .then((res) => {
                    let arr = [];
                    arr.push({
                        value: res.data.data.noComplete,
                        name: '未完成',
                    });
                    arr.push({
                        value: res.data.data.complete,
                        name: '已完成',
                    });
                    console.log(arr);
                    init(arr);
                });
        };
        const main = ref();
        const init = () => {
        const init = (data: any) => {
            var myChart = echarts.init(main.value);
            var option = {
                // title: {
@@ -26,20 +60,14 @@
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    left: '30%',
                },
                series: [
                    {
                        name: 'Access From',
                        // name: 'Access From',
                        type: 'pie',
                        radius: '100%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' },
                        ],
                        radius: '90%',
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
@@ -54,8 +82,10 @@
            myChart.setOption(option);
        };
        return {
            form,
            main,
            init,
            listApi,
        };
    },
});