forked from drone/command-center-dashboard

罗广辉
2025-04-02 e1699c4851f6ca397cd0ad1ff63f32c737654836
src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
@@ -10,7 +10,9 @@
      </div>
      <div class="status">
        <div v-for="item in list">
          <div :style="{ color: item.color }" class="value">{{ jobStatistics[item.field] }}</div>
               <div :style="{ color: item.color }" class="value">
                  {{ jobStatistics[item.field] }}
               </div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
@@ -21,22 +23,22 @@
</template>
<script setup>
import * as echarts from 'echarts';
import { pxToRem } from '@/utils/rem';
import CommonTitle from '@/components/CommonTitle.vue';
import CommonDateTime from '@/components/CommonDateTime.vue';
import { getJobNumBar, getJobStatistics, getTotalJobNum } from '@/api/home';
import dayjs from 'dayjs';
import * as echarts from 'echarts'
import { pxToRem } from '@/utils/rem'
import CommonTitle from '@/components/CommonTitle.vue'
import CommonDateTime from '@/components/CommonDateTime.vue'
import { getJobNumBar, getJobStatistics, getTotalJobNum } from '@/api/home'
import dayjs from 'dayjs'
const currenDate = dayjs().format('YYYY-MM-DD');
const newTime = ref([currenDate, currenDate]);
const currenDate = dayjs().format('YYYY-MM-DD')
const newTime = ref([currenDate, currenDate])
const list = ref([
  { name: '计划执行', value: 89, color: '#FFFFFF', field: 'planned_executions' },
  { name: '执行中', value: 100, color: '#FFA768', field: 'running_num' },
  { name: '待执行', value: 66, color: '#FFE17E', field: 'pending_executions' },
  { name: '已执行', value: 10, color: '#8EFFAC', field: 'executed' },
  { name: '执行失败', value: 10, color: '#FF8E8E', field: 'failed_executions' },
]);
])
const option = {
  grid: {
    top: '15%',
@@ -57,7 +59,7 @@
  },
  xAxis: {
    type: 'category',
    data: ['1',],
      data: ['1'],
    axisLine: {
      show: false, // 隐藏轴线
    },
@@ -100,13 +102,13 @@
      ]),
    },
  },
};
}
const detailsFun = () => {
  console.log('details');
};
   console.log('details')
}
let chart = null;
let chart = null
// TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR
const getData = (value,date_enum) => {
@@ -114,38 +116,38 @@
    date_enum,
    // start_date: newTime.value[0],
    // end_date: newTime.value[1]
  };
   }
  getJobStatistics(params).then(res => {
    jobStatistics.value = res.data?.data || {};
  });
      jobStatistics.value = res.data?.data || {}
   })
  getJobNumBar(params).then(res => {
    option.xAxis.data = res.data?.data.map(item => item.name);
    option.series.data = res.data?.data.map(item => item.value);
    chart.setOption(option);
  });
};
      option.xAxis.data = res.data?.data.map(item => item.name)
      option.series.data = res.data?.data.map(item => item.value)
      chart.setOption(option)
   })
}
const chartRef = ref(null);
const total = ref(0);
const chartRef = ref(null)
const total = ref(0)
const jobStatistics = ref({
  planned_executions: 0,
  executed: 0,
  running_num: 0,
  failed_executions: 0,
  pending_executions: 0,
});
})
onMounted(() => {
  chart = echarts.init(chartRef.value);
   chart = echarts.init(chartRef.value)
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    chart.resize();
  });
      chart.resize()
   })
  getTotalJobNum().then(res => {
    total.value = res.data?.data || 0;
  });
  getData(newTime.value, 'TODAY');
});
      total.value = res.data?.data || 0
   })
   getData(newTime.value, 'TODAY')
})
</script>
<style scoped lang="scss">
@@ -164,7 +166,8 @@
  opacity: 0.85;
  .inspection-num {
    background: url('@/assets/images/home/homeLeft/inspection-num.png') no-repeat center / 100% 100%;
      background: url('@/assets/images/home/homeLeft/inspection-num.png') no-repeat center / 100%
         100%;
    width: 360px;
    height: 118px;
    position: relative;