Explorar el Código

reactor:大屏调整;

zhangchong hace 3 meses
padre
commit
f1218c727d
Se han modificado 4 ficheros con 219 adiciones y 8 borrados
  1. 24 0
      src/api/home.ts
  2. 89 4
      src/views/home/center-bottom.vue
  3. 2 1
      src/views/home/center-float.vue
  4. 104 3
      src/views/home/left-top.vue

+ 24 - 0
src/api/home.ts

@@ -28,6 +28,18 @@ export const knowledge = (params?: object) => {
     params,
   });
 };
+/**
+ * @description 二次办理统计
+ * @param {object} params
+ * @return {*}
+ */
+export const secondHandling = (params?: object) => {
+  return request({
+    url: `/api/v1/DataScreen/order-secondary-statistics`,
+    method: "get",
+    params,
+  });
+};
 /**
  * @description 受理类型办件分析
  * @param {object} params
@@ -100,6 +112,18 @@ export const orderView = (params?: object) => {
     params,
   });
 };
+/**
+ * @description 二次办理中工单预览
+ * @param {object} params
+ * @return {*}
+ */
+export const secondaryHandling = (params?: object) => {
+  return request({
+    url: `/api/v1/DataScreen/order-secondary-handling-query`,
+    method: "get",
+    params,
+  });
+};
 /**
  * @description 近30天高频事项预警
  * @param {object} params

+ 89 - 4
src/views/home/center-bottom.vue

@@ -3,10 +3,19 @@
     <div class="center_bottom-title flex">
       <div class="flex items-center">
         <img src="@/assets/img/home/title_arrow.png" alt="" />
-        今日工单概览
+        <span :class="{ active: active === '0' }" @click="active = '0'"
+          >今日工单概览</span
+        >
+        <span
+          class="ml-14"
+          :class="{ active: active === '1' }"
+          @click="active = '1'"
+          v-if="['ZiGong'].includes(themeConfig.appScope)"
+          >今日二次办理工单概览</span
+        >
       </div>
     </div>
-    <div class="center_bottom-content">
+    <div class="center_bottom-content" v-if="active === '0'">
       <div class="table-header">
         <div class="table-header-item">超期状态</div>
         <div class="table-header-item">来源</div>
@@ -50,13 +59,56 @@
         <empty v-else />
       </div>
     </div>
+    <div class="center_bottom-content" v-if="active === '1'">
+      <div class="table-header">
+        <div class="table-header-item">超期状态</div>
+        <div class="table-header-item">工单状态</div>
+        <div class="table-header-item">标题</div>
+        <div class="table-header-item">申请部门</div>
+        <div class="table-header-item">申请时间</div>
+        <div class="table-header-item">受理类型</div>
+      </div>
+      <div class="scroll" v-loading="loading">
+        <vue3-seamless-scroll
+          :list="shList"
+          hover
+          :singleHeight="100"
+          v-if="shList.length"
+        >
+          <div class="item" v-for="(item, index) in shList" :key="index">
+            <span>
+              <span class="exceedSoon" v-if="item.order?.expiredStatus === 1">{{
+                item.order?.expiredStatusText
+              }}</span>
+              <span class="exceed" v-if="item.order?.expiredStatus === 2">{{
+                item.order?.expiredStatusText
+              }}</span>
+              <span class="normal" v-if="item.order?.expiredStatus === 0">{{
+                item.order?.expiredStatusText
+              }}</span>
+            </span>
+            <TextTooltip :content="item.order?.statusText"></TextTooltip>
+            <TextTooltip :content="item.order?.title"></TextTooltip>
+            <TextTooltip :content="item.applyOrgName"></TextTooltip>
+            <TextTooltip
+              :content="formatDate(item.creationTime, 'YYYY-mm-dd HH:MM:SS')"
+            ></TextTooltip>
+            <TextTooltip :content="item.order?.acceptType"></TextTooltip>
+          </div>
+        </vue3-seamless-scroll>
+        <empty v-else />
+      </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, defineAsyncComponent } from "vue";
 import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
-import { orderView } from "api/home";
+import { orderView, secondaryHandling } from "api/home";
 import signalR from "@/utils/signalR";
+import { useThemeConfig } from "@/stores/themeConfig";
+import { storeToRefs } from "pinia";
+import { formatDate } from "@/utils/formatTime";
 
 const TextTooltip = defineAsyncComponent(
   () => import("@/components/TextTooltip/index.vue")
@@ -64,6 +116,10 @@ const TextTooltip = defineAsyncComponent(
 const Empty = defineAsyncComponent(
   () => import("@/components/Empty/index.vue")
 );
+
+const storesThemeConfig = useThemeConfig();
+const { themeConfig } = storeToRefs(storesThemeConfig);
+const active = ref("0");
 const list = ref([]);
 const loading = ref(false);
 const getData = async () => {
@@ -77,12 +133,31 @@ const getData = async () => {
     loading.value = false;
   }
 };
+// 获取二次办理概览
+const shList = ref([]);
+const getSecondHandling = async () => {
+  loading.value = true;
+  try {
+    const { result } = await secondaryHandling();
+    shList.value = result;
+    loading.value = false;
+  } catch (e) {
+    console.log(e);
+    loading.value = false;
+  }
+};
 onMounted(() => {
   // 接收消息
   signalR.SR.on("orderHandlingDetail", (res: any) => {
     list.value = res;
   });
+  signalR.SR.on("OrderSecondaryHandlingDetail", (res: any) => {
+    shList.value = res;
+  });
   getData();
+  if (["ZiGong"].includes(themeConfig.value.appScope)) {
+    getSecondHandling();
+  }
 });
 onUnmounted(() => {
   // 取消接收消息
@@ -101,10 +176,20 @@ onUnmounted(() => {
   }
 
   &-title {
-    font-size: 20px;
     color: #fff;
     justify-content: space-between;
     align-items: center;
+    span {
+      cursor: pointer;
+      text-align: center;
+      font-size: 18px;
+      &.active {
+        color: #fff;
+        font-size: 20px;
+        font-weight: bold;
+        position: relative;
+      }
+    }
   }
 
   &-content {

+ 2 - 1
src/views/home/center-float.vue

@@ -98,7 +98,8 @@ onMounted(() => {
 
   .table-body {
     margin-top: 10px;
-
+    max-height: 400px;
+    overflow-y: auto;
     .table-body-item {
       display: flex;
       justify-content: space-between;

+ 104 - 3
src/views/home/left-top.vue

@@ -4,6 +4,12 @@
       <span :class="{ active: active === '0' }" @click="active = '0'"
         >工单统计</span
       >
+      <span
+        :class="{ active: active === '2' }"
+        @click="active = '2'"
+        v-if="['ZiGong'].includes(themeConfig.appScope)"
+        >二次办理统计</span
+      >
       <span :class="{ active: active === '1' }" @click="active = '1'"
         >知识库统计</span
       >
@@ -161,16 +167,86 @@
         </div>
       </div>
     </div>
+    <div
+      v-if="active === '2'"
+      class="flex flex-wrap left-top-content-knowledge"
+      v-loading="loading"
+    >
+      <div class="flex left-top-content-item">
+        <img src="@/assets/img/home/done_order.png" alt="" />
+        <div class="left-top-content-item-text">
+          <div class="left-top-content-item-text-title">二次办理工单</div>
+          <div class="left-top-content-item-text-num">
+            <b>
+              <CountUp
+                :endVal="state.secondHandling.orderCount"
+                :duration="2"
+              />
+            </b>
+            件
+          </div>
+        </div>
+      </div>
+      <div class="flex left-top-content-item">
+        <img src="@/assets/img/home/knowledge_update.png" alt="" />
+        <div class="left-top-content-item-text">
+          <div class="left-top-content-item-text-title">二次办理超期</div>
+          <div class="left-top-content-item-text-num">
+            <b>
+              <CountUp
+                :endVal="state.secondHandling.orderOverdueCount"
+                :duration="2"
+              />
+            </b>
+            件
+          </div>
+        </div>
+      </div>
+      <div class="flex left-top-content-item">
+        <img src="@/assets/img/home/knowledge_read.png" alt="" />
+        <div class="left-top-content-item-text">
+          <div class="left-top-content-item-text-title">
+            二次办理即将超期工单
+          </div>
+          <div class="left-top-content-item-text-num">
+            <b>
+              <CountUp
+                :endVal="state.secondHandling.orderSoonOverdueCount"
+                :duration="2"
+              />
+            </b>
+            件
+          </div>
+        </div>
+      </div>
+      <div class="flex left-top-content-item">
+        <img src="@/assets/img/home/knowledge_total.png" alt="" />
+        <div class="left-top-content-item-text">
+          <div class="left-top-content-item-text-title">二次办理满意度</div>
+          <div class="left-top-content-item-text-num">
+            <b>
+              {{ state.secondHandling.satisfactionRate }}
+            </b>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
 import { defineAsyncComponent, onMounted, reactive, ref, watch } from "vue";
-import { knowledge, workOrder } from "@/api/home";
+import { knowledge, workOrder, secondHandling } from "@/api/home";
 import dayjs from "dayjs";
+import { useThemeConfig } from "@/stores/themeConfig";
+import { storeToRefs } from "pinia";
 
 const CountUp = defineAsyncComponent(
   () => import("@/components/Count-up/index.vue")
 );
+
+const storesThemeConfig = useThemeConfig();
+const { themeConfig } = storeToRefs(storesThemeConfig);
+
 const active = ref("0");
 const props = defineProps({
   dateArray: {
@@ -192,9 +268,11 @@ watch(
   () => props.dateArray,
   (val: any) => {
     getWorkOrder();
+    if (["ZiGong"].includes(themeConfig.value.appScope)) {
+      getSecondHandling();
+    }
   }
 );
-const duration = ref(2);
 const state = reactive({
   order: {
     completionCount: 0,
@@ -216,6 +294,12 @@ const state = reactive({
     todayReadCount: 0,
     knowledgeCount: 0,
   },
+  secondHandling: {
+    orderCount: 0,
+    orderOverdueCount: 0,
+    orderSoonOverdueCount: 0,
+    satisfactionRate: "0%",
+  },
 });
 // 获取工单统计
 const getWorkOrder = async () => {
@@ -244,10 +328,27 @@ const getKnowledge = async () => {
     loading.value = false;
   }
 };
-
+// 获取二次办理统计
+const getSecondHandling = async () => {
+  loading.value = true;
+  try {
+    const { result } = await secondHandling({
+      StartTime: dayjs(date.value[0]).format("YYYY-MM-DD"),
+      EndTime: dayjs(date.value[1]).format("YYYY-MM-DD"),
+    });
+    state.secondHandling = result;
+    loading.value = false;
+  } catch (e) {
+    console.log(e);
+    loading.value = false;
+  }
+};
 onMounted(() => {
   getWorkOrder();
   getKnowledge();
+  if (["ZiGong"].includes(themeConfig.value.appScope)) {
+    getSecondHandling();
+  }
 });
 </script>
 <style scoped lang="scss">