明树Git Lab

Skip to content

J
jt_front
Commit cd03062e authored by yangyajing's avatar yangyajing
Browse files
Options

大屏地图开发

parent 04a0f9e8
Pipeline #104347 passed with stage
    in 13 seconds
    Show whitespace changes
    Inline Side-by-side
    Showing with 299 additions and 212 deletions
    index.html
    View file @ cd03062e
    ......@@ -2,7 +2,7 @@
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link rel="icon" type="image/svg+xml" href="/logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>葛洲坝交投</title>
    </head>
    ......
    src/components/CommonMap.vue
    View file @ cd03062e
    ......@@ -11,8 +11,29 @@ import {
    onUnmounted,
    onActivated,
    defineEmits,
    watch
    } from "vue";
    const props = defineProps({
    tabKey: {
    type: String,
    default: () => "",
    },
    });
    watch(
    () => props.tabKey,
    (newVal) => {
    // 根据页面内容，调整地图显示位置
    const center = ["lixiang", "tuichu"].includes(props.tabKey) ? [100.808299, 35.791787] : [127.808299, 35.791787];
    map && map.setCenter(center);
    let zoom = map.getZoom();
    if (zoom < 7) {
    handleAddMarket();
    }
    }
    );
    // 定义事件
    const emit = defineEmits(["province-selected"]);
    import gansuLine from "./newLine.json";
    ......@@ -21,10 +42,11 @@ window._AMapSecurityConfig = {
    securityJsCode: "7aee6d6553ba9a8178e0c57b60a51481",
    };
    let geojsonObj = null;
    let currentMarkers = [];
    let provincePolylines = [];
    // 初始化地图
    const handleInitMap = () => {
    let selectName = sessionStorage.getItem("selectedContentBtn");
    AMapLoader.load({
    key: "9a22433229a51dc5114d4bbf92f687ee", // 申请好的Web端开发者Key
    // version: "2.0",
    ......@@ -35,30 +57,30 @@ const handleInitMap = () => {
    //设置地图容器id
    viewMode: "2D",
    zoom: 4, //根据屏幕宽度设置初始化地图级别
    center: [100.808299, 35.791787], //初始化地图中心点位置
    center: ["lixiang", "tuichu"].includes(props.tabKey) ? [100.808299, 35.791787] : [127.808299, 35.791787], //初始化地图中心点位置
    expandZoomRange: true, // 开启显示范围设置
    mapStyle: "amap://styles/d9cd35cfbd75e272e528a7fde0bcfc53",
    rotateEnable: false, // 是否可以旋转
    copyrightControl: false,
    logoControl: false,
    });
    // 根据不同屏幕大小设置缩放
    // const mapSize = map.getSize();
    // if (mapSize && mapSize.width < 780) {
    // map.setZoom(3.5);
    // }
    handleDistrict();
    // addPolylines();
    // handleAddMarket(selectName);
    // 监听地图缩放
    map.on("zoomend", () => {
    let zoom = map.getZoom();
    console.log(zoom)
    if (zoom === 7) {
    if (zoom >= 7) {
    addPolylines();
    if (currentMarkers.length) {
    map.remove(currentMarkers);
    currentMarkers = [];
    }
    } else if (zoom < 7) {
    console.log(geojsonObj);
    geojsonObj && map.remove(geojsonObj);
    geojsonObj = null;
    handleAddMarket();
    provincePolylines.forEach(provincePolyline => {
    map.remove(provincePolyline);
    });
    }
    });
    })
    ......@@ -71,9 +93,7 @@ const handleDistrict = () => {
    extensions: "all", //返回行政区边界坐标组等具体信息
    level: "country", //查询行政级别为 市 province-省 district-
    });
    // let polygons = [];
    districtSearch.search("中国", function (status, result) {
    // map.remove(polygons); //清除上次结果
    let bounds = result.districtList[0].boundaries;
    // 描边
    for (let i = 0; i < bounds.length; i++) {
    ......@@ -96,12 +116,11 @@ const handleDistrict = () => {
    // });
    // map.add(chinaBg);
    }
    // map.add(polygons);
    // map.setFitView(polygons); //视口自适应
    });
    };
    // 添加新路线
    const addPolylines = () => {
    if (!geojsonObj) {
    geojsonObj = new AMap.GeoJSON({
    geoJSON: gansuLine,
    getPolyline: function (geojson, lnglats) {
    ......@@ -112,19 +131,6 @@ const addPolylines = () => {
    strokeColor: "#F0E82A",
    extData: geojson.properties, // 自定义属性数据
    });
    // 生成新的路线，用于覆盖旧的
    // newPolyline = new AMap.Polyline({
    // path: lnglats,
    // strokeWeight: 4,
    // strokeColor: "#00DDEB",
    // isOutline: true,
    // borderWeight: 2,
    // outlineColor: "rgba(0, 221, 235, 1)",
    // cursor: "pointer",
    // });
    // map.add(newPolyline);
    // newPolyline.hide();
    // 获取路线数据
    const properties = polylineObj.getExtData();
    // 填报内容
    ......@@ -152,45 +158,42 @@ const addPolylines = () => {
    autoMove: true, // 是否自动调整窗体到视野内
    closeWhenClickMap: true, // 控制是否在鼠标点击地图后关闭信息窗体
    content: content, // 传入 dom 对象，或者 html 字符串
    offset: new AMap.Pixel(120, 100),
    });
    // 鼠标经过
    // polylineObj.on("mouseover", function (e) {
    // newPolyline.show();
    // infoWindow.open(map, [`${e.lnglat.getLng()}`, `${e.lnglat.getLat()}`]);
    // });
    // // 鼠标移出
    // polylineObj.on("mouseout", function (e) {
    // newPolyline.hide();
    // infoWindow.close();
    // });
    polylineObj.on("mouseover", function (e) {
    infoWindow.open(map, [`${e.lnglat.getLng()}`, `${e.lnglat.getLat()}`]);
    });
    // 鼠标移出
    polylineObj.on("mouseout", function (e) {
    infoWindow.close();
    });
    // // 鼠标双击
    // polylineObj.on("dblclick", function (e) {});
    // 鼠标双击
    polylineObj.on("dblclick", function (e) {});
    return polylineObj;
    },
    });
    map.add(geojsonObj);
    }
    };
    // 添加标记
    let currentMarkers = [];
    const handleAddMarket = (selectName) => {
    const handleAddMarket = () => {
    // 清除之前的所有标记
    if (currentMarkers.length > 0) {
    if (currentMarkers.length) {
    map.remove(currentMarkers);
    currentMarkers = [];
    }
    // 清除所有标记
    if (map) {
    map.getAllOverlays("marker").forEach((marker) => {
    map.remove(marker);
    });
    }
    // if (map) {
    // map.getAllOverlays("marker").forEach((marker) => {
    // map.remove(marker);
    // });
    // }
    // 根据不同状态定义标记数据
    const markerData = {
    建设: [
    jianshe: [
    // 安徽
    { number: 1, position: [117.27, 31.86], province: "安徽省" },
    // 广东
    ......@@ -204,15 +207,13 @@ const handleAddMarket = (selectName) => {
    // 河北
    { number: 1, position: [114.5025, 38.0455], province: "河北省" },
    // 甘肃
    { number: 10, position: [103.8236, 36.058], province: "甘肃省" },
    { number: 1, position: [103.8236, 36.058], province: "甘肃省" },
    ],
    试运营: [
    shiyunying: [
    // 四川
    { number: 2, position: [104.066, 30.5728], province: "四川省" },
    { number: 1, position: [104.066, 30.5728], province: "四川省" },
    // 山东
    { number: 3, position: [117.0009, 36.6758], province: "山东省" },
    // 云南
    { number: 1, position: [102.7123, 25.0406], province: "云南省" },
    // 陕西
    { number: 3, position: [108.948, 34.2632], province: "陕西省" },
    // 广西
    ......@@ -220,22 +221,19 @@ const handleAddMarket = (selectName) => {
    // 湖北
    { number: 1, position: [114.2986, 30.5844], province: "湖北省" },
    ],
    运营: [
    // 四川
    { number: 1, position: [104.066, 30.5728], province: "四川省" },
    // 山东
    { number: 1, position: [117.0009, 36.6758], province: "山东省" },
    yunying: [
    { number: 1, position: [102.7123, 25.0406], province: "云南省" },
    // 湖北
    { number: 1, position: [114.2986, 30.5844], province: "湖北省" },
    ],
    退出: [
    tuichu: [
    // 河南
    { number: 3, position: [113.6654, 34.757], province: "河南省" },
    ],
    // 立项: [],
    };
    const positionsList = markerData[selectName] || [];
    const positionsList = markerData[props.tabKey] || [];
    // 如果是"立项"或者没有数据，直接返回，不创建任何标记
    if (!positionsList || positionsList.length === 0) {
    ......@@ -247,29 +245,39 @@ const handleAddMarket = (selectName) => {
    const markerData = positionsList[i];
    // 创建悬浮窗口内容
    const infoContent = `
    <div class="marker-info-window">
    <div class="marker-info-title">${markerData.province}</div>
    <div class="marker-info-content">
    <span class="marker-info-label">路线数量:</span>
    <span class="marker-info-value">${markerData.number}</span>
    <span class="marker-info-unit">条</span>
    </div>
    // const infoContent = `
    // <div class="marker-info-window">
    // <div class="marker-info-title">${markerData.province}</div>
    // <div class="marker-info-content">
    // <span class="marker-info-label">路线数量:</span>
    // <span class="marker-info-value">${markerData.number}</span>
    // <span class="marker-info-unit">条</span>
    // </div>
    // </div>
    // `;
    let infoContent = `
    <div class="infoWindow-title">${markerData.province}</div>
    <div class="infoWindow-content">
    <p>
    <span class="infoWindow-content-title">路线数量:</span>
    <span class="infoWindow-content-value">${markerData.number}<span class="infoWindow-unit">条</span></span>
    </p>
    </div>
    <div class="infoWindow-bottom"></div>
    `;
    // 创建信息窗口实例
    const infoWindow = new AMap.InfoWindow({
    isCustom: true,
    content: infoContent,
    offset: new AMap.Pixel(0, -35),
    // offset: new AMap.Pixel(3, -3),
    closeWhenClickMap: true,
    });
    const marker = new AMap.Marker({
    map: map,
    position: markerData.position,
    offset: new AMap.Pixel(-13, -30),
    offset: new AMap.Pixel(-12.5, -34),
    content:
    '<div class="custom-content-marker">' +
    '<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="width: 40px;height: 40px;">' +
    ......@@ -279,7 +287,7 @@ const handleAddMarket = (selectName) => {
    // 鼠标悬浮事件
    marker.on("mouseover", function (e) {
    infoWindow.open(map, e.lnglat);
    infoWindow.open(map, [`${e.lnglat.getLng()}`, `${e.lnglat.getLat()}`]);
    });
    // 鼠标移出事件
    ......@@ -289,6 +297,11 @@ const handleAddMarket = (selectName) => {
    // 点击事件：聚焦到对应省份并显示省份地图
    marker.on("click", function (e) {
    // map.remove(provincePolylines);
    provincePolylines.forEach(provincePolyline => {
    map.remove(provincePolyline);
    });
    provincePolylines = [];
    const provinceName = markerData.province; // 例如：甘肃省
    emit("province-selected", true);
    ......@@ -302,22 +315,22 @@ const handleAddMarket = (selectName) => {
    // 搜索并定位到省份
    districtSearch.search(provinceName, function (status, result) {
    if (status === "complete") {
    let bounds = result.districtList[0].boundaries;
    let bounds = result.districtList[0]?.boundaries;
    if (bounds && bounds.length > 0) {
    // 清除所有边界线（中国地图边界）
    map.getAllOverlays("polyline").forEach((polyline) => {
    map.remove(polyline);
    });
    // map.getAllOverlays("polyline").forEach((polyline) => {
    // map.remove(polyline);
    // });
    // 清除所有标记点
    map.getAllOverlays("marker").forEach((marker) => {
    map.remove(marker);
    });
    // map.getAllOverlays("marker").forEach((marker) => {
    // map.remove(marker);
    // });
    // 清除所有覆盖物
    map.getAllOverlays("polygon").forEach((polygon) => {
    map.remove(polygon);
    });
    // map.getAllOverlays("polygon").forEach((polygon) => {
    // map.remove(polygon);
    // });
    // 绘制省份边界线
    for (let i = 0; i < bounds.length; i++) {
    ......@@ -328,23 +341,26 @@ const handleAddMarket = (selectName) => {
    map: map,
    });
    map.add(provincePolyline);
    provincePolylines.push(provincePolyline);
    }
    // 绘制省份填充区域（可选）
    let provincePolygon = new AMap.Polygon({
    path: bounds[0],
    strokeColor: "#72A8FF",
    strokeWeight: 2,
    fillColor: "rgba(114, 168, 255, 0.1)",
    fillOpacity: 0.3,
    });
    map.add(provincePolygon);
    // let provincePolygon = new AMap.Polygon({
    // path: bounds[0],
    // strokeColor: "#72A8FF",
    // strokeWeight: 2,
    // fillColor: "rgba(114, 168, 255, 0.7)",
    // fillOpacity: 0.3,
    // });
    // map.add(provincePolygon);
    // 重新添加新路线（确保新路线显示在地图上）
    addPolylines();
    // addPolylines();
    // 设置地图视图到该省份
    map.setFitView([provincePolygon]);
    // map.setFitView([provincePolygon]);
    let center = result.districtList[0]?.center;
    map.setCenter([center.lng, center.lat]);
    map.setZoom(8);
    }
    }
    ......@@ -449,7 +465,7 @@ onActivated(() => {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 299px;
    width: 260px;
    line-height: 56px;
    padding-left: 10px;
    font-weight: 700;
    ......@@ -459,11 +475,29 @@ onActivated(() => {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 299px;
    height: 100x;
    width: 260px;
    // height: 100x;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    p{
    height: 51px;
    line-height: 51px;
    display: flex;
    align-items: center;
    &:not(:last-child){
    position: relative;
    &::after{
    content: "";
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: radial-gradient(rgba(255, 255, 255, 0) 0%, #3B71FA 50%, rgba(255, 255, 255, 0) 100%);
    }
    }
    }
    }
    :deep(.infoWindow-bottom) {
    background-image: url("../assets/images/下标.png");
    ......@@ -474,13 +508,14 @@ onActivated(() => {
    height: 22px;
    }
    :deep(.infoWindow-content-title) {
    font-size: 18px;
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    margin-right: 10px;
    }
    :deep(.infoWindow-content-value) {
    font-weight: 400;
    font-size: 24px;
    font-size: 20px;
    color: #93d2ff;
    }
    :deep(.infoWindow-unit) {
    ......
    src/views/homePage/index.vue
    View file @ cd03062e
    ......@@ -142,7 +142,18 @@
    :class="{'target-small': target.size === 'small'}"
    >
    <div class="target-name">{{ target.name }}</div>
    <div class="target-value">{{ target.value }}</div>
    <div class="target-value"
    :class="{
    'target-green': !isNaN(target.value) && target.value > 0,
    'target-red': !isNaN(target.value) && target.value < 0,
    }"
    >
    {{ target.value }}
    <el-icon v-if="target.size === 'small' && !isNaN(target.value)">
    <Top v-if="target.value > 0" />
    <Bottom v-else />
    </el-icon>
    </div>
    </div>
    </div>
    </div>
    ......@@ -169,7 +180,7 @@
    </div>
    </div>
    </div>
    <Map ref="mapRef" />
    <Map ref="mapRef" :tabKey="selectedContentBtn" />
    <div class="back-to-country-btn" @click="backToCountry" v-show="showBackBtn">
    返回全国
    </div>
    ......@@ -523,20 +534,20 @@ const infoObj = reactive({
    }
    ],
    tzwcqk: [
    { title: "10月完成投资", value: "*" },
    // { title: "10月完成投资", value: "*" },
    { title: "2025年完成投资", value: "*" },
    { title: "累计完成投资", value: "*" }
    ],
    tzhswcqk: [
    { title: "10月完成投资", value: "*" },
    { title: "2025年完成投资", value: "*" },
    // { title: "10月完成回收", value: "*" },
    { title: "2025年完成回收", value: "*" },
    { title: "完成率", value: "*" }
    ]
    },
    shiyunying: {
    gaikuang: [
    {
    title: "总个数", value: "9", unit: "个",
    title: "总个数", value: 9, unit: "个",
    data: [
    {
    name: "巴万高速",
    ......@@ -712,14 +723,14 @@ const infoObj = reactive({
    ]
    },
    {
    title: "总投资", value: "1151.36", unit: "亿元"
    title: "总投资", value: 1151.36, unit: "亿元"
    },
    {
    title: "总规模", value: "945.67", unit: "公里"
    title: "总规模", value: 945.67, unit: "公里"
    }
    ],
    tzwcqk: [
    { title: "10月完成投资", value: "*" },
    // { title: "11月完成投资", value: "*" },
    { title: "2025年完成投资", value: "*" },
    { title: "累计完成投资", value: "*" }
    ],
    ......@@ -727,89 +738,110 @@ const infoObj = reactive({
    {
    title: "营业收入",
    data: [
    {
    name: "11月完成",
    value: "*"
    },
    // {
    // name: "11月完成",
    // value: 3.58,
    // unit: "亿元"
    // },
    {
    name: "第三季度完成",
    value: "*"
    value: 31.71,
    unit: "亿元"
    },
    {
    name: "2025累计完成",
    value: "*"
    value: 38.86,
    unit: "亿元"
    },
    {
    name: "累计同期环比",
    size: "small",
    value: "*"
    value: 3.78,
    unit: "%"
    }
    ]
    },
    {
    title: "运营成本",
    data: [
    // {
    // name: "11月发生",
    // value: 1.96,
    // unit: "亿元"
    // },
    {
    name: "11月完成",
    value: "*"
    },
    {
    name: "第三季度完成",
    value: "*"
    name: "第三季度发生",
    value: 16.99,
    unit: "亿元"
    },
    {
    name: "2025累计完成",
    value: "*"
    value: 20.91,
    unit: "亿元"
    },
    {
    name: "累计同期环比",
    size: "small",
    value: "*"
    value: -14.73,
    unit: "%"
    }
    ]
    },
    {
    title: "利润总额",
    data: [
    {
    name: "11月完成",
    value: "*"
    },
    // {
    // name: "11月完成",
    // value: -1.015,
    // unit: "亿元"
    // },
    {
    name: "第三季度完成",
    value: "*"
    value: -5.91,
    unit: "亿元"
    },
    {
    name: "2025累计完成",
    value: "*"
    value: -7.94,
    unit: "亿元"
    },
    {
    name: "累计同期环比",
    size: "small",
    value: "*"
    value: -28.83,
    unit: "%"
    }
    ]
    }
    ],
    tzhswcqk: [
    { title: "10月完成投资", value: "*" },
    { title: "2025年完成投资", value: "*" },
    { title: "完成率", value: "*" }
    // { title: "11月完成回收", value: 2.8682,
    // unit: "亿元"
    // },
    { title: "2025年完成回收", value: 31.55,
    unit: "亿元"
    },
    { title: "完成率", value: 85,
    unit: "%"
    }
    ],
    jyjhwcjd: [
    {
    data: [
    {
    name: "营业收入完成进度",
    value: "*"
    value: 85.81,
    unit: "%"
    },
    {
    name: "实际完成金额",
    value: "*"
    value: 38.86,
    unit: "亿元"
    },
    {
    name: "计划完成金额",
    value: "*"
    value: 45.27,
    unit: "亿元"
    }
    ]
    },
    ......@@ -817,15 +849,18 @@ const infoObj = reactive({
    data: [
    {
    name: "运营成本完成进度",
    value: "*"
    value: 79.60,
    unit: "%"
    },
    {
    name: "实际完成金额",
    value: "*"
    value: 20.91,
    unit: "亿元"
    },
    {
    name: "计划完成金额",
    value: "*"
    value: 26.27,
    unit: "亿元"
    }
    ]
    },
    ......@@ -833,15 +868,18 @@ const infoObj = reactive({
    data: [
    {
    name: "利润总额完成进度",
    value: "*"
    value: 77.59,
    unit: "%"
    },
    {
    name: "实际完成金额",
    value: "*"
    value: -7.94,
    unit: "亿元"
    },
    {
    name: "计划完成金额",
    value: "*"
    value: -10.23,
    unit: "亿元"
    }
    ]
    }
    ......@@ -896,22 +934,28 @@ const infoObj = reactive({
    title: "总投资", value: "114.23", unit: "亿元"
    },
    {
    title: "总规模", value: "945.67", unit: "公里"
    title: "总规模", value: "233.22", unit: "公里"
    }
    ],
    tzhswcqk: [
    { title: "10月完成投资", value: "*" },
    { title: "2025年完成投资", value: "*" },
    { title: "完成率", value: "*" }
    // { title: "11月完成回收", value: 0.0318,
    // unit: "亿元"
    // },
    { title: "2025年完成回收", value: 0.35,
    unit: "亿元"
    },
    { title: "完成率", value: 6,
    unit: "亿元"
    }
    ],
    jyjhwcqk: [
    {
    title: "营业收入",
    data: [
    {
    name: "11月完成",
    value: "*"
    },
    // {
    // name: "11月完成",
    // value: "*"
    // },
    {
    name: "第三季度完成",
    value: "*"
    ......@@ -930,10 +974,10 @@ const infoObj = reactive({
    {
    title: "运营成本",
    data: [
    {
    name: "11月完成",
    value: "*"
    },
    // {
    // name: "11月完成",
    // value: "*"
    // },
    {
    name: "第三季度完成",
    value: "*"
    ......@@ -952,10 +996,10 @@ const infoObj = reactive({
    {
    title: "利润总额",
    data: [
    {
    name: "11月完成",
    value: "*"
    },
    // {
    // name: "11月完成",
    // value: "*"
    // },
    {
    name: "第三季度完成",
    value: "*"
    ......@@ -1104,8 +1148,8 @@ const selectContentBtn = (item) => {
    }
    debounceTimer = setTimeout(() => {
    selectedContentBtn.value = item.key;
    selectedContentName.value = item.name;
    sessionStorage.setItem("selectedContentBtn", selectedContentName.key);
    // selectedContentName.value = item.name;
    // sessionStorage.setItem("selectedContentBtn", selectedContentName.key);
    if (item.key === "jianshe") {
    nextTick(()=> {
    initProgressPie();
    ......@@ -1454,7 +1498,7 @@ const handleClose = () => {
    background-size: 100% 100%;
    }
    .data-info{
    justify-content: space-between;
    justify-content: flex-start;
    }
    }
    .data-info{
    ......@@ -1467,7 +1511,7 @@ const handleClose = () => {
    // .vh(height, 90);
    .vw(border-radius, 5);
    .vw(padding, 10);
    .vw(margin-right,10);
    .vw(margin-right,20);
    background-image: url("@/assets/images/total2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    ......@@ -1574,7 +1618,7 @@ const handleClose = () => {
    justify-content: space-between;
    .vh(padding-top, 10);
    .target-item{
    min-width: 50%;
    min-width: 49%;
    .target-name{
    .font(10);
    color: #fff;
    ......@@ -1593,6 +1637,14 @@ const handleClose = () => {
    }
    .target-value{
    .font(14);
    display: flex;
    align-items: center;
    &.target-green{
    color: #32D25A;
    }
    &.target-red{
    color: #D2216E;
    }
    }
    }
    }
    ......
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment