修改西电大屏

yanzhu-bigscreen/src/components/header.vue

@@ -3,55 +3,175 @@
     <el-row>
       <el-col :span="8" style="margin-left: 20px; width: calc(33.33% - 20px)">
         <div class="head-title-tab">
-          <div :class="nav == 1 ? 'head-nav active' : 'head-nav'" @click="doNav(1)" v-if="1 == 2">项目概况</div>
+          <div
-          <div :class="nav == 2 ? 'head-nav active' : 'head-nav'" @click="doNav(2)" v-if="1 == 2">项目详情</div>
+            :class="nav == 1 ? 'head-nav active' : 'head-nav'"
-          <div :class="nav == 7 ? 'head-nav active' : 'head-nav'" @click="doNav(7)" v-if="1 == 2">劳务管理</div>
+            @click="doNav(1)"
+            v-if="1 == 2"
+          >
+            项目概况
+          </div>
+          <div
+            :class="nav == 2 ? 'head-nav active' : 'head-nav'"
+            @click="doNav(2)"
+            v-if="1 == 2"
+          >
+            项目详情
+          </div>
+          <div
+            :class="nav == 7 ? 'head-nav active' : 'head-nav'"
+            @click="doNav(7)"
+            v-if="1 == 2"
+          >
+            劳务管理
+          </div>
 
-          <div :class="(nav >= 100 && nav < 200) || nav == 1 ? 'head-nav active' : 'head-nav'" style="position: relative" class="has-submenu">
+          <div
+            :class="
+              (nav >= 100 && nav < 200) || nav == 1
+                ? 'head-nav active'
+                : 'head-nav'
+            "
+            style="position: relative"
+            class="has-submenu"
+          >
             <div>项目概况</div>
             <div class="header-btn-list">
               <div class="header-btn-list-arrow"></div>
               <div class="header-btn-list-item" style>
-                <div class="header-btn-list-padding menu-row1" style="text-align: left">
+                <div
-                  <button type="button" :class="nav == 101 ? 'active' : ''" class="sub-btn" @click="doNav(101)">项目详情</button>
+                  class="header-btn-list-padding menu-row1"
-                  <button type="button" :class="nav == 102 ? 'active' : ''" class="sub-btn" @click="doNav(102)">劳务管理</button>
+                  style="text-align: left"
+                >
+                  <button
+                    type="button"
+                    :class="nav == 101 ? 'active' : ''"
+                    class="sub-btn"
+                    @click="doNav(101)"
+                  >
+                    项目详情
+                  </button>
+                  <button
+                    type="button"
+                    :class="nav == 102 ? 'active' : ''"
+                    class="sub-btn"
+                    @click="doNav(102)"
+                  >
+                    劳务管理
+                  </button>
                 </div>
               </div>
             </div>
           </div>
 
-          <div :class="(nav >= 300 && nav < 400) || nav == 3 ? 'head-nav active' : 'head-nav'" style="position: relative" class="has-submenu">
+          <div
+            :class="
+              (nav >= 300 && nav < 400) || nav == 3
+                ? 'head-nav active'
+                : 'head-nav'
+            "
+            style="position: relative"
+            class="has-submenu"
+          >
             <div>安全管理</div>
             <div class="header-btn-list">
               <div class="header-btn-list-arrow"></div>
               <div class="header-btn-list-item" style>
-                <div class="header-btn-list-padding menu-row1" style="text-align: left">
+                <div
-                  <button type="button" :class="nav == 301 ? 'active' : ''" class="sub-btn" @click="doNav(301)">安全隐患排查</button>
+                  class="header-btn-list-padding menu-row1"
+                  style="text-align: left"
+                >
+                  <button
+                    type="button"
+                    :class="nav == 301 ? 'active' : ''"
+                    class="sub-btn"
+                    @click="doNav(301)"
+                  >
+                    安全隐患排查
+                  </button>
                   <!-- <button type="button" :class="nav == 302 ? 'active' : ''" class="sub-btn" @click="doNav(302)">教育培训</button> -->
-                  <button type="button" :class="nav == 303 ? 'active' : ''" class="sub-btn" @click="doNav(303)">基坑监测</button>
+                  <button
-                  <button type="button" :class="nav == 304 ? 'active' : ''" class="sub-btn" @click="doNav(304)">塔机监测</button>
+                    type="button"
+                    :class="nav == 303 ? 'active' : ''"
+                    class="sub-btn"
+                    @click="doNav(303)"
+                  >
+                    基坑监测
+                  </button>
+                  <button
+                    type="button"
+                    :class="nav == 304 ? 'active' : ''"
+                    class="sub-btn"
+                    @click="doNav(304)"
+                  >
+                    塔机监测
+                  </button>
                 </div>
