feat: 运行数据图表

src/hooks/useEcharts.js

@@ -26,6 +26,7 @@ export function useECharts(
     chartInstance.value = markRaw(echarts.init(containerRef.value, theme))
     
     chartInstance.value.setOption(options.value);
+    
     eventQueue = eventQueue.filter((handler) => {
       handler()
       return false

src/views/portraitManagement/components/ChannelCheckChart.vue

@@ -0,0 +1,110 @@
+<template>
+  <Card title="每日通道过检率">
+    <div ref="bar" style="width: 100%; height: 100%;"></div>
+  </Card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Card from './card.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+const bar = ref(null)
+const props = defineProps({
+  chartsData: {
+    type: Object,
+    default: () => ([])
+  }
+})
+const setChartsOptionsBar = computed(() => {
+  const hours = Array.from({length: 24}, (_, i) => `${i.toString().padStart(2, '0')}:00`)
+  return {
+    grid: {
+      top: 40,
+      bottom: 40,
+      left: 60,
+      right: 60
+    },
+    xAxis: {
+      type: 'category',
+      data: hours,
+      axisLabel: { color: '#fff', fontSize: 14 },
+      axisLine: { lineStyle: { color: '#344067' } }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '过检率(%)',
+        position: 'left',
+        max: 100,
+        axisLabel: { color: '#fff', fontSize: 14 },
+        axisLine: {  lineStyle: { color: '#fff' } },
+        splitLine: { lineStyle: { color: '#344067' } }
+      },
+      {
+        type: 'value',
+        name: '数量',
+        position: 'right',
+        max: Math.max(...props.chartsData.map(item => item.num)) + 100,
+        axisLabel: { color: '#fff', fontSize: 14 },
+        axisLine: {  lineStyle: { color: '#fff' } },
+        splitLine: { show: false }
+      }
+    ],
+    series: [
+      {
+        name: '过检人数',
+        type: 'bar',
+        yAxisIndex: 1,
+        data: props.chartsData.map(item => item.num),
+        itemStyle: {
+          color: '#6DA6FE',
+          borderRadius: [2, 2, 0, 0],
+        },
+        barWidth: '20%'
+      },
+      {
+        name: '过检人数1',
+        type: 'bar',
+        yAxisIndex: 1,
+        data: props.chartsData.map(item => item.num1),
+        itemStyle: {
+          color: '#9963FB',
+          borderRadius: [2, 2, 0, 0],
+        },
+        barWidth: '20%'
+      },
+      {
+        name: '过检人数2',
+        type: 'bar',
+        yAxisIndex: 1,
+        data: props.chartsData.map(item => item.num2),
+        itemStyle: {
+          color: '#FCE661',
+          borderRadius: [2, 2, 0, 0],
+        },
+        barWidth: '20%'
+      },
+      {
+        name: '过检率',
+        type: 'line',
+        yAxisIndex: 0,
+        data: props.chartsData.map(item => item.rate),
+        smooth: true,
+        itemStyle: { color: '#F801FA' },
+        lineStyle: { color: '#F801FA' }
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(13,80,122,1)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    }
+  }
+})
+
+useECharts(bar, setChartsOptionsBar);
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/portraitManagement/components/EventItems.vue

@@ -0,0 +1,58 @@
+<template>
+  <Card title="不安全事件物品分布">
+    <div ref="bar" style="width: 100%; height: 100%;"></div>
+  </Card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Card from './card.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+const bar = ref(null)
+const props = defineProps({
+  chartsData: {
+    type: Object,
+    default: () => ([])
+  }
+})
+
+const setChartsOptionsBar = computed(() => {
+  return {
+    grid: {
+      top: 40,
+      bottom: 40,
+      left: 200,
+      right: 0
+    },
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(13,80,122,1)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    },
+    legend: {
+      top: 'center',
+      left: '0%',
+      orient: 'vertical',
+      textStyle: { color: '#fff' }
+    },
+    series: [{
+      type: 'pie',
+      radius: ['40%', '60%'],
+      data: props.chartsData.map(item => {
+        return {
+          value: item.num,
+          name: item.name
+        }
+      }),
+      label: { show: true, color: '#fff', fontSize: 16, lineHeight: 20, formatter: '{b}\n{c}'  },
+      labelLine: { show: true }
+    }],
+  }
+})
+
+useECharts(bar, setChartsOptionsBar);
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/portraitManagement/components/EventType.vue

@@ -0,0 +1,58 @@
+<template>
+  <Card title="不安全事件类型分布">
+    <div ref="bar" style="width: 100%; height: 100%;"></div>
+  </Card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Card from './card.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+const bar = ref(null)
+const props = defineProps({
+  chartsData: {
+    type: Object,
+    default: () => ([])
+  }
+})
+
+const setChartsOptionsBar = computed(() => {
+  return {
+    grid: {
+      top: 40,
+      bottom: 40,
+      left: 200,
+      right: 0
+    },
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(13,80,122,1)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    },
+    legend: {
+      top: 'center',
+      left: '0%',
+      orient: 'vertical',
+      textStyle: { color: '#fff' }
+    },
+    series: [{
+      type: 'pie',
+      radius: ['40%', '60%'],
+      data: props.chartsData.map(item => {
+        return {
+          value: item.num,
+          name: item.name
+        }
+      }),
+      label: { show: true, color: '#fff', fontSize: 16, lineHeight: 20, formatter: '{b}\n{c}'  },
+      labelLine: { show: true }
+    }],
+  }
+})
+
+useECharts(bar, setChartsOptionsBar);
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/portraitManagement/components/EventWorkArea.vue

@@ -0,0 +1,80 @@
+<template>
+  <Card title="不安全事件查获岗位分布">
+    <div ref="bar" style="width: 100%; height: 100%;"></div>
+  </Card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Card from './card.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+const bar = ref(null)
+const props = defineProps({
+  chartsData: {
+    type: Object,
+    default: () => ([])
+  }
+})
+const setChartsOptionsBar = computed(() => {
+  const labels = props.chartsData.map(item => item.name)
+  return {
+    grid: {
+      top: 50,
+      bottom: 40,
+      left: 60,
+      right: 20
+    },
+    legend: {
+      top: '10',
+      left: '30',
+      // orient: 'vertical',
+      textStyle: { color: '#fff' }
+    },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: { color: '#fff', fontSize: 14 },
+      axisLine: { lineStyle: { color: '#344067' } }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        position: 'left',
+        axisLabel: { color: '#fff', fontSize: 14 },
+        axisLine: {  lineStyle: { color: '#fff' } },
+        splitLine: { lineStyle: { color: '#344067' } }
+      },
+    ],
+    series: [
+      {
+        name: '查获数量',
+        type: 'bar',
+        data: props.chartsData.map(item => item.num),
+        itemStyle: {
+          borderRadius: [5, 5, 0, 0],
+          color: '#6DA6FE',
+        },
+        label: {
+          show: true,
+          position: 'top',
+          color: '#6DA6FE',
+          fontSize: 14,
+          fontWeight: 500
+        },
+        barWidth: '40%'
+      },
+    ],
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(13,80,122,1)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    }
+  }
+})
+
+useECharts(bar, setChartsOptionsBar);
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/portraitManagement/components/InterceptionDistribution.vue

