数字孪生用户权限

src/apis/user.js

@@ -0,0 +1,10 @@
+import request from "@/request/index";
+
+// 获取用户权限
+export function GetUserLimit(data) {
+    return request({
+        url: 'https://10.83.240.193:8090/ghjgWebServiceTest/ghjg/DigitalWain/auth',
+        method: "post",
+        data: { ...data },
+    })
+}

src/store/index.js

@@ -18,4 +18,10 @@ export const asideShow = createGlobalState(
 
     return { isHide, toggleAside }
   }
+)
+
+export const userLimit = createGlobalState(
+  ()=>{
+    
+  }
 )

src/utils/user.js

@@ -0,0 +1,48 @@
+// 用户权限
+import { useRoute } from 'vue-router';
+import { GetUserLimit } from "@/apis/user";
+
+// const testData = {
+//     "sysType": "MA==",
+//     "userId": "NTIzMw==",
+//     "type": "eXc="
+// }
+
+
+//userId=NTMwMw==&sysType=W29iamVjdCBPYmplY3Rd&digitalTwainType=eXM=
+
+
+/**
+ * @params nameList-按钮列表
+ */
+export function GetUserPrivilege(nameList) {
+    const router = useRoute()
+    let userData = useRoute().query
+    userData.type = userData.digitalTwainType
+    userData.sysType = "MA=="
+    delete userData.digitalTwainType
+    // console.log(userData)
+    GetUserLimit(userData).then((res) => {
+        // console.log(res)
+        let parentId = []
+        let limitArr = []
+        res.data.Rows.forEach((item) => {
+            if (item.name.includes('数字孪生业务版') || item.name.includes('数字孪生演示版')) {
+                res.data.Rows.forEach((item) => {
+                    parentId.push(item.id)
+                })
+                // console.log(parentId)
+            }
+            if (parentId.includes(item.parentId)) {
+                limitArr.push(item.name)
+                // console.log(limitArr)
+            }
+
+        })
+        nameList.data = nameList.data.filter((item) => {
+            if (limitArr.includes(item.name)) {
+                return true
+            }
+        })
+    })
+}

src/views/hdsj/Index.vue

@@ -213,14 +213,14 @@
   import {compareSjBeforeAfter, showWhss} from "@/utils/map/Channel";
 
 
+
   const type =ref('计划方量')
   const aside_hide = asideShow().isHide
 
 
