UI3/src/views/dashboard/Index.vue

<script lang="ts" setup>
import { ref } from "vue"
import "@/assets/sass/screen/screen.scss"
import Map from "./Screen/Map.vue"
import Alarm from "./Screen/Alarm.vue"
import Clean from "./Screen/Clean.vue"
import Info from "./Screen/Info.vue"
import ChartPf from "./Screen/ChartPf.vue"
import ChartOver from "./Screen/ChartOver.vue"

const themeClass = "light"
const toggleData = ref({
  type: 0,
  icon: "fas fa-map",
  title: "地图全局信息",
})

function toggle(type: number, title: string, icon: string) {
  toggleData.value = {
    type,
    title,
    icon,
  }
}
</script>
<template>
  <div class="main" :class="themeClass">
    <div class="menu-box">
      <div class="menu" :class="toggleData.type == 0 ? 'active' : ''" @click="toggle(0, '地图全局概览', 'fas fa-map')">
        <span class="fas fa-map icon"></span>
      </div>
      <div
        class="menu"
        :class="toggleData.type == 1 ? 'active' : ''"
        @click="toggle(1, '商户设施基本概况', 'far fa-building')"
      >
        <span class="far fa-building icon"></span>
      </div>
      <div
        class="menu"
        :class="toggleData.type == 2 ? 'active' : ''"
        @click="toggle(2, '浓度超标分析', 'fas fa-chart-line')"
      >
        <span class="fas fa-chart-line icon"></span>
      </div>
      <div class="menu" :class="toggleData.type == 3 ? 'active' : ''" @click="toggle(3, '排放总量分析', 'fas fa-smog')">
        <span class="fas fa-smog icon"></span>
      </div>
      <div
        class="menu"
        :class="toggleData.type == 4 ? 'active' : ''"
        @click="toggle(4, '商户清洗概览', 'fas fa-shower')"
      >
        <span class="fas fa-shower icon"></span>
      </div>
      <div class="menu" :class="toggleData.type == 5 ? 'active' : ''" @click="toggle(5, '报警信息', 'fas fa-bell')">
        <span class="fas fa-bell icon"></span>
      </div>
    </div>
    <div class="content-box">
      <div class="box-card">
        <div class="card-header">
          <div class="card-title">
            <span :class="toggleData.icon" class="pe-2"></span>
            {{ toggleData.title }}
            <div class="svg-box" v-if="themeClass == 'dark'">
              <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 v-if="toggleData.type == 0" :theme-class="themeClass"></Map>
          <Info v-if="toggleData.type == 1" :theme-class="themeClass"></Info>
          <ChartOver v-if="toggleData.type == 2" :theme-class="themeClass"></ChartOver>
          <ChartPf v-if="toggleData.type == 3" :theme-class="themeClass"></ChartPf>
          <Clean v-if="toggleData.type == 4"></Clean>
          <Alarm v-if="toggleData.type == 5" :max="50" :scorllInterval="5000" :scrollLength="25"></Alarm>
        </div>
      </div>
    </div>
  </div>
</template>