@@ -0,0 +1,75 @@
+<template>
+  <Card title="实时质控拦截物品分布">
+    <div ref="bar" style="width: 100%; height: 100%;"></div>
+  </Card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Card from './card.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+const bar = ref(null)
+const props = defineProps({
+  chartsData: {
+    type: Object,
+    default: () => ([])
+  }
+})
+const countryColors = ['#6DA6FE', '#9963FB', '#FCE661', '#F801FA', '#95E530', '#22C2CC', '#F76723']
+const setChartsOptionsBar = computed(() => {
+  return {
+    grid: {
+      top: 10,
+      bottom: 30,
+      left: 80,
+      right: 40
+    },
+    xAxis: {
+      max: 'dataMax',
+      axisLabel: { color: '#fff', fontSize: 14 },
+    },
+    dataset: {
+      source: props.chartsData.map(item => {
+        return [item.name, item.num ]
+      })
+    },
+    yAxis: {
+      type: 'category',
+      position: 'left',
+      axisLabel: { color: '#fff', fontSize: 14 },
+      splitLine: { lineStyle: { color: '#344067' } }
+    },
+    series: [
+      {
+        realtimeSort: true,
+        seriesLayoutBy: 'column',
+        type: 'bar',
+        itemStyle: {
+          borderRadius: [0, 5, 5, 0],
+          color: function (param) {
+            return countryColors[param.dataIndex % countryColors.length]
+          }
+        },
+        label: {
+          show: true,
+          position: 'right',
+          color: '#FFF',
+          fontSize: 14,
+          fontWeight: 500
+        },
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(13,80,122,1)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    }
+  }
+})
+
+useECharts(bar, setChartsOptionsBar);
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/portraitManagement/components/SeizedInfo.vue

@@ -0,0 +1,175 @@
+<template>
+  <Card title="查获信息展示">
+    <div class="content">
+      <div class="svgIcon">
+        <Svg></Svg>
+        <div class="svgContent">
+          <div class="value">1658</div>
+          <div class="tips">
+            <span>查获总数</span>
+            <span>(所有人员)</span>
+          </div>
+        </div>
+      </div>
+      <div class="charts">
+        <div ref="bar" style="width: 100%; height: 100%;"></div>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Card from './card.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+import Svg from './Svg.vue';
+const bar = ref(null)
+const props = defineProps({
+  chartsData: {
+    type: Object,
+    default: () => ([])
+  }
+})
+
+const colors = [
+  {
+    type: 'linear',
+    x: 0,
+    y: 0,
+    x2: 0,
+    y2: 1,
+    colorStops: [{
+      offset: 0, color: '#A674FC'
+    }, {
+      offset: 1, color: '#2C2B53'
+    }],
+    global: false
+  },
+  {
+    type: 'linear',
+    x: 0,
+    y: 0,
+    x2: 0,
+    y2: 1,
+    colorStops: [{
+      offset: 0, color: '#71A3FC'
+    }, {
+      offset: 1, color: '#1E2144'
+    }],
+    global: false
+  },
+  {
+    type: 'linear',
+    x: 0,
+    y: 0,
+    x2: 0,
+    y2: 1,
+    colorStops: [{
+      offset: 0, color: '#F462CC'
+    }, {
+      offset: 1, color: '#2C244B'
+    }],
+    global: false
+  },
+]
+
+const setChartsOptionsBar = computed(() => {
+  const hours = ['等级1', '等级2', '等级3']
+  return {
+    grid: {
+      top: 30,
+      bottom: 40,
+      left: 60,
+      right: 30
+    },
+    xAxis: {
+      type: 'category',
+      data: hours,
+      axisLabel: { color: '#fff', fontSize: 14 },
+      axisLine: { lineStyle: { color: '#344067' } }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        position: 'left',
+        max: Math.max(...props.chartsData.map(item => item.num)) + 100,
+        axisLabel: { color: '#fff', fontSize: 14 },
+        axisLine: {  lineStyle: { color: '#fff' } },
+        splitLine: { show: false }
+      }
+    ],
+    series: [
+      {
+        name: '人数',
+        type: 'bar',
+        data: props.chartsData.map(item => item.num),
+        itemStyle: {
+          color: (params) => {
+            return colors[params.dataIndex % colors.length]
+          },
+          borderRadius: [5, 5, 0, 0],
+        },
+        barWidth: '40px'
+      },
+    ],
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(13,80,122,1)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    }
+  }
+})
+
+useECharts(bar, setChartsOptionsBar);
+</script>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  column-gap: 30px;
+  .svgIcon {
+    width: 280px;
+    box-sizing: border-box;
+    padding: 20px;
+    position: relative;
+    .svgContent {
+      position: absolute;
+      width: 175px;
+      height: 175px;
+      inset: 0;
+      margin: auto;
+      border-radius: 50%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: radial-gradient(
+        circle at center,
+        transparent 0%,
+        transparent 50%,
+        #a19dd2 100%
+      );
+      color: #fff;
+      .value {
+        font-size: 48px;
+        font-weight: 500;
+        text-shadow: 2px 2px 1px #BBA7E2;
+        color: #fff;
+      }
+      .tips {
+        display: flex;
+        flex-direction: column;
+        font-size: 14px;
+        font-weight: 500;
+        color: #BBA7E2;
+      }
+    }
+  }
+  .charts {
+    flex: 1;
+  }
+}
+</style>

