From ff7dc7d58bbd1277752d0221edbc17f76cdb1d69 Mon Sep 17 00:00:00 2001
From: lijianzhong <m18328725261@163.com>
Date: Fri, 26 Jan 2024 09:02:58 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E7=BB=93=E6=9E=84=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/json/config.json                 |   3 +
 src/components/CustomUpload/index.vue   | 175 +++++-----
 src/components/ImageUpload/index.vue    | 433 +++++++++++++-----------
 src/components/QuillEditor/index.vue    |   1 -
 src/router/modules/emergency.js         |   6 +-
 src/router/modules/statistic.js         |  25 ++
 src/router/modules/work-manage.js       |  26 ++
 src/router/modules/work-trends.js       |   9 +-
 src/router/routes.js                    |   4 +
 src/views/statistic/components/gz.vue   | 131 +++++++
 src/views/statistic/components/hj.vue   |  69 ++++
 src/views/statistic/components/rylx.vue |  76 +++++
 src/views/statistic/components/tj.vue   |  67 ++++
 src/views/statistic/components/yj.vue   |  71 ++++
 src/views/statistic/index.vue           |  73 ++++
 src/views/system/setting/file.vue       |  75 +++-
 src/views/system/setting/info.vue       |  66 +++-
 src/views/system/setting/protocol.vue   | 102 +++++-
 src/views/system/setting/safe.vue       |  64 +++-
 src/views/work-manage/components/cg.vue |  60 ++++
 src/views/work-manage/components/db.vue |  10 +
 src/views/work-manage/components/tj.vue |  10 +
 src/views/work-manage/components/yj.vue |  10 +
 src/views/work-manage/index.vue         |  71 ++++
 src/views/work-trends/index.vue         | 178 +++++++++-
 25 files changed, 1494 insertions(+), 321 deletions(-)
 create mode 100644 public/json/config.json
 create mode 100644 src/router/modules/statistic.js
 create mode 100644 src/router/modules/work-manage.js
 create mode 100644 src/views/statistic/components/gz.vue
 create mode 100644 src/views/statistic/components/hj.vue
 create mode 100644 src/views/statistic/components/rylx.vue
 create mode 100644 src/views/statistic/components/tj.vue
 create mode 100644 src/views/statistic/components/yj.vue
 create mode 100644 src/views/statistic/index.vue
 create mode 100644 src/views/work-manage/components/cg.vue
 create mode 100644 src/views/work-manage/components/db.vue
 create mode 100644 src/views/work-manage/components/tj.vue
 create mode 100644 src/views/work-manage/components/yj.vue
 create mode 100644 src/views/work-manage/index.vue

diff --git a/public/json/config.json b/public/json/config.json
new file mode 100644
index 0000000..b9390cc
--- /dev/null
+++ b/public/json/config.json
@@ -0,0 +1,3 @@
+{
+    "fileurl": ""
+}
\ No newline at end of file
diff --git a/src/components/CustomUpload/index.vue b/src/components/CustomUpload/index.vue
index dd75d43..ea2e611 100644
--- a/src/components/CustomUpload/index.vue
+++ b/src/components/CustomUpload/index.vue
@@ -53,7 +53,7 @@
           </div>
         </div>
       </div>
-      <div class="item" v-show="(fileList.length < max && !readonly)">
+      <div class="item" v-show="fileList.length < max && !readonly">
         <el-upload
           ref="uploadEl"
           class="uploader"
@@ -82,7 +82,7 @@
       </div>
     </div>
     <div v-if="tip" class="el-upload__tip">
-      <div style="display: inline-block;">
+      <div style="display: inline-block">
         <el-alert :title="tip" type="error" show-icon :closable="false" />
       </div>
     </div>
@@ -121,11 +121,6 @@ const props = defineProps({
     default: "",
     required: true,
   },
-  //图片服务器拼接地址
-  baseUrl: {
-    type: String,
-    default: "",
-  },
   //图片服务ID
   uuid: {
     type: String,
@@ -230,12 +225,6 @@ const handleRemove = (val: any) => {
           emits("onUpdate", arr);
         }
       });
-      // const index =
-      //   arr.filter((item) => item.sysdocumentid === item.sysdocumentid)
-      // console.log(index);
-
-      // arr.splice(index, 1);
-      // emits("onUpdate", arr);
     }
   });
 };