-                <div class="header-btn-list-padding menu-row1" style="text-align: left">
+                <div
+                  class="header-btn-list-padding menu-row1"
+                  style="text-align: left"
+                >
                   <!-- <button type="button" :class="nav == 305 ? 'active' : ''" class="sub-btn" @click="doNav(305)">高支模监测</button> -->
-                  <button type="button" :class="nav == 306 ? 'active' : ''" class="sub-btn" @click="doNav(306)">配电箱监测</button>
+                  <button
+                    type="button"
+                    :class="nav == 306 ? 'active' : ''"
+                    class="sub-btn"
+                    @click="doNav(306)"
+                  >
+                    配电箱监测
+                  </button>
                   <!-- <button type="button" :class="nav == 307 ? 'active' : ''" class="sub-btn" @click="doNav(307)">爬架监测</button>
                                     <button type="button" :class="nav == 308 ? 'active' : ''" class="sub-btn" @click="doNav(308)">升降机监测</button>-->
                 </div>
-                <div class="header-btn-list-padding menu-row1" style="text-align: left">
+                <div
-                  <button type="button" :class="nav == 309 ? 'active' : ''" class="sub-btn" @click="doNav(309)">视频监控</button>
+                  class="header-btn-list-padding menu-row1"
-                  <button type="button" :class="nav == 310 ? 'active' : ''" class="sub-btn" @click="doNav(310)">AI预警</button>
+                  style="text-align: left"
+                >
+                  <button
+                    type="button"
+                    :class="nav == 309 ? 'active' : ''"
+                    class="sub-btn"
+                    @click="doNav(309)"
+                  >
+                    视频监控
+                  </button>
+                  <button
+                    type="button"
+                    :class="nav == 310 ? 'active' : ''"
+                    class="sub-btn"
+                    @click="doNav(310)"
+                  >
+                    AI预警
+                  </button>
                   <!-- <button type="button" :class="nav == 311 ? 'active' : ''" class="sub-btn" @click="doNav(311)">标准化管理</button> -->
                 </div>
               </div>
             </div>
           </div>
-          <div :class="(nav >= 400 && nav < 500) || nav == 4 ? 'head-nav active' : 'head-nav'" style="position: relative" class="has-submenu">
+          <div
+            :class="
+              (nav >= 400 && nav < 500) || nav == 4
+                ? 'head-nav active'
+                : 'head-nav'
+            "
+            style="position: relative"
+            class="has-submenu"
+          >
             <div>质量管理</div>
             <div class="header-btn-list">
               <div class="header-btn-list-arrow"></div>
               <div class="header-btn-list-item" style>
-                <div class="header-btn-list-padding menu-row1" style="text-align: left">
+                <div
-                  <button type="button" :class="nav == 401 ? 'active' : ''" class="sub-btn" @click="doNav(401)">质量隐患排查</button>
+                  class="header-btn-list-padding menu-row1"
+                  style="text-align: left"
+                >
+                  <button
+                    type="button"
+                    :class="nav == 401 ? 'active' : ''"
+                    class="sub-btn"
+                    @click="doNav(401)"
+                  >
+                    质量隐患排查
+                  </button>
                   <!--
                                     <button type="button" :class="nav == 402 ? 'active' : ''" class="sub-btn" @click="doNav(402)">材料取样复试</button>
                                     <button type="button" :class="nav == 403 ? 'active' : ''" class="sub-btn" @click="doNav(403)">举牌验收</button>
@@ -66,14 +186,39 @@
               </div>
             </div>
           </div>
-          <div :class="(nav >= 500 && nav < 600) || nav == 5 ? 'head-nav active' : 'head-nav'" style="position: relative" class="has-submenu">
+          <div
+            :class="
+              (nav >= 500 && nav < 600) || nav == 5
+                ? 'head-nav active'
+                : 'head-nav'
+            "
+            style="position: relative"
+            class="has-submenu"
+          >
             <div>进度管理</div>
             <div class="header-btn-list">
               <div class="header-btn-list-arrow"></div>
               <div class="header-btn-list-item" style>
