安全管理，数据填报情况统计

src/api/project/safetyEducation.ts

@@ -14,7 +14,7 @@ enum Api {
   GetCycelDetails = '/pro/educationTraining/cycle/details',
   EditCycel = '/pro/educationTraining/cycle/edit',
   EditStatus = '/pro/educationTraining/cycle/editStatus',
-  BusinessComDetails = 'pro/educationTraining/cycle/businessComDetails',
+  BusinessComDetails = '/pro/educationTraining/cycle/businessComDetails',
 }
 
 export const getListByPage = (params?: ProjectParams) =>

src/api/project/saftyManage.ts

@@ -8,6 +8,10 @@ enum Api {
   UpdateProject = '/pro/dangerManagement/update',
   DeleteProject = '/pro/dangerManagement/del',
   Audit = '/pro/dangerManagement/audit',
+  GetCycelDetails = '/pro/dangerManagement/cycle/details',
+  EditCycel = '/pro/dangerManagement/cycle/edit',
+  EditStatus = '/pro/dangerManagement/cycle/editStatus',
+  BusinessComDetails = '/pro/dangerManagement/cycle/businessComDetails',
 }
 
 export const getListByPage = (params?: ProjectParams) =>
@@ -31,3 +35,27 @@ export const auditItem = (params?: any) =>
     url: Api.Audit,
     params,
   });
+
+export const getCycel = (params?: any) =>
+  defHttp.post<any>({
+    url: Api.GetCycelDetails,
+    params,
+  });
+
+export const setCycel = (params?: any) =>
+  defHttp.post<any>({
+    url: Api.EditCycel,
+    params,
+  });
+
+export const setEditStatus = (params?: any) =>
+  defHttp.post<any>({
+    url: Api.EditStatus,
+    params,
+  });
+
+export const getFillComDetails = (params?: any) =>
+  defHttp.post<any>({
+    url: Api.BusinessComDetails,
+    params,
+  });

src/views/changeSignature/index.vue

 <template>
+  <div style="margin: 16px">
+    <div v-if="deptId === '100' || deptId === '0'" style="margin: 16px">
+      <PageCard title="数据填报周期">
+        <Row>
+          <Col :span="20">
+            <div class="cycleFrame">
+              <div class="card">
+                <div class="cycleIcon">
+                  <img src="@/assets/icons/tianbaoriqi.png" />
+                </div>
+                <div class="characte">
+                  <div class="top">填报周期</div>
+                  <div
+                    @click="selectCycle"
+                    class="bottom"
+                    style="color: #0d84ff; text-decoration: underline; cursor: pointer"
+                    >{{ mothCycle.fillCycle }}</div
+                  >
+                </div>
+              </div>
+              <Divider
+                type="vertical"
+                style="height: 36px; border-color: rgba(22, 106, 203, 0.3)"
+                dashed
+              />
+              <div class="card">
+                <div class="cycleIcon">
+                  <img src="@/assets/icons/shenyutianshu.png" />
+                </div>
+                <div class="characte">
+                  <div class="top">剩余天数</div>
+                  <div class="bottom" style="color: #dfaa21">{{ daysReturn() + '天' }}</div>
+                </div>
+              </div>
+              <Divider
+                type="vertical"
+                style="height: 36px; border-color: rgba(22, 106, 203, 0.3)"
+                dashed
+              />
+
+              <div class="card">
+                <div class="cycleIcon">
+                  <img src="@/assets/icons/weiwancheng.png" />
+                </div>
+                <div class="characte">
+                  <div class="top">企业未完成</div>
+                  <div class="bottom" style="color: #db4343">{{ mothCycle.noNum + '家' }}</div>
+                </div>
+              </div>
+              <Divider
+                type="vertical"
+                style="height: 36px; border-color: rgba(22, 106, 203, 0.3)"
+                dashed
+              />
+
+              <div class="card">
+                <div class="cycleIcon">
+                  <img src="@/assets/icons/yiwancheng.png" />
+                </div>
+                <div class="characte">
+                  <div class="top">企业已完成</div>
+                  <div class="bottom" style="color: #16cb28">{{
+                    mothCycle.deptNum - mothCycle.noNum + '家'
+                  }}</div>
+                </div>
+              </div>
+            </div>
+          </Col>
+          <Col :span="4">
+            <a-button class="btn" @click="getFillDetails"> 查看填报详情 </a-button>
+            <a-button class="btn" type="primary" @click="returnEdit">
+              {{ mothCycle.isEdit === '1' ? '开启本轮填报' : '结束本轮填报' }}
+            </a-button>
+          </Col>
+        </Row>
+      </PageCard>
+    </div>
     <div>
       <BasicTable @register="registerTable" :title="'变更签证填报'">
         <template #toolbar>
