首页

src/assets/css/element.scss

@@ -1,7 +1,7 @@
 :root {
   --el-header-height: 69px;
   --el-aside-scrollbar-height: calc(100vh - var(--el-header-height));
-  --el-main-scrollbar-height: calc(100vh - var(--el-header-height) - 60px);
+  --el-main-scrollbar-height: calc(100vh - var(--el-header-height) - 40px);
   --el-border-color: #273868 !important; // 边框颜色
   --el-text-color-regular: #fff !important;
   --el-fill-color-light: #0e1d44 !important; //hover背景色

src/request/index.js

@@ -0,0 +1,23 @@
+import { post } from "@/request/axios.js";
+
+export const getHiddenCount = (params) =>
+  post("/hidden/getCountByUserId", params); // 隐患数量
+export const getMemoryUsage = (params) =>
+  post("/service/notice/getMemoryUsage", params); // 储存空间
+export const getListCheckType = (params) =>
+  post("/listmanager/goIndexCount", params); // 清单检查类型统计
+export const getChecklistCheck = (params) =>
+  post("/checkrecord/goIndexCount", params); // 清单检查完成率统计
+export const getPlatformAnnouncement = (params) =>
+  post("/service/notice/listByIndex", params); // 平台公告
+export const getCorporateAnnouncement = (params) =>
+  post("/noticecorp/listByIndex", params); // 企业公告
+export const getPlatformAnnouncementView = (params) =>
+  post("/service/notice/goEdit", params); // 平台公告查看
+export const getCorporateAnnouncementView = (params) =>
+  post("/noticecorp/goEdit", params); // 企业公告查看
+export const getCalendar = (params) => post("/schedule/getData", params); // 日历
+export const getCalendarAdd = (params) => post("/schedule/add", params); // 日历添加
+export const getCalendarEdit = (params) => post("/schedule/edit", params); // 日历修改
+export const getWorkReminder = (params) =>
+  post("/listmanager/checkListIndex", params); // 工作提醒

src/views/hidden_danger_government/ledger/index.vue

@@ -169,7 +169,7 @@
 </template>
 
 <script setup>
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { serialNumber, translationStatus } from "@/assets/js/utils";
 import {
   setCustomHiddenDangerDelete,
@@ -191,6 +191,8 @@ const stateList = [
   { NAME: "已过期", ID: "-1" },
 ];
 const router = useRouter();
+const route = useRoute();
+const { STATE } = route.query;
 const data = reactive({
   exportExcelDialog: {
     visible: false,
@@ -204,6 +206,7 @@ const { list, pagination, searchForm, fnGetData, fnResetPagination, tableRef } =
       DISPOSESTATE: "-1",
       IS_SELF: "0",
     },
+    defaultSearchForm: { STATE },
   });
 const fnGetDataTransfer = () => {
   fnGetData({

src/views/index/components/announcement.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-tabs v-model="active">
+    <el-tab-pane label="平台公告" name="first">
+      <ul>
+        <li
+          v-for="(item, index) in platformAnnouncementList.splice(0, 5)"
+          :key="index"
+          class="line-1"
+          @click="fnPlatformAnnouncementView(item.NOTICE_ID)"
+        >
+          {{ item.SYNOPSIS }}
+        </li>
+      </ul>
+    </el-tab-pane>
+    <el-tab-pane label="企业公告" name="second">
+      <ul>
+        <li
+          v-for="(item, index) in corporateAnnouncementList.splice(0, 5)"
+          :key="index"
+          class="line-1"
+          @click="fnCorporateAnnouncementView(item.NOTICECORP_ID)"
+        >
+          {{ item.SYNOPSIS }}
+        </li>
+      </ul>
+    </el-tab-pane>
+  </el-tabs>
+  <announcement-view
+    v-model:visible="data.viewDialog.visible"
+    :info="data.viewDialog.info"
+  />
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+import {
+  getCorporateAnnouncement,
+  getCorporateAnnouncementView,
+  getPlatformAnnouncement,
+  getPlatformAnnouncementView,
+} from "@/request/index.js";
+import useListData from "@/assets/js/useListData.js";
+import AnnouncementView from "./announcement_view.vue";
+
+const active = ref("first");
+const { list: platformAnnouncementList } = useListData(
+  getPlatformAnnouncement,
+  { otherParams: { STATUS: 1 } }
+);
+const { list: corporateAnnouncementList } = useListData(
+  getCorporateAnnouncement,
+  { otherParams: { STATUS: 1 } }
+);
+const data = reactive({
+  viewDialog: {
+    visible: false,
+    info: {},
+  },
+});
+const fnPlatformAnnouncementView = async (NOTICE_ID) => {
+  const resData = await getPlatformAnnouncementView({ NOTICE_ID });
+  data.viewDialog.visible = true;
+  data.viewDialog.info = resData.pd;
+};
+const fnCorporateAnnouncementView = async (NOTICECORP_ID) => {
+  const resData = await getCorporateAnnouncementView({ NOTICECORP_ID });
+  data.viewDialog.visible = true;
+  data.viewDialog.info = resData.pd;
+};
+</script>
+
+<style scoped lang="scss">
+ul {
+  height: 120px;
+  overflow: hidden;
+
+  li {
+    padding: 4px 0;
+    font-size: 14px;
+    cursor: pointer;
+
+    &:hover {
+      color: #409eff;
+    }
+  }
+}
+</style>

src/views/index/components/announcement_view.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-dialog v-model="visible" title="查看">
+    <div>
+      <div>
+        <h3>{{ info.SYNOPSIS }}</h3>
+      </div>
+      <div class="mt-10">
+        <span>发布人：{{ info.CREATOR }}</span>
+        <span class="pl-10">发布时间：{{ info.CREATTIME }}</span>
+      </div>
+      <div class="mt-10">
+        <div v-html="info.CONTENT" />
+      </div>
+      <div v-if="info.FILEPATH" class="mt-10">
+        <div>
+          附件：<el-button
+            type="primary"
+            text
+            link
+            @click="useDownloadFile(info.FILEPATH)"
+          >
+            下载
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="visible = false">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { useVModel } from "@vueuse/core";
+import useDownloadFile from "@/assets/js/useDownloadFile.js";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  info: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+const emits = defineEmits(["update:visible"]);
+const visible = useVModel(props, "visible", emits);
+</script>
+
+<style scoped lang="scss"></style>

src/views/index/components/calendar.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <el-calendar v-model="value" class="mlr--18 border content">
+      <template #date-cell="{ data: { day } }">
+        <p class="calendar-data" @click="fnView(day)">
+          <span v-for="(item, index) in dayTime" :key="index">
+            <span v-if="day === item" class="budge" />
+          </span>
+          {{ day.split("-").slice(2).join() }}
+        </p>
+      </template>
+    </el-calendar>
+    <div class="mlr--18 border p-10 content">
+      <div class="title">本日工作提醒</div>
+      <div style="height: 42px">
+        <div v-if="wjcNum > 0" class="text-red mb-10">
+          需进行 {{ wjcNum }} 项隐患排查
+        </div>
+        <div class="text-green">已进行 {{ yjcNum }} 项隐患排查</div>
+      </div>
+    </div>
+    <div class="mlr--18 border p-10 content">
+      <div class="title">{{ currentDate }}日程安排</div>
+      <ul>
+        <li v-for="(item, index) in scheduleList" :key="index" class="line-1">
+          {{ item.desc }}
+        </li>
+        <li v-if="scheduleList.length === 0">暂无工作安排</li>
+      </ul>
+    </div>
+    <schedule-add
+      v-model:visible="data.addOrEditDialog.visible"
+      v-model:form="data.addOrEditDialog.form"
+      :title="data.addOrEditDialog.title"
+      :type="data.addOrEditDialog.type"
+      @get-data="fnGetSchedule(data.addOrEditDialog.form.noteDate)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { nextTick, reactive, ref } from "vue";
+import { getCalendar, getWorkReminder } from "@/request/index.js";
+import dayjs from "dayjs";
+import ScheduleAdd from "./schedule_add.vue";
+
+const value = ref(new Date());
+const dayTime = ref([]);
+const wjcNum = ref(0);
+const yjcNum = ref(0);
+const currentDate = ref(dayjs().format("YYYY-MM-DD"));
+const scheduleList = ref([]);
+const data = reactive({
+  addOrEditDialog: {
+    visible: false,
+    type: "",
+    title: "",
+    form: {
+      SCHEDULE_ID: "",
+      biaoti: "",
+      neirong: "",
+      noteDate: "",
+    },
+  },
+});
+const fnGetCalendar = async () => {
+  const resData = await getCalendar();
+  for (let i = 0; i < resData.varList.length; i++) {
+    dayTime.value.push(resData.varList[i].date);
+  }
+};
+const fnGetWorkReminder = async () => {
+  const resData = await getWorkReminder();
+  wjcNum.value = resData.wjcNum;
+  yjcNum.value = resData.yjcNum;
+};
+const fnGetSchedule = async (CDATA, type = "") => {
+  const resData = await getCalendar({ CDATA });
+  if (type) {
+    data.addOrEditDialog.visible = true;
+    await nextTick();
+    data.addOrEditDialog.title = CDATA + "号日程";
+    if (resData.varList.length > 0) {
+      data.addOrEditDialog.type = "edit";
+      data.addOrEditDialog.form.SCHEDULE_ID = resData.varList[0].id;
+      data.addOrEditDialog.form.biaoti = resData.varList[0].title;
+      data.addOrEditDialog.form.neirong = resData.varList[0].desc;
+      data.addOrEditDialog.form.noteDate = resData.varList[0].date;
+    } else {
+      data.addOrEditDialog.form.SCHEDULE_ID = Math.random();
+      data.addOrEditDialog.form.noteDate = CDATA;
+      data.addOrEditDialog.type = "add";
+    }
+  } else scheduleList.value = resData.varList;
+};
+fnGetCalendar();
+fnGetWorkReminder();
+fnGetSchedule(currentDate.value);
+const fnView = (date) => {
+  currentDate.value = date;
+  if (dayjs().diff(dayjs(date), "day") > 0) {
+    fnGetSchedule(date);
+  } else {
+    fnGetSchedule(date, "add");
+    fnGetSchedule(date);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.calendar-data {
+  position: relative;
+
+  .budge {
+    width: 6px;
+    height: 6px;
+    background-color: #ff4d4f;
+    border-radius: 50%;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+  }
+}
+
+.title {
+  font-weight: bold;
+  padding-bottom: 10px;
+}
+
+.border {
+  border-top: 1px solid #102b60;
+}
+
+.content {
+  font-size: 14px;
+}
+
+ul {
+  height: 106px;
+  overflow: hidden;
+
+  li {
+    padding: 4px 0;
+  }
+}
+
+:deep {
+  .el-calendar-table .el-calendar-day {
+    height: 40px;
+    line-height: 40px;
+    padding: 0;
+    text-align: center;
+  }
+
+  .el-calendar__body {
+    padding: 10px;
+  }
+}
+</style>

src/views/index/components/checklist_check.vue

@@ -0,0 +1,135 @@
+<template>
+  <el-card>
+    <div class="searchForm">
+      <el-date-picker
+        v-model="dates"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="YYYY-MM-DD"
+        format="YYYY-MM-DD"
+        style="width: 80% !important"
+      />
+      <el-button type="primary" class="ml-10" @click="fnGetData">
+        搜索
+      </el-button>
+    </div>
+    <div id="main3" />
+  </el-card>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import * as echarts from "echarts";
+import { getChecklistCheck } from "@/request/index.js";
+import dayjs from "dayjs";
+
+let myChart3;
+const dates = ref([
+  dayjs().startOf("year").format("YYYY-MM-DD"),
+  dayjs().endOf("year").format("YYYY-MM-DD"),
+]);
+const fnGetData = async () => {
+  const resData = await getChecklistCheck({
+    STARTTIME: dates.value[0],
+    ENDTIME: dates.value[1],
+  });
+  myChart3 && myChart3.dispose();
+  fnInitEcharts(resData.varList);
+};
+const fnInitEcharts = (data) => {
+  myChart3 = echarts.init(document.querySelector("#main3"));
+  const x_Data = [];
+  const y_Data = [];
+  for (let i = 0; i < data.length; i++) {
+    x_Data.push(data[i].percentage);
+    y_Data.push(data[i].name);
+  }
+  const option = {
+    title: {
+      text: "清单检查完成率统计（单位%）",
+      top: "3%",
+      textStyle: {
+        fontSize: "14",
+        color: "#fff",
+        fontWeight: "700",
+      },
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      top: "15%",
+      containLabel: true,
+    },
+    xAxis: {
+      show: false,
+      type: "value",
+      boundaryGap: [0, 0.01],
+    },
+    yAxis: {
+      type: "category",
+      data: y_Data,
+      axisLabel: {
+        color: "#fff",
+      },
+    },
+    series: [
+      {
+        type: "bar",
+        data: x_Data,
+        label: {
+          show: true,
+          position: "right",
+          color: "#fff",
+        },
+        barWidth: 15,
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              const colorList = [
+                "#ee6666",
+                "#73c0de",
+                "#3ca272",
+                "#fc8452",
+                "#9a60b4",
+                "#5470c6",
+              ];
+              return colorList[params.dataIndex];
+            },
+          },
+        },
+      },
+    ],
+  };
+  myChart3.setOption(option);
+};
+onMounted(() => {
+  fnGetData();
+  window.onresize = function () {
+    myChart3 && myChart3.resize();
+  };
+});
+onBeforeUnmount(() => {
+  myChart3 = null;
+});
+</script>
+
+<style scoped lang="scss">
+#main3 {
+  width: 100%;
+  height: 305px;
+}
+.searchForm {
+  position: absolute;
+  right: 10px;
+  z-index: 1;
+}
+</style>

src/views/index/components/count.vue

@@ -0,0 +1,140 @@
+<template>
+  <el-row :gutter="10">
+    <el-col :span="9">
+      <el-card>
+        <div class="flex">
+          <div class="img">
+            <img src="/src/assets/images/index/icon1.png" alt="" />
+          </div>
+          <div
+            @click="
+              router.push({
+                path: '/hidden_danger_government/ledger',
+                query: { STATE: '4' },
+              })
+            "
+          >
+            <span>已验收</span>
+            <count-to :end-val="data.hidCount.yys" />
+          </div>
+          <div
+            @click="
+              router.push({
+                path: '/hidden_danger_government/ledger',
+                query: { STATE: '-1' },
+              })
+            "
+          >
+            <span>已超期</span>
+            <count-to :end-val="data.hidCount.ycq" />
+          </div>
+          <div
+            @click="
+              router.push({ path: '/hidden_danger_government/rectification' })
+            "
+          >
+            <span>待整改</span>
+            <count-to :end-val="data.hidCount.dzg" />
+          </div>
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="9">
+      <el-card>
+        <div class="flex">
+          <div class="img">
+            <img src="/src/assets/images/index/icon2.png" alt="" />
+          </div>
+          <div @click="router.push({ path: '/risk_control/ledger' })">
+            <span>存在风险</span>
+            <count-to :end-val="data.riskCount.cnzfx" />
+          </div>
+          <div
+            @click="router.push({ path: '/risk_control/identifying_parts' })"
+          >
+            <span>辨识部位</span>
+            <count-to :end-val="data.riskCount.idcount" />
+          </div>
+          <div @click="router.push({ path: '/risk_control/risk_point' })">
+            <span>风险点(单元)</span>
+            <count-to :end-val="data.riskCount.unitcount" />
+          </div>
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="6">
+      <el-card>
+        <div class="flex">
+          <div class="img">
+            <img src="/src/assets/images/index/icon3.png" alt="" />
+          </div>
+          <div>
+            <span>已使用存储</span>
+            <count-to
+              :end-val="(data.memoryUsage.total_usage / 1000 / 1000).toFixed(2)"
+              :options="{ suffix: 'MB' }"
+            />
+          </div>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script setup>
+import { getHiddenCount, getMemoryUsage } from "@/request/index.js";
+import { reactive } from "vue";
+import CountTo from "vue-countup-v3";
+import { useRouter } from "vue-router";
+import { getRiskManagement } from "@/request/large_screen_data_display.js";
+
+const router = useRouter();
+const data = reactive({
+  hidCount: {
+    dzg: 0,
+    yys: 0,
+    ycq: 0,
+  },
+  riskCount: {
+    cnzfx: 0,
+    idcount: 0,
+    unitcount: 0,
+  },
+  memoryUsage: {
+    total_usage: 0,
+  },
+});
+const fnGetData = async () => {
+  const { hidCount } = await getHiddenCount();
+  const { riskCount } = await getRiskManagement();
+  const { pd: memoryUsage } = await getMemoryUsage();
+  data.hidCount = hidCount;
+  data.riskCount = riskCount;
+  data.memoryUsage = memoryUsage;
+};
+fnGetData();
+</script>
+
+<style scoped lang="scss">
+img {
+  width: 40px;
+  height: 40px;
+}
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+
+  div:not(:first-child) {
+    cursor: pointer;
+  }
+
+  .countup-wrap {
+    padding-top: 10px;
+    font-weight: bold;
+    font-size: 20px;
+  }
+}
+</style>

src/views/index/components/list_check_type.vue

@@ -0,0 +1,136 @@
+<template>
+  <el-card>
+    <div id="main1" />
+  </el-card>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted } from "vue";
+import { getListCheckType } from "@/request/index.js";
+import * as echarts from "echarts";
+
+let myChart1;
+const fnGetData = async () => {
+  const resData = await getListCheckType();
+  fnInitEcharts(resData);
+};
+const fnInitEcharts = (data) => {
+  myChart1 = echarts.init(document.querySelector("#main1"));
+  const option = {
+    title: {
+      text: "清单检查类型统计",
+      textStyle: {
+        fontSize: "14",
+        normal: {
+          fontWeight: "700",
+        },
+        color: "#fff",
+      },
+    },
+    legend: {
+      data: ["现场清单", "基础清单", "综合清单"],
+      top: "0%",
+      textStyle: {
+        color: "#fff",
+      },
+    },
+    grid: {
+      left: "2%",
+      right: "2%",
+      bottom: "5%",
+      top: "13%",
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: "axis",
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: data.dates,
+      axisLabel: {
+        color: "#fff",
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#102b60",
+        },
+      },
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#102b60",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#102b60",
+        },
+      },
+    },
+    series: [
+      {
+        name: "现场清单",
+        type: "line",
+        data: data.xcqd,
+        itemStyle: {
+          normal: {
+            color: "#3ca272",
+            lineStyle: {
+              color: "#3ca272",
+            },
+          },
+        },
+      },
+      {
+        name: "基础清单",
+        type: "line",
+        data: data.jcqd,
+        itemStyle: {
+          normal: {
+            color: "#5470c6",
+            lineStyle: {
+              color: "#5470c6",
+            },
+          },
+        },
+      },
+      {
+        name: "综合清单",
+        type: "line",
+        data: data.zhqd,
+        itemStyle: {
+          normal: {
+            color: "#ee6666",
+            lineStyle: {
+              color: "#ee6666",
+            },
+          },
+        },
+      },
+    ],
+  };
+  myChart1.setOption(option);
+};
+onMounted(() => {
+  fnGetData();
+  window.onresize = function () {
+    myChart1 && myChart1.resize();
+  };
+});
+onBeforeUnmount(() => {
+  myChart1 = null;
+});
+</script>
+
+<style scoped lang="scss">
+#main1 {
+  width: 100%;
+  height: 280px;
+}
+</style>

