feat: 排队报表接口调试

admin_2/src/App.vue

 <template>
   <div class="app h-full w-full">
+    <div class="loading" v-if="loading">
+      <div>
+        <div class="title">{{ title }}...</div>
+        <el-progress :percentage="percentage" color="#1890ff"></el-progress>
+      </div>
+    </div>
     <router-view />
   </div>
 </template>
 
 <script>
+import Vue from "vue";
 export default {
   data() {
-    return {};
+    return {
+      percentage: 1,
+      loading: false,
+      title: "文件导出中",
+    };
+  },
+  beforeCreate() {
+    Vue.prototype.$app = this;
   },
-
   created() {},
   methods: {},
 };
@@ -19,5 +32,28 @@ export default {
 .app {
   background-color: #eff0f4;
   font-family: Source Han Sans CN;
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    z-index: 99999;
+    .title {
+      color: #fff;
+      font-size: 14px;
+      text-align: center;
+    }
+    .el-progress {
+      width: 300px;
+      :deep(.el-progress__text) {
+        color: #fff !important;
+      }
+    }
+  }
 }
 </style>

admin_2/src/api/site.js

@@ -8,3 +8,37 @@ export const getSiteTree = (params) => {
     params,
   });
 };
+
+// 获取部门
+export const getDepartment = (data) => {
+  return request({
+    url: `/base/dept/list`,
+    method: "post",
+    data,
+  });
+};
+// 获取大厅
+export const getHall = (data) => {
+  return request({
+    url: `/base/site/hall/list`,
+    method: "post",
+    data,
+  });
+};
+
+// 获取窗口
+export const getWindow = (data) => {
+  return request({
+    url: `/base/window/list`,
+    method: "post",
+    data,
+  });
+};
+// 获取站点业务
+export const getSiteBusiness = (data) => {
+  return request({
+    url: `/base/site/business/list`,
+    method: "post",
+    data,
+  });
+};

admin_2/src/assets/css/common.less

@@ -160,6 +160,11 @@
   background-color:var(--primary)
 }
 
+.el-descriptions-item__content:empty::before {
+  content: "--";
+  color: gray;
+}
+
 // .search-popover{
 //   box-shadow: 0 0 12px 0 rgba(24, 144, 255, 0.1);
 //   border: 1px solid var(--primary);

admin_2/src/components/autoRegister/AreaTree.vue

 <template>
   <div class="h-full w-full">
     <el-tree
-      :data="siteTree"
+      :data="areaTree"
       :props="defaultProps"
       node-key="id"
       highlight-current
@@ -50,8 +50,11 @@ export default {
   created() {},
   methods: {
     handleNodeClick(data) {
-      let type = data.type;
-      this.$emit("change", type, data.id);
+      let form = {
+        type: data.type,
+        id: data.id,
+      };
+      this.$emit("change", form);
     },
   },
 };

admin_2/src/components/autoRegister/YDatePicker.vue