@@ -24,6 +101,9 @@
                 {
                   label: '修改',
                   onClick: handleEdit.bind(null, record, 0),
+                  ifShow:()=>{
+                    return record.reviewStatus === '0';
+                  }
                 },
                 {
                   label: '审核',
@@ -45,6 +125,9 @@
                     placement: 'left',
                     confirm: handleDelete.bind(null, record),
                   },
+                  ifShow:()=>{
+                    return record.reviewStatus === '0';
+                  }
                 },
               ]"
             />
@@ -58,6 +141,9 @@
                 {
                   label: '修改',
                   onClick: handleEdit.bind(null, record, 0),
+                  ifShow:()=>{
+                    return record.reviewStatus === '0';
+                  }
                 },
                 {
                   label: '删除',
@@ -67,6 +153,9 @@
                     placement: 'left',
                     confirm: handleDelete.bind(null, record),
                   },
+                  ifShow:()=>{
+                    return record.reviewStatus === '0';
+                  }
                 },
               ]"
             />
@@ -74,29 +163,38 @@
         </template>
       </BasicTable>
       <yearModal @register="register" @close="handleNew" />
+      <CycleModel @register="registerCycleModel" :user-data="mothCycle" @get-cycle="getSetCycle" />
+      <FillDetailsModel @register="registerFillDetail" />
+    </div>
   </div>
 </template>
 <script setup lang="ts">
-  import { addItemApi, addItemData, operateType } from '@/api/operations/operations';
-  import { BasicTable, TableAction, useTable } from '@/components/Table';
-  import { useModal } from '@/components/Modal';
-  import {
+import {addItemApi, addItemData, operateType} from '@/api/operations/operations';
+import {BasicTable, TableAction, useTable} from '@/components/Table';
+import PageCard from '@/components/Page/src/PageCard.vue';
+import {useModal} from '@/components/Modal';
+import {
   auditItem,
   checkQuarter,
   deleteList,
+  getCycel,
   getSettlementManageList,
-  } from '@/api/changeSignatrue/changeSignatrue';
-  import { columns, searchFormSchema } from '@/views/changeSignature/changeSignatrue.data';
-  import { Tag } from 'ant-design-vue';
-  import { useRouter } from 'vue-router';
-  import { onMounted, ref } from 'vue';
-  import { getDepartmentList } from '@/api/project/settlementManage';
-  import { useMessage } from '@/hooks/web/useMessage';
-  import yearModal from '@/components/yearModal/yearModal.vue';
-  import { useUserStore } from '@/store/modules/user';
-
-  const { createMessage } = useMessage();
+  setEditStatus,
+} from '@/api/changeSignatrue/changeSignatrue';
+import {columns, searchFormSchema} from '@/views/changeSignature/changeSignatrue.data';
+import {Col, Divider, Row, Tag} from 'ant-design-vue';
+import {useRouter} from 'vue-router';
+import {onMounted, ref} from 'vue';
+import {getDepartmentList} from '@/api/project/settlementManage';
+import {useMessage} from '@/hooks/web/useMessage';
+import {useUserStore} from '@/store/modules/user';
+import CycleModel from '@/views/changeSignature/cycleModel/cycleModel.vue';
+import FillDetailsModel from '@/views/changeSignature/fillDetailsModel/fillDetailsModel.vue';
+
+const { createMessage } = useMessage();
   const { push } = useRouter();
