修复图标错位bug

src/components/layout/modules/header.vue

@@ -2,9 +2,9 @@
   <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/>
+      <weather />
     </a-space>
     <div>
       <a-space>
@@ -12,52 +12,57 @@
           <template #title>
             <span>操作指南</span>
           </template>
-          <a target="_blank" href="https://www.ibpchina.com.cn/helpdoc2.html#31"><QuestionCircleOutlined :style="{marginRight:'16px',color:'#fff',fontSize:'16px',cursor: 'pointer'}"/></a>
+          <a target="_blank" href="https://www.ibpchina.com.cn/helpdoc2.html#31">
+            <QuestionCircleOutlined :style="{ marginRight: '16px', color: '#fff', fontSize: '16px', cursor: 'pointer' }" />
+          </a>
         </a-tooltip>
         <a-tooltip placement="bottom">
           <template #title>
             <span>消息中心</span>
           </template>
-          <BellOutlined :style="{marginRight:'24px',color:'#fff',fontSize:'16px',cursor: 'pointer'}" @click="clickMessage"/>
+          <BellOutlined :style="{ marginRight: '24px', color: '#fff', fontSize: '16px', cursor: 'pointer' }"
+            @click="clickMessage" />
         </a-tooltip>
         <a-dropdown class="dropdown-link">
-            <a class="ant-dropdown-link" @click.prevent>
-              <a-avatar size="small">
-                <template #icon><UserOutlined /></template>
-              </a-avatar>
-              {{nowAccount.name}}-{{nowAccount.sitename}}
-              <DownOutlined />
-            </a>
-            <template #overlay>
-              <a-menu>
-                <a-menu-item>
-                  <UserOutlined />
-                  <a class="color-red" @click="clickAccount">&nbsp;个人中心</a>
-                </a-menu-item>
-                <a-menu-divider />
-                <a-menu-item v-for="item in accountList" :key="item.index">
-                  <a @click="accountItemClick(item,false)">{{item.sitename + '-' + item.name}}</a>
-                </a-menu-item>
-                <a-menu-divider />
-                <a-menu-item>
-                  <LogoutOutlined />
-                  <a class="color-red" @click="loginOut">&nbsp;退出登录</a>
-                </a-menu-item>
-              </a-menu>
-            </template>
+          <a class="ant-dropdown-link" @click.prevent>
+            <a-avatar size="small">
+              <template #icon>
+                <UserOutlined />
+              </template>
+            </a-avatar>
+            {{ nowAccount.name }}-{{ nowAccount.sitename }}
+            <DownOutlined />
+          </a>
+          <template #overlay>
+            <a-menu>
+              <a-menu-item>
+                <UserOutlined />
+                <a class="color-red" @click="clickAccount">&nbsp;个人中心</a>
+              </a-menu-item>
+              <a-menu-divider />
+              <a-menu-item v-for="item in accountList" :key="item.index">
+                <a @click="accountItemClick(item, false)">{{ item.sitename + '-' + item.name }}</a>
+              </a-menu-item>
+              <a-menu-divider />
+              <a-menu-item>
+                <LogoutOutlined />
+                <a class="color-red" @click="loginOut">&nbsp;退出登录</a>
+              </a-menu-item>
+            </a-menu>
+          </template>
         </a-dropdown>
       </a-space>
-      </div>
-      <accountInfo ref="account" v-if="accountShow" @close="accountShow=false"></accountInfo>
-      <SwMessage ref="messageEl" v-if="messageShow" @close="messageShow=false"></SwMessage>
+    </div>
+    <accountInfo ref="account" v-if="accountShow" @close="accountShow = false"></accountInfo>
+    <SwMessage ref="messageEl" v-if="messageShow" @close="messageShow = false"></SwMessage>
   </div>
 </template>
 
 <script setup>
 import accountInfo from './accountInfo/index.vue'
 import SwMessage from './message/index.vue'
