推修改样式

refined-manager-ui/admin/src/App.vue

 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
+<style lang="less" scoped>
+/deep/.el-table th {
+  background: #fafafa !important;
+  color: rgba(0, 0, 0, 0.85) !important;
+}
+/deep/.el-table .cell {
+  font-size: 14px;
+}
+/deep/.el-table th,
+/deep/.el-table tr {
+  height: 54px;
+  text-align: center;
+}
+/deep/.el-drawer__header {
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 0;
+  padding-bottom: 20px;
+  color: #000;
+}
+</style>

refined-manager-ui/admin/src/assets/less/base.css

@@ -281,6 +281,7 @@ a {
   background: linear-gradient(90deg, #1845c6, #2999ff) !important;
 }
 .layout-menu-wrapper .layout-logo {
+  width: 335px;
   font-size: 20px;
   font-weight: bold;
 }
@@ -311,16 +312,17 @@ a {
   background-color: #1890ff !important;
 }
 .layout-header .layout-submenu-wrapper {
-  width: 95% !important;
+  width: 98% !important;
   margin: 0 auto !important;
   margin-top: 20px !important;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
+  padding-left: 0px !important;
 }
 .page.active {
-  width: 95% !important;
+  width: 98% !important;
   margin: 0 auto !important;
-  padding: 20px !important;
+  padding: 10px !important;
   padding-top: 0 !important;
 }
 .page {
@@ -329,3 +331,11 @@ a {
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
 }
+.el-button--primary {
+  background: linear-gradient(90deg, #5ab6ff 0%, #2e9aff 100%) !important;
+  color: #fff !important;
+}
+.el-button {
+  height: 32px;
+  line-height: 8px;
+}

refined-manager-ui/admin/src/assets/less/base.less

@@ -321,6 +321,7 @@ a {
   background: linear-gradient(90deg, #1845c6, #2999ff) !important;
 }
 .layout-menu-wrapper .layout-logo {
+  width: 335px;
   font-size: 20px;
   font-weight: bold;
 }
@@ -351,16 +352,17 @@ a {
   background-color: #1890ff !important;
 }
 .layout-header .layout-submenu-wrapper {
-  width: 95% !important;
+  width: 98% !important;
   margin: 0 auto !important;
   margin-top: 20px !important;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
+  padding-left: 0px !important;
 }
 .page.active {
-  width: 95% !important;
+  width: 98% !important;
   margin: 0 auto !important;
-  padding: 20px !important;
+  padding: 10px !important;
   padding-top: 0 !important;
 }
 .page {
@@ -369,3 +371,11 @@ a {
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
 }
+.el-button--primary {
+  background: linear-gradient(90deg, #5ab6ff 0%, #2e9aff 100%) !important;
+  color: #fff !important;
+}
+.el-button {
+  height: 32px;
+  line-height: 8px;
+}

refined-manager-ui/admin/src/components/DataTable.vue

@@ -25,7 +25,7 @@
       :width="column.width"
       :sortable="column.sortable"
       :show-overflow-tooltip="column.tooltip"
-      :align="column.align || 'left'"
+      :align="column.align || 'center'"
       :formatter="column.formatter"
       :reserve-selection="column.reserveSelection"
       :subColumns="column.subColumns"
@@ -38,7 +38,7 @@
         :label="sunColumn.label"
         :width="sunColumn.width"
         :sortable="sunColumn.sortable"
-        :align="sunColumn.align || 'left'"
+        :align="sunColumn.align || 'center'"
         :formatter="sunColumn.formatter"
       />
     </el-table-column>

refined-manager-ui/admin/src/components/DataTreeTable.vue

@@ -18,7 +18,7 @@
         :label="column.label"
         :width="column.width"
         :show-overflow-tooltip="column.tooltip"
-        :align="column.align || 'left'"
+        :align="column.align || 'center'"
         :formatter='column.formatter'
       >
       </el-table-column>

refined-manager-ui/admin/src/components/Header.vue

@@ -272,7 +272,7 @@ export default {
     line-height: 50px;
     font-size: 14px;
     color: #eee;
-    background: #1848c8;
+    // background: #1848c8;
     .layout-logo {
       height: 50px;
       .el-icon-menu {
@@ -288,6 +288,7 @@ export default {
 
     .menu-list {
       li {
+        width: 120px;
         a {
           display: block;
           padding: 0 12px;
@@ -326,6 +327,7 @@ export default {
       white-space: nowrap;
       overflow: auto;
       li {
+        margin-right: 10px;
         a {
           display: block;
           padding: 0 10px;

refined-manager-ui/admin/src/components/HeaderSite.vue

@@ -43,9 +43,9 @@
   </div>
 </template>
 <script>
- //import { getSiteTree } from "@/services/businessMatter";
+//import { getSiteTree } from "@/services/businessMatter";
 import session from "@/assets/utils/session";
- //import Cookie from "js-cookie";
+//import Cookie from "js-cookie";
 export default {
   data() {
     return {
@@ -111,12 +111,12 @@ export default {
         process.env.VUE_APP_SITETREE_URL == "undefined"
           ? "http://192.168.0.98:11078/base/site/siteTree"
           : process.env.VUE_APP_SITETREE_URL;
-      console.log(url)
+      console.log(url);
       this.$get(url).then((res) => {
         const { siteTree } = res.data;
         this.sitelist = siteTree;
         let arr = [];
-        const treeFn = function (e) {
+        const treeFn = function(e) {
           e.forEach((element) => {
             arr.push(element);
             if (element.children && element.children.length > 0) {
@@ -155,11 +155,11 @@ export default {
   position: relative;
 }
 .ant-dropdown-link {
-  padding: 0 20px;
   font-size: 14px;
-  min-width: 200px;
+  min-width: 150px;
   color: #eee;
   display: inline-block;
+  margin-top: 2px;
 }
 .select-site {
   position: fixed;

refined-manager-ui/admin/src/components/SearchForm.vue

@@ -325,13 +325,12 @@ export default {
           ) {
             //支持模糊查询,收尾增加百分号
             val = val.trim();
-            if(val.charAt(0)!='%'){
-              val = "%" + val
+            if (val.charAt(0) != "%") {
+              val = "%" + val;
             }
-            if(val.charAt(val.length-1)!='%'){
-                val =val + "%";
+            if (val.charAt(val.length - 1) != "%") {
+              val = val + "%";
             }
-
           }
         });
         newData[item] = this.decodeVal(val);
@@ -379,10 +378,18 @@ export default {
     width: 140px;
   }
 }
-
+.el-form--inline .el-form-item {
+  margin-right: 0;
+}
+.el-form-item {
+  margin-bottom: 10px !important;
+  margin-right: 0;
+  margin-left: 10px;
+}
 @media screen and (max-width: 800px) {
   .search-form-wapper {
     .el-form-item {
+      margin-bottom: 10px !important;
       width: 100%;
       .el-form-item__label {
         min-width: 70px;
@@ -397,4 +404,3 @@ export default {
   }
 }
 </style>
-

refined-manager-ui/admin/src/components/Table.vue

@@ -4,9 +4,9 @@
   <div class="layout-table" :loading="data.loading">
     <div class="table-head flex flex-pack-justify">
       <div class="table-head-left flex flex-align-center">
-        <slot name="breadcrumb">
+        <!-- <slot name="breadcrumb">
           <Breadcrumb style="margin-left: 10px" />
-        </slot>
+        </slot> -->
         <div class="buttons">
           <el-row>
             <slot name="table-head-left"></slot>
@@ -213,7 +213,7 @@
       v-if="!isShowButton('notPagination') ? false : data.pageInfo.totalResult"
     >
       <Pagination
-        style="float: left"
+        style="float: right"
         :total="data.pageInfo.totalResult"
         :prePageResult="data.pageInfo.prePageResult"
       />
@@ -325,10 +325,10 @@ export default {
 }
 .layout-table {
   .table-head {
-    margin-bottom: 10px;
+    // margin-bottom: 10px;
     //padding-bottom: 12px;
     // padding-top: 7px;
-    border-bottom: 1px solid #ededed;
+    // border-bottom: 1px solid #ededed;
     .el-breadcrumb {
       margin-right: 30px;
     }
@@ -349,7 +349,6 @@ export default {
   }
   .table-form {
     padding-top: 10px;
-    margin-top: 10px;
     overflow: hidden;
   }
   .search-form-wapper {

refined-manager-ui/admin/src/components/tools/TableButtons.vue

 <template>
   <span>
-    <el-button v-if='!noEdit'  type="text" icon="el-icon-edit"  size='mini' @click='$emit("edit", row)'  title="编辑">编辑</el-button>
+    <el-button
+      v-if="!noEdit"
+      type="text"
+      icon="el-icon-edit"
+      size="mini"
+      @click="$emit('edit', row)"
+      title="编辑"
+      >编辑</el-button
+    >
     <span>&nbsp;</span>
-    <el-button v-if='!noView' type="text" icon="el-icon-view"  size='mini' @click='$emit("view", row)'  title="查看">查看</el-button>
-     <span>&nbsp;</span>
-    <Confirm @confirm='$emit("del", row.id)' message='确定要删除该条记录吗？'>
-      <el-button v-if='!noDel' type="text" icon="el-icon-delete" size='mini'  title="删除">删除</el-button>
+    <el-button
+      v-if="!noView"
+      type="text"
+      icon="el-icon-view"
+      size="mini"
+      @click="$emit('view', row)"
+      title="查看"
+      >查看</el-button
+    >
+    <span>&nbsp;</span>
+    <Confirm @confirm="$emit('del', row.id)" message="确定要删除该条记录吗？">
+      <el-button
+        v-if="!noDel"
+        type="text"
+        icon="el-icon-delete"
+        size="mini"
+        title="删除"
+        style="margin-left: 0;margin-right: 5px;color: #FA4D4C;"
+        >删除</el-button
+      >
     </Confirm>
   </span>
 </template>
 
 <script>
-import Confirm from '@/components/Confirm.vue';
+import Confirm from "@/components/Confirm.vue";
 export default {
   props: {
     noEdit: {
       type: Boolean,
-      default: false
+      default: false,
     },
     noDel: {
       type: Boolean,
-      default: false
+      default: false,
     },
     noAdd: {
       type: Boolean,
-      default: false
+      default: false,
     },
     noView: {
       type: Boolean,
-      default: false
+      default: false,
     },
     row: {
       type: Object,
       required: true,
-      default: () => {}
+      default: () => {},
     },
   },
   components: {
     Confirm,
   },
-  methods: {
-
-  },
+  methods: {},
   data() {
-    return {
-
-    }
-  }
-}
+    return {};
+  },
+};
 </script>
-
-

refined-manager-ui/admin/src/views/Home.vue

@@ -16,7 +16,5 @@ export default {
 <style lang="less" scoped>
 .page-home {
   margin-top: 20px !important;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
 }
 </style>

refined-manager-ui/admin/src/views/Layout.vue

 <template>
-    <div :style="menuPageCss" class="pages page-layout">
-        <LayoutHeader v-if="menuPage!=='left'"></LayoutHeader>
-        <LayoutHeaderLeft @toggle="toggle" :isOpen="isOpen" v-if="menuPage==='left'" />
-        <router-view :class="{'active': !isOpen}" />
-    </div>
+  <div :style="menuPageCss" class="pages page-layout">
+    <LayoutHeader v-if="menuPage !== 'left'"></LayoutHeader>
+    <LayoutHeaderLeft
+      @toggle="toggle"
+      :isOpen="isOpen"
+      v-if="menuPage === 'left'"
+    />
+    <router-view :class="{ active: !isOpen }" />
+  </div>
 </template>
 <script>
 import LayoutHeader from "../components/Header";
@@ -13,54 +17,53 @@ const isPC = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
 const MenuPage = "top";
 
 export default {
-    components: {
-        LayoutHeader,
-        LayoutHeaderLeft,
+  components: {
+    LayoutHeader,
+    LayoutHeaderLeft,
+  },
+  data() {
+    return {
+      isOpen: isPC,
+      menuPage: MenuPage,
+    };
+  },
+  computed: {
+    menuPageCss() {
+      //左面和顶面菜单切换时，动态计划相关css参数
+      return {
+        "--padding-top": this.menuPage === "left" ? "60px" : "0px",
+        "--margin-left": this.menuPage === "left" ? "200px" : "0px",
+      };
     },
-    data() {
-        return {
-            isOpen: isPC,
-            menuPage: MenuPage,
-        };
-    },
-    computed: {
-        menuPageCss() {
-            //左面和顶面菜单切换时，动态计划相关css参数
-            return {
-                "--padding-top": this.menuPage === "left" ? "60px" : "0px",
-                "--margin-left": this.menuPage === "left" ? "200px" : "0px",
-            };
-        },
-    },
-    methods: {
-        toggle() {
-            this.isOpen = !this.isOpen;
-        },
+  },
+  methods: {
+    toggle() {
+      this.isOpen = !this.isOpen;
     },
+  },
 };
 </script>
 
 <style lang="less">
 .page {
-    min-height: calc(100vh - 100px);
-    width: 100%;
+  min-height: calc(100vh - 100px);
+  width: 100%;
 
-    position: relative;
-    background: #fff;
-    padding: var(--padding-top) 5px 5px 5px;
-    margin-left: 60px;
-    &.active {
-        margin-left: var(--margin-left);
-    }
+  position: relative;
+  background: #fff;
+  padding: var(--padding-top) 5px 5px 5px;
+  margin-left: 60px;
+  &.active {
+    margin-left: var(--margin-left);
+  }
 }
 .page-layout {
-    background: #eee;
+  background: #f0f2f5;
 }
-.layout-header .layout-menu-wrapper{
-    background: #2681e8!important;
-    height: 4rem;
-    line-height: 4rem;
+.layout-header .layout-menu-wrapper {
+  // background: #2681e8!important;
+  height: 4rem;
+  line-height: 4rem;
 }
-</style>
-
 
+</style>

refined-manager-ui/admin/src/views/appointment/config/dialogshow.vue

 <template>
-    <!-- 弹出框表单 -->
-    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
-        <el-form ref="form" :model="form" :rules="rules" label-width="200px">
-            <el-row>
-                            <Field :span="20" label="是否启用该服务" prop="used" v-model="form.used" type="radio" :enumData="dict.used" placeholder="请选择是否启用该服务"/>
-              <Field :span="20" label="监测周期配置">
-                <el-checkbox
-                    true-label="1"
-                    false-label="0"
-                    v-model="form.monday"
-                >周一</el-checkbox>
+  <!-- 弹出框表单 -->
+  <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
+    <el-form ref="form" :model="form" :rules="rules" label-width="200px">
+      <el-row style="margin-bottom: 20px;">
+        <Field
+          :span="20"
+          label="是否启用该服务"
+          prop="used"
+          v-model="form.used"
+          type="radio"
+          :enumData="dict.used"
+          placeholder="请选择是否启用该服务"
+        />
+        <Field :span="20" label="监测周期配置">
+          <el-checkbox true-label="1" false-label="0" v-model="form.monday"
+            >周一</el-checkbox
+          >
 
-                <el-checkbox
-                    true-label="1"
-                    false-label="0"
-                    v-model="form.tuesday"
-                >周二</el-checkbox>
+          <el-checkbox true-label="1" false-label="0" v-model="form.tuesday"
+            >周二</el-checkbox
+          >
 
-                <el-checkbox
-                    true-label="1"
-                    false-label="0"
-                    v-model="form.wednesday"
-                >周三</el-checkbox>
+          <el-checkbox true-label="1" false-label="0" v-model="form.wednesday"
+            >周三</el-checkbox
+          >
 
-                <el-checkbox
-                    true-label="1"
-                    false-label="0"
-                    v-model="form.thursday"
-                >周四</el-checkbox>
+          <el-checkbox true-label="1" false-label="0" v-model="form.thursday"
+            >周四</el-checkbox
+          >
 
-                <el-checkbox
-                    true-label="1"
-                    false-label="0"
-                    v-model="form.friday"
-                >周五</el-checkbox>
-                <el-checkbox
-                    true-label="1"
-                    false-label="0"
-                    v-model="form.saturday"
-                >周六</el-checkbox>
+          <el-checkbox true-label="1" false-label="0" v-model="form.friday"
+            >周五</el-checkbox
+          >
+          <el-checkbox true-label="1" false-label="0" v-model="form.saturday"
+            >周六</el-checkbox
+          >
 
-                <el-checkbox
-                    true-label="1"
-                    false-label="0"
-                    v-model="form.sunday"
-                >周日</el-checkbox>
-              </Field>
+          <el-checkbox true-label="1" false-label="0" v-model="form.sunday"
+            >周日</el-checkbox
+          >
+        </Field>
 
-                          <Field :span="20" label="单日服务最大人数设置" prop="maxServicePersonNum" v-model="form.maxServicePersonNum" placeholder="请输入单日服务最大人数设置"/>
-                            <Field :span="20" label="累计服务频次预警" prop="alertServiceNum" v-model="form.alertServiceNum" placeholder="请输入累计服务频次预警"/>
-                            <Field :span="20" label="备注" prop="remark" v-model="form.remark" type="textarea" placeholder="请输入备注"/>
+        <Field
+          :span="20"
+          label="单日服务最大人数设置"
+          prop="maxServicePersonNum"
+          v-model="form.maxServicePersonNum"
+          placeholder="请输入单日服务最大人数设置"
+        />
+        <Field
+          :span="20"
+          label="累计服务频次预警"
+          prop="alertServiceNum"
+          v-model="form.alertServiceNum"
+          placeholder="请输入累计服务频次预警"
+        />
+        <Field
+          :span="20"
+          label="备注"
+          prop="remark"
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请输入备注"
+        />
+      </el-row>
 
-            </el-row>
+      <el-divider content-position="center" style="color: #aaa;"
+        ><span style="color: #aaa;"
+          >预约自动签到配置时间段信息</span
+        ></el-divider
+      >
+      <br />
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAddAppointmentConfigTimes"
+            >添加</el-button
+          >
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="danger"
+            icon="el-icon-delete"
+            size="mini"
+            @click="handleDeleteAppointmentConfigTimes"
+            >删除</el-button
+          >
+        </el-col>
+      </el-row>
 
+      <el-table
+        :data="appointmentConfigTimesList"
+        :row-class-name="rowAppointmentConfigTimesIndex"
+        @selection-change="handleAppointmentConfigTimesSelectionChange"
+        ref="appointmentConfigTimes"
+      >
+        <el-table-column type="selection" width="50" align="center" />
+        <el-table-column label="序号" align="center" prop="index" width="50" />
+        <el-table-column label="开始时间" prop="serviceTimeStart">
+          <template slot-scope="scope">
+            <el-time-select
+              placeholder="起始时间"
+              v-model="scope.row.serviceTimeStart"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              format="HH:mm"
+              :picker-options="{
+                start: '08:00',
+                step: '00:30',
+                end: '18:00',
+              }"
+            >
+            </el-time-select>
+            <!--                                    <el-input v-model="scope.row.serviceTimeStart" placeholder="请输入时间段时候开始时间" />-->
+          </template>
+        </el-table-column>
+        <el-table-column label="结束时间" prop="serviceTimeEnd">
+          <template slot-scope="scope">
+            <el-time-select
+              placeholder="结束时间"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              v-model="scope.row.serviceTimeEnd"
+              :picker-options="{
+                start: '08:00',
+                step: '00:30',
+                end: '18:00',
+              }"
+            >
+            </el-time-select>
 
-
-
-
-
-                <el-divider content-position="center">预约自动签到配置时间段信息</el-divider>
-                <br/>
-                <el-row :gutter="10" class="mb8">
-                    <el-col :span="1.5">
-                        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddAppointmentConfigTimes">添加</el-button>
-                    </el-col>
-                    <el-col :span="1.5">
-                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAppointmentConfigTimes">删除</el-button>
-                    </el-col>
-                </el-row>
-
-                <el-table :data="appointmentConfigTimesList" :row-class-name="rowAppointmentConfigTimesIndex" @selection-change="handleAppointmentConfigTimesSelectionChange" ref="appointmentConfigTimes">
-                    <el-table-column type="selection" width="50" align="center" />
-                    <el-table-column label="序号" align="center" prop="index" width="50"/>
-                            <el-table-column label="开始时间" prop="serviceTimeStart">
-                                <template slot-scope="scope">
-
-                                  <el-time-select
-                                      placeholder="起始时间"
-                                      v-model="scope.row.serviceTimeStart"
-                                      value-format="yyyy-MM-dd HH:mm:ss"
-                                      format="HH:mm"
-                                      :picker-options="{
-                                        start: '08:00',
-                                        step: '00:30',
-                                        end: '18:00'
-                                      }">
-                                  </el-time-select>
-<!--                                    <el-input v-model="scope.row.serviceTimeStart" placeholder="请输入时间段时候开始时间" />-->
-                                </template>
-                            </el-table-column>
-                            <el-table-column label="结束时间" prop="serviceTimeEnd">
-                                <template slot-scope="scope">
-                                  <el-time-select
-                                      placeholder="结束时间"
-                                      value-format="yyyy-MM-dd HH:mm:ss"
-                                      v-model="scope.row.serviceTimeEnd"
-                                      :picker-options="{
-                                        start: '08:00',
-                                        step: '00:30',
-                                        end: '18:00'
-                                      }">
-                                  </el-time-select>
-
-<!--                                    <el-input v-model="scope.row.serviceTimeEnd" placeholder="请输入时间段结束时间" />-->
-                                </template>
-                            </el-table-column>
-                            <el-table-column label="备注" prop="remark">
-                                <template slot-scope="scope">
-                                    <el-input v-model="scope.row.remark" placeholder="请输入备注" />
-                                </template>
-                            </el-table-column>
-                </el-table>
-
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-            <el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button>
-            <el-button @click="cancel">取 消</el-button>
-        </div>
-    </el-dialog>
+            <!--                                    <el-input v-model="scope.row.serviceTimeEnd" placeholder="请输入时间段结束时间" />-->
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="remark">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.remark" placeholder="请输入备注" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button
+        type="primary"
+        v-if="pageInfo.type !== 'view'"
+        @click="submitForm"
+        >确 定</el-button
+      >
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script>
-    import moment from 'moment';
-    import form from "@/assets/mixins/formdialog";
-    import dialogShow from "./dialogshow";
-    export default {
-        mixins: [form],
-        components: {
-            dialogShow ,
-        },
-        data() {
-            return {
-                // 子表选中数据
-                checkedAppointmentConfigTimes: [],
-                // 预约自动签到配置时间段表格数据
-                appointmentConfigTimesList: [],
-                // 遮罩层
-                loading: true,
-                // 弹出层标题
-                title: "预约自动签到配置",
-                // 是否显示弹出层
-                open: false,
-                toString:[
-                    "used",
-                    "monday",
-                    "tuesday",
-                    "wednesday",
-                    "thursday",
-                    "friday",
-                    "saturday",
-                    "sunday",
-                ],
-                // 表单校验
-                rules: {
-                    createTime: [
-                        {required: true,message: "请选择创建时间" },
-                    ],
-                }
-            };
-        },
+import moment from "moment";
+import form from "@/assets/mixins/formdialog";
+import dialogShow from "./dialogshow";
+export default {
+  mixins: [form],
+  components: {
+    dialogShow,
+  },
+  data() {
+    return {
+      // 子表选中数据
+      checkedAppointmentConfigTimes: [],
+      // 预约自动签到配置时间段表格数据
+      appointmentConfigTimesList: [],
+      // 遮罩层
+      loading: true,
+      // 弹出层标题
+      title: "预约自动签到配置",
+      // 是否显示弹出层
+      open: false,
+      toString: [
+        "used",
+        "monday",
+        "tuesday",
+        "wednesday",
+        "thursday",
+        "friday",
+        "saturday",
+        "sunday",
+      ],
+      // 表单校验
+      rules: {
+        createTime: [{ required: true, message: "请选择创建时间" }],
+      },
+    };
+  },
 
-        methods: {
-            /** 预约自动签到配置时间段序号 */
-            rowAppointmentConfigTimesIndex({ row, rowIndex }) {
-                row.index = rowIndex + 1;
-            },
-            /** 预约自动签到配置时间段添加按钮操作 */
-            handleAddAppointmentConfigTimes() {
-                let obj = {};
-                obj.serviceTimeStart = "";
-                obj.serviceTimeEnd = "";
-                obj.remark = "";
-                obj.createUserId = "";
-                obj.createTime = "";
-                obj.updateUserId = "";
-                obj.updateTime = "";
-                this.appointmentConfigTimesList.push(obj);
-            },
-            /** 预约自动签到配置时间段删除按钮操作 */
-            handleDeleteAppointmentConfigTimes() {
-                if (this.checkedAppointmentConfigTimes.length == 0) {
-                    this.$alert("请先选择要删除的预约自动签到配置时间段数据", "提示", { confirmButtonText: "确定", });
-                } else {
-                    this.appointmentConfigTimesList.splice(this.checkedAppointmentConfigTimes[0].index - 1, 1);
-                }
-            },
-            /** 单选框选中数据 */
-            handleAppointmentConfigTimesSelectionChange(selection) {
-                if (selection.length > 1) {
-                    this.$refs.appointmentConfigTimes.clearSelection();
-                    this.$refs.appointmentConfigTimes.toggleRowSelection(selection.pop());
-                } else {
-                    this.checkedAppointmentConfigTimes = selection;
-                }
-            },
-            // 渲染前置处理
-            beforeRender(data) {
-                if(data.entity.appointmentConfigTimesList) {
-                  data.entity.appointmentConfigTimesList.map(i=>{
-                    i.serviceTimeStart = moment(i.serviceTimeStart).format('HH:mm')
-                    i.serviceTimeEnd = moment(i.serviceTimeEnd).format('HH:mm')
-                  })
-                    this.appointmentConfigTimesList = data.entity.appointmentConfigTimesList;
-                }
-                return data
-            },
-            /** 编辑 */
-            edit(row) {
-                this.reset()
-                this.query = { id: row.id };
-                this.urls.currUrl ="appointment/config/edit";
-                this.getData();
-                this.pageInfo.type="edit"
-                this.title = "修改预约自动签到配置";
-            },
-            /** 新增 */
-            add(row) {
-                this.reset()
-                this.urls.currUrl = "appointment/config/add";
-                this.getData();
-                this.pageInfo.type="add"
-                this.title = "新增预约自动签到配置";
-            },
-            /** 查看*/
-            view(row) {
-                this.reset()
-                this.query = { id: row.id };
-                this.urls.currUrl ="appointment/config/view";
-                this.getData();
-                this.pageInfo.type="view"
-                this.title = "预约自动签到配置详细";
-            },
-            /**取消按钮 */
-            cancel() {
-                this.open = false;
-            },
-            /**获取数据后弹框 */
-            afterRender(data) {
-                this.open = true;
-            },
-          beforeSubmit(data) {
-              data.appointmentConfigTimesList.map(i=>{
-              const serviceTimeStart = moment(i.serviceTimeStart, 'HH:mm');
-              const serviceTimeEnd = moment(i.serviceTimeEnd, 'HH:mm');
-              i.serviceTimeStart =  moment().set({hour: serviceTimeStart.hour(), minute: serviceTimeStart.minute()}).format('yyyy-MM-DD HH:mm:ss');
-              i.serviceTimeEnd = moment().set({hour: serviceTimeEnd.hour(), minute: serviceTimeEnd.minute()}).format('yyyy-MM-DD HH:mm:ss');
-            })
-            return data
-          },
+  methods: {
+    /** 预约自动签到配置时间段序号 */
+    rowAppointmentConfigTimesIndex({ row, rowIndex }) {
+      row.index = rowIndex + 1;
+    },
+    /** 预约自动签到配置时间段添加按钮操作 */
+    handleAddAppointmentConfigTimes() {
+      let obj = {};
+      obj.serviceTimeStart = "";
+      obj.serviceTimeEnd = "";
+      obj.remark = "";
+      obj.createUserId = "";
+      obj.createTime = "";
+      obj.updateUserId = "";
+      obj.updateTime = "";
+      this.appointmentConfigTimesList.push(obj);
+    },
+    /** 预约自动签到配置时间段删除按钮操作 */
+    handleDeleteAppointmentConfigTimes() {
+      if (this.checkedAppointmentConfigTimes.length == 0) {
+        this.$alert("请先选择要删除的预约自动签到配置时间段数据", "提示", {
+          confirmButtonText: "确定",
+        });
+      } else {
+        this.appointmentConfigTimesList.splice(
+          this.checkedAppointmentConfigTimes[0].index - 1,
+          1
+        );
+      }
+    },
+    /** 单选框选中数据 */
+    handleAppointmentConfigTimesSelectionChange(selection) {
+      if (selection.length > 1) {
+        this.$refs.appointmentConfigTimes.clearSelection();
+        this.$refs.appointmentConfigTimes.toggleRowSelection(selection.pop());
+      } else {
+        this.checkedAppointmentConfigTimes = selection;
+      }
+    },
+    // 渲染前置处理
+    beforeRender(data) {
+      if (data.entity.appointmentConfigTimesList) {
+        data.entity.appointmentConfigTimesList.map((i) => {
+          i.serviceTimeStart = moment(i.serviceTimeStart).format("HH:mm");
+          i.serviceTimeEnd = moment(i.serviceTimeEnd).format("HH:mm");
+        });
+        this.appointmentConfigTimesList =
+          data.entity.appointmentConfigTimesList;
+      }
+      return data;
+    },
+    /** 编辑 */
+    edit(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = "appointment/config/edit";
+      this.getData();
+      this.pageInfo.type = "edit";
+      this.title = "修改预约自动签到配置";
+    },
+    /** 新增 */
+    add(row) {
+      this.reset();
+      this.urls.currUrl = "appointment/config/add";
+      this.getData();
+      this.pageInfo.type = "add";
+      this.title = "新增预约自动签到配置";
+    },
+    /** 查看*/
+    view(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = "appointment/config/view";
+      this.getData();
+      this.pageInfo.type = "view";
+      this.title = "预约自动签到配置详细";
+    },
+    /**取消按钮 */
+    cancel() {
+      this.open = false;
+    },
+    /**获取数据后弹框 */
+    afterRender(data) {
+      this.open = true;
+    },
+    beforeSubmit(data) {
+      data.appointmentConfigTimesList.map((i) => {
+        const serviceTimeStart = moment(i.serviceTimeStart, "HH:mm");
+        const serviceTimeEnd = moment(i.serviceTimeEnd, "HH:mm");
+        i.serviceTimeStart = moment()
+          .set({
+            hour: serviceTimeStart.hour(),
+            minute: serviceTimeStart.minute(),
+          })
+          .format("yyyy-MM-DD HH:mm:ss");
+        i.serviceTimeEnd = moment()
+          .set({ hour: serviceTimeEnd.hour(), minute: serviceTimeEnd.minute() })
+          .format("yyyy-MM-DD HH:mm:ss");
+      });
+      return data;
+    },
 
-            afterSubmit(data) {
-                this.open = false;
-                this.$emit("ok");
-            },
+    afterSubmit(data) {
+      this.open = false;
+      this.$emit("ok");
+    },
 
-            // 表单重置
-            reset() {
-                this.form = {
-                    siteId : null,
-                    siteName : "",
-                    used : 0,
-                    monday : 0,
-                    tuesday : 0,
-                    wednesday : 0,
-                    thursday : 0,
-                    friday : 0,
-                    saturday : 0,
-                    sunday : 0,
-                    maxServicePersonNum : 0,
-                    alertServiceNum : 0,
-                    remark : "",
-                };
-                this.resetForm("form");
-            },
-            resetForm(refName) {
-                if (this.$refs[refName]) {
-                    this.$refs[refName].resetFields();
-                }
-            },
-        },
-    };
+    // 表单重置
+    reset() {
+      this.form = {
+        siteId: null,
+        siteName: "",
+        used: 0,
+        monday: 0,
+        tuesday: 0,
+        wednesday: 0,
+        thursday: 0,
+        friday: 0,
+        saturday: 0,
+        sunday: 0,
+        maxServicePersonNum: 0,
+        alertServiceNum: 0,
+        remark: "",
+      };
+      this.resetForm("form");
+    },
+    resetForm(refName) {
+      if (this.$refs[refName]) {
+        this.$refs[refName].resetFields();
+      }
+    },
+  },
+};
 </script>

refined-manager-ui/admin/src/views/appointment/config/list.vue

 <template>
   <div class="page">
-    <LayoutTable :data="tableData" :config="tableConfig">
-    </LayoutTable>
+    <LayoutTable :data="tableData" :config="tableConfig"> </LayoutTable>
 
-
-    <dialog-show ref="dialogform" @ok="getData"/>
+    <dialog-show ref="dialogform" @ok="getData" />
   </div>
 </template>
 
@@ -16,29 +14,26 @@ import table from "@/assets/mixins/table";
 export default {
   name: "AppointmentConfigList",
   components: {
-    dialogShow
+    dialogShow,
   },
   mixins: [table],
-  created() {
-  },
+  created() {},
   methods: {
     renderTable(tableData) {
       return (
-          <el-table stripe data={tableData} class="total-table">
-            {this.columnSet.map((item) => this.renderTableColumn(item))}
-          </el-table>
+        <el-table stripe data={tableData} class="total-table">
+          {this.columnSet.map((item) => this.renderTableColumn(item))}
+        </el-table>
       );
     },
     renderTableColumn(options) {
-
       return (
-          <el-table-column
-              prop={options.prop}
-              label={options.label}
-              width={options.width}
-              formatter={options.formatter}
-          >
-          </el-table-column>
+        <el-table-column
+          prop={options.prop}
+          label={options.label}
+          width={options.width}
+          formatter={options.formatter}
+        ></el-table-column>
       );
     },
     /** 重写新增方法 */
@@ -53,41 +48,52 @@ export default {
     toView(row) {
       this.$refs.dialogform.view(row);
     },
-
   },
   data() {
     return {
       /** 子表列元素 */
       columnSet: [
-        {prop: "serviceTimeStart", label: "服务开始时间", width: 200, formatter: this.formatterDate},
-        {prop: "serviceTimeEnd", label: "服务结束时间", width: 200, formatter: this.formatterDate},
-        {prop: "remark", label: "备注", width: 100},
+        {
+          prop: "serviceTimeStart",
+          label: "服务开始时间",
+          width: 200,
+          formatter: this.formatterDate,
+          align: "center",
+        },
+        {
+          prop: "serviceTimeEnd",
+          label: "服务结束时间",
+          width: 200,
+          formatter: this.formatterDate,
+          align: "center",
+        },
+        { prop: "remark", label: "备注", width: 200, align: "center" },
       ],
       config: {
         search: [],
         columns: [
-          {type: "selection", width: 60},
-          {type: "index", label: "序号", width: 50},
+          { type: "selection", width: 60 },
+          { type: "index", label: "序号", width: 50 },
 
-          {label: "启用", prop: "used", formatter: this.formatter},
+          { label: "启用", prop: "used", formatter: this.formatter },
 
-          {label: "周一", prop: "monday", formatter: this.formatter},
+          { label: "周一", prop: "monday", formatter: this.formatter },
 
-          {label: "周二", prop: "tuesday", formatter: this.formatter},
+          { label: "周二", prop: "tuesday", formatter: this.formatter },
 
-          {label: "周三", prop: "wednesday", formatter: this.formatter},
+          { label: "周三", prop: "wednesday", formatter: this.formatter },
 
-          {label: "周四", prop: "thursday", formatter: this.formatter},
+          { label: "周四", prop: "thursday", formatter: this.formatter },
 
-          {label: "周五", prop: "friday", formatter: this.formatter},
+          { label: "周五", prop: "friday", formatter: this.formatter },
 
-          {label: "周六", prop: "saturday", formatter: this.formatter},
+          { label: "周六", prop: "saturday", formatter: this.formatter },
 
-          {label: "周日", prop: "sunday", formatter: this.formatter},
+          { label: "周日", prop: "sunday", formatter: this.formatter },
 
-          {label: "最大人数", prop: "maxServicePersonNum"},
+          { label: "最大人数", prop: "maxServicePersonNum" },
 
-          {label: "累计预警", prop: "alertServiceNum"},
+          { label: "累计预警", prop: "alertServiceNum" },
 
           {
             label: "配置时间段",
@@ -98,25 +104,33 @@ export default {
                 return pre + Number(cur.width);
               }, 50);
               return (
-                  <el-popover placement="right" width={widthsize} trigger="click">
-                    {this.renderTable(row.appointmentConfigTimesList)}
-                    <el-button type="text" slot="reference">详细</el-button>
-                  </el-popover>
+                <el-popover placement="right" width={widthsize} trigger="click">
+                  {this.renderTable(row.appointmentConfigTimesList)}
+                  <el-button type="text" slot="reference">
+                    详细
+                  </el-button>
+                </el-popover>
               );
             },
           },
           {
             label: "操作",
             width: 240,
-            formatter: row => {
+            formatter: (row) => {
               return (
-                  <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel}/>
+                <table-buttons
+                  noAdd
+                  row={row}
+                  onEdit={this.toEdit}
+                  onView={this.toView}
+                  onDel={this.toDel}
+                />
               );
-            }
-          }
-        ]
-      }
+            },
+          },
+        ],
+      },
     };
-  }
+  },
 };
 </script>

refined-manager-ui/admin/src/views/appointment/records/dataDrawerShow.vue

 <template>
-    <div>
-        <!-- 抽屉框表单 -->
-        <el-drawer
-                :title="title"
-                :visible.sync="open"
-                :direction="direction"
-                size="90%">
-            <div>
-                <div class="warning">系统检测以下人员（20人）识别频次过高：</div>
-                <div class="drawer_box">
-                    <div class="drawer_box_left">
-                        <el-table
-                            ref="singleTable"
-                            :data="tableDataL"
-                            highlight-current-row
-                            @current-change="handleCurrentChange"
-                            style="width: 100%">
-                            <el-table-column
-                                type="index"
-                                label="序号"
-                                width="50">
-                            </el-table-column>
-                            <el-table-column
-                                property="name"
-                                label="姓名"
-                                width="80">
-                            </el-table-column>
-                            <el-table-column
-                                property="contact"
-                                label="联系电话">
-                            </el-table-column>
-                            <el-table-column
-                                property="identifyNum"
-                                label="识别频次"
-                                width="80">
-                            </el-table-column>
-                            <el-table-column
-                                property="lastIdentifyTime"
-                                label="最近识别时间"
-                                :formatter= "this.formatterDate">
-                            </el-table-column>
-                        </el-table>
-                    </div>
-                    <div class="drawer_box_right">
-                        <div class="recognition">
-                            <div>
-                                <div class="recognition_name">{{ singleSelect.name }}</div>
-                                <div class="recognition_desc">联系电话：{{ singleSelect.contact }} | 身份证号：{{ singleSelect.idNumber }} | 识别频次：{{ singleSelect.identifyNum }}</div>
-                            </div>
-                            <div>
-                                <el-button type="danger" @click="show= true">服务约束</el-button>
-                            </div>
-                        </div>
-                        <el-table
-                            :data="tableDataR"
-                            style="width: 100%">
-                            <el-table-column
-                                type="index"
-                                label="序号"
-                                width="50">
-                            </el-table-column>
-                            <el-table-column
-                                property="monitorDeviceId"
-                                label="监测时间"
-                                :formatter= "this.formatterDate">
-                            </el-table-column>
-                            <el-table-column
-                                property="monitorDevice"
-                                label="监测设备">
-                            </el-table-column>
-                            <el-table-column
-                                property="reservationService"
-                                label="预约业务">
-                            </el-table-column>
-                            <el-table-column
-                                property="reservationNumber"
-                                label="预约编号">
-                            </el-table-column>
-                            <el-table-column
-                                property="checkInMethod"
-                                label="签到方式">
-                            </el-table-column>
-                            <el-table-column
-                                property="monitorCertificate"
-                                label="监测凭证">
-                                <template slot-scope="scope">
-                                    <img :src="scope.row.monitorCertificate" alt="图片">
-                                </template>
-                            </el-table-column>
-                        </el-table>
-                        <el-pagination
-                            @size-change="changeSize"
-                            @current-change="changePage"
-                            :current-page="this.params.page"
-                            :page-size="this.params.size"
-                            layout="total, prev, pager, next"
-                            :total="this.total">
-                        </el-pagination>
-                    </div>
-                </div>
+  <div>
+    <!-- 抽屉框表单 -->
+    <el-drawer
+      :title="title"
+      :visible.sync="open"
+      :direction="direction"
+      size="90%"
+    >
+      <div style="height: 100%;">
+        <div class="warning">
+          <i class="el-icon-s-opportunity"></i
+          >系统检测以下人员（20人）识别频次过高：
         </div>
-        </el-drawer>
-        <el-dialog title="限制取号" :visible.sync="show" width="31.25rem" append-to-body>
-            <el-form ref="form" :model="restrict" :label-position="right" label-width="7.5rem">
-                <el-form-item label="姓名：">{{ restrict.name }}</el-form-item>
-                <el-form-item label="联系电话：">{{ restrict.contact }}</el-form-item>
-                <el-form-item label="身份证号：">{{ restrict.idNumber }}</el-form-item>
-                <el-form-item label="识别频次：">{{ restrict.identifyNum }}</el-form-item>
-                <el-form-item label="限制取号：">
-                    <el-input placeholder="请输入内容" v-model="restrict.times">
-                        <template slot="append">次 / 天</template>
-                    </el-input>
-                </el-form-item>
-            </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="show= false">确 定</el-button>
-                <el-button @click="show= false">取 消</el-button>
+        <div class="drawer_box">
+          <div class="drawer_box_left">
+            <el-table
+              ref="singleTable"
+              :data="tableDataL"
+              highlight-current-row
+              @current-change="handleCurrentChange"
+              style="width: 100%"
+              border
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="50"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="name"
+                label="姓名"
+                width="80"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="contact"
+                label="联系电话"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="identifyNum"
+                label="识别频次"
+                width="80"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="lastIdentifyTime"
+                label="最近识别时间"
+                :formatter="this.formatterDate"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="drawer_box_right">
+            <div class="recognition">
+              <div>
+                <div class="recognition_name">{{ singleSelect.name }}</div>
+                <div class="recognition_desc">
+                  联系电话：{{ singleSelect.contact }} <br />
+                  身份证号：{{ singleSelect.idNumber }} <br />
+                  识别频次：{{ singleSelect.identifyNum }}
+                </div>
+              </div>
+              <div>
+                <el-button
+                  type="danger"
+                  @click="show = true"
+                  style="width: 120px;height: 48px;line-height: 24px;font-size: 16px; font-weight: 600;"
+                  >服务约束</el-button
+                >
+              </div>
             </div>
-        </el-dialog>
-    </div>
+            <el-table :data="tableDataR" style="width: 100%" border>
+              <el-table-column
+                type="index"
+                label="序号"
+                width="50"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="monitorDeviceId"
+                label="监测时间"
+                :formatter="this.formatterDate"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="monitorDevice"
+                label="监测设备"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="reservationService"
+                label="预约业务"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="reservationNumber"
+                label="预约编号"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="checkInMethod"
+                label="签到方式"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="monitorCertificate"
+                label="监测凭证"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <img :src="scope.row.monitorCertificate" alt="图片" />
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-pagination
+              @size-change="changeSize"
+              @current-change="changePage"
+              :current-page="this.params.page"
+              :page-size="this.params.size"
+              layout="total, prev, pager, next"
+              :total="this.total"
+              style="text-align: right;"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+    <el-dialog
+      title="限制取号"
+      :visible.sync="show"
+      width="31.25rem"
+      append-to-body
+    >
+      <el-form
+        ref="form"
+        :model="restrict"
+        :label-position="right"
+        label-width="7.5rem"
+      >
+        <el-form-item label="姓名：">{{ restrict.name }}</el-form-item>
+        <el-form-item label="联系电话：">{{ restrict.contact }}</el-form-item>
+        <el-form-item label="身份证号：">{{ restrict.idNumber }}</el-form-item>
+        <el-form-item label="识别频次：">{{
+          restrict.identifyNum
+        }}</el-form-item>
+        <el-form-item label="限制取号：">
+          <el-input placeholder="请输入内容" v-model="restrict.times">
+            <template slot="append">次 / 天</template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="show = false">确 定</el-button>
+        <el-button @click="show = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 import table from "@/assets/mixins/table";
 export default {
-    name: "dataDrawerShow",
-    components: {
-    },
-    mixins: [table],
-    created() {
+  name: "dataDrawerShow",
+  components: {},
+  mixins: [table],
+  created() {},
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 弹出层标题
+      title: "监测预警",
+      // 是否显示弹出层
+      open: false,
+      // 限制取号
+      show: false,
+      direction: "rtl",
+      // 左侧表格数据
+      tableDataL: [],
+      // 左侧被选中的数据
+      singleSelect: {},
+      // 右侧表格数据
+      tableDataR: [],
+      params: {
+        size: 10,
+        page: 1,
+      },
+      total: 0,
+      restrict: {
+        name: "",
+        contact: "",
+        idNumber: "",
+        identifyNum: "",
+        times: "",
+      },
+    };
+  },
 
+  methods: {
+    view(row) {
+      this.open = true;
+      this.getAllMonitor();
     },
-    data() {
-        return {
-            // 遮罩层
-            loading: true,
-            // 弹出层标题
-            title: "监测预警",
-            // 是否显示弹出层
-            open: false,
-            // 限制取号
-            show: false,
-            direction:"rtl",
-            // 左侧表格数据
-            tableDataL:[],
-            // 左侧被选中的数据
-            singleSelect: {},
-            // 右侧表格数据
-            tableDataR: [],
-            params: {
-                size: 10,
-                page: 1
-            },
-            total: 0,
-            restrict:{
-                name: '',
-                contact: '',
-                idNumber: '',
-                identifyNum: '',
-                times: ''
-            }
-        }
+    async getAllMonitor() {
+      const res = await this.$post("monitor/alarm/list");
+      if (res && res.code == 1) {
+        this.tableDataL = res.data.data;
+        console.log(res);
+        this.total = res.data.total;
+        this.params.page = res.data.current_page;
+        this.params.size = res.data.per_page;
+        this.$refs.singleTable.setCurrentRow(this.tableDataL[0]); // 默认选中第一条
+      }
     },
-
-    methods: {
-        view(row) {
-            this.open=true
-            this.getAllMonitor()
-        },
-        async getAllMonitor(){
-            const res = await this.$post('monitor/alarm/list')
-            if(res && res.code == 1){
-                this.tableDataL= res.data.data
-                console.log(res)
-                this.total= res.data.total
-                this.params.page= res.data.current_page
-                this.params.size= res.data.per_page
-                this.$refs.singleTable.setCurrentRow(this.tableDataL[0]) // 默认选中第一条
-            }
-        },
-        async handleCurrentChange(row){
-            this.singleSelect= row
-            this.restrict= {...row}
-            const res = await this.$post('monitor/alarm/record/list')
-            if(res && res.code == 1){
-                this.tableDataR= res.data.data
-            }
-        },
-        // 监听size改变
-        changeSize (newSize) {
-            this.size = newSize
-        },
-        // 页码改变
-        changePage (newPage) {
-            this.page = newPage
-        },
+    async handleCurrentChange(row) {
+      this.singleSelect = row;
+      this.restrict = { ...row };
+      const res = await this.$post("monitor/alarm/record/list");
+      if (res && res.code == 1) {
+        this.tableDataR = res.data.data;
+      }
+    },
+    // 监听size改变
+    changeSize(newSize) {
+      this.size = newSize;
+    },
+    // 页码改变
+    changePage(newPage) {
+      this.page = newPage;
     },
+  },
 };
 </script>
 <style scope>
-.warning{
-    padding: 0 .625rem;
-    height: 1.875rem;
-    line-height: 1.875rem;
-    font-size: 1.25rem;
-    color: #F94545;
+.warning {
+  padding: 0 0.625rem;
+  height: 3rem;
+  line-height: 3rem;
+  font-size: 1.25rem;
+  color: #f94545;
+  padding-left: 20px;
+  background: rgba(249, 69, 69, 0.1);
 }
-.drawer_box{
-    display: flex;
+.drawer_box {
+  display: flex;
+  height: 90%;
 }
-.drawer_box_left{
-    width: 37.5rem;
-    padding: .625rem;
+.drawer_box_left {
+  height: 100%;
+  width: 37.5rem;
+  padding: 0.625rem;
+  border-right: 1px solid #f0f0f0;
 }
-.drawer_box_right{
-    flex: 1;
-    padding: .625rem;
+.drawer_box_right {
+  flex: 1;
+  padding: 0.625rem;
 }
-.recognition{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: .625rem;
+.recognition {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.625rem;
 }
-.recognition_name{
-    font-size: 1.25rem;
-    color: #333;
-    margin-bottom: .3125rem;
+.recognition_name {
+  font-size: 1.25rem;
+  color: #333;
+  margin-bottom: 0.3125rem;
 }
-.recognition_desc{
-    font-size: .875rem;
-    color: #666;
+.recognition_desc {
+  font-size: 0.875rem;
+  color: #666;
 }
 </style>

refined-manager-ui/admin/src/views/appointment/records/list.vue

@@ -3,7 +3,6 @@
     <LayoutTable notAdd notDel :data="tableData" :config="tableConfig">
       <el-button
         slot="table-head-left2"
-        style="margin-left: 10px"
         icon="el-icon-tickets"
         size="mini"
         type="danger"

refined-manager-ui/admin/src/views/care/config/dialogshow.vue

 <template>
-    <!-- 弹出框表单 -->
-    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
-        <el-form ref="form" :model="form" :rules="rules" label-width="200px">
-            <el-row>
-<!--
+  <!-- 弹出框表单 -->
+  <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
+    <el-form ref="form" :model="form" :rules="rules" label-width="200px">
+      <el-row style="margin-bottom: 20px;">
+        <!--
               <Field :span="20" label="是否启用该服务" prop="used" v-model="form.used" type="radio" :enumData="dict.used" placeholder="请选择是否启用该服务"/>
 -->
 
-              <Field :span="20" label="启用该服务">
-                <el-switch
-                    v-model="form.used"
-                    active-color="#13ce66"
-                    inactive-color="#ff4949"
-                    active-value="1"
-                    inactive-value="0">
-                </el-switch>
-              </Field>
+        <Field :span="20" label="启用该服务">
+          <el-switch
+            v-model="form.used"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            active-value="1"
+            inactive-value="0"
+          >
+          </el-switch>
+        </Field>
 
+        <Field :span="20" label="监测周期配置">
+          <el-checkbox true-label="1" false-label="0" v-model="form.monday"
+            >周一</el-checkbox
+          >
 
-              <Field :span="20" label="监测周期配置">
-                <el-checkbox
-                    true-label="1"
-                    false-label="0"
-                    v-model="form.monday"
-                >周一</el-checkbox>
+          <el-checkbox true-label="1" false-label="0" v-model="form.tuesday"
+            >周二</el-checkbox
+          >
 
-                <el-checkbox
-                    true-label="1"
-                    false-label="0"
-                    v-model="form.tuesday"
-                >周二</el-checkbox>
+          <el-checkbox true-label="1" false-label="0" v-model="form.wednesday"
+            >周三</el-checkbox
+          >
 
-                <el-checkbox
-                    true-label="1"
-                    false-label="0"
-                    v-model="form.wednesday"
-                >周三</el-checkbox>
+          <el-checkbox true-label="1" false-label="0" v-model="form.thursday"
+            >周四</el-checkbox
+          >
 
-                <el-checkbox
-                    true-label="1"
-                    false-label="0"
-                    v-model="form.thursday"
-                >周四</el-checkbox>
+          <el-checkbox true-label="1" false-label="0" v-model="form.friday"
+            >周五</el-checkbox
+          >
+          <el-checkbox true-label="1" false-label="0" v-model="form.saturday"
+            >周六</el-checkbox
+          >
 
-                <el-checkbox
-                    true-label="1"
-                    false-label="0"
-                    v-model="form.friday"
-                >周五</el-checkbox>
-                <el-checkbox
-                    true-label="1"
-                    false-label="0"
-                    v-model="form.saturday"
-                >周六</el-checkbox>
+          <el-checkbox true-label="1" false-label="0" v-model="form.sunday"
+            >周日</el-checkbox
+          >
+        </Field>
+        <Field
+          :span="20"
+          label="单日服务最大人数设置"
+          prop="maxServicePersonNum"
+          v-model="form.maxServicePersonNum"
+          placeholder="请输入单日服务最大人数设置"
+        />
+        <Field
+          :span="20"
+          label="服务阈值设置，单位分钟"
+          prop="serviceThreshold"
+          v-model="form.serviceThreshold"
+          placeholder="请输入服务阈值设置，单位分钟"
+        />
+        <Field
+          :span="20"
+          label="累计服务频次预警"
+          prop="alertServiceNum"
+          v-model="form.alertServiceNum"
+          placeholder="请输入累计服务频次预警"
+        />
+        <Field
+          :span="20"
+          label="消息发送对象"
+          prop="msgRecipients"
+          v-model="form.msgRecipients"
+          type="checkbox"
+          :enumData="dict.msgRecipients"
+        />
+        <Field
+          :span="20"
+          label="备注"
+          prop="remark"
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请输入备注"
+        />
+      </el-row>
+      <el-divider content-position="center" style="color: #aaa;"
+        ><span style="color: #aaa;">主动关怀时间段信息</span></el-divider
+      >
+      <br />
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAddCareConfigTimes"
+            >添加</el-button
+          >
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="danger"
+            icon="el-icon-delete"
+            size="mini"
+            @click="handleDeleteCareConfigTimes"
+            >删除</el-button
+          >
+        </el-col>
+      </el-row>
 
-                <el-checkbox
-                    true-label="1"
-                    false-label="0"
-                    v-model="form.sunday"
-                >周日</el-checkbox>
-              </Field>
-                            <Field :span="20" label="单日服务最大人数设置" prop="maxServicePersonNum" v-model="form.maxServicePersonNum" placeholder="请输入单日服务最大人数设置"/>
-                            <Field :span="20" label="服务阈值设置，单位分钟" prop="serviceThreshold" v-model="form.serviceThreshold" placeholder="请输入服务阈值设置，单位分钟"/>
-                            <Field :span="20" label="累计服务频次预警" prop="alertServiceNum" v-model="form.alertServiceNum" placeholder="请输入累计服务频次预警"/>
-                            <Field :span="20" label="消息发送对象" prop="msgRecipients" v-model="form.msgRecipients" type="checkbox" :enumData="dict.msgRecipients" />
-                            <Field :span="20" label="备注" prop="remark" v-model="form.remark" type="textarea" placeholder="请输入备注"/>
-
-            </el-row>
-                <el-divider content-position="center">主动关怀时间段信息</el-divider>
-                <br/>
-                <el-row :gutter="10" class="mb8">
-                    <el-col :span="1.5">
-                        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddCareConfigTimes">添加</el-button>
-                    </el-col>
-                    <el-col :span="1.5">
-                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteCareConfigTimes">删除</el-button>
-                    </el-col>
-                </el-row>
-
-                <el-table :data="careConfigTimesList" :row-class-name="rowCareConfigTimesIndex" @selection-change="handleCareConfigTimesSelectionChange" ref="careConfigTimes">
-                  <el-table-column type="selection" width="50" align="center" />
-                  <el-table-column label="序号" align="center" prop="index" width="50"/>
-                  <el-table-column label="开始时间" prop="serviceTimeStart">
-                    <template slot-scope="scope">
-
-                      <el-time-select
-                          placeholder="起始时间"
-                          v-model="scope.row.serviceTimeStart"
-                          value-format="yyyy-MM-dd HH:mm:ss"
-                          format="HH:mm"
-                          :picker-options="{
-                                        start: '08:00',
-                                        step: '00:30',
-                                        end: '18:00'
-                                      }">
-                      </el-time-select>
-                      <!--                                    <el-input v-model="scope.row.serviceTimeStart" placeholder="请输入时间段时候开始时间" />-->
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="结束时间" prop="serviceTimeEnd">
-                    <template slot-scope="scope">
-                      <el-time-select
-                          placeholder="结束时间"
-                          value-format="yyyy-MM-dd HH:mm:ss"
-                          v-model="scope.row.serviceTimeEnd"
-                          :picker-options="{
-                                        start: '08:00',
-                                        step: '00:30',
-                                        end: '18:00'
-                                      }">
-                      </el-time-select>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="备注" prop="remark">
-                    <template slot-scope="scope">
-                      <el-input v-model="scope.row.remark" placeholder="请输入备注" />
-                    </template>
-                  </el-table-column>
-                </el-table>
-
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-            <el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button>
-            <el-button @click="cancel">取 消</el-button>
-        </div>
-    </el-dialog>
+      <el-table
+        :data="careConfigTimesList"
+        :row-class-name="rowCareConfigTimesIndex"
+        @selection-change="handleCareConfigTimesSelectionChange"
+        ref="careConfigTimes"
+      >
+        <el-table-column type="selection" width="50" align="center" />
+        <el-table-column label="序号" align="center" prop="index" width="50" />
+        <el-table-column label="开始时间" prop="serviceTimeStart">
+          <template slot-scope="scope">
+            <el-time-select
+              placeholder="起始时间"
+              v-model="scope.row.serviceTimeStart"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              format="HH:mm"
+              :picker-options="{
+                start: '08:00',
+                step: '00:30',
+                end: '18:00',
+              }"
+            >
+            </el-time-select>
+            <!--                                    <el-input v-model="scope.row.serviceTimeStart" placeholder="请输入时间段时候开始时间" />-->
+          </template>
+        </el-table-column>
+        <el-table-column label="结束时间" prop="serviceTimeEnd">
+          <template slot-scope="scope">
+            <el-time-select
+              placeholder="结束时间"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              v-model="scope.row.serviceTimeEnd"
+              :picker-options="{
+                start: '08:00',
+                step: '00:30',
+                end: '18:00',
+              }"
+            >
+            </el-time-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="remark">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.remark" placeholder="请输入备注" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button
+        type="primary"
+        v-if="pageInfo.type !== 'view'"
+        @click="submitForm"
+        >确 定</el-button
+      >
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script>
-    import form from "@/assets/mixins/formdialog";
-    import dialogShow from "./dialogshow";
-    import moment from "moment/moment";
-    export default {
-        mixins: [form],
-        components: {
-            dialogShow ,
-        },
-        data() {
-            return {
-                // 子表选中数据
-                checkedCareConfigTimes: [],
-                // 主动关怀时间段表格数据
-                careConfigTimesList: [],
-                // 遮罩层
-                loading: true,
-                // 弹出层标题
-                title: "主动关怀配置",
-                // 是否显示弹出层
-                open: false,
-               toArrays: ["msgRecipients"],
-                toString:[
-                    "used",
-                    "monday",
-                    "tuesday",
-                    "wednesday",
-                    "thursday",
-                    "friday",
-                    "saturday",
-                    "sunday",
-                ],
-                // 表单校验
-                rules: {
-
-                    createTime: [
-                        {required: true,message: "请选择创建时间" },
-                    ],
-                }
-            };
-        },
+import form from "@/assets/mixins/formdialog";
+import dialogShow from "./dialogshow";
+import moment from "moment/moment";
+export default {
+  mixins: [form],
+  components: {
+    dialogShow,
+  },
+  data() {
+    return {
+      // 子表选中数据
+      checkedCareConfigTimes: [],
+      // 主动关怀时间段表格数据
+      careConfigTimesList: [],
+      // 遮罩层
+      loading: true,
+      // 弹出层标题
+      title: "主动关怀配置",
+      // 是否显示弹出层
+      open: false,
+      toArrays: ["msgRecipients"],
+      toString: [
+        "used",
+        "monday",
+        "tuesday",
+        "wednesday",
+        "thursday",
+        "friday",
+        "saturday",
+        "sunday",
+      ],
+      // 表单校验
+      rules: {
+        createTime: [{ required: true, message: "请选择创建时间" }],
+      },
+    };
+  },
 
-        methods: {
-            /** 主动关怀时间段序号 */
-            rowCareConfigTimesIndex({ row, rowIndex }) {
-                row.index = rowIndex + 1;
-            },
-            /** 主动关怀时间段添加按钮操作 */
-            handleAddCareConfigTimes() {
-                let obj = {};
-                obj.serviceTimeStart = "";
-                obj.serviceTimeEnd = "";
-                obj.remark = "";
-                obj.createUserId = "";
-                obj.createTime = "";
-                obj.updateUserId = "";
-                obj.updateTime = "";
-                this.careConfigTimesList.push(obj);
-            },
-            /** 主动关怀时间段删除按钮操作 */
-            handleDeleteCareConfigTimes() {
-                if (this.checkedCareConfigTimes.length == 0) {
-                    this.$alert("请先选择要删除的主动关怀时间段数据", "提示", { confirmButtonText: "确定", });
-                } else {
-                    this.careConfigTimesList.splice(this.checkedCareConfigTimes[0].index - 1, 1);
-                }
-            },
-            /** 单选框选中数据 */
-            handleCareConfigTimesSelectionChange(selection) {
-                if (selection.length > 1) {
-                    this.$refs.careConfigTimes.clearSelection();
-                    this.$refs.careConfigTimes.toggleRowSelection(selection.pop());
-                } else {
-                    this.checkedCareConfigTimes = selection;
-                }
-            },
-            // 渲染前置处理
-            beforeRender(data) {
-                if(data.entity.careConfigTimesList) {
-                  data.entity.careConfigTimesList.map(i=>{
-                    i.serviceTimeStart = moment(i.serviceTimeStart).format('HH:mm')
-                    i.serviceTimeEnd = moment(i.serviceTimeEnd).format('HH:mm')
-                  })
-                    this.careConfigTimesList = data.entity.careConfigTimesList;
-                }
-                return data
-            },
-            /** 编辑 */
-            edit(row) {
-                this.reset()
-                this.query = { id: row.id };
-                this.urls.currUrl ="care/config/edit";
-                this.getData();
-                this.pageInfo.type="edit"
-                this.title = "修改主动关怀配置";
-            },
-            /** 新增 */
-            add(row) {
-                this.reset()
-                this.urls.currUrl = "care/config/add";
-                this.getData();
-                this.pageInfo.type="add"
-                this.title = "新增主动关怀配置";
-            },
-            /** 查看*/
-            view(row) {
-                this.reset()
-                this.query = { id: row.id };
-                this.urls.currUrl ="care/config/view";
-                this.getData();
-                this.pageInfo.type="view"
-                this.title = "主动关怀配置详细";
-            },
-            /**取消按钮 */
-            cancel() {
-                this.open = false;
-            },
-            /**获取数据后弹框 */
-            afterRender(data) {
-                this.open = true;
-            },
+  methods: {
+    /** 主动关怀时间段序号 */
+    rowCareConfigTimesIndex({ row, rowIndex }) {
+      row.index = rowIndex + 1;
+    },
+    /** 主动关怀时间段添加按钮操作 */
+    handleAddCareConfigTimes() {
+      let obj = {};
+      obj.serviceTimeStart = "";
+      obj.serviceTimeEnd = "";
+      obj.remark = "";
+      obj.createUserId = "";
+      obj.createTime = "";
+      obj.updateUserId = "";
+      obj.updateTime = "";
+      this.careConfigTimesList.push(obj);
+    },
+    /** 主动关怀时间段删除按钮操作 */
+    handleDeleteCareConfigTimes() {
+      if (this.checkedCareConfigTimes.length == 0) {
+        this.$alert("请先选择要删除的主动关怀时间段数据", "提示", {
+          confirmButtonText: "确定",
+        });
+      } else {
+        this.careConfigTimesList.splice(
+          this.checkedCareConfigTimes[0].index - 1,
+          1
+        );
+      }
+    },
+    /** 单选框选中数据 */
+    handleCareConfigTimesSelectionChange(selection) {
+      if (selection.length > 1) {
+        this.$refs.careConfigTimes.clearSelection();
+        this.$refs.careConfigTimes.toggleRowSelection(selection.pop());
+      } else {
+        this.checkedCareConfigTimes = selection;
+      }
+    },
+    // 渲染前置处理
+    beforeRender(data) {
+      if (data.entity.careConfigTimesList) {
+        data.entity.careConfigTimesList.map((i) => {
+          i.serviceTimeStart = moment(i.serviceTimeStart).format("HH:mm");
+          i.serviceTimeEnd = moment(i.serviceTimeEnd).format("HH:mm");
+        });
+        this.careConfigTimesList = data.entity.careConfigTimesList;
+      }
+      return data;
+    },
+    /** 编辑 */
+    edit(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = "care/config/edit";
+      this.getData();
+      this.pageInfo.type = "edit";
+      this.title = "修改主动关怀配置";
+    },
+    /** 新增 */
+    add(row) {
+      this.reset();
+      this.urls.currUrl = "care/config/add";
+      this.getData();
+      this.pageInfo.type = "add";
+      this.title = "新增主动关怀配置";
+    },
+    /** 查看*/
+    view(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = "care/config/view";
+      this.getData();
+      this.pageInfo.type = "view";
+      this.title = "主动关怀配置详细";
+    },
+    /**取消按钮 */
+    cancel() {
+      this.open = false;
+    },
+    /**获取数据后弹框 */
+    afterRender(data) {
+      this.open = true;
+    },
 
-          beforeSubmit(data) {
-            data.careConfigTimesList.map(i=>{
-              const serviceTimeStart = moment(i.serviceTimeStart, 'HH:mm');
-              const serviceTimeEnd = moment(i.serviceTimeEnd, 'HH:mm');
-              i.serviceTimeStart =  moment().set({hour: serviceTimeStart.hour(), minute: serviceTimeStart.minute()}).format('yyyy-MM-DD HH:mm:ss');
-              i.serviceTimeEnd = moment().set({hour: serviceTimeEnd.hour(), minute: serviceTimeEnd.minute()}).format('yyyy-MM-DD HH:mm:ss');
-            })
+    beforeSubmit(data) {
+      data.careConfigTimesList.map((i) => {
+        const serviceTimeStart = moment(i.serviceTimeStart, "HH:mm");
+        const serviceTimeEnd = moment(i.serviceTimeEnd, "HH:mm");
+        i.serviceTimeStart = moment()
+          .set({
+            hour: serviceTimeStart.hour(),
+            minute: serviceTimeStart.minute(),
+          })
+          .format("yyyy-MM-DD HH:mm:ss");
+        i.serviceTimeEnd = moment()
+          .set({ hour: serviceTimeEnd.hour(), minute: serviceTimeEnd.minute() })
+          .format("yyyy-MM-DD HH:mm:ss");
+      });
 
-            if (Array.isArray(data["msgRecipients"])) {
-              data.msgRecipients = data.msgRecipients.filter(Boolean).join();
-            }
-            return data
-          },
+      if (Array.isArray(data["msgRecipients"])) {
+        data.msgRecipients = data.msgRecipients.filter(Boolean).join();
+      }
+      return data;
+    },
 
-            afterSubmit(data) {
-                this.open = false;
-                this.$emit("ok");
-            },
+    afterSubmit(data) {
+      this.open = false;
+      this.$emit("ok");
+    },
 
-            // 表单重置
-            reset() {
-                this.form = {
-                    siteId : null,
-                    siteName : "",
-                    used : 0,
-                    monday : 0,
-                    tuesday : 0,
-                    wednesday : 0,
-                    thursday : 0,
-                    friday : 0,
-                    saturday : 0,
-                    sunday : 0,
-                    maxServicePersonNum : 0,
-                    serviceThreshold : 0,
-                    alertServiceNum : null,
-                    msgRecipients : "",
-                    remark : "",
-                };
-                this.resetForm("form");
-            },
-            resetForm(refName) {
-                if (this.$refs[refName]) {
-                    this.$refs[refName].resetFields();
-                }
-            },
-        },
-    };
+    // 表单重置
+    reset() {
+      this.form = {
+        siteId: null,
+        siteName: "",
+        used: 0,
+        monday: 0,
+        tuesday: 0,
+        wednesday: 0,
+        thursday: 0,
+        friday: 0,
+        saturday: 0,
+        sunday: 0,
+        maxServicePersonNum: 0,
+        serviceThreshold: 0,
+        alertServiceNum: null,
+        msgRecipients: "",
+        remark: "",
+      };
+      this.resetForm("form");
+    },
+    resetForm(refName) {
+      if (this.$refs[refName]) {
+        this.$refs[refName].resetFields();
+      }
+    },
+  },
+};
 </script>

refined-manager-ui/admin/src/views/care/config/list.vue

@@ -59,7 +59,7 @@
                 columnSet:[
                     {prop:"serviceTimeStart",label:"服务开始时间",width:200,formatter: this.formatterDate},
                     {prop:"serviceTimeEnd",label:"服务结束时间",width:200,formatter: this.formatterDate},
-                    {prop:"remark",label:"备注",width:100},
+                    {prop:"remark",label:"备注",width:200},
                 ],
                 config: {
                     search: [

refined-manager-ui/admin/src/views/person/list.vue

@@ -3,7 +3,6 @@
     <LayoutTable :data="tableData" :config="tableConfig">
       <el-button
           slot="table-head-left2"
-          style="margin-left: 10px"
           icon="el-icon-tickets"
           size="mini"
           @click="handleImport"

refined-manager-ui/admin/src/views/realtime/dataflow/dataDrawerShow.vue

 <template>
-    <div>
-        <!-- 抽屉框表单 -->
-        <el-drawer
-                :title="title"
-                :visible.sync="open"
-                :direction="direction"
-                size="95%">
-            <div>
-                <div class="warning">系统检测以下人员（20人）识别频次过高：</div>
-                <div class="drawer_box">
-                    <div class="drawer_box_left">
-                        <el-table
-                            ref="singleTable"
-                            :data="tableDataL"
-                            highlight-current-row
-                            @current-change="handleCurrentChange"
-                            style="width: 100%">
-                            <el-table-column
-                                type="index"
-                                label="序号"
-                                width="50">
-                            </el-table-column>
-                            <el-table-column
-                                property="name"
-                                label="姓名"
-                                width="80">
-                            </el-table-column>
-                            <el-table-column
-                                property="contact"
-                                label="联系电话">
-                            </el-table-column>
-                            <el-table-column
-                                property="identifyNum"
-                                label="识别频次"
-                                width="80">
-                            </el-table-column>
-                            <el-table-column
-                                property="lastIdentifyTime"
-                                label="最近识别时间"
-                                :formatter= "this.formatterDate">
-                            </el-table-column>
-                        </el-table>
-                    </div>
-                    <div class="drawer_box_right">
-                        <div class="recognition">
-                            <div>
-                                <div class="recognition_name">{{ singleSelect.name }}</div>
-                                <div class="recognition_desc">联系电话：{{ singleSelect.contact }} | 身份证号：{{ singleSelect.idNumber }} | 识别频次：{{ singleSelect.identifyNum }}</div>
-                            </div>
-                            <div>
-                                <el-button type="primary" @click="show= true">限制取号</el-button>
-                            </div>
-                        </div>
-                        <el-table
-                            :data="tableDataR"
-                            style="width: 100%">
-                            <el-table-column
-                                type="index"
-                                label="序号"
-                                width="50">
-                            </el-table-column>
-                            <el-table-column
-                                property="monitorTime"
-                                label="监测时间"
-                                :formatter= "this.formatterDate">
-                            </el-table-column>
-                            <el-table-column
-                                property="monitorDevice"
-                                label="监测设备">
-                            </el-table-column>
-                            <el-table-column
-                                property="reservationService"
-                                label="预约业务">
-                            </el-table-column>
-                            <el-table-column
-                                property="reservationNumber"
-                                label="预约编号">
-                            </el-table-column>
-                            <el-table-column
-                                property="checkInMethod"
-                                label="签到方式">
-                            </el-table-column>
-                            <el-table-column
-                                property="monitorCertificate"
-                                label="监测凭证">
-                                <template slot-scope="scope">
-                                    <img  style="width: 70px; height: 100px" :src="scope.row.monitorCertificate" alt="图片">
-                                </template>
-                            </el-table-column>
-                        </el-table>
-                        <el-pagination
-                            @size-change="changeSize"
-                            @current-change="changePage"
-                            :current-page="this.params.page"
-                            :page-size="this.params.size"
-                            layout="total, prev, pager, next"
-                            :total="this.total">
-                        </el-pagination>
-                    </div>
-                </div>
+  <div>
+    <!-- 抽屉框表单 -->
+    <el-drawer
+      :title="title"
+      :visible.sync="open"
+      :direction="direction"
+      size="95%"
+    >
+      <div style="height: 100%;">
+        <div class="warning">
+          <i class="el-icon-s-opportunity"></i>
+          系统检测以下人员（20人）识别频次过高：
         </div>
-        </el-drawer>
-        <el-dialog title="限制取号" :visible.sync="show" width="31.25rem" append-to-body>
-            <el-form ref="form" :model="restrict" :label-position="right" label-width="7.5rem">
-                <el-form-item label="姓名：">{{ restrict.name }}</el-form-item>
-                <el-form-item label="联系电话：">{{ restrict.contact }}</el-form-item>
-                <el-form-item label="身份证号：">{{ restrict.idNumber }}</el-form-item>
-                <el-form-item label="识别频次：">{{ restrict.identifyNum }}</el-form-item>
-                <el-form-item label="限制取号：">
-                    <el-input placeholder="请输入内容" v-model="restrict.times">
-                        <template slot="append">次 / 天</template>
-                    </el-input>
-                </el-form-item>
-            </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="show= false">确 定</el-button>
-                <el-button @click="show= false">取 消</el-button>
+        <div class="drawer_box">
+          <div class="drawer_box_left">
+            <el-table
+              ref="singleTable"
+              :data="tableDataL"
+              highlight-current-row
+              @current-change="handleCurrentChange"
+              style="width: 100%"
+              border
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="50"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="name"
+                label="姓名"
+                width="80"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="contact"
+                label="联系电话"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="identifyNum"
+                label="识别频次"
+                width="80"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="lastIdentifyTime"
+                label="最近识别时间"
+                :formatter="this.formatterDate"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="drawer_box_right">
+            <div class="recognition">
+              <div>
+                <div class="recognition_name">{{ singleSelect.name }}</div>
+                <div class="recognition_desc">
+                  联系电话：{{ singleSelect.contact }} <br />
+                  身份证号：{{ singleSelect.idNumber }}<br />
+                  识别频次：{{ singleSelect.identifyNum }}
+                </div>
+              </div>
+              <div>
+                <el-button
+                  type="primary"
+                  @click="show = true"
+                  style="width: 120px;height: 48px;line-height: 24px;font-size: 16px; font-weight: 600;"
+                  >限制取号</el-button
+                >
+              </div>
             </div>
-        </el-dialog>
-    </div>
+            <el-table :data="tableDataR" style="width: 100%" border>
+              <el-table-column
+                type="index"
+                label="序号"
+                width="50"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="monitorTime"
+                label="监测时间"
+                :formatter="this.formatterDate"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="monitorDevice"
+                label="监测设备"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="reservationService"
+                label="预约业务"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="reservationNumber"
+                label="预约编号"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="checkInMethod"
+                label="签到方式"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                property="monitorCertificate"
+                label="监测凭证"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <img
+                    style="width: 70px; height: 100px"
+                    :src="scope.row.monitorCertificate"
+                    alt="图片"
+                  />
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-pagination
+              @size-change="changeSize"
+              @current-change="changePage"
+              :current-page="this.params.page"
+              :page-size="this.params.size"
+              layout="total, prev, pager, next"
+              :total="this.total"
+              style="text-align: end;"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+    <el-dialog
+      title="限制取号"
+      :visible.sync="show"
+      width="31.25rem"
+      append-to-body
+    >
+      <el-form
+        ref="form"
+        :model="restrict"
+        :label-position="right"
+        label-width="7.5rem"
+      >
+        <el-form-item label="姓名：">{{ restrict.name }}</el-form-item>
+        <el-form-item label="联系电话：">{{ restrict.contact }}</el-form-item>
+        <el-form-item label="身份证号：">{{ restrict.idNumber }}</el-form-item>
+        <el-form-item label="识别频次：">{{
+          restrict.identifyNum
+        }}</el-form-item>
+        <el-form-item label="限制取号：">
+          <el-input placeholder="请输入内容" v-model="restrict.times">
+            <template slot="append">次 / 天</template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="show = false">确 定</el-button>
+        <el-button @click="show = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 import table from "@/assets/mixins/table";
 export default {
-    name: "dataDrawerShow",
-    components: {
-    },
-    mixins: [table],
-    created() {
+  name: "dataDrawerShow",
+  components: {},
+  mixins: [table],
+  created() {},
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 弹出层标题
+      title: "监测预警",
+      // 是否显示弹出层
+      open: false,
+      // 限制取号
+      show: false,
+      direction: "rtl",
+      // 左侧表格数据
+      tableDataL: [],
+      // 左侧被选中的数据
+      singleSelect: {},
+      // 右侧表格数据
+      tableDataR: [],
+      params: {
+        size: 10,
+        page: 1,
+      },
+      total: 0,
+      restrict: {
+        name: "",
+        contact: "",
+        idNumber: "",
+        identifyNum: "",
+        times: "",
+      },
+    };
+  },
 
+  methods: {
+    view(row) {
+      this.open = true;
+      this.getAllMonitor();
     },
-    data() {
-        return {
-            // 遮罩层
-            loading: true,
-            // 弹出层标题
-            title: "监测预警",
-            // 是否显示弹出层
-            open: false,
-            // 限制取号
-            show: false,
-            direction:"rtl",
-            // 左侧表格数据
-            tableDataL:[],
-            // 左侧被选中的数据
-            singleSelect: {},
-            // 右侧表格数据
-            tableDataR: [],
-            params: {
-                size: 10,
-                page: 1
-            },
-            total: 0,
-            restrict:{
-                name: '',
-                contact: '',
-                idNumber: '',
-                identifyNum: '',
-                times: ''
-            }
-        }
+    async getAllMonitor() {
+      const res = await this.$post("monitor/alarm/list");
+      if (res && res.code == 1) {
+        this.tableDataL = res.data.data;
+        console.log(res);
+        this.total = res.data.total;
+        this.params.page = res.data.current_page;
+        this.params.size = res.data.per_page;
+        this.$refs.singleTable.setCurrentRow(this.tableDataL[0]); // 默认选中第一条
+      }
     },
-
-    methods: {
-        view(row) {
-            this.open=true
-            this.getAllMonitor()
-        },
-        async getAllMonitor(){
-            const res = await this.$post('monitor/alarm/list')
-            if(res && res.code == 1){
-                this.tableDataL= res.data.data
-                console.log(res)
-                this.total= res.data.total
-                this.params.page= res.data.current_page
-                this.params.size= res.data.per_page
-                this.$refs.singleTable.setCurrentRow(this.tableDataL[0]) // 默认选中第一条
-            }
-        },
-        async handleCurrentChange(row){
-            this.singleSelect= row
-            this.restrict= {...row}
-            const res = await this.$post('monitor/alarm/record/list')
-            if(res && res.code == 1){
-                this.tableDataR= res.data.data
-            }
-        },
-        // 监听size改变
-        changeSize (newSize) {
-            this.size = newSize
-        },
-        // 页码改变
-        changePage (newPage) {
-            this.page = newPage
-        },
+    async handleCurrentChange(row) {
+      this.singleSelect = row;
+      this.restrict = { ...row };
+      const res = await this.$post("monitor/alarm/record/list");
+      if (res && res.code == 1) {
+        this.tableDataR = res.data.data;
+      }
+    },
+    // 监听size改变
+    changeSize(newSize) {
+      this.size = newSize;
+    },
+    // 页码改变
+    changePage(newPage) {
+      this.page = newPage;
     },
+  },
 };
 </script>
 <style scope>
-.warning{
-    padding: 0 .625rem;
-    height: 1.875rem;
-    line-height: 1.875rem;
-    font-size: 1.25rem;
-    color: #F94545;
+.warning {
+  padding: 0 0.625rem;
+  height: 3rem;
+  line-height: 3rem;
+  font-size: 1.25rem;
+  color: #f94545;
+  padding-left: 20px;
+  background: rgba(249, 69, 69, 0.1);
 }
-.drawer_box{
-    display: flex;
+.drawer_box {
+  display: flex;
+  height: 100%;
+  padding: 20px 10px;
 }
-.drawer_box_left{
-    width: 37.5rem;
-    padding: .625rem;
+.drawer_box_left {
+  height: 100%;
+  width: 37.5rem;
+  padding: 0.625rem;
+  border-right: 1px solid #f0f0f0;
 }
-.drawer_box_right{
-    flex: 1;
-    padding: .625rem;
+.drawer_box_right {
+  flex: 1;
+  padding: 0.625rem;
 }
-.recognition{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: .625rem;
+.recognition {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.625rem;
 }
-.recognition_name{
-    font-size: 1.25rem;
-    color: #333;
-    margin-bottom: .3125rem;
+.recognition_name {
+  font-size: 1.25rem;
+  color: #000;
+  font-weight: 600;
+  margin-bottom: 0.3125rem;
 }
-.recognition_desc{
-    font-size: .875rem;
-    color: #666;
+.recognition_desc {
+  font-size: 0.875rem;
+  color: #666;
 }
 </style>

refined-manager-ui/admin/src/views/realtime/dataflow/list.vue

 <template>
   <div class="page">
+    <span
+      style="position: absolute; top: -30px;right: 0;font-size: 12px; color: #aaa;"
+    >
+      <i class="el-icon-warning"></i
+      > 流量数据由海康提供，本系统提供15日暂存服务。</span
+    >
     <LayoutTable notAdd notDel :data="tableData" :config="tableConfig">
       <el-button
         slot="table-head-left2"
-        style="margin-left: 10px"
         icon="el-icon-tickets"
         size="mini"
         type="danger"