@@ -322,88 +311,88 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .pic-contaner {
-    display: flex;
-    flex-direction: column;
-    .picture {
-        flex-wrap: wrap;
-        display: inline-flex;
-        .uploader {
-            width: fit-content !important;
-        }
-        .img {
-            margin-left: 10px;
-            border-radius: 10px;
-            margin-bottom: 10px;
-            border: 1px #999 dashed;
-        }
-        .file-content {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            position: relative;
-            .file-name {
-                font-size: 10px;
-                padding: 5px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                display: box;
-                -webkit-line-clamp: 2;
-                -webkit-box-orient: vertical;
-            }
-        }
-        .item {
-            position: relative;
-            .progress {
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                right: 0;
-                left: 0;
-                transform: translateX(12%) translateY(6%);
-            }
-            .mask {
-                opacity: 0;
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                margin-bottom: 20px;
-                margin-left: 10px;
-                border-radius: 10px;
-                background-color: var(--el-overlay-color-lighter);
-                transition: opacity 0.3s;
-                .actions {
-                    width: 100px;
-                    height: 100px;
-                    display: flex;
-                    flex-wrap: wrap;
-                    align-items: center;
-                    justify-content: center;
-                    @include position-center(xy);
-                    span {
-                        width: 50%;
-                        text-align: center;
-                        cursor: pointer;
-                        color: var(--el-color-white);
-                        transition: color 0.1s, transform 0.1s;
-                        &:hover {
-                            transform: scale(1.5);
-                        }
-                        .el-icon {
-                            font-size: 24px;
-                        }
-                    }
-                }
-            }
-            &:hover .mask {
-                opacity: 1;
-            }
-        }
+  display: flex;
+  flex-direction: column;
+  .picture {
+    flex-wrap: wrap;
+    display: inline-flex;
+    .uploader {
+      width: fit-content !important;
     }
+    .img {
+      margin-left: 10px;
+      border-radius: 10px;
+      margin-bottom: 10px;
+      border: 1px #999 dashed;
+    }
+    .file-content {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      .file-name {
+        font-size: 10px;
+        padding: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+    .item {
+      position: relative;
+      .progress {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        transform: translateX(12%) translateY(6%);
+      }
+      .mask {
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin-bottom: 20px;
+        margin-left: 10px;
+        border-radius: 10px;
+        background-color: var(--el-overlay-color-lighter);
+        transition: opacity 0.3s;
+        .actions {
+          width: 100px;
+          height: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          justify-content: center;
+          @include position-center(xy);
+          span {
+            width: 50%;
+            text-align: center;
+            cursor: pointer;
+            color: var(--el-color-white);
+            transition: color 0.1s, transform 0.1s;
+            &:hover {
+              transform: scale(1.5);
+            }
+            .el-icon {
+              font-size: 24px;
+            }
+          }
+        }
+      }
+      &:hover .mask {
+        opacity: 1;
+      }
+    }
+  }
 }
 :deep(.el-upload--picture-card) {
-    --el-upload-picture-card-size: v-bind(props.height + "px") !important;
+  --el-upload-picture-card-size: v-bind(props.height + "px") !important;
 }
 </style>
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index e321483..7d50f25 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -1,242 +1,277 @@
 <script setup name="ImageUpload">
 const props = defineProps({
-    action: {
-        type: String,
-        required: true
-    },
-    headers: {
-        type: Object,
-        default: () => {}
-    },
-    data: {
-        type: Object,
-        default: () => {}
-    },
-    name: {
-        type: String,
-        default: 'file'
-    },
-    url: {
-        type: String,
-        default: ''
-    },
-    size: {
-        type: Number,
-        default: 2
-    },
-    width: {
-        type: Number,
-        default: 150
-    },
-    height: {
-        type: Number,
-        default: 150
-    },
-    placeholder: {
-        type: String,
-        default: ''
-    },
-    notip: {
-        type: Boolean,
-        default: false
-    },
-    ext: {
-        type: Array,
-        default: () => ['jpg', 'png', 'gif', 'bmp']
-    }
-})
+  action: {
+    type: String,
+    required: true,
+  },
+  headers: {
+    type: Object,
+    default: () => {},
+  },
+  data: {
+    type: Object,
+    default: () => {},
+  },
+  name: {
+    type: String,
+    default: "file",
+  },
+  url: {
+    type: String,
+    default: "",
+  },
+  size: {
+    type: Number,
+    default: 2,
+  },
+  width: {
+    type: Number,
+    default: 150,
+  },
+  height: {
+    type: Number,
+    default: 150,
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  notip: {
+    type: Boolean,
+    default: false,
+  },
+  ext: {
+    type: Array,
+    default: () => ["jpg", "png", "gif", "bmp"],
+  },
+});
 
-const emit = defineEmits(['update:url', 'on-success'])
+const emit = defineEmits(["update:url", "on-success"]);
 
 const uploadData = ref({
-    imageViewerVisible: false,
-    progress: {
-        preview: '',
-        percent: 0
-    }
-})
+  imageViewerVisible: false,
+  progress: {
+    preview: "",
+    percent: 0,
+  },
+});
 
 // 预览
 function preview() {
-    uploadData.value.imageViewerVisible = true
+  uploadData.value.imageViewerVisible = true;
 }
 // 关闭预览
 function previewClose() {
-    uploadData.value.imageViewerVisible = false
+  uploadData.value.imageViewerVisible = false;
 }
 // 移除
 function remove() {
-    emit('update:url', '')
+  emit("update:url", "");
 }
 function beforeUpload(file) {
-    const fileName = file.name.split('.')
-    const fileExt = fileName[fileName.length - 1]
-    const isTypeOk = props.ext.indexOf(fileExt) >= 0
-    const isSizeOk = file.size / 1024 / 1024 < props.size
-    if (!isTypeOk) {
-        ElMessage.error(`上传图片只支持 ${ props.ext.join(' / ') } 格式！`)
-    }
-    if (!isSizeOk) {
-        ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`)
-    }
-    if (isTypeOk && isSizeOk) {
-        uploadData.value.progress.preview = URL.createObjectURL(file)
-    }
-    return isTypeOk && isSizeOk
+  const fileName = file.name.split(".");
+  const fileExt = fileName[fileName.length - 1];
+  const isTypeOk = props.ext.indexOf(fileExt) >= 0;
+  const isSizeOk = file.size / 1024 / 1024 < props.size;
+  if (!isTypeOk) {
+    ElMessage.error(`上传图片只支持 ${props.ext.join(" / ")} 格式！`);
+  }
+  if (!isSizeOk) {
+    ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`);
+  }
+  if (isTypeOk && isSizeOk) {
+    uploadData.value.progress.preview = URL.createObjectURL(file);
+  }
+  return isTypeOk && isSizeOk;
 }
 function onProgress(file) {
-    uploadData.value.progress.percent = ~~file.percent
+  uploadData.value.progress.percent = ~~file.percent;
 }
 function onSuccess(res) {
-    uploadData.value.progress.preview = ''
-    uploadData.value.progress.percent = 0
-    emit('on-success', res)
+  uploadData.value.progress.preview = "";
+  uploadData.value.progress.percent = 0;
+  emit("on-success", res);
 }
 </script>
 
 <template>
