无人机管理后台前端(已迁走)
罗广辉
2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9
src/views/job/components/TaskTop/TaskIndustry.vue
@@ -1,7 +1,7 @@
<!-- 任务算法统计 -->
<template>
   <div class="task-industry">
      <div class="title">机巢事件前五数量占比</div>
      <div class="title">机巢事件数量占比</div>
      <div class="chart" ref="chartRef"></div>
   </div>
</template>
@@ -26,7 +26,7 @@
      left: 'center',
      bottom: '2%',
      textStyle: {
         color: '#6B90B5',
         color: '#363636',
         fontSize: 12,
      },
      itemWidth: 2, // 减小图例标记的宽度
@@ -38,30 +38,25 @@
      {
         name: '机巢事件统计',
         type: 'pie',
         roseType: 'radius',
         radius: ['20%', '70%'],
         center: ['50%', '45%'],
         // roseType: 'radius',
         radius: ['36%', '60%'],
         // center: ['50%', '45%'],
         // radius: '70%', // 设置饼图的半径
         center: ['50%', '36%'], // 调整饼图位置
         data: [],
         // [
         //   { name: '国土类', value: 0, itemStyle: { color: '#3D7FFF' } },
         //   { name: '城管类', value: 0, itemStyle: { color: '#8277E9' } },
         //   { name: '消防类', value: 0, itemStyle: { color: '#FFB77E' } },
         //   { name: '林业类', value: 0, itemStyle: { color: '#44D7B6' } },
         //   { name: '公安类', value: 0, itemStyle: { color: '#62F4FF' } }
         // ],
         label: {
            show: true,
            position: 'outside',
            formatter: '{c}',
            fontSize: 12,
            color: '#fff',
            color: '#000',
         },
         labelLine: {
            show: true,
            length: 5,
            length2: 8,
            length: 10,
            length2: 10,
            lineStyle: {
               color: '#fff',
               color: '#000',
            },
         },
      },
@@ -83,16 +78,14 @@
   })
}
const changeKey = inject('changeKey')
// 添加监听
watch(
   () => store.state.task.taskSearchParams,
   newVal => {
      if (newVal) {
         getIndustryJobNumPieChart(newVal)
      }
   },
   { deep: true }
  () => [store.state.task.taskSearchParams,changeKey.value],
  () => getIndustryJobNumPieChart(store.state.task.taskSearchParams),
  { deep: true }
)
onMounted(() => {
   getIndustryJobNumPieChart({ date_enum: 'TODAY' })
@@ -101,11 +94,12 @@
<style lang="scss" scoped>
.task-industry {
width: 276px;
   width: 276px;
   height: 100%;
   background: #FFFFFF;
   border-radius: 8px 8px 8px 8px;
   margin-left: 9px;
   margin-left: 10px;
   .title {
      font-family: Segoe UI, Segoe UI;
      padding: 10px 0 10px 16px;
@@ -116,6 +110,7 @@
      color: #363636;
      line-height: 18px;
   }
   .chart {
      width: 100%;
      height: 180px;