UI3/src/views/dashboard/DataCenter.vue

<!-- eslint-disable prettier/prettier -->
<script setup lang="ts">
import "@/assets/sass/screen/screen.scss"
import { ref, onMounted, onBeforeMount, computed } from "vue"
import Map from "./Screen/Map.vue"
import Alarm from "./Screen/Alarm.vue"
import ChartPf from "./Screen/ChartPf.vue"
import { useRouter } from "vue-router"
import Rs from "@/core/services/RequestService"
const router = useRouter()
const themeClass="dark01"
const title = "餐饮油烟在线监测平台"
const baseInfo = ref({
  company: {
    operate: 0,
    rest: 0,
    outlet: 0,
    stove: 0,
    total: 0,
  },
  facilities: {
    normal: 0,
    rest: 0,
    over: 0,
    abnormal: 0,
    total: 0,
  },
  monitor: {
    normal: 0,
    abnormal: 0,
    total: 0,
  },
})

const today = ref({
  date: "",
  week: "",
  time: { hour: "00", minute: "00", second: "00" },
})
const chartData = ref({ areaOverChartData: {chartData:{}} })

const theme = ref({
  color: ["rgba(56, 164, 90, 0.9)", "rgba(19, 165, 165, 0.9)", "rgba(236, 90, 90, 0.9)", "rgba(223, 148, 83, 0.9)"],
  legend:
  {
    show: true,
    type: 'scroll',
    orient: 'vertical',
    x: '60%',
    y: 'center',
    icon:"circle",
    itemWidth: 7,
    itemHeight: 7,
    textStyle: {
      fontSize: 18
    },
  },
  pieRadius: ["59%", "88%"],
  pieCenter: ["30%", "50%"],
  titleText: "净化设施数量",
  titleUnit:"家",
  title: {
    x: "29%",
    y: "35%",
    show: true,
    textAlign: 'center',
    textStyle: {
      rich: {
        title: {
          color: "rgba(255,255,255,0.85)",
          fontSize: 14,
          fontWeight: "bold",
          lineHeight: 22,
        },
        total: {
          color: "rgba(255,255,255,0.95)",
          fontSize: 24,
          lineHeight: 30,
        },
        unit: {
          color: "rgba(255,255,255,0.85)",
          fontSize: 14,
          fontWeight: "bold",
        },
      },
    },
  },
})
const  theme2= computed( ()=> {
  return Object.assign({}, theme.value, {
    titleText: "监控仪数量",
    pieCenter: ["30%", "54%"],
    color: ["rgba(56, 164, 90, 0.8)", "rgba(236, 90, 90, 0.8)"],
  });
})
const barTheme = ref({
  legend: {},
  grid: {
    left: 30,
    bottom: 10,
  },
  axisLabel: {
    textStyle: {
      color: "#9fceff",
    },
  },
  areaStyle: ["rgba(19,194,194,.15)"],
})

// const search = reactive({
//   pageIndex: 1,
//   pageSize: 100000,
//   params: {},
// })

const  getChartData2= computed( ()=> {
  const data = {
    chartData: {
      title: "净化设施数量",
      seriesData: [
        {
          name: "正常",
          value: baseInfo.value.facilities.normal,
        },
        {
          name: "休息",
          value: baseInfo.value.facilities.rest,
        },
        {
          name: "超标",
          value: baseInfo.value.facilities.over,
        },
        {
          name: "异常",
          value: baseInfo.value.facilities.abnormal,
        },
      ],
    },
  };
  return data;
})
const  getChartData3= computed( ()=> {
  const data = {
    chartData: {
      title: "监控仪数量",
      seriesData: [
        {
          name: "正常",
          value: baseInfo.value.monitor.normal,
        },
        {
          name: "异常",
          value: baseInfo.value.monitor.abnormal,
        },
      ],
    },
  };
  return data;
})


const  companyPer=(val:number)=> {
  // if (!baseInfo.value.company.total) {
  //   return 50;
  // }
  // return (val * 100) / baseInfo.value.company.total;
  console.debug(val);
  return 50;
}

const   facilitiesPer=(val:number)=> {
  // if (!baseInfo.value.facilities.total) {
  //   return 50;
  // }
  // return (val * 100) / baseInfo.value.facilities.total;
  console.debug(val);
  return 25;
}

const   monitorPer=(val:number) =>{
  // if (!baseInfo.value.facilities.total) {
  //   return 50;
  // }
  // return (val * 100) / baseInfo.value.monitor.total
  console.debug(val);
  return 50;
}

function jump(type:number) {
  switch (type) {
  case 0:
    router.push({
      path: "/",
    })
    break
  }
}

function initCurrentDateTime() {
  let date = new Date();
  today.value.date = `${date.getFullYear()}年${date.getMonth()}月${date.getDate()}日`;
  today.value.week = `星期${"日一二三四五六".charAt(date.getDay())}`;
  setInterval(() => {
    date = new Date();
    today.value.time.hour = (date.getHours() + "").padStart(2, "0");
    today.value.time.minute = (date.getMinutes() + "").padStart(2, "0");
    today.value.time.second = (date.getSeconds() + "").padStart(2, "0");
  }, 1000);
}

