联调电网一张图

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

@@ -0,0 +1,135 @@
+<template>
+    <div class="default-main" :style="height">
+        <div class="box">
+            <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
+                        ref="areaRef"
+                        :show-all-levels="false"
+                        v-model="form.orgNo"
+                        style="width: 100px"
+                        @changeName="changeName"
+                    />
+                </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-button icon="el-icon-Refresh" @click="reset"></el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+
+        <!-- 地图 -->
+        <!-- <Map /> -->
+
+        <!-- 左边 -->
+        <mapL ref="mapLRef" class="mapL" />
+
+        <!-- 右边 -->
+        <mapR ref="mapRRef" class="mapR" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, provide } from 'vue'
+import Area from '@/components/form/area/index.vue'
+// import Map from './components/map.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'
+const dictData = useDictData()
+defineOptions({
+    name: '/panorama'
+})
+
+const areaRef = ref()
+const mapLRef = ref()
+const mapRRef = ref()
+const options: any = ref([
+    {
+        name: dictData.state.area[0].name,
+        id: 0
+    },
+    {
+        name: '上送国网',
+        id: 1
+    }
+])
+const form = ref({
+    name: '',
+    orgNo: dictData.state.area[0].id,
+    isUpToGrid: 0
+})
+
+const height = mainHeight(10)
+const changeName = (e: any) => {
+    options.value[0].name = e
+
+    info()
+}
+const reset = () => {
+    form.value = {
+        name: '',
+        orgNo: dictData.state.area[0].id,
+        isUpToGrid: 0
+    }
+    info()
+}
+const info = () => {
+    mapLRef.value.info(form.value)
+    mapRRef.value.info(form.value)
+}
+onMounted(() => {
+    info()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.box) {
+    position: absolute;
+    top: 10px;
+    left: 30%;
+    z-index: 1;
+    .el-select {
+        min-width: 100px;
+    }
+    .el-form-item {
+        margin-right: 15px;
+    }
+}
+.mapL {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+.mapR {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+.default-main {
+    margin: 10px 0 0 0;
+}
+.el-button:focus {
+    color: var(--color);
+    background-color: #fff;
+}
+.el-button:hover {
+    color: var(--el-color-white);
+    border-color: var(--el-button-hover-bg-color);
+    background-color: var(--el-button-hover-bg-color);
+    outline: 0;
+}
+</style>