暂降治理评估

src/components/echarts/radar.vue

@@ -0,0 +1,104 @@
+<template>
+    <div ref='chartRef' class='my-chart' />
+</template>
+<script setup lang='ts'>
+import * as echarts from 'echarts' // 全引入
+import { color, gradeColor3 } from './color'
+import { useConfig } from '@/stores/config'
+import { defineExpose, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const config = useConfig()
+color[0] = config.layout.elementUiPrimary[0]
+const chartRef = ref<HTMLDivElement>()
+
+const props = defineProps(['options'])
+let chart: echarts.ECharts | any = null
+let throttle: ReturnType<typeof setTimeout>
+
+const resizeHandler = () => {
+    // 不在视野中的时候不进行resize
+    if (!chartRef.value) return
+    if (chartRef.value.offsetHeight == 0) return
+    chart.getZr().painter.getViewportRoot().style.display = 'none'
+    requestAnimationFrame(() => {
+        chart.resize()
+        chart.getZr().painter.getViewportRoot().style.display = ''
+    })
+}
+
+const initChart = () => {
+    chart?.dispose()
+    chart = echarts.init(chartRef.value as HTMLDivElement)
+    const options = {
+        title: {
+            left: 'center',
+            textStyle: {
+                color: '#000',
+                fontSize: 18
+            },
+            ...(props.options?.title || null)
+        },
+        radar: props.options?.radar,
+        tooltip: props.options?.tooltip,
+        legend: {
+            right: 20,
+            top: 0,
+            itemGap: 10,
+            itemStyle: {},
+            textStyle: {
+                fontSize: 12,
+                padding: [2, 0, 0, 0] //[上、右、下、左]
+            },
+            itemWidth: 15,
+            itemHeight: 10,
+            ...(props.options?.legend || null)
+        },
+
+        color: props.options?.color || color,
+        series: props.options?.series,
+        ...props.options?.options
+    }
+    // 处理柱状图
+    chart.setOption(options)
+    setTimeout(() => {
+        chart.resize()
+    }, 0)
+}
+
+
+// 动态计算table高度
+const resizeObserver = new ResizeObserver(entries => {
+    for (const entry of entries) {
+        if (throttle) {
+            clearTimeout(throttle)
+        }
+        throttle = setTimeout(() => {
+            resizeHandler()
+        }, 100)
+    }
+})
+onMounted(() => {
+    initChart()
+    resizeObserver.observe(chartRef.value!)
+})
+defineExpose({ initChart })
+onBeforeUnmount(() => {
+    resizeObserver.unobserve(chartRef.value!)
+    chart?.dispose()
+})
+watch(
+    () => props.options,
+    (newVal, oldVal) => {
+        initChart()
+    }
+)
+
+
+</script>
+
+<style lang='scss' scoped>
+.my-chart {
+    height: 100%;
+    width: 100%;
+}
+</style>

src/components/icon/back/index.vue

@@ -1,27 +1,36 @@
 <template>
-  <div style='width: 12px;'></div>
-  <el-icon color='black' class='backIcon'>
-    <close @click='go(-1)' />
-  </el-icon>
+    <!--  <div style='width: 12px;'></div>-->
+    <!--  <el-icon color='black' class='backIcon'>-->
+    <!--    <close @click='go(-1)' />-->
+    <!--  </el-icon>-->
+    <el-button @click='go(-1)' :class='{positionStyle:custom,ml10:true}' :icon='Back'>返回</el-button>
 </template>
 
 <script setup lang='ts'>
 import { useRouter } from 'vue-router'
-import { Close } from '@element-plus/icons-vue'
+import { Back } from '@element-plus/icons-vue'
+
 const { go } = useRouter()
+defineProps(['custom'])
 </script>
 
 <style scoped>
 .backIcon {
-  position: absolute;
-  top: 0;
-  right: 0;
-  font-size: 25px;
-  cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 25px;
+    cursor: pointer;
 }
 
 .backIcon:hover {
-  border-radius: 25px;
-  background-color: lightgrey;
+    border-radius: 25px;
+    background-color: lightgrey;
+}
+
+.positionStyle {
+    position: absolute;
+    right: 20px;
+    top: 20px;
 }
 </style>