-    <div class="upload-container">
-        <el-upload
-            :show-file-list="false"
-            :headers="headers"
-            :action="action"
-            :data="data"
-            :name="name"
-            :before-upload="beforeUpload"
-            :on-progress="onProgress"
-            :on-success="onSuccess"
-            drag
-            class="image-upload"
-        >
-            <el-image v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
-                <template #error>
-                    <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-                        <el-icon>
-                            <svg-icon name="ep:plus" />
-                        </el-icon>
-                    </div>
-                </template>
-            </el-image>
-            <div v-else class="image">
-                <el-image :src="url" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-                <div class="mask">
-                    <div class="actions">
-                        <span title="预览" @click.stop="preview">
-                            <el-icon>
-                                <svg-icon name="ep:zoom-in" />
-                            </el-icon>
-                        </span>
-                        <span title="移除" @click.stop="remove">
-                            <el-icon>
-                                <svg-icon name="ep:delete" />
-                            </el-icon>
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <div v-show="url === '' && uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
-                <el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-                <el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
-            </div>
-        </el-upload>
-        <div v-if="!notip" class="el-upload__tip">
-            <div style="display: inline-block;">
-                <el-alert :title="`上传图片支持 ${ ext.join(' / ') } 格式，且图片大小不超过 ${ size }MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
-            </div>
+  <div class="upload-container">
+    <el-upload
+      :show-file-list="false"
+      :headers="headers"
+      :action="action"
+      :data="data"
+      :name="name"
+      :before-upload="beforeUpload"
+      :on-progress="onProgress"
+      :on-success="onSuccess"
+      drag
+      class="image-upload"
+    >
+      <el-image
+        v-if="url === ''"
+        :src="url === '' ? placeholder : url"
+        :style="`width:${width}px;height:${height}px;`"
+        fit="fill"
+      >
+        <template #error>
+          <div
+            class="image-slot"
+            :style="`width:${width}px;height:${height}px;`"
+          >
+            <el-icon>
+              <svg-icon name="ep:plus" />
+            </el-icon>
+          </div>
+        </template>
+      </el-image>
+      <div v-else class="image">
+        <el-image
+          :src="url"
+          :style="`width:${width}px;height:${height}px;`"
+          fit="fill"
+        />
+        <div class="mask">
+          <div class="actions">
+            <span title="预览" @click.stop="preview">
+              <el-icon>
+                <svg-icon name="ep:zoom-in" />
+              </el-icon>
+            </span>
+            <span title="移除" @click.stop="remove">
+              <el-icon>
+                <svg-icon name="ep:delete" />
+              </el-icon>
+            </span>
+          </div>
         </div>
