28

src/layout/components/Header/index.vue

@@ -348,7 +348,7 @@
         isBack.value = true
         break
       case '/hotel':
-        title.value = '酒店场馆'
+        title.value = '场馆'
         otherLeftLabel.value = '其他酒店'
         otherRightLabel.value = '其他场馆'
         isSkip.value = false

src/views/home/components/box-3.vue

@@ -109,11 +109,14 @@
       <div class="box-1">
         <div class="pt-10">
           <Title3 title="停车场使用" />
+		  <blcok v-if="splitList.length">
 			  <el-carousel trigger="click" indicator-position="none" autoplay arrow="never"  interval="5000">
 			  			<el-carousel-item v-for="(item,index) in splitList" :key="index">
 			  			  <vacancy :list="item" />
 			  			</el-carousel-item>
 			  </el-carousel>
+		  </blcok>
+		  
         </div>
       </div>
     </div>

src/views/home/components/vehicle-source.vue

@@ -19,6 +19,7 @@
   watch(
     () => props.list,
     (val) => {
+		console.log(val,'jjjjjjjjjjjj')
       if (val.length > 0) {
         setTimeout(() => {
           init()

src/views/hotel/components/info-box.vue

@@ -74,7 +74,7 @@
       <title2 title="简介" />
       <div class="desc-content" v-html="info?.introduction"></div>
       <div class="desc-container">
-        <div>
+        <div v-if="info?.banner.length">
           <el-carousel indicator-position="outside">
             <el-carousel-item v-for="item in info?.banner" :key="item">
               <el-image class="cover-item" :src="`http://192.168.77.200/fjtcc-api${item}`" />

src/views/hotel/components/video-box.vue

@@ -427,7 +427,12 @@
 	    cameraName: cameraName.value,
 	    businessScenicArea: params.businessScenicArea
 	  })
+	  console.log(res,11111111111111)
 	  regionList.value = res.data
+	  regionList.value.forEach((item,index)=>{
+	  	// item.show = true
+	  	item.videoResources=item.resourcesList[0].videoResources
+	  })
 	  regionList.value[0].show = true
 	  
 	}

src/views/traffic/components/box-1.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="box-1">
     <div class="statistics">
+		<Title1 title="总路段拥堵情况" />
       <!-- <div class="item-box">
         <div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />拥堵总数 </div>
         <div class="item-num">
@@ -13,7 +14,7 @@
           <span><countup :end-val="countData.totalNum" /> </span>
         </div>
       </div> -->
-      <div class="item-box">
+    <!--  <div class="item-box">
         <div class="item-t flex">
           <img src="@/assets/images/t-icon-1.png" alt="" />核心道路总数
         </div>
@@ -28,7 +29,7 @@
         <div class="item-num"
           ><span><countup :end-val="countData.jamCore" /></span>
         </div>
-      </div>
+      </div> -->
     </div>
     <div class="chart">
       <div class="chart-item">
@@ -54,6 +55,30 @@
           </div>
         </div>
       </div>
+	  
+	  <div class="chart-item">
+	    <Title3 title="拥堵类型频次占比" />
+	    <div class="chart__inner">
+	      <div class="new-vehicle">
+			  <vehicle-source :list="chartData.typeNum" />
+	       <!-- <spotRate :dataList="chartData.typeNum" :total="chartData.totalNum" label="拥堵总数" /> -->
+		   <div class="new-ul">
+			  <ul class="chart__legend">
+			    <li
+			      class="chart__legend-item"
+			      v-for="(item, index) in chartData.typeNum"
+			      :key="index"
+			    >
+			      <p class="dot" :style="{ background: colors[index] }" />
+			      <p class="name">{{ item.name }}</p>
+			      <p class="value">{{ item.value }}%</p>
+			    </li>
+			  </ul> 
+		   </div>
+	      
+	      </div>
+	    </div>
+	  </div>
       <div class="chart-item">
         <Title3 title="拥堵时长占比" />
         <div class="chart__inner">
@@ -77,34 +102,18 @@
           </div>
         </div>
       </div>
-      <div class="chart-item">
+  
-        <Title3 title="拥堵类型频次占比" />
-        <div class="chart__inner">
-          <div>
-            <spotRate :dataList="chartData.typeNum" :total="chartData.totalNum" label="拥堵总数" />
-            <ul class="chart__legend">
-              <li
-                class="chart__legend-item"
-                v-for="(item, index) in chartData.typeNum"
-                :key="index"
-              >
-                <p class="dot" :style="{ background: colors[index] }" />
-                <p class="name">{{ item.name }}</p>
-                <p class="value">{{ item.value }}%</p>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
       <div class="chart-item">
         <Title3 title="拥堵类型时长占比" />
         <div class="chart__inner">
-          <div>
+          <div class="new-vehicle">
-            <spotRate
+           <!-- <spotRate
               :dataList="chartData.typeTime"
               :total="chartData.totalTime"
               label="拥堵总数"
-            />
+            /> -->
+			<vehicle-source :list="chartData.typeTime" />
+			<div class="new-ul">
 				<ul class="chart__legend">
 				  <li
 				    class="chart__legend-item"
@@ -117,6 +126,8 @@
 				  </li>
 				</ul>
 			</div>
+            
+          </div>
         </div>
       </div>
     </div>
@@ -128,7 +139,7 @@
   import countup from 'vue-countup-v3'
   import { getSpotRateApi } from '@/api/workOrder'
   import { getRouterStateApi, getRouterChartsApi } from '@/api/traffic'
-
+  import vehicleSource from './vehicle-source'
   const colors = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
   let spotRateData = ref([])
   let countData = ref({
@@ -166,6 +177,13 @@
 </script>
 
 <style lang="scss" scoped>
+	.new-vehicle{
+		padding-top:vh(20);
+	}
+	.new-ul{
+		padding:0 vw(30);
+		margin-top:vh(20);
+	}
   .box-1 {
     margin-top: vh(120);
     width: vw(626);
@@ -188,6 +206,7 @@
         display: flex;
         justify-content: center;
         height: vh(380);
+		
       }
 
       &__legend {
@@ -232,11 +251,11 @@
       }
     }
     .statistics {
-      padding: 0 vw(40);
+   //    padding: 0 vw(40);
-      height: vh(110);
+   //    height: vh(110);
-      display: flex;
+   //    display: flex;
-      align-items: center;
+   //    align-items: center;
-
+	  // width:100%;
       .item-box {
         flex: 1;
         .item-t {

src/views/traffic/components/box-2.vue

@@ -11,8 +11,14 @@
         {{ item.name }}
       </li>
     </ul>
-
+	<div>
+		<div class="title-1">
+		  <div class="title">
+		    <span> 核心路段展 </span>
+		  </div>
+		</div>
 		<div id="traffic-map" class="traffic-map-big" :class="{ 'traffic-map': routers.length > 0 }" />
+	</div>
 
     <div v-if="routers.length > 0" class="list">
       <div class="item" v-for="(item, index) in routers" :key="index" @click="handleRouter(item)">
@@ -225,6 +231,30 @@
 </script>
 
 <style lang="scss" scoped>
+	.title-1 {
+	  position: relative;
+	  margin-bottom:vh(20);
+	  .title {
+	    margin: vh(10) auto;
+		margin-top:0;
+	    width: vw(1500);
+	    height: vh(32);
+	    display: flex;
+	    align-items: center;
+	    justify-content: center;
+	    background-image: url('@/assets/images/title-4.png');
+	    background-size: 100% 100%;
+	    & > span {
+	      font-weight: 800;
+	      font-size: vw(24);
+	      background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
+	      -webkit-background-clip: text;
+	      background-clip: text;
+	      -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
+	      color: transparent; /* 兼容其他浏览器 */
+	    }
+	  }
+	}
   .box-2 {
     margin-top: vh(120);
     display: flex;
@@ -265,7 +295,7 @@
     position: relative;
     z-index: 9;
     width: vw(2116);
-    height: vh(955);
+    height: vh(890);
     margin-left: vw(8);
     box-sizing: border-box;
     background-image: url('/src/assets/images/map-bg-2.png');

src/views/traffic/components/vehicle-source.vue

@@ -0,0 +1,130 @@
+<!-- 车源地 -->
+<template>
+  <div class="vehicle-source" :id="id" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const { id, setOption } = useEchart()
+
+  let props = defineProps({
+    list: {
+      type: Array,
+      default: () => []
+    }
+  })
+
+  watch(
+    () => props.list,
+    (val) => {
+		console.log(val,'llllllllllllllll')
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
+    },
+    { immediate: true }
+  )
+
+  let params = null
+
+  const getSeriesData = () => {
+    return props.list.map((item) => item.value)
+  }
+  const getXAxisData = () => {
+    return props.list.map((item) => item.name)
+  }
+  const init = () => {
+    if (!params) {
+      params = {
+        grid: {
+          left: '4%',
+          right: '4%',
+          top: '10%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: {
+          boundaryGap: true,
+          type: 'category',
+          data: getXAxisData(),
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(5, 72, 134, 1)'
+            }
+          },
+          axisLabel: {
+            fontSize: fitChartSize(12),
+            color: 'rgba(255,255,255,0.9)'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            fontSize: fitChartSize(12),
+            color: 'rgba(255,255,255,0.9)'
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: 'rgba(0, 150, 255,0.4)',
+              type: 'dashed'
+            }
+          }
+        },
+        series: [
+          {
+            data: getSeriesData(),
+            type: 'bar',
+            showBackground: true,
+            barWidth: fitChartSize(8),
+            label: {
+              show: true,
+              position: 'top',
+              color: '#fff',
+              fontSize: fitChartSize(10)
+            },
+            itemStyle: {
+              borderRadius: [0, 0, 0, 0],
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(0, 208, 255, 0)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0, 208, 255, 1)'
+                  }
+                ]
+              }
+            },
+            backgroundStyle: {
+              color: 'rgba(0, 150, 255, 0.15)'
+            }
+          }
+        ]
+      }
+    } else {
+      params.xAxis.data = getXAxisData()
+      params.series[0].data = getSeriesData()
+    }
+    setOption(params)
+  }
+</script>
+
+<style scoped lang="scss">
+  .vehicle-source {
+    width:vw(310);
+    height: vh(160);
+  }
+</style>

