提交

package.json

@@ -25,7 +25,6 @@
     "@solidjs/router": "^0.8.2",
     "d3": "^7.4.4",
     "dayjs": "^1.11.1",
-    "solid-app-router": "^0.1.9",
     "solid-js": "^1.1.3",
     "three": "^0.139.2"
   }

src/api/bigScreen.js

@@ -10,7 +10,7 @@ export function getGeography(data) {
 }
 export function getWeather(data) {
   return Net({
-    url: `${config.localBaseUrl}/cxzx-screen/big-screen/v3/weather/weatherInfo`,
+    url: `${config.localBaseUrl}/big-screen/v3/weather/weatherInfo`,
     // url: `${config.baseUrl}weather/weatherInfo`,
     method: "GET",
     data,
@@ -26,14 +26,14 @@ export function getMapfull(data) {
 }
 export function getData(data) {
   return Net({
-    url: `${config.localBaseUrl}/cxzx-screen/big-screen/index/x2`,
+    url: `${config.localBaseUrl}/big-screen/index/x2`,
     method: "GET",
     data,
   });
 }
 export function getCommonData(data) {
   return Net({
-    url: `${config.localBaseUrl}/cxzx-screen/big-screen/index`,
+    url: `${config.localBaseUrl}/big-screen/index`,
     method: "GET",
     data,
   });

src/assets/style/BigScreenHome.css

@@ -13,7 +13,7 @@
   padding: 0 35%;
   width: 100%;
   text-align: center;
-  font-size: 21px;
+  font-size: 35px;
   font-weight: 600;
   float: left;
 }
@@ -103,6 +103,7 @@
 }
 
 .body .livRang {
+  overflow: hidden;
   display: inline-block;
   vertical-align: top;
   font-size: 14px;

src/assets/style/CommonBigScreenHome.css

@@ -13,7 +13,7 @@
   padding: 0 35%;
   width: 100%;
   text-align: center;
-  font-size: 21px;
+  font-size: 35px;
   font-weight: 600;
   float: left;
 }

src/base/config.js

@@ -2,6 +2,7 @@ export default {
   gaodeToken: "8584ad854bd9ff5135f64529a44da7ed",
 //   baseUrl: "https://restapi.amap.com/v3/",
   baseUrl: "http://172.16.101.20:8762/v3/",
-  localBaseUrl: "http://172.16.101.20:8762",
+  localBaseUrl: "https://big-screen.sxtvs.net",
+//   localBaseUrl: "http://172.16.101.20:8762",
   webToke: "2165bf5621d55140e00ba9abf9fb5c45"
 };

src/pages/CommonBigScreen/Home.jsx

@@ -263,32 +263,21 @@ function BigScreenHome() {
                 </div>
                 <div class="main">
                     <div ref={$ele} class="mainbody left">
-                        <div style={{ "margin-bottom": "6px" }}>
-                            <Show when={eHeight() > 0 && oriData.watch_rank && oriData.watch_rank.name} >
-                                <ListeningRate
-                                    title={oriData.watch_rank.name}
-                                    list={oriData.watch_rank.data}
-                                    width={Math.floor($ele.offsetWidth / 2 - 5)}
-                                    height={eHeight()}
-                                />
-                            </Show>
-                            <Show when={eHeight() > 0 && oriData.activity_spread && oriData.activity_spread.name}>
-                                <Activity
-                                    styleCss={{ marginLeft: '6px' }}
-                                    title={oriData.activity_spread.name}
-                                    list={oriData.activity_spread.data}
-                                    width={Math.floor($ele.offsetWidth / 2 - 10)}
-                                    height={eHeight()}
-                                />
-                            </Show>
-                        </div>
+                        <Show when={eHeight() > 0 && oriData.watch_rank && oriData.watch_rank.name} >
+                            <ListeningRate
+                                title={oriData.watch_rank.name}
+                                list={oriData.watch_rank.data}
+                                width={Math.floor($ele.offsetWidth)}
+                                height={(mainHeight - 54) / 3}
+                            />
+                        </Show>
                         <Show when={eHeight() > 0 && oriData.schedule_rank && oriData.schedule_rank.name} >
-                            <div style={{ "margin-bottom": "6px" }}>
+                            <div style={{ "margin-bottom": "6px", "margin-top": "6px" }}>
                                 <Column
                                     title={oriData.schedule_rank.name}
                                     list={oriData.schedule_rank.data}
                                     width={Math.floor($ele.offsetWidth)}
-                                    height={(mainHeight - 106 - eHeight()) / 2}
+                                    height={(mainHeight - 54) / 3}
                                 />
                             </div>
                         </Show>
@@ -297,12 +286,12 @@ function BigScreenHome() {
                                 title={oriData.user_trend.name}
                                 list={oriData.user_trend.data}
                                 width={Math.floor($ele.offsetWidth)}
-                                height={(mainHeight - 106 - eHeight()) / 2}
+                                height={(mainHeight - 54) / 3}
                             />
                         </Show>
                     </div>
                     <div class="mainbody center">
-                            <div style={{ "margin-bottom": "6px" }}>
+                        <div style={{ "margin-bottom": "6px" }}>
                             <Show when={eHeight() > 0 && oriData.cm_area && oriData.cm_area.name}>
                                 <Map
                                     title={oriData.cm_area.name}
@@ -323,26 +312,35 @@ function BigScreenHome() {
                         </div>
                     </div>
                     <div class="mainbody right">
-                        <Show when={eHeight() > 0 && oriData.media_read_trend && oriData.media_read_trend.name}>
-                            <div style={{ "margin-bottom": "6px" }}>
+                        <Show when={eHeight() > 0 && oriData.activity_spread && oriData.activity_spread.name}>
+                            <Activity
+                                styleCss={{ marginLeft: '6px' }}
+                                title={oriData.activity_spread.name}
+                                list={oriData.activity_spread.data}
+                                width={Math.floor($ele.offsetWidth / 2 - 20)}
+                                height={(mainHeight - 104) / 3 * 2}
+                            />
+                        </Show>
+                        <div style={{ display: "inline-block", width: "50%" }}>
+                            <Show when={eHeight() > 0 && oriData.media_read_trend && oriData.media_read_trend.name}>
                                 <SelfPlatform
+                                    styleCss={{ marginBottom: '6px' }}
                                     title={oriData.media_read_trend.name}
                                     list={oriData.media_read_trend.data}
-                                    width={Math.floor($ele.offsetWidth - 20)}
+                                    width={Math.floor($ele.offsetWidth / 2 - 10)}
                                     height={(mainHeight - 104) / 3}
                                 />
-                            </div>
-                        </Show>
-                        <Show when={eHeight() > 0 && oriData.media_spread_trend && oriData.media_spread_trend.name}>
-                            <div style={{ "margin-bottom": "6px" }}>
+                            </Show>
+                            <Show when={eHeight() > 0 && oriData.media_spread_trend && oriData.media_spread_trend.name}>
                                 <NewMediaTrend
+                                    styleCss={{ marginBottom: '6px' }}
                                     title={oriData.media_spread_trend.name}
                                     list={oriData.media_spread_trend.data}
-                                    width={Math.floor($ele.offsetWidth - 20)}
+                                    width={Math.floor($ele.offsetWidth / 2 - 10)}
                                     height={(mainHeight - 104) / 3}
                                 />
-                            </div>
-                        </Show>
+                            </Show>
+                        </div>
                         <Show when={eHeight() > 0 && oriData.media_spread && oriData.media_spread.name}>
                             <NewMedia
                                 title={oriData.media_spread.name}

src/pages/CommonBigScreen/components/ListeningRate_g2.jsx

@@ -121,7 +121,7 @@ function ListeningRate(prop) {
     })
     return (
         <div class="livRang" style={{
-            height:`${prop.width}px`
+            height:`${prop.height}px`
         }}>
             <div class="head">{prop.title}</div>
             <div ref={$canvas}></div>

src/pages/CommonBigScreen/components/Usertrend.jsx

@@ -25,7 +25,7 @@ function Usertrend(prop) {
         const chart = new Chart({
             container: $canvas,
             autoFit: true,
-            height,
+            height: height - 20,
             width,
             padding: [
                 10,

src/pages/bigScreen/Home.jsx

@@ -227,6 +227,7 @@ function BigScreenHome() {
         //     setWeather(err.message || "未获得地理位置授权！")
         // })
     })
+    console.log((mainHeight - 106 - eHeight()) / 2)
     return (
         <div class="home">
             <div class="homeHeader">
@@ -277,32 +278,21 @@ function BigScreenHome() {
                 </div>
                 <div class="main">
                     <div ref={$ele} class="mainbody left">
-                        <div style={{ "margin-bottom": "6px" }}>
-                            <Show when={eHeight() > 0 && oriData.watch_rank && oriData.watch_rank.name} >
-                                <ListeningRate
-                                    title={oriData.watch_rank.name}
-                                    list={oriData.watch_rank.data}
-                                    width={Math.floor($ele.offsetWidth / 2 - 5)}
-                                    height={eHeight()}
-                                />
-                            </Show>
-                            <Show when={eHeight() > 0 && oriData.activity_spread && oriData.activity_spread.name}>
-                                <Activity
-                                    styleCss={{ marginLeft: '6px' }}
-                                    title={oriData.activity_spread.name}
-                                    list={oriData.activity_spread.data}
-                                    width={Math.floor($ele.offsetWidth / 2 - 10)}
-                                    height={eHeight()}
-                                />
-                            </Show>
-                        </div>
+                        <Show when={eHeight() > 0 && oriData.watch_rank && oriData.watch_rank.name} >
+                            <ListeningRate
+                                title={oriData.watch_rank.name}
+                                list={oriData.watch_rank.data}
+                                width={Math.floor($ele.offsetWidth)}
+                                height={(mainHeight - 54) / 3}
+                            />
+                        </Show>
                         <Show when={eHeight() > 0 && oriData.schedule_rank && oriData.schedule_rank.name} >
-                            <div style={{ "margin-bottom": "6px" }}>
+                            <div style={{ "margin-bottom": "6px", "margin-top": "6px" }}>
                                 <Column
                                     title={oriData.schedule_rank.name}
                                     list={oriData.schedule_rank.data}
                                     width={Math.floor($ele.offsetWidth)}
-                                    height={(mainHeight - 106 - eHeight()) / 2}
+                                    height={(mainHeight - 54) / 3}
                                 />
                             </div>
                         </Show>
@@ -311,7 +301,7 @@ function BigScreenHome() {
                                 title={oriData.user_trend.name}
                                 list={oriData.user_trend.data}
                                 width={Math.floor($ele.offsetWidth)}
-                                height={(mainHeight - 106 - eHeight()) / 2}
+                                height={(mainHeight - 54) / 3}
                             />
                         </Show>
                     </div>
@@ -338,26 +328,35 @@ function BigScreenHome() {
                         </div>
                     </div>
                     <div class="mainbody right">
-                        <Show when={eHeight() > 0 && oriData.media_read_trend && oriData.media_read_trend.name}>
-                            <div style={{ "margin-bottom": "6px" }}>
+                        <Show when={eHeight() > 0 && oriData.activity_spread && oriData.activity_spread.name}>
+                            <Activity
+                                styleCss={{ marginLeft: '6px' }}
+                                title={oriData.activity_spread.name}
+                                list={oriData.activity_spread.data}
+                                width={Math.floor($ele.offsetWidth / 2 - 20)}
+                                height={(mainHeight - 104) / 3 * 2}
+                            />
+                        </Show>
+                        <div style={{ display: "inline-block", width: "50%" }}>
+                            <Show when={eHeight() > 0 && oriData.media_read_trend && oriData.media_read_trend.name}>
                                 <SelfPlatform
+                                    styleCss={{ marginBottom: '6px' }}
                                     title={oriData.media_read_trend.name}
                                     list={oriData.media_read_trend.data}
-                                    width={Math.floor($ele.offsetWidth - 20)}
+                                    width={Math.floor($ele.offsetWidth / 2 - 10)}
                                     height={(mainHeight - 104) / 3}
                                 />
-                            </div>
-                        </Show>
-                        <Show when={eHeight() > 0 && oriData.media_spread_trend && oriData.media_spread_trend.name}>
-                            <div style={{ "margin-bottom": "6px" }}>
+                            </Show>
+                            <Show when={eHeight() > 0 && oriData.media_spread_trend && oriData.media_spread_trend.name}>
                                 <NewMediaTrend
+                                    styleCss={{ marginBottom: '6px' }}
                                     title={oriData.media_spread_trend.name}
                                     list={oriData.media_spread_trend.data}
-                                    width={Math.floor($ele.offsetWidth - 20)}
+                                    width={Math.floor($ele.offsetWidth / 2 - 10)}
                                     height={(mainHeight - 104) / 3}
                                 />
-                            </div>
-                        </Show>
+                            </Show>
+                        </div>
                         <Show when={eHeight() > 0 && oriData.media_spread && oriData.media_spread.name}>
                             <NewMedia
                                 title={oriData.media_spread.name}

src/pages/bigScreen/components/ListeningRate_g2.jsx

@@ -63,7 +63,7 @@ function ListeningRate(prop) {
         const chart = new Chart({
             container: $canvas,
             width,
-            height,
+            height: height - 20,
             padding: [10, 60, 10, 10]
         });
         chart.data(data);
@@ -121,7 +121,7 @@ function ListeningRate(prop) {
     })
     return (
         <div class="livRang" style={{
-            height:`${prop.width}px`
+            height:`${prop.height}px`
         }}>
             <div class="head">{prop.title}</div>
             <div ref={$canvas}></div>

src/pages/bigScreen/components/Usertrend.jsx

@@ -25,7 +25,7 @@ function Usertrend(prop) {
         const chart = new Chart({
             container: $canvas,
             autoFit: true,
-            height,
+            height: height - 20,
             width,
             padding: [
                 10,

yarn.lock

@@ -4812,11 +4812,6 @@ slice-source@0.4:
   resolved "https://registry.npmmirror.com/slice-source/-/slice-source-0.4.1.tgz#40a57ac03c6668b5da200e05378e000bf2a61d79"
   integrity sha512-YiuPbxpCj4hD9Qs06hGAz/OZhQ0eDuALN0lRWJez0eD/RevzKqGdUx1IOMUnXgpr+sXZLq3g8ERwbAH0bCb8vg==
 
-solid-app-router@^0.1.9:
-  version "0.1.14"
-  resolved "https://registry.npmmirror.com/solid-app-router/-/solid-app-router-0.1.14.tgz#2ffb1bfbb7db7d9d1cd81be5aec1eb786b961573"
-  integrity sha512-fnX+jCB5sDMbjq3od9qGtQNdlvHP2c6DG5STvMHVXyNuSEN+MdO7WJtZ58OpVpq6zWS4FYeYAh7NMEa7C2CcOA==
-
 solid-js@^1.1.3, solid-js@^1.3.3:
   version "1.3.15"
   resolved "https://registry.npmmirror.com/solid-js/-/solid-js-1.3.15.tgz#1d79d377fd2cbb810be1bb45b9d57157842f63e0"