模型导入页面适配处理、页面百分比处理

src/assets/icons/svg/failure.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1745548725996" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6312" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><path d="M512 981.333333L315.733333 785.066667l247.466667-247.466667c25.6-8.533333 42.666667-25.6 51.2-51.2L853.333333 247.466667c34.133333 59.733333 51.2 119.466667 51.2 187.733333 0 102.4-42.666667 204.8-110.933333 273.066667L512 981.333333zM196.266667 665.6C145.066667 597.333333 119.466667 512 119.466667 435.2c0-102.4 42.666667-204.8 110.933333-273.066667C307.2 85.333333 409.6 42.666667 512 42.666667c85.333333 0 162.133333 25.6 230.4 76.8L537.6 324.266667H512c-68.266667 0-119.466667 51.2-119.466667 119.466666v25.6L196.266667 665.6zM196.266667 844.8l-59.733334-68.266667 682.666667-682.666666 59.733333 59.733333-682.666666 691.2z" p-id="6313"></path></svg>

src/components/layout_/index.vue

@@ -11,7 +11,6 @@
                 <slot name="right"></slot>
             </div>
         </div>
-        
     </div>
 </template>
 
@@ -26,7 +25,7 @@ import { ref, reactive } from 'vue';
     &_mains{
         flex: 1;
         margin-top: 46px;
-        margin-bottom:76px;
+        // margin-bottom:76px;
         position: relative;
         display: flex;
         &_item {
@@ -39,9 +38,11 @@ import { ref, reactive } from 'vue';
 
         &_left{
             left: 0;
+            z-index:2;
         }
         &_right{
             right: 0;
+            z-index:2;
         }
         &_content {
             flex: 1;

src/layout/components/AppMain.vue

@@ -3,25 +3,29 @@
     <router-view v-slot="{ Component, route }">
       <transition name="fade-transform" mode="out-in">
         <keep-alive :include="tagsViewStore.cachedViews">
-          <component v-if="!route.meta.link" :is="Component" :key="route.path"/>
+          <component v-if="!route.meta.link" :is="Component" :key="route.path" />
         </keep-alive>
       </transition>
     </router-view>
     <iframe-toggle />
+    <!-- <iframe id="myIframe" :src="srcUrl" style="width: 100%;height: 100%;" frameborder="0"
+      @mousemove="handleScroll"></iframe> -->
   </section>
 </template>
 
 <script setup>
 import iframeToggle from "./IframeToggle/index"
 import useTagsViewStore from '@/store/modules/tagsView'
-
 const route = useRoute()
 const tagsViewStore = useTagsViewStore()
-
+const srcUrl = 'http://192.168.11.59:9191/ViewRun?T_ViewID=41rwFKnP9R7DAQXGYkz2S8Vcba3qTUdp'
 onMounted(() => {
   addIframe()
 })
 
+function handleScroll() {
+  console.log('Iframe scrolled!');
+}
 watch((route) => {
   addIframe()
 })
@@ -36,18 +40,28 @@ function addIframe() {
 <style lang="scss" scoped>
 .app-main {
   height: 100%;
-  width: 100%;
+  // width: 100%;
   position: relative;
   overflow: hidden;
 }
 
+#myIframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  user-select: none;
+}
+
 .hasTagsView {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
     min-height: calc(100vh - 84px);
   }
 
-  .fixed-header + .app-main {
+  .fixed-header+.app-main {
     padding-top: 84px;
   }
 }
@@ -75,4 +89,3 @@ function addIframe() {
   border-radius: 3px;
 }
 </style>
-

src/layout/components/Sidebar/Logo.vue

@@ -1,7 +1,17 @@
 <template>
   <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
     <div class="box_weather">
-      天气
+      <el-image style="height: 45px;" :src="getImageUrl(imgUrl)" fit="cover">
+        <template #error>
+          <div class="image-slot">
+            <svg-icon icon-class="failure" className="failure_icon" color="rgb(248, 152.1, 152.1)" />
+          </div>
+        </template>
+      </el-image>
+      <div class="weather_title">
+        <span>{{ weathers }} {{ temperatures }}℃</span>
+        <span>{{ currentTime }} {{ hourMinuteSecond }}</span>
+      </div>
     </div>
     <router-link key="expand" class="sidebar-logo-link" to="/">
       <div class="sidebar-logo">
@@ -11,6 +21,12 @@
       </div>
     </router-link>
     <div class="avatar-container">
+      <div class="box_padlock center_in">
+        <el-icon size="20" color="rgb(134, 25, 65)">
+          <SwitchButton />
+        </el-icon>
+        <div class="box_down"></div>
+      </div>
       <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <!-- <img :src="userStore.avatar" class="user-avatar" /> -->
@@ -33,24 +49,61 @@
 </template>
 
 <script setup>
+import axios from 'axios';
 import { ElMessageBox } from 'element-plus'
 import useSettingsStore from '@/store/modules/settings'
 import variables from '@/assets/styles/variables.module.scss'
 import useUserStore from '@/store/modules/user'
-
+import { weatherList } from "./mockData";
 defineProps({
   collapse: {
     type: Boolean,
     required: true
   }
 })
-
+const imgUrl = ref('')
+const weathers = ref('')
+const temperatures = ref('')
 const userStore = useUserStore()
 const name = userStore.name
 const title = import.meta.env.VITE_APP_TITLE;
 const settingsStore = useSettingsStore();
 const sideTheme = computed(() => settingsStore.sideTheme);
-
+const getImageUrl = (name) => {
+  return new URL(`${name}`, import.meta.url).href
+}
+const timer = ref(null)
+const hourMinuteSecond = ref('')
+const currentTime = ref('')
+timer.value = setInterval(() => {
+  hourMinuteSecond.value = formatTime(new Date(), 'hh:mm:ss')
+  currentTime.value = formatTime(new Date(), 'yyyy-MM-dd')
+}, 1000);
+function formatTime(str, format) {
+  let time = new Date(str)
+  let formatTime = {
+    'y+': '0' + time.getFullYear(),
+    'M+': '0' + (time.getMonth() + 1),
+    'd+': '0' + time.getDate(),
+    'h+': '0' + time.getHours(),
+    'm+': '0' + time.getMinutes(),
+    's+': '0' + time.getSeconds()
+  }
+  let result = format || 'yyyy-MM-dd hh:mm:ss'
+  for (let i in formatTime) {
+    let regexp = new RegExp('(' + i + ')', 'g')
+    let replaceInfoObj = regexp.exec(result)
+    if (replaceInfoObj) {
+      let replaceInfoArr = Array.from(replaceInfoObj)
+      result = result.replace(
+        regexp,
+        formatTime[i].substring(formatTime[i].length - replaceInfoArr[0].length),
+        formatTime[i].length
+      )
+    }
+  }
+  return result
+}
 // 获取Logo背景色
 const getLogoBackground = computed(() => {
   if (settingsStore.isDark) {
@@ -90,11 +143,70 @@ function logout() {
     })
   }).catch(() => { });
 }
+async function getIPCity() {
+  try {
+    // 使用高德API的IP定位服务获取IP省市信息
+    const ipResponse = await axios.get(
+      'https://restapi.amap.com/v3/ip?key=6bd1c2303f2ca454975738f8911a27ce'
+    );
+    if (ipResponse.data && ipResponse.data.rectangle) {
+      const parts = ipResponse.data.rectangle.split(";");
+      getAddressByLatLng(parts);//回调下方的函数
+    }
+  } catch (error) {
+    console.error('IP定位失败', error);
+  }
+}
+
+const getAddressByLatLng = async (ip) => {
+  try {
+    // 使用高德API的地理编码服务将经纬度转换成地址
+    const lat = ip;
+    const lng = ip;
+    const latlng = `${lat},${lng}`;//将经度纬度拼接起来传给api地址
+    const geoResponse = await axios.get(
+      `https://restapi.amap.com/v3/geocode/regeo?key=6bd1c2303f2ca454975738f8911a27ce&location=${latlng}`
+    );
+    console.log('geoResponse是', geoResponse.data);
+    getWeather(geoResponse.data.regeocode.addressComponent)
+  } catch (error) {
+    console.error('地理编码失败', error);
+  }
+}
+const getWeather = async (params) => {
+  let city = params.adcode
+  let apiKey = '6bd1c2303f2ca454975738f8911a27ce'
+  try {
+    const response = await axios.get(
+      `https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=${apiKey}`
+    );
+    if (response.status == 200) {
+      let weatherArr = response.data.lives[0]
+      weathers.value = weatherArr.weather
+      temperatures.value = weatherArr.temperature
+      weatherList.forEach(el => {
+        if (el.name === weatherArr.weather) {
+          imgUrl.value = el.url
+        }
+      });
+    }
+  } catch (error) {
+    console.error('请求失败:', error);
+  }
+}
+onMounted(() => {
+  getIPCity()
+})
 </script>
 
 <style lang="scss" scoped>
 @import '@/assets/styles/variables.module.scss';
 
+.failure_icon {
+  width: 30px;
+  height: 30px;
+}
+
 .sidebarLogoFade-enter-active {
   transition: opacity 1.5s;
 }
@@ -167,11 +279,35 @@ function logout() {
 }
 
 .box_weather {
+  display: flex;
+  align-items: center;
+  color: #fff;
   margin-left: 20px;
   font-size: 18px;
 }
 
+.weather_title {
+  display: flex;
+  flex-direction: column;
+  margin-left: 10px;
+  align-items: flex-start;
+
+  span {
+    margin: 2px 0px;
+    font-size: 14px;
+  }
+}
+
+.image-slot {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
 .avatar-container {
+  display: flex;
+  align-items: center;
   margin-right: 20px;
 
   .avatar-wrapper {
@@ -195,8 +331,30 @@ function logout() {
     }
 
     span {
+      user-select: none;
       color: #fff;
     }
   }
 }
+
+.box_padlock {
+  position: relative;
+  cursor: pointer;
+  margin-right: 15px;
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  border: 1px solid rgb(3, 94, 138);
+  background-color: rgb(11, 39, 90);
+}
+
+.box_down {
+  position: absolute;
+  top: 44px;
+  width: 100px;
+  height: 100px;
+  border-radius: 6px;
+  border: 1px solid rgb(3, 94, 138);
+  background-color: rgb(11, 39, 90);
+}
 </style>

src/layout/components/Sidebar/mockData.js

@@ -0,0 +1,70 @@
+export const weatherList = [
+    { id: 1, name: '晴', url: '../../../assets/weather/weather01.png' },
+    { id: 2, name: '少云', url: '../../../assets/weather/weather02.png' },
+    { id: 3, name: '晴间多云', url: '../../../assets/weather/weather03.png' },
+    { id: 4, name: '多云', url: '../../../assets/weather/weather04.png' },
+    { id: 5, name: '阴', url: '../../../assets/weather/weather05.png' },
+    { id: 6, name: '有风', url: '../../../assets/weather/weather06.png' },
+    { id: 7, name: '平静', url: '../../../assets/weather/weather07.png' },
+    { id: 8, name: '微风', url: '../../../assets/weather/weather08.png' },
+    { id: 9, name: '和风', url: '../../../assets/weather/weather09.png' },
+    { id: 10, name: '清风', url: '../../../assets/weather/weather10.png' },
+    { id: 11, name: '强风/劲风', url: '../../../assets/weather/weather11.png' },
+    { id: 12, name: '疾风', url: '../../../assets/weather/weather12.png' },
+    { id: 13, name: '大风', url: '../../../assets/weather/weather13.png' },
+    { id: 14, name: '烈风', url: '../../../assets/weather/weather14.png' },
+    { id: 15, name: '风暴', url: '../../../assets/weather/weather15.png' },
+    { id: 16, name: '狂爆风', url: '../../../assets/weather/weather16.png' },
+    { id: 17, name: '飓风', url: '../../../assets/weather/weather17.png' },
+    { id: 18, name: '热带风暴', url: '../../../assets/weather/weather18.png' },
+    { id: 19, name: '霾', url: '../../../assets/weather/weather19.png' },
+    { id: 20, name: '中度霾', url: '../../../assets/weather/weather20.png' },
+    { id: 21, name: '重度霾', url: '../../../assets/weather/weather21.png' },
+    { id: 22, name: '严重霾', url: '../../../assets/weather/weather22.png' },
+    { id: 23, name: '阵雨', url: '../../../assets/weather/weather23.png' },
+    { id: 24, name: '雷阵雨', url: '../../../assets/weather/weather24.png' },
+    { id: 25, name: '雷阵雨并伴有冰雹', url: '../../../assets/weather/weather25.png' },
+    { id: 26, name: '小雨', url: '../../../assets/weather/weather26.png' },
+    { id: 27, name: '中雨', url: '../../../assets/weather/weather27.png' },
+    { id: 28, name: '大雨', url: '../../../assets/weather/weather28.png' },
+    { id: 29, name: '暴雨', url: '../../../assets/weather/weather29.png' },
+    { id: 30, name: '大暴雨', url: '../../../assets/weather/weather30.png' },
+    { id: 31, name: '特大暴雨', url: '../../../assets/weather/weather31.png' },
+    { id: 32, name: '强阵雨', url: '../../../assets/weather/weather32.png' },
+    { id: 33, name: '强雷阵雨', url: '../../../assets/weather/weather33.png' },
+    { id: 34, name: '极端降雨', url: '../../../assets/weather/weather34.png' },
+    { id: 35, name: '毛毛雨/细雨', url: '../../../assets/weather/weather35.png' },
+    { id: 36, name: '雨', url: '../../../assets/weather/weather36.png' },
+    { id: 37, name: '小雨-中雨', url: '../../../assets/weather/weather37.png' },
+    { id: 38, name: '中雨-大雨', url: '../../../assets/weather/weather38.png' },
+    { id: 39, name: '大雨-暴雨', url: '../../../assets/weather/weather39.png' },
+    { id: 40, name: '暴雨-大暴雨', url: '../../../assets/weather/weather40.png' },
+    { id: 41, name: '大暴雨-特大暴雨', url: '../../../assets/weather/weather41.png' },
+    { id: 42, name: '雨雪天气', url: '../../../assets/weather/weather42.png' },
+    { id: 43, name: '雨夹雪', url: '../../../assets/weather/weather43.png' },
+    { id: 44, name: '阵雨夹雪', url: '../../../assets/weather/weather44.png' },
+    { id: 45, name: '冻雨', url: '../../../assets/weather/weather45.png' },
+    { id: 46, name: '雪', url: '../../../assets/weather/weather46.png' },
+    { id: 47, name: '阵雪', url: '../../../assets/weather/weather47.png' },
+    { id: 48, name: '小雪', url: '../../../assets/weather/weather48.png' },
+    { id: 49, name: '中雪', url: '../../../assets/weather/weather49.png' },
+    { id: 50, name: '大雪', url: '../../../assets/weather/weather50.png' },
+    { id: 51, name: '暴雪', url: '../../../assets/weather/weather51.png' },
+    { id: 52, name: '小雪-中雪', url: '../../../assets/weather/weather52.png' },
+    { id: 53, name: '中雪-大雪', url: '../../../assets/weather/weather53.png' },
+    { id: 54, name: '大雪-暴雪', url: '../../../assets/weather/weather54.png' },
+    { id: 55, name: '浮尘', url: '../../../assets/weather/weather55.png' },
+    { id: 56, name: '扬沙', url: '../../../assets/weather/weather56.png' },
+    { id: 57, name: '沙尘暴', url: '../../../assets/weather/weather57.png' },
+    { id: 58, name: '强沙尘暴', url: '../../../assets/weather/weather58.png' },
+    { id: 59, name: '龙卷风', url: '../../../assets/weather/weather59.png' },
+    { id: 60, name: '雾', url: '../../../assets/weather/weather60.png' },
+    { id: 61, name: '浓雾', url: '../../../assets/weather/weather61.png' },
+    { id: 62, name: '强浓雾', url: '../../../assets/weather/weather62.png' },
+    { id: 63, name: '轻雾', url: '../../../assets/weather/weather63.png' },
+    { id: 64, name: '大雾', url: '../../../assets/weather/weather64.png' },
+    { id: 65, name: '特强浓雾', url: '../../../assets/weather/weather65.png' },
+    { id: 66, name: '热', url: '../../../assets/weather/weather66.png' },
+    { id: 67, name: '冷', url: '../../../assets/weather/weather67.png' },
+    { id: 68, name: '未知', url: '../../../assets/weather/weather68.png' }
+]

src/layout/index.vue

@@ -16,10 +16,8 @@ import Sidebar from './components/Sidebar/index.vue'
 import { AppMain, Navbar, Settings, TagsView } from './components'
 import Logo from './components/Sidebar/Logo'
 import defaultSettings from '@/settings'
-
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
-
 const settingsStore = useSettingsStore()
 const theme = computed(() => settingsStore.theme);
 const sideTheme = computed(() => settingsStore.sideTheme);
@@ -71,6 +69,7 @@ function setLayout() {
     height: 100%;
     width: 100%;
     overflow: hidden;
+    z-index: -2;
     background: radial-gradient(at 50% 50%, rgb(29, 52, 94) 1%, rgb(3, 22, 46) 60%);
 }
 
@@ -82,6 +81,7 @@ function setLayout() {
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    z-index: -2;
     background-image:
         repeating-linear-gradient(35deg, rgba(13, 28, 61, .5), rgba(13, 28, 61, .5) 1px, transparent 1px, transparent 70px),
         repeating-linear-gradient(-35deg, rgba(13, 28, 61, .5), rgba(13, 28, 61, .5) 1px, transparent 1px, transparent 70px),

src/views/index.vue

@@ -1,11 +1,18 @@
 <template>
   <div class="home">
-    <leftDesk></leftDesk>
-    <reightDesk></reightDesk>
+    <layout>
+      <template #left>
+        <leftDesk></leftDesk>
+      </template>
+      <template #right>
+        <reightDesk></reightDesk>
+      </template>
+    </layout>
   </div>
 </template>
 
 <script setup>
+import layout from "@/components/layout_/index.vue";
 import leftDesk from './index/leftDesk.vue'
 import reightDesk from './index/reightDesk.vue'
 </script>
@@ -16,7 +23,6 @@ import reightDesk from './index/reightDesk.vue'
   width: 100%;
   // height: 100vh;
   height: 100%;
-  padding-top: 45px;
   overflow: hidden;
 }
 

src/views/index/leftDesk.vue

@@ -166,10 +166,11 @@ import HeadlineTag from '@/components/HeadlineTag'
 .box_home_left {
     position: absolute;
     left: 0;
-    width: 25%;
-    height: calc(100% - 45px);
+    width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
+    z-index: 2,
 }
 
 .flex_home {
@@ -187,8 +188,8 @@ import HeadlineTag from '@/components/HeadlineTag'
     margin-left: 30px;
     position: relative;
     flex: none;
-    width: 200px;
-    height: 150px;
+    width: 45%;
+    height: 100%;
     background: url("@/assets/images/brightbase.png");
     background-size: 80% 80%;
     background-position: center center;
@@ -205,9 +206,9 @@ import HeadlineTag from '@/components/HeadlineTag'
 }
 
 .arch_icon {
-    width: 90px;
-    height: 90px;
-    margin-bottom: 20px;
+    width: 45%;
+    height: 45%;
+    margin-bottom: 5%;
 }
 
 .right_content {
@@ -323,10 +324,10 @@ import HeadlineTag from '@/components/HeadlineTag'
 
 .loader {
     position: absolute;
-    width: 120px;
-    height: 120px;
+    width: 116px;
+    height: 116px;
     border-radius: 50%;
-    animation: animate 2s linear infinite;
+    animation: animate 3s linear infinite;
 }
 
 @keyframes animate {
@@ -347,22 +348,20 @@ import HeadlineTag from '@/components/HeadlineTag'
     left: 0;
     width: 50%;
     height: 100%;
-    background: linear-gradient(to top, transparent, transparent, rgba(17, 40, 72, .3), rgba(87, 138, 182, 1));
+    background-image: linear-gradient(to top, transparent 21%, rgba(17, 40, 72, .3) 52%, rgba(87, 138, 182, 1) 90%, rgba(204, 241, 246, 1) 100%);
     background-size: 100px 180px;
     background-repeat: no-repeat;
     border-top-left-radius: 100px;
     border-bottom-left-radius: 100px;
 }
 
-.loader2,
-.loader4 {
-    animation-delay: -1s;
-    filter: hue-rotate(290deg);
+.loader2 {
+    animation-delay: -1.5s;
 }
 
 .loader span {
     position: absolute;
-    inset: 10px;
+    inset: 7px;
     background: #000;
     border-radius: 50%;
     z-index: 1;
@@ -377,11 +376,12 @@ import HeadlineTag from '@/components/HeadlineTag'
 }
 
 .energy_box {
-    width: 50%;
+    width: calc(50% - 20px);
     height: 30px;
     display: flex;
     align-items: center;
     font-size: 16px;
+    margin-left: 20px;
     padding-left: 25px;
     padding-bottom: 8px;
     clip-path: polygon(0 0, 25px 100%, calc(100% - 0px) 100%, 100% 0);
@@ -428,6 +428,7 @@ import HeadlineTag from '@/components/HeadlineTag'
 }
 
 .box_subentry {
+    width: 60%;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -435,7 +436,8 @@ import HeadlineTag from '@/components/HeadlineTag'
 }
 
 .subentry_item {
-    width: 200px;
+    padding-right: 10px;
+    width: calc(100% - 10px);
     padding-bottom: 5px;
     border-bottom: 1px solid rgb(46, 58, 80);
 }

src/views/index/reightDesk.vue

@@ -64,7 +64,7 @@
         </div>
         <div class="flex_home">
             <HeadlineTag type="right" value="停车系统"></HeadlineTag>
-            <div class="box_arch park_box">
+            <div class="box_arch">
                 <div class="box_vehicle">
                     <div class="color-green-line"></div>
                     <span>占用</span>
@@ -95,8 +95,8 @@ import LineChart from './LineChart.vue'
 .box_home_reight {
     position: absolute;
     right: 0;
-    width: 25%;
-    height: calc(100% - 45px);
+    width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
 }
@@ -115,8 +115,8 @@ import LineChart from './LineChart.vue'
 .image_tubbiness {
     position: relative;
     flex: none;
-    width: 200px;
-    height: 190px;
+    width: 45%;
+    height: 100%;
     background: url("@/assets/images/tubbiness.png");
     background-size: 80% 80%;
     background-position: center center;
@@ -124,7 +124,7 @@ import LineChart from './LineChart.vue'
 
     .work_num {
         position: absolute;
-        top: 60px;
+        top: 30%;
         left: 0;
         right: 0;
         text-align: center;
@@ -139,7 +139,7 @@ import LineChart from './LineChart.vue'
 
     .work_title {
         position: absolute;
-        bottom: 36px;
+        bottom: 20%;
         left: 0px;
         right: 0px;
         text-align: center;
@@ -175,9 +175,11 @@ import LineChart from './LineChart.vue'
 
 .appeal_box {
     width: 50%;
-    height: 60px;
+    // height: 60px;
+    height: 50%;
     display: flex;
     align-items: center;
+    justify-content: center;
     font-size: 16px;
 }
 
@@ -200,8 +202,8 @@ import LineChart from './LineChart.vue'
 .image_architecture {
     position: relative;
     flex: none;
-    width: 60px;
-    height: 100%;
+    width: 40%;
+    height: 60%;
     background: url("@/assets/images/brightbase.png");
     background-size: 100% 100%;
     background-position: center center;
@@ -218,20 +220,17 @@ import LineChart from './LineChart.vue'
 }
 
 .arch_icon {
-    width: 40px;
-    height: 40px;
+    width: 80%;
+    height: 80%;
     margin-bottom: 10px;
 }
 
-.park_box {
-    // flex-direction: column;
-}
-
 .box_vehicle {
     flex: 1;
     width: 100%;
     display: flex;
     align-items: center;
+    justify-content: center;
 }
 
 .color-green-line {

src/views/system/entranceguard/index.vue

@@ -1,43 +1,50 @@
 <template>
     <div class="guard_flow">
-        <div class="left_guard_flow">
-            <div style="height: 500px;">
-                <HeadlineTag value="门禁设备"></HeadlineTag>
-                <div class="box_arch">
-                    <equipment></equipment>
+        <layout>
+            <template #left>
+                <div class="left_guard_flow">
+                    <div style="height: 500px;">
+                        <HeadlineTag value="门禁设备"></HeadlineTag>
+                        <div class="box_arch">
+                            <equipment></equipment>
+                        </div>
+                    </div>
+                    <div class="flex_spection">
+                        <HeadlineTag value="非法侵入统计"></HeadlineTag>
+                        <div class="box_arch">
+                            <inbreak></inbreak>
+                        </div>
+                    </div>
                 </div>
-            </div>
-            <div class="flex_spection">
-                <HeadlineTag value="非法侵入统计"></HeadlineTag>
-                <div class="box_arch">
-                    <inbreak></inbreak>
+            </template>
+            <template #right>
+                <div class="right_guard_flow">
+                    <div class="flex_spection">
+                        <HeadlineTag type="right" value="今日通行数据概览"></HeadlineTag>
+                        <div class="box_arch">
+                            <passable></passable>
+                        </div>
+                    </div>
+                    <div class="flex_spection">
+                        <HeadlineTag type="right" value="出入记录统计"></HeadlineTag>
+                        <div class="box_arch">
+                            <alleyway></alleyway>
+                        </div>
+                    </div>
+                    <div class="flex_spection">
+                        <HeadlineTag type="right" value="实时告警与通知"></HeadlineTag>
+                        <div class="box_arch">
+                            <inform></inform>
+                        </div>
+                    </div>
                 </div>
-            </div>
-        </div>
-        <div class="right_guard_flow">
-            <div class="flex_spection">
-                <HeadlineTag type="right" value="今日通行数据概览"></HeadlineTag>
-                <div class="box_arch">
-                    <passable></passable>
-                </div>
-            </div>
-            <div class="flex_spection">
-                <HeadlineTag type="right" value="出入记录统计"></HeadlineTag>
-                <div class="box_arch">
-                    <alleyway></alleyway>
-                </div>
-            </div>
-            <div class="flex_spection">
-                <HeadlineTag type="right" value="实时告警与通知"></HeadlineTag>
-                <div class="box_arch">
-                    <inform></inform>
-                </div>
-            </div>
-        </div>
+            </template>
+        </layout>
     </div>
 </template>
 
 <script setup>
+import layout from "@/components/layout_/index.vue";
 import HeadlineTag from '@/components/HeadlineTag'
 import alleyway from './alleyway'
 import equipment from './equipment'
@@ -50,7 +57,6 @@ import inform from './inform'
 .guard_flow {
     position: relative;
     width: 100%;
-    padding-top: 45px;
     height: 100%;
     overflow: hidden;
 }
@@ -58,8 +64,8 @@ import inform from './inform'
 .left_guard_flow {
     position: absolute;
     left: 0;
-    width: 25%;
-    height: calc(100% - 45px);
+    width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
 }
@@ -67,8 +73,8 @@ import inform from './inform'
 .right_guard_flow {
     position: absolute;
     right: 0;
-    width: 25%;
-    height: calc(100% - 45px);
+    width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
 }

src/views/system/inspection/index.vue

@@ -1,61 +1,68 @@
 <template>
   <div class="inspection">
-    <div class="left_spection">
-      <HeadlineTag value="巡检点列表"></HeadlineTag>
-      <div class="box_arch_point">
-        <div class="point_box" style="margin-top: 10px;">
-          <el-input v-model="input" placeholder="按巡查点名称搜索" />
-        </div>
-        <div style="height: calc(100% - 160px);">
-          <Empty></Empty>
-        </div>
-        <div class="center_in">
-          <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
-            layout="total, prev, pager, next" @pagination="getList" />
-        </div>
-      </div>
-    </div>
-    <div class="right_spection">
-      <div class="operation_spection">
-        <HeadlineTag type="right" value="运行统计"></HeadlineTag>
-        <div class="box_arch">
-          <div class="image_tubbiness">
-            <div class="work_num">3714<span>个</span></div>
-            <div class="work_title">今日总数</div>
-          </div>
-          <div class="right_content">
-            <div class="work_week">
-              <div class="color_line_xj" style="background-color: rgb(21, 213, 21);"></div>
-              <span>巡检点数:</span>20
+    <layout>
+      <template #left>
+        <div class="left_spection">
+          <HeadlineTag value="巡检点列表"></HeadlineTag>
+          <div class="box_arch_point">
+            <div class="point_box" style="margin-top: 10px;margin-left: 15px;">
+              <el-input v-model="input" placeholder="按巡查点名称搜索" />
             </div>
-            <div class="work_week">
-              <div class="color_line_xj" style="background-color: rgb(196, 127, 19);"></div>
-              <span>巡检计划:</span>10
+            <div style="height: calc(100% - 160px);">
+              <Empty></Empty>
             </div>
-            <div class="work_week">
-              <div class="color_line_xj" style="background-color: rgb(195, 56, 56);"></div>
-              <span>巡检线路:</span>15
+            <div class="center_in">
+              <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
+                layout="total, prev, pager, next" @pagination="getList" />
             </div>
           </div>
         </div>
-      </div>
-      <div class="flex_spection">
-        <HeadlineTag type="right" value="巡检统计"></HeadlineTag>
-        <div class="box_arch">
-          <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
-        </div>
-      </div>
-      <div class="flex_spection">
-        <HeadlineTag type="right" value="实时巡检"></HeadlineTag>
-        <div class="box_arch">
-          <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
+      </template>
+      <template #right>
+        <div class="right_spection">
+          <div class="operation_spection">
+            <HeadlineTag type="right" value="运行统计"></HeadlineTag>
+            <div class="box_arch">
+              <div class="image_tubbiness">
+                <div class="work_num">3714<span>个</span></div>
+                <div class="work_title">今日总数</div>
+              </div>
+              <div class="right_content">
+                <div class="work_week">
+                  <div class="color_line_xj" style="background-color: rgb(21, 213, 21);"></div>
+                  <span>巡检点数:</span>20
+                </div>
+                <div class="work_week">
+                  <div class="color_line_xj" style="background-color: rgb(196, 127, 19);"></div>
+                  <span>巡检计划:</span>10
+                </div>
+                <div class="work_week">
+                  <div class="color_line_xj" style="background-color: rgb(195, 56, 56);"></div>
+                  <span>巡检线路:</span>15
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex_spection">
+            <HeadlineTag type="right" value="巡检统计"></HeadlineTag>
+            <div class="box_arch">
+              <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
+            </div>
+          </div>
+          <div class="flex_spection">
+            <HeadlineTag type="right" value="实时巡检"></HeadlineTag>
+            <div class="box_arch">
+              <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      </template>
+    </layout>
   </div>
 </template>
 
 <script setup>
+import layout from "@/components/layout_/index.vue";
 import HeadlineTag from '@/components/HeadlineTag'
 import Empty from '@/components/Empty'
 import * as echarts from 'echarts'
@@ -202,7 +209,6 @@ window.addEventListener('resize', () => {
 .inspection {
   position: relative;
   width: 100%;
-  padding-top: 45px;
   height: 100%;
   overflow: hidden;
 }
@@ -210,18 +216,17 @@ window.addEventListener('resize', () => {
 .left_spection {
   position: absolute;
   left: 0;
-  width: 25%;
-  height: calc(100% - 45px);
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  padding-left: 10px;
 }
 
 .right_spection {
   position: absolute;
   right: 0;
-  width: 25%;
-  height: calc(100% - 45px);
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
 }

src/views/system/intruderalarm/index.vue

@@ -1,69 +1,77 @@
 <template>
     <div class="inspection">
-        <div class="left_spection">
-            <div class="facility_entry">
-                <HeadlineTag value="按设备统计"></HeadlineTag>
-                <div class="box_arch">
-                    <div ref="chartFacility" style="width: 100%;height: 100%;"></div>
-                </div>
-            </div>
-            <div class="flex_spection">
-                <HeadlineTag value="报警列表"></HeadlineTag>
-                <div class="box_arch_point">
-                    <div class="point_box" style="margin-top: 10px;">
-                        <el-input v-model="input" placeholder="按报警名称搜索" />
-                    </div>
-                    <div style="height: calc(100% - 160px);">
-                        <Empty></Empty>
+        <layout>
+            <template #left>
+                <div class="left_spection">
+                    <div class="facility_entry">
+                        <HeadlineTag value="按设备统计"></HeadlineTag>
+                        <div class="box_arch">
+                            <div ref="chartFacility" style="width: 100%;height: 100%;"></div>
+                        </div>
                     </div>
-                    <div class="center_in">
-                        <pagination :total="total" v-model:page="queryParams.pageNum"
-                            v-model:limit="queryParams.pageSize" layout="total, prev, pager, next"
-                            @pagination="getList" />
+                    <div class="flex_spection">
+                        <HeadlineTag value="报警列表"></HeadlineTag>
+                        <div class="box_arch_point">
+                            <div class="point_box" style="margin-top: 10px;margin-left: 15px;">
+                                <el-input v-model="input" placeholder="按报警名称搜索" />
+                            </div>
+                            <div style="height: calc(100% - 160px);">
+                                <Empty></Empty>
+                            </div>
+                            <div class="center_in">
+                                <pagination :total="total" v-model:page="queryParams.pageNum"
+                                    v-model:limit="queryParams.pageSize" layout="total, prev, pager, next"
+                                    @pagination="getList" />
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </div>
-        <div class="right_spection">
-            <div class="operation_spection">
-                <HeadlineTag type="right" value="24小时告警数量趋势"></HeadlineTag>
-                <div class="entry" style="margin-right: 15px;">
-                    <div class="entry-box">
-                        <div class="entry-box-item">
-                            <div class="item-center-line"></div>
-                            <div class="item-center-pie"></div>
+            </template>
+            <template #right>
+                <div class="right_spection">
+                    <div class="operation_spection">
+                        <HeadlineTag type="right" value="24小时告警数量趋势"></HeadlineTag>
+                        <div class="entry" style="margin-right: 15px;">
+                            <div class="entry-box">
+                                <div class="entry-box-item">
+                                    <div class="item-center-line"></div>
+                                    <div class="item-center-pie"></div>
+                                </div>
+                            </div>
+                            <div class="left_water">
+                                <span class="water_span_title">75</span>
+                                <div class="tile_fx">事件风险</div>
+                            </div>
+                            <div class="right_water">
+                                <span class="water_span_title">83</span>
+                                <div class="tile_fx">告警风险</div>
+                            </div>
+                            <div class="box_water_drop">
+                                <div ref="chartWater" style="width: 140px;height: 140px;"></div>
+                            </div>
                         </div>
                     </div>
-                    <div class="left_water">
-                        <span class="water_span_title">75</span>
-                        <div class="tile_fx">事件风险</div>
-                    </div>
-                    <div class="right_water">
-                        <span class="water_span_title">83</span>
-                        <div class="tile_fx">告警风险</div>
+                    <div class="flex_spection">
+                        <HeadlineTag type="right" value="24小时告警数量趋势"></HeadlineTag>
+                        <div class="box_arch">
+                            <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
+                        </div>
                     </div>
-                    <div class="box_water_drop">
-                        <div ref="chartWater" style="width: 140px;height: 140px;"></div>
+                    <div class="flex_spection">
+                        <HeadlineTag type="right" value="实时巡检"></HeadlineTag>
+                        <div class="box_arch">
+                            <dv-scroll-board :config="config"
+                                style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="flex_spection">
-                <HeadlineTag type="right" value="24小时告警数量趋势"></HeadlineTag>
-                <div class="box_arch">
-                    <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
-                </div>
-            </div>
-            <div class="flex_spection">
-                <HeadlineTag type="right" value="实时巡检"></HeadlineTag>
-                <div class="box_arch">
-                    <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
-                </div>
-            </div>
-        </div>
+            </template>
+        </layout>
     </div>
 </template>
 
 <script setup>
+import layout from "@/components/layout_/index.vue";
 import HeadlineTag from '@/components/HeadlineTag'
 import Empty from '@/components/Empty'
 import * as echarts from 'echarts'
@@ -584,7 +592,6 @@ window.addEventListener('resize', () => {
 .inspection {
     position: relative;
     width: 100%;
-    padding-top: 45px;
     height: 100%;
     overflow: hidden;
 }
@@ -592,22 +599,19 @@ window.addEventListener('resize', () => {
 .left_spection {
     position: absolute;
     left: 0;
-    width: 25%;
-    height: calc(100% - 45px);
-    // height: 100%;
+    width: 100%;
     display: flex;
     flex-direction: column;
-    padding-left: 10px;
+    height: 100%;
 }
 
 .right_spection {
     position: absolute;
     right: 0;
-    width: 25%;
-    height: calc(100% - 45px);
-    // height: 100%;
+    width: 100%;
     display: flex;
     flex-direction: column;
+    height: 100%;
 }
 
 .box_arch_point {

src/views/system/passageway/index.vue

@@ -1,86 +1,93 @@
 <template>
   <div class="inspection">
-    <div class="left_spection">
-      <HeadlineTag value="出入口列表"></HeadlineTag>
-      <div class="box_arch_point">
-        <div class="point_box" style="margin-top: 10px;">
-          <el-input v-model="input" placeholder="按出入口名称搜索" />
-        </div>
-        <div style="height: calc(100% - 160px);">
-          <Empty></Empty>
-        </div>
-        <div class="center_in">
-          <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
-            layout="total, prev, pager, next" @pagination="getList" />
+    <layout>
+      <template #left>
+        <div class="left_spection">
+          <HeadlineTag value="出入口列表"></HeadlineTag>
+          <div class="box_arch_point">
+            <div class="point_box" style="margin-top: 10px;margin-left: 15px;">
+              <el-input v-model="input" placeholder="按出入口名称搜索" />
+            </div>
+            <div style="height: calc(100% - 160px);">
+              <Empty></Empty>
+            </div>
+            <div class="center_in">
+              <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
+                layout="total, prev, pager, next" @pagination="getList" />
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-    <div class="right_spection">
-      <div class="operation_spection">
-        <HeadlineTag type="right" value="监控设备"></HeadlineTag>
-        <div class="box_arch" style="margin-right: 15px;margin-top: 10px;height: calc(100% - 55px);">
-          <dv-border-box-1>
-            <div class="box_monitoring">
-              <div class="flex_spection box_tion_zx">
-                <div class="line_blue">
-                  <div class="blue_dot"></div>
-                </div>
-                <div class="monit_title">在线</div>
-                <span class="monit_num">83</span>
-              </div>
-              <div class="camera">
-                <div class="entry-box">
-                  <div class="entry-box-item">
-                    <div class="item-center-line"></div>
-                    <div class="item-center-pie"></div>
+      </template>
+      <template #right>
+        <div class="right_spection">
+          <div class="operation_spection">
+            <HeadlineTag type="right" value="监控设备"></HeadlineTag>
+            <div class="box_arch" style="margin-right: 15px;margin-top: 10px;height: calc(100% - 55px);">
+              <dv-border-box-1>
+                <div class="box_monitoring">
+                  <div class="flex_spection box_tion_zx">
+                    <div class="line_blue">
+                      <div class="blue_dot"></div>
+                    </div>
+                    <div class="monit_title">在线</div>
+                    <span class="monit_num">83</span>
+                  </div>
+                  <div class="camera">
+                    <div class="entry-box">
+                      <div class="entry-box-item">
+                        <div class="item-center-line"></div>
+                        <div class="item-center-pie"></div>
+                      </div>
+                    </div>
+                    <div class="img_camera">
+                      <svg class="camera_box_icon" aria-hidden="true">
+                        <defs>
+                          <linearGradient id="myGradientil" x1="0%" y1="100%" x2="0%" y2="0%">
+                            <stop offset="0%" stop-color="rgb(46, 139, 221)" />
+                            <stop offset="100%" stop-color="rgb(4, 223, 247)" />
+                          </linearGradient>
+                        </defs>
+                        <use xlink:href="#icon-camera" fill="url('#myGradientil')" />
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="flex_spection box_tion_lx">
+                    <div class="line_green">
+                      <div class="green_dot"></div>
+                    </div>
+                    <div class="monit_title">离线</div>
+                    <span class="monit_num">23</span>
                   </div>
                 </div>
-                <div class="img_camera">
-                  <svg class="camera_box_icon" aria-hidden="true">
-                    <defs>
-                      <linearGradient id="myGradientil" x1="0%" y1="100%" x2="0%" y2="0%">
-                        <stop offset="0%" stop-color="rgb(46, 139, 221)" />
-                        <stop offset="100%" stop-color="rgb(4, 223, 247)" />
-                      </linearGradient>
-                    </defs>
-                    <use xlink:href="#icon-camera" fill="url('#myGradientil')" />
-                  </svg>
-                </div>
-              </div>
-              <div class="flex_spection box_tion_lx">
-                <div class="line_green">
-                  <div class="green_dot"></div>
-                </div>
-                <div class="monit_title">离线</div>
-                <span class="monit_num">23</span>
-              </div>
+              </dv-border-box-1>
             </div>
-          </dv-border-box-1>
-        </div>
-      </div>
-      <!-- <div class="flex_spection">
+          </div>
+          <!-- <div class="flex_spection">
         <HeadlineTag type="right" value="实时巡检"></HeadlineTag>
         <div class="box_arch">
           <dv-scroll-board :config="config" style="width:97%;height:calc(100% - 10px);margin-top: 10px;" />
         </div>
       </div> -->
-      <div class="flex_spection">
-        <HeadlineTag type="right" value="设备排名"></HeadlineTag>
-        <div class="box_arch">
-          <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
-        </div>
-      </div>
-      <div class="flex_spection">
-        <HeadlineTag type="right" value="出入人员统计"></HeadlineTag>
-        <div class="box_arch">
-          <Personnel></Personnel>
+          <div class="flex_spection">
+            <HeadlineTag type="right" value="设备排名"></HeadlineTag>
+            <div class="box_arch">
+              <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
+            </div>
+          </div>
+          <div class="flex_spection">
+            <HeadlineTag type="right" value="出入人员统计"></HeadlineTag>
+            <div class="box_arch">
+              <Personnel></Personnel>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      </template>
+    </layout>
   </div>
 </template>
 
 <script setup>
+import layout from "@/components/layout_/index.vue";
 import HeadlineTag from '@/components/HeadlineTag'
 import Personnel from './Personnel.vue'
 import Empty from '@/components/Empty'
@@ -253,7 +260,6 @@ window.addEventListener('resize', () => {
 .inspection {
   position: relative;
   width: 100%;
-  padding-top: 45px;
   height: 100%;
   overflow: hidden;
 }
@@ -261,18 +267,17 @@ window.addEventListener('resize', () => {
 .left_spection {
   position: absolute;
   left: 0;
-  width: 25%;
-  height: calc(100% - 45px);
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  padding-left: 10px;
 }
 
 .right_spection {
   position: absolute;
   right: 0;
-  width: 25%;
-  height: calc(100% - 45px);
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
 }

src/views/system/passengerFlow/earlyWarning.vue

@@ -61,6 +61,7 @@ onMounted(() => {
     height: 100%;
     display: flex;
     align-items: center;
+    padding-left: 20px;
 }
 
 .left_warning {

src/views/system/passengerFlow/index.vue

@@ -1,49 +1,56 @@
 <template>
   <div class="passenger_flow">
-    <div class="left_passenger_flow">
-      <div class="flex_spection">
-        <HeadlineTag value="客流监控"></HeadlineTag>
-        <div class="box_arch">
-          <monitoring></monitoring>
+    <layout>
+      <template #left>
+        <div class="left_passenger_flow">
+          <div class="flex_spection">
+            <HeadlineTag value="客流监控"></HeadlineTag>
+            <div class="box_arch">
+              <monitoring></monitoring>
+            </div>
+          </div>
+          <div class="flex_spection">
+            <HeadlineTag value="安全监控"></HeadlineTag>
+            <div class="box_arch">
+              <security></security>
+            </div>
+          </div>
+          <div class="flex_spection">
+            <HeadlineTag value="实时预警信息"></HeadlineTag>
+            <div class="box_arch">
+              <earlyWarning></earlyWarning>
+            </div>
+          </div>
         </div>
-      </div>
-      <div class="flex_spection">
-        <HeadlineTag value="安全监控"></HeadlineTag>
-        <div class="box_arch">
-          <security></security>
+      </template>
+      <template #right>
+        <div class="right_passenger_flow">
+          <div class="flex_spection">
+            <HeadlineTag type="right" value="指标区客流排行榜"></HeadlineTag>
+            <div class="box_arch">
+              <district></district>
+            </div>
+          </div>
+          <div class="flex_spection">
+            <HeadlineTag type="right" value="客群分析统计"></HeadlineTag>
+            <div class="box_arch">
+              <div ref="chartFlow" style="width: 100%;height: 100%;" />
+            </div>
+          </div>
+          <div class="flex_spection">
+            <HeadlineTag type="right" value="安全事件列表"></HeadlineTag>
+            <div class="box_arch">
+              <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
+            </div>
+          </div>
         </div>
-      </div>
-      <div class="flex_spection">
-        <HeadlineTag value="实时预警信息"></HeadlineTag>
-        <div class="box_arch">
-          <earlyWarning></earlyWarning>
-        </div>
-      </div>
-    </div>
-    <div class="right_passenger_flow">
-      <div class="flex_spection">
-        <HeadlineTag type="right" value="指标区客流排行榜"></HeadlineTag>
-        <div class="box_arch">
-          <district></district>
-        </div>
-      </div>
-      <div class="flex_spection">
-        <HeadlineTag type="right" value="客群分析统计"></HeadlineTag>
-        <div class="box_arch">
-          <div ref="chartFlow" style="width: 100%;height: 100%;" />
-        </div>
-      </div>
-      <div class="flex_spection">
-        <HeadlineTag type="right" value="安全事件列表"></HeadlineTag>
-        <div class="box_arch">
-          <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
-        </div>
-      </div>
-    </div>
+      </template>
+    </layout>
   </div>
 </template>
 
 <script setup>
+import layout from "@/components/layout_/index.vue";
 import HeadlineTag from '@/components/HeadlineTag'
 import monitoring from './monitoring'
 import earlyWarning from './earlyWarning'
@@ -222,7 +229,6 @@ window.addEventListener('resize', () => {
 .passenger_flow {
   position: relative;
   width: 100%;
-  padding-top: 45px;
   height: 100%;
   overflow: hidden;
 }
@@ -230,18 +236,17 @@ window.addEventListener('resize', () => {
 .left_passenger_flow {
   position: absolute;
   left: 0;
-  width: 25%;
-  height: calc(100% - 45px);
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  padding-left: 10px;
 }
 
 .right_passenger_flow {
   position: absolute;
   right: 0;
-  width: 25%;
-  height: calc(100% - 45px);
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
 }

src/views/system/passengerFlow/monitoring.vue

@@ -22,7 +22,7 @@ const initAccess = () => {
         icon: 'circle', //图例形状
         padding: 0,
         top: 13,
-        left: 10,
+        left: '4%',
         itemWidth: 10, //小圆点宽度
         itemHeight: 10, // 小圆点高度
         itemGap: 10, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
@@ -98,7 +98,7 @@ const initAccess = () => {
         legend,
         grid: {
             top: '15%',
-            left: '3%',
+            left: '4%',
             right: '4%',
             bottom: '5%',
             containLabel: true,

src/views/system/receptiondesk/index.vue

@@ -1,49 +1,57 @@
 <template>
   <div class="tiondesk">
-    <div class="left_tiondesk">
-      <div class="flex_spection">
-        <HeadlineTag value="会议议程"></HeadlineTag>
-        <div class="box_arch">
-          <conference></conference>
-        </div>
-      </div>
-      <div class="flex_spection">
-        <HeadlineTag value="学员反馈"></HeadlineTag>
-        <div class="box_arch">
-          <gambit></gambit>
-        </div>
-      </div>
-      <div class="flex_spection">
-        <HeadlineTag value="会议话题列表"></HeadlineTag>
-        <div class="box_arch">
-          <feedback></feedback>
-        </div>
-      </div>
-    </div>
-    <div class="right_tiondesk">
-      <div class="flex_spection">
-        <HeadlineTag type="right" value="会议话题"></HeadlineTag>
-        <div class="box_arch">
-          <wordcloud></wordcloud>
-        </div>
-      </div>
-      <div class="flex_spection">
-        <HeadlineTag type="right" value="过去30天会议"></HeadlineTag>
-        <div class="box_arch">
-          <formerly></formerly>
+
+    <layout>
+      <template #left>
+        <div class="left_tiondesk">
+          <div class="flex_spection">
+            <HeadlineTag value="会议议程"></HeadlineTag>
+            <div class="box_arch">
+              <conference></conference>
+            </div>
+          </div>
+          <div class="flex_spection">
+            <HeadlineTag value="学员反馈"></HeadlineTag>
+            <div class="box_arch">
+              <gambit></gambit>
+            </div>
+          </div>
+          <div class="flex_spection">
+            <HeadlineTag value="会议话题列表"></HeadlineTag>
+            <div class="box_arch">
+              <feedback></feedback>
+            </div>
+          </div>
         </div>
-      </div>
-      <div class="flex_spection">
-        <HeadlineTag type="right" value="课程满意度评分条形图"></HeadlineTag>
-        <div class="box_arch">
-          <satisfaction></satisfaction>
+      </template>
+      <template #right>
+        <div class="right_tiondesk">
+          <div class="flex_spection">
+            <HeadlineTag type="right" value="会议话题"></HeadlineTag>
+            <div class="box_arch">
+              <wordcloud></wordcloud>
+            </div>
+          </div>
+          <div class="flex_spection">
+            <HeadlineTag type="right" value="过去30天会议"></HeadlineTag>
+            <div class="box_arch">
+              <formerly></formerly>
+            </div>
+          </div>
+          <div class="flex_spection">
+            <HeadlineTag type="right" value="课程满意度评分条形图"></HeadlineTag>
+            <div class="box_arch">
+              <satisfaction></satisfaction>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      </template>
+    </layout>
   </div>
 </template>
 
 <script setup>
+import layout from "@/components/layout_/index.vue";
 import HeadlineTag from '@/components/HeadlineTag'
 import conference from './conference'
 import feedback from './feedback'
@@ -57,7 +65,6 @@ import satisfaction from './satisfaction'
 .tiondesk {
   position: relative;
   width: 100%;
-  padding-top: 45px;
   height: 100%;
   overflow: hidden;
 }
@@ -65,18 +72,17 @@ import satisfaction from './satisfaction'
 .left_tiondesk {
   position: absolute;
   left: 0;
-  width: 25%;
-  height: calc(100% - 45px);
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  padding-left: 10px;
 }
 
 .right_tiondesk {
   position: absolute;
   right: 0;
-  width: 25%;
-  height: calc(100% - 45px);
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
 }

src/views/system/visitor/index.vue

@@ -1,111 +1,118 @@
 <template>
   <div class="visitor">
-    <div class="left_visitor">
-      <HeadlineTag value="访客列表"></HeadlineTag>
-      <div class="box_arch_point">
-        <div class="point_box" style="margin-top: 10px;">
-          <el-input v-model="input" placeholder="按访客名称搜索" />
-        </div>
-        <div style="height: calc(100% - 160px);">
-          <Empty></Empty>
-        </div>
-        <div class="center_in">
-          <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
-            layout="total, prev, pager, next" @pagination="getList" />
-        </div>
-      </div>
-    </div>
-    <div class="right_visitor">
-      <div class="garden_box">
-        <HeadlineTag type="right" value="园区基本信息"></HeadlineTag>
-        <div class="card_visitor_star">
-          <div class="item_visitor_top">
-            <div class="circle_itor center_in">
-              <svg class="visitor_star" aria-hidden="true">
-                <defs>
-                  <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
-                    <stop offset="0%" stop-color="rgb(20, 188, 244)" />
-                    <stop offset="100%" stop-color="#ffffff" />
-                  </linearGradient>
-                </defs>
-                <use xlink:href="#icon-user" fill="url('#myGradient')" />
-              </svg>
+    <layout>
+      <template #left>
+        <div class="left_visitor">
+          <HeadlineTag value="访客列表"></HeadlineTag>
+          <div class="box_arch_point">
+            <div class="point_box" style="margin-top: 10px;margin-left: 15px;">
+              <el-input v-model="input" placeholder="按访客名称搜索" />
             </div>
-            <div class="title_box_itor">
-              <div class="title_itor_13">总规划建筑面积</div>
-              <div class="title_itor_18">142万</div>
+            <div style="height: calc(100% - 160px);">
+              <Empty></Empty>
             </div>
-          </div>
-          <div class="item_visitor_top">
-            <div class="circle_itor center_in">
-              <svg class="visitor_star" aria-hidden="true">
-                <defs>
-                  <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
-                    <stop offset="0%" stop-color="rgb(20, 188, 244)" />
-                    <stop offset="100%" stop-color="#ffffff" />
-                  </linearGradient>
-                </defs>
-                <use xlink:href="#icon-user" fill="url('#myGradient')" />
-              </svg>
-            </div>
-            <div class="title_box_itor">
-              <div class="title_itor_13">总规划建筑面积</div>
-              <div class="title_itor_18">142万</div>
+            <div class="center_in">
+              <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
+                layout="total, prev, pager, next" @pagination="getList" />
             </div>
           </div>
-          <div class="item_visitor_top">
-            <div class="circle_itor center_in">
-              <svg class="visitor_star" aria-hidden="true">
-                <defs>
-                  <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
-                    <stop offset="0%" stop-color="rgb(20, 188, 244)" />
-                    <stop offset="100%" stop-color="#ffffff" />
-                  </linearGradient>
-                </defs>
-                <use xlink:href="#icon-user" fill="url('#myGradient')" />
-              </svg>
-            </div>
-            <div class="title_box_itor">
-              <div class="title_itor_13">总规划建筑面积</div>
-              <div class="title_itor_18">142万</div>
+        </div>
+      </template>
+      <template #right>
+        <div class="right_visitor">
+          <div class="garden_box">
+            <HeadlineTag type="right" value="园区基本信息"></HeadlineTag>
+            <div class="card_visitor_star">
+              <div class="item_visitor_top">
+                <div class="circle_itor center_in">
+                  <svg class="visitor_star" aria-hidden="true">
+                    <defs>
+                      <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                        <stop offset="0%" stop-color="rgb(20, 188, 244)" />
+                        <stop offset="100%" stop-color="#ffffff" />
+                      </linearGradient>
+                    </defs>
+                    <use xlink:href="#icon-user" fill="url('#myGradient')" />
+                  </svg>
+                </div>
+                <div class="title_box_itor">
+                  <div class="title_itor_13">总规划建筑面积</div>
+                  <div class="title_itor_18">142万</div>
+                </div>
+              </div>
+              <div class="item_visitor_top">
+                <div class="circle_itor center_in">
+                  <svg class="visitor_star" aria-hidden="true">
+                    <defs>
+                      <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                        <stop offset="0%" stop-color="rgb(20, 188, 244)" />
+                        <stop offset="100%" stop-color="#ffffff" />
+                      </linearGradient>
+                    </defs>
+                    <use xlink:href="#icon-user" fill="url('#myGradient')" />
+                  </svg>
+                </div>
+                <div class="title_box_itor">
+                  <div class="title_itor_13">总规划建筑面积</div>
+                  <div class="title_itor_18">142万</div>
+                </div>
+              </div>
+              <div class="item_visitor_top">
+                <div class="circle_itor center_in">
+                  <svg class="visitor_star" aria-hidden="true">
+                    <defs>
+                      <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                        <stop offset="0%" stop-color="rgb(20, 188, 244)" />
+                        <stop offset="100%" stop-color="#ffffff" />
+                      </linearGradient>
+                    </defs>
+                    <use xlink:href="#icon-user" fill="url('#myGradient')" />
+                  </svg>
+                </div>
+                <div class="title_box_itor">
+                  <div class="title_itor_13">总规划建筑面积</div>
+                  <div class="title_itor_18">142万</div>
+                </div>
+              </div>
+              <div class="item_visitor_top">
+                <div class="circle_itor center_in">
+                  <svg class="visitor_star" aria-hidden="true">
+                    <defs>
+                      <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                        <stop offset="0%" stop-color="rgb(20, 188, 244)" />
+                        <stop offset="100%" stop-color="#ffffff" />
+                      </linearGradient>
+                    </defs>
+                    <use xlink:href="#icon-user" fill="url('#myGradient')" />
+                  </svg>
+                </div>
+                <div class="title_box_itor">
+                  <div class="title_itor_13">总规划建筑面积</div>
+                  <div class="title_itor_18">142万</div>
+                </div>
+              </div>
             </div>
           </div>
-          <div class="item_visitor_top">
-            <div class="circle_itor center_in">
-              <svg class="visitor_star" aria-hidden="true">
-                <defs>
-                  <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
-                    <stop offset="0%" stop-color="rgb(20, 188, 244)" />
-                    <stop offset="100%" stop-color="#ffffff" />
-                  </linearGradient>
-                </defs>
-                <use xlink:href="#icon-user" fill="url('#myGradient')" />
-              </svg>
+          <div style="height: 300px;">
+            <HeadlineTag type="right" value="访客统计"></HeadlineTag>
+            <div class="box_arch">
+              <starView></starView>
             </div>
-            <div class="title_box_itor">
-              <div class="title_itor_13">总规划建筑面积</div>
-              <div class="title_itor_18">142万</div>
+          </div>
+          <div class="flex_spection">
+            <HeadlineTag type="right" value="外地人员分配"></HeadlineTag>
+            <div class="box_arch">
+              <div ref="chartDom" style="width: 100%;height: 100%;" />
             </div>
           </div>
         </div>
-      </div>
-      <div style="height: 300px;">
-        <HeadlineTag type="right" value="访客统计"></HeadlineTag>
-        <div class="box_arch">
-          <starView></starView>
-        </div>
-      </div>
-      <div class="flex_spection">
-        <HeadlineTag type="right" value="外地人员分配"></HeadlineTag>
-        <div class="box_arch">
-          <div ref="chartDom" style="width: 100%;height: 100%;" />
-        </div>
-      </div>
-    </div>
+      </template>
+    </layout>
   </div>
 </template>
 
 <script setup>
+import layout from "@/components/layout_/index.vue";
 import HeadlineTag from '@/components/HeadlineTag'
 import Empty from '@/components/Empty'
 import starView from './starView'
@@ -320,7 +327,6 @@ window.addEventListener('resize', () => {
 .visitor {
   position: relative;
   width: 100%;
-  padding-top: 45px;
   height: 100%;
   overflow: hidden;
 }
@@ -328,18 +334,17 @@ window.addEventListener('resize', () => {
 .left_visitor {
   position: absolute;
   left: 0;
-  width: 25%;
-  height: calc(100% - 45px);
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  padding-left: 10px;
 }
 
 .right_visitor {
   position: absolute;
   right: 0;
-  width: 25%;
-  height: calc(100% - 45px);
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
 }