src/views/vehicles/components/big-map.vue

@@ -4,7 +4,17 @@
       <!-- <img class="close" src="@/assets/images/close.png" @click="handleClose" /> -->
       <div class="flex">
         <div class="list-box">
+			<div class="tabs-box">
 				<title2 title="车船" />
+				<div class="tabs-list">
+					<div class="t-item" 
+					v-for="(item,index) in tabsList" 
+					:class="tabsListIndex==index?'tabs-active':''"
+					@click="handleTabsList(item)"
+					:key="item.id">{{item.text}}</div>
+				</div>
+			</div>
+          
           <el-input
             v-model="keyword"
             clearable
@@ -31,8 +41,11 @@
               :key="index"
               @click="handleItem(item, index)"
             >
-			<div class="child-box">
+			<div class="child-box new-item">
 				<p class="item__label">{{ item.licenseNumber }}</p>
+			
+			</div>
+			<div class="new-item">
 				<span  v-if="item.type == 0" class="label_img">
 					车
 				</span>
@@ -44,7 +57,7 @@
 				</span>
 			</div>
            
-              <div class="item__value"
+              <div class="item__value new-item"
                 >{{ item.speed }}km/h 
                 <img v-if="item.accStatus == 1" src="@/assets/images/engine.png" alt="" />
                 <img v-else src="@/assets/images/unengine.png" alt="" />