-                <div class="header-btn-list-padding menu-row1" style="text-align: left">
+                <div
-                  <button type="button" :class="nav == 502 ? 'active' : ''" class="sub-btn" @click="doNav(502)">进度管理</button>
+                  class="header-btn-list-padding menu-row1"
-                  <button type="button" :class="nav == 501 ? 'active' : ''" class="sub-btn" @click="doNav(501)">延时摄影</button>
+                  style="text-align: left"
+                >
+                  <button
+                    type="button"
+                    :class="nav == 502 ? 'active' : ''"
+                    class="sub-btn"
+                    @click="doNav(502)"
+                  >
+                    进度管理
+                  </button>
+                  <button
+                    type="button"
+                    :class="nav == 501 ? 'active' : ''"
+                    class="sub-btn"
+                    @click="doNav(501)"
+                  >
+                    延时摄影
+                  </button>
                 </div>
               </div>
             </div>
@@ -81,34 +226,96 @@
         </div>
       </el-col>
       <el-col :span="8" class="header-center">
-        <img class="prj-logo" :src="selProject.setting.orgLogo" v-if="selProject && selProject.setting && selProject.setting.orgLogo" />
+        <img
-        <span class="sp-title">{{ selProject?.setting?.orgName || selProject?.projectName || "数字建安施工管理平台" }}</span>
+          class="prj-logo"
+          :src="selProject.setting.orgLogo"
+          v-if="selProject && selProject.setting && selProject.setting.orgLogo"
+        />
+        <span class="sp-title">{{
+          selProject?.setting?.orgName ||
+          selProject?.projectName ||
+          "数字建安施工管理平台"
+        }}</span>
       </el-col>
       <el-col :span="8">
         <div class="head-title-tab" style="display: inline-flex">
-          <div :class="nav == 6 ? 'head-nav active' : 'head-nav'" @click="doNav(6)">绿碳中心</div>
+          <div
-          <div :class="nav == 7 ? 'head-nav active' : 'head-nav'" @click="doNav(7)">BIM应用</div>
+            :class="nav == 6 ? 'head-nav active' : 'head-nav'"
+            @click="doNav(6)"
+          >
+            绿碳中心
           </div>
-        <div class="header-title-user-info" style="display: inline-block; float: right">
+          <div
-          <el-select v-model="selProjectId" popper-class="header-sel-project-pop" @change="doProjectSelect">
+            :class="nav == 7 ? 'head-nav active' : 'head-nav'"
-            <el-option v-for="it in projects" :key="it.id" :label="it.projectName" :value="it.id"></el-option>
+            @click="doNav(7)"
+          >
+            BIM应用
+          </div>
+        </div>
+        <div
+          class="header-title-user-info"
+          style="display: inline-block; float: right"
+        >
+          <el-select
+            v-model="selProjectId"
+            popper-class="header-sel-project-pop"
+            @change="doProjectSelect"
+          >
+            <el-option
+              v-for="it in projects"
+              :key="it.id"
+              :label="it.projectName"
+              :value="it.id"
+            ></el-option>
           </el-select>
           <span class="command" @click="doLogout">
             {{ nickName }}
             <i class="el-icon-switch-button"></i>
           </span>
         </div>
-        <i class="set-fullscreen set-font-size" style="margin-left: 16px; position: absolute; top: 0px; right: 24px" @click="toggleFullScreen">
+        <i
-          <svg class="icon" v-if="!isFullScreen" style="width: 20px; vertical-align: middle; fill: currentColor; overflow: hidden" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3304">
+          class="set-fullscreen set-font-size"
+          style="margin-left: 16px; position: absolute; top: 0px; right: 24px"
+          @click="toggleFullScreen"
+        >
+          <svg
+            class="icon"
+            v-if="!isFullScreen"
+            style="
+              width: 20px;
+              vertical-align: middle;
+              fill: currentColor;
+              overflow: hidden;
+            "
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="3304"
+          >
             <path
               d="M145.066667 85.333333h153.6c25.6 0 42.666667-17.066667 42.666666-42.666666S324.266667 0 298.666667 0H34.133333C25.6 0 17.066667 8.533333 8.533333 17.066667 0 25.6 0 34.133333 0 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666666-42.666666V145.066667l230.4 230.4c17.066667 17.066667 42.666667 17.066667 59.733334 0 17.066667-17.066667 17.066667-42.666667 0-59.733334L145.066667 85.333333z m170.666666 563.2L162.133333 802.133333l-76.8 76.8V725.333333C85.333333 699.733333 68.266667 682.666667 42.666667 682.666667s-42.666667 17.066667-42.666667 42.666666v256c0 25.6 17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666H145.066667l76.8-76.8 153.6-153.6c17.066667-17.066667 17.066667-42.666667 0-59.733334-17.066667-17.066667-42.666667-17.066667-59.733334 0z m665.6 34.133334c-25.6 0-42.666667 17.066667-42.666666 42.666666v153.6l-76.8-76.8-153.6-153.6c-17.066667-17.066667-42.666667-17.066667-59.733334 0-17.066667 17.066667-17.066667 42.666667 0 59.733334l153.6 153.6 76.8 76.8H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666666z m0-682.666667h-256c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h153.6l-76.8 76.8-153.6 153.6c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733334 0l153.6-153.6 76.8-76.8v153.6c0 25.6 17.066667 42.666667 42.666666 42.666666s42.666667-17.066667 42.666667-42.666666v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z"
               fill