src/views/index/components/risk_classification.vue

@@ -0,0 +1,118 @@
+<template>
+  <el-card>
+    <div id="main2" />
+  </el-card>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted } from "vue";
+import * as echarts from "echarts";
+import { getRiskManagement } from "@/request/large_screen_data_display.js";
+
+let myChart2;
+const fnGetData = async () => {
+  const { riskAll } = await getRiskManagement();
+  fnInitEcharts(riskAll);
+};
+const fnInitEcharts = (data) => {
+  myChart2 = echarts.init(document.querySelector("#main2"));
+  let acount = 0;
+  let bcount = 0;
+  let ccount = 0;
+  let dcount = 0;
+  for (let i = 0; data.length > i; i++) {
+    if (data[i].LEVELID) {
+      if (data[i].LEVELID === "levelA") acount = data[i].COUNT;
+      if (data[i].LEVELID === "levelB") bcount = data[i].COUNT;
+      if (data[i].LEVELID === "levelC") ccount = data[i].COUNT;
+      if (data[i].LEVELID === "levelD") dcount = data[i].COUNT;
+    }
+  }
+  const option = {
+    title: {
+      text: "风险分级统计",
+      textStyle: {
+        fontSize: "14",
+        color: "#fff",
+        fontWeight: "700",
+      },
+    },
+    color: ["#10b9f8", "#ffc600", "#f49545", "#ec2c26"],
+    tooltip: {
+      trigger: "item",
+    },
+    grid: {},
+    legend: {
+      orient: "vertical",
+      left: "6%",
+      top: "20%",
+      textStyle: {
+        color: "#fff",
+      },
+    },
+    series: [
+      {
+        name: "风险类型",
+        type: "pie",
+        radius: ["30%", "70%"],
+        center: ["64%", "49%"],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderColor: "rgb(8, 24, 58)",
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+          position: "center",
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: "18",
+            fontWeight: "bold",
+            color: "#fff",
+          },
+        },
+        labelLine: {
+          show: false,
+        },
+        data: [
+          {
+            value: dcount,
+            name: "低风险",
+          },
+          {
+            value: ccount,
+            name: "一般风险",
+          },
+          {
+            value: bcount,
+            name: "较大风险",
+          },
+          {
+            value: acount,
+            name: "重大风险",
+          },
+        ],
+      },
+    ],
+  };
+  myChart2.setOption(option);
+};
+onMounted(() => {
+  fnGetData();
+  window.onresize = function () {
+    myChart2 && myChart2.resize();
+  };
+});
+onBeforeUnmount(() => {
+  myChart2 = null;
+});
+</script>
+
+<style scoped lang="scss">
+#main2 {
+  width: 100%;
+  height: 305px;
+}
+</style>

