From 34230cc941a541f58d04ad00da2597bc06abcac9 Mon Sep 17 00:00:00 2001
From: liyongle <liyongle@123>
Date: Fri, 28 Apr 2023 17:19:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=9A=80=20=E5=91=A8=E8=BE=B9?=
 =?UTF-8?q?=E4=BA=A4=E9=80=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Traffic/Traffic.vue         | 463 ++++++++++++++++++++-
 src/components/Traffics/Traffics.vue       | 135 ------
 src/components/TypeBtnList/TypeBtnList.vue |   2 +-
 src/views/Parking/Parking.vue              |  26 +-
 4 files changed, 482 insertions(+), 144 deletions(-)
 delete mode 100644 src/components/Traffics/Traffics.vue

diff --git a/src/components/Traffic/Traffic.vue b/src/components/Traffic/Traffic.vue
index 8f01dcf..124dafb 100644
--- a/src/components/Traffic/Traffic.vue
+++ b/src/components/Traffic/Traffic.vue
@@ -1,5 +1,464 @@
 <template>
-  <div></div>
+  <transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__zoomOut">
+    <div class="traffic-container">
+      <div class="left">
+        <img class="bg" src="@/assets/images/traffic.png" alt="" />
+        <div class="qing_1">
+          <svg width="637" height="242" viewBox="0 0 637 242" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M626.5 0H637L25.5 241.5L0 237L626.5 0Z" :fill="roadList[6].color" />
+          </svg>
+        </div>
+        <div class="qing_2">
+          <svg width="659" height="234" viewBox="0 0 659 234" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M649 0.5H658.5L25.5 234L0 229L649 0.5Z" :fill="roadList[7].color" />
+          </svg>
+        </div>
+        <div class="qing_bg">
+          <svg width="700" height="246" viewBox="0 0 700 246" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M657 0L700 1L94.9994 245.5L0 226.5L657 0Z" fill="white" />
+          </svg>
+        </div>
+        <div class="label qing">青年大桥</div>
+        <div class="bo_1">
+          <svg width="805" height="174" viewBox="0 0 805 174" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0 2.5L9 0.5L804.5 165L782 174L0 2.5Z" :fill="roadList[5].color" />
+          </svg>
+        </div>
+        <div class="bo_2">
+          <svg width="819" height="163" viewBox="0 0 819 163" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0.5 1.5L7 0L818.5 155.5L801.5 162.5L0.5 1.5Z" :fill="roadList[4].color" />
+          </svg>
+        </div>
+        <div class="bo_bg">
+          <svg width="856" height="185" viewBox="0 0 856 185" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0 8.5L34.5 0.5L855.5 152L773 184.5L0 8.5Z" fill="white" />
+          </svg>
+        </div>
+        <div class="label bo">博览路</div>
+        <div class="jiu_1">
+          <svg width="669" height="147" viewBox="0 0 669 147" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M659.5 0L668.5 0.5L17.5 147L0.5 144L659.5 0Z" :fill="roadList[2].color" />
+          </svg>
+        </div>
+        <div class="jiu_2">
+          <svg width="681" height="145" viewBox="0 0 681 145" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M672.5 0.5L680.5 1L18.5 144.5L0 141L672.5 0.5Z" :fill="roadList[1].color" />
+          </svg>
+        </div>
+        <div class="jiu_bg">
+          <svg width="718" height="151" viewBox="0 0 718 151" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M681.5 0L717.473 3.23145L68.5 151L0 139L681.5 0Z" fill="white" />
+          </svg>
+        </div>
+        <div class="label jiu">九龙街</div>
+        <div class="shen_1">
+          <svg width="622" height="72" viewBox="0 0 622 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0.5 1.5L6.5 0.5L622 67.5L611.5 72L0.5 1.5Z" :fill="roadList[1].color" />
+          </svg>
+        </div>
+        <div class="shen_2">
+          <svg width="626" height="67" viewBox="0 0 626 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0 1L5 0L625.5 62.5L616.5 66.5L0 1Z" :fill="roadList[0].color" />
+          </svg>
+        </div>
+        <div class="shen_bg">
+          <svg width="650" height="78" viewBox="0 0 650 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0.5 5.5L26.5169 0.5L649.504 61L611 78L0.5 5.5Z" fill="white" />
+          </svg>
+        </div>
+        <div class="label shen">沈水路</div>
+      </div>
+      <div class="right">
+        <div class="title">{{ $t('road') + ':' }}</div>
+        <div class="road-list">
+          <div v-for="item in statusList" :key="item.name" class="road">
+            <div class="w" :style="'background:' + item.color"></div>
+            <div class="type">{{ switchLanguage(item, 'name') }}</div>
+          </div>
+        </div>
+        <div class="info-container">
+          <div class="item">
+            <div class="name">博览路：</div>
+            <div class="road" style="margin-right: 24px">
+              <div class="w" :style="'background:' + roadList[4].color"></div>
+              <div class="type">{{ switchLanguage(roadList[4], 'status') }}</div>
+            </div>
+            <div class="road">
+              <div class="w" :style="'background:' + roadList[5].color"></div>
+              <div class="type">{{ switchLanguage(roadList[5], 'status') }}</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="name">九龙街：</div>
+            <div class="road" style="margin-right: 24px">
+              <div class="w" :style="'background:' + roadList[2].color"></div>
+              <div class="type">{{ switchLanguage(roadList[2], 'status') }}</div>
+            </div>
+            <div class="road">
+              <div class="w" :style="'background:' + roadList[3].color"></div>
+              <div class="type">{{ switchLanguage(roadList[3], 'status') }}</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="name">沈水路：</div>
+            <div class="road" style="margin-right: 24px">
+              <div class="w" :style="'background:' + roadList[0].color"></div>
+              <div class="type">{{ switchLanguage(roadList[0], 'status') }}</div>
+            </div>
+            <div class="road">
+              <div class="w" :style="'background:' + roadList[1].color"></div>
+              <div class="type">{{ switchLanguage(roadList[1], 'status') }}</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="name">青年大桥：</div>
+            <div class="road" style="margin-right: 24px">
+              <div class="w" :style="'background:' + roadList[6].color"></div>
+              <div class="type">{{ switchLanguage(roadList[6], 'status') }}</div>
+            </div>
+            <div class="road">
+              <div class="w" :style="'background:' + roadList[7].color"></div>
+              <div class="type">{{ switchLanguage(roadList[7], 'status') }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const statusList = [
+  {
+    name: '畅通',
+    nameEn: 'Clear',
+    color: '#68B753'
+  },
+  {
+    name: '缓行',
+    nameEn: 'Slow',
+    color: '#F5BD44'
+  },
+  {
+    name: '拥堵',
+    nameEn: 'Jam',
+    color: '#E53F3B'
+  },
+  {
+    name: '非常拥堵',
+    nameEn: 'Congested',
+    color: '#A91A1F'
+  }
+]
+
+const roadList = ref([
+  {
+    roadName: '沈水路',
+    direction: '东向西',
+    color: '#68B753',
+    status: '畅通',
+    statusEn: 'Clear'
+  },
+  {
+    roadName: '沈水路',
+    direction: '西向东',
+    color: '#68B753',
+    status: '畅通',
+    statusEn: 'Clear'
+  },
+  {
+    roadName: '九龙街',
+    direction: '南向北',
+    color: '#68B753',
+    status: '畅通',
+    statusEn: 'Clear'
+  },
+  {
+    roadName: '九龙街',
+    direction: '北向南',
+    color: '#68B753',
+    status: '畅通',
+    statusEn: 'Clear'
+  },
+  {
+    roadName: '博览路',
+    direction: '东向西',
+    color: '#68B753',
+    status: '畅通',
+    statusEn: 'Clear'
+  },
+  {
+    roadName: '博览路',
+    direction: '西向东',
+    color: '#68B753',
+    status: '畅通',
+    statusEn: 'Clear'
+  },
+  {
+    roadName: '青年大街',
+    direction: '南向北',
+    color: '#68B753',
+    status: '畅通',
+    statusEn: 'Clear'
+  },
+  {
+    roadName: '青年大街',
+    direction: '北向南',
+    color: '#68B753',
+    status: '畅通',
+    statusEn: 'Clear'
+  }
+])
+
+const resList = [
+  {
+    roadName: '九龙街',
+    sectionDesc: '南向北',
+    status: '拥堵',
+    speed: 21.37,
+    distance: 740
+  },
+  {
+    roadName: '青年大街',
+    sectionDesc: '南向北',
+    status: '拥堵',
+    speed: 21.38,
+    distance: 730
+  }
+]
+
+resList.forEach(item => {
+  switch (item.roadName) {
+    case '沈水路':
+      item.sectionDesc === '东向西' ? changeStatus(item.status, roadList.value[0]) : changeStatus(item.status, roadList.value[1])
+      break
+    case '九龙街':
+      item.sectionDesc === '南向北' ? changeStatus(item.status, roadList.value[2]) : changeStatus(item.status, roadList.value[3])
+      break
+    case '博览路':
+      item.sectionDesc === '东向西' ? changeStatus(item.status, roadList.value[4]) : changeStatus(item.status, roadList.value[5])
+      break
+    case '青年大街':
+      item.sectionDesc === '南向北' ? changeStatus(item.status, roadList.value[6]) : changeStatus(item.status, roadList.value[7])
+      break
+
+    default:
+      break
+  }
+})
+
+function changeStatus(status: string, item: any) {
+  switch (status) {
+    case '畅通':
+      item.status = '畅通'
+      item.statusEn = 'Clear'
+      item.color = '#68B753'
+      break
+    case '缓行':
+      item.status = '缓行'
+      item.statusEn = 'Slow'
+      item.color = '#F5BD44'
+      break
+    case '拥堵':
+      item.status = '拥堵'
+      item.statusEn = 'Jam'
+      item.color = '#E53F3B'
+      break
+    case '严重拥堵':
+      item.status = '非常拥堵'
+      item.statusEn = 'Congested'
+      item.color = '#A91A1F'
+      break
+
+    default:
+      break
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.traffic-container {
+  @include fl(flex-start, flex-start);
+
+  position: fixed;
+  top: 306px;
+  left: 112px;
+  .left {
+    position: relative;
+    width: 1218px;
+    height: 600px;
+    .bg {
+      position: absolute;
+      top: 0;
+      left: 236px;
+      z-index: 10;
+      width: 693px;
+      height: 420px;
+    }
+    .qing {
+      position: absolute;
+      top: 350px;
+      left: 890px;
+      transform: rotate(-23.66deg);
+    }
+    .qing_1 {
+      position: absolute;
+      top: 249px;
+      left: 545px;
+      z-index: 15;
+    }
+    .qing_2 {
+      position: absolute;
+      top: 249px;
+      left: 502px;
+      z-index: 15;
+    }
+    .qing_bg {
+      position: absolute;
+      top: 248px;
+      left: 488px;
+      z-index: 14;
+    }
+    .bo {
+      position: absolute;
+      top: 390px;
+      left: 279px;
+      transform: rotate(13.14deg);
+    }
+    .bo_1 {
+      position: absolute;
+      top: 308.5px;
+      left: 29px;
+      z-index: 7;
+    }
+    .bo_2 {
+      position: absolute;
+      top: 304px;
+      left: 49.5px;
+      z-index: 7;
+    }
+    .bo_bg {
+      position: absolute;
+      top: 303.5px;
+      left: 24px;
+      z-index: 6;
+    }
+    .jiu {
+      position: absolute;
+      top: 245px;
+      left: 155px;
+      transform: rotate(-12.85deg);
+    }
+    .jiu_1 {
+      position: absolute;
+      top: 206px;
+      left: 41.5px;
+      z-index: 9;
+    }
+    .jiu_2 {
+      position: absolute;
+      top: 204.5px;
+      left: 13px;
+      z-index: 9;
+    }
+    .jiu_bg {
+      position: absolute;
+      top: 204px;
+      left: 0;
+      z-index: 8;
+    }
+    .shen {
+      position: absolute;
+      top: 205px;
+      left: 950px;
+      transform: rotate(6.52deg);
+    }
+    .shen_1 {
+      position: absolute;
+      top: 212px;
+      left: 574.5px;
+      z-index: 5;
+    }
+    .shen_2 {
+      position: absolute;
+      top: 210px;
+      left: 586px;
+      z-index: 5;
+    }
+    .shen_bg {
+      position: absolute;
+      top: 209.5px;
+      left: 568.5px;
+      z-index: 4;
+    }
+    .label {
+      font-size: 36px;
+      font-family: 'font_regular';
+      color: #595447;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 44px;
+    }
+  }
+  .right {
+    margin-top: 80px;
+    margin-left: 59px;
+    .title {
+      margin-bottom: 24px;
+      font-size: 28px;
+      font-family: 'font_bold';
+      color: #736661;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 36px;
+    }
+    .road-list {
+      @include fl();
+
+      margin-bottom: 48px;
+    }
+    .road {
+      @include fl();
+
+      margin-right: 40px;
+      .w {
+        width: 20px;
+        height: 20px;
+        margin-right: 8px;
+      }
+      .type {
+        font-size: 20px;
+        font-family: 'font_regular';
+        color: #9b8c85;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 28px;
+      }
+    }
+    .info-container {
+      width: 452px;
+      height: 356px;
+      padding: 40px 48px 12px;
+      background: #fff;
+      border-radius: 16px;
+      .item {
+        @include fl();
+
+        margin-bottom: 48px;
+        .name {
+          width: 100px;
+          margin-right: 40px;
+          font-size: 20px;
+          font-family: 'font_bold';
+          color: #736661;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 28px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/Traffics/Traffics.vue b/src/components/Traffics/Traffics.vue
deleted file mode 100644
index fd4313c..0000000
--- a/src/components/Traffics/Traffics.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-  <transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__zoomOut">
-    <div class="traffic-container">
-      <div class="left">
-        <img class="bg" src="@/assets/images/traffic.png" alt="" />
-      </div>
-      <div class="right">
-        <div class="title">{{ $t('road') + ':' }}</div>
-        <div class="road-list">
-          <div v-for="item in list" :key="item.name" class="road">
-            <div class="w" :style="'background:' + item.color"></div>
-            <div class="type">{{ switchLanguage(item, 'name') }}</div>
-          </div>
-        </div>
-        <div class="info-container">
-          <div class="item">
-            <div class="name">博览路：</div>
-            <div class="road" style="margin-right: 24px">
-              <div class="w" style="background: #68b753"></div>
-              <div>{{ switchLanguage(item, 'name') }}</div>
-            </div>
-            <div class="road">
-              <div class="w" style="background: #f5bd44"></div>
-              <div>{{ switchLanguage(item, 'name') }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script setup lang="ts">
-import { switchLanguage } from '@/plugins/switchLanguage'
-
-const list = [
-  {
-    name: '畅通',
-    nameEn: 'Clear',
-    color: '#68B753'
-  },
-  {
-    name: '缓行',
-    nameEn: 'Slow',
-    color: '#F5BD44'
-  },
-  {
-    name: '拥堵',
-    nameEn: 'Jam',
-    color: '#E53F3B'
-  },
-  {
-    name: '非常拥堵',
-    nameEn: 'Very Congested',
-    color: '#A91A1F'
-  }
-]
-</script>
-
-<style lang="scss" scoped>
-.traffic-container {
-  @include fl(flex-start, flex-start);
-
-  position: fixed;
-  top: 306px;
-  left: 112px;
-  .left {
-    position: relative;
-    width: 1218px;
-    height: 600px;
-    .bg {
-      position: absolute;
-      top: 0;
-      left: 236px;
-      z-index: 10;
-      width: 693px;
-      height: 420px;
-    }
-  }
-  .right {
-    margin-left: 59px;
-    .title {
-      margin-bottom: 24px;
-      font-size: 28px;
-      font-family: 'font_bold';
-      color: #736661;
-      font-style: normal;
-      font-weight: 700;
-      line-height: 36px;
-    }
-    .road-list {
-      @include fl();
-
-      margin-bottom: 48px;
-    }
-    .road {
-      @include fl();
-
-      margin-right: 40px;
-      .w {
-        width: 20px;
-        height: 20px;
-        margin-right: 8px;
-      }
-      .type {
-        font-size: 20px;
-        font-family: 'font_regular';
-        color: #9b8c85;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 28px;
-      }
-    }
-    .info-container {
-      width: 452px;
-      height: 356px;
-      padding: 40px 48px 12px;
-      background: #fff;
-      border-radius: 16px;
-      .item {
-        margin-bottom: 48px;
-        .name {
-          margin-right: 40px;
-          font-size: 20px;
-          font-family: 'font_bold';
-          color: #736661;
-          font-style: normal;
-          font-weight: 700;
-          line-height: 28px;
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/TypeBtnList/TypeBtnList.vue b/src/components/TypeBtnList/TypeBtnList.vue
index 06c97f1..2d723c0 100644
--- a/src/components/TypeBtnList/TypeBtnList.vue
+++ b/src/components/TypeBtnList/TypeBtnList.vue
@@ -45,7 +45,7 @@ function changeType(item: TypeItem, index: number) {
     display: flex;
 
     h4 {
-      width: 96px;
+      // width: 96px;
       height: 40px;
       font-size: 24px;
       font-family: 'font_regular';
diff --git a/src/views/Parking/Parking.vue b/src/views/Parking/Parking.vue
index 0b60e21..3b75e35 100644
--- a/src/views/Parking/Parking.vue
+++ b/src/views/Parking/Parking.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="parking-container">
     <div class="tabs">
-      <div v-for="(item, index) of tabs" :key="item" class="tab-item" @click="handleTab(index)">
-        <span class="text" :class="{ active: tabIdx === index }">{{ item }}</span>
+      <div v-for="(item, index) of tabs" :key="item.title" class="tab-item" @click="handleTab(index)">
+        <span class="text" :class="{ active: tabIdx === index }">{{ switchLanguage(item, 'title') }}</span>
         <div v-if="index !== tabs.length - 1" class="line"></div>
       </div>
     </div>
@@ -47,7 +47,20 @@ import ScrollView from '@/base/ScrollView/ScrollView.vue'
 const CarInfo = defineAsyncComponent(() => import('@/components/CarInfo/CarInfo.vue'))
 const Traffic = defineAsyncComponent(() => import('@/components/Traffic/Traffic.vue'))
 
-const tabs = ['车牌号找车', '车位号找车', '周边交通'] as const
+const tabs = [
+  {
+    title: '车牌号寻车',
+    titleEn: 'License Plate Number'
+  },
+  {
+    title: '车位号找车',
+    titleEn: 'Parking Lot Number'
+  },
+  {
+    title: '周边交通',
+    titleEn: 'Surrounding Transportation'
+  }
+] as const
 const tabIdx = ref(0)
 function handleTab(index: number) {
   tabIdx.value = index
@@ -77,14 +90,15 @@ getParkingInfo().then(({ data }) => {
 
 <style lang="scss" scoped>
 .parking-container {
-  position: relative;
+  position: absolute;
+  top: 140px;
   z-index: 20;
-  padding-top: 140px;
+  // padding-top: 140px;
   .tabs {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100%;
+    width: 1920px;
     margin-bottom: 64px;
     .tab-item {
       display: flex;