2025年04月01日18:07:16

components.d.ts

@@ -8,24 +8,14 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     BatchImp: typeof import('./src/components/batch-imp.vue')['default']
-    copy: typeof import('./src/components/countup copy.vue')['default']
     Countup: typeof import('./src/components/countup.vue')['default']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
-    ElCalendar: typeof import('element-plus/es')['ElCalendar']
     ElCard: typeof import('element-plus/es')['ElCard']
-    ElCarousel: typeof import('element-plus/es')['ElCarousel']
-    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
-    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
-    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
-    ElCountdown: typeof import('element-plus/es')['ElCountdown']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
@@ -37,43 +27,21 @@ declare module '@vue/runtime-core' {
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElProgress: typeof import('element-plus/es')['ElProgress']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
-    ElRate: typeof import('element-plus/es')['ElRate']
-    ElResult: typeof import('element-plus/es')['ElResult']
     ElRow: typeof import('element-plus/es')['ElRow']
-    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElSpace: typeof import('element-plus/es')['ElSpace']
-    ElStatistic: typeof import('element-plus/es')['ElStatistic']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
-    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTour: typeof import('element-plus/es')['ElTour']
-    ElTourStep: typeof import('element-plus/es')['ElTourStep']
-    ElTransfer: typeof import('element-plus/es')['ElTransfer']
     ElUpload: typeof import('element-plus/es')['ElUpload']
-    ElWatermark: typeof import('element-plus/es')['ElWatermark']
     Header: typeof import('./src/components/header.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
@@ -82,7 +50,6 @@ declare module '@vue/runtime-core' {
     TableDetail: typeof import('./src/components/table-detail.vue')['default']
     TableEdit: typeof import('./src/components/table-edit.vue')['default']
     TableSearch: typeof import('./src/components/table-search.vue')['default']
-    Tabs: typeof import('./src/components/tabs.vue')['default']
     UploadImg: typeof import('./src/components/upload-img.vue')['default']
   }
 }

src/components/header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="header">
+  <div class="app-wrapper-header">
     <!-- 折叠按钮 -->
     <div class="header-left">
       <div class="web-title">
@@ -7,7 +7,7 @@
           {{ item }}{{ index != tab.list.length - 1 ? " / " : "" }}
         </div>
       </div>
-      <div class="web-time">2025/03/26 10:05</div>
+      <div class="web-time">{{ format(comm.time) }}</div>
     </div>
     <div class="header-right">
       <div class="header-user-con">
@@ -51,17 +51,20 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
 import { useSidebarStore } from "../store/sidebar";
+import { useCommonStore } from "../store/common";
 import { useRouter } from "vue-router";
 import imgurl from "../assets/img/img.jpg";
 import { useTabsStore } from "@/store/tabs";
 import { routes } from "@/router/index";
 import { RouteRecordRaw } from "vue-router";
+import { format } from "@/utils";
 const tab = useTabsStore();
 
 const username: string | null = localStorage.getItem("vuems_name");
 const message: number = 2;
 
 const sidebar = useSidebarStore();
+const comm = useCommonStore();
 
 // onMounted(() => {
 //   if (document.body.clientWidth < 1500) {
@@ -85,7 +88,7 @@ const toPage = (index: number) => {
   if (!item.component) return;
   router.push(item.path);
 };
-const getPath = (list: RouteRecordRaw[], name: string) => {
+const getPath = (list: any[], name: string) => {
   for (let i = 0; i < list.length; i++) {
     const item = list[i];
     if (item.meta.tabs[item.meta.tabs.length - 1] == name) {
@@ -106,7 +109,7 @@ const setFullScreen = () => {
 };
 </script>
 <style scoped lang="less">
-.header {
+.app-wrapper-header {
   flex-shrink: 0;
   display: flex;
   justify-content: space-between;

src/components/sidebar.vue

@@ -104,7 +104,7 @@ const collapseChage = () => {
   position: fixed;
   top: 0px;
   z-index: 1001;
-  overflow: visible;
+  overflow: hidden;
   width: 210px;
 
   .sidebar-head {

src/components/table-custom.vue

@@ -83,6 +83,7 @@
 import { toRefs, PropType, ref } from "vue";
 import { Delete, Edit, View, Refresh } from "@element-plus/icons-vue";
 import { ElMessageBox } from "element-plus";
+import { TableItem } from "@/types/table";
 
 const props = defineProps({
   // 表格相关
@@ -154,7 +155,7 @@ columns.value.forEach((item) => {
   }
 });
 
-const tableRowClassName = ({ row, rowIndex }: { row: User; rowIndex: number }) => {
+const tableRowClassName = ({ row, rowIndex }: { row: TableItem; rowIndex: number }) => {
   if (rowIndex % 2 == 1) {
     return "warning-row";
   }

src/components/table-edit.vue

@@ -16,7 +16,7 @@
           ></el-input>
           <el-input-number v-else-if="item.type === 'number'" v-model="form[item.prop]" :disabled="item.disabled" controls-position="right"></el-input-number>
           <el-select v-else-if="item.type === 'select'" v-model="form[item.prop]" :disabled="item.disabled" :placeholder="item.placeholder" clearable>
-            <el-option v-for="opt in item.opts" :label="opt.label" :value="opt.value"></el-option>
+            <el-option v-for="opt in item.opts" :label="opt.label" :value="opt.value" :disabled="opt.disabled"></el-option>
           </el-select>
           <el-date-picker v-else-if="item.type === 'date'" type="date" v-model="form[item.prop]" :value-format="item.format"></el-date-picker>
           <el-input

src/layout/index.vue

@@ -34,6 +34,17 @@ console.log(sidebar);
 </script>
 
 <style scoped lang="less">
+// @media screen and (max-width: 800px) {
+//   .main-container {
+//     margin-left: 0 !important;
+//   }
+//   .sidebar-container {
+//     width: 0 !important;
+//   }
+//   .app-wrapper-header {
+//     width: 100% !important;
+//   }
+// }
 .app-wrapper {
   position: relative;
   width: 100%;

src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw, } from 'vue-router';
 import { usePermissStore } from '../store/permiss';
+import { useCommonStore } from '../store/common';
 import { useTabsStore } from "@/store/tabs";
 import Layout from '@/layout/index.vue';
 import NProgress from 'nprogress';
@@ -117,8 +118,10 @@ router.beforeEach((to, from, next) => {
 
   NProgress.start();
   const permiss = usePermissStore();
+  const comm = useCommonStore();
   const tab = useTabsStore();
   tab.setTabsItem(to.meta.tabs);
+  comm.setTime()
 
   if (typeof to.meta.permiss == 'string' && !permiss.key.includes(to.meta.permiss)) {
     // 如果没有权限，则进入403

src/store/common.ts

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useCommonStore = defineStore('common', {
+  state: () => {
+    return {
+      time: new Date()
+    };
+  },
+  getters: {},
+  actions: {
+    setTime() {
+      this.time = new Date();
+    }
+  }
+});

src/utils/index.ts

@@ -1,14 +1,72 @@
+import dayjs from "dayjs";
+
 export const setProperty = (prop: string, val: any, dom = document.documentElement) => {
-    dom.style.setProperty(prop, val);
+  dom.style.setProperty(prop, val);
 };
 
 export const mix = (color1: string, color2: string, weight: number = 0.5): string => {
-    let color = '#';
+  let color = '#';
-    for (let i = 0; i <= 2; i++) {
+  for (let i = 0; i <= 2; i++) {
-        const c1 = parseInt(color1.substring(1 + i * 2, 3 + i * 2), 16);
+    const c1 = parseInt(color1.substring(1 + i * 2, 3 + i * 2), 16);
-        const c2 = parseInt(color2.substring(1 + i * 2, 3 + i * 2), 16);
+    const c2 = parseInt(color2.substring(1 + i * 2, 3 + i * 2), 16);
-        const c = Math.round(c1 * weight + c2 * (1 - weight));
+    const c = Math.round(c1 * weight + c2 * (1 - weight));
-        color += c.toString(16).padStart(2, '0');
+    color += c.toString(16).padStart(2, '0');
-    }
+  }
-    return color;
+  return color;
 };
+
+
+/**
+ *
+ * @param {*} time 时间
+ * @param {*} fmStr 格式化格式 YYYY-MM-DD HH:mm:ss
+ * @returns
+ */
+export function format(time: Date | string, fmStr: string = "YYYY-MM-DD HH:mm:ss") {
+  if (!time) return "";
+  return dayjs(typeof time == 'string' ? new Date(time) : time).format(fmStr);
+}
+
+/**
+ * 
+ * @param fn 需要防抖的函数
+ * @param time 防抖时间
+ * @returns 
+ */
+
+export const debounce = (fn: Function, time: number = 300) => {
+  let timer;
+  return function (...argu) {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    timer = setTimeout(() => {
+      fn(...argu);
+      clearTimeout(timer);
+      timer = null;
+    }, time);
+  };
+}
+
+/**
+ * 
+ * @param fn 需要节流的函数
+ * @param time 需要节流的时间
+ * @returns 
+ */
+export const throttle = (fn: Function, time: number = 300) => {
+  let flag = true
+  return function (...argu) {
+    if (!flag) {
+      return
+    }
+    flag = false
+    let timer = setTimeout(() => {
+      fn(...argu)
+      flag = true
+      clearTimeout(timer)
+      timer = null
+    }, time)
+  }
+}

src/views/monitoringCenter/index.vue

@@ -45,9 +45,11 @@ import DeviceRecord from "./deviceRecord.vue";
 import { MapCustom } from "@/utils/mapCustom";
 import * as echarts from "echarts";
 import { fetchData } from "@/api/index";
-import { onMounted, ref, reactive } from "vue";
+import { onMounted, onDeactivated, ref, reactive } from "vue";
 import { TableItem } from "@/types/table";
+import { debounce } from "@/utils";
 const chartRef = ref(null);
+let myChart = null;
 
 const ringOptions = {
   xAxis: {
@@ -85,14 +87,21 @@ const changePage = (val: number) => {
   getData();
 };
 
+const handleResize = debounce(() => {
+  myChart.resize();
+}, 200);
+
 onMounted(() => {
   new MapCustom({ dom: "mapcontainer" });
-
   if (chartRef.value) {
-    const myChart = echarts.init(chartRef.value);
+    myChart = echarts.init(chartRef.value);
     myChart.setOption(ringOptions);
+    window.addEventListener("resize", handleResize);
   }
 });
+onDeactivated(() => {
+  window.removeEventListener("resize", handleResize);
+});
 </script>
 <style scoped lang="less">
 .monitoringMap {

src/views/statisticalCenter/deviceHistory.vue

@@ -31,6 +31,7 @@ const value1 = ref("");
 </script>
 <style scoped lang="less">
 .card {
+  height: 380px;
   height: 100%;
   background: #ffffff;
   padding: 16px 10px;
@@ -40,6 +41,7 @@ const value1 = ref("");
   flex-direction: column;
   border-radius: 5px;
   box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  margin-bottom: 20px;
   .card-head {
     color: #061451;
     font-size: 20px;

src/views/statisticalCenter/emergencyList.vue

@@ -59,6 +59,7 @@ let columns = [
   flex-direction: column;
   border-radius: 5px;
   box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  margin-bottom: 20px;
   .card-head {
     color: #061451;
     font-size: 20px;

src/views/statisticalCenter/index.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="container scrollbar">
     <MonitoringTop />
-    <el-row :gutter="20" style="margin-top: 20px; height: 380px">
+    <el-row :gutter="20">
-      <el-col :span="16">
+      <el-col class="elcol" :span="16" :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
         <DeviceHistory>
           <template #chart>
             <div ref="chartRef" style="flex: 1"></div>
           </template>
         </DeviceHistory>
       </el-col>
-      <el-col :span="8">
+      <el-col class="elcol" :span="8" :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
         <OnLineStatistics>
           <template #chart>
             <div ref="chartRef1" style="flex: 1"></div>
@@ -17,11 +17,11 @@
         </OnLineStatistics>
       </el-col>
     </el-row>
-    <el-row :gutter="20" style="margin-top: 20px; height: 380px">
+    <el-row :gutter="20">
-      <el-col :span="16">
+      <el-col class="elcol" :span="16" :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
         <EmergencyList :tableData="tableData" :page="page" :getData="getData" :changePage="changePage"></EmergencyList>
       </el-col>
-      <el-col :span="8">
+      <el-col class="elcol" :span="8" :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
         <OnLineStatistics>
           <template #chart>
             <div ref="chartRef2" style="width: 100%; height: 100%"></div>
@@ -40,12 +40,17 @@ import * as echarts from "echarts";
 import { MapCustom } from "@/utils/mapCustom";
 import { fetchData } from "@/api/index";
 import { TableItem } from "@/types/table";
-import { onMounted, ref, reactive } from "vue";
+import { onMounted, ref, reactive, onDeactivated } from "vue";
+import { debounce } from "@/utils";
 
 const chartRef = ref(null);
 const chartRef1 = ref(null);
 const chartRef2 = ref(null);
 
+let myChart = null;
+let myChart1 = null;
+let myChart2 = null;
+
 const option = {
   xAxis: {
     type: "category",
@@ -102,18 +107,34 @@ const changePage = (val: number) => {
   getData();
 };
 
-onMounted(() => {
+const handleResize = debounce(() => {
-  if (chartRef.value) {
+  myChart.resize();
-    new MapCustom({ dom: "mapcontainer" });
+  myChart1.resize();
+  myChart2.resize();
+}, 200);
 
-    const myChart = echarts.init(chartRef.value);
+onMounted(() => {
+  new MapCustom({ dom: "mapcontainer" });
+
+  if (chartRef.value) {
+    myChart = echarts.init(chartRef.value);
     myChart.setOption(option);
 
-    const myChart1 = echarts.init(chartRef1.value);
+    myChart1 = echarts.init(chartRef1.value);
     myChart1.setOption(option1);
 
-    const myChart2 = echarts.init(chartRef2.value);
+    myChart2 = echarts.init(chartRef2.value);
     myChart2.setOption(option1);
+    window.addEventListener("resize", handleResize);
   }
 });
+onDeactivated(() => {
+  window.removeEventListener("resize", handleResize);
+});
 </script>
+<style lang="less" scoped>
+.elcol {
+  height: 380px;
+  margin-bottom: 20px;
+}
+</style>

src/views/statisticalCenter/monitoringTop.vue

@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20" class="monitoring-top">
-    <el-col :span="6" v-for="item in funcList">
+    <el-col :span="24" :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="item in funcList">
       <div class="item">
         <div class="item-left">
           <div class="item-left-head">
@@ -37,6 +37,7 @@ let funcList = [
   justify-content: space-between;
   .item {
     height: 160px;
+    margin-bottom: 20px;
     padding: 25px 33px 16px 36px;
     box-sizing: border-box;
     background: #ffffff;

src/views/statisticalCenter/onLineStatistics.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="deviceStatistics card">
     <div class="card-head">
-      <div class="title">在线设备统计</div>
+      <div class="title">告警占比</div>
     </div>
     <slot name="chart"></slot>
   </div>
@@ -17,6 +17,7 @@
   display: flex;
   border-radius: 5px;
   box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  margin-bottom: 20px;
 
   .card-head {
     position: absolute;
@@ -26,6 +27,7 @@
     align-items: center;
     justify-content: space-between;
     transform: translateX(-10px);
+    margin-bottom: 20px;
     .title {
       &::before {
         display: inline-block;

src/views/synthesizeManage/userManage/index.vue

@@ -32,6 +32,9 @@
     <el-dialog title="重置密码" v-model="pwdVisible" width="700px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
       <TableEdit :form-data="rowData" :options="pwdOptions" :edit="true" :update="updateData" @cancel="handelCancel" />
     </el-dialog>
+    <el-dialog title="编辑类型" v-model="typeVisible" width="800px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
+      <UserType />
+    </el-dialog>
     <BatchImp ref="batchImpRef" />
   </div>
 </template>
@@ -44,14 +47,26 @@ import TableCustom from "@/components/table-custom.vue";
 import TableSearch from "@/components/table-search.vue";
 import TableEdit from "@/components/table-edit.vue";
 import BatchImp from "@/components/batch-imp.vue";
+import UserType from "./userType.vue";
 import { TableItem } from "@/types/table";
 import { FormOption, FormOptionList } from "@/types/form-option";
 
+const visible = ref(false);
+const typeVisible = ref(false);
+const pwdVisible = ref(false);
+const isEdit = ref(false);
+const rowData = ref({});
 // 查询相关
 const query = reactive({
   name: "",
 });
 const batchImpRef = ref();
+const page = reactive({
+  index: 1,
+  size: 10,
+  total: 200,
+});
+const tableData = ref<TableItem[]>([]);
 
 const searchOpt = ref<FormOptionList[]>([
   { type: "input", label: "用户名：", prop: "name" },
@@ -91,12 +106,44 @@ let columns = ref([
   { prop: "state", label: "状态" },
   { prop: "operator", label: "操作", width: 250 },
 ]);
-const page = reactive({
+
-  index: 1,
+// 新增/编辑弹窗相关
-  size: 10,
+let options = ref<FormOption>({
-  total: 200,
+  labelWidth: "100px",
+  span: 24,
+  list: [
+    { placeholder: "请输入用户名称", type: "input", label: "用户名称", prop: "name1", required: true },
+    { placeholder: "请输入电话号码", type: "input", label: "电话号码", prop: "money2", required: true },
+    { placeholder: "请输入警员号", type: "input", label: "警员号", prop: "money3", required: true },
+    {
+      placeholder: "请选择类型",
+      type: "select",
+      label: "类型",
+      opts: [
+        { label: "管理员", value: "1", disabled: true },
+        { label: "警察", value: "2" },
+        { label: "辅警", value: "3" },
+        { label: "协警", value: "4" },
+      ],
+      prop: "money4",
+      required: true,
+    },
+    { placeholder: "请输入密码", type: "password", label: "密码", prop: "mone5y", required: true },
+    { type: "switch", label: "状态", prop: "mone5y", required: true },
+    { placeholder: "请输入确认密码", type: "password", label: "确认密码", prop: "mon6ey" },
+    { placeholder: "请输入备注", type: "textarea", label: "备注", prop: "mon8ey" },
+  ],
+});
+// 新增/编辑弹窗相关
+let pwdOptions = ref<FormOption>({
+  labelWidth: "100px",
+  span: 24,
+  list: [
+    { type: "password", label: "原始密码", prop: "name1", required: true },
+    { type: "password", label: "新密码", prop: "money2", required: true },
+    { type: "password", label: "确认密码", prop: "money3", required: true },
+  ],
 });
-const tableData = ref<TableItem[]>([]);
 
 const handleImp = () => {
   batchImpRef.value.dialogVisible = true;
@@ -116,35 +163,6 @@ const changePage = (val: number) => {
   getData();
 };
 
-// 新增/编辑弹窗相关
-let options = ref<FormOption>({
-  labelWidth: "100px",
-  span: 24,
-  list: [
-    { type: "input", label: "用户名称", prop: "name1", required: true },
-    { type: "input", label: "电话号码", prop: "money2", required: true },
-    { type: "input", label: "警员号", prop: "money3", required: true },
-    { type: "select", label: "类型", prop: "money4", required: true },
-    { type: "input", label: "密码", prop: "mone5y", required: true },
-    { type: "input", label: "确认密码", prop: "mon6ey" },
-    { type: "textarea", label: "备注", prop: "mon8ey" },
-  ],
-});
-// 新增/编辑弹窗相关
-let pwdOptions = ref<FormOption>({
-  labelWidth: "100px",
-  span: 24,
-  list: [
-    { type: "password", label: "原始密码", prop: "name1", required: true },
-    { type: "password", label: "新密码", prop: "money2", required: true },
-    { type: "password", label: "确认密码", prop: "money3", required: true },
-  ],
-});
-const visible = ref(false);
-const pwdVisible = ref(false);
-const isEdit = ref(false);
-const rowData = ref({});
-
 // 删除相关
 const handelDel = (row: TableItem) => {
   ElMessageBox.confirm("确定要删除吗？", "提示", {

src/views/synthesizeManage/userManage/userType.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column prop="name" label="" width="150" align="center">
+        <template #default="{ row }">
+          <el-checkbox value="Value 1" size="large" v-if="row.flag" />
+          <el-input v-model="row.name" v-else />
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="date" label="web管理权限" width="150" align="center">
+        <template #default="{ row }">
+          <el-checkbox size="large" v-model="row.check" disabled>
+            <template #default>
+              <div class="box box1" v-if="!row.check">
+                <el-icon><CloseBold style="color: red" /></el-icon>
+              </div>
+              <div class="box box2" v-else>
+                <el-icon><Select style="color: #fff" /></el-icon>
+              </div>
+            </template>
+          </el-checkbox>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="APP权限" align="center">
+        <el-table-column prop="name" label="手铐管理权限" align="center">
+          <template #default="{ row }">
+            <el-checkbox value="Value 1" size="large" disabled>
+              <template #default>
+                <div class="box box1" v-if="!row.check">
+                  <el-icon><CloseBold style="color: red" /></el-icon>
+                </div>
+                <div class="box box2" v-else>
+                  <el-icon><Select style="color: #fff" /></el-icon>
+                </div>
+              </template>
+            </el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="告警管理权限" align="center">
+          <template #default="{ row }">
+            <el-checkbox value="Value 1" size="large" disabled>
+              <template #default>
+                <div class="box box1" v-if="!row.check">
+                  <el-icon><CloseBold style="color: red" /></el-icon>
+                </div>
+                <div class="box box2" v-else>
+                  <el-icon><Select style="color: #fff" /></el-icon>
+                </div>
+              </template>
+            </el-checkbox>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column prop="date" label="操作" width="200" align="center">
+        <template #default="scope">
+          <el-button link type="primary" size="small">锁定</el-button>
+          <el-button link type="primary" size="small">修改</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-button class="mt-4" style="width: 100%" @click="addType"> 添加类型 </el-button>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const tableData = ref([
+  {
+    name: "管理员",
+    flag: false,
+    check: false,
+  },
+  {
+    name: "警察",
+    flag: false,
+    check: false,
+  },
+  {
+    name: "辅警",
+    flag: false,
+    check: false,
+  },
+  {
+    name: "协警",
+    flag: false,
+    check: true,
+  },
+]);
+
+const addType = () => {
+  tableData.value = [
+    ...tableData.value,
+    {
+      name: "",
+      flag: false,
+      check: false,
+    },
+  ];
+};
+</script>
+
+<style scoped lang="less">
+.box {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #02174f;
+}
+.box1 {
+  background-color: #fff;
+}
+.box2 {
+  background-color: #02174f;
+}
+/deep/ .el-checkbox__input {
+  display: none;
+}
+</style>

src/views/system/menu.vue

@@ -1,144 +0,0 @@
-<template>
-    <div>
-        <div class="container">
-            <TableCustom :columns="columns" :tableData="menuData" row-key="index" :has-pagination="false"
-                :viewFunc="handleView" :delFunc="handleDelete" :editFunc="handleEdit">
-                <template #toolbarBtn>
-                    <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
-                </template>
-                <template #icon="{ rows }">
-                    <el-icon>
-                        <component :is="rows.icon"></component>
-                    </el-icon>
-                </template>
-            </TableCustom>
-
-        </div>
-        <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
-            :close-on-click-modal="false" @close="closeDialog">
-            <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData">
-                <template #parent>
-                    <el-cascader v-model="rowData.pid" :options="cascaderOptions" :props="{ checkStrictly: true }"
-                        clearable />
-                </template>
-            </TableEdit>
-        </el-dialog>
-        <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
-            <TableDetail :data="viewData">
-                <template #icon="{ rows }">
-                    <el-icon>
-                        <component :is="rows.icon"></component>
-                    </el-icon>
-                </template>
-            </TableDetail>
-        </el-dialog>
-    </div>
-</template>
-
-<script setup lang="ts" name="system-menu">
-import { ref } from 'vue';
-import { ElMessage } from 'element-plus';
-import { CirclePlusFilled } from '@element-plus/icons-vue';
-import { Menus } from '@/types/menu';
-import TableCustom from '@/components/table-custom.vue';
-import TableDetail from '@/components/table-detail.vue';
-import { FormOption } from '@/types/form-option';
-import { menuData } from '@/components/menu';
-
-// 表格相关
-let columns = ref([
-    { prop: 'title', label: '菜单名称', align: 'left' },
-    { prop: 'icon', label: '图标' },
-    { prop: 'index', label: '路由路径' },
-    { prop: 'permiss', label: '权限标识' },
-    { prop: 'operator', label: '操作', width: 250 },
-])
-
-const getOptions = (data: any) => {
-    return data.map(item => {
-        const a: any = {
-            label: item.title,
-            value: item.id,
-        }
-        if (item.children) {
-            a.children = getOptions(item.children)
-        }
-        return a
-    })
-}
-const cascaderOptions = ref(getOptions(menuData));
-
-
-// 新增/编辑弹窗相关
-let options = ref<FormOption>({
-    labelWidth: '100px',
-    span: 12,
-    list: [
-        { type: 'input', label: '菜单名称', prop: 'title', required: true },
-        { type: 'input', label: '路由路径', prop: 'index', required: true },
-        { type: 'input', label: '图标', prop: 'icon' },
-        { type: 'input', label: '权限标识', prop: 'permiss' },
-        { type: 'parent', label: '父菜单', prop: 'parent' },
-    ]
-})
-const visible = ref(false);
-const isEdit = ref(false);
-const rowData = ref<any>({});
-const handleEdit = (row: Menus) => {
-    rowData.value = { ...row };
-    isEdit.value = true;
-    visible.value = true;
-};
-const updateData = () => {
-    closeDialog();
-};
-
-const closeDialog = () => {
-    visible.value = false;
-    isEdit.value = false;
-};
-
-// 查看详情弹窗相关
-const visible1 = ref(false);
-const viewData = ref({
-    row: {},
-    list: []
-});
-const handleView = (row: Menus) => {
-    viewData.value.row = { ...row }
-    viewData.value.list = [
-        {
-            prop: 'id',
-            label: '菜单ID',
-        },
-        {
-            prop: 'pid',
-            label: '父菜单ID',
-        },
-        {
-            prop: 'title',
-            label: '菜单名称',
-        },
-        {
-            prop: 'index',
-            label: '路由路径',
-        },
-        {
-            prop: 'permiss',
-            label: '权限标识',
-        },
-        {
-            prop: 'icon',
-            label: '图标',
-        },
-    ]
-    visible1.value = true;
-};
-
-// 删除相关
-const handleDelete = (row: Menus) => {
-    ElMessage.success('删除成功');
-}
-</script>
-
-<style scoped></style>

src/views/system/role-permission.vue

@@ -1,76 +0,0 @@
-<template>
-    <div>
-        <el-tree
-            class="mgb10"
-            ref="tree"
-            :data="data"
-            node-key="id"
-            default-expand-all
-            show-checkbox
-            :default-checked-keys="checkedKeys"
-        />
-        <el-button type="primary" @click="onSubmit">保存权限</el-button>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { ElTree } from 'element-plus';
-import { menuData } from '@/components/menu';
-
-const props = defineProps({
-    permissOptions: {
-        type: Object,
-        required: true,
-    },
-});
-
-const menuObj = ref({});
-// const data = menuData.map((item) => {
-//     if (item.children) {
-//         menuObj.value[item.id] = item.children.map((sub) => sub.id);
-//     }
-//     return {
-//         id: item.id,
-//         label: item.title,
-//         children: item.children?.map((child) => {
-//             return {
-//                 id: child.id,
-//                 label: child.title,
-//             };
-//         }),
-//     };
-// });
-
-const getTreeData = (data) => {
-    return data.map((item) => {
-        const obj: any = {
-            id: item.id,
-            label: item.title,
-        };
-        if (item.children) {
-            menuObj.value[item.id] = item.children.map((sub) => sub.id);
-            obj.children = getTreeData(item.children);
-        }
-        return obj;
-    });
-};
-const data = getTreeData(menuData);
-const checkData = (data: string[]) => {
-    return data.filter((item) => {
-        return !menuObj.value[item] || data.toString().includes(menuObj.value[item].toString());
-    });
-};
-// 获取当前权限
-const checkedKeys = ref<string[]>(checkData(props.permissOptions.permiss));
-
-// 保存权限
-const tree = ref<InstanceType<typeof ElTree>>();
-const onSubmit = () => {
-    // 获取选中的权限
-    const keys = [...tree.value!.getCheckedKeys(false), ...tree.value!.getHalfCheckedKeys()] as number[];
-    console.log(keys);
-};
-</script>
-
-<style scoped></style>

src/views/system/role.vue

@@ -1,162 +0,0 @@
-<template>
-    <div>
-        <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
-        <div class="container">
-
-            <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
-                :delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
-                <template #toolbarBtn>
-                    <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
-                </template>
-                <template #status="{ rows }">
-                    <el-tag type="success" v-if="rows.status">启用</el-tag>
-                    <el-tag type="danger" v-else>禁用</el-tag>
-                </template>
-                <template #permissions="{ rows }">
-                    <el-button type="primary" size="small" plain @click="handlePermission(rows)">管理</el-button>
-                </template>
-            </TableCustom>
-        </div>
-        <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
-            :close-on-click-modal="false" @close="closeDialog">
-            <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" />
-        </el-dialog>
-        <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
-            <TableDetail :data="viewData">
-                <template #status="{ rows }">
-                    <el-tag type="success" v-if="rows.status">启用</el-tag>
-                    <el-tag type="danger" v-else>禁用</el-tag>
-                </template>
-            </TableDetail>
-        </el-dialog>
-        <el-dialog title="权限管理" v-model="visible2" width="500px" destroy-on-close>
-            <RolePermission :permiss-options="permissOptions" />
-        </el-dialog>
-    </div>
-</template>
-
-<script setup lang="ts" name="system-role">
-import { ref, reactive } from 'vue';
-import { ElMessage } from 'element-plus';
-import { Role } from '@/types/role';
-import { fetchRoleData } from '@/api';
-import TableCustom from '@/components/table-custom.vue';
-import TableDetail from '@/components/table-detail.vue';
-import RolePermission from './role-permission.vue'
-import { CirclePlusFilled } from '@element-plus/icons-vue';
-import { FormOption, FormOptionList } from '@/types/form-option';
-
-// 查询相关
-const query = reactive({
-    name: '',
-});
-const searchOpt = ref<FormOptionList[]>([
-    { type: 'input', label: '角色名称：', prop: 'name' }
-])
-const handleSearch = () => {
-    changePage(1);
-};
-
-// 表格相关
-let columns = ref([
-    { type: 'index', label: '序号', width: 55, align: 'center' },
-    { prop: 'name', label: '角色名称' },
-    { prop: 'key', label: '角色标识' },
-    { prop: 'status', label: '状态' },
-    { prop: 'permissions', label: '权限管理' },
-    { prop: 'operator', label: '操作', width: 250 },
-])
-const page = reactive({
-    index: 1,
-    size: 10,
-    total: 0,
-})
-const tableData = ref<Role[]>([]);
-const getData = async () => {
-    const res = await fetchRoleData()
-    tableData.value = res.data.list;
-    page.total = res.data.pageTotal;
-};
-getData();
-const changePage = (val: number) => {
-    page.index = val;
-    getData();
-};
-
-// 新增/编辑弹窗相关
-const options = ref<FormOption>({
-    labelWidth: '100px',
-    span: 24,
-    list: [
-        { type: 'input', label: '角色名称', prop: 'name', required: true },
-        { type: 'input', label: '角色标识', prop: 'key', required: true },
-        { type: 'switch', label: '状态', prop: 'status', required: false, activeText: '启用', inactiveText: '禁用' },
-    ]
-})
-const visible = ref(false);
-const isEdit = ref(false);
-const rowData = ref({});
-const handleEdit = (row: Role) => {
-    rowData.value = { ...row };
-    isEdit.value = true;
-    visible.value = true;
-};
-const updateData = () => {
-    closeDialog();
-    getData();
-};
-const closeDialog = () => {
-    visible.value = false;
-    isEdit.value = false;
-    rowData.value = {};
-};
-
-// 查看详情弹窗相关
-const visible1 = ref(false);
-const viewData = ref({
-    row: {},
-    list: [],
-    column: 1
-});
-const handleView = (row: Role) => {
-    viewData.value.row = { ...row }
-    viewData.value.list = [
-        {
-            prop: 'id',
-            label: '角色ID',
-        },
-        {
-            prop: 'name',
-            label: '角色名称',
-        },
-        {
-            prop: 'key',
-            label: '角色标识',
-        },
-        {
-            prop: 'status',
-            label: '角色状态',
-        },
-    ]
-    visible1.value = true;
-};
-
-// 删除相关
-const handleDelete = (row: Role) => {
-    ElMessage.success('删除成功');
-}
-
-
-// 权限管理弹窗相关
-const visible2 = ref(false);
-const permissOptions = ref({})
-const handlePermission = (row: Role) => {
-    visible2.value = true;
-    permissOptions.value = {
-        id: row.id,
-        permiss: row.permiss
-    };
-}
-</script>
-
-<style scoped></style>

src/views/system/user.vue

@@ -1,148 +0,0 @@
-<template>
-    <div>
-        <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
-        <div class="container">
-            <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
-                :delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
-                <template #toolbarBtn>
-                    <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
-                </template>
-            </TableCustom>
-
-        </div>
-        <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
-            :close-on-click-modal="false" @close="closeDialog">
-            <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" />
-        </el-dialog>
-        <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
-            <TableDetail :data="viewData"></TableDetail>
-        </el-dialog>
-    </div>
-</template>
-
-<script setup lang="ts" name="system-user">
-import { ref, reactive } from 'vue';
-import { ElMessage } from 'element-plus';
-import { CirclePlusFilled } from '@element-plus/icons-vue';
-import { User } from '@/types/user';
-import { fetchUserData } from '@/api';
-import TableCustom from '@/components/table-custom.vue';
-import TableDetail from '@/components/table-detail.vue';
-import TableSearch from '@/components/table-search.vue';
-import { FormOption, FormOptionList } from '@/types/form-option';
-
-// 查询相关
-const query = reactive({
-    name: '',
-});
-const searchOpt = ref<FormOptionList[]>([
-    { type: 'input', label: '用户名：', prop: 'name' }
-])
-const handleSearch = () => {
-    changePage(1);
-};
-
-// 表格相关
-let columns = ref([
-    { type: 'index', label: '序号', width: 55, align: 'center' },
-    { prop: 'name', label: '用户名' },
-    { prop: 'phone', label: '手机号' },
-    { prop: 'role', label: '角色' },
-    { prop: 'operator', label: '操作', width: 250 },
-])
-const page = reactive({
-    index: 1,
-    size: 10,
-    total: 0,
-})
-const tableData = ref<User[]>([]);
-const getData = async () => {
-    const res = await fetchUserData()
-    tableData.value = res.data.list;
-    page.total = res.data.pageTotal;
-};
-getData();
-
-const changePage = (val: number) => {
-    page.index = val;
-    getData();
-};
-
-// 新增/编辑弹窗相关
-let options = ref<FormOption>({
-    labelWidth: '100px',
-    span: 12,
-    list: [
-        { type: 'input', label: '用户名', prop: 'name', required: true },
-        { type: 'input', label: '手机号', prop: 'phone', required: true },
-        { type: 'input', label: '密码', prop: 'password', required: true },
-        { type: 'input', label: '邮箱', prop: 'email', required: true },
-        { type: 'input', label: '角色', prop: 'role', required: true },
-    ]
-})
-const visible = ref(false);
-const isEdit = ref(false);
-const rowData = ref({});
-const handleEdit = (row: User) => {
-    rowData.value = { ...row };
-    isEdit.value = true;
-    visible.value = true;
-};
-const updateData = () => {
-    closeDialog();
-    getData();
-};
-
-const closeDialog = () => {
-    visible.value = false;
-    isEdit.value = false;
-};
-
-// 查看详情弹窗相关
-const visible1 = ref(false);
-const viewData = ref({
-    row: {},
-    list: []
-});
-const handleView = (row: User) => {
-    viewData.value.row = { ...row }
-    viewData.value.list = [
-        {
-            prop: 'id',
-            label: '用户ID',
-        },
-        {
-            prop: 'name',
-            label: '用户名',
-        },
-        {
-            prop: 'password',
-            label: '密码',
-        },
-        {
-            prop: 'email',
-            label: '邮箱',
-        },
-        {
-            prop: 'phone',
-            label: '电话',
-        },
-        {
-            prop: 'role',
-            label: '角色',
-        },
-        {
-            prop: 'date',
-            label: '注册日期',
-        },
-    ]
-    visible1.value = true;
-};
-
-// 删除相关
-const handleDelete = (row: User) => {
-    ElMessage.success('删除成功');
-}
-</script>
-
-<style scoped></style>

tsconfig.json

@@ -7,6 +7,7 @@
     "strict": false,
     "jsx": "preserve",
     "sourceMap": true,
+    "allowJs": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,