src/components/global/MapContainer.vue
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2024-10-25 15:07:51 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2024-11-27 15:23:52 * @LastEditTime: 2024-11-27 19:29:23 * @FilePath: \bigScreen\src\components\global\MapContainer.vue * @Description: * @@ -63,6 +63,8 @@ }) onUnmounted(() => { window.$viewer && window.$viewer.destroy() delete window.$viewer store.setLoadMap(false) }) </script> src/components/global/publicContent.vue
File was renamed from src/views/rt/components/box/publicContent.vue @@ -8,6 +8,11 @@ * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. --> <script> export default { name: 'publicContent' } </script> <script setup> </script> src/main.js
@@ -27,6 +27,7 @@ import MapContainer from 'components/global/MapContainer.vue' import publicBox from 'components/global/publicBox.vue' import TitleBox from 'components/global/TitleBox.vue' import publicContent from 'components/global/publicContent.vue' import { getElementLabelLine } from 'element-tree-line' import 'element-tree-line/dist/style.css' @@ -46,6 +47,7 @@ app.component('MapContainer', MapContainer) app.component('publicBox', publicBox) app.component('TitleBox', TitleBox) app.component('publicContent', publicContent) app.use(router) app.use(ElementPlus) src/pages/layout/components/mainSearch.vue
@@ -49,7 +49,7 @@ } } function getFuzzyQuery() { function getFuzzyQuery () { fuzzyQuery({ name: searchVal.value }).then(res => { @@ -119,7 +119,7 @@ } function clearPoint() { function clearPoint () { let arr = Object.keys(addTileLayers) arr.forEach(i => { addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i]) @@ -129,7 +129,7 @@ onUnmounted(() => { let arr = Object.keys(addTileLayers) arr.forEach(i => { addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i]) addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i]) }) }) </script> src/pages/layout/components/scomponents/layersControl.vue
@@ -882,7 +882,7 @@ addTileLayers[item.layerName].forEach(m => m.show = false) } else { addTileLayers[item.layerName].clear() window.$viewer.removeLayer(addTileLayers[item.layerName]) window.$viewer && window.$viewer.removeLayer(addTileLayers[item.layerName]) delete addTileLayers[item.layerName] } @@ -967,7 +967,7 @@ function destroy () { let arr = Object.keys(addPupoLayers) arr.filter(i => i != 'hgyq').forEach(i => { addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i]) addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i]) }) addPupoLayers = {} } @@ -975,13 +975,13 @@ onUnmounted(() => { if (tileLayers) { tileLayers.clear() window.$viewer.removeLayer(tileLayers) window.$viewer && window.$viewer.removeLayer(tileLayers) tileLayers = null } let arr = Object.keys(addTileLayers) arr.filter(i => i != 'hgyq').forEach(i => { addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i]) addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i]) }) // 弹窗销毁 destroy() src/pages/layout/components/scomponents/tool/curtain.vue
@@ -2,25 +2,25 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2024-10-29 15:48:36 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2024-10-29 19:53:49 * @FilePath: \bigScreen\src\views\layout\components\scomponents\tool\location.vue * @LastEditTime: 2024-11-27 19:17:04 * @FilePath: \bigScreen\src\pages\layout\components\scomponents\tool\curtain.vue * @Description: * * Copyright (c) 2024 by shuishen, All Rights Reserved. --> <template> <public-box style="z-index: 100;"> <template #name> <div class="name"><i class="fa fa-map-pin"></i> 卷帘对比 </div> </template> <public-box style="z-index: 100;"> <template #name> <div class="name"><i class="fa fa-map-pin"></i> 卷帘对比 </div> </template> <template #close> <div class="close cursor-p" @click="$emit('closeChild')"><i class="fa fa-close"></i></div> </template> <template #close> <div class="close cursor-p" @click="$emit('closeChild')"><i class="fa fa-close"></i></div> </template> <template #content> <div class="cur-btn"> <!-- <div class="m-4"> <template #content> <div class="cur-btn"> <!-- <div class="m-4"> <p>左侧图层</p> <el-select class="transparent-bg" v-model="value1" placeholder="天地图"> <el-option v-for="item in components" :key="item.value" :label="item.label" :value="item.value" /> @@ -32,11 +32,11 @@ <el-option v-for="item in components" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </div> --> </div> </template> </public-box> </div> </template> </public-box> </template> <script setup> const value1 = ref([]) const value2 = ref([]) @@ -44,65 +44,65 @@ onMounted(() => { window.$viewer.sceneSplit.enable = true window.$viewer.sceneSplit.enable = true }) // 关闭 const close = () => { window.$viewer.sceneSplit.enable = false window.$viewer.sceneSplit.enable = false } const flyTo = () => { // window.$viewer.flyToPosition(new DC.Position(longitude.value, latitude.value, height.value, 0, -90, 0), () => { }, 3) // window.$viewer.flyToPosition(new DC.Position(longitude.value, latitude.value, height.value, 0, -90, 0), () => { }, 3) } onUnmounted(() => { window.$viewer.sceneSplit.enable = false window.$viewer && (window.$viewer.sceneSplit.enable = false) }) const components = [ { label: '天地图', value: '1' }, { label: '谷歌影像', value: '2' }, { label: '谷歌矢量', value: '3' }, { label: '高德影像', value: '4' }, { label: '天地图', value: '1' }, { label: '谷歌影像', value: '2' }, { label: '谷歌矢量', value: '3' }, { label: '高德影像', value: '4' }, ] </script> <style lang="scss" scoped > <style lang="scss" scoped> .cur-btn { margin: 10px 0; display: flex; margin: 10px 0; display: flex; // justify-content: center; // align-items: center; // justify-content: center; // align-items: center; // &.el-select { // width: 50px; // } // &.el-select { // width: 50px; // } } .m-4 { text-align: center; width: 200px; text-align: center; width: 200px; } .transparent-bg { background: transparent; background: transparent; } // 重新el——select样式 ::v-deep .el-select__wrapper { background: transparent; background: transparent; } ::v-deep .el-select-dropdown { // background: transparent; background-color: aqua; // background: transparent; background-color: aqua; } ::v-deep .el-select .el-select__placeholder { color: #fff; color: #fff; } </style> src/views/companyInfo/components/box/dataContent.vue
@@ -113,7 +113,7 @@ onUnmounted(() => { let arr = Object.keys(addTileLayers) arr.forEach(i => { addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i]) addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i]) }) }) </script> src/views/companyInfo/components/box/fireTrend.vue
@@ -166,7 +166,7 @@ function destroy () { let arr = Object.keys(addTileLayers) arr.forEach(i => { addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i]) addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i]) }) addTileLayers = {} } @@ -174,7 +174,7 @@ function destroyPupoLayers () { let arr = Object.keys(addPupoLayers) arr.filter(i => i != 'hgyq').forEach(i => { addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i]) addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i]) }) addPupoLayers = {} } src/views/companyInfo/components/box/unitContent.vue
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2023-03-10 15:27:59 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2024-11-27 16:14:10 * @LastEditTime: 2024-11-27 19:15:59 * @FilePath: \bigScreen\src\views\companyInfo\components\box\unitContent.vue * @Description: * @@ -17,113 +17,113 @@ import { getList } from "@/api/space/space" const { VITE_APP_BASE } = import.meta.env let image = ref( [{ label: '阀', value: VITE_APP_BASE + 'img/mapicon/ysf.png' } , { label: '池', value: VITE_APP_BASE + 'img/mapicon/yjc.png' } , { label: '泵', value: VITE_APP_BASE + 'img/mapicon/yjb.png' }] [{ label: '阀', value: VITE_APP_BASE + 'img/mapicon/ysf.png' } , { label: '池', value: VITE_APP_BASE + 'img/mapicon/yjc.png' } , { label: '泵', value: VITE_APP_BASE + 'img/mapicon/yjb.png' }] ) const resData = reactive({ data: [] data: [] }) const curSelect = ref('') let addTileLayers = {} let addPupoLayers = {} onMounted(() => { handleCheckChange() handleCheckChange() }) const handleCheckChange = () => { let companyInfo = JSON.parse(localStorage.getItem('companyInfo')) // resData.data.forEach(item => { // if (row.value == item.value) { if (!addTileLayers[companyInfo.name]) { addTileLayers[companyInfo.name] = new DC.HtmlLayer(companyInfo.name) window.$viewer.addLayer(addTileLayers[companyInfo.name]) getList({ firmId: companyInfo.id, size: 1000, // type: item.type, }).then(res => { let data = res.data.data.records data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => { let img = image.value.filter(l => i.name.includes(l.label)) img = img.length > 0 ? img : image.value let iconEl = `<div class="map-name">${i.name}</div> let companyInfo = JSON.parse(localStorage.getItem('companyInfo')) // resData.data.forEach(item => { // if (row.value == item.value) { if (!addTileLayers[companyInfo.name]) { addTileLayers[companyInfo.name] = new DC.HtmlLayer(companyInfo.name) window.$viewer.addLayer(addTileLayers[companyInfo.name]) getList({ firmId: companyInfo.id, size: 1000, // type: item.type, }).then(res => { let data = res.data.data.records data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => { let img = image.value.filter(l => i.name.includes(l.label)) img = img.length > 0 ? img : image.value let iconEl = `<div class="map-name">${i.name}</div> <div class="map-icon"> <img src="${img[0].value}"> </div>` let divIcon = new DC.DivIcon( new DC.Position(i.lng, i.lat, 64), `<div class="public-map-popup ${'yjc-box'}"> ${iconEl} </div>` ) divIcon.attrParams = i let incident = (e) => { const { attrParams } = e.overlay // 删除 destroy() if (!attrParams.imageUrl) { return } addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name) window.$viewer.addLayer(addPupoLayers[attrParams.name]) let iconEl = `<div class="marsBlueGradientPnl"> let divIcon = new DC.DivIcon( new DC.Position(i.lng, i.lat, 64), `<div class="public-map-popup ${'yjc-box'}"> ${iconEl} </div>` ) divIcon.attrParams = i let incident = (e) => { const { attrParams } = e.overlay // 删除 destroy() if (!attrParams.imageUrl) { return } addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name) window.$viewer.addLayer(addPupoLayers[attrParams.name]) let iconEl = `<div class="marsBlueGradientPnl"> <div>${attrParams.fullName}</div> <img src="${attrParams.imageUrl}" /> </div>` let divIcon = new DC.DivIcon( new DC.Position(attrParams.lng, attrParams.lat, 64), `<div class="public-map-popup-two"> let divIcon = new DC.DivIcon( new DC.Position(attrParams.lng, attrParams.lat, 64), `<div class="public-map-popup-two"> ${iconEl} </div>` ) let incident = () => { destroy() } divIcon.on(DC.MouseEventType.CLICK, incident) addPupoLayers[attrParams.name].addOverlay(divIcon) } ) let incident = () => { destroy() } divIcon.on(DC.MouseEventType.CLICK, incident) addPupoLayers[attrParams.name].addOverlay(divIcon) } // if (item.incident) incident = item.incident // if (item.incident) incident = item.incident divIcon.on(DC.MouseEventType.CLICK, incident) divIcon.on(DC.MouseEventType.CLICK, incident) addTileLayers[companyInfo.name].addOverlay(divIcon) }) }) } else { addTileLayers[companyInfo.name].show = true } // } else { // if (addTileLayers[item.label]) { // addTileLayers[item.label].show = false // } // } // }) addTileLayers[companyInfo.name].addOverlay(divIcon) }) }) } else { addTileLayers[companyInfo.name].show = true } // } else { // if (addTileLayers[item.label]) { // addTileLayers[item.label].show = false // } // } // }) } // 销毁 function destroy() { let arr = Object.keys(addPupoLayers) arr.filter(i => i != 'hgyq').forEach(i => { addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i]) }) addPupoLayers = {} function destroy () { let arr = Object.keys(addPupoLayers) arr.filter(i => i != 'hgyq').forEach(i => { addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i]) }) addPupoLayers = {} } nextTick(() => { EventBus.emit('restHandleCheckChange', `3-3-2`) EventBus.emit('restHandleCheckChange', `3-3-4`) EventBus.emit('restHandleCheckChange', `3-3-2`) EventBus.emit('restHandleCheckChange', `3-3-4`) }) onUnmounted(() => { let arr = Object.keys(addTileLayers) arr.forEach(i => { addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i]) }) destroy() EventBus.emit('restHandleDelChange', `3-3-2`) EventBus.emit('restHandleDelChange', `3-3-4`) let arr = Object.keys(addTileLayers) arr.forEach(i => { addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i]) }) destroy() EventBus.emit('restHandleDelChange', `3-3-2`) EventBus.emit('restHandleDelChange', `3-3-4`) }) </script> <template> <div class="left-container cur-container"> <!-- <div class="tablist h100"> <div class="left-container cur-container"> <!-- <div class="tablist h100"> <div class="cursor-p" :class="{ on: showOn(item) }" v-for="item, index in resData.data" :key="index" @click="tabClick(item)"> <div class="nowrap-ellipsis-hidden"> @@ -131,34 +131,34 @@ </div> </div> </div> --> </div> </div> </template> <style lang="scss" scoped> .cur-container { background: transparent; pointer-events: none; background: transparent; pointer-events: none; .tablist { pointer-events: all; .tablist { pointer-events: all; &>div { margin-top: 16px; padding: 10px; width: 64px; height: 64px; line-height: 64px; text-align: center; border-radius: 50%; box-shadow: inset 0 0 40px #409eff; color: #fff; box-sizing: content-box; &>div { margin-top: 16px; padding: 10px; width: 64px; height: 64px; line-height: 64px; text-align: center; border-radius: 50%; box-shadow: inset 0 0 40px #409eff; color: #fff; box-sizing: content-box; &.on { position: relative; color: #75b1ff; } } &.on { position: relative; color: #75b1ff; } } } } </style> src/views/companyInfo/index.vue
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2024-11-08 11:00:30 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2024-11-25 16:45:39 * @LastEditTime: 2024-11-27 19:16:37 * @FilePath: \bigScreen\src\views\companyInfo\index.vue * @Description: * @@ -41,11 +41,11 @@ curCompanyWall.addOverlay(wall) onMounted(() => { window.$viewer.flyTo(curCompanyWall) window.$viewer && window.$viewer.flyTo(curCompanyWall) }) onUnmounted(() => { window.$viewer.removeLayer(curCompanyWall) window.$viewer && window.$viewer.removeLayer(curCompanyWall) }) const handleChildEvent = (data) => { src/views/pd/components/dynamicPanel.vue
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2024-11-09 15:41:35 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2024-11-27 15:19:10 * @LastEditTime: 2024-11-27 19:15:35 * @FilePath: \bigScreen\src\views\pd\components\dynamicPanel.vue * @Description: * @@ -430,9 +430,9 @@ clearAll() tc.clear() dynamicVectorLayer && window.$viewer.removeLayer(dynamicVectorLayer) dynamicHtmlLayer && window.$viewer.removeLayer(dynamicHtmlLayer) dynamicLineVectorLayer && window.$viewer.removeLayer(dynamicLineVectorLayer) dynamicVectorLayer && window.$viewer && window.$viewer.removeLayer(dynamicVectorLayer) dynamicHtmlLayer && window.$viewer && window.$viewer.removeLayer(dynamicHtmlLayer) dynamicLineVectorLayer && window.$viewer && window.$viewer.removeLayer(dynamicLineVectorLayer) }) </script> src/views/rs/components/box/dataContent.vue
@@ -56,7 +56,7 @@ total: 0, } function positionColor() { function positionColor () { return (row) => { if ( (row.X && row.X != 0) || @@ -71,7 +71,7 @@ } } function positionDisabled() { function positionDisabled () { return (row) => { if ( (row.X && row.X != 0) || @@ -124,7 +124,7 @@ }) let addPupoLayers = {} // 行点击 function rowClick(row, column, event) { function rowClick (row, column, event) { if (row.lng && row.lat) { window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0)) // 显示企业信息 @@ -152,7 +152,7 @@ // 查看详情 function goDetail(row) { } function goDetail (row) { } const searchBtn = (params) => { resetPage() @@ -213,10 +213,10 @@ }) // 销毁 function destroyPupoLayers() { function destroyPupoLayers () { let arr = Object.keys(addPupoLayers) arr.forEach(i => { addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i]) addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i]) }) addPupoLayers = {} } @@ -224,7 +224,8 @@ <template> <div class="w100 h0 flex-1 flex f-d-c"> <global-search :options="options" @searchBtn="searchBtn" @resetBtn="resetBtn" ref="SeachBarCondition"></global-search> <global-search :options="options" @searchBtn="searchBtn" @resetBtn="resetBtn" ref="SeachBarCondition"></global-search> <!-- <div class="cur-container"> <div class="tablist"> <div class="cursor-p" :class="{ on: showOn(item) }" v-for="item, index in resData.data" :key="index" @@ -237,7 +238,8 @@ </div> --> <div class="h0 flex-1 table-content" ref="TableContent" v-loading="loading" element-loading-background="rgba(46, 81, 136, 0.9)"> <el-table empty-text="暂无数据" @row-click="rowClick" border :data="tableData" :height="curTableHeight" style="width: 100%"> <el-table empty-text="暂无数据" @row-click="rowClick" border :data="tableData" :height="curTableHeight" style="width: 100%"> <el-table-column align="center" label="ID" width="42" prop="rank"> <template #default="{ $index, row }"> {{ (pages.page - 1) * pages.pageSize + $index + 1 }} src/views/rt/components/box/fireContent.vue
File was deleted src/views/rt/components/box/fireSource.vue
File was deleted src/views/rt/components/box/fireTrend.vue
File was deleted src/views/rt/components/box/occurStatistics.vue
File was deleted src/views/rt/components/box/unitContent.vue
File was deleted src/views/rt/components/dataContent.vue
File was renamed from src/views/rt/components/box/dataContent.vue @@ -2,14 +2,13 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2023-03-13 14:54:26 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2024-11-27 14:32:26 * @FilePath: \bigScreen\src\views\rt\components\box\dataContent.vue * @LastEditTime: 2024-11-27 19:28:29 * @FilePath: \bigScreen\src\views\rt\components\dataContent.vue * @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. --> <script setup> import publicContent from "./publicContent.vue" import { getList } from "@/api/rescueTeam/rescueTeam" import { getPage } from '@/api/indParkInfo' import { reactive } from "vue" src/views/rt/components/leftContainer.vue
File was deleted src/views/rt/components/rightContainer.vue
File was deleted src/views/rt/index.vue
@@ -2,29 +2,30 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2023-03-10 15:27:59 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2023-03-13 16:02:07 * @FilePath: \forest-fire\src\views\statistics\index.vue * @LastEditTime: 2024-11-27 19:28:17 * @FilePath: \bigScreen\src\views\rt\index.vue * @Description: 综合设计 * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. --> <script setup> import leftContainer from './components/leftContainer.vue' import rightContainer from './components/rightContainer.vue' import dataContent from './components/dataContent.vue' </script> <template> <div class="container page-container"> <left-container></left-container> <!-- <right-container></right-container> --> <div class="container page-container"> <div class="data box w100 h100"> <data-content></data-content> </div> </div> </template> <style lang="scss" scoped> .container { position: absolute; width: 100%; height: 100%; position: absolute; width: 100%; height: 100%; pointer-events: auto; background: rgba(28, 115, 195, 0.2); } </style> src/views/space/components/box/dataContent.vue
@@ -185,7 +185,7 @@ function destroyPupoLayers () { let arr = Object.keys(addPupoLayers) arr.forEach(i => { addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i]) addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i]) }) addPupoLayers = {} } src/views/supplies/components/box/fireContent.vue
File was deleted src/views/supplies/components/box/fireSource.vue
File was deleted src/views/supplies/components/box/fireTrend.vue
File was deleted src/views/supplies/components/box/occurStatistics.vue
File was deleted src/views/supplies/components/box/publicContent.vue
File was deleted src/views/supplies/components/box/unitContent.vue
File was deleted src/views/supplies/components/dataContent.vue
File was renamed from src/views/supplies/components/box/dataContent.vue @@ -6,7 +6,7 @@ <span class="content_span" @click="scrollLeft"> <img src="@/assets/images/left.png" alt=""> </span> <el-scrollbar ref="scrollbarRef" @scroll="scroll"> <el-scrollbar ref="scrollbarRef"> <div class="scrollbar-flex-content"> <p v-for="(item, index) in tilteList" @click="handleClick(item, index)" :key="index" class="scrollbar-demo-item" :class="{ active: index === currentIndex }"> @@ -44,7 +44,6 @@ </template> <script setup> import publicContent from "./publicContent.vue" import { getList, getCompanyList } from "@/api/emergencySupplies/emergencySupplies" import { getPage } from '@/api/indParkInfo' import { reactive, ref, onMounted } from "vue" src/views/supplies/components/leftContainer.vue
File was deleted src/views/supplies/components/rightContainer.vue
File was deleted src/views/supplies/index.vue
@@ -2,29 +2,31 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2023-03-10 15:27:59 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2023-03-13 16:02:07 * @FilePath: \forest-fire\src\views\statistics\index.vue * @LastEditTime: 2024-11-27 19:26:43 * @FilePath: \bigScreen\src\views\supplies\index.vue * @Description: 综合设计 * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. --> <script setup> import leftContainer from './components/leftContainer.vue' import rightContainer from './components/rightContainer.vue' import dataContent from "./components/dataContent.vue" </script> <template> <div class="container page-container"> <left-container></left-container> <!-- <right-container></right-container> --> <div class="container page-container"> <div class="data box w100 h100"> <data-content> </data-content> </div> </div> </template> <style lang="scss" scoped> .container { position: absolute; width: 100%; height: 100%; position: absolute; width: 100%; height: 100%; pointer-events: auto; background: rgba(28, 115, 195, 0.2); } </style>