2025年04月01日13:52:54

src/assets/css/main.css

@@ -18,9 +18,9 @@ i {
 }
 
 .container {
-  padding: 20px;
+  flex: 1;
+  padding: 0 20px;
   box-sizing: border-box;
-
 }
 
 .table-container {
@@ -28,6 +28,7 @@ i {
   padding: 22px 17px;
   box-sizing: border-box;
   border-radius: 5px;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
 }
 
 .el-table th {
@@ -99,3 +100,25 @@ i {
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
+
+.scrollbar {
+  overflow: auto;
+}
+
+.scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  background-color: #B2B2B2;
+  border-radius: 4px;
+}
+
+.scrollbar::-webkit-scrollbar-track:hover {
+  background-color: #fff;
+}
+
+.scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: #909399;
+}

src/components/table-edit.vue

@@ -19,6 +19,15 @@
             <el-option v-for="opt in item.opts" :label="opt.label" :value="opt.value"></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
+            v-else-if="item.type === 'password'"
+            type="password"
+            v-model="form[item.prop]"
+            :disabled="item.disabled"
+            :placeholder="item.placeholder"
+            clearable
+          ></el-input>
+
           <el-switch
             v-else-if="item.type === 'switch'"
             v-model="form[item.prop]"
@@ -39,6 +48,7 @@
     </el-row>
 
     <el-form-item>
+      <!-- <el-button @click="emit('cancel')">取 消</el-button> -->
       <el-button type="primary" @click="saveEdit(formRef)">保 存</el-button>
     </el-form-item>
   </el-form>
@@ -68,6 +78,8 @@ const { options, formData, edit, update } = defineProps({
   },
 });
 
+const emit = defineEmits(["cancel"]);
+
 const form = ref({ ...(edit ? formData : {}) });
 
 const rules: FormRules = options.list

src/components/table-search.vue

