修复图片错位问题

src/components/layout/modules/header.vue

@@ -2,7 +2,7 @@
   <div class="sw-header">
     <a-space>
       <div style="width:216px">
-        <img height="30" src="@/assets/LOGO.svg" alt="">
+        <img style="margin: 0 !important;" height="30" src="@/assets/LOGO.svg" alt="">
       </div>
       <weather/>
     </a-space>

src/components/layout/modules/menu.vue

@@ -10,7 +10,7 @@
           </div>
           </template>
           <template #icon>
-            <img style="width: 14px;height: 14px;" :src="item.iconurl" />
+            <img style="width: 14px;height: 14px;margin: 0 !important;" :src="item.iconurl" />
           </template>
           <a-menu-item v-for="app in item.apps" :key="app.systemappid" @click="routeChange(app)">
             {{app.meta.title}}
@@ -18,7 +18,7 @@
         </a-sub-menu>
         <a-menu-item v-if="item.apps.length == 1" :key="item.systemmoduleid" @click="modClick(item)">
           <template #icon>
-            <img style="width: 14px;height: 14px;" :src="item.iconurl" />
+            <img style="width: 14px;height: 14px;margin: 0 !important;" :src="item.iconurl" />
           </template>
           <span @click="routeChange(item.apps[0])">{{item.apps[0].meta.title}}</span>
         </a-menu-item>

src/components/layout/modules/systemMod.vue

@@ -1,113 +1,118 @@
 <template>
   <div class="asides">
-    <div class="aside-item" :class="actSystem == 'control'?'onSystem':''" @click="router.push('/controlPanel')">
+    <div class="aside-item" :class="actSystem == 'control' ? 'onSystem' : ''" @click="router.push('/controlPanel')">
       <div class="menu-icon">
         <a-tooltip placement="right">
           <template #title>
             <span> 导航仓 </span>
           </template>
-            <img src="@/assets/daohangcang.svg" alt="">
+          <img style="margin: 0 !important;" src="@/assets/daohangcang.svg" alt="">
         </a-tooltip>
       </div>
     </div>
-    <div class="aside-item" :class="actSystem.systemid == item.systemid?'onSystem':''" v-for="item in system" :key="item.index"  @click="onSystemClick(item)">
+    <div class="aside-item" :class="actSystem.systemid == item.systemid ? 'onSystem' : ''" v-for="item in system"
+      :key="item.index" @click="onSystemClick(item)">
       <div class="menu-icon">
         <a-tooltip placement="right">
           <template #title>
             <span>{{ item.systemname }}</span>
           </template>
-            <img :src="item.iconurl_mainnav" alt="">
+          <img style="margin: 0 !important;" :src="item.iconurl_mainnav" alt="">
         </a-tooltip>
       </div>
     </div>
-    <i v-if="!menuShow" class="iconfont" @click="menuShow=true">&#xe683;</i>
+    <i v-if="!menuShow" class="iconfont" @click="menuShow = true">&#xe683;</i>
   </div>
 </template>
 
 <script setup>
 import Api from '@/api/api'
-import { defineComponent,ref, reactive,onMounted,watch} from 'vue';
+import { defineComponent, ref, reactive, onMounted, watch } from 'vue';
 import { useRouteTabsStore } from '@/stores/modules/Htabs'
 import { useAuthStore } from '@/stores/modules/auth'
 import { storeToRefs } from 'pinia'
 import { useRouter } from "vue-router"
-import { MenuFoldOutlined,MenuUnfoldOutlined} from '@ant-design/icons-vue'
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
 const router = useRouter()
 
 const store = useAuthStore()
 const rotTabs = useRouteTabsStore()
-let {historyRoutes,activeKey} = storeToRefs(rotTabs)
+let { historyRoutes, activeKey } = storeToRefs(rotTabs)
 
-let { system,mods,actSystem,menuShow,openKeys } = storeToRefs(store)
+let { system, mods, actSystem, menuShow, openKeys } = storeToRefs(store)
 
 const siteInfo = ref({})
 const collapsed = ref(true)
 
