联调市详情页面

src/views/pqs/qualityInspeection/panorama/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="default-main" :style="height">
-        <div class="box">
+        <div class="box" >
             <DatePicker ref="datePickerRef" style="display: none" />
             <el-form :inline="true" :model="form" class="demo-form-inline">
                 <el-form-item>
@@ -16,7 +16,7 @@
                         :show-all-levels="false"
                         v-model="form.orgNo"
                         style="width: 100px"
-                        @changeName="changeName"
+                        @changeValue="changeValue"
                     />
                 </el-form-item>
                 <el-form-item>
@@ -33,11 +33,17 @@
         <!-- 地图 -->
         <!-- <Map /> -->
 
-        <!-- 左边 -->
-        <mapL ref="mapLRef" class="mapL" />
-
-        <!-- 右边 -->
-        <mapR ref="mapRRef" class="mapR" />
+        <!-- 省级 -->
+        <div v-show="control == 1">
+            <mapL ref="mapLRef" class="mapL" />
+            <mapR ref="mapRRef" class="mapR" />
+        </div>
+        <!-- 市级 -->
+        <div v-show="control == 2">
+            <cityMapL ref="cityMapLRef" class="mapL" />
+            <cityMapB ref="cityMapBRef" class="mapB" />
+            <cityMapR ref="cityMapRRef" class="mapR" />
+        </div>
     </div>
 </template>
 
@@ -49,6 +55,9 @@ import { useDictData } from '@/stores/dictData'
 import { mainHeight } from '@/utils/layout'
 import { Search, Refresh } from '@element-plus/icons-vue'
 import mapL from './components/mapL.vue'
+import cityMapL from './components/cityMapL.vue'
+import cityMapR from './components/cityMapR.vue'
+import cityMapB from './components/cityMapB.vue'
 import mapR from './components/mapR.vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
 const dictData = useDictData()
@@ -59,6 +68,8 @@ const datePickerRef = ref()
 const areaRef = ref()
 const mapLRef = ref()
 const mapRRef = ref()
+const cityMapLRef = ref()
+const cityMapRRef = ref()
 const options: any = ref([
     {
         name: dictData.state.area[0].name,
@@ -69,6 +80,7 @@ const options: any = ref([
         id: 1
     }
 ])
+const control = ref(1)
 const form: any = ref({
     name: '',
     orgNo: dictData.state.area[0].id,
@@ -76,17 +88,24 @@ const form: any = ref({
 })
 
 const height = mainHeight(10)
-const changeName = (e: any) => {
-    options.value[0].name = e
-
+// 获取区域名称
+const changeValue = (e: any) => {
+    options.value[0].name = e.label
+    if (e.level == 1) {
+        control.value = 1
+    } else {
+        control.value = 2
+    }
     info()
 }
+
 const reset = () => {
     form.value = {
         name: '',
         orgNo: dictData.state.area[0].id,
         isUpToGrid: 0
     }
+    control.value = 1
     info()
 }
 const info = () => {
@@ -99,9 +118,13 @@ const info = () => {
     form.value.endTime = `2024-07-30`
     form.value.searchEndTime = `2024-07-30`
     form.value.type = datePickerRef.value.interval
-
-    mapLRef.value.info(form.value)
-    mapRRef.value.info(form.value)
+    if (control.value == 1) {
+        mapLRef.value.info(form.value)
+        mapRRef.value.info(form.value)
+    } else {
+        cityMapRRef.value.info(form.value)
+        cityMapLRef.value.info(form.value)
+    }
 }
 onMounted(() => {
     info()
@@ -131,6 +154,11 @@ onMounted(() => {
     top: 10px;
     right: 10px;
 }
+.mapB {
+    position: absolute;
+    bottom: 0px;
+    left: 25%;
+}
 .default-main {
     margin: 10px 0 0 0;
 }