-        <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="[url]" @close="previewClose" />
+      </div>
+      <div
+        v-show="url === '' && uploadData.progress.percent"
+        class="progress"
+        :style="`width:${width}px;height:${height}px;`"
+      >
+        <el-image
+          :src="uploadData.progress.preview"
+          :style="`width:${width}px;height:${height}px;`"
+          fit="fill"
+        />
+        <el-progress
+          type="circle"
+          :width="Math.min(width, height) * 0.8"
+          :percentage="uploadData.progress.percent"
+        />
+      </div>
+    </el-upload>
+    <div v-if="!notip" class="el-upload__tip">
+      <div style="display: inline-block">
+        <el-alert
+          :title="`上传图片支持 ${ext.join(
+            ' / '
+          )} 格式，且图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}`"
+          type="info"
+          show-icon
+          :closable="false"
+        />
+      </div>
     </div>
+    <el-image-viewer
+      v-if="uploadData.imageViewerVisible"
+      :url-list="[url]"
+      @close="previewClose"
+    />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .upload-container {
-    line-height: initial;
+  line-height: initial;
 }
 .el-image {
-    display: block;
+  display: block;
 }
 .image {
-    position: relative;
-    border-radius: 6px;
-    overflow: hidden;
-    .mask {
-        opacity: 0;
-        position: absolute;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        background-color: var(--el-overlay-color-lighter);
-        transition: opacity 0.3s;
-        .actions {
-            width: 100px;
-            height: 100px;
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            justify-content: center;
-            @include position-center(xy);
-            span {
-                width: 50%;
-                text-align: center;
-                cursor: pointer;
-                color: var(--el-color-white);
-                transition: color 0.1s, transform 0.1s;
-                &:hover {
-                    transform: scale(1.5);
-                }
-                .el-icon {
-                    font-size: 24px;
-                }
-            }
+  position: relative;
+  border-radius: 6px;
+  overflow: hidden;
+  .mask {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--el-overlay-color-lighter);
+    transition: opacity 0.3s;
+    .actions {
+      width: 100px;
+      height: 100px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      @include position-center(xy);
+      span {
+        width: 50%;
+        text-align: center;
+        cursor: pointer;
+        color: var(--el-color-white);
+        transition: color 0.1s, transform 0.1s;
+        &:hover {
+          transform: scale(1.5);
         }
+        .el-icon {
+          font-size: 24px;
+        }
+      }
     }
-    &:hover .mask {
-        opacity: 1;
-    }
+  }
+  &:hover .mask {
+    opacity: 1;
+  }
 }
 .image-upload {
-    display: inline-block;
-    vertical-align: top;
+  display: inline-block;
+  vertical-align: top;
 }
 :deep(.el-upload) {
-    .el-upload-dragger {
-        display: inline-block;
-        padding: 0;
-        &.is-dragover {
-            border-width: 1px;
-        }
-        .image-slot {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            height: 100%;
-            color: var(--el-text-color-placeholder);
-            background-color: transparent;
-            i {
-                font-size: 30px;
-            }
-        }
-        .progress {
-            position: absolute;
-            top: 0;
-            &::after {
-                content: "";
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                background-color: var(--el-overlay-color-lighter);
-            }
-            .el-progress {
-                z-index: 1;
-                @include position-center(xy);
-                .el-progress__text {
-                    color: var(--el-text-color-placeholder);
-                }
-            }
-        }
+  .el-upload-dragger {
+    display: inline-block;
+    padding: 0;
+    &.is-dragover {
+      border-width: 1px;
     }
+    .image-slot {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      color: var(--el-text-color-placeholder);
+      background-color: transparent;
+      i {
+        font-size: 30px;
+      }
+    }
+    .progress {
+      position: absolute;
+      top: 0;
+      &::after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        background-color: var(--el-overlay-color-lighter);
+      }
+      .el-progress {
+        z-index: 1;
+        @include position-center(xy);
+        .el-progress__text {
+          color: var(--el-text-color-placeholder);
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/QuillEditor/index.vue b/src/components/QuillEditor/index.vue
index 01fdfe7..3bfdb0b 100644
--- a/src/components/QuillEditor/index.vue
+++ b/src/components/QuillEditor/index.vue
@@ -59,7 +59,6 @@ const setValue = () => {
 }
 const handleUpload = (e) => {
   const files = Array.prototype.slice.call(e.target.files)
-  // console.log(files, "files")
   if (!files) {
     return
   }
diff --git a/src/router/modules/emergency.js b/src/router/modules/emergency.js
index 7d1a249..b207d2e 100644
--- a/src/router/modules/emergency.js
+++ b/src/router/modules/emergency.js
@@ -1,9 +1,9 @@
 const Layout = () => import('@/layout/index.vue')
 export default {
-    path: '/emergency',
+    path: '/emer',
     component: Layout,
-    redirect: '/emergency/procession',
-    name: 'emergency',
+    redirect: '/emer/procession',
+    name: 'emer',
     meta: {
         auth: "emer",
         title: '应急管理',
diff --git a/src/router/modules/statistic.js b/src/router/modules/statistic.js
new file mode 100644
index 0000000..6badfbe
--- /dev/null
+++ b/src/router/modules/statistic.js
@@ -0,0 +1,25 @@
+const Layout = () => import('@/layout/index.vue')
+
+export default {
+    path: '/statistic',
+    component: Layout,
+    name: 'statistic',
+    redirect: '/statistic/s-index',
+    meta: {
+        auth: "statistic",
+        title: '统计分析',
+        icon: 'point',
+    },
+    children: [
+        {
+            path: 's-index',
+            name: 's-index',
+            component: () => import('@/views/statistic/index.vue'),
+            meta: {
+                auth: "statistic.index",
+                title: '统计分析',
+                sidebar: false
+            }
+        },
+    ]
+}
\ No newline at end of file
diff --git a/src/router/modules/work-manage.js b/src/router/modules/work-manage.js
new file mode 100644
index 0000000..e60526d
--- /dev/null
+++ b/src/router/modules/work-manage.js
@@ -0,0 +1,26 @@
+const Layout = () => import('@/layout/index.vue')
+
+export default {
+    path: '/work',
+    component: Layout,
+    name: 'work',
+    redirect: '/work/w-index',
+    meta: {
+        auth: "daily",
+        title: '工作管理',
+        icon: 'point',
+    },
+    children: [
+        {
+            path: 'w-index',
+            name: 'w-index',
+            component: () => import('@/views/work-manage/index.vue'),
+            meta: {
+                auth: "daily",
+                icon: 'point',
+                title: '工作管理',
+                sidebar: false
+            }
+        },
+    ]
+}
\ No newline at end of file
diff --git a/src/router/modules/work-trends.js b/src/router/modules/work-trends.js
index d5906c2..bceac7c 100644
--- a/src/router/modules/work-trends.js
+++ b/src/router/modules/work-trends.js
@@ -4,20 +4,19 @@ export default {
     path: '/trends',
     component: Layout,
     name: 'trends',
-    redirect: '/trends/index',
+    redirect: '/trends/t-index',
     meta: {
         auth: "trends",
         title: '工作动态',
         icon: 'point',
-        activeMenu: '/work-trends/index'
     },
     children: [
         {
-            path: 'index',
-            name: 'index',
+            path: 't-index',
+            name: 't-index',
             component: () => import('@/views/work-trends/index.vue'),
             meta: {
-                auth: "home.home",
+                auth: "trends.index",
                 title: '工作动态',
                 sidebar: false
             }
diff --git a/src/router/routes.js b/src/router/routes.js
index 40863ff..b10a30f 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -106,6 +106,8 @@ import emergency from "./modules/emergency";
 import system from "./modules/system";
 import base from './modules/basemanage';
 import trends from './modules/work-trends';
+import manage from './modules/work-manage';
+import statistic from './modules/statistic';
 
 // 动态路由（异步路由、导航栏路由）
 let asyncRoutes = [
@@ -120,6 +122,8 @@ let asyncRoutes = [
             base,
             emergency,
             trends,
+            manage,
+            statistic,
             system,
         ]
     }
diff --git a/src/views/statistic/components/gz.vue b/src/views/statistic/components/gz.vue
new file mode 100644
index 0000000..6e03952
--- /dev/null
+++ b/src/views/statistic/components/gz.vue
@@ -0,0 +1,131 @@
+<!-- 工作统计 -->
+<template>
+  <div>
+    <div class="h-layout space-between h-center">
+      <div>
+        <div class="h-layout">
+          <div class="tool-item" @click="getList">
+            <svg-icon name="refurbish" class="icon" />
+            <span>刷新</span>
+          </div>
+          <div class="tool-item">
+            <svg-icon name="export" class="icon" />
+            <span>导出</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-table
+      ref="loading"
+      class="table"
+      v-loading="tableDataloading"
+      :data="tableData"
+      header-row-class-name="el-one-header"
+      border
+    >
+      <el-table-column
+        prop="cName"
+        align="center"
+        :resizable="true"
+        label="村名"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="cz"
+        align="center"
+        :resizable="true"
+        label="常规工作"
+      >
+        <el-table-column
+          prop="cz"
+          align="center"
+          label="进行中"
+        ></el-table-column>
+        <el-table-column
+          prop="cz"
+          align="center"
+          label="已完成"
+        ></el-table-column>
+      </el-table-column>
+      <el-table-column
+        prop="db"
+        :resizable="true"
+        align="center"
+        label="督办工作"
+      >
+        <el-table-column
+          prop="cz"
+          align="center"
+          label="进行中"
+        ></el-table-column>
+        <el-table-column
+          prop="cz"
+          align="center"
+          label="已完成"
+        ></el-table-column>
+      </el-table-column>
+      <el-table-column
+        prop="yj"
+        :resizable="true"
+        align="center"
+        label="应急工作"
+      >
+        <el-table-column
+          prop="cz"
+          align="center"
+          label="进行中"
+        ></el-table-column>
+        <el-table-column
+          prop="cz"
+          align="center"
+          label="已完成"
+        ></el-table-column>
+      </el-table-column>
+      <el-table-column
+        prop="dj"
+        :resizable="true"
+        align="center"
+        label="党建工作"
+      >
+        <el-table-column
+          prop="cz"
+          align="center"
+          label="进行中"
+        ></el-table-column>
+        <el-table-column
+          prop="cz"
+          align="center"
+          label="已完成"
+        ></el-table-column>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <el-pagination
+      class="pagination"
+      v-model:current-page.sync="currentPage"
+      :page-sizes="[10, 15, 20, 30]"
+      v-model:page-size.sync="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+      background
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref } from "vue";
+import { ElMessageBox } from "element-plus";
+
+const search = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const tableData = ref([{ cName: "xxx村名" }, { cName: "xxx村名" }]);
+</script>
+
+<style lang="scss" scoped>
+.table {
+  margin-top: 16px;
+}
+</style>
diff --git a/src/views/statistic/components/hj.vue b/src/views/statistic/components/hj.vue
new file mode 100644
index 0000000..6aebd2a
--- /dev/null
+++ b/src/views/statistic/components/hj.vue
@@ -0,0 +1,69 @@
+<!-- 工作统计 -->
+<template>
+  <div>
+    <div class="h-layout space-between h-center">
+      <div>
+        <div class="h-layout">
+          <div class="tool-item" @click="getList">
+            <svg-icon name="refurbish" class="icon" />
+            <span>刷新</span>
+          </div>
+          <div class="tool-item">
+            <svg-icon name="export" class="icon" />
+            <span>导出</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-table
+      ref="loading"
+      class="table"
+      v-loading="tableDataloading"
+      :data="tableData"
+      header-row-class-name="el-one-header"
+      border
+    >
+      <el-table-column
+        prop="cName"
+        align="center"
+        :resizable="true"
+        label="村名"
+      >
+      </el-table-column>
+      <el-table-column prop="db" :resizable="true" align="center" label="本地户籍">
+      </el-table-column>
+      <el-table-column prop="yj" :resizable="true" align="center" label="常驻人口">
+      </el-table-column>
+      <el-table-column prop="yj" :resizable="true" align="center" label="流动人口">
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <el-pagination
+      class="pagination"
+      v-model:current-page.sync="currentPage"
+      :page-sizes="[10, 15, 20, 30]"
+      v-model:page-size.sync="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+      background
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref } from "vue";
+import { ElMessageBox } from "element-plus";
+
+const search = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const tableData = ref([{ cName: "xxx村名" }, { cName: "xxx村名" }]);
+</script>
+
+<style lang="scss" scoped>
+.table {
+  margin-top: 16px;
+}
+</style>
diff --git a/src/views/statistic/components/rylx.vue b/src/views/statistic/components/rylx.vue
new file mode 100644
index 0000000..61acdd6
--- /dev/null
+++ b/src/views/statistic/components/rylx.vue
@@ -0,0 +1,76 @@
+<!-- 工作统计 -->
+<template>
+  <div>
+    <div class="h-layout space-between h-center">
+      <div>
+        <div class="h-layout">
+          <div class="tool-item" @click="getList">
+            <svg-icon name="refurbish" class="icon" />
+            <span>刷新</span>
+          </div>
+          <div class="tool-item">
+            <svg-icon name="export" class="icon" />
+            <span>导出</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-table
+      ref="loading"
+      class="table"
+      v-loading="tableDataloading"
+      :data="tableData"
+      header-row-class-name="el-one-header"
+      border
+    >
+      <el-table-column prop="cName" :resizable="true" align="center" label="村名">
+      </el-table-column>
+      <el-table-column prop="db" :resizable="true" align="center" label="常住人口">
+      </el-table-column>
+      <el-table-column prop="db" :resizable="true" align="center" label="脱贫户">
+      </el-table-column>
+      <el-table-column prop="db" :resizable="true" align="center" label="新生儿">
+      </el-table-column>
+      <el-table-column prop="db" :resizable="true" align="center" label="在校生">
+      </el-table-column>
+      <el-table-column prop="db" :resizable="true" align="center" label="残疾人">
+      </el-table-column>
+      <el-table-column prop="db" :resizable="true" align="center" label="低保户">
+      </el-table-column>
+      <el-table-column prop="db" :resizable="true" align="center" label="五保户">
+      </el-table-column>
+      <el-table-column prop="db" :resizable="true" align="center" label="党员">
+      </el-table-column>
+      <el-table-column prop="db" :resizable="true" align="center" label="村组干部">
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <el-pagination
+      class="pagination"
+      v-model:current-page.sync="currentPage"
+      :page-sizes="[10, 15, 20, 30]"
+      v-model:page-size.sync="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+      background
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref } from "vue";
+import { ElMessageBox } from "element-plus";
+
+const search = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const tableData = ref([{ cName: "xxx村名" }, { cName: "xxx村名" }]);
+</script>
+
+<style lang="scss" scoped>
+.table {
+  margin-top: 16px;
+}
+</style>
diff --git a/src/views/statistic/components/tj.vue b/src/views/statistic/components/tj.vue
new file mode 100644
index 0000000..4d3e3cc
--- /dev/null
+++ b/src/views/statistic/components/tj.vue
@@ -0,0 +1,67 @@
+<!-- 工作统计 -->
+<template>
+  <div>
+    <div class="h-layout space-between h-center">
+      <div>
+        <div class="h-layout">
+          <div class="tool-item" @click="getList">
+            <svg-icon name="refurbish" class="icon" />
+            <span>刷新</span>
+          </div>
+          <div class="tool-item">
+            <svg-icon name="export" class="icon" />
+            <span>导出</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-table
+      ref="loading"
+      class="table"
+      v-loading="tableDataloading"
+      :data="tableData"
+      header-row-class-name="el-one-header"
+      border
+    >
+      <el-table-column
+        prop="cName"
+        align="center"
+        :resizable="true"
+        label="村名"
+      >
+      </el-table-column>
+      <el-table-column prop="db" :resizable="true" align="center" label="劳动关系">
+      </el-table-column>
+      <el-table-column prop="yj" :resizable="true" align="center" label="民事调解">
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <el-pagination
+      class="pagination"
+      v-model:current-page.sync="currentPage"
+      :page-sizes="[10, 15, 20, 30]"
+      v-model:page-size.sync="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+      background
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref } from "vue";
+import { ElMessageBox } from "element-plus";
+
+const search = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const tableData = ref([{ cName: "xxx村名" }, { cName: "xxx村名" }]);
+</script>
+
+<style lang="scss" scoped>
+.table {
+  margin-top: 16px;
+}
+</style>
diff --git a/src/views/statistic/components/yj.vue b/src/views/statistic/components/yj.vue
new file mode 100644
index 0000000..edd2e6b
--- /dev/null
+++ b/src/views/statistic/components/yj.vue
@@ -0,0 +1,71 @@
+<!-- 工作统计 -->
+<template>
+  <div>
+    <div class="h-layout space-between h-center">
+      <div>
+        <div class="h-layout">
+          <div class="tool-item" @click="getList">
+            <svg-icon name="refurbish" class="icon" />
+            <span>刷新</span>
+          </div>
+          <div class="tool-item">
+            <svg-icon name="export" class="icon" />
+            <span>导出</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-table
+      ref="loading"
+      class="table"
+      v-loading="tableDataloading"
+      :data="tableData"
+      header-row-class-name="el-one-header"
+      border
+    >
+      <el-table-column
+        prop="cName"
+        align="center"
+        :resizable="true"
+        label="村名"
+      >
+      </el-table-column>
+      <el-table-column prop="dj" :resizable="true" align="center" label="地震">
+      </el-table-column>
+      <el-table-column prop="cz" align="center" :resizable="true" label="火灾">
+      </el-table-column>
+      <el-table-column prop="db" :resizable="true" align="center" label="防汛">
+      </el-table-column>
+      <el-table-column prop="yj" :resizable="true" align="center" label="治安">
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <el-pagination
+      class="pagination"
+      v-model:current-page.sync="currentPage"
+      :page-sizes="[10, 15, 20, 30]"
+      v-model:page-size.sync="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+      background
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref } from "vue";
+import { ElMessageBox } from "element-plus";
+
+const search = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const tableData = ref([{ cName: "xxx村名" }, { cName: "xxx村名" }]);
+</script>
+
+<style lang="scss" scoped>
+.table {
+  margin-top: 16px;
+}
+</style>
diff --git a/src/views/statistic/index.vue b/src/views/statistic/index.vue
new file mode 100644
index 0000000..908bea7
--- /dev/null
+++ b/src/views/statistic/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="percentage-content">
+    <el-radio-group class="rg" v-model="tabIndex">
+      <template v-for="item in tabs" :key="item.val">
+        <el-radio-button :label="item.val">{{ item.name }}</el-radio-button>
+      </template>
+    </el-radio-group>
+    <div class="content">
+      <transition name="main" mode="out-in" appear>
+        <component :is="tabs[tabIndex].compon" />
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref } from "vue";
+import { ElMessageBox } from "element-plus";
+import GZ from "./components/gz.vue";
+import YJ from "./components/yj.vue";
+import TJ from "./components/tj.vue";
+import HJ from "./components/hj.vue";
+import RYLX from "./components/rylx.vue";
+
+const tabIndex = ref(0);
+const tabs = ref([
+  { name: "工作统计", val: 0, compon: GZ },
+  { name: "应急统计", val: 1, compon: YJ },
+  { name: "调解统计", val: 2, compon: TJ },
+  { name: "户籍统计", val: 3, compon: HJ },
+  { name: "人员类型统计", val: 4, compon: RYLX },
+]);
+</script>
+
+<style lang="scss" scoped>
+.percentage-content {
+  height: auto;
+  display: flex;
+  flex-direction: column;
+
+  .rg {
+    padding: 16px;
+    background: #ffffff;
+    box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
+    border-radius: 6px;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 10px;
+
+    :deep(.el-radio-button__inner) {
+      min-width: 150px;
+    }
+  }
+  .content {
+    width: 100%;
+    background: #fff;
+    border-radius: 0.26042vw;
+    box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
+    padding: 0.83333vw;
+    overflow-y: auto;
+    overflow-x: hidden !important;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+
+    .table {
+      margin-top: 16px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/setting/file.vue b/src/views/system/setting/file.vue
index 34c85a8..046e76d 100644
--- a/src/views/system/setting/file.vue
+++ b/src/views/system/setting/file.vue
@@ -1,13 +1,72 @@
 <template>
-  <div></div>
+  <div class="percentage-content">
+    <div class="content">
+      <el-form
+        ref="formRef"
+        :rules="ruleForm"
+        :model="formData"
+        class="center-form"
+      >
+        <el-form-item label="文件上传接口" style="width: 94%">
+          <el-input placeholder="请输入" type="input" v-model="formData.name" />
+        </el-form-item>
+      </el-form>
+      <div class="option">
+        <el-button @click="save" type="primary" class="btn">保存</el-button>
+      </div>
+    </div>
+  </div>
 </template>
-  
+
 <script lang='ts' setup>
-onMounted(() => {
-  import.meta.env.VITE_IFRAMEURL = 123;
-});
+import axios from "axios";
+const formData = ref({});
+
+/**
+ * 保存
+ */
+const save = () => {
+  axios
+    .put("/json/config.json", {
+      fileurl: 123,
+    })
+    .then((res) => {
+      axios.get("/json/config.json").then((suc) => {
+        alert("成功--------->" + JSON.stringify(suc));
+      });
+    })
+    .catch((error) => {
+      alert(error);
+    });
+};
 </script>
-  
-  <style lang="scss" scoped>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: fit-content;
+  background: #fff;
+  border-radius: 0.26042vw;
+  box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
+  padding: 0.83333vw;
+  overflow-y: auto;
+  overflow-x: hidden !important;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  position: relative;
+
+  .option {
+    bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .btn {
+      width: 10vw;
+    }
+  }
+}
 </style>
-  
\ No newline at end of file
diff --git a/src/views/system/setting/info.vue b/src/views/system/setting/info.vue
index af0787e..d521bc4 100644
--- a/src/views/system/setting/info.vue
+++ b/src/views/system/setting/info.vue
@@ -1,9 +1,73 @@
 <template>
-  <div></div>
+  <div class="percentage-content">
+    <div class="content">
+      <el-form
+        ref="formRef"
+        :rules="ruleForm"
+        :model="formData"
+        class="center-form"
+      >
+        <el-form-item label="系统名称" style="width: 94%">
+          <el-input placeholder="请输入" type="input" v-model="formData.name" />
+        </el-form-item>
+        <el-form-item label="版权信息" style="width: 94%">
+          <el-input
+            placeholder="请输入"
+            type="input"
+            v-model="formData.address"
+          />
+        </el-form-item>
+        <el-form-item label="logo图标" style="width: 94%">
+          <file-upload OTCType="logo" :uuid="uuid" userId="123" />
+        </el-form-item>
+      </el-form>
+      <div class="option">
+        <el-button @click="save" type="primary" class="btn">保存</el-button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang='ts' setup>
+import FileUpload from "@/components/CustomUpload/index.vue";
+import { getUUID } from "@/utils/common";
+const formData = ref({});
+const uuid = ref(getUUID());
+
+/**
+ * 保存
+ */
+const save = () => {
+  
+};
 </script>
 
 <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: fit-content;
+  background: #fff;
+  border-radius: 0.26042vw;
+  box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
+  padding: 0.83333vw;
+  overflow-y: auto;
+  overflow-x: hidden !important;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  position: relative;
+
+  .option {
+    bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .btn {
+      width: 10vw;
+    }
+  }
+}
 </style>
diff --git a/src/views/system/setting/protocol.vue b/src/views/system/setting/protocol.vue
index 9ce744b..81ff0ed 100644
--- a/src/views/system/setting/protocol.vue
+++ b/src/views/system/setting/protocol.vue
@@ -1,10 +1,94 @@
 <template>
-    <div></div>
-  </template>
-  
-  <script lang='ts' setup>
-  </script>
-  
-  <style lang="scss" scoped>
-  </style>
-  
\ No newline at end of file
+  <div class="percentage-content">
+    <el-radio-group class="rg" v-model="tabIndex">
+      <template v-for="item in tabs" :key="item.val">
+        <el-radio-button class="rb" :label="item.val">{{
+          item.name
+        }}</el-radio-button>
+      </template>
+    </el-radio-group>
+    <div class="content">
+      <div class="qedit">
+        <QuillEditor
+          class="qedit"
+          :value="form.content"
+          @updateValue="getMsg"
+        />
+      </div>
+      <div class="option">
+        <el-button type="primary" class="btn">保存</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref } from "vue";
+import { ElMessageBox } from "element-plus";
+
+const tabIndex = ref(0);
+const tabs = ref([
+  { name: "用户协议", val: 0 },
+  { name: "隐私协议", val: 1 },
+]);
+
+const form = ref<any>({ content: "" });
+const getMsg = (val) => {
+  form.content = val;
+};
+</script>
+
+<style lang="scss" scoped>
+.percentage-content {
+  height: auto;
+  display: flex;
+  flex-direction: column;
+
+  .rg {
+    padding: 16px;
+    background: #ffffff;
+    box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
+    border-radius: 6px;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 10px;
+
+    :deep(.el-radio-button__inner) {
+      min-width: 150px;
+    }
+  }
+  .content {
+    width: 100%;
+    background: #fff;
+    border-radius: 0.26042vw;
+    box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
+    padding: 0.83333vw;
+    overflow-y: auto;
+    overflow-x: hidden !important;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    .qedit {
+      height: 63vh;
+    }
+
+    .option {
+      margin: 50px 0 10px 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .btn {
+        width: 10vw;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/system/setting/safe.vue b/src/views/system/setting/safe.vue
index af0787e..66fcbbd 100644
--- a/src/views/system/setting/safe.vue
+++ b/src/views/system/setting/safe.vue
@@ -1,9 +1,71 @@
 <template>
-  <div></div>
+  <div class="percentage-content">
+    <div class="content">
+      <el-form
+        ref="formRef"
+        :rules="ruleForm"
+        :model="formData"
+        label-width="130"
+        class="center-form"
+      >
+        <el-form-item label="初始密码" style="width: 94%">
+          <el-input placeholder="请输入" type="input" v-model="formData.pwd" />
+        </el-form-item>
+        <el-form-item label="强制修改密码时间" style="width: 94%">
+          <el-input
+            placeholder="请输入"
+            type="input"
+            v-model="formData.address"
+          />
+        </el-form-item>
+        <el-form-item label="接口加密类型" style="width: 94%">
+          <el-input
+            placeholder="请输入"
+            type="input"
+            v-model="formData.address"
+          />
+        </el-form-item>
+      </el-form>
+      <div class="option">
+        <el-button type="primary" class="btn">保存</el-button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang='ts' setup>
+import FileUpload from "@/components/CustomUpload/index.vue";
+import { getUUID } from "@/utils/common";
+const formData = ref({});
+const uuid = ref(getUUID());
 </script>
 
 <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: fit-content;
+  background: #fff;
+  border-radius: 0.26042vw;
+  box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
+  padding: 0.83333vw;
+  overflow-y: auto;
+  overflow-x: hidden !important;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  position: relative;
+
+  .option {
+    bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .btn {
+      width: 10vw;
+    }
+  }
+}
 </style>
diff --git a/src/views/work-manage/components/cg.vue b/src/views/work-manage/components/cg.vue
new file mode 100644
index 0000000..36a0528
--- /dev/null
+++ b/src/views/work-manage/components/cg.vue
@@ -0,0 +1,60 @@
+<!-- 工作统计 -->
+<template>
+  <div>
+    <div class="h-layout space-between h-center">
+      <div>
+        <div class="h-layout">
+          <div class="tool-item" @click="getList">
+            <svg-icon name="refurbish" class="icon" />
+            <span>刷新</span>
+          </div>
+          <div class="tool-item">
+            <svg-icon name="export" class="icon" />
+            <span>导出</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-table
+      ref="loading"
+      class="table"
+      v-loading="tableDataloading"
+      :data="tableData"
+      header-row-class-name="el-one-header"
+      border
+    >
+      <el-table-column prop="year" align="center" label="年份" width="120"/>
+      <el-table-column prop="year" align="center" label="工作内容" />
+      <el-table-column prop="year" align="center" label="状态" width="120"/>
+      <el-table-column prop="year" align="center" label="处理人" width="200"/>
+    </el-table>
+    <!-- 分页 -->
+    <el-pagination
+      class="pagination"
+      v-model:current-page.sync="currentPage"
+      :page-sizes="[10, 15, 20, 30]"
+      v-model:page-size.sync="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+      background
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref } from "vue";
+import { ElMessageBox } from "element-plus";
+
+const search = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const tableData = ref([{ year: "2023" }, { year: "2024" }]);
+</script>
+
+<style lang="scss" scoped>
+.table {
+  margin-top: 16px;
+}
+</style>
diff --git a/src/views/work-manage/components/db.vue b/src/views/work-manage/components/db.vue
new file mode 100644
index 0000000..66dc937
--- /dev/null
+++ b/src/views/work-manage/components/db.vue
@@ -0,0 +1,10 @@
+<template>
+    <div>督办工作</div>
+  </template>
+  
+  <script lang='ts' setup>
+  </script>
+  
+  <style lang="scss" scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/work-manage/components/tj.vue b/src/views/work-manage/components/tj.vue
new file mode 100644
index 0000000..ad20e5b
--- /dev/null
+++ b/src/views/work-manage/components/tj.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>调解工作</div>
+</template>
+  
+  <script lang='ts' setup>
+</script>
+  
+  <style lang="scss" scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/views/work-manage/components/yj.vue b/src/views/work-manage/components/yj.vue
new file mode 100644
index 0000000..b254a29
--- /dev/null
+++ b/src/views/work-manage/components/yj.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>应急工作</div>
+</template>
+    
+    <script lang='ts' setup>
+</script>
+    
+    <style lang="scss" scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/views/work-manage/index.vue b/src/views/work-manage/index.vue
new file mode 100644
index 0000000..176f571
--- /dev/null
+++ b/src/views/work-manage/index.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="percentage-content">
+    <el-radio-group class="rg" v-model="tabIndex">
+      <template v-for="item in tabs" :key="item.val">
+        <el-radio-button :label="item.val">{{ item.name }}</el-radio-button>
+      </template>
+    </el-radio-group>
+    <div class="content">
+      <transition name="main" mode="out-in" appear>
+        <component :is="tabs[tabIndex].compon" />
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref } from "vue";
+import { ElMessageBox } from "element-plus";
+import CG from "./components/cg.vue";
+import DB from "./components/db.vue";
+import YJ from "./components/yj.vue";
+import TJ from "./components/tj.vue";
+
+const tabIndex = ref(0);
+const tabs = ref([
+  { name: "常规工作", val: 0, compon: CG },
+  { name: "督办工作", val: 1, compon: DB },
+  { name: "应急事件", val: 2, compon: YJ },
+  { name: "调解工作", val: 3, compon: TJ },
+]);
+</script>
+
+<style lang="scss" scoped>
+.percentage-content {
+  height: auto;
+  display: flex;
+  flex-direction: column;
+
+  .rg {
+    padding: 16px;
+    background: #ffffff;
+    box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
+    border-radius: 6px;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 10px;
+
+    :deep(.el-radio-button__inner) {
+      min-width: 150px;
+    }
+  }
+  .content {
+    width: 100%;
+    background: #fff;
+    border-radius: 0.26042vw;
+    box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
+    padding: 0.83333vw;
+    overflow-y: auto;
+    overflow-x: hidden !important;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+
+    .table {
+      margin-top: 16px;
+    }
+  }
+}
+</style>
diff --git a/src/views/work-trends/index.vue b/src/views/work-trends/index.vue
index 060515d..69a98dc 100644
--- a/src/views/work-trends/index.vue
+++ b/src/views/work-trends/index.vue
@@ -1,9 +1,185 @@
 <template>
-  <div>123</div>
+  <div class="percentage-content">
+    <el-radio-group class="rg" v-model="tabIndex">
+      <template v-for="item in tabs" :key="item.val">
+        <el-radio-button :label="item.val">{{ item.name }}</el-radio-button>
+      </template>
+    </el-radio-group>
+    <div class="content">
+      <div class="h-layout space-between h-center">
+        <div>
+          <div class="h-layout">
+            <div class="tool-item" @click="getList">
+              <svg-icon name="refurbish" class="icon" />
+              <span>刷新</span>
+            </div>
+            <div class="tool-item">
+              <svg-icon name="add" class="icon" />
+              <span>新增</span>
+            </div>
+          </div>
+        </div>
+        <div style="width: 30%">
+          <div>
+            <el-input
+              v-model="search"
+              placeholder="请输入关键字"
+              class="search-input"
+            >
+              <template #append>
+                <span class="search-bottom">
+                  <svg-icon name="search" class="icon_class" />
+                  <span>搜索</span>
+                </span>
+              </template>
+            </el-input>
+          </div>
+        </div>
+      </div>
+      <el-table
+        ref="loading"
+        class="table"
+        v-loading="tableDataloading"
+        :data="tableData"
+        header-row-class-name="el-one-header"
+        border
+      >
+        <el-table-column
+          align="center"
+          :resizable="true"
+          width="100"
+          label="序列"
+          type="index"
+        >
+          <template #default="scope">
+            {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="cName"
+          :resizable="true"
+          align="center"
+          label="村庄名称"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          :resizable="true"
+          align="center"
+          label="村长"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="phone"
+          :resizable="true"
+          align="center"
+          label="联系电话"
+        >
+        </el-table-column>
+        <el-table-column
+          :resizable="true"
+          align="center"
+          width="300"
+          label="操作"
+        >
+          <template #default="scope">
+            <span
+              class="operate"
+              @click="(dialogVisible = true), (currentItem = scope.row)"
+            >
+              <svg-icon name="edit" class="icon"></svg-icon>
+              <span class="edit">编辑</span>
+            </span>
+            <span
+              class="operate"
+              @click="(currentItem = scope.row), (visible = true)"
+            >
+              <svg-icon name="detail" class="icon"></svg-icon>
+              <span class="detail">详情</span>
+            </span>
+            <span class="operate" @click="del(scope.row, '删除')">
+              <svg-icon name="delete" class="icon"></svg-icon>
+              <span class="func">删除</span>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <el-pagination
+        class="pagination"
+        v-model:current-page.sync="currentPage"
+        :page-sizes="[10, 15, 20, 30]"
+        v-model:page-size.sync="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        background
+      >
+      </el-pagination>
+    </div>
+  </div>
 </template>
 
 <script lang='ts' setup>
+import { onMounted, reactive, ref } from "vue";
+import { ElMessageBox } from "element-plus";
+
+const tabIndex = ref(0);
+const tabs = ref([
+  { name: "党建统领", val: 0 },
+  { name: "经济生态", val: 1 },
+  { name: "公共服务", val: 2 },
+  { name: "平安法治", val: 3 },
+]);
+
+const search = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const tableData = ref([
+  { cName: "xxx村名", name: "村长名称", phone: "村长电话" },
+]);
+
+const dialogVisible = ref(false);
+const currentItem = ref({});
 </script>
 
 <style lang="scss" scoped>
+.percentage-content {
+  height: auto;
+  display: flex;
+  flex-direction: column;
+
+  .rg {
+    padding: 16px;
+    background: #ffffff;
+    box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
+    border-radius: 6px;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 10px;
+
+    :deep(.el-radio-button__inner) {
+      min-width: 150px;
+    }
+  }
+  .content {
+    width: 100%;
+    background: #fff;
+    border-radius: 0.26042vw;
+    box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
+    height: 100%;
+    padding: 0.83333vw;
+    overflow-y: auto;
+    overflow-x: hidden !important;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+
+    .table {
+      margin-top: 16px;
+    }
+  }
+}
 </style>