reactor:司法大屏调整;

src/views/judicial/center-bottom.vue

@@ -2,28 +2,27 @@
   <div class="center_bottom">
     <div class="center_bottom-title flex">
       <div class="flex items-center">
-        <img src="@/assets/img/home/title_arrow.png" alt="">
+        <img src="@/assets/img/home/title_arrow.png" alt="" />
         今日行政执法工单概览
       </div>
     </div>
     <div class="center_bottom-content">
       <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 class="table-header-item">接办部门</div>
+        <div class="table-header-item">执法部门</div>
       </div>
       <div class="scroll" v-loading="loading">
-        <vue3-seamless-scroll :list="list" hover :singleHeight="100" v-if="list.length">
+        <vue3-seamless-scroll
+          :list="list"
+          hover
+          :singleHeight="100"
+          v-if="list.length"
+        >
           <div class="item" v-for="(item, index) in list" :key="index">
-            <span>
-              <span class="exceedSoon" v-if="item.expiredStatus === 1">{{ item.expiredStatusText }}</span>
-              <span class="exceed" v-if="item.expiredStatus === 2">{{ item.expiredStatusText }}</span>
-              <span class="normal" v-if="item.expiredStatus === 0">{{ item.expiredStatusText }}</span>
-            </span>
             <TextTooltip :content="item.sourceChannel"></TextTooltip>
             <TextTooltip :content="item.title"></TextTooltip>
             <TextTooltip :content="item.acceptType"></TextTooltip>
@@ -40,38 +39,39 @@
   </div>
 </template>
 <script setup lang="ts">
-import {ref, onMounted, onUnmounted, defineAsyncComponent} from "vue";
-import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
+import { ref, onMounted, onUnmounted, defineAsyncComponent } from "vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 import EmptyCom from "@/components/empty-com";
-import {centerBottomData} from "api/judicial";
+import { centerBottomData } from "api/judicial";
 import signalR from "@/utils/signalR";
 
-
-const TextTooltip = defineAsyncComponent(() => import('@/components/TextTooltip/index.vue'));
-const list = ref([])
+const TextTooltip = defineAsyncComponent(
+  () => import("@/components/TextTooltip/index.vue")
+);
+const list = ref([]);
 const loading = ref(false);
 const getData = async () => {
   loading.value = true;
   try {
-    const {result} = await centerBottomData();
+    const { result } = await centerBottomData();
     list.value = result;
     loading.value = false;
   } catch (e) {
     console.log(e);
     loading.value = false;
   }
-}
+};
 onMounted(() => {
   // 接收消息
-  signalR.SR.on('EnforcementOrderHandlingDetail', (res: any) => {
+  signalR.SR.on("EnforcementOrderHandlingDetail", (res: any) => {
     list.value = res;
   });
   getData();
-})
+});
 onUnmounted(() => {
   // 取消接收消息
-  signalR.SR.off('EnforcementOrderHandlingDetail');
-})
+  signalR.SR.off("EnforcementOrderHandlingDetail");
+});
 </script>
 
 <style scoped lang="scss">