src/views/index/components/schedule_add.vue

@@ -0,0 +1,84 @@
+<template>
+  <el-dialog v-model="visible" :title="title" :on-close="fnClose">
+    <el-form ref="formRef" :model="form" label-width="110px">
+      <el-form-item label="标题" prop="biaoti">
+        <el-input v-model="form.biaoti" maxlength="31" />
+      </el-form-item>
+      <el-form-item label="内容" prop="neirong">
+        <el-input
+          v-model="form.neirong"
+          :autosize="{ minRows: 3 }"
+          type="textarea"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="fnClose">关闭</el-button>
+      <el-button type="primary" @click="fnSubmit">保存</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { useVModels } from "@vueuse/core";
+import { ref } from "vue";
+import { debounce } from "throttle-debounce";
+import useFormValidate from "@/assets/js/useFormValidate.js";
+import { ElMessage } from "element-plus";
+import { getCalendarAdd, getCalendarEdit } from "@/request/index.js";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  form: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+  title: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  type: {
+    type: String,
+    required: true,
+    default: "",
+  },
+});
+const emits = defineEmits(["update:visible", "update:form", "get-data"]);
+const { visible, form } = useVModels(props, emits);
+const formRef = ref(null);
+const fnClose = () => {
+  formRef.value.resetFields();
+  visible.value = false;
+};
+const fnSubmit = debounce(
+  1000,
+  async () => {
+    await useFormValidate(formRef);
+    props.type === "add"
+      ? await getCalendarAdd({
+          SCHEDULE_ID: form.value.SCHEDULE_ID,
+          TITLE: form.value.biaoti,
+          FHDESC: form.value.neirong,
+          CDATA: form.value.noteDate,
+        })
+      : await getCalendarEdit({
+          SCHEDULE_ID: form.value.SCHEDULE_ID,
+          TITLE: form.value.biaoti,
+          FHDESC: form.value.neirong,
+          CDATA: form.value.noteDate,
+        });
+    ElMessage.success("保存成功");
+    emits("get-data");
+    fnClose();
+  },
+  { atBegin: true }
+);
+</script>
+
+<style scoped lang="scss"></style>

src/views/index/index.vue

@@ -1,7 +1,53 @@
 <template>
-  <div></div>
+  <div class="container">
+    <el-row :gutter="10">
+      <el-col :span="18">
+        <count />
+        <el-row class="mt-10">
+          <el-col :span="24">
+            <list-check-type />
+          </el-col>
+        </el-row>
+        <el-row class="mt-10" :gutter="10">
+          <el-col :span="10">
+            <risk-classification />
+          </el-col>
+          <el-col :span="14">
+            <checklist-check />
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <announcement />
+          <calendar />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Count from "./components/count.vue";
+import ListCheckType from "./components/list_check_type.vue";
+import RiskClassification from "./components/risk_classification.vue";
+import ChecklistCheck from "./components/checklist_check.vue";
+import Announcement from "./components/announcement.vue";
+import Calendar from "./components/calendar.vue";
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.container {
+  padding: 20px;
+
+  :deep {
+    .el-card {
+      margin: 0;
+
+      .el-card__body {
+        padding: 18px;
+      }
+    }
+  }
+}
+</style>