-function handleShowBingTu()
-{
-  showSuJun.value=true
-}
+  function handleShowBingTu(){
+    showSuJun.value=true
+  }
 
   onMounted(() => {
     // setSjjk(document.getElementById('chart_fstj'), chartData_fstj.value)

src/views/home/Header.vue

@@ -5,47 +5,46 @@
       <div class="content">
         <div class="left">
           <div class="right-box">
-            <span class="now-time" @click="ueCallGetNowTime">{{time}}</span>
+            <span class="now-time" @click="ueCallGetNowTime">{{ time }}</span>
             <div class="date">
-              <span>{{day}}</span>
-              <span>{{date}}</span>
+              <span>{{ day }}</span>
+              <span>{{ date }}</span>
             </div>
             <i class="weather" :class="weather" @click="toggleScene"></i>
-            <i  :class="waterDeepShows?'waterUpDownS':'waterUpDown'"   @click="showChaogaos"></i>
+            <i :class="waterDeepShows ? 'waterUpDownS' : 'waterUpDown'" @click="showChaogaos"></i>
           </div>
         </div>
         <div class="right">
-          <div class="tab-item"
-               v-for="item,index in isCheck.data"
-               :key="item.name"
-               @click="changeImage(index,item.imageName)">
-            <div  class="bottom">
+          <div class="tab-item" v-for="item, index in isCheck.data" :key="item.name"
+            @click="changeImage(index, item.imageName)">
+            <div class="bottom">
               <el-tooltip class="item" effect="light" :content="item.name" placement="bottom-start">
-            <img class="tab-icon" :src="item.click? item.iconOn: item.icon" alt="">
+                <img class="tab-icon" :src="item.click ? item.iconOn : item.icon" alt="">
               </el-tooltip>
             </div>
           </div>
         </div>
       </div>
     </div>
-<!--    <div class="sub">-->
-<!--      <ul>-->
-<!--        <li v-for="item,index in subList" :class="{'highlight': item.status}">-->
-<!--          <span @click="handleToggleLayer(index)">{{ item.name }}</span>-->
-<!--        </li>-->
-<!--      </ul>-->
-<!--    </div>-->
-    <MiForChange v-if="miForChangeShow"/>
-    <water-level v-if="waterDeepShow"/>
-    <Tools v-show="checkTool" @showView="vidoShow=true"  :shipinRonghe="vidoShow" @hiddenView="closeVido" />
-
-    <VideoForHK  v-if="vidoShow" :vidoBackShow="false"  :cameraIndexCode="'89be6c491cf04a6aa3c42669e77d2127'"  ref="childeRef"   @closeVido="closeVidoAll"/>
-    <WaterLevelForChars v-if="waterDeepShows"/>
-    <LunDuMessage v-if="checkLinDu" @closeThis="closeLundu" :datas="ldData.value"/>
+    <!--    <div class="sub">-->
+    <!--      <ul>-->
+    <!--        <li v-for="item,index in subList" :class="{'highlight': item.status}">-->
+    <!--          <span @click="handleToggleLayer(index)">{{ item.name }}</span>-->
+    <!--        </li>-->
+    <!--      </ul>-->
+    <!--    </div>-->
+    <MiForChange v-if="miForChangeShow" />
+    <water-level v-if="waterDeepShow" />
+    <Tools v-show="checkTool" @showView="vidoShow = true" :shipinRonghe="vidoShow" @hiddenView="closeVido" />
+
+    <VideoForHK v-if="vidoShow" :vidoBackShow="false" :cameraIndexCode="'89be6c491cf04a6aa3c42669e77d2127'"
+      ref="childeRef" @closeVido="closeVidoAll" />
+    <WaterLevelForChars v-if="waterDeepShows" />
+    <LunDuMessage v-if="checkLinDu" @closeThis="closeLundu" :datas="ldData.value" />
 
     <HuiFangArea v-if="checkArea" />
 
-    <SelectForUnit  v-if="showSelect"/>
+    <SelectForUnit v-if="showSelect" />
   </div>
 </template>
 
@@ -56,263 +55,268 @@ export default {
 </script>
 
 <script setup>
-  import {nextTick,onBeforeMount,defineComponent, onMounted, reactive, ref,toRaw} from 'vue';
-  import { useNow, useDateFormat } from '@vueuse/core'
-  import bus from '@/utils/bus'
-  import { GetWeather } from '@/apis/other'
-  import {
-    ueCallBoatRealtime, ueCallClearBoatTime, ueCallfullExtent,ueCallCloseMi,ueCallShowWarningReturn,
-    ueCallOpenVideoFusion, ueCallCloseVideoFusion, ueCallShowHangdaoLine, ueCallCloseHangdaoLine,ueCallCloseWarningReturn,
-    ueCallOpenRlt, ueCallCloseRlt, ueCallFlyToHD, ueCallFlyToSP, ueCallFlyToZrcb, ueCallShowAllMi,ueCallGetNowTime
-  } from '@/utils/UIInteractions'
-  import WaterLevel from './cpns/WaterLevel.vue'
-  import WaterLevelForChars from './cpns/WaterLevelForChart.vue'
-  import MiForChange from './cpns/MiForChange.vue'
-  import VideoForHK from  './cpns/VideoForHK'
-  import HuiFangArea from './cpns/tools/HuiFangArea.vue'
-  import Tools from './cpns/tools/Tools.vue'
-  import LunDuMessage from './cpns/boatPanel/LunDuMessage.vue'
-  import SelectForUnit from './SelectForUnit.vue'
-  import { asideShow } from '@/store/index'
-  import {ElMessage} from "element-plus";
-  import { ElTooltip} from 'element-plus'
-  import 'element-plus/es/components/tooltip/style/index'
-  // 地图方法
-  import {fullExtent, calculation, clearMap, setCamera} from "@/utils/map/ArcgisUtil";
-  import {setCenter} from "@/utils/map/Common";
-
-  import {locationUnit} from "@/utils/map/OperationSupervision";
-
-
-  const vidoShow = ref(false)
-  let ldData=reactive({value: ''})
-  const  checkLinDu=ref(false)
-  const checkArea = ref(false)
-  const checkSelect = ref(false)
-  const checkTool = ref(false)
-  const checkSouXiao = ref(false)
-  const checkQuanjing = ref(false)
-  const checkRuale = ref(false)
-  const checkCeMian = ref(false)
-  const checkClear = ref(false)
-  const waterDeepShows = ref(false)
-  import {closeAllLayer} from '@/utils/map/Layer'
-  const showSelect = ref(false)
-  // onBeforeMount(()=>{
-  //   childeRefAr.value=childeRef.value?.['onCancelVideoEx']
-  //   toRaw(onCancelVideoEx())
-  // })
-
- const  childeRef=ref()
-  // const childeRefAr = ref(false)
-  function  closeVido(){
-      childeRef.value.onCancelVideoEx()
+import { nextTick, onBeforeMount, defineComponent, onMounted, reactive, ref, toRaw } from 'vue';
+import { useNow, useDateFormat } from '@vueuse/core'
+import bus from '@/utils/bus'
+import { GetWeather } from '@/apis/other'
+import {
+  ueCallBoatRealtime, ueCallClearBoatTime, ueCallfullExtent, ueCallCloseMi, ueCallShowWarningReturn,
+  ueCallOpenVideoFusion, ueCallCloseVideoFusion, ueCallShowHangdaoLine, ueCallCloseHangdaoLine, ueCallCloseWarningReturn,
+  ueCallOpenRlt, ueCallCloseRlt, ueCallFlyToHD, ueCallFlyToSP, ueCallFlyToZrcb, ueCallShowAllMi, ueCallGetNowTime
+} from '@/utils/UIInteractions'
+import WaterLevel from './cpns/WaterLevel.vue'
+import WaterLevelForChars from './cpns/WaterLevelForChart.vue'
+import MiForChange from './cpns/MiForChange.vue'
+import VideoForHK from './cpns/VideoForHK'
+import HuiFangArea from './cpns/tools/HuiFangArea.vue'
+import Tools from './cpns/tools/Tools.vue'
+import LunDuMessage from './cpns/boatPanel/LunDuMessage.vue'
+import SelectForUnit from './SelectForUnit.vue'
+import { asideShow } from '@/store/index'
+import { ElMessage } from "element-plus";
+import { ElTooltip } from 'element-plus'
+import 'element-plus/es/components/tooltip/style/index'
+// 地图方法
+import { fullExtent, calculation, clearMap, setCamera } from "@/utils/map/ArcgisUtil";
+import { setCenter } from "@/utils/map/Common";
+import { closeAllLayer } from '@/utils/map/Layer'
+import { locationUnit } from "@/utils/map/OperationSupervision";
+import { GetUserPrivilege } from "@/utils/user";
+
+
+
+const vidoShow = ref(false)
+let ldData = reactive({ value: '' })
+const checkLinDu = ref(false)
+const checkArea = ref(false)
+const checkSelect = ref(false)
+const checkTool = ref(false)
+const checkSouXiao = ref(false)
+const checkQuanjing = ref(false)
+const checkRuale = ref(false)
+const checkCeMian = ref(false)
+const checkClear = ref(false)
+const waterDeepShows = ref(false)
+
+
+
+const showSelect = ref(false)
+// onBeforeMount(()=>{
+//   childeRefAr.value=childeRef.value?.['onCancelVideoEx']
+//   toRaw(onCancelVideoEx())
+// })
+
+const childeRef = ref()
+// const childeRefAr = ref(false)
+function closeVido() {
+  childeRef.value.onCancelVideoEx()
 
-  }
-  function  closeVidoAll(){
-    vidoShow.value=false
-  }
+}
+function closeVidoAll() {
+  vidoShow.value = false
+}
 
-  function showChaogaos()
-  {
-    waterDeepShows.value=!waterDeepShows.value
-  }
+function showChaogaos() {
+  waterDeepShows.value = !waterDeepShows.value
+}
 
-  bus.on('click_Lundu', (data) => {
-    console.log(data)
-    if(data!=null && data!='') {
-      checkLinDu.value=true
-      ldData.value=data
-    }
-  })
-  const  isCheck=ref({
-    data: [
-      { name: '搜索企业或船舶', icon: require('@/assets/imgs/header/ssou-wei.png'), iconOn: require('@/assets/imgs/header/ssou-select.png'), imageName: 'ssou' ,click:false,checkIoc:showSelect},
-      { name: '区域轨迹回放', icon: require('@/assets/imgs/area/bj_wei.png'), iconOn: require('@/assets/imgs/area/bj_select.png'), imageName: 'hf' ,click:false,checkIoc:checkArea},
-      { name: '图层', icon: require('@/assets/imgs/header/tc-wei.png'), iconOn: require('@/assets/imgs/header/tc-select.png'), imageName: 'tc' ,click:false,checkIoc:checkTool},
-      { name: '收缩两侧', icon: require('@/assets/imgs/header/ss-wei.png'), iconOn: require('@/assets/imgs/header/ss-select.png'), imageName: 'ss' ,click:false,checkIoc:checkSouXiao},
-      { name: '切换全景视角', icon: require('@/assets/imgs/page_ylcbq/qj-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/qj-xuan.png'), imageName: 'qj' ,click:false,checkIoc:checkQuanjing},
-      { name: '测距离', icon: require('@/assets/imgs/page_ylcbq/cl-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/cl-xuan.png'), imageName: 'cl' ,click:false,checkIoc:checkRuale},
-      { name: '测面积', icon: require('@/assets/imgs/page_ylcbq/cm-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/cm-xuan.png'), imageName: 'cm' ,click:false,checkIoc:checkCeMian},
-      { name: '清除图层', icon: require('@/assets/imgs/page_ylcbq/qc-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/qc-xuan.png'), imageName: 'qc' ,click:false,checkIoc:checkClear},
-
-    ]})
-  const global_aside = asideShow()
-
-  onMounted(() => [
-    getWeather()
-  ])
-
-  const weather = ref('qing')
-
-  function closeLundu() {
-    checkLinDu.value=false
+bus.on('click_Lundu', (data) => {
+  console.log(data)
+  if (data != null && data != '') {
+    checkLinDu.value = true
+    ldData.value = data
   }
+})
+const isCheck = ref({
+  data: [
+    { name: '搜索企业或船舶', icon: require('@/assets/imgs/header/ssou-wei.png'), iconOn: require('@/assets/imgs/header/ssou-select.png'), imageName: 'ssou', click: false, checkIoc: showSelect },
+    { name: '区域轨迹回放', icon: require('@/assets/imgs/area/bj_wei.png'), iconOn: require('@/assets/imgs/area/bj_select.png'), imageName: 'hf', click: false, checkIoc: checkArea },
+    { name: '图层', icon: require('@/assets/imgs/header/tc-wei.png'), iconOn: require('@/assets/imgs/header/tc-select.png'), imageName: 'tc', click: false, checkIoc: checkTool },
+    { name: '收缩两侧', icon: require('@/assets/imgs/header/ss-wei.png'), iconOn: require('@/assets/imgs/header/ss-select.png'), imageName: 'ss', click: false, checkIoc: checkSouXiao },
+    { name: '切换全景视角', icon: require('@/assets/imgs/page_ylcbq/qj-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/qj-xuan.png'), imageName: 'qj', click: false, checkIoc: checkQuanjing },
+    { name: '测距离', icon: require('@/assets/imgs/page_ylcbq/cl-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/cl-xuan.png'), imageName: 'cl', click: false, checkIoc: checkRuale },
+    { name: '测面积', icon: require('@/assets/imgs/page_ylcbq/cm-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/cm-xuan.png'), imageName: 'cm', click: false, checkIoc: checkCeMian },
+    { name: '清除图层', icon: require('@/assets/imgs/page_ylcbq/qc-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/qc-xuan.png'), imageName: 'qc', click: false, checkIoc: checkClear },
+
+  ]
+})
+
+const global_aside = asideShow()
+
+onMounted(() => [
+  getWeather(),
+  GetUserPrivilege(isCheck.value),
+])
+
+const weather = ref('qing')
+
+function closeLundu() {
+  checkLinDu.value = false
+}
 
 
-  function changeImage(index,name) {
-    isCheck.value.data.forEach(i=>{
-      if(i.imageName===name) {
-        console.log(name)
-        i.click =  !i.click ;
-        i.checkIoc = !i.checkIoc;
-        if (i.click) {
-          // 选择
-          if (name == 'qj') {
-            //返回全景
-            // fullExtent();
-            setCenter()
-            i.click =  !i.click ;
-            i.checkIoc = !i.checkIoc;
-          } else if (name == 'ss') {
-            togglePageAside()
-          }else if (name == 'cl') {
-            calculation('distance')
-          }else if (name == 'cm') {
-            calculation('area')
-          }
-          else if (name == 'qc') {
-            // closeAllLayer()
-            clearMap({is_draw: true, is_search:true, layers: ['sketchLayer','bufferLayer','tempLayer','boatLayer','boatPathLayer']})
-            i.click =  !i.click ;
-            i.checkIoc = !i.checkIoc;
-          }
-        }else {
-          // 取消
-          if (name == 'ss') {
-            togglePageAside()
-          }else
-          {
-            locationUnit(null,false)
-          }
-
+function changeImage(index, name) {
+  isCheck.value.data.forEach(i => {
+    if (i.imageName === name) {
+      console.log(name)
+      i.click = !i.click;
+      i.checkIoc = !i.checkIoc;
+      if (i.click) {
+        // 选择
+        if (name == 'qj') {
+          //返回全景
+          // fullExtent();
+          setCenter()
+          i.click = !i.click;
+          i.checkIoc = !i.checkIoc;
+        } else if (name == 'ss') {
+          togglePageAside()
+        } else if (name == 'cl') {
+          calculation('distance')
+        } else if (name == 'cm') {
+          calculation('area')
+        }
+        else if (name == 'qc') {
+          // closeAllLayer()
+          clearMap({ is_draw: true, is_search: true, layers: ['sketchLayer', 'bufferLayer', 'tempLayer', 'boatLayer', 'boatPathLayer'] })
+          i.click = !i.click;
+          i.checkIoc = !i.checkIoc;
+        }
+      } else {
+        // 取消
+        if (name == 'ss') {
+          togglePageAside()
+        } else {
+          locationUnit(null, false)
         }
 
       }
 
-    })
-  }
+    }
 
-  function getWeather() {
-    GetWeather().then(res => {
-      switch(res.data.weather) {
-        case '晴': weather.value = 'qing'; break
-        case '多云':weather.value = 'duoyun'; break
-        case '小雨':weather.value = 'xiaoyu'; break
-        case '中雨':weather.value = 'zhongyu'; break
-        case '大雨':weather.value = 'dayu'; break
-        case '雾':weather.value = 'wu'; break
-        case '小雪':weather.value = 'xiaoxue'; break
-      }
-    })
-  }
+  })
+}
+
+function getWeather() {
+  GetWeather().then(res => {
+    switch (res.data.weather) {
+      case '晴': weather.value = 'qing'; break
+      case '多云': weather.value = 'duoyun'; break
+      case '小雨': weather.value = 'xiaoyu'; break
+      case '中雨': weather.value = 'zhongyu'; break
+      case '大雨': weather.value = 'dayu'; break
+      case '雾': weather.value = 'wu'; break
+      case '小雪': weather.value = 'xiaoxue'; break
+    }
+  })
+}
 
-  const subList = reactive([
-    { name: '航道', status: false },
-    { name: '潮高', status: false },
-    { name: '船舶', status: true },
-    { name: '视频', status: false },
-    { name: '水下地形', status: false },
-    { name: '断面', status: false },
-    { name: '中燃船舶', status: false },
-  ])
-  
-  function handleToggleLayer(index) {
-    subList[index].status = !subList[index].status
-    if(subList[index].status===true) {
-      switch(index) {
-        case 0:
-          ueCallFlyToHD()
-          setTimeout(() => {
-            ueCallShowHangdaoLine()
-          }, 1000);
-          break
-        case 1:
-          ueCallCloseWarningReturn()
-          waterDeepShow.value = true
-          break
-        case 2:
-          ueCallfullExtent()
-          setTimeout(() => {
-            ueCallBoatRealtime()
-          }, 1000);
-          break
-        case 3:
-          ueCallFlyToSP()
-          bus.on('fly_Action', (data) => {
-            if(data.isOk=='true') {
-              ueCallOpenVideoFusion()
-              bus.off('fly_Action')
-            }
-          })
-          break
-        case 4:
-          bus.emit('toggle_sxdx', true)
-          clickWeeather.value=true
-          break
-        case 5:
-          if (clickWeeather.value) {
-            miForChangeShow.value = true
-            subList[index].status = true
-            ueCallShowAllMi()
-          }else {
-            subList[index].status = false
+const subList = reactive([
+  { name: '航道', status: false },
+  { name: '潮高', status: false },
+  { name: '船舶', status: true },
+  { name: '视频', status: false },
+  { name: '水下地形', status: false },
+  { name: '断面', status: false },
+  { name: '中燃船舶', status: false },
+])
+
+function handleToggleLayer(index) {
+  subList[index].status = !subList[index].status
+  if (subList[index].status === true) {
+    switch (index) {
+      case 0:
+        ueCallFlyToHD()
+        setTimeout(() => {
+          ueCallShowHangdaoLine()
+        }, 1000);
+        break
+      case 1:
+        ueCallCloseWarningReturn()
+        waterDeepShow.value = true
+        break
+      case 2:
+        ueCallfullExtent()
+        setTimeout(() => {
+          ueCallBoatRealtime()
+        }, 1000);
+        break
+      case 3:
+        ueCallFlyToSP()
+        bus.on('fly_Action', (data) => {
+          if (data.isOk == 'true') {
+            ueCallOpenVideoFusion()
+            bus.off('fly_Action')
           }
-          break
-        case 6:
-          ueCallFlyToZrcb()
-          break
-      }
-    } else {
-      switch(index) {
-        case 0:
-          ueCallCloseHangdaoLine()
-          break
-        case 1:
-          ueCallShowWarningReturn()
-          waterDeepShow.value = false
-          break
-        case 2:
-          ueCallClearBoatTime()
-          break
-        case 3:
-          ueCallCloseVideoFusion()
-          break
-        case 4:
-          clickWeeather.value=false
-          miForChangeShow.value = false
-          subList[index+1].status = false
-          ueCallCloseMi()
-          bus.emit('toggle_sxdx', false)
-          break
-        case 5:
-          miForChangeShow.value = false
-          ueCallCloseMi()
-          break
-        case 6:
-          ueCallfullExtent()
-          break
-      }
+        })
+        break
+      case 4:
+        bus.emit('toggle_sxdx', true)
+        clickWeeather.value = true
+        break
+      case 5:
+        if (clickWeeather.value) {
+          miForChangeShow.value = true
+          subList[index].status = true
+          ueCallShowAllMi()
+        } else {
+          subList[index].status = false
+        }
+        break
+      case 6:
+        ueCallFlyToZrcb()
+        break
+    }
+  } else {
+    switch (index) {
+      case 0:
+        ueCallCloseHangdaoLine()
+        break
+      case 1:
+        ueCallShowWarningReturn()
+        waterDeepShow.value = false
+        break
+      case 2:
+        ueCallClearBoatTime()
+        break
+      case 3:
+        ueCallCloseVideoFusion()
+        break
+      case 4:
+        clickWeeather.value = false
+        miForChangeShow.value = false
+        subList[index + 1].status = false
+        ueCallCloseMi()
+        bus.emit('toggle_sxdx', false)
+        break
+      case 5:
+        miForChangeShow.value = false
+        ueCallCloseMi()
+        break
+      case 6:
+        ueCallfullExtent()
+        break
     }
   }
-  const clickWeeather = ref(false)
-  const temperature = ref('8')
-  const time = useDateFormat(useNow(), 'HH:mm')
-  const date = useDateFormat(useNow(), 'YYYY.MM.DD')
-  const day = useDateFormat(useNow(), 'ddd', { locales: 'en-US' })
+}
+const clickWeeather = ref(false)
+const temperature = ref('8')
+const time = useDateFormat(useNow(), 'HH:mm')
+const date = useDateFormat(useNow(), 'YYYY.MM.DD')
+const day = useDateFormat(useNow(), 'ddd', { locales: 'en-US' })
 
-  const waterDeepShow = ref(false)
+const waterDeepShow = ref(false)
 
-  const miForChangeShow = ref(false)
+const miForChangeShow = ref(false)
 
-  function toggleScene() {
-    bus.emit('toggleSceneBox')
-  }
+function toggleScene() {
+  bus.emit('toggleSceneBox')
+}
+
+function togglePageAside() {
+  global_aside.toggleAside()
+}
 
-  function togglePageAside() {
-    global_aside.toggleAside()
-  }
-  
 </script>
 
 <style lang="scss" scoped>
@@ -332,10 +336,12 @@ export default {
     background: url('@/assets/imgs/header/bg-main.png') no-repeat;
     background-size: 100% 100%;
   }
-     .tab-icon {
-  width: 40px;
-  height: 40px;
-}
+
+  .tab-icon {
+    width: 40px;
+    height: 40px;
+  }
+
   .sub {
     position: absolute;
     top: 50px;
@@ -352,6 +358,7 @@ export default {
       left: 0;
       width: 100%;
       text-align: center;
+
       li {
         display: inline-block;
         // width: 110px;
@@ -359,6 +366,7 @@ export default {
         height: 72px;
         margin: 0 5px;
         text-align: center;
+
         span {
           display: inline-block;
           margin-top: 40px;
@@ -369,15 +377,18 @@ export default {
           color: #CCE6FF;
           opacity: 0.65;
           cursor: pointer;
+
           &:hover {
             transform: scale(1.1);
           }
         }
-        
+
       }
+
       .highlight {
         background: url('@/assets/imgs/header/bg-sub-highl.png') no-repeat;
         background-size: 100% 100%;
+
         span {
           color: #EDF3FF;
           opacity: 1;
@@ -402,7 +413,9 @@ export default {
     display: flex;
     justify-content: space-between;
     width: 100%;
-    .left, .right {
+
+    .left,
+    .right {
       display: flex;
       align-items: center;
       justify-content: flex-start;
@@ -412,28 +425,36 @@ export default {
   .right {
     margin-top: 8px;
     margin-right: 3px;
-    .humidity, .temperature {
+
+    .humidity,
+    .temperature {
       display: inline-block;
       width: 36px;
       height: 36px;
       margin-right: 6px;
     }
-      li{
-          list-style: none;
-          float: left;
-        i {
-          display: block;
-          height: 50px;
-          width: 50px;
-        }
+
+    li {
+      list-style: none;
+      float: left;
+
+      i {
+        display: block;
+        height: 50px;
+        width: 50px;
       }
+    }
+
     .humidity {
       background: url('@/assets/imgs/header/humidity.png') no-repeat;
     }
+
     .temperature {
       background: url('@/assets/imgs/header/temperature.png') no-repeat;
     }
-    .humidity, .temperature {
+
+    .humidity,
+    .temperature {
       background-size: contain;
     }
 
@@ -441,15 +462,18 @@ export default {
       text-align: left;
       margin-right: 9px;
       font-family: PFlight;
+
       span {
         display: block;
         color: #F6F6F6;
       }
+
       span:first-child {
         font-size: 16px;
         line-height: 16px;
         margin-bottom: 3px;
       }
+
       span:last-child {
         font-size: 8px;
         line-height: 8px;
@@ -475,23 +499,27 @@ export default {
     .right-btns {
       display: flex;
       align-items: center;
+
       &>i {
         display: inline-block;
         margin-right: 10px;
         cursor: pointer;
       }
+
       .rb-search {
         width: 30px;
         height: 30px;
         background: url('@/assets/imgs/header/search.png') no-repeat;
         background-size: contain;
       }
+
       .rb-fulls {
         width: 35px;
         height: 35px;
         background: url('@/assets/imgs/header/fulls.png') no-repeat;
         background-size: contain;
       }
+
       .rb-aside {
         width: 40px;
         height: 40px;
@@ -507,7 +535,7 @@ export default {
       justify-content: flex-start;
       align-items: center;
       // cursor: pointer;
-      
+
     }
 
     .now-time {
@@ -515,6 +543,7 @@ export default {
       font-size: 30px;
       margin-right: 16px;
       cursor: pointer;
+
       &:hover {
         filter: brightness(1.2);
       }
@@ -524,12 +553,14 @@ export default {
       position: relative;
       text-align: left;
       margin-right: 28px;
+
       span {
         color: #ccc;
         display: block;
         font-size: 12px;
         line-height: 14px;
       }
+
       &::after {
         content: '';
         position: absolute;
@@ -541,19 +572,22 @@ export default {
         background-color: #fff;
       }
     }
-    .waterUpDown{
+
+    .waterUpDown {
       display: inline-block;
       width: 32px;
       height: 32px;
       background: url('@/assets/imgs/cg.png') no-repeat;
       background-size: contain;
     }
-    .waterUpDownS{
+
+    .waterUpDownS {
       width: 32px;
       height: 32px;
       background: url('@/assets/imgs/cg_select.png') no-repeat;
       background-size: contain;
     }
+
     .weather {
       display: inline-block;
       width: 32px;
@@ -567,26 +601,32 @@ export default {
         background: url('@/assets/imgs/scene/w-qing.png') no-repeat;
         background-size: contain;
       }
+
       &.duoyun {
         background: url('@/assets/imgs/scene/w-duoyun.png') no-repeat;
         background-size: contain;
       }
+
       &.xiaoyu {
         background: url('@/assets/imgs/scene/w-xiaoyu.png') no-repeat;
         background-size: contain;
       }
+
       &.zhongyu {
         background: url('@/assets/imgs/scene/w-zhongyu.png') no-repeat;
         background-size: contain;
       }
+
       &.dayu {
         background: url('@/assets/imgs/scene/w-dayu.png') no-repeat;
         background-size: contain;
       }
+
       &.wu {
         background: url('@/assets/imgs/scene/w-wu.png') no-repeat;
         background-size: contain;
       }
+
       &.xiaoxue {
         background: url('@/assets/imgs/scene/w-xiaoxue.png') no-repeat;
         background-size: contain;

src/views/home/Tab.vue

@@ -4,26 +4,22 @@
       <div class="main" key="tabMain">
         <div class="main-bg"></div>
         <transition-group name="mainTabs" class="main-content" tag="div">
-          <div class="tab-item"
-            v-for="item,index in tabList.data"
-            :key="item.name"
-            @click="changePage(item.routeName)"
-          >
-            <img class="tab-icon" :src="index===2? item.iconOn: item.icon" alt="">
-            <span class="tab-label">{{item.name}}</span>
+          <div class="tab-item" v-for="item, index in tabList.data" :key="item.name" @click="changePage(item.routeName)">
+            <img class="tab-icon" :src="index === 2 ? item.iconOn : item.icon" alt="">
+            <span class="tab-label">{{ item.name }}</span>
           </div>
         </transition-group>
       </div>
       <div class="sub" v-if="showSub" key="tabSub">
         <div class="sub-content">
-          <span class="options" :class="{'highlight': subType==='hsx'}" @click="handleChangeSub('hsx')">杭申线</span>
+          <span class="options" :class="{ 'highlight': subType === 'hsx' }" @click="handleChangeSub('hsx')">杭申线</span>
           <i class="divider"></i>
           <!-- <span class="options" :class="{'highlight': subType==='chsx'}" @click="handleChangeSub('chsx')">长湖申线</span> -->
-          <span style="cursor: not-allowed;" class="options" :class="{'highlight': subType==='chsx'}">长湖申线</span>
+          <span style="cursor: not-allowed;" class="options" :class="{ 'highlight': subType === 'chsx' }">长湖申线</span>
         </div>
       </div>
     </transition-group>
-    <under-water v-if="sxdxShow"/>
+    <under-water v-if="sxdxShow" />
   </div>
 </template>
 
@@ -34,75 +30,82 @@ export default {
 </script>
 
 <script setup>
-  import { reactive, watch, nextTick, ref, onBeforeMount } from 'vue';
-  import { useRouter } from 'vue-router'
-  import { ueCallfullExtent, ueCallFlyToHsx } from '@/utils/UIInteractions'
-  import UnderWater from './cpns/UnderWater.vue';
-  import bus from '@/utils/bus'
-
-  const router = reactive(useRouter())
-  const showSub = ref(false)
-  const subType = ref('hsx')
-
-  function sortTabList() {
-    showSub.value = router.currentRoute.name==='AccessMonitor'? true : false
-    tabList.data.forEach((i,index) => {
-      if(i.routeName===router.currentRoute.name) {
-        let tabTemp = [...tabList.data]
-        while(index!==2) {
-          if(index<2) {
-            tabTemp.unshift(tabTemp.pop())
-            index++
-          }
-          if(index>2) {
-            tabTemp.push(tabTemp.shift())
-            index--
-          }
+import { reactive, watch, nextTick, ref, onBeforeMount, onMounted } from 'vue';
+import { useRouter } from 'vue-router'
+import { ueCallfullExtent, ueCallFlyToHsx } from '@/utils/UIInteractions'
+import UnderWater from './cpns/UnderWater.vue';
+import bus from '@/utils/bus'
+import { GetUserPrivilege } from "@/utils/user";
+
+const router = reactive(useRouter())
+const showSub = ref(false)
+const subType = ref('hsx')
+
+function sortTabList() {
+  showSub.value = router.currentRoute.name === 'AccessMonitor' ? true : false
+  tabList.data.forEach((i, index) => {
+    if (i.routeName === router.currentRoute.name) {
+      let tabTemp = [...tabList.data]
+      while (index !== 2) {
+        if (index < 2) {
+          tabTemp.unshift(tabTemp.pop())
+          index++
+        }
+        if (index > 2) {
+          tabTemp.push(tabTemp.shift())
+          index--
         }
-        tabList.data = tabTemp
-        return
       }
-    })
-  }
+      tabList.data = tabTemp
+      return
+    }
+  })
+}
+
+onBeforeMount(() => {
+  sortTabList()
+})
 
-  onBeforeMount(() => {
+watch(router, (n, o) => {
+  nextTick(() => {
     sortTabList()
   })
+}, { immediate: true })
 
-  watch(router, (n, o) => {
-    nextTick(() => {
-      sortTabList()
-    })
-  }, { immediate: true })
-
-  const tabList = reactive({data: [
+const tabList = reactive({
+  data: [
     { name: '交通安全', icon: require('@/assets/imgs/navi/icon-jtaq.png'), iconOn: require('@/assets/imgs/navi/icon-jtaq-s.png'), routeName: 'TrafficSafty' },
     { name: '航道疏浚', icon: require('@/assets/imgs/navi/icon-hdsj.png'), iconOn: require('@/assets/imgs/navi/icon-hdsj-s.png'), routeName: 'LaneDredge' },
     { name: '运营监管', icon: require('@/assets/imgs/navi/icon-yyjg.png'), iconOn: require('@/assets/imgs/navi/icon-yyjg-s.png'), routeName: 'OperationSupervision' },
     { name: '水上客运', icon: require('@/assets/imgs/navi/icon-ssky.png'), iconOn: require('@/assets/imgs/navi/icon-ssky-s.png'), routeName: 'WaterTransport' },
     { name: '卡口监控', icon: require('@/assets/imgs/navi/icon-kkjk.png'), iconOn: require('@/assets/imgs/navi/icon-kkjk-s.png'), routeName: 'AccessMonitor' },
-  ]})
+  ]
+})
 
-  function handleChangeSub(type) {
-    subType.value = type
-  }
+onMounted(() => [
+  GetUserPrivilege(tabList),
+])
 
-  function changePage(name) {
-    if (name === "AccessMonitor"){
-      ueCallFlyToHsx()
-    }else {
-      ueCallfullExtent()
-    }
+function handleChangeSub(type) {
+  subType.value = type
+}
 
-    router.push({
-      name
-    })
+function changePage(name) {
+  if (name === "AccessMonitor") {
+    ueCallFlyToHsx()
+  } else {
+    ueCallfullExtent()
   }
 
-  const sxdxShow = ref(false)
-  bus.on('toggle_sxdx', (param) => {
-    sxdxShow.value = param
+  router.push({
+    name
   })
+}
+
+const sxdxShow = ref(false)
+bus.on('toggle_sxdx', (param) => {
+  sxdxShow.value = param
+})
 
 </script>
 
@@ -141,7 +144,7 @@ export default {
       align-items: center;
       z-index: 4;
     }
-    
+
 
     .tab-item {
       display: flex;
@@ -149,14 +152,17 @@ export default {
       justify-content: center;
       align-items: center;
       cursor: pointer;
+
       &.disabed {
         cursor: not-allowed;
         opacity: 0.5;
       }
+
       .tab-icon {
         width: 85px;
         height: 85px;
       }
+
       .tab-label {
         font-size: 20px;
         font-family: YSBTH;
@@ -166,27 +172,32 @@ export default {
         transform: translateY(-3px);
         padding-right: 4px;
       }
+
       &:hover .tab-icon {
         transform: scale(1.05) translateY(-3px);
       }
     }
 
-    .tab-item:nth-child(1), .tab-item:nth-child(5) {
+    .tab-item:nth-child(1),
+    .tab-item:nth-child(5) {
       .tab-label {
         color: #F2FBFF;
       }
     }
 
-    .tab-item:nth-child(2), .tab-item:nth-child(4) {
+    .tab-item:nth-child(2),
+    .tab-item:nth-child(4) {
       transform: translateY(-10px);
     }
 
     .tab-item:nth-child(3) {
       transform: translateY(-20px);
+
       .tab-icon {
         width: 105px;
         height: 112px;
       }
+
       .tab-label {
         color: transparent;
         background: linear-gradient(0deg, #FFEFC9 0%, #FFD46F 100%);
@@ -197,17 +208,23 @@ export default {
 
   }
 
-  .mainTabs-move,.mainTabs-enter-active,.mainTabs-leave-active {
+  .mainTabs-move,
+  .mainTabs-enter-active,
+  .mainTabs-leave-active {
     transition: all 0.5s ease;
   }
 
-  .tab-move,.tab-enter-active {
+  .tab-move,
+  .tab-enter-active {
     transition: all 0.5s ease;
   }
+
   .tab-leave-active {
     display: none;
   }
-  .tab-enter-from, .tab-leave-to {
+
+  .tab-enter-from,
+  .tab-leave-to {
     opacity: 0;
     transform: translateY(30px);
   }
@@ -227,6 +244,7 @@ export default {
       justify-content: center;
       align-items: center;
       z-index: 4;
+
       .options {
         position: relative;
         width: 112px;
@@ -240,6 +258,7 @@ export default {
         -webkit-background-clip: text;
         cursor: pointer;
         z-index: 5;
+
         &::after {
           content: '';
           position: absolute;
@@ -255,6 +274,7 @@ export default {
         &.highlight {
           background: linear-gradient(0deg, #D6D660 0%, #FFFFFF 100%);
           -webkit-background-clip: text;
+
           &::after {
             background: url('@/assets/imgs/page_kkjk/sub-navi-s.png') no-repeat;
             background-size: 100% 100%;
@@ -271,7 +291,7 @@ export default {
         opacity: 0.4;
       }
     }
-    
+
   }
 }
 </style>

src/views/home/cpns/UnderWater.vue

@@ -2,27 +2,21 @@
   <div class="tab-sxdx">
     <i class="sxdx-scroll scroll-left" @click="handleSxdxScroll('left')"></i>
     <i class="sxdx-scroll scroll-right" @click="handleSxdxScroll('right')"></i>
-    <i class="switch-btn type-switch" @click="handleChangeType()"></i>
-<!--    切换视角-->
+    <i v-if="isShowBtn" class="switch-btn type-switch" @click="handleChangeType()"></i>
+    <!--    切换视角-->
     <i class="switch-btn view-switch" @click="handleChangeView()"></i>
-    <el-carousel
-      trigger="click"
-      class="sxdx-list-wrapper"
-      indicator-position="none"
-      arrow="never"
-      :autoplay="false"
-      ref="sxdx_carousel"
-    >
+    <el-carousel trigger="click" class="sxdx-list-wrapper" indicator-position="none" arrow="never" :autoplay="false"
+      ref="sxdx_carousel">
       <el-carousel-item v-for="page in sxdxData_len" :key="page" class="sxdx-list">
-        <div
-          v-for="item,index in sxdxData.value.slice((page-1)*4, (page-1)*4+4)"
-          :class="{'highlight': sxdxCurrent.slice(0,4)==item.year, 'disable': !(item.usable1||item.usable2)}"
-          class="sxdx-item"
-          @click="handleChooseSxdx(item,'.1')">
+        <div v-for="item, index in sxdxData.value.slice((page - 1) * 4, (page - 1) * 4 + 4)"
+          :class="{ 'highlight': sxdxCurrent.slice(0, 4) == item.year, 'disable': !(item.usable1 || item.usable2) }"
+          class="sxdx-item" @click="handleChooseSxdx(item, '.1')">
           <span>{{ item.year }}</span>
           <div>
-            <span :class="{'highlight': sxdxCurrent.slice(5)==1,'disable': !item.usable1 }" @click.stop="handleChooseSxdx(item,'.1')">上半年</span>
-            <span :class="{'highlight': sxdxCurrent.slice(5)==2,'disable': !item.usable2 }" @click.stop="handleChooseSxdx(item,'.2')">下半年</span>
+            <span :class="{ 'highlight': sxdxCurrent.slice(5) == 1, 'disable': !item.usable1 }"
+              @click.stop="handleChooseSxdx(item, '.1')">上半年</span>
+            <span :class="{ 'highlight': sxdxCurrent.slice(5) == 2, 'disable': !item.usable2 }"
+              @click.stop="handleChooseSxdx(item, '.2')">下半年</span>
           </div>
         </div>
       </el-carousel-item>
@@ -44,13 +38,19 @@ import 'element-plus/es/components/carousel-item/style/css'
 import { useNow, useDateFormat } from '@vueuse/core'
 import { ueCallCloseWater, ueCallOpenWater, ueCallChangeShuishen, ueCallFlyToSXDX, ueCallFlyToSXDXNew, ueCallFlyToSXDXStretch, ueCallChangeTime, ueCallGetNowTime } from '@/utils/UIInteractions'
 import bus from '@/utils/bus'
-import {setSxdxCamera} from '@/utils/map/Common'
-import {addLayerByName} from '@/utils/map/Layer'
-import {setOpacity} from '@/utils/map/ArcgisUtil'
+import { setSxdxCamera } from '@/utils/map/Common'
+import { addLayerByName } from '@/utils/map/Layer'
+import { setOpacity } from '@/utils/map/ArcgisUtil'
+import { GetUserLimit } from "@/apis/user";
+import { useRoute } from 'vue-router';
+
+
+
 onMounted(() => {
-  bus.emit('toggleUnderWaterLegend',{from: 'show_sxdx', state: true})
+  bus.emit('toggleUnderWaterLegend', { from: 'show_sxdx', state: true })
   initSxdxData()
   ueCallFlyToSXDX()
+  GetUserPrivilege()
   setTimeout(() => {
     ueCallChangeTime(12)
     ueCallCloseWater()
@@ -62,9 +62,9 @@ onBeforeUnmount(() => {
   ueCallGetNowTime()
   ueCallOpenWater()
   bus.emit('changeYuJiNum', 0)
-  bus.emit('toggleUnderWaterLegend',{from: 'show_sxdx', state: false})
+  bus.emit('toggleUnderWaterLegend', { from: 'show_sxdx', state: false })
 })
-
+const isShowBtn = ref(false)
 const sxdxCurrent = ref('2023.1')
 
 const sxdxCurrentShowDuanmian = ref(false)
@@ -72,8 +72,31 @@ const sxdxCurrentShowDuanmian = ref(false)
 
 const currentYear = useDateFormat(useNow(), 'YYYY').value
 
+// const testData = {
+//   "sysType": "MA==",
+//   "userId": "NTIzMw==",
+//   "type": "eXc="
+// }
+function GetUserPrivilege() {
+  let userData = useRoute().query
+  userData.type = userData.digitalTwainType
+  userData.sysType = "MA=="
+  delete userData.digitalTwainType
+  // console.log(userData)
+  GetUserLimit(userData).then((res) => {
+    // console.log(res)
+    res.data.Rows.forEach((item) => {
+      if (item.name.includes('航道断面')) {
+        isShowBtn.value = true
+      }
+
+    })
+  })
+}
+
+
 function initSxdxData() {
-  for(let i=Number(currentYear); i>=2020; i--) {
+  for (let i = Number(currentYear); i >= 2020; i--) {
     let usable1 = true
     let usable2 = true
     // if(i===2023) {
@@ -88,57 +111,57 @@ function initSxdxData() {
 }
 
 const sxdxData_len = computed(() => {
-  return Math.ceil(sxdxData.value.length/4)
+  return Math.ceil(sxdxData.value.length / 4)
 })
 
 const sxdx_carousel = ref(null)
 
 function handleSxdxScroll(type) {
-  if(type==='left') {
+  if (type === 'left') {
     sxdx_carousel.value.prev()
-  }else if(type==='right') {
+  } else if (type === 'right') {
     sxdx_carousel.value.next()
   }
 }
 
 function handleChooseSxdx(i, type) {
-  addLayerByName('sxdx',false)
+  addLayerByName('sxdx', false)
   setOpacity(0.4)
-  if(type==='.1'&&i.usable1) {
-    sxdxCurrent.value = i.year+'.1'
+  if (type === '.1' && i.usable1) {
+    sxdxCurrent.value = i.year + '.1'
     // addLayerByName(sxdxCurrent.value,true)
     // ueCallChangeShuishen(sxdxCurrent.value, currentType.value)
   }
-  if(type==='.2'&&i.usable2) {
-    sxdxCurrent.value = i.year+'.2'
+  if (type === '.2' && i.usable2) {
+    sxdxCurrent.value = i.year + '.2'
     // ueCallChangeShuishen(sxdxCurrent.value, currentType.value)
   }
-  if(i.year===2023&&type==='.1') {
+  if (i.year === 2023 && type === '.1') {
     bus.emit('changeYuJiNum', 2)
-  }else {
+  } else {
     bus.emit('changeYuJiNum', 0)
   }
 
-  sxdxData.value.forEach(j=>{
-    addLayerByName(j.year+'.1',false)
-    addLayerByName(j.year+'.2',false)
+  sxdxData.value.forEach(j => {
+    addLayerByName(j.year + '.1', false)
+    addLayerByName(j.year + '.2', false)
   })
 
-  addLayerByName(sxdxCurrent.value,true)
+  addLayerByName(sxdxCurrent.value, true)
 
 
 }
 
 
 bus.on('hiddenWater', () => {
-  sxdxData.value.forEach(i=>{
-    addLayerByName(i.year+'.1',false)
-    addLayerByName(i.year+'.2',false)
+  sxdxData.value.forEach(i => {
+    addLayerByName(i.year + '.1', false)
+    addLayerByName(i.year + '.2', false)
   })
 })
 
 
-const sxdxData = reactive({value: []})
+const sxdxData = reactive({ value: [] })
 
 const currentView = ref('up')
 
@@ -151,9 +174,9 @@ const currentType = ref('lashen')
 
 // 打开断面
 function handleChangeType() {
-  sxdxCurrentShowDuanmian.value=!sxdxCurrentShowDuanmian.value
-  addLayerByName("pm_"+sxdxCurrent.value,!sxdxCurrentShowDuanmian.value)
-
+  console.log(1111111111111111111111)
+  sxdxCurrentShowDuanmian.value = !sxdxCurrentShowDuanmian.value
+  addLayerByName("pm_" + sxdxCurrent.value, !sxdxCurrentShowDuanmian.value)
 
 
   // currentType.value = currentType.value==='lashen'? 'pingmian': 'lashen'
@@ -183,27 +206,33 @@ function handleChangeType() {
     width: 24px;
     height: 24px;
     cursor: pointer;
+
     &:hover {
       transform: scale(1.1);
     }
+
     &.view-switch {
       right: 45px;
       background: url('@/assets/imgs/navi/btn-view-change.png');
     }
+
     &.type-switch {
       left: 45px;
       background: url('@/assets/imgs/navi/btn-type-change.png');
     }
+
     background-size: cover;
   }
 
   .sxdx-list-wrapper {
     width: 100%;
     height: 100%;
+
     :deep(.el-carousel__container) {
       width: 100%;
       height: 100%;
     }
+
     .sxdx-list {
       display: flex;
       justify-content: space-between;
@@ -221,6 +250,7 @@ function handleChangeType() {
         height: 57px;
         background: url('@/assets/imgs/navi/btn-sxdx.png') no-repeat;
         background-size: 100% 100%;
+
         &>span {
           font-size: 20px;
           font-family: BarlowBold;
@@ -228,32 +258,38 @@ function handleChangeType() {
           line-height: 20px;
           margin-bottom: 3px;
         }
+
         &>div {
           width: 90px;
           display: flex;
           justify-content: space-between;
+
           span {
             font-size: 12px;
             color: rgba($color: #eee, $alpha: 0.8);
             cursor: pointer;
+
             &.disable {
               cursor: not-allowed;
               color: rgba($color: #eee, $alpha: 0.5);
             }
           }
         }
+
         &.highlight {
           width: 119px;
           height: 70px;
           transform: translateY(2px);
           background: url('@/assets/imgs/navi/btn-sxdx-h.png') no-repeat;
           background-size: 100% 100%;
+
           &>span {
             font-size: 24px;
             color: transparent;
-            background: linear-gradient(0deg, rgb(255, 227, 89) 10%, rgba(255,255,255,0.9) 90%);
+            background: linear-gradient(0deg, rgb(255, 227, 89) 10%, rgba(255, 255, 255, 0.9) 90%);
             -webkit-background-clip: text;
           }
+
           &>div {
             span.highlight {
               color: rgb(245, 204, 23);
@@ -261,9 +297,11 @@ function handleChangeType() {
             }
           }
         }
+
         &.disable {
           opacity: 0.6;
           cursor: not-allowed;
+
           &>div>span {
             cursor: not-allowed;
           }
@@ -280,11 +318,13 @@ function handleChangeType() {
     width: 35px;
     height: 59px;
     cursor: pointer;
+
     &.scroll-left {
       left: 80px;
       background: url('@/assets/imgs/navi/sxdx-arrow-left.png');
       background-size: contain;
     }
+
     &.scroll-right {
       right: 80px;
       background: url('@/assets/imgs/navi/sxdx-arrow-right.png');

src/views/home/cpns/tools/Tools.vue

@@ -3,13 +3,13 @@
     <div class="Tool-level">
       <div class="Tool-Header"><span class="title-dialog">图层列表</span></div>
       <div class="Tool-Border">
-          <li  v-for="item,index in itemForAll.data"
-               :key="item.name" :style="item.click? 'color:#F8E403': 'color:#CCE6FF'"   @click="chlickLi(item)">
-              <div>
-                <i class="Tool-ioc"></i>
-                <span>{{item.name}}</span>
-             </div>
-          </li>
+        <li v-for="item, index in itemForAll.data" :key="item.name"
+          :style="item.click ? 'color:#F8E403' : 'color:#CCE6FF'" @click="chlickLi(item)">
+          <div>
+            <i class="Tool-ioc"></i>
+            <span>{{ item.name }}</span>
+          </div>
+        </li>
       </div>
     </div>
   </div>
@@ -22,146 +22,153 @@ export default {
 </script>
 
 <script setup>
-  import {onMounted, onBeforeUnmount, ref,watch} from 'vue'
+import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import bus from '@/utils/bus'
-  import {setBoat} from "@/utils/map/Boat";
-  import {addLayer, clearMap, setOpacity} from "@/utils/map/ArcgisUtil";
-  import {addLayerByName} from '@/utils/map/Layer'
-  import {setVideoCamera} from '@/utils/map/Common'
-onMounted(() => {
+import { setBoat } from "@/utils/map/Boat";
+import { addLayer, clearMap, setOpacity } from "@/utils/map/ArcgisUtil";
+import { addLayerByName } from '@/utils/map/Layer'
+import { setVideoCamera } from '@/utils/map/Common'
+import { GetUserPrivilege } from "@/utils/user";
 
+onMounted(() => {
+  GetUserPrivilege(itemForAll.value)
 })
 
-  const  props= defineProps(['shipinRonghe'])
+const props = defineProps(['shipinRonghe'])
 
 onBeforeUnmount(() => {
 })
-  const  itemForAll=ref({
-    data: [{ name: '船舶',  indexName: 'cb' ,click:false},
-        { name: '视频融合',  indexName: 'sprh' ,click:false},
-      { name: '码头泊位',  indexName: 'mt' ,click:false},
-        { name: '客运码头',  indexName: 'kymt' ,click:false},
-        { name: '危险品码头',  indexName: 'wxpmt' ,click:false},
-      { name: '两岸精模',  indexName: 'jm' ,click:false},
-      { name: '两岸白模',  indexName: 'bm' ,click:false},
-      { name: '航道',  indexName: 'hd' ,click:false},
-      { name: '锚地',  indexName: 'md' ,click:false},
-      { name: '掉头区',  indexName: 'dtq' ,click:false},
-      { name: '警戒区',  indexName: 'jjq' ,click:false},
-      { name: '水上绿色综合服务区',  indexName: 'sszh' ,click:false},
-      { name: '航标',  indexName: 'hb' ,click:false},
-      { name: '水下地形',  indexName: 'sxdx' ,click:false}
-    ]})
-  const emit = defineEmits(['showView','hiddenView'])
-
-  watch(props,(n,o)=>{
-      if (!props.shipinRonghe)
-      {
-          itemForAll.value.data[1].click=false
-      }
-  })
-
-    function chlickLi(item) {
-        if (item.click)
-        {
-        item.click=false
-            if (item.indexName=='cb'){
-                setBoat(false)
-            }
-            addLayerByName(item.indexName,false)
-            if (item.indexName=='sxdx'){
-            // 操作水下地形
-             bus.emit('changeYuJiNum', 1)
-            bus.emit('toggle_sxdx', false)
-            bus.emit('hiddenWater')
-                setOpacity(1)
-            }
-            //视频融合
-            if (item.indexName=='sprh'){
-                emit('hiddenView')
-            }
+const itemForAll = ref({
+  data: [{ name: '船舶', indexName: 'cb', click: false },
+  { name: '视频融合', indexName: 'sprh', click: false },
+  { name: '码头泊位', indexName: 'mt', click: false },
+  { name: '客运码头', indexName: 'kymt', click: false },
+  { name: '危险品码头', indexName: 'wxpmt', click: false },
+  { name: '两岸精模', indexName: 'jm', click: false },
+  { name: '两岸白模', indexName: 'bm', click: false },
+  { name: '航道', indexName: 'hd', click: false },
+  { name: '锚地', indexName: 'md', click: false },
+  { name: '掉头区', indexName: 'dtq', click: false },
+  { name: '警戒区', indexName: 'jjq', click: false },
+  { name: '水上绿色综合服务区', indexName: 'sszh', click: false },
+  { name: '航标', indexName: 'hb', click: false },
+  { name: '水下地形', indexName: 'sxdx', click: false }
+  ]
+})
+const emit = defineEmits(['showView', 'hiddenView'])
 
-        }
-        else {
-            item.click=true
-            if (item.indexName=='cb'){
-            setBoat(true)
-            }
-            if (item.indexName=='sxdx'){
-                bus.emit('toggle_sxdx', true)
-                bus.emit('changeYuJiNum', 2)
-                setOpacity(0.4)
-            }
-            if (item.indexName=='sprh'){
-                setVideoCamera()
-                emit('showView')
-            }
-            addLayerByName(item.indexName,true)
-        }
+watch(props, (n, o) => {
+  if (!props.shipinRonghe) {
+    itemForAll.value.data[1].click = false
+  }
+})
+
+function chlickLi(item) {
+  if (item.click) {
+    item.click = false
+    if (item.indexName == 'cb') {
+      setBoat(false)
+    }
+    addLayerByName(item.indexName, false)
+    if (item.indexName == 'sxdx') {
+      // 操作水下地形
+      bus.emit('changeYuJiNum', 1)
+      bus.emit('toggle_sxdx', false)
+      bus.emit('hiddenWater')
+      setOpacity(1)
+    }
+    //视频融合
+    if (item.indexName == 'sprh') {
+      emit('hiddenView')
+    }
+
+  }
+  else {
+    item.click = true
+    if (item.indexName == 'cb') {
+      setBoat(true)
+    }
+    if (item.indexName == 'sxdx') {
+      bus.emit('toggle_sxdx', true)
+      bus.emit('changeYuJiNum', 2)
+      setOpacity(0.4)
+    }
+    if (item.indexName == 'sprh') {
+      setVideoCamera()
+      emit('showView')
     }
+    addLayerByName(item.indexName, true)
+  }
+}
 
 </script>
 
 <style lang="scss" scoped>
-#Tool-level{
+#Tool-level {
   position: absolute;
   bottom: -300px;
   left: calc(82% - 100px);
- transform: translateX(-50%);
+  transform: translateX(-50%);
   align-items: center;
   top: 10vh;
-    z-index: 30;
-  .Tool-level{
+  z-index: 30;
+
+  .Tool-level {
     height: 760px;
     width: 290px;
     background: url('../../../../assets/imgs/header/tclbbg.png') no-repeat;
-    background-size: 100%  100%;
-    .Tool-Header{
+    background-size: 100% 100%;
+
+    .Tool-Header {
       padding-top: 20px;
       height: 40px;
       width: 100%;
       text-align: left;
       position: relative;
       padding-left: 20px;
-  }
-    .Tool-Border{
-       height: 430px;
-       width: 100%;
-        flex-direction: column;
-        justify-content: space-between;
-
-        li {
-            padding-top:3%;
-            height: 40px;
-            list-style: none;
-            width: 100%;
-            padding-left:5%;
-          div{
-              padding-left:3%;
-              padding-bottom: 10px;
-             line-height: 25px;width: 80%;
-            background: url('@/assets/imgs/header/tczsx.png') no-repeat;
-              background-position: bottom;
-            background-size: 90% 5px;
-              display: flex;
-              .Tool-ioc{
-                  height: 25px;
-                  width: 10%;
-                  background: url('@/assets/imgs/header/tcx.png') no-repeat;
-                  background-size: 80%;
-                  background-position:center;
-              }
-              span{
-                  padding-left: 1%;
-                  height: 25px;
-                  font-size: 15px;
-                  text-align: left;
-                  width: 90%;
-              }
+    }
+
+    .Tool-Border {
+      height: 430px;
+      width: 100%;
+      flex-direction: column;
+      justify-content: space-between;
+
+      li {
+        padding-top: 3%;
+        height: 40px;
+        list-style: none;
+        width: 100%;
+        padding-left: 5%;
+
+        div {
+          padding-left: 3%;
+          padding-bottom: 10px;
+          line-height: 25px;
+          width: 80%;
+          background: url('@/assets/imgs/header/tczsx.png') no-repeat;
+          background-position: bottom;
+          background-size: 90% 5px;
+          display: flex;
+
+          .Tool-ioc {
+            height: 25px;
+            width: 10%;
+            background: url('@/assets/imgs/header/tcx.png') no-repeat;
+            background-size: 80%;
+            background-position: center;
+          }
+
+          span {
+            padding-left: 1%;
+            height: 25px;
+            font-size: 15px;
+            text-align: left;
+            width: 90%;
           }
         }
       }
-     }
+    }
   }
-
+}
 </style>