+<template>
+  <el-date-picker
+    :value="value"
+    type="daterange"
+    :value-format="valueFormat"
+    unlink-panels
+    :picker-options="pickerOptions"
+    :clearable="Clearable"
+    v-bind="$attrs"
+    @input="handleChange"
+    v-on="$listeners"
+  >
+  </el-date-picker>
+</template>
+
+<script>
+export default {
+  name: "YDatePicker",
+  model: {
+    event: "change",
+    prop: "value",
+  },
+
+  props: {
+    value: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
+    valueFormat: {
+      type: String,
+      default: "yyyy-MM-dd",
+    },
+  },
+  data() {
+    return {
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "今天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    Clearable() {
+      return !!this.clearable;
+    },
+  },
+  methods: {
+    handleChange(val) {
+      this.$emit("change", val);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

admin_2/src/components/autoRegister/YTable.vue

@@ -62,6 +62,7 @@ export default {
       handler() {
         this.$nextTick(() => {
           this.$refs.MyTable.bodyWrapper.scrollTop = 0;
+          this.$refs.MyTable.bodyWrapper.scrollLeft = 0;
         });
       },
       immediate: true,

admin_2/src/layouts/components/HeaderSite.vue

@@ -16,7 +16,7 @@
         class="content"
         style="min-width: 60vw; max-width: 80vw; min-height: 200px"
       >
-        <div class="flex_row flex_align_c primary-color name">
+        <div class="name">
           <i class="el-icon-location" style="margin-right: 10px"></i>
           <span style="">{{ siteName }}</span>
         </div>
@@ -230,40 +230,4 @@ export default {
   color: #ffffff;
   cursor: pointer;
 }
-.select-site {
-  position: fixed;
-  left: 300px !important;
-  top: 65px;
-  background: #fff;
-  border-radius: 6px;
-  padding: 10px;
-  min-width: 60%;
-  max-width: 80%;
-  z-index: 9;
-  color: rgba(0, 0, 0, 0.8);
-  font-size: 14px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-  .name {
-    font-size: 20px;
-  }
-  .site-list {
-    // padding: 10px 0;
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-    overflow: hidden;
-    span {
-      float: left;
-      line-height: 1.5;
-      padding: 10px 20px;
-      cursor: pointer;
-      &:hover {
-        color: #1890ff;
-      }
-    }
-  }
-  .check-site,
-  .site-btn {
-    padding: 0 20px;
-  }
-}
 </style>

admin_2/src/pages/market/Market.vue

@@ -18,7 +18,7 @@
         </el-tab-pane>
       </el-tabs>
       <div class="out-box flex-1 p-[20px]">
-        <router-view></router-view>
+        <router-view ref="Page"></router-view>
       </div>
     </div>
   </div>
@@ -56,8 +56,8 @@ export default {
       );
     },
     // 改变站点选择
-    changeSite(type, siteId) {
-      console.log(type, siteId);
+    changeSite(data) {
+      this.$refs.Page.getSite(data);
     },
   },
 };

admin_2/src/pages/market/components/QueueUpDetails.vue

@@ -13,7 +13,7 @@
         labelClassName="label-name"
       >
         <el-descriptions-item
-          v-for="(v, i) in detailsList"
+          v-for="(v, i) in dataInfo"
           :key="i"
           :label="v.title"
         >
@@ -25,123 +25,156 @@
 </template>
 
 <script>
+import { formatSeconds } from "@/utils";
 export default {
   props: {
     show: {
       type: Boolean,
       default: false,
     },
+    info: {
+      required: true,
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
     return {
       detailsList: [
         {
           title: "预约编号",
-          content: "测试",
+          prop: "ordernumber",
+          content: "",
         },
         {
           title: "叫号状态",
-          content: "测试",
+          prop: "style",
+          content: "",
         },
         {
           title: "业务名称",
-          content: "测试",
+          prop: "business",
+          content: "",
         },
         {
           title: "窗口名称",
-          content: "测试",
+          prop: "windowName",
+          content: "",
         },
         {
           title: "窗口编号",
-          content: "测试",
+          prop: "windowFromnum",
+          content: "",
         },
         {
           title: "流水编号,当天的第xxx号",
-          content: "测试",
+          prop: "flownum",
+          content: "",
         },
         {
           title: "呼叫转移号",
-          content: "测试",
+          prop: "formernum",
+          content: "",
         },
         {
           title: "姓名",
-          content: "测试",
+          prop: "peopleName",
+          content: "",
         },
         {
           title: "身份证号",
-          content: "测试",
+          prop: "peopleIdcard",
+          content: "",
         },
         {
           title: "性别",
-          content: "测试",
+          prop: "peopleSex",
+          content: "",
         },
         {
           title: "手机号",
-          content: "测试",
+          prop: "peoplePhone",
+          content: "",
         },
         {
           title: "工作人员姓名",
-          content: "测试",
+          prop: "workmanName",
+          content: "",
         },
         {
           title: "工作人员工号",
-          content: "测试",
+          prop: "workmanNumber",
+          content: "",
         },
         {
           title: "取号时间",
-          content: "测试",
+          prop: "taketime",
+          content: "",
         },
         {
           title: "结束时间",
-          content: "测试",
+          prop: "endtime",
+          content: "",
         },
         {
           title: "等待时间",
-          content: "测试",
+          prop: "waitTime",
+          content: "",
         },
         {
           title: "办理时间",
-          content: "测试",
+          prop: "handleTime",
+          content: "",
         },
         {
           title: "取号设备类型",
-          content: "测试",
+          prop: "deviceType",
+          content: "",
         },
         {
           title: "取号设备名称",
-          content: "测试",
+          prop: "deviceName",
+          content: "",
         },
         {
           title: "呼叫设备",
-          content: "测试",
+          prop: "callName",
+          content: "",
         },
         {
           title: "事项名称",
-          content: "测试",
+          prop: "matterName",
+          content: "",
         },
         {
           title: "排号队列ID，唯一",
-          content: "测试",
+          prop: "queueid",
+          content: "",
         },
         {
           title: "大厅名称",
+          prop: "hallName",
           content: "测试",
         },
         {
           title: "站点ID",
-          content: "测试",
+          prop: "siteId",
+          content: "",
         },
         {
           title: "站点编码",
-          content: "测试",
+          prop: "siteCode",
+          content: "",
         },
         {
           title: "站点名称",
-          content: "测试",
+          prop: "siteName",
+          content: "",
         },
         {
           title: "扩展编号",
-          content: "测试",
+          prop: "extNum",
+          content: "",
         },
       ],
     };
@@ -155,7 +188,22 @@ export default {
         this.$emit("update:show", val);
       },
     },
+    dataInfo() {
+      this.detailsList.forEach((v) => {
+        if (v.prop == "taketime" || v.prop == "endtime") {
+          v.content = this.$moment(this.info[v.prop]).format(
+            "YYYY-MM-DD HH:mm:ss"
+          );
+        } else if (v.prop == "waitTime" || v.prop == "handleTime") {
+          v.content = formatSeconds(this.info[v.prop]);
+        } else {
+          v.content = this.info[v.prop];
+        }
+      });
+      return this.detailsList;
+    },
   },
+  methods: {},
 };
 </script>
 

admin_2/src/utils/index.js

+import Vue from "vue";
 import CryptoJS from "crypto-js";
+import moment from "moment";
 
 // 加密数据
 export let encrypt = (str, keyStr, ivStr) => {
@@ -121,3 +123,41 @@ export function findBottomSubarrays(arr) {
   recursiveSearch(arr);
   return bottomSubarrays;
 }
+
+// 秒数转HH:mm:ss
+export function formatSeconds(secondsNum) {
+  const time = moment.duration(secondsNum, "seconds");
+  const hours = time.hours();
+  const minutes = time.minutes();
+  const seconds = time.seconds();
+  return moment({ h: hours, m: minutes, s: seconds }).format("HH:mm:ss");
+}
+
+/**
+ *
+ * @param {*} fn 数据获取函数
+ * @param {*} searchForm 搜索表单
+ * @param {*} callback  回调函数
+ */
+export const dataSection = async (fn, searchForm = {}, callback) => {
+  let dataList = [];
+  let page = 1;
+  let size = 1000;
+  let execute = async () => {
+    let { data, total } = await fn({ page, size, ...searchForm });
+    dataList = [...dataList, ...data];
+    Vue.prototype.$app.loading = true;
+    Vue.prototype.$app.percentage = parseInt((dataList.length / total) * 100);
+    if (dataList.length >= total || data.data.length == 0) {
+      if (callback) callback(dataList);
+      Vue.prototype.$app.loading = false;
+      Vue.prototype.$app.percentage = 1;
+      return;
+    }
+    setTimeout(() => {
+      page += 1;
+      execute();
+    });
+  };
+  execute();
+};