Vue implementiert Card-Flip-Karussellanzeige

<Vorlage>
  <div Klasse="Listencontainer">
    <div Klasse="Grund" v-if="Liste1.Länge > 0 || Liste2.Länge > 0">
      <div Klasse="Logo">
        <svg-icon Klasse="center-svg" Symbol-Klasse="centerLogo"></svg-icon>
        <div Klasse="echart">
          <echart :option="option" echartId="roadP" />
        </div>
      </div>
      <Straßenkomponente :list="list1[0]" :style="{ display: show1 }"></Straßenkomponente>
      <Straßenkomponente :list="list2[0]" :style="{ display: show2 }"></Straßenkomponente>
      <Straßenkomponente :list="list1[1]" :style="{ display: show3 }"></Straßenkomponente>
      <Straßenkomponente :list="list2[1]" :style="{ display: show4 }"></Straßenkomponente>
      <Straßenkomponente :list="list1[2]" :style="{ display: show5 }"></Straßenkomponente>
      <Straßenkomponente :list="list2[2]" :style="{ display: show6 }"></Straßenkomponente>
    </div>
  </div>
</Vorlage>
<Skript>
  importiere { defineComponent, inject, onMounted, reaktiv, onUnmounted, toRefs } von „vue“;
  importiere { congestionPredict } von '@/apis/fullView';
  Echart aus „@/components/common/echart“ importieren;
  importiere '@/assets/icons/fullView/westToEast.svg';
  importiere '@/assets/icons/fullView/eastToWest.svg';
  importiere '@/assets/icons/fullView/northToSouth.svg';
  importiere '@/assets/icons/fullView/southToNorth.svg';
  importiere '@/assets/icons/fullView/centerLogo.svg';
  importiere RoadComponent aus „@/views/fullView/left/RoadComponent“;
  exportiere StandarddefiniereKomponente({
    Name: 'RoadP',
    Komponenten: { echart, RoadComponent },
    aufstellen() {
      Lassen Sie echarts = inject('ec');
      const dataMap = reaktiv({
        Intervall: null,
        Intervall1: null,
        Liste1: [],
        Liste2: [],
        Liste: [],
        Option: {},
        Zeitüberschreitung: 10,
        show1: 'Block',
        show2: "keine",
        show3: 'blockieren',
        show4: "keine",
        show5: 'blockieren',
        show6: "keine",
      });
      beimMounted(() => {
        getData();
        dataMap.interval = setInterval(() => {
          getData();
        }, 60 * 1000);
        dataMap.interval1 = setInterval(() => {
          wenn (dataMap.timeout > 8 und dataMap.timeout < 11) {
            dataMap.timeout = dataMap.timeout - 1;
            dataMap.show1 = "Block";
            dataMap.show3 = "Block";
            dataMap.show5 = "Block";
            dataMap.show2 = "keine";
            dataMap.show4 = "keine";
            dataMap.show6 = "keine";
          } sonst wenn (dataMap.timeout === 8) {
            dataMap.timeout = dataMap.timeout - 1;
            dataMap.show1 = "keine";
            dataMap.show3 = "Block";
            dataMap.show5 = "Block";
            dataMap.show2 = "Block";
            dataMap.show4 = "keine";
            dataMap.show6 = "keine";
          } sonst wenn (dataMap.timeout === 7) {
            dataMap.timeout = dataMap.timeout - 1;
            dataMap.show1 = "keine";
            dataMap.show3 = "keine";
            dataMap.show5 = "Block";
            dataMap.show2 = "Block";
            dataMap.show4 = "Block";
            dataMap.show6 = "keine";
          } sonst wenn (dataMap.timeout < 7 && dataMap.timeout > 3) {
            dataMap.timeout = dataMap.timeout - 1;
            dataMap.show1 = "keine";
            dataMap.show3 = "keine";
            dataMap.show5 = "keine";
            dataMap.show2 = "Block";
            dataMap.show4 = "Block";
            dataMap.show6 = "Block";
          } sonst wenn (dataMap.timeout === 3) {
            dataMap.timeout = dataMap.timeout - 1;
            dataMap.show1 = "Block";
            dataMap.show3 = "keine";
            dataMap.show5 = "keine";
            dataMap.show2 = "keine";
            dataMap.show4 = "Block";
            dataMap.show6 = "Block";
          } sonst wenn (dataMap.timeout === 2) {
            dataMap.timeout = dataMap.timeout - 1;
            dataMap.show1 = "Block";
            dataMap.show3 = "Block";
            dataMap.show5 = "keine";
            dataMap.show2 = "keine";
            dataMap.show4 = "keine";
            dataMap.show6 = "Block";
          } sonst wenn (dataMap.timeout === 1) {
            dataMap.timeout = dataMap.timeout - 1;
            dataMap.show1 = "Block";
            dataMap.show3 = "Block";
            dataMap.show5 = "Block";
            dataMap.show2 = "keine";
            dataMap.show4 = "keine";
            dataMap.show6 = "keine";
          } anders {
            dataMap.timeout = 10;
          }
        }, 1000);
      });
      beiUnmountet(() => {
        Intervall löschen(dataMap.interval);
        Intervall löschen(dataMap.interval1);
      });
      const getData = () => {
        congestionPredict()
          .then((res) => {
            wenn (res && res.code === 0 && res.data) {
              dataMap.list1 = [];
              dataMap.list2 = [];
              für (sei i = 0; i < 6; i = i + 2) {
                dataMap.list1.push([
                  {
                    Name: res.data[i].name,
                    Richtung: res.data[i].direction,
                    Wert: res.data[i].index.toFixed(1),
                    Symbol: res.data[i].englishDirection,
                  },
                  {
                    Name: res.data[i + 1].name,
                    Richtung: res.data[i + 1].direction,
                    Wert: res.data[i + 1].index.toFixed(1),
                    Symbol: res.data[i + 1].englishDirection,
                  },
                ]);
              }
              für (sei j = res.data.length - 1; j > res.data.length - 6; j = j - 2) {
                dataMap.list2.push([
                  {
                    Name: res.data[j].name,
                    Richtung: res.data[j].direction,
                    Wert: res.data[j].index.toFixed(1),
                    Symbol: res.data[j].englishDirection,
                  },
                  {
                    Name: res.data[j - 1].name,
                    Richtung: res.data[j - 1].direction,
                    Wert: res.data[j - 1].index.toFixed(1),
                    Symbol: res.data[j - 1].englishDirection,
                  },
                ]);
              }
            }
          })
          .catch((err) => {
            console.log(fehler);
          })
          .finally(() => {
            dataMap.option = getOption();
          });
      };

      const getOption = () => {
        zurückkehren {
          Serie: [
            {
              Typ: 'liquidFill',
              Name: '',
              Radius: '85%',
              Mitte: ['50%', '45%'],
              Daten: [0,55, 0,5, 0,5],
              Farbe: ['rgba(0,118,255,0,5)', 'rgba(0,102,255,0,5)', 'rgba(0,185,255,0,6)'],
              Gliederung: {
                anzeigen: falsch,
              },
              Hintergrundstil: {
                Farbe: 'transparent',
                Rahmenfarbe: 'transparent',
                Rahmenbreite: 1,
                Schattenfarbe: 'transparent',
                Schattenunschärfe: 0,
              },
              Etikett: {
                anzeigen: falsch,
              },
            },
          ],
        };
      };
      zurückkehren {
        ...toRefs(Datenkarte),
      };
    },
  });
