forked from drone/command-center-dashboard

罗广辉
2025-03-28 fb3136514444c11c63d499a360fa5cb5f6815923
src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
@@ -1,5 +1,11 @@
<!-- 巡检任务详情 -->
<template>
  <common-title
    title="巡检任务情况"
    :style="{ marginLeft: pxToRem(14) }"
    @details="detailsFun"
  >
  </common-title>
  <div class="inspection-rask-details">
    <div class="inspection-num">
      <div class="total">
@@ -20,6 +26,8 @@
<script setup>
import * as echarts from 'echarts';
import { pxToRem } from '@/utils/rem';
import CommonTitle from '@/components/CommonTitle.vue';
import CommonDateTime from '@/components/CommonDateTime.vue';
const list = ref([
@@ -29,6 +37,10 @@
  { name: '已执行', value: 10, color: '#8EFFAC' },
  { name: '执行失败', value: 10, color: '#FF8E8E' },
]);
const detailsFun = () => {
  console.log('details');
};
const chartRef = ref(null);
@@ -151,36 +163,33 @@
  width: 390px;
  height: 414px;
  background: linear-gradient(
    270deg,
    rgba(31, 62, 122, 0) 0%,
    rgba(31, 62, 122, 0.35) 21%,
    #1f3e7a 100%
      270deg,
      rgba(31, 62, 122, 0) 0%,
      rgba(31, 62, 122, 0.35) 21%,
      #1f3e7a 100%
  );
  border-radius: 0px 0px 0px 0px;
  opacity: 0.85;
  .inspection-num {
    background: url('@/assets/images/inspection-num.png') no-repeat center / 100% 100%;
    width: 360px;
    height: 118px;
    position: relative;
    .total {
      position: absolute;
      left: 34px;
      top: 34px;
      top: 44px;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      font-family: Source Han Sans CN, Source Han Sans CN;
      line-height: 19px;
      .value {
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        margin-left: 8px;
        font-size: 26px;
      }
    }
    .status {
      position: absolute;
      top: 8px;
@@ -192,14 +201,12 @@
      justify-content: flex-start;
      line-height: 22px;
      padding: 0 10px 10px 0;
      .name {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
      }
      .value {
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        font-weight: 400;
@@ -207,7 +214,6 @@
      }
    }
  }
  .chart-container {
    width: 100%;
    height: 200px;