-              p-id="3305" />
+              p-id="3305"
+            />
           </svg>
-          <svg class="icon" v-else style="width: 24px; vertical-align: middle; fill: currentColor; overflow: hidden" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3952">
+          <svg
+            class="icon"
+            v-else
+            style="
+              width: 24px;
+              vertical-align: middle;
+              fill: currentColor;
+              overflow: hidden;
+            "
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="3952"
+          >
             <path
               d="M384 597.333333h-256c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h153.6L17.066667 947.2c-17.066667 17.066667-17.066667 42.666667 0 59.733333 17.066667 17.066667 42.666667 17.066667 59.733333 0L341.333333 742.4v153.6c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z m358.4 85.333334h153.6c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667h-256c-25.6 0-42.666667 17.066667-42.666667 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667V742.4l264.533333 264.533333c17.066667 17.066667 42.666667 17.066667 59.733333 0 17.066667-17.066667 17.066667-42.666667 0-59.733333L742.4 682.666667zM640 426.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667H742.4L1006.933333 76.8c17.066667-17.066667 17.066667-42.666667 0-59.733333-17.066667-17.066667-42.666667-17.066667-59.733333 0L682.666667 281.6V128c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666667 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666667z m-256-341.333334c-25.6 0-42.666667 17.066667-42.666667 42.666667v153.6L76.8 8.533333C59.733333 0 25.6 0 8.533333 8.533333 0 25.6 0 59.733333 8.533333 76.8L281.6 341.333333H128c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z"
-              p-id="3953" />
+              p-id="3953"
+            />
           </svg>
         </i>
       </el-col>
@@ -269,7 +476,6 @@ export default {
       position: relative;
       top: -5px;
       width: 200px;
-      width: 250px;
       right: 10px;
     }
   }

yanzhu-bigscreen/src/views/bimManage.vue

@@ -3,7 +3,9 @@
     <div id="bimManage" :key="elId">
       <div id="bimManageContainer" class="bimManageContainer"></div>
     </div>
-    <div class="div-left data-content">
+    <div class="div-left" :class="{ isShow: leftShow, isHide: !leftShow }">
+      <transition name="left">
+        <div class="data-content" v-show="leftShow">
           <div class="div-row">
             <div class="row-title">
               <svg-icon icon-class="signal"></svg-icon>
@@ -17,10 +19,22 @@
             </div>
           </div>
           <div class="div-row">
-        <div class="row-title"><svg-icon icon-class="signal"></svg-icon> 人员</div>
+            <div class="row-title">
+              <svg-icon icon-class="signal"></svg-icon> 人员
             </div>
           </div>
-    <div class="div-right data-content">
+        </div>
+      </transition>
+      <img
+        :src="leftSrc"
+        class="toSafety-fixed-left-img"
+        @click="arrowRetract"
+        id="arrowLeft"
+      />
+    </div>
+    <div class="div-right" :class="{ isShow: leftShow, isHide: !leftShow }">
+      <transition name="right">
+        <div class="data-content" v-show="leftShow">
           <div class="div-row">
             <div class="row-title">
               <svg-icon icon-class="signal"></svg-icon>
@@ -35,11 +49,19 @@
           </div>
           <div class="div-row">
             <div class="row-title">
-          <svg-icon icon-class="signal"></svg-icon>
+              <svg-icon icon-class="signal"></svg-icon> 项目全景
-          项目全景
             </div>
           </div>
         </div>