src/views/portraitManagement/components/SeizedItems.vue

@@ -0,0 +1,58 @@
+<template>
+  <Card title="查获物品分布">
+    <div ref="bar" style="width: 100%; height: 100%;"></div>
+  </Card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Card from './card.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+const bar = ref(null)
+const props = defineProps({
+  chartsData: {
+    type: Object,
+    default: () => ([])
+  }
+})
+
+const setChartsOptionsBar = computed(() => {
+  return {
+    grid: {
+      top: 40,
+      bottom: 40,
+      left: 60,
+      right: 20
+    },
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(13,80,122,1)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    },
+    legend: {
+      top: 'center',
+      left: '0%',
+      orient: 'vertical',
+      textStyle: { color: '#fff' }
+    },
+    series: [{
+      type: 'pie',
+      radius: ['40%', '70%'],
+      data: props.chartsData.map(item => {
+        return {
+          value: item.num,
+          name: item.name
+        }
+      }),
+      label: { show: true, color: '#fff', fontSize: 16, lineHeight: 20, formatter: '{b}\n{c}'  },
+      labelLine: { show: true }
+    }],
+  }
+})
+
+useECharts(bar, setChartsOptionsBar);
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/portraitManagement/components/SeizedNum.vue

@@ -0,0 +1,119 @@
+<template>
+  <Card title="每日查获数量(个人对比)">
+    <div ref="bar" style="width: 100%; height: 100%;"></div>
+  </Card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Card from './card.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+const bar = ref(null)
+const props = defineProps({
+  chartsData: {
+    type: Object,
+    default: () => ([])
+  }
+})
+const setChartsOptionsBar = computed(() => {
+  return {
+    grid: {
+      top: 40,
+      bottom: 30,
+      left: 60,
+      right: 20
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel: { show: false },
+      axisLine: { show: false },
+      boundaryGap: false
+    },
+    yAxis: [
+      {
+        type: 'value',
+        position: 'left',
+        axisLabel: { color: '#fff', fontSize: 14 },
+        axisLine: {  lineStyle: { color: '#fff' } },
+        splitLine: { lineStyle: { color: '#344067' } }
+      },
+    ],
+    series: [
+      {
+        name: '数量1',
+        type: 'line',
+        data: props.chartsData.map(item => item.num),
+        smooth: true,
+        itemStyle: { color: '#71B138' },
+        lineStyle: { color: '#71B138' },
+        areaStyle: { color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [{
+            offset: 0, color: '#71B138'
+          }, {
+            offset: 1, color: '#71B13800'
+          }],
+          global: false
+        }}
+      },
+      {
+        name: '数量2',
+        type: 'line',
+        data: props.chartsData.map(item => item.num1),
+        smooth: true,
+        itemStyle: { color: '#F801FA' },
+        lineStyle: { color: '#F801FA' },
+        areaStyle: { color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [{
+            offset: 0, color: '#F801FA'
+          }, {
+            offset: 1, color: '#F801FA00'
+          }],
+          global: false
+        }}
+      },
+      {
+        name: '数量3',
+        type: 'line',
+        data: props.chartsData.map(item => item.num2),
+        smooth: true,
+        itemStyle: { color: '#6DA6FE' },
+        lineStyle: { color: '#6DA6FE' },
+        areaStyle: { color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [{
+            offset: 0, color: '#6DA6FE'
+          }, {
+            offset: 1, color: '#6DA6FE00'
+          }],
+          global: false
+        }}
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(13,80,122,1)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    }
+  }
+})
+
+useECharts(bar, setChartsOptionsBar);
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/portraitManagement/components/SeizedNumAll.vue

