同步现场代码

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

@@ -1,64 +1,61 @@
 <template>
-    <div class="default-main" :style="height">
-        <div class="box">
+    <div class="panorama" :style="height">
+        <div class="mapBox" v-show="lineInfo">
             <DatePicker ref="datePickerRef" style="display: none" />
             <el-form :inline="true" :model="form" class="demo-form-inline">
                 <el-form-item>
-                    <el-input v-model="form.name" placeholder="请输入设备名称" :suffix-icon="Search">
-                        <template #prefix>
-                            <img style="width: 30px" src="@/assets//img/GJDW.png" alt="" />
-                        </template>
-                    </el-input>
-                </el-form-item>
-                <el-form-item>
-                    <Area
+                    <!-- <Area
                         ref="areaRef"
                         :show-all-levels="false"
                         v-model="form.orgNo"
                         style="width: 100px"
                         @changeValue="changeValue"
-                    />
+                    /> -->
                 </el-form-item>
                 <el-form-item>
                     <el-select v-model="form.isUpToGrid" style="width: 100px" @change="info">
                         <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
                 </el-form-item>
-                <el-form-item>
+                <!-- <el-form-item>
                     <el-button icon="el-icon-Refresh" @click="reset"></el-button>
-                </el-form-item>
+                </el-form-item> -->
             </el-form>
         </div>
 
         <!-- 地图 -->
-        <!-- <Map /> -->
+        <!-- <Map ref="mapRef" @changeValue="changeValue" :lineInfo="lineInfo" @drop="drop" @show="infoShow" /> -->
+        <div v-show="lineInfo">
+            <!-- 省级 -->
+            <div v-show="control == 3">
+                <mapL ref="mapLRef" class="mapL" />
+                <mapR ref="mapRRef" class="mapR" />
+            </div>
+            <!-- 市级 -->
+            <!-- <div v-show="control == 4"> -->
+            <div v-show="control > 3">
+                <cityMapL ref="cityMapLRef" class="mapL" />
+                <cityMapR ref="cityMapRRef" class="mapR" />
+            </div>
+        </div>
 
-        <!-- 省级 -->
-        <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>
+        <Info v-if="!lineInfo" ref="InfoRef" @back="lineInfo = true" />
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, provide } from 'vue'
+import { onMounted, nextTick, ref, provide } from 'vue'
 import Area from '@/components/form/area/index.vue'
-// import Map from './components/map.vue'
+// import Map from './components/map1.vue'
 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 mapR from './components/mapR.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 Info from './components/line/info.vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
 const dictData = useDictData()
 defineOptions({
@@ -66,10 +63,14 @@ defineOptions({
 })
 const datePickerRef = ref()
 const areaRef = ref()
+const lineInfo = ref(true)
+const mapRef = ref()
 const mapLRef = ref()
+const InfoRef = ref()
 const mapRRef = ref()
 const cityMapLRef = ref()
 const cityMapRRef = ref()
+const list: any = [dictData.state.area[0], ...dictData.state.area[0].children]
 const options: any = ref([
     {
         name: dictData.state.area[0].name,
@@ -87,17 +88,31 @@ const form: any = ref({
     isUpToGrid: 0
 })
 
+
 const height = mainHeight(10)
 // 获取区域名称
 const changeValue = (e: any) => {
-    options.value[0].name = e.label
-    if (e.level == 1) {
-        control.value = 1
-    } else {
-        control.value = 2
-    }
+    form.value.orgNo = list.filter((item: any) => item.code == e.orgId)[0]?.id || dictData.state.area[0].id
+    options.value[0].name = e.name
+
+    control.value = e.type
+
     info()
 }
+//点击监测点详情
+const drop = (id: string) => {
+    lineInfo.value = false
+    nextTick(() => {
+        InfoRef.value.open(id)
+    })
+}
+// 关闭左右数据展示
+const infoShow = (e:boolean) => {
+    mapLRef.value.show = e
+    mapRRef.value.show = e
+    cityMapLRef.value.show = e
+    cityMapRRef.value.show = e
+}
 
 const reset = () => {
     form.value = {
@@ -105,7 +120,7 @@ const reset = () => {
         orgNo: dictData.state.area[0].id,
         isUpToGrid: 0
     }
-    control.value = 1
+
     info()
 }
 const info = () => {
@@ -118,7 +133,7 @@ const info = () => {
     // form.value.endTime = `2024-07-30`
     // form.value.searchEndTime = `2024-07-30`
     form.value.type = datePickerRef.value.interval
-    if (control.value == 1) {
+    if (control.value == 3) {
         mapLRef.value.info(form.value)
         mapRRef.value.info(form.value)
     } else {
@@ -128,17 +143,24 @@ const info = () => {
 }
 onMounted(() => {
     info()
+    // aaa()
 })
 </script>
 
 <style lang="scss" scoped>
-:deep(.box) {
+:deep(.mapBox) {
     position: absolute;
     top: 10px;
-    left: 30%;
+    left: calc(50% + 95px);
+
     z-index: 1;
     .el-select {
         min-width: 100px;
+
+        .el-select__wrapper {
+            height: 46px;
+            border-radius: 8px;
+        }
     }
     .el-form-item {
         margin-right: 15px;
@@ -156,13 +178,10 @@ onMounted(() => {
     // z-index: 1;
     right: 10px;
 }
-.mapB {
-    position: absolute;
-    bottom: 0px;
-    left: 25%;
-}
-.default-main {
+
+.panorama {
     margin: 10px 0 0 0;
+    position: relative;
 }
 .el-button:focus {
     color: var(--color);