看板调整

src/views/pms/qhse/kanban/index.vue

@@ -42,6 +42,10 @@ type PermitStat = {
 }
 
 type SafeDayMap = Record<string, number>
+type SafeDayBarItem = {
+  name: string
+  value: number
+}
 
 type SummaryTabValue = 'home' | 'certificate'
 type QhseMetricValue = 'ltir' | 'trir' | 'pmva'
@@ -341,39 +345,18 @@ function updateScale() {
 
 const staticData = ref<any>({})
 const safeDay = ref<SafeDayMap>({})
-const safeDayMonths = [
-  '1月',
-  '2月',
-  '3月',
-  '4月',
-  '5月',
-  '6月',
-  '7月',
-  '8月',
-  '9月',
-  '10月',
-  '11月',
-  '12月'
-]
-const safeDayTrendSeries = ref<Array<{ name: string; color: string; values: number[] }>>([])
+const safeDayBarData = ref<SafeDayBarItem[]>([])
 const summaryPanel = ref<any>(null)
 const total = ref(0)
 const instrumentExpired = ref(0)
 
-function buildSafeDayTrendSeries(baseData: SafeDayMap) {
-  const palette = ['#4f8dff', '#ff981f', '#52c41a', '#597ef7', '#722ed1', '#f2c94c']
-  const factors = [0.92, 0.95, 0.98, 1, 1.03, 1.05, 1.04, 1.06, 1.08, 1.07, 1.09, 1.1]
-
-  safeDayTrendSeries.value = Object.entries(baseData || {}).map(([name, value], index) => {
-    const baseValue = Number(value) || 0
-    return {
+function buildSafeDayBarData(baseData: SafeDayMap) {
+  safeDayBarData.value = Object.entries(baseData || {})
+    .map(([name, value]) => ({
       name,
-      color: palette[index % palette.length],
-      values: factors.map((factor, factorIndex) =>
-        Math.max(0, Number((baseValue * factor + factorIndex * 0.6).toFixed(1)))
-      )
-    }
-  })
+      value: Number(value) || 0
+    }))
+    .sort((a, b) => b.value - a.value)
 }
 
 async function getStatic() {
@@ -535,56 +518,37 @@ function destroyHazardChart() {
 }
 
 function getSafeDayChartOption(): echarts.EChartsOption {
+  const maxValue = Math.max(...safeDayBarData.value.map((item) => item.value), 0)
+  const axisMax = maxValue > 0 ? Math.ceil(maxValue / 300) * 300 : 300
+
   return {
     ...ANIMATION,
-    legend: {
-      top: 0,
-      left: 25,
-      bottom: 10,
-
-      itemWidth: 10,
-      itemHeight: 10,
-      icon: 'circle',
-      textStyle: {
-        color: '#7f92af',
-        fontSize: 12,
-        fontWeight: 600,
-        fontFamily: FONT_FAMILY
-      }
-    },
     grid: {
-      left: 32,
-      right: 20,
-      top: 42,
-      bottom: 10,
+      left: 30,
+      right: 28,
+      top: 18,
+      bottom: 34,
       containLabel: true
     },
     tooltip: createTooltip({
       trigger: 'axis',
-      // position: 'bottom',
       confine: true,
       appendToBody: false,
       axisPointer: {
-        type: 'line',
-        lineStyle: {
-          color: 'rgba(79, 141, 255, 0.35)',
-          width: 1
+        type: 'shadow',
+        shadowStyle: {
+          color: 'rgba(79, 141, 255, 0.08)'
         }
       },
       formatter(params: any) {
         if (!params || (Array.isArray(params) && params.length === 0)) return ''
-        const items = Array.isArray(params) ? params : [params]
-        const lines = items.map(
-          (item) =>
-            `${item.marker}${item.seriesName}：<span style="font-weight:700">${item.value}</span>`
-        )
-        return `${items[0].axisValue}<br/>${lines.join('<br/>')}`
+        const item = Array.isArray(params) ? params[0] : params
+        return `${item.name}<br/>安全生产天数：<span style="font-weight:700">${item.value}</span>`
       }
     }),
     xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: safeDayMonths,
+      type: 'value',
+      max: axisMax,
       axisLine: {
         lineStyle: {
           color: 'rgba(106, 144, 221, 0.45)'
@@ -596,61 +560,70 @@ function getSafeDayChartOption(): echarts.EChartsOption {
         fontSize: 12,
         fontWeight: 600,
         fontFamily: FONT_FAMILY
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(104, 139, 205, 0.32)',
+          type: 'dashed'
+        }
       }
     },
     yAxis: {
-      type: 'value',
-      name: '安全生产天数',
-      nameLocation: 'middle',
-      nameGap: 45,
-
-      nameTextStyle: {
-        color: '#657897',
-        fontSize: 12,
-        fontFamily: FONT_FAMILY
-      },
+      type: 'category',
+      data: safeDayBarData.value.map((item) => item.name),
       axisLine: { show: false },
       axisTick: { show: false },
       axisLabel: {
-        color: '#8a9bb5',
-        fontSize: 12,
+        color: '#2e4262',
+        fontSize: 14,
+        fontWeight: 700,
         fontFamily: FONT_FAMILY
       },
-      splitLine: {
-        lineStyle: {
-          color: 'rgba(104, 139, 205, 0.22)',
-          type: 'dashed'
+      splitLine: { show: false }
+    },
+    series: [
+      {
+        name: '安全生产天数',
+        type: 'bar',
+        data: safeDayBarData.value.map((item) => item.value),
+        barWidth: 22,
+        showBackground: true,
+        backgroundStyle: {
+          color: 'rgba(116, 152, 216, 0.08)',
+          borderRadius: 11
+        },
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+            { offset: 0, color: '#6f9af0' },
+            { offset: 1, color: '#5f88de' }
+          ]),
+          borderRadius: [0, 11, 11, 0],
+          shadowBlur: 10,
+          shadowColor: 'rgba(95, 136, 222, 0.25)'
+        },
+        label: {
+          show: false
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 14,
+            shadowColor: 'rgba(95, 136, 222, 0.38)'
+          }
         }
       }
-    },
-    series: safeDayTrendSeries.value.map((item) => ({
-      name: item.name,
-      type: 'line',
-      smooth: true,
-      emphasis: {
-        focus: 'series'
-      },
-      // areaStyle: {
-      //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-      //     { offset: 0, color: item.color },
-      //     { offset: 1, color: `${item.color}99` }
-      //   ])
-      // },
-      symbolSize: 7,
-      showSymbol: true,
-      data: item.values,
-      lineStyle: {
-        width: 2,
-        color: item.color,
-        bgColor: '#000'
-      },
-      itemStyle: {
-        color: item.color,
-        borderColor: item.color,
-        bgColor: '#000',
-        borderWidth: 1
+    ],
+    graphic: [
+      {
+        type: 'text',
+        left: 'center',
+        bottom: 0,
+        style: {
+          text: '安全生产天数',
+          fill: '#5b6f8f',
+          font: `700 12px ${FONT_FAMILY}`
+        }
       }
-    }))
+    ]
   }
 }
 
@@ -922,7 +895,7 @@ async function loadHomeBoard() {
   hazardBars.value[2].value = summaryPanel.value.todoHazard || 0
 
   safeDay.value = (await kanbanApi.getSafeDay(userStore.getUser.deptId)) || {}
-  buildSafeDayTrendSeries(safeDay.value)
+  buildSafeDayBarData(safeDay.value)
 
   await Promise.all([getStatic(), getCertStatic(), getInstrumentOverview()])