+  const [registerCycleModel, { openModal: openCycleModel }] = useModal();
+  const [registerFillDetail, { openModal: openFillDetailModel }] = useModal();
   const [register, { openModal: openModal, closeModal: closeModal }] = useModal();
   const isExamine = ref<boolean>(false);
   const deptId = '' + useUserStore().userInfo.deptParentId;
@@ -121,6 +219,15 @@
     },
   });
 
+  const mothCycle = ref({
+    beginTime: '2024-07-01',
+    endTime: '2024-09-02',
+    fillCycle: '2020年第一季度',
+    isEdit: '0',
+    deptNum: 12,
+    noNum: 6,
+  });
+
   onMounted(async () => {
     let roles = useUserStore().userInfo.roles;
     roles.forEach((item) => {
@@ -128,9 +235,8 @@
         isExamine.value = true;
       }
     });
-    const data = await getDepartmentList();
-    console.log('data', data);
-    searchFormSchema[2].componentProps.options = data;
+    mothCycle.value = await getCycel();
+    searchFormSchema[2].componentProps.options = await getDepartmentList();
   });
 
   async function handleDelete(record: Recordable) {
@@ -192,6 +298,93 @@
     givenYear: string;
     quarter: string;
   };
+
+  function daysReturn() {
+    // 获取今天的日期
+    const today = new Date();
+
+    // 获取目标年份和月份
+    let year = Number.parseInt(mothCycle.value.fillCycle.split('年')[0]);
+    let quarter = mothCycle.value.fillCycle.split('年')[1];
+    let endMonth;
+
+    switch (quarter) {
+      case '第一季度':
+        endMonth = 2; // 三月
+        break;
+      case '第二季度':
+        endMonth = 5; // 六月
+        break;
+      case '第三季度':
+        endMonth = 8; // 九月
+        break;
+      case '第四季度':
+        endMonth = 11; // 十二月
+        break;
+    }
+
+    const targetDate = new Date(year, endMonth + 1, 0); // 得到该季度最后一天
+    // 计算时间差（毫秒）
+    const timeDifference = targetDate - today;
+    // 计算天数差（天数 = 毫秒差 / 每天的毫秒数）
+    return Math.max(0, Math.ceil(timeDifference / (1000 * 60 * 60 * 24)));
+  }
+
+  function getFillDetails() {
+    openFillDetailModel(true, {
+      data: mothCycle.value,
+    });
+  }
+
+  function selectCycle() {
+    openCycleModel(true, {
+      data: mothCycle.value,
+    });
+  }
+
+  function returnEdit() {
+    if (mothCycle.value.isEdit == '1') {
+      mothCycle.value.isEdit = '0';
+      setEditStatus(mothCycle.value);
+    } else {
+      mothCycle.value.isEdit = '1';
+      setEditStatus(mothCycle.value);
+    }
+    reload();
+  }
+
+  async function getSetCycle() {
+    mothCycle.value = await getCycel();
+  }
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less">
+  .btn {
+    margin-right: 10px;
+    margin-top: 8px;
+  }
+
+  .cycleFrame {
+    border: 1px solid rgba(22, 106, 203, 0.1);
+    border-radius: 6px;
+    padding: 20px 50px;
+    margin-right: 20px;
+    display: flex;
+    justify-content: space-between;
+    .card {
+      display: flex;
+      .cycleIcon {
+        margin-right: 10px;
+      }
+      .characte {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        .top {
+        }
+        .bottom {
+        }
+      }
+    }
+  }
+</style>