-import {ref,createVNode, nextTick} from 'vue'
-import { UserOutlined, DownOutlined,BellOutlined,QuestionCircleOutlined, LogoutOutlined,ExclamationCircleOutlined} from '@ant-design/icons-vue';
+import { ref, createVNode, nextTick } from 'vue'
+import { UserOutlined, DownOutlined, BellOutlined, QuestionCircleOutlined, LogoutOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { useAuthStore } from '@/stores/modules/auth'
 import { useRouteTabsStore } from '@/stores/modules/Htabs'
 import { storeToRefs } from 'pinia'
@@ -71,20 +76,20 @@ let messageShow = ref(false)
 const store = useAuthStore()
 const account = ref()
 const messageEl = ref()
-let { accountList,nowAccount,isRefresh } = storeToRefs(store)
+let { accountList, nowAccount, isRefresh } = storeToRefs(store)
 
 const rotTabs = useRouteTabsStore()
-let {historyRoutes} = storeToRefs(rotTabs)
-const accountItemClick = (account,bool)=>{
-  store.defaultAccount(account,()=>{
+let { historyRoutes } = storeToRefs(rotTabs)
+const accountItemClick = (account, bool) => {
+  store.defaultAccount(account, () => {
     store.reloadPage()
     // historyRoutes.value = []
   })
-  if (!bool){
+  if (!bool) {
     if (router.currentRoute.value.meta.isDetail) {
       router.go(-1)
     }
-  }else {
+  } else {
     router.go(0)
   }
 }
@@ -102,31 +107,32 @@ let clickMessage = () => {
   })
 }
 
-const loginOut = ()=>{
+const loginOut = () => {
   Modal.confirm({
     title: '注意',
     icon: createVNode(ExclamationCircleOutlined),
     content: '确定退出当前账号吗?',
     okText: '确认',
     cancelText: '取消',
-    onOk () {
+    onOk() {
       historyRoutes.value = []
       Api.loginout({})
-      router.push({path:'/'})
+      router.push({ path: '/' })
     }
   });
 }
 </script>
 <style scoped>
-.sw-header{
+.sw-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 56px;
-  padding:0 32px 0 16px;
+  padding: 0 32px 0 16px;
 }
-.ant-dropdown-link{
-  color:#fff;
+
+.ant-dropdown-link {
+  color: #fff;
 
 }
 </style>

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/system/IOT/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>
@@ -147,6 +105,11 @@ import { Empty } from "ant-design-vue";
 import mapConfig from "../../IoTdashboard/modules/mapConfig.js";
 import customBtn from "../../controlPanel/modules/customBtn.vue";
 import MarkerIcon from "../../../../assets/map/marker1.svg";
+import { useAuthStore } from '@/stores/modules/auth'
+import { storeToRefs } from 'pinia'
+const store = useAuthStore()
+let { system, current, mods, actSystem, menuShow, openKeys } = storeToRefs(store)
+
 const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
 const router = useRouter();
 let isShowMap = ref(true);
@@ -157,9 +120,9 @@ let props = defineProps({
 
 /* 地图 */
 let infoPanel = ref({
-    baseInfo: "",
-    dataInfo: "",
-  }),
+  baseInfo: "",
+  dataInfo: "",
+}),
   latlng = ref({
     lat: 39.9,
     lng: 116.39,
@@ -323,12 +286,23 @@ let getDeviceData = async () => {
 };
 
 let deviceClick = (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(() => {
+    let app = sys[0].modules.find(v => v.systemmodule == "devicemag").apps.find(v => v.name == "equipmentmag")
+    current.value = [app.systemappid]
+    actSystem.value = sys[0]
+    openKeys.value.push(app.systemmoduleid)
+    menuShow.value = true
+    store.modulesData(sys[0])
+  })
 };
 
 onMounted(async () => {
@@ -342,12 +316,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%;
@@ -355,6 +331,7 @@ onMounted(async () => {
   position: relative;
   padding: 12rem;
 }
+
 .M-map .map {
   width: 100%;
   height: 100%;
@@ -381,34 +358,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;
@@ -430,18 +414,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;
@@ -452,6 +439,7 @@ img,
   -webkit-box-orient: vertical;
   word-break: break-all;
 }
+
 .device-wrapper .device-list .content_box {
   display: flex;
   flex-direction: column;
@@ -463,21 +451,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);
 }
@@ -488,6 +481,7 @@ img,
   top: 0;
   width: 100%;
 }
+
 .siteinfo .siteinfo-wrapper {
   display: flex;
   align-items: center;
@@ -495,6 +489,7 @@ img,
   width: 100%;
   background: #40a9ff;
 }
+
 .siteinfo span {
   margin-left: 10px;
   white-space: nowrap;