+      </transition>
+      <img
+        :src="rightSrc"
+        class="toSafety-fixed-right-img"
+        @click="arrowRetract"
+        id="arrowRight"
+      />
+    </div>
+
     <div class="div-tools">
       <div class="tool-item" @click="resetScene">
         <div class="icon">
@@ -48,25 +70,41 @@
         <span class="sp-text">默认视点</span>
       </div>
 
-      <div class="tool-item" @click="changeDevicType(1)" :class="{ 'is-active': devicTypes.includes(1) }">
+      <div
+        class="tool-item"
+        @click="changeDevicType(1)"
+        :class="{ 'is-active': devicTypes.includes(1) }"
+      >
         <div class="icon">
           <svg-icon icon-class="videoMonitor" />
         </div>
         <span class="sp-text">视频监控</span>
       </div>
-      <div class="tool-item" @click="changeDevicType(2)" :class="{ 'is-active': devicTypes.includes(2) }">
+      <div
+        class="tool-item"
+        @click="changeDevicType(2)"
+        :class="{ 'is-active': devicTypes.includes(2) }"
+      >
         <div class="icon">
           <svg-icon icon-class="pitMonitor" />
         </div>
         <span class="sp-text">基坑监控</span>
       </div>
-      <div class="tool-item" @click="changeDevicType(3)" :class="{ 'is-active': devicTypes.includes(3) }">
+      <div
+        class="tool-item"
+        @click="changeDevicType(3)"
+        :class="{ 'is-active': devicTypes.includes(3) }"
+      >
         <div class="icon">
           <svg-icon icon-class="towerMonitor" />
         </div>
         <span class="sp-text">塔机监控</span>
       </div>
-      <div class="tool-item" @click="changeDevicType(4)" :class="{ 'is-active': devicTypes.includes(4) }">
+      <div
+        class="tool-item"
+        @click="changeDevicType(4)"
+        :class="{ 'is-active': devicTypes.includes(4) }"
+      >
         <div class="icon">
           <svg-icon icon-class="power" />
         </div>
@@ -77,7 +115,9 @@
       <div class="tag-box">
         <img :src="'bimImages/3.png'" alt="" />
         <img class="tag-img" :src="'bimImages/videoMonitor.png'" style="" />
-        <span class="tag-txt" style="color: #ffffff; font-size: 14px"> aaa</span>
+        <span class="tag-txt" style="color: #ffffff; font-size: 14px">
+          aaa</span
+        >
       </div>
     </div>
   </div>
@@ -93,7 +133,7 @@ const css = `<style>
         height: 20px;
         position: absolute;
         left:50%;
-        bottom:18px;
+        bottom:33px;
         margin-left:-10px;
     }
     .tag-txt {
@@ -105,17 +145,41 @@ const css = `<style>
       color: #ffffff;
       display: flex;
     }
+    .tag-bg-img{
+     margin-bottom:13px;
+    }
     .box-type-1 .tag-bg-img{
         position: absolute;
-        bottom:0;
+        bottom:0px;
         left:50%;
         margin-left:-11px;
     }
+    
     .box-type-1{
         height:60px;
         width:60px;
     }
     .box-type-1 .tag-txt{display:none;}
