提交

src/pages/CommonBigScreen/Home.jsx

@@ -56,7 +56,6 @@ function BigScreenHome() {
         getWeather().then(r => setTQ(r.data))
         getCommonData().then(r => {
             if (r.code != 0) return
-            console.log(r)
             const d = r.data || {};
             setoriData(d || {})
             setHeadTitle([
@@ -318,7 +317,7 @@ function BigScreenHome() {
                                 title={oriData.activity_spread.name}
                                 list={oriData.activity_spread.data}
                                 width={Math.floor($ele.offsetWidth / 2 - 20)}
-                                height={(mainHeight - 104) / 3 * 2}
+                                height={(mainHeight - 104) / 3 * 2 + 12}
                             />
                         </Show>
                         <div style={{ display: "inline-block", width: "50%" }}>
@@ -346,7 +345,7 @@ function BigScreenHome() {
                                 title={oriData.media_spread.name}
                                 list={oriData.media_spread.data}
                                 width={Math.floor($ele.offsetWidth - 20)}
-                                height={(mainHeight - 104) / 3}
+                                height={(mainHeight - 104) / 3 + 20}
                             />
                         </Show>
                     </div>

src/pages/CommonBigScreen/components/Column_g2.jsx

@@ -15,7 +15,7 @@ let cli1 = [
     "255,127,80",
     "255,99,71",
     "255,0,0",
-], index = 0;
+], index = 0, index1 = 0;
 // 绘制柱状图顶部
 registerShape('interval', 'triangle', {
     // 1. 定义关键点
@@ -33,13 +33,14 @@ registerShape('interval', 'triangle', {
     // 2. 绘制
     draw(cfg, group) {
         const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
+        const more = (points[2].x - points[0].x)/4;
         const polygon = group.addShape('path', {
             attrs: {
                 path: [
-                    ['M', points[0].x, points[0].y],
-                    ['L', points[1].x, points[1].y],
-                    ['L', points[2].x, points[2].y],
-                    ['L', points[3].x, points[3].y],
+                    ['M', points[0].x, points[0].y], // 左点
+                    ['L', points[1].x, points[0].y+more], // 上点
+                    ['L', points[2].x, points[2].y], // 右点
+                    ['L', points[3].x, points[0].y-more], // 下点
                 ],
                 fillOpacity: 0.95,
                 fill: `rgb(${cli1[index % cli1.length]})`
@@ -77,10 +78,10 @@ registerShape('interval', 'edgeLine', {
                     ['L', points[3].x, points[3].y],
                 ],
                 fillOpacity: 1,
-                fill: `l(90) 0:rgba(${cli1[index % cli1.length]}, 1) 1:rgba(${cli1[index % cli1.length]}, 0.4)`
+                fill: `l(90) 0:rgba(${cli1[index1 % cli1.length]}, 1) 1:rgba(${cli1[index1 % cli1.length]}, 0.4)`
             },
         });
-        index++
+        index1++
         return polygon;
     },
 })

src/pages/CommonBigScreen/components/Map-l7.jsx

@@ -4,7 +4,7 @@ import { Mapbox } from '@antv/l7-maps';
 // import { GaodeMap } from '@antv/l7-maps';
 // import DataSet from '@antv/data-set';
 
-// import json from "../../../assets/file/100000_full.json"
+import json from "../../../assets/file/100000_full.json"
 
 import utils from "../../../utils/index"
 // import config from "../../../base/config"
@@ -119,7 +119,7 @@ function Map(prop) {
                     .color('rgb(0,255,255)')
                     .size(0.5)
                     .style({
-                        raisingHeight: 0,
+                        raisingHeight: 150000,
                         opacity: 0.8,
                     })
                     .animate({
@@ -128,20 +128,20 @@ function Map(prop) {
                         trailLength: 3 // 流线长度
                     });
                 //  围栏
-                // const bottomLayer = new LineLayer({ zIndex: 0, blend: "normal" })
-                //     .source(json)
-                //     .shape('wall')
-                //     .color('rgb(255,255,255)')
-                //     .size(10)
-                //     .style({
-                //         heightfixed: true,
-                //         opacity: 1,
-                //         sourceColor: '#0DCCFF',
-                //     });
+                const bottomLayer = new LineLayer({ zIndex: 0, blend: "normal" })
+                    .source(json)
+                    .shape('wall')
+                    .color('rgb(255,255,255)')
+                    .size(10)
+                    .style({
+                        heightfixed: true,
+                        opacity: 1,
+                        sourceColor: '#0DCCFF',
+                    });
                 // 高度
                 const gd = new PolygonLayer({ zIndex: 1, blend: "normal" })
                     .source(data)
-                    .size(1)
+                    .size(150000)
                     .shape('extrude')
                     .color("#3194fb")
                     // .color("name", cli)
@@ -206,7 +206,7 @@ function Map(prop) {
                 //         lightEnable: false
                 //     });
                 scene.addLayer(gd);
-                // scene.addLayer(bottomLayer);
+                scene.addLayer(bottomLayer);
                 scene.addLayer(layer);
                 scene.addLayer(lineUp);
                 scene.addLayer(waveLayer);

src/pages/CommonBigScreen/components/Map.jsx

@@ -221,7 +221,6 @@ class chinaMap {
 
     showTip() {
         // 显示省份的信息
-        console.log(this.lastPick)
         if (this.lastPick) {
             const properties = this.lastPick.parent.properties
             this.$tooltip.textContent = properties.name

src/pages/bigScreen/Home.jsx

@@ -227,7 +227,6 @@ function BigScreenHome() {
         //     setWeather(err.message || "未获得地理位置授权！")
         // })
     })
-    console.log((mainHeight - 106 - eHeight()) / 2)
     return (
         <div class="home">
             <div class="homeHeader">
@@ -334,7 +333,7 @@ function BigScreenHome() {
                                 title={oriData.activity_spread.name}
                                 list={oriData.activity_spread.data}
                                 width={Math.floor($ele.offsetWidth / 2 - 20)}
-                                height={(mainHeight - 104) / 3 * 2}
+                                height={(mainHeight - 104) / 3 * 2 + 12}
                             />
                         </Show>
                         <div style={{ display: "inline-block", width: "50%" }}>
@@ -362,7 +361,7 @@ function BigScreenHome() {
                                 title={oriData.media_spread.name}
                                 list={oriData.media_spread.data}
                                 width={Math.floor($ele.offsetWidth - 20)}
-                                height={(mainHeight - 104) / 3}
+                                height={(mainHeight - 104) / 3 + 20}
                             />
                         </Show>
                     </div>

src/pages/bigScreen/components/Column_g2.jsx

@@ -15,7 +15,7 @@ let cli1 = [
     "255,127,80",
     "255,99,71",
     "255,0,0",
-], index = 0;
+], index = 0, index1 = 0;
 // 绘制柱状图顶部
 registerShape('interval', 'triangle', {
     // 1. 定义关键点
@@ -33,13 +33,14 @@ registerShape('interval', 'triangle', {
     // 2. 绘制
     draw(cfg, group) {
         const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
+        const more = (points[2].x - points[0].x)/4;
         const polygon = group.addShape('path', {
             attrs: {
                 path: [
-                    ['M', points[0].x, points[0].y],
-                    ['L', points[1].x, points[1].y],
-                    ['L', points[2].x, points[2].y],
-                    ['L', points[3].x, points[3].y],
+                    ['M', points[0].x, points[0].y], // 左点
+                    ['L', points[1].x, points[0].y+more], // 上点
+                    ['L', points[2].x, points[2].y], // 右点
+                    ['L', points[3].x, points[0].y-more], // 下点
                 ],
                 fillOpacity: 0.95,
                 fill: `rgb(${cli1[index % cli1.length]})`
@@ -77,10 +78,10 @@ registerShape('interval', 'edgeLine', {
                     ['L', points[3].x, points[3].y],
                 ],
                 fillOpacity: 1,
-                fill: `l(90) 0:rgba(${cli1[index % cli1.length]}, 1) 1:rgba(${cli1[index % cli1.length]}, 0.4)`
+                fill: `l(90) 0:rgba(${cli1[index1 % cli1.length]}, 1) 1:rgba(${cli1[index1 % cli1.length]}, 0.4)`
             },
         });
-        index++
+        index1++
         return polygon;
     },
 })

src/pages/bigScreen/components/Map-l7.jsx

@@ -4,7 +4,7 @@ import { Mapbox } from '@antv/l7-maps';
 // import { GaodeMap } from '@antv/l7-maps';
 // import DataSet from '@antv/data-set';
 
-// import json from "../../../assets/file/100000_full.json"
+import json from "../../../assets/file/100000_full.json"
 
 import utils from "../../../utils/index"
 // import config from "../../../base/config"
@@ -119,7 +119,7 @@ function Map(prop) {
                     .color('rgb(0,255,255)')
                     .size(0.5)
                     .style({
-                        raisingHeight: 0,
+                        raisingHeight: 150000,
                         opacity: 0.8,
                     })
                     .animate({
@@ -128,20 +128,20 @@ function Map(prop) {
                         trailLength: 3 // 流线长度
                     });
                 //  围栏
-                // const bottomLayer = new LineLayer({ zIndex: 0, blend: "normal" })
-                //     .source(json)
-                //     .shape('wall')
-                //     .color('rgb(255,255,255)')
-                //     .size(10)
-                //     .style({
-                //         heightfixed: true,
-                //         opacity: 1,
-                //         sourceColor: '#0DCCFF',
-                //     });
+                const bottomLayer = new LineLayer({ zIndex: 0, blend: "normal" })
+                    .source(json)
+                    .shape('wall')
+                    .color('rgb(255,255,255)')
+                    .size(10)
+                    .style({
+                        heightfixed: true,
+                        opacity: 1,
+                        sourceColor: '#0DCCFF',
+                    });
                 // 高度
                 const gd = new PolygonLayer({ zIndex: 1, blend: "normal" })
                     .source(data)
-                    .size(1)
+                    .size(150000)
                     .shape('extrude')
                     .color("#3194fb")
                     // .color("name", cli)
@@ -206,7 +206,7 @@ function Map(prop) {
                 //         lightEnable: false
                 //     });
                 scene.addLayer(gd);
-                // scene.addLayer(bottomLayer);
+                scene.addLayer(bottomLayer);
                 scene.addLayer(layer);
                 scene.addLayer(lineUp);
                 scene.addLayer(waveLayer);

src/pages/bigScreen/components/Map.jsx

@@ -221,7 +221,6 @@ class chinaMap {
 
     showTip() {
         // 显示省份的信息
-        console.log(this.lastPick)
         if (this.lastPick) {
             const properties = this.lastPick.parent.properties
             this.$tooltip.textContent = properties.name