</Skript>
<style scoped lang="weniger">
  .Listencontainer {
    Breite: 100 %;
    Höhe: 280px;
  }
  .Grund {
    Breite: 696px;
    Rand: 16px automatisch;
    Höhe: 228px;
    Position: relativ;
    Listenstil: keiner;
    .logo {
      Breite: 150px;
      Höhe: 150px;
      Position: absolut;
      links: 0;
      rechts: 0;
      oben: 0;
      unten: 0;
      Rand: automatisch;
      Hintergrund: URL ('~@/assets/img/fullView/centerGround.dynamic.png');
      Hintergrundgröße: 100 % 100 %;
    }
    .echart {
      Breite: 158px;
      Höhe: 158px;
      Position: absolut;
      links: -4px;
      oben: 4px;
    }
  }
  .center-svg {
    Breite: 90px;
    Höhe: 100px;
    Position: absolut;
    links: 30px;
    oben: 25px;
    Z-Index: 15;
  }
</Stil>

<Vorlage>
  <div Klasse="Zurück" v-if="list.length > 0">
    <div Klasse="oben">
      <svg-icon class="svg" :icon-class="Liste[0].icon"></svg-icon>
      <div>
        <div>
          <p class="span-container text-overflow">{{ Liste[0].name }}</p>
          <p Klasse="index" :style="{ Farbe: switchColor(Liste[0].Wert) }">{{ Liste[0].Wert }}</p>
        </div>
        <div>
          <p class="span-container text-overflow">{{ Liste[1].name }}</p>
          <p Klasse="index" :style="{ Farbe: switchColor(Liste[1].Wert) }">{{ Liste[1].Wert }}</p>
        </div>
      </div>
      <svg-icon class="svg" :icon-class="Liste[1].icon"></svg-icon>
    </div>
  </div>