@@ -0,0 +1,65 @@
+<template>
+  <Card title="每日查获数量(总表)">
+    <div ref="bar" style="width: 100%; height: 100%;"></div>
+  </Card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Card from './card.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+const bar = ref(null)
+const props = defineProps({
+  chartsData: {
+    type: Object,
+    default: () => ([])
+  }
+})
+const setChartsOptionsBar = computed(() => {
+  const hours = Array.from({length: 24}, (_, i) => `${i.toString().padStart(2, '0')}:00`)
+  return {
+    grid: {
+      top: 40,
+      bottom: 30,
+      left: 60,
+      right: 30
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel: { show: false },
+      axisLine: { show: false },
+      boundaryGap: false
+    },
+    yAxis: [
+      {
+        type: 'value',
+        position: 'left',
+        axisLabel: { color: '#fff', fontSize: 14 },
+        axisLine: {  lineStyle: { color: '#fff' } },
+        splitLine: { lineStyle: { color: '#344067' } }
+      }
+    ],
+    series: [
+      {
+        name: '查获数',
+        type: 'line',
+        data: props.chartsData.map(item => item.num),
+        smooth: true,
+        itemStyle: { color: '#71B138' },
+        lineStyle: { color: '#71B138' }
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(13,80,122,1)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    }
+  }
+})
+
+useECharts(bar, setChartsOptionsBar);
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/portraitManagement/components/SeizedWorkArea.vue

@@ -0,0 +1,73 @@
+<template>
+  <Card title="查获工作区域分布">
+    <div ref="bar" style="width: 100%; height: 100%;"></div>
+  </Card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Card from './card.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+const bar = ref(null)
+const props = defineProps({
+  chartsData: {
+    type: Object,
+    default: () => ([])
+  }
+})
+const setChartsOptionsBar = computed(() => {
+  const labels = props.chartsData.map(item => item.name)
+  return {
+    grid: {
+      top: 50,
+      bottom: 40,
+      left: 60,
+      right: 20
+    },
+    legend: {
+      top: '10',
+      left: '30',
+      // orient: 'vertical',
+      textStyle: { color: '#fff' }
+    },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: { color: '#fff', fontSize: 14 },
+      axisLine: { lineStyle: { color: '#344067' } }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        position: 'left',
+        axisLabel: { color: '#fff', fontSize: 14 },
+        axisLine: {  lineStyle: { color: '#fff' } },
+        splitLine: { lineStyle: { color: '#344067' } }
+      },
+    ],
+    series: [
+      {
+        name: '查获数量',
+        type: 'bar',
+        data: props.chartsData.map(item => item.num),
+        itemStyle: {
+          borderRadius: [5, 5, 0, 0],
+          color: '#95E530',
+        },
+        barWidth: '40%'
+      },
+    ],
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(13,80,122,1)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    }
+  }
+})
+
+useECharts(bar, setChartsOptionsBar);
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/portraitManagement/components/SupervisionDistribution.vue