@@ -81,7 +81,7 @@ onUnmounted(() => {
   :deep(.custom-text-content) {
     flex: 1;
     text-align: center;
-    color: #CFD2D2;
+    color: #cfd2d2;
   }
 
   &-title {
@@ -97,7 +97,11 @@ onUnmounted(() => {
     .table-header {
       display: flex;
       justify-content: space-between;
-      background: linear-gradient(to right, rgba(27, 51, 55, .8), rgba(45, 83, 91, .8));
+      background: linear-gradient(
+        to right,
+        rgba(27, 51, 55, 0.8),
+        rgba(45, 83, 91, 0.8)
+      );
 
       width: 100%;
       height: 40px;
@@ -105,7 +109,7 @@ onUnmounted(() => {
 
       .table-header-item {
         text-align: center;
-        color: #B4D7EC;
+        color: #b4d7ec;
         flex: 1;
       }
     }
@@ -128,33 +132,32 @@ onUnmounted(() => {
           overflow: hidden;
           text-overflow: ellipsis;
           text-align: center;
-          color: #CFD2D2;
+          color: #cfd2d2;
           flex: 1;
         }
 
         .exceedSoon {
-          border: 1px solid #ECA455;
+          border: 1px solid #eca455;
           border-radius: 3px;
-          color: #ECA455;
+          color: #eca455;
           padding: 2px 5px;
         }
 
         .exceed {
-          border: 1px solid #D70024;
+          border: 1px solid #d70024;
           border-radius: 3px;
-          color: #D70024;
+          color: #d70024;
           padding: 2px 5px;
         }
 
         .normal {
-          border: 1px solid #69BBF6;
+          border: 1px solid #69bbf6;
           border-radius: 3px;
-          color: #69BBF6;
+          color: #69bbf6;
           padding: 2px 5px;
         }
       }
     }
-
   }
 }
-</style>
+</style>

src/views/judicial/container.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="container-box">
     <div class="container-left">
-      <LeftTop class="container-left-top" :dateArray="dateArray"/>
-      <LeftCenter class="container-left-center" :dateArray="dateArray"/>
-      <LeftBottom class="container-left-bottom" :dateArray="dateArray"/>
+      <LeftTop class="container-left-top" :dateArray="dateArray" />
+      <!--      <LeftCenter class="container-left-center" :dateArray="dateArray"/>-->
+      <LeftBottom class="container-left-bottom" :dateArray="dateArray" />
     </div>
     <div class="container-center">
-      <CenterMap class="container-center-map" :dateArray="dateArray"/>
-      <CenterBottom class="container-center-bottom" :dateArray="dateArray"/>
+      <CenterMap class="container-center-map" :dateArray="dateArray" />
+      <CenterBottom class="container-center-bottom" :dateArray="dateArray" />
     </div>
     <div class="container-right">
-      <RightTop class="container-right-top" :dateArray="dateArray"/>
-      <RightCenter class="container-right-center"/>
-      <RightBottom class="container-right-bottom" :dateArray="dateArray"/>
+      <RightTop class="container-right-top" :dateArray="dateArray" />
+      <RightCenter class="container-right-center" />
+      <RightBottom class="container-right-bottom" :dateArray="dateArray" />
     </div>
   </div>
 </template>
@@ -29,9 +29,9 @@ import RightBottom from "@/views/judicial/right-bottom.vue";
 const props = defineProps({
   dateArray: {
     type: Array,
-    default: () => []
-  }
-})
+    default: () => [],
+  },
+});
 </script>
 <style scoped lang="scss">
 .container-box {
@@ -41,7 +41,8 @@ const props = defineProps({
   justify-content: space-between;
   margin-top: 10px;
 
-  .container-left, .container-right {
+  .container-left,
+  .container-right {
     display: flex;
     flex-direction: column;
     position: relative;
@@ -53,12 +54,12 @@ const props = defineProps({
       height: 350px;
     }
 
-    .container-left-center {
+    /* .container-left-center {
       height: 305px;
-    }
+    }*/
 
     .container-left-bottom {
-      height: 290px;
+      height: 595px;
     }
   }
 
@@ -79,7 +80,8 @@ const props = defineProps({
     }
   }
 
-  .container-right, .container-left {
+  .container-right,
+  .container-left {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -88,7 +90,9 @@ const props = defineProps({
     box-sizing: border-box;
     flex-shrink: 0;
 
-    .container-right-top, .container-right-center, .container-right-bottom {
+    .container-right-top,
+    .container-right-center,
+    .container-right-bottom {
       height: 300px;
       overflow: hidden;
     }

src/views/judicial/left-bottom.vue

@@ -87,7 +87,7 @@ const getData = async () => {
       AreaCode: areaCode.value,
     });
     list.value = result;
-    const category = arraySortByKey(result, "sumCount");
+    const category = arraySortByKey(list.value, "sumCount");
     const charts = {
       // 按顺序排列从大到小
       cityList: category.map((item: any) => item.eventTypeName),

src/views/judicial/right-bottom.vue

@@ -2,17 +2,27 @@
   <div class="left_bottom">
     <div class="left_bottom-title flex">
       <div class="flex items-center">
-        <img src="@/assets/img/home/title_arrow.png" alt="">
+        <img src="@/assets/img/home/title_arrow.png" alt="" />
         占比分析
       </div>
       <div class="left_bottom-title-tabs">
-        <span :class="{active: activeIndex === 0}" class="mr-5 left_bottom-title-tabs-item" @click="change(0)">来源方式</span>
-        <span :class="{active: activeIndex === 1}" class="left_bottom-title-tabs-item" @click="change(1)">受理类型</span>
+        <span
+          :class="{ active: activeIndex === 0 }"
+          class="mr-5 left_bottom-title-tabs-item"
+          @click="change(0)"
+          >来源方式</span
+        >
+        <!--        <span :class="{active: activeIndex === 1}" class="left_bottom-title-tabs-item" @click="change(1)"  @click="change(0)">受理类型</span>-->
       </div>
     </div>
     <div class="left_bottom-content">
       <template v-if="dataList.length">
-        <v-chart class="chart" :option="option" :loading="loading" :loading-options="loadingOptions"/>
+        <v-chart
+          class="chart"
+          :option="option"
+          :loading="loading"
+          :loading-options="loadingOptions"
+        />
       </template>
       <template v-else>
         <EmptyCom></EmptyCom>
@@ -21,54 +31,65 @@
   </div>
 </template>
 <script setup lang="ts">
-import {ref, onMounted, watch, computed} from "vue";
+import { ref, onMounted, watch, computed } from "vue";
 import dayjs from "dayjs";
 import EmptyCom from "@/components/empty-com";
-import {loadingOptions} from "@/utils/constants";
-import {rightBottomData} from "api/judicial";
+import { loadingOptions } from "@/utils/constants";
+import { rightBottomData } from "api/judicial";
 
 const props = defineProps({
   dateArray: {
     type: Array,
-    default: () => []
-  }
-})
+    default: () => [],
+  },
+});
 const date = ref([]);
-watch(() => props.dateArray, (val: any) => {
-  date.value = val;
-}, {immediate: true})
+watch(
+  () => props.dateArray,
+  (val: any) => {
+    date.value = val;
+  },
+  { immediate: true }
+);
 
-watch(() => props.dateArray, (val: any) => {
-  getData();
-})
+watch(
+  () => props.dateArray,
+  (val: any) => {
+    getData();
+  }
+);
 
 const activeIndex = ref(0);
 const option = ref<any>({});
 const activeText = computed(() => {
-  return activeIndex.value === 0 ? '来源占比' : '类型占比';
+  return activeIndex.value === 0 ? "来源占比" : "类型占比";
 });
 const change = (index: number) => {
-  activeIndex.value = index;
-  getData();
+  /*  activeIndex.value = index;
+  getData();*/
 };
-const dataList = ref([])
+const dataList = ref([]);
 const loading = ref(false);
 const getData = async () => {
   loading.value = true;
   try {
-    const {result} = await rightBottomData({
-      StartTime: dayjs(date.value[0]).format('YYYY-MM-DD'),
-      EndTime: dayjs(date.value[1]).format('YYYY-MM-DD'),
-      IsSource: activeIndex.value === 0
+    const { result } = await rightBottomData({
+      StartTime: dayjs(date.value[0]).format("YYYY-MM-DD"),
+      EndTime: dayjs(date.value[1]).format("YYYY-MM-DD"),
+      IsSource: activeIndex.value === 0,
     });
-    const legEndTime = result.map((item: any) => item.name).filter((item: any) => item);
-    dataList.value = result.map((item: any) => {
-      return {
-        name: item.name ?? '',
-        value: item.hasCount,
-        ...item
-      }
-    }).filter((item: any) => item.name)
+    const legEndTime = result
+      .map((item: any) => item.name)
+      .filter((item: any) => item);
+    dataList.value = result
+      .map((item: any) => {
+        return {
+          name: item.name ?? "",
+          value: item.hasCount,
+          ...item,
+        };
+      })
+      .filter((item: any) => item.name);
     setOption(legEndTime, dataList.value);
     loading.value = false;
   } catch (e) {
@@ -77,137 +98,137 @@ const getData = async () => {
   }
 };
 const setOption = (legEndTime: any, data: any) => {
-  option.value =
+  option.value = {
+    tooltip: {
+      trigger: "item",
+    },
+    legend: {
+      type: "scroll",
+      pageIconColor: "#fff",
+      pageIconInactiveColor: "#333",
+      height: "180",
+      icon: "circle",
+      top: "center",
+      right: "0",
+      orient: "vertical",
+      itemGap: 20,
+      data: legEndTime,
+      textStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+      formatter: (name) => {
+        const item = dataList.value.find((item) => item.name == name);
+        const len = name.length;
+        let str = "";
+        if (len > 5) {
+          name = name.slice(0, 8) + "...";
+        } else {
+          name = name + str;
+        }
+        return `${name}  ${item.hasRate}% (${item.hasCount}件)`; //返回出图例所显示的内容是名称+百分比
+      },
+    },
+    graphic: [
       {
-        tooltip: {
-          trigger: 'item'
+        type: "text",
+        z: 100,
+        left: "23%",
+        top: "40%",
+        style: {
+          fill: "#fff",
+          text: "100%",
+          font: "28px Microsoft YaHei",
         },
-        legend: {
-          type: 'scroll',
-          pageIconColor: '#fff',
-          pageIconInactiveColor: '#333',
-          height: '180',
-          icon: 'circle',
-          top: 'center',
-          right: '0',
-          orient: "vertical",
-          itemGap: 20,
-          data: legEndTime,
-          textStyle: {
-            color: '#fff',
-            fontSize: 14,
-          },
-          formatter: name => {
-            const item = dataList.value.find(item => item.name == name)
-            const len = name.length;
-            let str = ''
-            if (len > 5) {
-              name = name.slice(0, 8) + '...';
-            } else {
-              name = name + str;
-            }
-            return `${name}  ${item.hasRate}% (${item.hasCount}件)`;  //返回出图例所显示的内容是名称+百分比
-          }
+      },
+      {
+        type: "text",
+        z: 100,
+        left: "24%",
+        top: "56%",
+        style: {
+          fill: "#fff",
+          text: activeText.value,
+          font: "16px Microsoft YaHei",
+        },
+      },
+    ],
+    series: [
+      {
+        name: "",
+        type: "gauge",
+        splitNumber: 10,
+        radius: "65%",
+        center: ["30%", "50%"],
+        startAngle: 0,
+        endAngle: 360,
+        axisLine: {
+          show: false,
         },
-        graphic: [
-          {
-            type: 'text',
-            z: 100,
-            left: '23%',
-            top: '40%',
-            style: {
-              fill: '#fff',
-              text: '100%',
-              font: '28px Microsoft YaHei',
-            }
-          }, {
-            type: 'text',
-            z: 100,
-            left: '24%',
-            top: '56%',
-            style: {
-              fill: '#fff',
-              text: activeText.value,
-              font: '16px Microsoft YaHei'
-            }
-          }],
-        series: [
-          {
-            name: '',
-            type: 'gauge',
-            splitNumber: 10,
-            radius: '65%',
-            center: ['30%', '50%'],
-            startAngle: 0,
-            endAngle: 360,
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: true,
-              lineStyle: {
-                width: 4,
-              },
-              length: 8,
-              splitNumber: 3
-            },
-            splitLine: {
-              show: false
-            },
-            axisLabel: {
-              show: false
-            },
-            detail: {
-              show: false
-            }
+        axisTick: {
+          show: true,
+          lineStyle: {
+            width: 4,
           },
-          {
-            name: "数量",//内部圆
-            type: "pie",
-            animation: false,
-            clockwise: false,
-            radius: "38%",
-            center: ["30%", "50%"],
-            data: [10],
-            itemStyle: {
-              color: '#082141',
-            },
-            label: {
-              show: false,
-
-            },
-            emphasis: {
-              show: false,
-              textStyle: {
-                fontSize: "14",
-              },
-            },
-            labelLine: {
-              show: false,
-            },
+          length: 8,
+          splitNumber: 3,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        detail: {
+          show: false,
+        },
+      },
+      {
+        name: "数量", //内部圆
+        type: "pie",
+        animation: false,
+        clockwise: false,
+        radius: "38%",
+        center: ["30%", "50%"],
+        data: [10],
+        itemStyle: {
+          color: "#082141",
+        },
+        label: {
+          show: false,
+        },
+        emphasis: {
+          show: false,
+          textStyle: {
+            fontSize: "14",
           },
-          {
-            name: '',
-            type: 'pie',
-            radius: ['55%', '80%'],
-            center: ['30%', '50%'],
-            avoidLabelOverlap: false,
-            itemStyle: {
-              borderRadius: 0,
-              borderColor: '#050D0E',
-              borderWidth: 10,
-            },
-            label: {
-              show: false,
-              formatter: '{b}：{d}%', // 用来换行
-            },
-            labelLine: {
-              show: false
-            },
-            data: data
-          }
-        ]
-      };
+        },
+        labelLine: {
+          show: false,
+        },
+      },
+      {
+        name: "",
+        type: "pie",
+        radius: ["55%", "80%"],
+        center: ["30%", "50%"],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 0,
+          borderColor: "#050D0E",
+          borderWidth: 10,
+        },
+        label: {
+          show: false,
+          formatter: "{b}：{d}%", // 用来换行
+        },
+        labelLine: {
+          show: false,
+        },
+        data: data,
+      },
+    ],
+  };
 };
 onMounted(() => {
   getData();
@@ -225,7 +246,7 @@ onMounted(() => {
 
     &-tabs {
       font-size: 14px;
-      color: #7DBDEC;
+      color: #7dbdec;
 
       &-item {
         padding: 5px 10px;
@@ -234,8 +255,8 @@ onMounted(() => {
     }
 
     .active {
-      color: #B4D7EC;
-      border: 1px solid #B4D7EC;
+      color: #b4d7ec;
+      border: 1px solid #b4d7ec;
       border-radius: 5px;
     }
   }
@@ -244,4 +265,4 @@ onMounted(() => {
     height: calc(100% - 40px);
   }
 }
-</style>
+</style>