</Vorlage>
<Skript>
  importiere { defineComponent } von „vue“;

  exportiere StandarddefiniereKomponente({
    Name: 'Straßenkomponente',
    Requisiten: {
      Liste: {},
    },
    aufstellen() {
      const switchColor = (Wert) => {
        wenn (Wert > 0 und Wert <= 2) {
          gib '#00DBEB' zurück;
        } sonst wenn (Wert > 2 und Wert <= 3) {
          gib '#FFD200' zurück;
        } sonst wenn (Wert > 3 und Wert <= 4) {
          gib '#FF7309' zurück;
        } sonst wenn (Wert > 4 und Wert <= 5) {
          gib '#FF0000' zurück;
        }
      };
      zurückkehren {
        SchalterFarbe,
      };
    },
  });
</Skript>
<style lang="less" scoped>
  .geh zurück {
    Transformationsstil: 3D bewahren;
    Animation: zurück 0,5 s linear 1;
  }
  .zurück:hover {
    Animations-Wiedergabestatus: angehalten;
  }
  @keyframes zurück {
    0% {
      transformieren: Z-Drehung (0 Grad) Y-Drehung (0 Grad) X-Drehung (-90 Grad);
    }
    100 % {
      transformieren: Z drehen (0 Grad) Y drehen (0 Grad) X drehen (0 Grad);
    }
  }
  .span-container {
    Breite: 150px;
    Rand: 0 0 5px 5px;
    Farbe: var(--text-blue);
    Schriftgröße: var(--font-traffic-size);
  }
  .svg {
    Breite: 41px;
    Höhe: 41px;
  }
  .Spitze {
    Anzeige: Flex;
    Flex-Wrap: Nowrap;
    Polsterung: 0 20px;
    Rand: 0 0 14px 0;
    Inhalt ausrichten: Abstand dazwischen;
    Elemente ausrichten: zentrieren;
    Höhe: 68px;
    Rahmenradius: 10px;
    Deckkraft: 0,9;
    Hintergrund: linearer Farbverlauf(
      89 Grad,
      rgba(0, 76, 169, 0,5) 0%,
      rgba(0, 76, 169, 0) 46%,
      rgba(0, 76, 169, 0) 49%,
      rgba(0, 76, 169, 0) 52%,
      rgba(0, 76, 169, 0,5) 100 %
    );
  }
  .oben > div {
    Breite: 640px;
    Anzeige: Flex;
    Textausrichtung: zentriert;
    Elemente ausrichten: zentrieren;
    Flex-Wrap: Nowrap;
    Inhalt ausrichten: Abstand dazwischen;
    & > div {
      Breite: 160px;
      Spanne {
        Rand links: 15px;
      }
    }
    .index {
      Breite: 155px;
      Höhe: 28px;
      Schriftgröße: var(--font-size-chart-title);
      Textausrichtung: zentriert;
      Rand: 0;
      Zeilenhöhe: 28px;
    }
  }
</Stil>