src/views/potentialSafety/cycleModel/cycleModel.vue

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="设置填报周期"
+    :minHeight="30"
+    okText="保存"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" :model="modelRef" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { setCycel } from '@/api/project/saftyManage';
+
+  const props = defineProps({
+    userData: { type: Object },
+  });
+  const emit = defineEmits(['getCycle', 'register']);
+  const modelRef = ref({});
+  const [registerForm, { getFieldsValue, validate }] = useForm({
+    labelWidth: 100,
+    schemas: [
+      {
+        field: 'year',
+        label: '填报年份',
+        required: true,
+        component: 'DatePicker',
+        componentProps: {
+          placeholder: '选择年份',
+          picker: 'year',
+          style: { width: '100%' },
+          valueFormat: 'YYYY',
+          format: 'YYYY',
+        },
+      },
+      {
+        field: 'quarter',
+        label: '填报季度',
+        required: true,
+        component: 'Select',
+        componentProps: {
+          options: [
+            {
+              label: '第一季度',
+              value: '第一季度',
+            },
+            {
+              label: '第二季度',
+              value: '第二季度',
+            },
+            {
+              label: '第三季度',
+              value: '第三季度',
+            },
+            {
+              label: '第四季度',
+              value: '第四季度',
+            },
+          ],
+          placeholder: '季度',
+          style: { width: '100%' },
+        },
+      },
+    ],
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
+  const cycleData = ref({
+    beginTime: '2024-07-01',
+    endTime: '2024-09-02',
+    fillCycle: '2024-第四季度',
+    isEdit: '0',
+    deptNum: 8,
+    noNum: 6,
+  });
+  const [register, { closeModal }] = useModalInner((data) => {
+    cycleData.value = data.data;
+  });
+
+  function handleSubmit() {
+    validate().then(() => {
+      const value = getFieldsValue();
+      cycleData.value.fillCycle = value.year + '-' + value.quarter;
+      setCycel(cycleData.value).then(() => {
+        emit('getCycle');
+      });
+      closeModal();
+    });
+  }
+</script>

src/views/potentialSafety/fillDetailsModel/fillDetailsModel.vue

+<template>
+  <BasicModal v-bind="$attrs" width="80%" @register="register" :title="getTitle" :showOkBtn="false">
+    <Table
+      :pagination="false"
+      :dataSource="dataSource"
+      :columns="columns"
+      bordered
+      :sticky="true"
+      :loading="loadingRef"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'comStatus'">
+          <Tag color="green" v-if="record.comStatus === '1'"> 已完成 </Tag>
+          <Tag color="red" v-else> 未完成 </Tag>
+        </template>
+      </template>
+    </Table>
+  </BasicModal>
+</template>
+<script setup lang="ts">
+  import { useModalInner } from '@/components/Modal';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { ref } from 'vue';
+  import { Table, Tag } from 'ant-design-vue';
+  import { getFillComDetails } from '@/api/project/saftyManage';
+
+  const loadingRef = ref(false);
+  // 列表
+  const dataSource = ref([]);
+  // 表头
+  const columns = [
+    {
+      title: '公司名称',
+      dataIndex: 'companyName',
+      width: 200,
+    },
+    {
+      title: '完成状态',
+      dataIndex: 'comStatus',
+      width: 180,
+    },
+    {
+      title: '上报时间',
+      dataIndex: 'updateTime',
+      width: 150,
+    },
+  ];
+  const getTitle = ref('');
+  const params = ref({ mothCycle: '' });
+
+  const [register, { closeModal }] = useModalInner(async (data) => {
+    params.value.mothCycle = data.data.fillCycle;
+    dataSource.value = await getFillComDetails(params.value);
+  });
+</script>
+<style scoped lang="less"></style>

src/views/safetyEducation/cycleModel/cycleModel.vue

@@ -11,10 +11,11 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive } from 'vue';
+  import { ref } from 'vue';
   import { BasicModal, useModalInner } from '@/components/Modal';
-  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+  import { BasicForm, useForm } from '@/components/Form';
   import { setCycel } from '@/api/project/safetyEducation';
+
   const props = defineProps({
     userData: { type: Object },
   });
@@ -79,7 +80,6 @@
     noNum: 6,
   });
   const [register, { closeModal }] = useModalInner((data) => {
-    console.log(data.data);
     cycleData.value = data.data;
   });
 
