- <template>
- <!-- 海绵综合一张图 长效运维 -->
- <div class="publicContainer">
- <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
- <!-- 巡查任务 -->
- <InspectionTasks></InspectionTasks>
- <!-- 污水厂进口BOD -->
- <SewageBOD></SewageBOD>
- <!-- 监测站点统计 -->
- <MonitoringStation></MonitoringStation>
- </div>
-
- <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
- <!-- 公众建议 -->
- <PublicAdvice></PublicAdvice>
- <!-- 宣传培训 -->
- <PromotionTraining></PromotionTraining>
- <!-- 人工采样 -->
- <ManualSampling></ManualSampling>
- </div>
- </div>
- </template>
-
- <script setup>
- const showPanel = ref(true); //面板展开收起
- import InspectionTasks from '@/views/sponeScreen/longYW/InspectionTasks.vue'; //建设状态
- import SewageBOD from '@/views/sponeScreen/longYW/SewageBOD.vue'; //建设状态
- import MonitoringStation from '@/views/sponeScreen/longYW/MonitoringStation.vue'; //监测站点统计
- import PublicAdvice from '@/views/sponeScreen/longYW/PublicAdvice.vue'; //公众建议
- import PromotionTraining from '@/views/sponeScreen/longYW/PromotionTraining.vue'; //宣传培训
- import ManualSampling from '@/views/sponeScreen/longYW/ManualSampling.vue'; //人工采样
- import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
- import track from '@/assets/geojson/kaifeng/track.json';
- import car from '@/assets/newImgs/car.png';
- import { onBeforeUnmount } from 'vue';
- const { proxy } = getCurrentInstance();
- // 面板内容展开收起控制
- const props = defineProps({
- showPanel: {
- type: Boolean,
- },
- });
- watch(
- () => props.showPanel,
- () => {
- showPanel.value = props.showPanel;
- },
- { immediate: true }
- );
- onMounted(() => {
- newfiberMapBoxVectorLayer.addDynamicRoute('dynamicRoute', track, car);
- let warningPointGeojson = {
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- geometry: {
- type: 'Point',
- coordinates: [114.366855, 34.796715],
- },
- properties: { pumpName: '汴京公园管网监测点(离线)' },
- },
- {
- type: 'Feature',
- geometry: {
- type: 'Point',
- coordinates: [114.325848, 34.80415],
- },
- properties: { pumpName: '梁苑小学管网监测点(故障)' },
- },
- ],
- };
- let pointLayer2 = new mapboxL7.PointLayer({
- name: 'waringPoint',
- })
- .source(warningPointGeojson, {
- parser: {
- type: 'geojson',
- },
- })
- .shape('circle')
- .active(true)
- .animate(true)
- .size(50)
- .color('#f00');
- let pointLayer3 = new mapboxL7.PointLayer({
- name: 'waringPointLabel',
- })
- .source(warningPointGeojson, {
- parser: {
- type: 'geojson',
- },
- })
- .shape('pumpName', 'text')
- .active(true)
- .animate(true)
- .size(17)
- .color('#f00')
- .style({
- textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
- textOffset: [0, 30], // 文本相对锚点的偏移量 [水平, 垂直]
- spacing: 2, // 字符间距
- stroke: '#ffffff', // 描边颜色
- strokeWidth: 0.3, // 描边宽度
- strokeOpacity: 1.0,
- fontFamily: 'Times New Roman',
- textAllowOverlap: true,
- });
- newfiberMapbox.addLayer(pointLayer2);
- newfiberMapbox.addLayer(pointLayer3);
- newfiberMapbox.map.easeTo({
- center: [114.342, 34.795],
- zoom: 13,
- });
- });
- onBeforeUnmount(() => {
- newfiberMapBoxVectorLayer.removeByIds(['dynamicRoute', 'dynamicRoute_Symbol', 'dynamicRoute_Symbol_1']);
- newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waringPoint'));
- newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waringPointLabel'));
- clearInterval(window.routeTimer);
- clearInterval(window.routeTimer_1);
- window.routeTimer = null;
- window.routeTimer_1 = null;
- });
- </script>
-
- <style lang="scss" scoped></style>