reactor:宜宾司法大屏改造

src/views/judicial/left-top.vue

@@ -50,7 +50,7 @@
           <div class="left-top-content-item-text-num">
             <b>
               <CountUp
-                :endVal="state.order.theClueIsNotTrueNum"
+                :endVal="state.order.toBeVerifiedOrderCount"
                 :duration="2"
               />
             </b>
@@ -128,6 +128,7 @@ const state = reactive({
     satisfiedCount: 0, // 满意工单
     theClueIsNotTrueNum: 0, // 待核实工单
     theClueIsTrueNum: 0, // 线索属实工单
+    toBeVerifiedOrderCount: 0, // 待核实工单
   },
 });
 // 获取工单统计

src/views/judicial/right-bottom.vue

@@ -68,26 +68,78 @@ const getData = async () => {
       EndTime: dayjs(date.value[1]).format("YYYY-MM-DD"),
       AreaCode: AreaCode.value,
     });
-    const legEndTime = result
-      .map((item: any) => item.name)
+    const resultData = [
+      {
+        industryName: "教育体育",
+        rate: 5,
+        count: 10,
+      },
+      {
+        industryName: "文化旅游",
+        rate: 10,
+        count: 20,
+      },
+      {
+        industryName: "卫生健康",
+        rate: 15,
+        count: 30,
+      },
+      {
+        industryName: "市场监管",
+        rate: 20,
+        count: 40,
+      },
+      {
+        industryName: "生态环境",
+        rate: 25,
+        count: 50,
+      },
+      {
+        industryName: "交通运输",
+        rate: 30,
+        count: 60,
+      },
+      {
+        industryName: "住房城乡建设",
+        rate: 35,
+        count: 70,
+      },
+      {
+        industryName: "农业农村",
+        rate: 40,
+        count: 80,
+      },
+      {
+        industryName: "水利",
+        rate: 45,
+        count: 90,
+      },
+      {
+        industryName: "人力资源社会保障",
+        rate: 50,
+        count: 100,
+      },
+    ];
+    const legendData = resultData
+      .map((item: any) => item.industryName)
       .filter((item: any) => item);
-    dataList.value = result
+    dataList.value = resultData
       .map((item: any) => {
         return {
-          name: item.name ?? "",
-          value: item.hasCount,
+          name: item.industryName ?? "",
+          value: item.count,
           ...item,
         };
       })
       .filter((item: any) => item.name);
-    setOption(legEndTime, dataList.value);
+    setOption(legendData, dataList.value);
     loading.value = false;
   } catch (e) {
     loading.value = false;
     console.log(e);
   }
 };