function getBaseInfo() {
  Rs.get("sys/dataBoard/selectBaseInfo").then(
    (res:any) => {
      const bsInfo = res.data;
      baseInfo.value.company.operate = bsInfo.operate_num;
      baseInfo.value.company.rest = bsInfo.company_num - bsInfo.operate_num;
      baseInfo.value.company.total = bsInfo.company_num;
      baseInfo.value.company.outlet = bsInfo.outlet_num;
      baseInfo.value.company.stove = bsInfo.stove_num;
      baseInfo.value.facilities.normal = bsInfo.facilities_normal;
      baseInfo.value.facilities.rest = bsInfo.facilities_rest;
      baseInfo.value.facilities.over = bsInfo.facilities_over;
      baseInfo.value.facilities.abnormal = bsInfo.facilities_abnormal;
      baseInfo.value.facilities.total = bsInfo.facilities;
      baseInfo.value.monitor.normal = bsInfo.monitor_normal;
      baseInfo.value.monitor.abnormal = bsInfo.monitor_abnormal;
      baseInfo.value.monitor.total = bsInfo.monitor_normal + bsInfo.monitor_abnormal;
      /*
          company_num: 3 公司商户
          facilities: 105 净化设施
          facilities_abnormal: 25 异常
          facilities_normal: 78 正常
          facilities_over: 0 超标
          facilities_rest: 2 休息
          monitor_abnormal: 25
          monitor_normal: 80 监控器异常
          operate_num: 1 营运
          outlet_num: 4 排口
          stove_num: 4 灶头
          */
    }
  );
}

function getBarChart(type:number) {
  Rs.get("sys/dataBoard/selectOverdueByOrg?type="+type).then((res:any) => {
    chartData.value.areaOverChartData = {
      chartData: res.data.chartData,
    };
  });
}
function fullScreen() {
  //全屏状态下刷新会退出全屏 F11全屏没有此bug 
  document.documentElement.requestFullscreen()
}

