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