@@ -69,10 +69,11 @@ const resetForm = (formEl: FormInstance | undefined) => {
 
 <style scoped>
 .search-container {
-  padding: 20px 30px 0;
+  padding: 20px 20px 0;
   background-color: #fff;
   margin-bottom: 10px;
   border-radius: 5px;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
 }
 
 .el-select {

src/layout/index.vue

@@ -4,7 +4,14 @@
     <v-header />
     <div class="main-container">
       <div class="app-main" :class="{ 'content-collapse': sidebar.collapse }">
-        <el-scrollbar>
+        <router-view v-slot="{ Component }">
+          <transition name="move" mode="out-in">
+            <keep-alive>
+              <component :is="Component"></component>
+            </keep-alive>
+          </transition>
+        </router-view>
+        <!-- <el-scrollbar>
           <router-view v-slot="{ Component }">
             <transition name="move" mode="out-in">
               <keep-alive>
@@ -12,7 +19,7 @@
               </keep-alive>
             </transition>
           </router-view>
-        </el-scrollbar>
+        </el-scrollbar> -->
       </div>
     </div>
   </div>
@@ -42,10 +49,14 @@ console.log(sidebar);
     background-color: #f2f4fa;
   }
   .app-main {
-    height: 100vh;
+    // height: 100vh;
+    height: calc(100vh - 90px);
     position: relative;
     width: 100%;
-    padding-top: 70px;
+    display: flex;
+    flex-direction: column;
+    // padding-top: 70px;
+    margin-top: 70px;
     box-sizing: border-box;
     overflow: hidden;
   }

src/views/incidentDispose/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="container">
-    <el-row :gutter="20">
+    <el-row :gutter="20" class="el_row">
       <el-col :span="7">
         <div class="incidentList">
           <div class="tabs">
             <div class="tabs-item" :class="`${index == 0 ? 'active' : ''}`" v-for="(item, index) in tabs" :key="index">{{ item.label }}</div>
           </div>
-          <div class="list">
+          <div class="list scrollbar">
-            <div class="list-item active" v-for="item in 5" :key="item">
+            <div class="list-item active" v-for="item in 15" :key="item">
               <div class="img">
                 <img :src="handcuffs" alt="" />
               </div>
@@ -29,7 +29,7 @@
         </div>
       </el-col>
       <el-col :span="7">
-        <div class="info">
+        <div class="info scrollbar">
           <div class="info-text">设备序号：05</div>
           <div class="info-text">设备SN号：860116079430636</div>
           <div class="info-text">告警时间：2025/03/26 18:33:32</div>
@@ -138,7 +138,21 @@ onMounted(() => {
 
 <style scoped lang="less">
 .container {
+  overflow: hidden;
+  .el-row {
+    height: 100%;
+    .el-col {
+      height: 100%;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+  }
   .incidentList {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
     .tabs {
       display: flex;
       align-items: center;
@@ -169,6 +183,7 @@ onMounted(() => {
       }
     }
     .list {
+      flex: 1;
       .list-item {
         cursor: pointer;
         padding: 0 15px;
@@ -226,6 +241,8 @@ onMounted(() => {
     height: 100%;
     padding: 17px;
     box-sizing: border-box;
+    // overflow: auto;
+
     .info-text {
       color: #061451;
       font-size: 18px;

src/views/monitoringCenter/deviceHistory.vue

@@ -25,6 +25,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    transform: translateX(-10px);
     .title {
       &::before {
         display: inline-block;

src/views/monitoringCenter/deviceRecord.vue

@@ -64,6 +64,7 @@ let columns = [
     display: flex;
     align-items: center;
     justify-content: space-between;
+    transform: translateX(-10px);
     .title {
       &::before {
         display: inline-block;

src/views/monitoringCenter/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="container">
+  <div class="container scrollbar">
     <el-row :gutter="20">
-      <el-col :span="6"><DeviceInfo /></el-col>
+      <el-col :span="7"><DeviceInfo /></el-col>
-      <el-col :span="18">
+      <el-col :span="17">
         <MonitoringTop />
         <div v-if="false">
           <div class="monitoringMap" id="mapcontainer"></div>

src/views/monitoringCenter/monitoringTop.vue

@@ -24,7 +24,7 @@ import heart from "@/assets/img/heart.png";
 import temperature from "@/assets/img/temperature.png";
 import blood from "@/assets/img/blood.png";
 let funcList = [
-  { title: "当前心率", en: "DANGQIANXINLV", icon: heart, unit: "次/分", num: 86, color: "#FF0303" },
+  { title: "当前心率", en: "DANGQIANXINLV", icon: heart, unit: "次/分", num: 186, color: "#FF0303" },
   { title: "当前血氧", en: "DANGQIANXUEYANG", icon: blood, unit: "%", num: 99, color: "#8B51FD" },
   { title: "当前体表温度", en: "DANGQIANTIBIAOWENDU", icon: temperature, unit: "次/分", num: 86, color: "#FF6905" },
 ];
@@ -41,6 +41,7 @@ let funcList = [
     display: flex;
     align-items: center;
     justify-content: space-between;
+    position: relative;
     .item-left {
       display: flex;
       flex-direction: column;
@@ -69,8 +70,11 @@ let funcList = [
       }
     }
     .item-img {
-      width: 80px;
+      position: absolute;
-      height: 80px;
+      right: 20px;
+      top: 20px;
+      width: 60px;
+      height: 60px;
       flex-shrink: 0;
       img {
         width: 100%;

src/views/statisticalCenter/deviceHistory.vue

@@ -38,12 +38,15 @@ const value1 = ref("");
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  border-radius: 5px;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
   .card-head {
     color: #061451;
     font-size: 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    transform: translateX(-10px);
     .title {
       &::before {
         display: inline-block;

src/views/statisticalCenter/emergencyList.vue

@@ -57,12 +57,15 @@ let columns = [
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  border-radius: 5px;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
   .card-head {
     color: #061451;
     font-size: 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    transform: translateX(-10px);
     .title {
       &::before {
         display: inline-block;

src/views/statisticalCenter/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container scrollbar">
     <MonitoringTop />
     <el-row :gutter="20" style="margin-top: 20px; height: 380px">
       <el-col :span="16">

src/views/statisticalCenter/monitoringTop.vue

@@ -25,7 +25,7 @@ import onLine from "@/assets/img/onLine.png";
 import report from "@/assets/img/report.png";
 import newly from "@/assets/img/newly.png";
 let funcList = [
-  { title: "手铐总数", en: "SHOUKAOZONGSHU", icon: handcuffs, num: 326, color: "##71DDF9" },
+  { title: "手铐总数", en: "SHOUKAOZONGSHU", icon: handcuffs, num: 1326, color: "##71DDF9" },
   { title: "在线数量", en: "SHOUKAOZONGSHU", icon: onLine, num: 326, color: "##71DDF9" },
   { title: "告警数量", en: "SHOUKAOZONGSHU", icon: report, num: 99, color: "#8B51FD" },
   { title: "较昨日新增", en: "SHOUKAOZONGSHU", icon: newly, num: 86, color: "#FF6905" },
@@ -43,6 +43,9 @@ let funcList = [
     display: flex;
     align-items: center;
     justify-content: space-between;
+    border-radius: 5px;
+    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+    position: relative;
     .item-left {
       display: flex;
       flex-direction: column;
@@ -71,6 +74,9 @@ let funcList = [
       }
     }
     .item-img {
+      position: absolute;
+      right: 20px;
+      top: 20px;
       width: 80px;
       height: 80px;
       flex-shrink: 0;

src/views/statisticalCenter/onLineStatistics.vue

@@ -15,6 +15,8 @@
   box-sizing: border-box;
   position: relative;
   display: flex;
+  border-radius: 5px;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
 
   .card-head {
     position: absolute;
@@ -23,6 +25,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    transform: translateX(-10px);
     .title {
       &::before {
         display: inline-block;

src/views/synthesizeManage/areaManage/index.vue

@@ -2,16 +2,7 @@
   <div class="container">
     <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
     <div class="table-container">
-      <TableCustom
+      <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :refresh="getData" :currentPage="page.index" :changePage="changePage">
-        :columns="columns"
-        :tableData="tableData"
-        :total="page.total"
-        :delFunc="handleDelete"
-        :editFunc="handleEdit"
-        :refresh="getData"
-        :currentPage="page.index"
-        :changePage="changePage"
-      >
         <template #toolbarBtn>
           <el-button type="primary" @click="handleAdd">新增</el-button>
           <el-button>导出</el-button>
@@ -26,9 +17,9 @@
             {{ rows.state ? "正常" : "异常" }}
           </el-tag>
         </template>
-        <template #operator>
+        <template #operator="{ rows }">
-          <el-button link type="primary" size="small"> 修改 </el-button>
+          <el-button link type="primary" size="small" @click="handleEdit(rows)"> 修改 </el-button>
-          <el-button link type="danger" size="small"> 删除 </el-button>
+          <el-button link type="danger" size="small" @click="handelDel(rows)"> 删除 </el-button>
         </template>
       </TableCustom>
     </div>
@@ -38,7 +29,7 @@
 
 <script setup lang="ts" name="basetable">
 import { ref, reactive } from "vue";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
 import { CirclePlusFilled } from "@element-plus/icons-vue";
 import { fetchData } from "@/api/index";
 import TableCustom from "@/components/table-custom.vue";
@@ -98,16 +89,23 @@ const changePage = (val: number) => {
 const addRef = ref();
 const visible = ref(false);
 const rowData = ref({});
+
+// 编辑
 const handleEdit = (row: TableItem) => {
   rowData.value = { ...row };
   visible.value = true;
 };
-
+// 删除
-// 删除相关
+const handelDel = (row: TableItem) => {
-const handleDelete = (row: TableItem) => {
+  ElMessageBox.confirm("确定要删除吗？", "提示", {
-  ElMessage.success("删除成功");
+    type: "warning",
+  })
+    .then(async () => {
+      // ElMessage.success("删除成功");
+    })
+    .catch(() => {});
 };
-// 删除相关
+// 新增
 const handleAdd = () => {
   visible.value = true;
 };

src/views/synthesizeManage/deviceInfo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container scrollbar">
     <el-card class="baseInfo">
       <template #header>
         <div class="card-header">基本信息</div>

src/views/synthesizeManage/deviceManage/index.vue

@@ -2,16 +2,7 @@
   <div class="container">
     <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
     <div class="table-container">
-      <TableCustom
+      <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :refresh="getData" :currentPage="page.index" :changePage="changePage">
-        :columns="columns"
-        :tableData="tableData"
-        :total="page.total"
-        :delFunc="handleDelete"
-        :editFunc="handleEdit"
-        :refresh="getData"
-        :currentPage="page.index"
-        :changePage="changePage"
-      >
         <template #toolbarBtn>
           <el-button type="primary" @click="handleAdd">新增</el-button>
           <el-button @click="visible = true">手铐关联</el-button>
@@ -28,12 +19,12 @@
             {{ rows.state ? "正常" : "异常" }}
           </el-tag>
         </template>
-        <template #operator>
+        <template #operator="{ rows }">
           <el-button link type="primary" size="small" @click="router.push('deviceInfo')"> 详细信息 </el-button>
           <el-button link type="primary" size="small" @click="router.push('mapLocation')"> 地图位置 </el-button>
           <el-button link type="primary" size="small" @click="router.push('setting')"> 专项配置 </el-button>
-          <el-button link type="primary" size="small" @click="handleEdit"> 修改 </el-button>
+          <el-button link type="primary" size="small" @click="handleEdit(rows)"> 修改 </el-button>
-          <el-button link type="danger" size="small"> 删除 </el-button>
+          <el-button link type="danger" size="small" @click="handelDel(rows)"> 删除 </el-button>
         </template>
       </TableCustom>
     </div>
@@ -45,7 +36,7 @@
 
 <script setup lang="ts" name="basetable">
 import { ref, reactive } from "vue";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
 import { fetchData } from "@/api/index";
 import TableCustom from "@/components/table-custom.vue";
 import TableSearch from "@/components/table-search.vue";
@@ -119,6 +110,7 @@ const handleAdd = () => {
   visible.value = true;
 };
 
+// 编辑
 const handleEdit = (row: TableItem) => {
   // rowData.value = { ...row };
   TableEditOptions.value.list = editOp;
@@ -126,6 +118,17 @@ const handleEdit = (row: TableItem) => {
   visible.value = true;
 };
 
+// 删除
+const handelDel = (row: TableItem) => {
+  ElMessageBox.confirm("确定要删除吗？", "提示", {
+    type: "warning",
+  })
+    .then(async () => {
+      // ElMessage.success("删除成功");
+    })
+    .catch(() => {});
+};
+
 const updateData = () => {
   closeDialog();
   getData();

src/views/synthesizeManage/mapLocation/index.vue

@@ -6,8 +6,8 @@
           <div class="head">
             <div class="head-text">选择设备（SN列表）</div>
           </div>
-          <div class="list">
+          <div class="list scrollbar">
-            <div class="list-item" :class="`${index == 0 ? 'active' : ''}`" v-for="(item, index) in 5" :key="item">
+            <div class="list-item" :class="`${index == 0 ? 'active' : ''}`" v-for="(item, index) in 15" :key="item">
               <div class="img">
                 <img :src="handcuffs" alt="" />
               </div>
@@ -24,7 +24,6 @@
       <el-col :span="18" class="container-right">
         <div class="editTool">
           <span>时间区间：</span>
-
           <el-radio-group v-model="sectionType">
             <el-radio-button :value="1">小时</el-radio-button>
             <el-radio-button :value="2">天</el-radio-button>
@@ -77,11 +76,27 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
+.container {
+  overflow: hidden;
+  .el-row {
+    height: 100%;
+    .el-col {
+      height: 100%;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
 .incidentList {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
   .head {
     background-color: #fff;
     height: 70px;
     line-height: 70px;
+    flex-shrink: 0;
 
     .head-text {
       color: #061451;
@@ -100,6 +115,7 @@ onMounted(() => {
     }
   }
   .list {
+    flex: 1;
     .list-item {
       cursor: pointer;
       padding: 0 15px;

src/views/synthesizeManage/userManage/index.vue

@@ -2,16 +2,7 @@
   <div class="container">
     <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
     <div class="table-container">
-      <TableCustom
+      <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :refresh="getData" :currentPage="page.index" :changePage="changePage">
-        :columns="columns"
-        :tableData="tableData"
-        :total="page.total"
-        :delFunc="handleDelete"
-        :editFunc="handleEdit"
-        :refresh="getData"
-        :currentPage="page.index"
-        :changePage="changePage"
-      >
         <template #toolbarBtn>
           <el-button type="primary" @click="visible = true">类型编辑</el-button>
           <el-button type="primary" @click="visible = true">新增用户</el-button>
@@ -28,15 +19,18 @@
             {{ rows.state ? "正常" : "异常" }}
           </el-tag>
         </template>
-        <template #operator>
+        <template #operator="{ rows }">
-          <el-button link type="primary" size="small"> 重置密码 </el-button>
+          <el-button link type="primary" size="small" @click="pwdVisible = true"> 重置密码 </el-button>
-          <el-button link type="primary" size="small"> 修改 </el-button>
+          <el-button link type="primary" size="small" @click="handleEdit(rows)"> 修改 </el-button>
-          <el-button link type="danger" size="small"> 删除 </el-button>
+          <el-button link type="danger" size="small" @click="handelDel(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" />
+      <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" @cancel="closeDialog" />
+    </el-dialog>
+    <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>
     <BatchImp ref="batchImpRef" />
   </div>
@@ -44,7 +38,7 @@
 
 <script setup lang="ts" name="basetable">
 import { ref, reactive } from "vue";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
 import { fetchData } from "@/api/index";
 import TableCustom from "@/components/table-custom.vue";
 import TableSearch from "@/components/table-search.vue";
@@ -57,6 +51,8 @@ import { FormOption, FormOptionList } from "@/types/form-option";
 const query = reactive({
   name: "",
 });
+const batchImpRef = ref();
+
 const searchOpt = ref<FormOptionList[]>([
   { type: "input", label: "用户名：", prop: "name" },
   {
@@ -81,7 +77,6 @@ const searchOpt = ref<FormOptionList[]>([
     ],
   },
 ]);
-const batchImpRef = ref();
 
 // 表格相关
 let columns = ref([
@@ -135,14 +130,38 @@ let options = ref<FormOption>({
     { 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("确定要删除吗？", "提示", {
+    type: "warning",
+  })
+    .then(async () => {
+      // ElMessage.success("删除成功");
+    })
+    .catch(() => {});
+};
+// 修改相关
 const handleEdit = (row: TableItem) => {
   rowData.value = { ...row };
   isEdit.value = true;
   visible.value = true;
 };
+
 const updateData = () => {
   closeDialog();
   getData();
@@ -153,9 +172,9 @@ const closeDialog = () => {
   isEdit.value = false;
 };
 
-// 删除相关
+const handelCancel = () => {
-const handleDelete = (row: TableItem) => {
+  rowData.value = {};
-  ElMessage.success("删除成功");
+  pwdVisible.value = false;
 };
 </script>