-const onSystemClick = (system)=>{
+const onSystemClick = (system) => {
   if (!menuShow.value) menuShow.value = true
   actSystem.value = system
   // mods.value = item.modules
   store.modulesData(system)
   historyRoutes.value = []
   openKeys.value.push(system.modules[0].apps[0].systemmoduleid)
-  router.push({path:system.modules[0].apps[0].path})
+  router.push({ path: system.modules[0].apps[0].path })
 }
 
-const siteData = async ()=>{
+const siteData = async () => {
   const res = await Api.requested({
-    id:20230608103602,
-    content:{}
+    id: 20230608103602,
+    content: {}
   })
   siteInfo.value = res.data
 }
-const onCollapsed = ()=>{
+const onCollapsed = () => {
   collapsed.value = !collapsed.value
 }
 
-onMounted (()=>{
+onMounted(() => {
   console.log(system.value);
   // store.systemData()
   siteData()
 })
 
-watch (()=>system.value,() => {
+watch(() => system.value, () => {
   actSystem.value = system.value[0]
 })
 </script>
-<style less scoped>
-.asides{
+<style scoped>
+.asides {
   position: relative;
-  width:58px;
+  width: 58px;
   /* background: #14317D; */
   transition: .1s ease-out all;
   box-shadow: -2px 0px 6px 1px #000B15;
   z-index: 999;
   /* border-right: 1px solid #f1f2f3; */
 }
+
 .aside-item {
   cursor: pointer;
   color: #333;
-  margin:0;
+  margin: 0;
   transition: .1s linear;
   overflow: hidden;
 }
-.logo-panel{
+
+.logo-panel {
   padding: 10px;
-  margin-bottom:10px ;
-  border-bottom:1px solid #f1f2f3;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #f1f2f3;
   background: #fff;
 }
-.logo-panel h4{
+
+.logo-panel h4 {
   color: #333;
-  margin:0 0 0 10px;
+  margin: 0 0 0 10px;
 }
 
-.flex{
+.flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.menu-icon{
+
+.menu-icon {
   display: flex;
   align-items: center;
   justify-content: space-evenly;
@@ -117,21 +122,25 @@ watch (()=>system.value,() => {
   text-align: center;
   line-height: 30px;
 }
+
 .menu-icon img {
   width: 100%;
   height: 100%;
   padding: 17px 0;
 }
-.collapsed{
+
+.collapsed {
   display: block;
   padding: 0px 20px;
 }
+
 .onSystem {
   background: rgba(255, 255, 255, .2);
   border-left: 2px solid rgba(22, 255, 246, 1);
 }
-.onSystem .uncollapsed{
- color:#333;
+
+.onSystem .uncollapsed {
+  color: #333;
 }
 
 .iconfont {
@@ -141,5 +150,4 @@ watch (()=>system.value,() => {
   z-index: 99999;
   cursor: pointer;
 }
-
 </style>

src/operation/moduleNormal/pressureControl/modules/devices.vue

@@ -1,53 +1,27 @@
 <template>
   <!--地图-->
-  <div
-    class="M-map"
-    :style="isShowMap ? 'display:inline-block' : 'display:none'"
-  >
+  <div class="M-map" :style="isShowMap ? 'display:inline-block' : 'display:none'">
     <div class="but-box">
-      <a-button type="primary" size="small" round @click="isShowMap = false"
-        >切换列表</a-button
-      >
+      <a-button type="primary" size="small" round @click="isShowMap = false">切换列表</a-button>
     </div>
-    <baidu-map
-      class="map"
-      ref="map"
-      :center="latlng"
-      :zoom="zoom"
-      :scroll-wheel-zoom="true"
-      @ready="mapReady"
-      @click="mapClick"
-      :mapStyle="mapConfig"
-    >
-      <bm-marker
-        v-for="item in list"
-        :position="{ lat: item.latitude, lng: item.longitude }"
-        @click="devicedClick($event, item)"
-        :icon="{ url: MarkerIcon, size: { width: 25, height: 25 } }"
-      >
-        <bm-label
-          :content="item.devicename"
-          :labelStyle="{ border: 'none', color: '#000' }"
-          :offset="{ width: -35, height: 16 }"
-        />
+    <baidu-map class="map" ref="map" :center="latlng" :zoom="zoom" :scroll-wheel-zoom="true" @ready="mapReady"
+      @click="mapClick" :mapStyle="mapConfig">
+      <bm-marker v-for="item in list" :position="{ lat: item.latitude, lng: item.longitude }"
+        @click="devicedClick($event, item)" :icon="{ url: MarkerIcon, size: { width: 25, height: 25 } }">
+        <bm-label :content="item.devicename" :labelStyle="{ border: 'none', color: '#000' }"
+          :offset="{ width: -35, height: 16 }" />
       </bm-marker>
     </baidu-map>
 
     <!--设备信息面板-->
-    <div
-      class="info-panel"
-      :style="infoPanel.baseInfo ? 'display:inline-block' : 'display:none'"
-    >
+    <div class="info-panel" :style="infoPanel.baseInfo ? 'display:inline-block' : 'display:none'">
       <div class="info-header">
         <div class="left">
           <span>设备信息</span>
         </div>
         <div class="right">
-          <customBtn
-            :btn="true"
-            :btn-options="[{ label: '控制面板' }]"
-            @clickBtn="deviceClick(infoPanel.baseInfo)"
-          ></customBtn>
+          <customBtn :btn="true" :btn-options="[{ label: '控制面板' }]" @clickBtn="deviceClick(infoPanel.baseInfo)">
+          </customBtn>
         </div>
       </div>
       <div class="map-deviced-info">
@@ -81,27 +55,14 @@
       </div>
     </div>
   </div>
-  <div
-    style="margin: 10rem 20rem 10rem 20rem"
-    :style="!isShowMap ? 'display:inline-block' : 'display:none'"
-  >
-    <a-button type="primary" size="small" round @click="isShowMap = true"
-      >切换地图</a-button
-    >
+  <div style="margin: 10rem 20rem 10rem 20rem" :style="!isShowMap ? 'display:inline-block' : 'display:none'">
+    <a-button type="primary" size="small" round @click="isShowMap = true">切换地图</a-button>
   </div>
-  <div
-    class="device-wrapper"
-    :style="!isShowMap ? 'display:inline-block' : 'display:none'"
-    v-load-directive="deviceLoad"
-  >
+  <div class="device-wrapper" :style="!isShowMap ? 'display:inline-block' : 'display:none'"
+    v-load-directive="deviceLoad">
     <div class="device-list" v-if="deviceList.length">
-      <ContentBox
-        v-for="(item, index) in deviceList"
-        :key="index"
-        bgColor="rgb(255,255,255,0.25)"
-        color="#16FFF6"
-        @click="deviceClick(item)"
-      >
+      <ContentBox v-for="(item, index) in deviceList" :key="index" bgColor="rgb(255,255,255,0.25)" color="#16FFF6"
+        @click="deviceClick(item)">
         <div style="height: 30rem"></div>
         <div class="siteinfo">
           <div class="siteinfo-wrapper">
@@ -109,13 +70,10 @@
             <span>{{ item.sitename || "暂无站点" }}</span>
           </div>
         </div>
-        <div
-          class="device-title"
-          :style="[
-            { '--bg': item.eventstatus ? 'red' : 'rgba(255, 164, 6)' },
-            { '--icon': item.status == '离线' ? '#cccccc' : '#27AD00' },
-          ]"
-        >
+        <div class="device-title" :style="[
+          { '--bg': item.eventstatus ? 'red' : 'rgba(255, 164, 6)' },
+          { '--icon': item.status == '离线' ? '#cccccc' : '#27AD00' },
+        ]">
           <i class="used"></i>
           <a-tooltip>
             <template #title>
@@ -151,15 +109,21 @@ const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
 const router = useRouter();
 let isShowMap = ref(true);
 
+import { useAuthStore } from '@/stores/modules/auth'
+import { storeToRefs } from 'pinia'
+const store = useAuthStore()
+let { system, current, mods, actSystem, menuShow, openKeys } = storeToRefs(store)
+
+
 let props = defineProps({
   systemname: String,
 });
 
 /* 地图 */
 let infoPanel = ref({
-    baseInfo: "",
-    dataInfo: "",
-  }),
+  baseInfo: "",
+  dataInfo: "",
+}),
   latlng = ref({
     lat: 39.9,
     lng: 116.39,
@@ -324,13 +288,24 @@ let getDeviceData = async () => {
 };
 
 let deviceClick = (data) => {
-  console.log("跳转", data);
+  let sys = system.value.filter(item => item.system == 'iot')
+  if (!sys.length) return message.warning('正在开发中...')
+  if (!sys[0].modules.length) return message.warning('正在开发中...')
+  if (!sys[0].modules[0].apps.length || sys[0].modules[0].apps[0].path == '') return message.warning('正在开发中...')
   router.push({
     path: "/" + (data.dashboardpath || data.prodnum || "baseDevice"),
     query: {
       id: data.w_deviceid,
     },
-  });
+  }).then(() => {
+    console.log("1233333", sys[0])
+    let app = sys[0].modules.find(v => v.systemmodule == "devicemag").apps.find(v => v.name == "bs_equipmentmag")
+    current.value = [app.systemappid]
+    actSystem.value = sys[0]
+    openKeys.value.push(app.systemmoduleid)
+    menuShow.value = true
+    store.modulesData(sys[0])
+  })
 };
 
 onMounted(async () => {
@@ -344,12 +319,14 @@ onMounted(async () => {
   --color1: #16fff6;
   --color2: rgba(255, 164, 6);
 }
+
 .empty-box {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 20px;
 }
+
 /* 地图 */
 .M-map {
   width: 100%;
@@ -357,6 +334,7 @@ onMounted(async () => {
   position: relative;
   padding: 12rem;
 }
+
 .M-map .map {
   width: 100%;
   height: 100%;
@@ -383,34 +361,41 @@ onMounted(async () => {
   color: #ffffff;
   font-size: 14rem;
 }
+
 .info-panel .info-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
 .info-panel .map-deviced-info {
   background: rgba(255, 255, 255, 0.2);
   border-radius: 5rem;
   padding: 10rem;
   margin: 10rem 0;
 }
+
 .info-panel .data-info {
   background: rgba(255, 255, 255, 0.2);
   border-radius: 5rem;
   padding: 10rem;
   margin: 10rem 0;
 }
+
 /* 列表 */
 .device-wrapper {
   display: flex;
   justify-content: center;
   overflow-y: scroll;
   height: calc(100% - 180rem);
-  scrollbar-width: none; /* firefox */
-  -ms-overflow-style: none; /* IE 10+ */
+  scrollbar-width: none;
+  /* firefox */
+  -ms-overflow-style: none;
+  /* IE 10+ */
   margin-top: 10rem;
   width: 100%;
 }
+
 .device-wrapper .device-list {
   display: flex;
   flex-wrap: wrap;
@@ -432,18 +417,21 @@ onMounted(async () => {
   background: var(--icon);
   margin-right: 10rem;
 }
+
 .device-wrapper .device-list .device-title {
   display: flex;
   align-items: center;
   height: 44rem;
   font-size: 14rem;
 }
+
 .device-wrapper .device-list .device-title,
 img,
 .status {
   margin-bottom: 10rem;
   font-size: 14rem;
 }
+
 .device-wrapper .device-list .device-title span {
   display: inline-block;
   width: 140rem;
@@ -454,6 +442,7 @@ img,
   -webkit-box-orient: vertical;
   word-break: break-all;
 }
+
 .device-wrapper .device-list .content_box {
   display: flex;
   flex-direction: column;
@@ -465,21 +454,26 @@ img,
   width: auto !important;
   flex: 1;
 }
+
 .device-wrapper .device-list .content_box:hover {
   --color: red !important;
 }
+
 .device-wrapper .device-list .content_box:hover img {
   transition: all 0.2s;
   transform: scale(1.2);
 }
+
 .device-wrapper .device-list .i {
   border-radius: 20rem;
   background: red;
 }
+
 .device-wrapper .device-list img {
   width: 100%;
   max-height: 70rem;
 }
+
 .device-wrapper .device-list .status {
   color: var(--color2);
 }
@@ -490,6 +484,7 @@ img,
   top: 0;
   width: 100%;
 }
+
 .siteinfo .siteinfo-wrapper {
   display: flex;
   align-items: center;
@@ -497,6 +492,7 @@ img,
   width: 100%;
   background: #40a9ff;
 }
+
 .siteinfo span {
   margin-left: 10px;
   white-space: nowrap;