@@ -89,7 +89,6 @@
       cycleData.value.fillCycle = value.year + '-' + value.quarter;
       setCycel(cycleData.value).then(() => {
         emit('getCycle');
-        console.log('2123', cycleData.value);
       });
       closeModal();
     });

src/views/safetyEducation/fillDetailsModel/fillDetailsModel.vue

@@ -51,7 +51,6 @@
   const [register, { closeModal }] = useModalInner(async (data) => {
     params.value.mothCycle = data.data.fillCycle;
     dataSource.value = await getFillComDetails(params.value);
-    // console.log('212', list);
   });
 </script>
 <style scoped lang="less"></style>

src/views/safetyEducation/index.vue

@@ -168,7 +168,6 @@
   const APopconfirm = Popconfirm;
   const userStore = useUserStore();
   const isExamine = ref<boolean>(false);
-  let isEdit = ref('1');
   const getUserInfo = computed(() => {
     const { realName = '', avatar, desc, deptId } = userStore.getUserInfo || {};
     return { realName, avatar: avatar, desc, deptId };
@@ -431,9 +430,8 @@
         isExamine.value = true;
       }
     });
-    const data = await getDepartmentList();
-    // console.log(data);
-    searchForm.value[2].componentProps.options = data;
+    const depart = await getDepartmentList();
+    searchForm.value[2].componentProps.options = depart;
     getStatisticList();
   });
 
@@ -480,14 +478,8 @@
     }
 
     const targetDate = new Date(year, endMonth + 1, 0); // 得到该季度最后一天
-    console.log('targetDate', targetDate);
     // 计算时间差（毫秒）
     const timeDifference = targetDate - today;
-    console.log('timeDifference', timeDifference);
-    console.log(
-      'Math.max(0, Math.ceil(timeDifference / (1000 * 60 * 60 * 24)))',
-      Math.max(0, Math.ceil(timeDifference / (1000 * 60 * 60 * 24))),
-    );
     // 计算天数差（天数 = 毫秒差 / 每天的毫秒数）
     return Math.max(0, Math.ceil(timeDifference / (1000 * 60 * 60 * 24)));
   }
@@ -505,7 +497,6 @@
   }
 
   function returnEdit() {
-    console.log('mothCycle.value.isEdit', mothCycle.value.isEdit);
     if (mothCycle.value.isEdit == '1') {
       mothCycle.value.isEdit = '0';
       setEditStatus(mothCycle.value);
@@ -518,7 +509,6 @@
 
   async function getSetCycle() {
     mothCycle.value = await getCycel();
-    console.log('mothCycle.value', mothCycle.value);
   }
 
   //新增
@@ -558,7 +548,6 @@
   async function handleExamine(record: Recordable) {
     const id = record.id;
     const res = await auditItem({ id });
-    console.log(res);
     await getStatisticList();
   }
 
@@ -597,20 +586,17 @@
   //加载列表数据
   async function getStatisticList() {
     loadingRef.value = true;
-    console.log('params.value', params.value);
     let data = await getListAll(params.value);
     if (data.length > 0) {
-      isEdit.value = data[0].reviewStatus;
-      const cycle = await getCycel();
-      mothCycle.value = cycle;
-      console.log('getStatisticList:mothCycle.value', mothCycle.value);
-      // dataSource.value = data;
-      //将相同的合并单元格
+      mothCycle.value = await getCycel();
+      // let cycle = await getListAll(mothCycle.value.fillCycle);
+      // mothCycle.value.isEdit = cycle[0].reviewStatus;
+    }
+    // 将相同的合并单元格
     let propsList = ['companyName'];
     propsList.map((item) => {
       changeData(data, item);
     });
-    }
     loadingRef.value = false;
   }