@@ -0,0 +1,81 @@
+<template>
+  <Card title="各岗位监察问题分布">
+    <div ref="bar" style="width: 100%; height: 100%;"></div>
+  </Card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Card from './card.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+const bar = ref(null)
+const props = defineProps({
+  chartsData: {
+    type: Object,
+    default: () => ([])
+  }
+})
+const setChartsOptionsBar = computed(() => {
+  const labels = props.chartsData.map(item => item.name)
+  return {
+    grid: {
+      top: 50,
+      bottom: 60,
+      left: 60,
+      right: 20
+    },
+    legend: {
+      bottom: '10',
+      left: 'center',
+      // orient: 'vertical',
+      textStyle: { color: '#fff' }
+    },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: { color: '#fff', fontSize: 14 },
+      axisLine: { lineStyle: { color: '#344067' } }
+    },
+    yAxis: [
+      {
+        name: '人数',
+        type: 'value',
+        position: 'left',
+        axisLabel: { color: '#fff', fontSize: 14 },
+        axisLine: {  lineStyle: { color: '#fff' } },
+        splitLine: { lineStyle: { color: '#344067' } }
+      },
+    ],
+    series: [
+      {
+        name: '查获数量',
+        type: 'bar',
+        data: props.chartsData.map(item => item.num),
+        itemStyle: {
+          borderRadius: [5, 5, 0, 0],
+          color: '#F462CC',
+        },
+        label: {
+          show: true,
+          position: 'top',
+          color: '#F462CC',
+          fontSize: 14,
+          fontWeight: 500
+        },
+        barWidth: '40%'
+      },
+    ],
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(13,80,122,1)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    }
+  }
+})
+
+useECharts(bar, setChartsOptionsBar);
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/portraitManagement/components/Svg.vue