@@ -94,7 +107,17 @@ import PubSub from 'pubsub-js'
   import { useScenicStore } from '@/stores/scenic'
   const scenicStore = useScenicStore()
   const { map, marker, initMap, addMarker } = useMap()
-  
+  let tabsList = ref([
+	  {id:0,text:'所有',scenicSpotId:''},
+	  {id:1,text:'白帝城·瞿塘峡',scenicSpotId:'root000000'},
+	  {id:2,text:'三峡之巅',scenicSpotId:'三峡之巅'},
+	  {id:3,text:'直通车',scenicSpotId:'奉节县'}
+  ])
+  let tabsListIndex = ref(0)
+  const handleTabsList = (item)=>{
+	  tabsListIndex.value = item.id
+	  PubSub.publish('tabsListChange', item)
+  }
   let props = defineProps({
     scenicSpotId: {
       type: String,
@@ -410,6 +433,26 @@ import PubSub from 'pubsub-js'
 </script>
 
 <style lang="scss">
+	.tabs-box{
+		display:flex;
+		.tabs-list{
+			flex:1;
+			display:flex;
+			align-items: center;
+			justify-content: center;
+			.t-item{
+				margin:0 vw(10);
+				font-size:vw(18);
+				color:#fff;
+				padding:vh(5) 0;
+			}
+			.tabs-active{
+				color:#409eff;
+				border-bottom:1px solid #409eff;
+				
+			}
+		}
+	}
 	.child-box{
 		display:flex;
 		align-items: center;
@@ -589,11 +632,18 @@ import PubSub from 'pubsub-js'
     background-size: 100% 100%;
   }
   .list {
-    width: vw(400);
+    // width: vw(400);
     height: vh(790);
     padding-top: vh(10);
     overflow-y: auto;
     box-sizing: border-box;
+	justify-content: center;
+	.new-item{
+		flex:1;
+		text-align: center;
+		dispalay:flex;
+		justify-content: center;
+	}
     /* 滚动条整体样式 */
     &::-webkit-scrollbar {
       width: vw(10); /* 滚动条的宽度 */

src/views/vehicles/index.vue

@@ -60,6 +60,11 @@
 	     keyword.value = data
 	      sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: scenicSpotId.value }))
 	   })
+	   PubSub.subscribe('tabsListChange', (msg, data) => {
+	     console.log(data.scenicSpotId,22222222)
+	      sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: data.scenicSpotId }))
+	   })
+	   
 	})
 	onUnmounted(() => {