function init() {
  initCurrentDateTime()
  getBaseInfo()
  getBarChart(0)
}
onBeforeMount(fullScreen)
onMounted(() => {
  init()
})
</script>
<template>
  <div class="body">
    <div class="header-box" @click="jump(0)">
      <div class="current-time">
        <span class="time">
          <span>{{ today.time.hour }}</span>
          :
          <span>{{ today.time.minute }}</span>
          :
          <span>{{ today.time.second }}</span>
        </span>
        <span class="date">
          <span class="week">{{ today.week }}</span>
          <span class="day">{{ today.date }}</span>
        </span>
      </div>
      <div class="title">
        <h4 style="font-size: 24px">{{ title }}</h4>
        <div class="svg-icon-box" style="">
          <svg width="768" height="80">
            <polyline
              fill="transparent"
              stroke-width="4"
              points="0,18 138.24,18 153.6,36 192,36 207.36,54 552.96,54 576,36 614.4,36 629.76,18 768,18"
              stroke="#00206e"
            >
              <animate
                attributeName="stroke-dasharray"
                attributeType="XML"
                from="0, 396.73457750675294, 0, 396.73457750675294"
                to="0, 0, 793.47, 0"
                dur="3s"
                begin="0s"
                calcMode="spline"
                keyTimes="0;1"
                keySplines="0.4,1,0.49,0.98"
                repeatCount="indefinite"
              ></animate>
            </polyline>
            <polyline fill="transparent" stroke-width="4" points="230.4,64 537.6,64" stroke="#00206e">
              <animate
                attributeName="stroke-dasharray"
                attributeType="XML"
                from="0, 153.6, 0, 153.6"
                to="0, 0, 307.2, 0"
                dur="3s"
                begin="0s"
                calcMode="spline"
                keyTimes="0;1"
                keySplines=".4,1,.49,.98"
                repeatCount="indefinite"
              ></animate>
            </polyline>
          </svg>
        </div>
      </div>
    </div>
    <div class="main-box main dark">
      <div class="box-o box-v" style="width: 30%">
        <div class="box-i" style="height: 35%">
          <div class="box-card">
            <div class="card-header">
              <div class="card-title">
                <span class="fas fa-home me-2"></span>
                商户设施概览
                <div class="svg-box">
                  <svg width="300px" height="35px" style="transform: scale(0.666667, 0.571429)">
                    <rect fill="#1E77B3" x="3.8170731707317076" y="9" width="7" height="17">
                      <animate
                        attributeName="y"
                        values="15.290459198672913;9;15.290459198672913"
                        dur="2.237109535573107s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="4.419081602654172;17;4.419081602654172"
                        dur="2.237109535573107s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="11.134146341463415" y="3.5" width="7" height="28">
                      <animate
                        attributeName="y"
                        values="7.721446827931917;3.5;7.721446827931917"
                        dur="2.4867078475140296s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="19.557106344136166;28;19.557106344136166"
                        dur="2.4867078475140296s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="18.451219512195124" y="1.5" width="7" height="32">
                      <animate
                        attributeName="y"
                        values="3.6322211202050099;1.5;3.6322211202050099"
                        dur="1.5433985345150485s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="21.73555775958998;32;21.73555775958998"
                        dur="1.5433985345150485s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="25.76829268292683" y="13" width="7" height="9">
                      <animate
                        attributeName="y"
                        values="17.15272186595574;13;17.15272186595574"
                        dur="1.7216084968529684s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="0.694556268088518;9;0.694556268088518"
                        dur="1.7216084968529684s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="33.08536585365854" y="11" width="7" height="13">
                      <animate
                        attributeName="y"
                        values="17.407408889428073;11;17.407408889428073"
                        dur="1.9738237014605904s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="0.18518222114385652;13;0.18518222114385652"
                        dur="1.9738237014605904s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="40.40243902439025" y="11" width="7" height="13">
                      <animate
                        attributeName="y"
                        values="15.764147443945932;11;15.764147443945932"
                        dur="1.7977465455458765s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="3.471705112108137;13;3.471705112108137"
                        dur="1.7977465455458765s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="47.71951219512195" y="10" width="7" height="15">
                      <animate
                        attributeName="y"
                        values="12.663565081564876;10;12.663565081564876"
                        dur="2.4258671814753225s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="9.67286983687025;15;9.67286983687025"
                        dur="2.4258671814753225s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="55.03658536585366" y="9" width="7" height="17">
                      <animate
                        attributeName="y"
                        values="10.790181047928254;9;10.790181047928254"
                        dur="2.2695936431282018s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="13.41963790414349;17;13.41963790414349"
                        dur="2.2695936431282018s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="62.35365853658537" y="8.5" width="7" height="18">
                      <animate
                        attributeName="y"
                        values="10.088708082080672;8.5;10.088708082080672"
                        dur="2.40837749864078s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="14.822583835838659;18;14.822583835838659"
                        dur="2.40837749864078s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="69.67073170731707" y="10.5" width="7" height="14">
                      <animate
                        attributeName="y"
                        values="15.286738994912064;10.5;15.286738994912064"
                        dur="1.7147957214396534s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="4.426522010175875;14;4.426522010175875"
                        dur="1.7147957214396534s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="76.98780487804878" y="13" width="7" height="9">
                      <animate
                        attributeName="y"
                        values="15.910608851585337;13;15.910608851585337"
                        dur="2.1756607827551475s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="3.1787822968293242;9;3.1787822968293242"
                        dur="2.1756607827551475s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="84.3048780487805" y="0.5" width="7" height="34">
                      <animate
                        attributeName="y"
                        values="0.8353022378871557;0.5;0.8353022378871557"
                        dur="1.915096633265933s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="33.32939552422569;34;33.32939552422569"
                        dur="1.915096633265933s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="91.6219512195122" y="9.5" width="7" height="16">
                      <animate
                        attributeName="y"
                        values="11.896546289915818;9.5;11.896546289915818"
                        dur="2.3651789556168015s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="11.206907420168363;16;11.206907420168363"
                        dur="2.3651789556168015s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="98.9390243902439" y="11.5" width="7" height="12">
                      <animate
                        attributeName="y"
                        values="15.80958246726474;11.5;15.80958246726474"
                        dur="2.17176808266821s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="3.3808350654705226;12;3.3808350654705226"
                        dur="2.17176808266821s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="106.25609756097562" y="12" width="7" height="11">
                      <animate
                        attributeName="y"
                        values="14.107250546571697;12;14.107250546571697"
                        dur="2.4128990914748156s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="6.785498906856606;11;6.785498906856606"
                        dur="2.4128990914748156s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="113.57317073170732" y="13" width="7" height="9">
                      <animate
                        attributeName="y"
                        values="13.62496272713161;13;13.62496272713161"
                        dur="1.8231890280578271s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="7.75007454573678;9;7.75007454573678"
                        dur="1.8231890280578271s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="120.89024390243902" y="14" width="7" height="7">
                      <animate
                        attributeName="y"
                        values="15.80399020409819;14;15.80399020409819"
                        dur="1.607485488310344s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="3.39201959180362;7;3.39201959180362"
                        dur="1.607485488310344s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="128.20731707317074" y="10" width="7" height="15">
                      <animate
                        attributeName="y"
                        values="14.895879950106568;10;14.895879950106568"
                        dur="2.193845387852562s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="5.208240099786861;15;5.208240099786861"
                        dur="2.193845387852562s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="135.52439024390245" y="13" width="7" height="9">
                      <animate
                        attributeName="y"
                        values="17.020809815016904;13;17.020809815016904"
                        dur="1.637532774910131s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="0.9583803699661932;9;0.9583803699661932"
                        dur="1.637532774910131s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="142.84146341463415" y="9" width="7" height="17">
                      <animate
                        attributeName="y"
                        values="16.85217193831901;9;16.85217193831901"
                        dur="1.811910732393983s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="1.2956561233619828;17;1.2956561233619828"
                        dur="1.811910732393983s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="150.15853658536585" y="5.5" width="7" height="24">
                      <animate
                        attributeName="y"
                        values="7.725558502953643;5.5;7.725558502953643"
                        dur="2.481987427715537s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="19.548882994092715;24;19.548882994092715"
                        dur="2.481987427715537s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="157.47560975609755" y="14" width="7" height="7">
                      <animate
                        attributeName="y"
                        values="16.797529842050448;14;16.797529842050448"
                        dur="2.0065241107098233s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="1.4049403158991023;7;1.4049403158991023"
                        dur="2.0065241107098233s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="164.7926829268293" y="14" width="7" height="7">
                      <animate
                        attributeName="y"
                        values="14.102493122277767;14;14.102493122277767"
                        dur="2.4203298768599604s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="6.795013755444466;7;6.795013755444466"
                        dur="2.4203298768599604s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="172.109756097561" y="13" width="7" height="9">
                      <animate
                        attributeName="y"
                        values="15.47672620395866;13;15.47672620395866"
                        dur="1.5588025326082304s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="4.046547592082679;9;4.046547592082679"
                        dur="1.5588025326082304s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="179.4268292682927" y="12.5" width="7" height="10">
                      <animate
                        attributeName="y"
                        values="14.510244683972193;12.5;14.510244683972193"
                        dur="1.5473879467299159s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="5.9795106320556135;10;5.9795106320556135"
                        dur="1.5473879467299159s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="186.7439024390244" y="9" width="7" height="17">
                      <animate
                        attributeName="y"
                        values="10.308816769046334;9;10.308816769046334"
                        dur="1.691984676773891s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="14.382366461907331;17;14.382366461907331"
                        dur="1.691984676773891s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="194.0609756097561" y="9.5" width="7" height="16">
                      <animate
                        attributeName="y"
                        values="16.810619028157582;9.5;16.810619028157582"
                        dur="1.5448531166168018s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="1.3787619436848324;16;1.3787619436848324"
                        dur="1.5448531166168018s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="201.3780487804878" y="12" width="7" height="11">
                      <animate
                        attributeName="y"
                        values="13.170274895095435;12;13.170274895095435"
                        dur="1.74226582253261s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="8.659450209809128;11;8.659450209809128"
                        dur="1.74226582253261s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="208.69512195121953" y="12.5" width="7" height="10">
                      <animate
                        attributeName="y"
                        values="14.05787143924714;12.5;14.05787143924714"
                        dur="2.374838580630559s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="6.884257121505721;10;6.884257121505721"
                        dur="2.374838580630559s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="216.01219512195124" y="12" width="7" height="11">
                      <animate
                        attributeName="y"
                        values="14.194826659720203;12;14.194826659720203"
                        dur="2.04498415182057s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="6.610346680559594;11;6.610346680559594"
                        dur="2.04498415182057s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="223.32926829268294" y="3.5" width="7" height="28">
                      <animate
                        attributeName="y"
                        values="16.2466685633605;3.5;16.2466685633605"
                        dur="2.0077944796349008s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="2.5066628732789953;28;2.5066628732789953"
                        dur="2.0077944796349008s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="230.64634146341464" y="13" width="7" height="9">
                      <animate
                        attributeName="y"
                        values="14.830417163675572;13;14.830417163675572"
                        dur="2.2798564200610087s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="5.339165672648857;9;5.339165672648857"
                        dur="2.2798564200610087s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="237.96341463414635" y="13.5" width="7" height="8">
                      <animate
                        attributeName="y"
                        values="15.750323804448916;13.5;15.750323804448916"
                        dur="1.757349494720878s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="3.4993523911021676;8;3.4993523911021676"
                        dur="1.757349494720878s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="245.28048780487805" y="4" width="7" height="27">
                      <animate
                        attributeName="y"
                        values="4.548776659660948;4;4.548776659660948"
                        dur="2.480358539493909s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="25.902446680678104;27;25.902446680678104"
                        dur="2.480358539493909s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="252.59756097560978" y="8.5" width="7" height="18">
                      <animate
                        attributeName="y"
                        values="14.87683625871001;8.5;14.87683625871001"
                        dur="1.8038376526992483s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="5.24632748257998;18;5.24632748257998"
                        dur="1.8038376526992483s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="259.9146341463415" y="12.5" width="7" height="10">
                      <animate
                        attributeName="y"
                        values="12.799919062108291;12.5;12.799919062108291"
                        dur="2.144749053867761s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="9.400161875783418;10;9.400161875783418"
                        dur="2.144749053867761s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="267.2317073170732" y="12" width="7" height="11">
                      <animate
                        attributeName="y"
                        values="12.038316731194925;12;12.038316731194925"
                        dur="1.7118530119723816s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="10.923366537610152;11;10.923366537610152"
                        dur="1.7118530119723816s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="274.5487804878049" y="9" width="7" height="17">
                      <animate
                        attributeName="y"
                        values="14.121240131466006;9;14.121240131466006"
                        dur="2.451104805016106s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="6.757519737067986;17;6.757519737067986"
                        dur="2.451104805016106s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="281.8658536585366" y="9" width="7" height="17">
                      <animate
                        attributeName="y"
                        values="14.541966382159629;9;14.541966382159629"
                        dur="2.33921278435197s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="5.916067235680741;17;5.916067235680741"
                        dur="2.33921278435197s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="289.1829268292683" y="14" width="7" height="7">
                      <animate
                        attributeName="y"
                        values="17.174851883721644;14;17.174851883721644"
                        dur="1.8263578964999774s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                      <animate
                        attributeName="height"
                        values="0.6502962325567145;7;0.6502962325567145"
                        dur="1.8263578964999774s"
                        keyTimes="0;0.5;1"
                        calcMode="spline"
                        keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
                        begin="0s"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                  </svg>
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="body-content">
                <div class="bar-box">
                  <span class="title">接入商户</span>
                  <div class="bar" :style="`width:${companyPer(baseInfo.company.operate)}%`">
                    <span class="num">{{ baseInfo.company.operate }}</span>
                    <span>营业</span>
                  </div>
                  <div class="bar bg4" :style="`width:${companyPer(baseInfo.company.rest)}%`">
                    <span class="num">{{ baseInfo.company.rest }}</span>
                    <span>未营业</span>
                  </div>
                </div>

                <div class="bar-box">
                  <span class="title">监控仪</span>
                  <div class="bar bg1" :style="`width:${monitorPer(baseInfo.monitor.normal)}%`">
                    <span class="num">{{ baseInfo.monitor.normal }}</span>
                    <span>正常</span>
                  </div>
                  <div class="bar bg4" :style="`width:${monitorPer(baseInfo.monitor.abnormal)}%`">
                    <span class="num">{{ baseInfo.monitor.abnormal }}</span>
                    <span>停电</span>
                  </div>
                </div>
                <div class="bar-box">
                  <span class="title">净化设施</span>
                  <div class="bar bg1" :style="`width:${facilitiesPer(baseInfo.facilities.normal)}%`">
                    <span class="num">{{ baseInfo.facilities.normal }}</span>
                    <span>正常</span>
                  </div>
                  <div class="bar bg2" :style="`width:${facilitiesPer(baseInfo.facilities.rest)}%`">
                    <span class="num">{{ baseInfo.facilities.rest }}</span>
                    <span>休息</span>
                  </div>
                  <div class="bar bg3" :style="`width:${facilitiesPer(baseInfo.facilities.over)}%`">
                    <span class="num">{{ baseInfo.facilities.over }}</span>
                    <span>超标</span>
                  </div>

                  <div class="bar bg4" :style="`width:${facilitiesPer(baseInfo.facilities.abnormal)}%`">
                    <span class="num">{{ baseInfo.facilities.abnormal }}</span>
                    <span>异常</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box-i" style="height: 65%">
          <div class="box-card">
            <div class="card-header">
              <div class="card-title">
                <span class="fas fa-smog me-2"></span>
                排放总量分析
                <div class="svg-box">
                  <svg width="300px" height="35px" style="transform: scale(0.666667, 0.571429)">
                    <rect fill="#1E77B3" x="8.038461538461538" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="19.576923076923077" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="31.115384615384613" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4050345372191908s"
                        begin="1.6523862991417908"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="42.65384615384615" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="54.19230769230769" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.6776498315485682s"
                        begin="1.056052133927965"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="65.73076923076923" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="77.26923076923077" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.426855630559931s"
                        begin="0.5692858374110674"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="88.8076923076923" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5349870020214766s"
                        begin="1.4592220304844439"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="100.34615384615384" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4993187716919685s"
                        begin="1.5496730932683267"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="111.88461538461539" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.7330279052946655s"
                        begin="0.31649593914557883"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="123.42307692307692" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="134.96153846153845" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="146.5" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="158.03846153846155" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="169.57692307692307" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="181.1153846153846" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.8378833812915605s"
                        begin="1.0710381413114094"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="192.65384615384616" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="204.19230769230768" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="215.73076923076923" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="227.26923076923077" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.1120855389750754s"
                        begin="0.4075194640895434"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="238.8076923076923" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="250.34615384615384" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.6235283978579753s"
                        begin="1.8967947370328173"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="261.88461538461536" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="273.4230769230769" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="284.96153846153845" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="8.038461538461538" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="19.576923076923077" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="31.115384615384613" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="42.65384615384615" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.9757284821239298s"
                        begin="1.5178319378506782"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="54.19230769230769" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5904019541336911s"
                        begin="1.8699683278562347"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="65.73076923076923" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="77.26923076923077" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.8354687904207385s"
                        begin="0.9730230195593386"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="88.8076923076923" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="100.34615384615384" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.6313826497330195s"
                        begin="1.3645452661185815"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="111.88461538461539" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5429338074007068s"
                        begin="1.7520984855776875"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="123.42307692307692" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="134.96153846153845" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="146.5" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="158.03846153846155" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.7941558427080255s"
                        begin="0.011653228363518231"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="169.57692307692307" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.6701932208107695s"
                        begin="1.3461156063410193"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="181.1153846153846" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="192.65384615384616" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5529183132232127s"
                        begin="0.9320452265497323"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="204.19230769230768" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="215.73076923076923" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="227.26923076923077" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="238.8076923076923" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5803028568021822s"
                        begin="0.24011998723743355"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="250.34615384615384" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="261.88461538461536" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.0052864118211062s"
                        begin="0.8135031731940723"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="273.4230769230769" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="284.96153846153845" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                  </svg>
                </div>
              </div>
            </div>
            <div class="card-body">
              <chart-pf class="body-content charts-box" theme-class="dark"></chart-pf>
            </div>
          </div>
        </div>
      </div>
      <div class="box-o box-v" style="width: 50%">
        <div class="box-i" style="height: 100%">
          <div class="box-card">
            <div class="card-header">
              <div class="card-title">
                <span class="fas fa-map me-2"></span>
                地图全局概览
                <div class="svg-box">
                  <svg width="300px" height="35px" style="transform: scale(0.666667, 0.571429)">
                    <rect fill="#1E77B3" x="8.038461538461538" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.9802358298367067s"
                        begin="1.5665624069464412"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="19.576923076923077" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.8079843323829157s"
                        begin="0.45705870505509694"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="31.115384615384613" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4675650195292191s"
                        begin="1.0803201432280352"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="42.65384615384615" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5354059480846596s"
                        begin="1.9330663416934963"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="54.19230769230769" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4913130129739207s"
                        begin="0.12382238904918852"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="65.73076923076923" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.928236748268784s"
                        begin="1.892890643278922"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="77.26923076923077" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="88.8076923076923" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="100.34615384615384" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="111.88461538461539" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="123.42307692307692" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="134.96153846153845" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="146.5" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.9881314084763604s"
                        begin="1.4252096336332358"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="158.03846153846155" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="169.57692307692307" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4059006832500065s"
                        begin="0.6639718708760203"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="181.1153846153846" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="192.65384615384616" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="204.19230769230768" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.048121912928511s"
                        begin="1.9317500648829804"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="215.73076923076923" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5944112219637578s"
                        begin="1.3195149646949855"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="227.26923076923077" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5210568672490044s"
                        begin="0.7486217554522492"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="238.8076923076923" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="250.34615384615384" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.1200547922559652s"
                        begin="1.8735809346836794"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="261.88461538461536" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="273.4230769230769" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="284.96153846153845" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.9378290375136897s"
                        begin="0.2583635026587676"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="8.038461538461538" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="19.576923076923077" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.2860276773144588s"
                        begin="1.6680355904697706"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="31.115384615384613" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.9033237591992576s"
                        begin="0.5293627977187825"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="42.65384615384615" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.183406324742816s"
                        begin="0.8026056049089916"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="54.19230769230769" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="65.73076923076923" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.8445954700696134s"
                        begin="0.5614152425400718"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="77.26923076923077" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="88.8076923076923" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="100.34615384615384" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="111.88461538461539" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.0197691842404732s"
                        begin="0.028204407227566453"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="123.42307692307692" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.2241107211264304s"
                        begin="1.0474225221850757"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="134.96153846153845" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="146.5" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.6373105427467933s"
                        begin="0.689874483332173"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="158.03846153846155" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.0395669442880973s"
                        begin="0.10734552161264466"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="169.57692307692307" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="181.1153846153846" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="192.65384615384616" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5567458209434697s"
                        begin="0.5083525542255201"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="204.19230769230768" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="215.73076923076923" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="227.26923076923077" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.3817388404549087s"
                        begin="0.7217052669381379"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="238.8076923076923" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5743030860147638s"
                        begin="0.5524250090930165"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="250.34615384615384" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="261.88461538461536" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="273.4230769230769" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5621821949960784s"
                        begin="1.4424928490381204"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="284.96153846153845" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4908450217194866s"
                        begin="0.6455036587008234"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                  </svg>
                </div>
              </div>
            </div>
            <div class="card-body">
              <Map theme-class="dark"></Map>
              <!-- <div
                class="body-content"
                id="map-container"
                style="height: 100%"
              ></div> -->
            </div>
          </div>
        </div>
      </div>

      <div class="box-o box-v" style="width: 30%">
        <div class="box-i" style="height: 35%">
          <div class="box-card">
            <div class="card-header">
              <div class="card-title">
                <span class="fas fa-chart-bar me-2"></span>
                区域超标数据分析
                <div class="svg-box">
                  <svg width="300px" height="35px" style="transform: scale(0.666667, 0.571429)">
                    <rect fill="#1E77B3" x="8.038461538461538" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.9802358298367067s"
                        begin="1.5665624069464412"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="19.576923076923077" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.8079843323829157s"
                        begin="0.45705870505509694"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="31.115384615384613" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4675650195292191s"
                        begin="1.0803201432280352"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="42.65384615384615" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5354059480846596s"
                        begin="1.9330663416934963"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="54.19230769230769" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4913130129739207s"
                        begin="0.12382238904918852"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="65.73076923076923" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.928236748268784s"
                        begin="1.892890643278922"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="77.26923076923077" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="88.8076923076923" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="100.34615384615384" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="111.88461538461539" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="123.42307692307692" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="134.96153846153845" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="146.5" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.9881314084763604s"
                        begin="1.4252096336332358"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="158.03846153846155" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="169.57692307692307" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4059006832500065s"
                        begin="0.6639718708760203"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="181.1153846153846" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="192.65384615384616" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="204.19230769230768" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.048121912928511s"
                        begin="1.9317500648829804"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="215.73076923076923" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5944112219637578s"
                        begin="1.3195149646949855"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="227.26923076923077" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5210568672490044s"
                        begin="0.7486217554522492"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="238.8076923076923" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="250.34615384615384" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.1200547922559652s"
                        begin="1.8735809346836794"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="261.88461538461536" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="273.4230769230769" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="284.96153846153845" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.9378290375136897s"
                        begin="0.2583635026587676"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="8.038461538461538" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="19.576923076923077" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.2860276773144588s"
                        begin="1.6680355904697706"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="31.115384615384613" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.9033237591992576s"
                        begin="0.5293627977187825"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="42.65384615384615" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.183406324742816s"
                        begin="0.8026056049089916"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="54.19230769230769" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="65.73076923076923" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.8445954700696134s"
                        begin="0.5614152425400718"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="77.26923076923077" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="88.8076923076923" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="100.34615384615384" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="111.88461538461539" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.0197691842404732s"
                        begin="0.028204407227566453"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="123.42307692307692" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.2241107211264304s"
                        begin="1.0474225221850757"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="134.96153846153845" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="146.5" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.6373105427467933s"
                        begin="0.689874483332173"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="158.03846153846155" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.0395669442880973s"
                        begin="0.10734552161264466"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="169.57692307692307" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="181.1153846153846" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="192.65384615384616" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5567458209434697s"
                        begin="0.5083525542255201"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="204.19230769230768" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="215.73076923076923" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="227.26923076923077" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.3817388404549087s"
                        begin="0.7217052669381379"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="238.8076923076923" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5743030860147638s"
                        begin="0.5524250090930165"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="250.34615384615384" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="261.88461538461536" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="273.4230769230769" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5621821949960784s"
                        begin="1.4424928490381204"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="284.96153846153845" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4908450217194866s"
                        begin="0.6455036587008234"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                  </svg>
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="body-content">
                <BaseChart
                  class="chart"
                  :data="chartData.areaOverChartData"
                  :type="'bar'"
                  :theme="themeClass"
                  :options="barTheme"
                  :scale="'100%'"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="box-i" style="height: 48%">
          <div class="box-card">
            <div class="card-header">
              <div class="card-title">
                <span class="fas fa-chart-pie me-2"></span>
                净化设施数据分析
                <div class="svg-box">
                  <svg width="300px" height="35px" style="transform: scale(0.666667, 0.571429)">
                    <rect fill="#1E77B3" x="8.038461538461538" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.9802358298367067s"
                        begin="1.5665624069464412"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="19.576923076923077" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.8079843323829157s"
                        begin="0.45705870505509694"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="31.115384615384613" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4675650195292191s"
                        begin="1.0803201432280352"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="42.65384615384615" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5354059480846596s"
                        begin="1.9330663416934963"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="54.19230769230769" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4913130129739207s"
                        begin="0.12382238904918852"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="65.73076923076923" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.928236748268784s"
                        begin="1.892890643278922"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="77.26923076923077" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="88.8076923076923" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="100.34615384615384" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="111.88461538461539" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="123.42307692307692" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="134.96153846153845" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="146.5" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.9881314084763604s"
                        begin="1.4252096336332358"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="158.03846153846155" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="169.57692307692307" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4059006832500065s"
                        begin="0.6639718708760203"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="181.1153846153846" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="192.65384615384616" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="204.19230769230768" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.048121912928511s"
                        begin="1.9317500648829804"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="215.73076923076923" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5944112219637578s"
                        begin="1.3195149646949855"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="227.26923076923077" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5210568672490044s"
                        begin="0.7486217554522492"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="238.8076923076923" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="250.34615384615384" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.1200547922559652s"
                        begin="1.8735809346836794"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="261.88461538461536" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="273.4230769230769" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="284.96153846153845" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.9378290375136897s"
                        begin="0.2583635026587676"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="8.038461538461538" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="19.576923076923077" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.2860276773144588s"
                        begin="1.6680355904697706"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="31.115384615384613" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.9033237591992576s"
                        begin="0.5293627977187825"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="42.65384615384615" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.183406324742816s"
                        begin="0.8026056049089916"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="54.19230769230769" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="65.73076923076923" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.8445954700696134s"
                        begin="0.5614152425400718"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="77.26923076923077" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="88.8076923076923" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="100.34615384615384" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="111.88461538461539" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.0197691842404732s"
                        begin="0.028204407227566453"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="123.42307692307692" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.2241107211264304s"
                        begin="1.0474225221850757"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="134.96153846153845" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="146.5" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.6373105427467933s"
                        begin="0.689874483332173"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="158.03846153846155" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.0395669442880973s"
                        begin="0.10734552161264466"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="169.57692307692307" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="181.1153846153846" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="192.65384615384616" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5567458209434697s"
                        begin="0.5083525542255201"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="204.19230769230768" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="215.73076923076923" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="227.26923076923077" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.3817388404549087s"
                        begin="0.7217052669381379"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="238.8076923076923" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5743030860147638s"
                        begin="0.5524250090930165"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="250.34615384615384" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="261.88461538461536" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="273.4230769230769" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5621821949960784s"
                        begin="1.4424928490381204"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="284.96153846153845" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4908450217194866s"
                        begin="0.6455036587008234"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                  </svg>
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="body-content">
                <div class="chart-box" style="padding: 0">
                  <BaseChart
                    class="chart"
                    :data="getChartData2"
                    :type="'ring'"
                    :theme="themeClass"
                    :options="theme"
                    :h="'calc(50% - 10px)'"
                  />

                  <BaseChart
                    class="chart"
                    :data="getChartData3"
                    :type="'ring'"
                    :theme="themeClass"
                    :options="theme2"
                    :h="'calc(50% - 10px)'"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="box-i" style="height: 180px">
          <div class="box-card">
            <div class="card-header">
              <div class="card-title">
                <span class="fas fa-bell me-2"></span>
                报警信息
                <div class="svg-box">
                  <svg width="300px" height="35px" style="transform: scale(0.666667, 0.571429)">
                    <rect fill="#1E77B3" x="8.038461538461538" y="8.16" width="7" height="7"></rect>
                    <rect fill="#1E77B3" x="19.576923076923077" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.8079843323829157s"
                        begin="0.45705870505509694"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="31.115384615384613" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.2675650195292191s"
                        begin="0.6803201432280352"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="42.65384615384615" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5354059480846596s"
                        begin="1.9330663416934963"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="54.19230769230769" y="8.16" width="7" height="7"></rect>
                    <rect fill="#1E77B3" x="65.73076923076923" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.928236748268784s"
                        begin="1.892890643278922"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="77.26923076923077" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="88.8076923076923" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5354059480846596s"
                        begin="1.9330663416934963"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="100.34615384615384" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.2354059480846596s"
                        begin="0.7330663416934963"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="111.88461538461539" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="123.42307692307692" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="134.96153846153845" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="146.5" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.9881314084763604s"
                        begin="1.4252096336332358"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="158.03846153846155" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="169.57692307692307" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4059006832500065s"
                        begin="0.6639718708760203"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="181.1153846153846" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4913130129739207s"
                        begin="0.12382238904918852"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="192.65384615384616" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="204.19230769230768" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.048121912928511s"
                        begin="1.9317500648829804"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="215.73076923076923" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5944112219637578s"
                        begin="1.3195149646949855"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="227.26923076923077" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5210568672490044s"
                        begin="0.7486217554522492"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="238.8076923076923" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="250.34615384615384" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.1200547922559652s"
                        begin="1.8735809346836794"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="261.88461538461536" y="8.16" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="273.4230769230769" y="8.16" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.2378290375136897s"
                        begin="0.2583635026587676"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="284.96153846153845" y="8.16" width="7" height="7"></rect>
                    <rect fill="#1E77B3" x="8.038461538461538" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.2860276773144588s"
                        begin="1.6680355904697706"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="19.576923076923077" y="19.83" width="7" height="7"></rect>
                    <rect fill="#1E77B3" x="31.115384615384613" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.9033237591992576s"
                        begin="0.5293627977187825"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="42.65384615384615" y="19.83" width="7" height="7"></rect>
                    <rect fill="#1E77B3" x="54.19230769230769" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.183406324742816s"
                        begin="0.8026056049089916"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="65.73076923076923" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.8445954700696134s"
                        begin="0.5614152425400718"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="77.26923076923077" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="88.8076923076923" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="100.34615384615384" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="111.88461538461539" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.0197691842404732s"
                        begin="0.028204407227566453"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="123.42307692307692" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.2241107211264304s"
                        begin="1.0474225221850757"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="134.96153846153845" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="146.5" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.6373105427467933s"
                        begin="0.689874483332173"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="158.03846153846155" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.0395669442880973s"
                        begin="0.10734552161264466"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="169.57692307692307" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="181.1153846153846" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="192.65384615384616" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5567458209434697s"
                        begin="0.5083525542255201"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="204.19230769230768" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="215.73076923076923" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="227.26923076923077" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.3817388404549087s"
                        begin="0.7217052669381379"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="238.8076923076923" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5743030860147638s"
                        begin="0.5524250090930165"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="250.34615384615384" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="261.88461538461536" y="19.83" width="7" height="7">
                      <!---->
                    </rect>
                    <rect fill="#1E77B3" x="273.4230769230769" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.5621821949960784s"
                        begin="1.4424928490381204"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                    <rect fill="#1E77B3" x="284.96153846153845" y="19.83" width="7" height="7">
                      <animate
                        attributeName="fill"
                        values="#1E77B3;transparent"
                        dur="1.4908450217194866s"
                        begin="0.6455036587008234"
                        repeatCount="indefinite"
                      ></animate>
                    </rect>
                  </svg>
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="body-content" style="padding: 0 10px">
                <Alarm :max="10" :scorllInterval="5000" :scrollLength="2" theme-class="dark"></Alarm>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.body {
  --header_h: 50px; //标题盒高度
  --mc: #3481ab;
  --c: #ddd;
  --c1: #51bdf6;
  --c2: #40faee;
  --bg1: rgba(16, 62, 111, 0.5);
  --bg2: rgba(255, 255, 255, 0.35);
  font-size: 16px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("./media/screen/bg.png");
  display: flex;
  flex-direction: column;
  flex: 1;

  .header-box {
    width: 100%;
    height: var(--header_h);
  }
  .main-box {
    width: 100%;
    height: calc(100% - var(--header_h));
  }
}
.header-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--c1);
  font-size: 28px;

  .current-time {
    position: absolute;
    top: 8px;
    left: 30px;
    display: flex;
    align-items: center;
    font-size: 18px;
    .time {
      font-size: 35px;
      span {
        padding: 0 0px;
      }
    }
    .date {
      display: flex;
      flex-direction: column;
      margin-left: 15px;
      font-weight: bold;
    }
  }
  .title {
    position: relative;
    h4 {
      color: var(--c2);
      letter-spacing: 2px;
      text-shadow: 2px 2px 5px #fff;
    }

    img {
      transform: scale(0.95);
    }

    .svg-icon-box {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -10px;
    }
  }
}
.main-box {
  --space_width: 8px; //边框之间的空隙 / 2
  padding: var(--space_width);
  display: flex;
  flex: 1;
  .box-o {
    width: 100%;
    display: flex;

    &.box-v {
      height: 100%;
      flex-direction: column;
    }
    .box-i {
      margin: var(--space_width);
      flex-grow: 1;
      .box-card {
        .card-body {
          height: calc(100% - var(--card_header_h));
        }
      }
    }
  }
}
.bar-box {
  --br: 10px;
  display: flex;
  flex: 1;
  height: 30%;
  width: 100%;
  margin: 10px 0;
  align-items: center;
  position: relative;
  font-size: 14px;
  border-radius: var(--br);
  &:first-child {
    margin-top: 0;
  }
  .title {
    color: #fff;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ddd;
    height: 100%;
    white-space: nowrap;
    min-width: 100px;
    padding-top: 15px;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1),
      4px 4px 5px 0px rgba(0, 0, 0, 0.1);
    background: linear-gradient(rgba(32, 107, 172, 0.9), rgba(32, 107, 172, 0.9));
    &:nth-of-type(1) {
      border-radius: var(--br) 0 0 var(--br);
    }
    &:last-child {
      border-radius: 0 var(--br) var(--br) 0;
    }
    .num {
      color: #fff;
      font-size: 16px;
    }
    &.bg1 {
      background: linear-gradient(rgba(56, 164, 90, 0.9), rgba(56, 164, 90, 0.9));
    }
    &.bg2 {
      background: linear-gradient(rgba(19, 165, 165, 0.9), rgba(19, 165, 165, 0.9));
    }
    &.bg3 {
      background: linear-gradient(rgba(236, 90, 90, 0.9), rgba(236, 90, 90, 0.9));
    }
    &.bg4 {
      background: linear-gradient(rgba(223, 148, 83, 0.9), rgba(223, 148, 83, 0.9));
    }
  }
}
#chart-pf_1,
#chart-pf_2 {
  width: 100%;
  height: 50%;
}
.body-content.charts-box {
  flex: 1;
  justify-content: center;
  align-items: center;
}
.chart-box {
  width: 100%;
  height: 100%;
  padding: 15px;
  .chart {
    width: 100%;
  }
}
:deep(.alarms) {
  padding: 0 10px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .alarm-box {
    color: #ccc;
    font-size: 14px;
    text-indent: 2em;
    line-height: 1.35;
    padding: 2px 10px;

    .type {
      font-weight: 600;
      margin: 0 1px;
      color: #51bdf6;
    }
  }

  .no-data {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #ddd;
  }
}
</style>