@@ -0,0 +1,73 @@
+<template>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 500 500"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <!-- 外圈渐变 #e0e0e0-透明-#e0e0e0-透明 -->
+      <linearGradient id="grad1">
+        <stop offset="0%" stop-color="#e0e0e0"/>
+        <stop offset="45%" stop-color="transparent"/>
+        <stop offset="55%" stop-color="transparent"/>
+        <stop offset="100%" stop-color="#e0e0e0"/>
+      </linearGradient>
+      <!-- 弧条渐变 0f46fa → bd03fb -->
+      <linearGradient id="grad2">
+        <stop offset="0%" stop-color="#0f46fa"/>
+        <stop offset="100%" stop-color="#bd03fb"/>
+      </linearGradient>
+    </defs>
+    <!-- 最外层点状圆环 -->
+    <circle
+      cx="250"
+      cy="250"
+      r="250"
+      fill="none"
+      stroke="url(#grad1)"
+      stroke-width="1"
+    />
+
+    <!-- 内层红色底环 -->
+    <circle
+      cx="250"
+      cy="250"
+      r="202"
+      fill="none"
+      stroke="#838390"
+      stroke-width="2"
+    />
+
+    <!-- 可旋转的两段刻度弧（位置已修正对称） -->
+    <g>
+      <!-- 刻度段 -->
+      <path
+        d="M 448 210 A 199 199 0 0 0 290 52"
+        fill="none"
+        stroke="url(#grad2)"
+        stroke-width="4"
+      />
+      <path
+        d="M 210 448 A 199 199 0 0 1 52 290"
+        fill="none"
+        stroke="url(#grad2)"
+        stroke-width="4"
+      />
+      <animateTransform
+        attributeName="transform"
+        type="rotate"
+        from="0 250 250"
+        to="360 250 250"
+        dur="12s"
+        repeatCount="indefinite"
+        calcMode="linear"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped></style>

src/views/portraitManagement/components/TestArea.vue