-const setOption = (legEndTime: any, data: any) => {
+const setOption = (legendData: any, data: any) => {
   option.value = {
     tooltip: {
       trigger: "item",
@@ -96,125 +148,37 @@ const setOption = (legEndTime: any, data: any) => {
       type: "scroll",
       pageIconColor: "#fff",
       pageIconInactiveColor: "#333",
-      height: "180",
       icon: "circle",
-      top: "center",
-      right: "0",
-      orient: "vertical",
+      bottom: "20",
+      orient: "horizontal",
       itemGap: 20,
-      data: legEndTime,
+      data: legendData,
       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: [
-      {
-        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,
-        },
-      },
-      {
-        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,
-        },
-      },
-      {
-        name: "",
-        type: "pie",
-        radius: ["55%", "80%"],
-        center: ["30%", "50%"],
+        radius: ["25%", "50%"],
+        center: ["50%", "35%"],
         avoidLabelOverlap: false,
         itemStyle: {
           borderRadius: 0,
           borderColor: "#050D0E",
-          borderWidth: 10,
+          borderWidth: 5,
         },
         label: {
-          show: false,
-          formatter: "{b}：{d}%", // 用来换行
-        },
-        labelLine: {
-          show: false,
+          show: true,
+          color: "#fff",
+          position: "outside", // 标签在外部显示
+          formatter: "{b}: {c} ({d}%)", // 格式化标签内容
+          avoidLabelOverlap: true, // 自动调整标签位置，避免重叠
+          overflow: "break", // 允许文字换行
         },
+        roam: true, // 允许图表缩放和平移
         data: data,
       },
     ],
@@ -231,7 +195,6 @@ onMounted(() => {
 <style scoped lang="scss">
 .left_bottom {
   padding: 0 30px;
-
   &-title {
     color: #fff;
     justify-content: space-between;
@@ -256,6 +219,9 @@ onMounted(() => {
 
   &-content {
     height: calc(100% - 40px);
+    .chart {
+      overflow: visible;
+    }
   }
 }
 </style>

src/views/judicial/right-center.vue

@@ -22,7 +22,6 @@
 <script setup lang="ts">
 import { defineAsyncComponent, onMounted, ref, watch } from "vue";
 import { loadingOptions } from "@/utils/constants";
-import { graphic } from "echarts/core";
 import { problemType } from "@/api/judicial";
 import dayjs from "dayjs";
 import mittBus from "@/utils/mitt";
@@ -65,15 +64,33 @@ const getData = async () => {
       EndTime: dayjs(date.value[1]).format("YYYY-MM-DD"),
       AreaCode: AreaCode.value,
     });
-    const xData = result.map((item: any) => {
-      return item.month + "月";
+    console.log(result, "result");
+    const resultData = [
+      {
+        eventTypeName: "不作为",
+        count: 5,
+      },
+      {
+        eventTypeName: "乱作为",
+        count: 10,
+      },
+      {
+        eventTypeName: "程序不规范",
+        count: 6,
+      },
+      {
+        eventTypeName: "结果不公正",
+        count: 12,
+      },
+    ];
+    const xData = resultData.map((item: any) => {
+      return item.eventTypeName;
     });
-    list.value = result.map((item: any) => {
-      return item.sumCount;
+    list.value = resultData.map((item: any) => {
+      return item.count;
     });
     setOption(xData, list.value);
     loading.value = false;
-    loading.value = false;
   } catch (e) {
     loading.value = false;
     console.log(e);
@@ -82,128 +99,34 @@ const getData = async () => {
 const setOption = (xData: any, data: any) => {
   option.value = {
     tooltip: {
-      show: true,
       trigger: "axis",
-      formatter: (params) => {
-        let arr = [...params];
-        let str = "";
-        arr.forEach((item, index) => {
-          str += item.marker + "工单数量 " + item.data + "<br />";
-        });
-        str = arr[0].name + "<br />" + str;
-        return str;
+      axisPointer: {
+        type: "shadow",
       },
     },
     grid: {
-      top: "15%",
-      left: "8%",
+      left: "5%",
       right: "5%",
-      bottom: "18%",
       containLabel: true,
     },
-    xAxis: [
-      {
-        type: "category",
-        axisLine: {
-          onZero: true,
-          lineStyle: {
-            color: "#81b0d0",
-          },
-        },
-        axisLabel: {
-          interval: 0,
-          align: "center",
-          margin: 10,
-          color: "#fff",
-          rotate: 0,
-        },
-        splitLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-        boundaryGap: false,
-        data: xData,
+    xAxis: {
+      type: "category",
+      data: xData,
+      axisLabel: {
+        color: "#fff",
       },
-    ],
-    yAxis: [
-      {
-        type: "value",
-        splitLine: {
-          show: true,
-          lineStyle: {
-            color: "rgba(221, 228, 241,.3)",
-          },
-        },
-        axisLabel: {
-          interval: 0,
-          align: "center",
-          margin: 10,
-          color: "#fff",
-          rotate: 0,
-        },
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        color: "#fff",
       },
-    ],
+    },
     series: [
       {
         data: data,
-        type: "line",
-        smooth: true,
-
-        symbolSize: 0.01,
-
-        areaStyle: {
-          color: new graphic.LinearGradient(0, 0, 0, 0.9, [
-            {
-              offset: 0,
-              // color: 'rgba(58,77,233,0.8)'
-              color: "rgba(170, 201 ,234,0.8)",
-            },
-            {
-              offset: 1,
-              // color: 'rgba(58,77,233,0)'
-              color: "rgba(170, 201 ,234,0)",
-            },
-            {
-              offset: 0,
-              color: "rgba(170, 201 ,234,1)",
-              // color: 'rgba(58,77,233,0.9)'
-            },
-          ]),
-        },
-        itemStyle: {
-          // color: "#3D5DF4",
-          color: "#4EA6FE",
-        },
-        lineStyle: {
-          // 线条加阴影
-          // 设置阴影颜色
-          // shadowColor: "#3D5DF4",
-          shadowColor: "#4EA6FE",
-          shadowOffsetX: 0,
-          // 设置阴影沿y轴偏移量为9
-          shadowOffsetY: 9,
-          // 设置阴影的模糊大小
-          shadowBlur: 10,
-          // 设置线条渐变色
-          color: new graphic.LinearGradient(0, 0, 1, 0, [
-            { offset: 0, color: "#94C2FD00" },
-            // { offset: 0.2, color: "#3D5DF4" },
-            { offset: 0.2, color: "#4EA6FE" },
-            { offset: 0.1, color: "#5B8FF900" },
-          ]),
-        },
-
-        emphasis: {
-          scale: 1000,
-          itemStyle: {
-            color: "#3D5DF4",
-            borderColor: "#FFFFFF",
-            borderWidth: 3,
-            borderType: "solid",
-          },
-        },
+        type: "bar",
+        barWidth: "20",
       },
     ],
   };

src/views/judicial/right-top.vue

@@ -32,7 +32,6 @@ import { onMounted, ref, defineAsyncComponent } from "vue";
 import dayjs from "dayjs";
 import { monthlyTrend } from "@/api/judicial";
 import { loadingOptions } from "@/utils/constants";
-import { graphic } from "echarts/core";
 
 const Empty = defineAsyncComponent(
   () => import("@/components/Empty/index.vue")
@@ -48,147 +47,96 @@ const getData = async () => {
   loading.value = true;
   try {
     const { result } = await monthlyTrend({ Year: yearValue.value });
-    const xData = result.map((item: any) => {
+    list.value = result.map((item: any) => {
       return item.month + "月";
     });
-    list.value = result.map((item: any) => {
-      return item.sumCount;
+
+    const legendData = ["执法类", "非执法类"];
+    const zflData = result.map((item: any) => {
+      return item.enforcementOrderNum;
     });
-    setOption(xData, list.value);
-    loading.value = false;
+    const fzflData = result.map((item: any) => {
+      return item.unEnforcementOrderNum;
+    });
+    const seriesData = [
+      {
+        name: "执法类",
+        type: "line",
+        data: zflData,
+        areaStyle: {
+          // 区域填充样式
+          color: "#BADEFF", // 填充颜色
+        },
+        smooth: true,
+      },
+      {
+        name: "非执法类",
+        type: "line",
+        data: fzflData,
+        areaStyle: {
+          // 区域填充样式
+          color: "#C1EDCE", // 填充颜色
+        },
+        smooth: true,
+      },
+    ];
+    setOption(legendData, list.value, seriesData);
     loading.value = false;
   } catch (e) {
     loading.value = false;
     console.log(e);
   }
 };
-const setOption = (xData: any, data: any) => {
+const setOption = (legendData: any, xData: any, seriesData: any) => {
   option.value = {
+    title: {},
     tooltip: {
-      show: true,
-      trigger: "axis",
-      formatter: (params) => {
-        let arr = [...params];
-        let str = "";
-        arr.forEach((item, index) => {
-          str += item.marker + "工单数量 " + item.data + "<br />";
-        });
-        str = arr[0].name + "<br />" + str;
-        return str;
+      // 提示框组件
+      trigger: "axis", // 触发类型
+    },
+    legend: {
+      top: "1%",
+      data: legendData,
+      icon: "roundRect",
+      textStyle: {
+        color: "#fff", // 文字颜色
+        fontSize: 12, // 文字像素
       },
     },
-    grid: {
-      top: "15%",
-      left: "8%",
-      right: "5%",
-      bottom: "18%",
-      containLabel: true,
+    xAxis: {
+      data: xData, // 数据
+      min: 0, // 最小值
+      type: "category",
+      boundaryGap: true, // 开始和结尾是否隔开
+      axisLabel: {
+        color: "#808080", // 文字颜色
+        fontSize: 12, // 文字像素
+      },
+      axisLine: {
+        show: false, // 是否显示坐标轴轴线
+      },
+      axisTick: {
+        show: false, // 去除刻度线
+      },
     },
-    xAxis: [
-      {
-        type: "category",
-        axisLine: {
-          onZero: true,
-          lineStyle: {
-            color: "#81b0d0",
-          },
-        },
-        axisLabel: {
-          interval: 0,
-          align: "center",
-          margin: 10,
-          color: "#fff",
-          rotate: 0,
-        },
-        splitLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-        boundaryGap: false,
-        data: xData,
+    yAxis: {
+      type: "value",
+      min: 0, // 最小值
+      axisLine: {
+        show: false,
       },
-    ],
-    yAxis: [
-      {
-        type: "value",
-        splitLine: {
-          show: true,
-          lineStyle: {
-            color: "rgba(221, 228, 241,.3)",
-          },
-        },
-        axisLabel: {
-          interval: 0,
-          align: "center",
-          margin: 10,
-          color: "#fff",
-          rotate: 0,
-        },
+      axisLabel: {
+        color: "#808080", // 文字颜色
+        fontSize: 12, // 文字像素
       },
-    ],
-    series: [
-      {
-        data: data,
-        type: "line",
-        smooth: true,
-
-        symbolSize: 0.01,
-
-        areaStyle: {
-          color: new graphic.LinearGradient(0, 0, 0, 0.9, [
-            {
-              offset: 0,
-              // color: 'rgba(58,77,233,0.8)'
-              color: "rgba(170, 201 ,234,0.8)",
-            },
-            {
-              offset: 1,
-              // color: 'rgba(58,77,233,0)'
-              color: "rgba(170, 201 ,234,0)",
-            },
-            {
-              offset: 0,
-              color: "rgba(170, 201 ,234,1)",
-              // color: 'rgba(58,77,233,0.9)'
-            },
-          ]),
-        },
-        itemStyle: {
-          // color: "#3D5DF4",
-          color: "#4EA6FE",
-        },
+      // y轴分割线的颜色
+      splitLine: {
         lineStyle: {
-          // 线条加阴影
-          // 设置阴影颜色
-          // shadowColor: "#3D5DF4",
-          shadowColor: "#4EA6FE",
-          shadowOffsetX: 0,
-          // 设置阴影沿y轴偏移量为9
-          shadowOffsetY: 9,
-          // 设置阴影的模糊大小
-          shadowBlur: 10,
-          // 设置线条渐变色
-          color: new graphic.LinearGradient(0, 0, 1, 0, [
-            { offset: 0, color: "#94C2FD00" },
-            // { offset: 0.2, color: "#3D5DF4" },
-            { offset: 0.2, color: "#4EA6FE" },
-            { offset: 0.1, color: "#5B8FF900" },
-          ]),
-        },
-
-        emphasis: {
-          scale: 1000,
-          itemStyle: {
-            color: "#3D5DF4",
-            borderColor: "#FFFFFF",
-            borderWidth: 3,
-            borderType: "solid",
-          },
+          color: "rgba(0,0,0,0.15)", // 分割线的颜色
         },
       },
-    ],
+    },
+    series: seriesData,
   };
 };
 onMounted(() => {