feat(上海cim平台):

1.iframe嵌入

src/service/cim/cim.js

@@ -0,0 +1,15 @@
+import {
+    requestInstance_YYFN
+} from "@/service/index";
+
+
+
+export function queryMapTree(TYPE,LABELID) {
+    return requestInstance_YYFN({
+        url: '/class-tags/queryMapTree',
+        data:{
+            "TYPE":TYPE,
+            "LABEL_ID":LABELID
+        }
+    });
+}

src/views/cim/index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import {ref} from "vue";
+import {queryMapTree} from '@/service/cim/cim'
 import condition from './template/condition.vue'
 import weather from './template/weather.vue'
 
@@ -11,6 +12,8 @@ const menuIndex = ref(0)
 // 工具栏选中key
 const utilToolIndex = ref(0)
 
+const layerData = ref([])
+
 const layerFlag = ref(false)
 const weatherFlag = ref(false)
 
@@ -32,19 +35,22 @@ function handleUtilMenuSelect(key, keyPath) {
   utilToolIndex.value = key
 }
 
-// 根据参数选择模板
-function componentDisplayFlag(type, flag) {
-  switch (type) {
-    case 'parameter' :
-      layerFlag.value = !flag;
-      weatherFlag.value = false
-      break;
-    case 'weather' :
-      weatherFlag.value = !flag;
-      layerFlag.value = false;
-      break;
-  }
 
+
+// 打开天气组件
+function openWeatherFlag(flag) {
+  weatherFlag.value = flag;
+}
+
+// 打开参数组件
+function openDisplayFlag(flag) {
+  layerFlag.value = flag;
+  queryMapTree('二维', '1317').then(response => {
+    console.log(response.data.Rows[0].children, 123123);
+    layerData.value = response.data.Rows[0].children[0].children
+  }).catch(error => {
+    console.error("Error fetching queryMapTree:", error);
+  });
 }
 </script>
 
@@ -54,9 +60,15 @@ function componentDisplayFlag(type, flag) {
     <div id="div-head">
       <p class="font-ht title-font">上海CIM平台</p>
     </div>
-    <!-- 侧边工具栏   -->
-    <div id="div-right-side">
 
+    <!-- 待接入视频流   -->
+    <div>
+      <iframe
+          id="layerIframe"
+          style="pointer-events: auto;"
+          src="https://zh.wikipedia.org/wiki/Wikipedia"
+          >
+      </iframe>
     </div>
     <!-- 底部工具栏   -->
     <div id="div-bottom">
@@ -64,13 +76,16 @@ function componentDisplayFlag(type, flag) {
                @select="handleMenuSelect">
         <el-menu-item :index="1">
           <!-- 总体态势 -->
-          <img src="../../assets/imgs/cim/overallSituation1.png" v-if="menuIndex != 1">
-          <img class="img-select" src="../../assets/imgs/cim/overallSituation2.png" v-if="menuIndex == 1">
+          <img @click="openDisplayFlag(true)" src="../../assets/imgs/cim/overallSituation1.png" v-if="menuIndex != 1">
+          <img @click="openDisplayFlag(false)" class="img-select" src="../../assets/imgs/cim/overallSituation2.png"
+               v-if="menuIndex == 1">
         </el-menu-item>
         <el-menu-item :index="2">
           <!-- 实时感知 -->
-          <img src="../../assets/imgs/cim/perception1.png" v-if="menuIndex != 2">
-          <img class="img-select" src="../../assets/imgs/cim/perception2.png" v-if="menuIndex == 2">
+          <img src="../../assets/imgs/cim/perception1.png" v-if="menuIndex != 2"
+               @click="openDisplayFlag(true)">
+          <img class="img-select" src="../../assets/imgs/cim/perception2.png" v-if="menuIndex == 2"
+               @click="openDisplayFlag(false)">
         </el-menu-item>
         <el-menu-item :index="3">
           <!-- 车辆仿真模拟 -->
@@ -79,64 +94,67 @@ function componentDisplayFlag(type, flag) {
         </el-menu-item>
         <el-menu-item :index="4">
           <!-- 工地管理 -->
-          <img src="../../assets/imgs/cim/construction1.png" v-if="menuIndex != 4">
-          <img class="img-select" src="../../assets/imgs/cim/construction2.png" v-if="menuIndex == 4">
+          <img @click="openDisplayFlag(true)" src="../../assets/imgs/cim/construction1.png" v-if="menuIndex != 4">
+          <img @click="openDisplayFlag(false)" class="img-select" src="../../assets/imgs/cim/construction2.png"
+               v-if="menuIndex == 4">
         </el-menu-item>
       </el-menu>
     </div>
 
-    <div>
-      <!--      这里用布局只是为了让成为行内块,display修改样式和里面子组件会有问题-->
-      <el-row>
-        <el-col :span="8">
-          <condition v-if="layerFlag"/>
-        </el-col>
-        <el-col :span="8">
-          <weather v-if="weatherFlag"/>
-        </el-col>
-        <el-col :span="8">
-          <!--  工具栏具体内容  -->
-          <div style=" position: fixed; right: 20px;">
-            <el-menu @select="handleUtilMenuSelect" background-color="transparent" :collapse="true">
-              <el-menu-item :index="1">
-                <!-- 图层 -->
-                <img src="../../assets/imgs/cim/layer1.png" v-if="utilToolIndex != 1"  @click="componentDisplayFlag('parameter',layerFlag)">
-                <img src="../../assets/imgs/cim/layer2.png" v-if="utilToolIndex == 1" @click="componentDisplayFlag('parameter',layerFlag)">
-              </el-menu-item>
-              <el-menu-item :index="2">
-                <!-- 天气 -->
-                <img src="../../assets/imgs/cim/weather1.png" v-if="utilToolIndex != 2" @click="componentDisplayFlag('weather',weatherFlag)">
-                <img src="../../assets/imgs/cim/weather2.png" v-if="utilToolIndex == 2" @click="componentDisplayFlag('weather',weatherFlag)">
-              </el-menu-item>
-              <el-menu-item :index="3">
-                <!-- 侧面 -->
-                <img src="../../assets/imgs/cim/measureSurface1.png" v-if="utilToolIndex != 3">
-                <img src="../../assets/imgs/cim/measureSurface2.png" v-if="utilToolIndex == 3">
-              </el-menu-item>
-              <el-menu-item :index="4">
-                <!-- 测距 -->
-                <img src="../../assets/imgs/cim/ranging1.png" v-if="utilToolIndex != 4">
-                <img src="../../assets/imgs/cim/ranging2.png" v-if="utilToolIndex == 4">
-              </el-menu-item>
-              <el-menu-item :index="5">
-                <!-- 限高 -->
-                <img src="../../assets/imgs/cim/heightLimit1.png" v-if="utilToolIndex != 5">
-                <img src="../../assets/imgs/cim/heightLimit2.png" v-if="utilToolIndex == 5">
-              </el-menu-item>
-            </el-menu>
-
-          </div>
-        </el-col>
-      </el-row>
+    <!--  工具栏具体内容  -->
+    <condition :data="layerData" v-if="layerFlag"/>
+
+    <weather v-if="weatherFlag"/>
+
+    <div id="toolbar" style=" position: fixed; right: 20px;">
+      <el-menu @select="handleUtilMenuSelect" background-color="transparent" :collapse="true">
+        <el-menu-item :index="1">
+          <!-- 图层 -->
+          <img src="../../assets/imgs/cim/layer1.png" v-if="utilToolIndex != 1"
+               @click="openDisplayFlag(true)">
+          <img src="../../assets/imgs/cim/layer2.png" v-if="utilToolIndex == 1"
+               @click="openDisplayFlag(false)">
+        </el-menu-item>
+        <el-menu-item :index="2">
+          <!-- 天气 -->
+          <img src="../../assets/imgs/cim/weather1.png" v-if="utilToolIndex != 2"
+               @click="openWeatherFlag(true)">
+          <img src="../../assets/imgs/cim/weather2.png" v-if="utilToolIndex == 2"
+               @click="openWeatherFlag(false)">
+        </el-menu-item>
+        <el-menu-item :index="3">
+          <!-- 侧面 -->
+          <img src="../../assets/imgs/cim/measureSurface1.png" v-if="utilToolIndex != 3">
+          <img src="../../assets/imgs/cim/measureSurface2.png" v-if="utilToolIndex == 3">
+        </el-menu-item>
+        <el-menu-item :index="4">
+          <!-- 测距 -->
+          <img src="../../assets/imgs/cim/ranging1.png" v-if="utilToolIndex != 4">
+          <img src="../../assets/imgs/cim/ranging2.png" v-if="utilToolIndex == 4">
+        </el-menu-item>
+        <el-menu-item :index="5">
+          <!-- 限高 -->
+          <img src="../../assets/imgs/cim/heightLimit1.png" v-if="utilToolIndex != 5">
+          <img src="../../assets/imgs/cim/heightLimit2.png" v-if="utilToolIndex == 5">
+        </el-menu-item>
+      </el-menu>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
+#layerIframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+}
+
 #div-background {
   height: 100%;
   width: 100%;
-  background-image: url("@/assets/imgs/c062ae27629793.5b1edef82bc7a.jpg");
 
   #div-bottom {
     background-image: url("@/assets/imgs/cim/lowerBase.png");
@@ -145,6 +163,9 @@ function componentDisplayFlag(type, flag) {
   #div-head {
     background-image: url("@/assets/imgs/cim/bigTitle.png");
   }
+
+  #toolbar {
+  }
 }
 
 // 侧边样式

src/views/cim/template/condition.vue

@@ -1,118 +1,20 @@
 <script setup>
-import {ref} from "vue";
-import {Expand} from "@element-plus/icons-vue";
+import {ref, defineProps} from "vue";
 // Data
-const data = ref([{
-  id: '12987122',
-  name: '好滋好味鸡蛋仔',
-  category: '江浙小吃、小吃零食',
-  desc: '荷兰优质淡奶，奶香浓而不腻',
-  address: '上海市普陀区真北路',
-  shop: '王小虎夫妻店',
-  shopId: '10333',
-  child:[{name:'12312312'}]
-}, {
-  id: '12987123',
-  name: '好滋好味鸡蛋仔',
-  category: '江浙小吃、小吃零食',
-  desc: '荷兰优质淡奶，奶香浓而不腻',
-  address: '上海市普陀区真北路',
-  shop: '王小虎夫妻店',
-  shopId: '10333',
-  child:[{name:'12312312'}]
-}, {
-  id: '12987123',
-  name: '好滋好味鸡蛋仔',
-  category: '江浙小吃、小吃零食',
-  desc: '荷兰优质淡奶，奶香浓而不腻',
-  address: '上海市普陀区真北路',
-  shop: '王小虎夫妻店',
-  shopId: '10333',
-  child:[{name:'12312312'}]
-}, {
-  id: '12987123',
-  name: '好滋好味鸡蛋仔',
-  category: '江浙小吃、小吃零食',
-  desc: '荷兰优质淡奶，奶香浓而不腻',
-  address: '上海市普陀区真北路',
-  shop: '王小虎夫妻店',
-  shopId: '10333',
-  child:[{name:'12312312'}]
-}, {
-  id: '12987123',
-  name: '好滋好味鸡蛋仔',
-  category: '江浙小吃、小吃零食',
-  desc: '荷兰优质淡奶，奶香浓而不腻',
-  address: '上海市普陀区真北路',
-  shop: '王小虎夫妻店',
-  shopId: '10333',
-  child:[{name:'12312312'}]
-}, {
-  id: '12987123',
-  name: '好滋好味鸡蛋仔',
-  category: '江浙小吃、小吃零食',
-  desc: '荷兰优质淡奶，奶香浓而不腻',
-  address: '上海市普陀区真北路',
-  shop: '王小虎夫妻店',
-  shopId: '10333',
-  child:[{name:'12312312'}]
-}, {
-  id: '12987123',
-  name: '好滋好味鸡蛋仔',
-  category: '江浙小吃、小吃零食',
-  desc: '荷兰优质淡奶，奶香浓而不腻',
-  address: '上海市普陀区真北路',
-  shop: '王小虎夫妻店',
-  shopId: '10333',
-  child:[{name:'12312312'}]
-}, {
-  id: '12987123',
-  name: '好滋好味鸡蛋仔',
-  category: '江浙小吃、小吃零食',
-  desc: '荷兰优质淡奶，奶香浓而不腻',
-  address: '上海市普陀区真北路',
-  shop: '王小虎夫妻店',
-  shopId: '10333',
-  child:[{name:'12312312'}]
-}, {
-  id: '12987123',
-  name: '好滋好味鸡蛋仔',
-  category: '江浙小吃、小吃零食',
-  desc: '荷兰优质淡奶，奶香浓而不腻',
-  address: '上海市普陀区真北路',
-  shop: '王小虎夫妻店',
-  shopId: '10333',
-  child:[{name:'12312312'}]
-}, {
-  id: '12987123',
-  name: '好滋好味鸡蛋仔',
-  category: '江浙小吃、小吃零食',
-  desc: '荷兰优质淡奶，奶香浓而不腻',
-  address: '上海市普陀区真北路',
-  shop: '王小虎夫妻店',
-  shopId: '10333',
-  child:[{name:'12312312'}]
-}, {
-  id: '12987123',
-  name: '好滋好味鸡蛋仔',
-  category: '江浙小吃、小吃零食',
-  desc: '荷兰优质淡奶，奶香浓而不腻',
-  address: '上海市普陀区真北路',
-  shop: '王小虎夫妻店',
-  shopId: '10333',
-  child:[{name:'12312312'}]
-}]);
+
+
+const props = defineProps({
+  data: Array,
+});
 
 </script>
 
 <template>
 
   <div class="div-background">
-<!--    default-expand-all-->
-
     <el-table
         default-expand-all
-        :data="data"
+        :data="props.data"
         :height="800"
         class="eltab"
         :header-cell-style="{backgroundColor: 'transparent',color:'#e8eef6'}"
@@ -121,12 +23,12 @@ const data = ref([{
     >
       <el-table-column width="30">
         <template #default="{ row }">
-          <img src="../../../assets/imgs/cim/drop.png">
+          <img src="@/assets/imgs/cim/drop.png">
         </template>
       </el-table-column>
       <el-table-column
           label="数据资源"
-          prop="name"
+          prop="label"
           width="190"
       >
       </el-table-column>
@@ -135,16 +37,16 @@ const data = ref([{
           <div class="expand-context-font" style="padding-left: 80px">
             <el-table
                 :show-header="false"
-                :data="props.row.child"
-                :row-style="{backgroundColor: 'transparent',color:'#f5fffd',fontSize:'15px'}"
+                :data="props.row.children"
+                :row-style="{backgroundColor: 'transparent',color:'#f5fffd',fontSize:'18px'}"
             >
               <el-table-column
                   label="数据资源"
-                  prop="name"
+                  prop="label"
                   width="185"
               >
               </el-table-column>
-              <el-table-column type="selection" >
+              <el-table-column type="selection">
 
               </el-table-column>
             </el-table>
@@ -165,24 +67,26 @@ const data = ref([{
 
 // 设置背景图
 .div-background {
-  background-image: url('@/assets/imgs/cim/layer.png');
-  background-size: 100%;
-  background-color: transparent !important;
-  max-width: 438px;
-  min-height: 750px;
+  //background-image: url('@/assets/imgs/cim/layer.png');
+  //background-size: 100%;
+  //background-color: transparent !important;
+  min-width: 450px;
+  //min-height: 750px;
+  position: fixed;
 }
 
 // 表格偏移
 .eltab {
-  max-width: 320px;
-  position: fixed;
-  left: 45px;
-  top: 85px;
+  left: 0px;
+  top: 20px;
 }
 
 // 设置隐藏行背景色
 :deep .el-table {
   background-color: transparent !important;
+  background-image: url('@/assets/imgs/cim/layer.png');
+  background-position: 0 -20px;
+  background-size: 100% 100%;
 }
 
 // 修改鼠标经过表格的颜色
@@ -208,6 +112,7 @@ const data = ref([{
   font-weight: 400;
   color: #f5fffd;
 }
+
 // 覆盖展开图标样式
 :deep(.el-table .el-table__expand-icon) {
   background-image: url('@/assets/imgs/cim/expand.png'); // 展开图标