@@ -0,0 +1,80 @@
+<template>
+  <Card title="安保测试区域情况">
+    <div ref="bar" style="width: 100%; height: 100%;"></div>
+  </Card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Card from './card.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+const bar = ref(null)
+const props = defineProps({
+  chartsData: {
+    type: Object,
+    default: () => ([])
+  }
+})
+const setChartsOptionsBar = computed(() => {
+  const labels = props.chartsData.map(item => item.name)
+  return {
+    grid: {
+      top: 50,
+      bottom: 40,
+      left: 60,
+      right: 20
+    },
+    legend: {
+      top: '10',
+      left: '30',
+      // orient: 'vertical',
+      textStyle: { color: '#fff' }
+    },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: { color: '#fff', fontSize: 14 },
+      axisLine: { lineStyle: { color: '#344067' } }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        position: 'left',
+        axisLabel: { color: '#fff', fontSize: 14 },
+        axisLine: {  lineStyle: { color: '#fff' } },
+        splitLine: { lineStyle: { color: '#344067' } }
+      },
+    ],
+    series: [
+      {
+        name: '查获数量',
+        type: 'bar',
+        data: props.chartsData.map(item => item.num),
+        itemStyle: {
+          borderRadius: [5, 5, 0, 0],
+          color: '#9963FB',
+        },
+        label: {
+          show: true,
+          position: 'top',
+          color: '#9963FB',
+          fontSize: 14,
+          fontWeight: 500
+        },
+        barWidth: '40%'
+      },
+    ],
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(13,80,122,1)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    }
+  }
+})
+
+useECharts(bar, setChartsOptionsBar);
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/portraitManagement/components/TestItems.vue

@@ -0,0 +1,62 @@
+<template>
+  <Card title="安保测试物品分类">
+    <div ref="bar" style="width: 100%; height: 100%;"></div>
+  </Card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Card from './card.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+const bar = ref(null)
+const props = defineProps({
+  chartsData: {
+    type: Object,
+    default: () => ([])
+  }
+})
+
+const setChartsOptionsBar = computed(() => {
+  return {
+    grid: {
+      top: 40,
+      bottom: 40,
+      left: 200,
+      right: 0
+    },
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(13,80,122,1)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    },
+    legend: {
+      top: 'center',
+      left: '0%',
+      orient: 'vertical',
+      textStyle: { color: '#fff' }
+    },
+    series: [{
+      type: 'pie',
+      radius: ['0%', '60%'],
+      data: props.chartsData.map(item => {
+        return {
+          value: item.num,
+          name: item.name
+        }
+      }),
+      itemStyle: {
+        borderRadius: 5,
+        borderWidth: 0
+      },
+      label: { show: true, color: '#fff', fontSize: 16, lineHeight: 20, formatter: '{b}\n{c}'  },
+      labelLine: { show: true }
+    }],
+  }
+})
+
+useECharts(bar, setChartsOptionsBar);
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/portraitManagement/components/TestResult.vue

@@ -0,0 +1,62 @@
+<template>
+  <Card title="安保测试通过结果">
+    <div ref="bar" style="width: 100%; height: 100%;"></div>
+  </Card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Card from './card.vue';
+import { useECharts } from '@/hooks/useEcharts.js';
+const bar = ref(null)
+const props = defineProps({
+  chartsData: {
+    type: Object,
+    default: () => ([])
+  }
+})
+
+const setChartsOptionsBar = computed(() => {
+  return {
+    grid: {
+      top: 40,
+      bottom: 40,
+      left: 200,
+      right: 0
+    },
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(13,80,122,1)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    },
+    legend: {
+      top: 'center',
+      left: '0%',
+      orient: 'vertical',
+      textStyle: { color: '#fff' }
+    },
+    series: [{
+      type: 'pie',
+      radius: ['0%', '60%'],
+      data: props.chartsData.map(item => {
+        return {
+          value: item.num,
+          name: item.name
+        }
+      }),
+      itemStyle: {
+        borderRadius: 5,
+        borderWidth: 0
+      },
+      label: { show: true, color: '#fff', fontSize: 16, lineHeight: 20, formatter: '{b}\n{c}'  },
+      labelLine: { show: true }
+    }],
+  }
+})
+
+useECharts(bar, setChartsOptionsBar);
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/portraitManagement/employeeProfile/index.vue

@@ -219,10 +219,10 @@ import Page from '../components/page.vue'
 import Card from '../components/card.vue'
 import SearchBar from '../components/SearchBar.vue'
 import { getEmployeePortrait } from '@/api/score/index'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { useDict } from '@/utils/dict'
 import { useECharts } from '@/hooks/useEcharts'