+    .loading {
+  width: 50px;
+  height: 50px;
+  border-radius: 100%;
+  background-color: #000;
+
+  animation: ball-scale infinite linear 0.75s;
+}
+
+@keyframes ball-scale {
+  0% {
+    transform: scale(0.1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
         </style>`;
 import debounce from "lodash.debounce";
 export default {
@@ -132,6 +196,9 @@ export default {
       videoData: [],
       towerData: [],
       iotData: [],
+      leftSrc: "./bimImages/arrow_left_retract.png",
+      rightSrc: "./bimImages/arrow_right_retract.png",
+      leftShow: true,
     };
   },
   beforeDestroy() {
@@ -149,6 +216,8 @@ export default {
       "projectChange",
       debounce((prj) => {
         this.selProject = prj;
+        this.elId++;
+        this.initEngine();
       })
     );
     this.selProject = this.$store.getters.selProject;
@@ -157,6 +226,22 @@ export default {
     this.initEngine();
   },
   methods: {
+    arrowRetract() {
+      if (this.leftShow == true) {
+        this.rightSrc = "./images/arrow_right_open.png";
+        this.leftSrc = "./images/arrow_left_open.png";
+        $("#arrowLeft").animate({ left: 10 + "px" }, 300);
+        $("#arrowRight").animate({ right: 10 + "px" }, 300);
+      } else {
+        this.rightSrc = "./images/arrow_right_retract.png";
+        this.leftSrc = "./images/arrow_left_retract.png";
+
+        $("#arrowLeft").animate({ left: 490 + "px" }, 300);
+        $("#arrowRight").animate({ right: 490 + "px" }, 300);
+      }
+      this.leftShow = !this.leftShow;
+    },
+
     loadDevicePosition() {
       this.$api.bim
         .devicePositionGet({
@@ -168,11 +253,14 @@ export default {
             .map((item) => {
               item.show = item.enabled != 0;
               item.position = this.$tryToJson(item.position, []);
-              item.elId = (item.deviceId ? item.deviceId : cnt++) + "-" + item.deviceType;
+              item.elId =
+                (item.deviceId ? item.deviceId : cnt++) + "-" + item.deviceType;
               return item;
             })
             .filter((item) => item.position.length == 3);
-          this.showDevices = this.devices.filter((item) => this.devicTypes.includes(item.deviceType));
+          this.showDevices = this.devices.filter((item) =>
+            this.devicTypes.includes(item.deviceType)
+          );
           this.clearLabels();
           this.addDeviceLabel();
           setTimeout(() => {
@@ -181,25 +269,20 @@ export default {
         });
     },
     changeDevicType(n) {
-      let devs = this.devices.filter((d) => d.devicType == n);
       if (this.devicTypes.includes(n)) {
         let idx = this.devicTypes.indexOf(n);
         this.devicTypes.splice(idx, 1);
-        devs.forEach(item=>{
-            bimMgrApi.Label.removeBalloon({id:item.elId});
-        });
       } else {
         this.devicTypes.push(n);
-         devs.forEach(item=>{
-            this.AddLable(item)
-         });
       }
-      this.showDevices = this.devices.filter((item) => this.devicTypes.includes(item.deviceType));
+      this.showDevices = this.devices.filter((item) =>
-    //   this.clearLabels();
+        this.devicTypes.includes(item.deviceType)
-    //   this.addDeviceLabel();
+      );
-    //   setTimeout(() => {
+      this.clearLabels();
-    //     this.loadDeviceData();
+      this.addDeviceLabel();
-    //   }, 100);
+      setTimeout(() => {
+        this.loadDeviceData();
+      }, 100);
     },
     AddLable: function (item) {
       let bg = "2.png";
@@ -218,9 +301,10 @@ export default {
       let html =
         css +
         `
-        <div class='tag-box box-type-${item.deviceType}' title='${item.name}'>
+        <div class='tag-box box-type-${item.deviceType}'>
           <img src='bimImages/${bg}' alt='' class="tag-bg-img">
           <img src='bimImages/${img}.png' class="tag-img">
+          <div class='loading'></div>
           <span class='tag-txt' style='color:#ffffff;font-size:14px'>
             ${item.name} - 数据加载中。。。
           </span>
@@ -451,20 +535,45 @@ export default {
       height: 100%;
     }
   }
-  .data-content {
+  .div-left {
+    top: 10vh;
+    left: 5%;
     position: absolute;
     height: 70vh;
     width: 20%;
-    border: solid 1px #75fbfdaa;
+    &.isHide {
-    background-color: #06445b81;
+      left: 0%;
-    &.div-left {
+      wdith: 0%;
-      top: 10vh;
+      #arrowLeft {
-      left: 5%;
+        left: 0px !important;
       }
-    &.div-right {
+    }
+    #arrowLeft {
+      top: calc(50% - 50px);
+      right: -21px;
+      left: unset !important;
+    }
+  }
+  .div-right {
     top: 10vh;
     right: 5%;
+    position: absolute;
+    height: 70vh;
+    width: 20%;
+    &.isHide {
+      right: 0%;
+      width: 0%;
     }
+    #arrowRight {
+      top: calc(50% - 50px);
+      left: -21px;
+    }
+  }
+
+  .data-content {
+    border: solid 1px #75fbfdaa;
+    background-color: #06445b81;
+    height: 100%;
     .div-row {
       height: 33%;
       .row-title {
@@ -480,7 +589,7 @@ export default {
   }
   .div-tools {
     position: absolute;
-    bottom: 20vh;
+    bottom: 25vh;
     left: 50%;
     margin-left: -200px;
     display: flex;