-import { reactive } from 'vue'
+
 
 const { sys_user_schooling } = useDict('sys_user_schooling')
 const visible = ref(false)

src/views/portraitManagement/groupProfile/component/runData.vue

@@ -1,20 +1,143 @@
 <template>
   <div class="operation-data">
-    <div class="placeholder">运行数据页面</div>
+    <div class="row">
+      <ChannelCheckChart :chartsData="chartsData" />
+    </div>
+    <div class="row">
+      <div class="col">
+        <SeizedInfo :chartsData="chartsData"/>
+      </div>
+      <div class="col">
+        <SeizedItems :chartsData="chartsData" />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <SeizedNumAll :chartsData="chartsData"/>
+      </div>
+      <div class="col">
+        <SeizedNum :chartsData="chartsData" />
+      </div>
+    </div>
+    <div class="row">
+      <SeizedWorkArea :chartsData="chartsData" />
+    </div>
+    <div class="row">
+      <div class="col">
+        <EventItems :chartsData="chartsData"  />
+      </div>
+      <div class="col">
+        <EventType :chartsData="chartsData"  />
+      </div>
+      <div class="col">
+        <EventWorkArea :chartsData="chartsData"  />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <TestItems :chartsData="chartsData"  />
+      </div>
+      <div class="col">
+        <TestResult :chartsData="chartsData"  />
+      </div>
+      <div class="col">
+        <TestArea :chartsData="chartsData"  />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <SupervisionDistribution :chartsData="chartsData"/>
+      </div>
+      <div class="col">
+        <InterceptionDistribution :chartsData="chartsData" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+import ChannelCheckChart from '../../components/ChannelCheckChart.vue';
+import SeizedInfo from '../../components/SeizedInfo.vue';
+import SeizedItems from '../../components/SeizedItems.vue';
+import SeizedNumAll from '../../components/SeizedNumAll.vue';
+import SeizedNum from '../../components/SeizedNum.vue';
+import SeizedWorkArea from '../../components/SeizedWorkArea.vue';
+import EventItems from '../../components/EventItems.vue';
+import EventType from '../../components/EventType.vue';
+import EventWorkArea from '../../components/EventWorkArea.vue';
+import TestItems from '../../components/TestItems.vue';
+import TestResult from '../../components/TestResult.vue';
+import TestArea from '../../components/TestArea.vue';
+import SupervisionDistribution from '../../components/SupervisionDistribution.vue';
+import InterceptionDistribution from '../../components/InterceptionDistribution.vue';
+
+
+const chartsData = ref([
+  {
+    num: 370,
+    num1: 330,
+    num2: 120,
+    num3: 470,
+    num4: 570,
+    rate: 30,
+    name: '打火机'
+  },
+  {
+    num: 330,
+    num1: 430,
+    num2: 420,
+    num3: 430,
+    num4: 150,
+    rate: 60,
+    name: '火柴'
+  },
+  {
+    num: 410,
+    num1: 310,
+    num2: 220,
+    num3: 370,
+    num4: 510,
+    rate: 35,
+    name: '刀具'
+  },
+  {
+    num: 570,
+    num1: 440,
+    num2: 420,
+    num3: 410,
+    num4: 470,
+    rate: 80,
+    name: '充电宝'
+  },
+  {
+    num: 340,
+    num1: 330,
+    num2: 620,
+    num3: 370,
+    num4: 170,
+    rate: 60,
+    name: '烟火'
+  },
+])
+  
+
 </script>
 
 <style lang="scss" scoped>
 .operation-data {
   padding: 20px;
-  .placeholder {
-    color: #fff;
-    font-size: 24px;
-    text-align: center;
-    padding: 100px 0;
+  .row {
+    display: flex;
+    column-gap: 15px;
+    height: 360px;
+    margin-bottom: 15px;
+    .col {
+      flex: 1;
+      height: 100%;
+      :deep(.info-card) {
+        height: 100%;
+      }
+    }
   }
 }
 </style>