提交

src/assets/style/BigScreenHome.css

@@ -169,29 +169,30 @@
 }
 
 .home .tooltip {
-  position: relative;
-  background-color: rgba(6, 30, 56, 0.9);
-  width: 10em;
-  height: 5em;
-  overflow: hidden;
-  z-index: 10;
-  background-size: 100% 100%;
-  background-image: url(/src/assets/img/k.png);
-  animation-name: example;
-  animation-duration: 0.4s;
-}
-
-.home .tooltipSon {
-  position: absolute;
-  width: 10em;
-  height: 5em;
-  text-align: center;
-  padding: 5px 10px;
-  line-height: 2em;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
+    position: relative;
+    background-color: rgba(6, 30, 56, 0.9);
+    width: 6em;
+    height: 5em;
+    line-height: 1.5em;
+    overflow: hidden;
+    z-index: 10;
+    background-size: 100% 100%;
+    background-image: url(/src/assets/img/k.png);
+    animation-name: example;
+    animation-duration: 0.4s;
+  }
+  
+  .home .tooltipSon {
+    position: absolute;
+    width: 6em;
+    height: 5em;
+    line-height: 2em;
+    text-align: center;
+    padding: 5px 10px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
 
 .home .map {
   position: relative;

src/assets/style/CommonBigScreenHome.css

@@ -103,6 +103,7 @@
 }
 
 .body .livRang {
+  overflow: hidden;
   display: inline-block;
   vertical-align: top;
   font-size: 14px;
@@ -126,6 +127,7 @@
 }
 
 .livRang .table {
+  flex: 1;
   padding-top: 3px;
   white-space: nowrap;
 }
@@ -170,8 +172,9 @@
 .home .tooltip {
   position: relative;
   background-color: rgba(6, 30, 56, 0.9);
-  width: 10em;
+  width: 6em;
   height: 5em;
+  line-height: 1.5em;
   overflow: hidden;
   z-index: 10;
   background-size: 100% 100%;
@@ -182,11 +185,11 @@
 
 .home .tooltipSon {
   position: absolute;
-  width: 10em;
+  width: 6em;
   height: 5em;
+  line-height: 2em;
   text-align: center;
   padding: 5px 10px;
-  line-height: 2em;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -240,7 +243,7 @@
   float: right;
   background-color: #1a62eb;
   border-radius: 5px;
-  padding: 3px 5px;
+  padding: 8px 15px;
   cursor: pointer;
   font-weight: 500;
 }

src/pages/CommonBigScreen/Home.jsx

@@ -8,7 +8,7 @@ import "../../assets/style/CommonBigScreenHome.css";
 
 import Usertrend from "./components/Usertrend";
 import SelfPlatform from "./components/SelfPlatform";
-import Column from "./components/Column_g2";
+// import Column from "./components/Column_g2";
 import ListeningRate from "./components/ListeningRate_g2";
 import Activity from "./components/Activity";
 import Map from "./components/Map-l7";
@@ -33,20 +33,7 @@ function setTQ(TQ) {
 
 function BigScreenHome() {
     const [HeadTitle, setHeadTitle] = createSignal();
-    const [proTv, setproTv] = createSignal([
-        {
-            text: "陕台频道收视率",
-            value: 0
-        },
-        {
-            text: "陕台频道忠诚度",
-            value: 0
-        },
-        {
-            text: "陕台频道市场份额",
-            value: 0
-        },
-    ])
+    const [proTv, setproTv] = createSignal([])
     const [oriData, setoriData] = createStore({});
     let $ele = undefined, mainHeight = document.body.offsetHeight * 0.925 - 124;
 
@@ -60,7 +47,8 @@ function BigScreenHome() {
             setoriData(d || {})
             setHeadTitle([
                 {
-                    title: "覆盖终端",
+                    title: "传统媒体-覆盖终端",
+                    color: "rgb(153,204,255)",
                     value: d.media_overview.data.totalUser,
                     path: [
                         {
@@ -70,7 +58,8 @@ function BigScreenHome() {
                     ]
                 },
                 {
-                    title: "日活跃用户",
+                    title: "传统媒体-日活跃用户",
+                    color: "rgb(0,255,0)",
                     value: d.media_overview.data.activeUser,
                     path: [
                         {
@@ -104,8 +93,10 @@ function BigScreenHome() {
                     ]
                 },
                 {
-                    title: "日收视次数",
-                    value: d.media_overview.data.watchCount,
+                    title: "传统媒体-日收视次数",
+                    color: "rgb(153,204,0)",
+                    value: d.media_overview.data.timeCount,
+                    key: '次',
                     path: [
                         {
                             d: "M682.666667 853.333333H213.333333V213.333333h469.333334v256h170.666666v384h-170.666666z m0-42.666666h128v-298.666667h-128v298.666667z m-42.666667-298.666667V256H256v554.666667h384v-298.666667zM341.333333 384V298.666667h42.666667v85.333333H341.333333z m85.333334 0V298.666667h42.666666v85.333333h-42.666666z m-85.333334 128v-85.333333h42.666667v85.333333H341.333333z m85.333334 0v-85.333333h42.666666v85.333333h-42.666666z m-85.333334 128v-85.333333h42.666667v85.333333H341.333333z m85.333334 0v-85.333333h42.666666v85.333333h-42.666666z m-85.333334 128v-85.333333h42.666667v85.333333H341.333333z m85.333334 0v-85.333333h42.666666v85.333333h-42.666666z m85.333333-384V298.666667h42.666667v85.333333h-42.666667z m0 128v-85.333333h42.666667v85.333333h-42.666667z m0 128v-85.333333h42.666667v85.333333h-42.666667z m0 128v-85.333333h42.666667v85.333333h-42.666667z m213.333333-170.666667v-42.666666h42.666667v42.666666h-42.666667z m0 85.333334v-42.666667h42.666667v42.666667h-42.666667z m0 85.333333v-42.666667h42.666667v42.666667h-42.666667z",
@@ -114,8 +105,10 @@ function BigScreenHome() {
                     ]
                 },
                 {
-                    title: "昨日收视时长",
-                    value: (d.media_overview.data.timeCount / 60).toFixed(0),
+                    title: "传统媒体-日收视时长",
+                    color: "rgb(0,153,255)",
+                    value: (d.media_overview.data.watchCount).toFixed(0),
+                    key: '小时',
                     path: [
                         {
                             d: 'M920.900621 803.267543 112.32753 803.267543c-49.059901 0-88.982874-39.921757-88.982874-88.982874L23.344655 172.240573c0-49.07328 39.922973-88.996254 88.982874-88.996254l808.573091 0c49.061117 0 88.981658 39.922973 88.981658 88.996254l0 542.044096C1009.882279 763.345786 969.961738 803.267543 920.900621 803.267543zM112.32753 104.039587c-37.593738 0-68.188823 30.595085-68.188823 68.202202l0 542.044096c0 37.594954 30.595085 68.190039 68.188823 68.190039l808.573091 0c37.592522 0 68.190039-30.593869 68.190039-68.190039L989.09066 172.240573c0-37.605901-30.596301-68.202202-68.190039-68.202202L112.32753 104.038371z',
@@ -173,6 +166,7 @@ function BigScreenHome() {
                 },
                 {
                     title: "新媒体月度传播力",
+                    color: "rgb(255,153,0)",
                     value: d.media_month_play.data,
                     path: [
                         {
@@ -187,6 +181,7 @@ function BigScreenHome() {
                 },
                 {
                     title: "重大活动传播总量",
+                    color: "rgb(0,204,255)",
                     value: d.activity_total.data,
                     path: [
                         {
@@ -199,19 +194,25 @@ function BigScreenHome() {
             setproTv([
                 {
                     text: "陕台频道收视率",
+                    color: "rgb(0,153,255)",
                     value: d.cm_tv_overview.data.watchRate
                 },
                 {
                     text: "陕台频道忠诚度",
+                    color: "rgb(41,242,178)",
                     value: d.cm_tv_overview.data.occRate
                 },
                 {
                     text: "陕台频道市场份额",
+                    color: "rgb(96,117,255)",
                     value: d.cm_tv_overview.data.loyalty
                 },
             ])
         })
     })
+
+    document.title = "集团大数据平台";
+
     return (
         <div class="home">
             <div class="homeHeader">
@@ -251,7 +252,7 @@ function BigScreenHome() {
                                     </svg>
                                 </div>
                                 <div class="text">
-                                    <span class="textNum">{utils.formatNumber(title.value, 2)}</span>
+                                    <span class="textNum" style={{color: title.color}}>{utils.formatNumber(title.value, 2) + (title.key || "")}</span>
                                     <br />
                                     {title.title}
                                 </div>
@@ -270,7 +271,7 @@ function BigScreenHome() {
                                 height={(mainHeight - 54) / 3}
                             />
                         </Show>
-                        <Show when={eHeight() > 0 && oriData.schedule_rank && oriData.schedule_rank.name} >
+                        {/* <Show when={eHeight() > 0 && oriData.schedule_rank && oriData.schedule_rank.name} >
                             <div style={{ "margin-bottom": "6px", "margin-top": "6px" }}>
                                 <Column
                                     title={oriData.schedule_rank.name}
@@ -279,13 +280,24 @@ function BigScreenHome() {
                                     height={(mainHeight - 54) / 3}
                                 />
                             </div>
-                        </Show>
+                        </Show> */}
                         <Show when={eHeight() > 0 && oriData.user_trend && oriData.user_trend.name} >
-                            <Usertrend
-                                title={oriData.user_trend.name}
-                                list={oriData.user_trend.data}
+                            <div style={{ "margin-bottom": "6px", "margin-top": "6px" }}>
+                                <Usertrend
+                                    title={oriData.user_trend.name}
+                                    list={oriData.user_trend.data}
+                                    width={Math.floor($ele.offsetWidth)}
+                                    height={(mainHeight - 54) / 3}
+                                />
+                            </div>
+                        </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)}
-                                height={(mainHeight - 54) / 3}
+                                height={(mainHeight - 104) / 3 + 20}
                             />
                         </Show>
                     </div>
@@ -304,42 +316,33 @@ function BigScreenHome() {
                         </div>
                         <div class="flex">
                             <For each={proTv()} >{item => <div class="flexItem">
-                                <p class="textNum">{utils.formatNumber(item.value, 2)}%</p>
+                                <p class="textNum" style={{ color: item.color }}>{utils.formatNumber(item.value, 2)}%</p>
                                 {item.text}
                             </div>
                             }</For>
                         </div>
                     </div>
                     <div class="mainbody right">
-                        <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 + 12}
-                            />
-                        </Show>
-                        <div style={{ display: "inline-block", width: "50%" }}>
-                            <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 / 2 - 10)}
-                                    height={(mainHeight - 104) / 3}
-                                />
-                            </Show>
-                            <Show when={eHeight() > 0 && oriData.media_read_trend && oriData.media_read_trend.name}>
+                        <Show when={eHeight() > 0 && oriData.media_read_trend && oriData.media_read_trend.name}>
+                            <div style={{ "margin-bottom": "6px", "margin-top": "6px" }}>
                                 <SelfPlatform
                                     styleCss={{ marginBottom: '6px' }}
                                     title={oriData.media_read_trend.name}
                                     list={oriData.media_read_trend.data}
-                                    width={Math.floor($ele.offsetWidth / 2 - 10)}
+                                    width={Math.floor($ele.offsetWidth - 20)}
                                     height={(mainHeight - 104) / 3}
                                 />
-                            </Show>
-                        </div>
+                            </div>
+                        </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)}
+                                height={(mainHeight - 104) / 3}
+                            />
+                        </Show>
                         <Show when={eHeight() > 0 && oriData.media_spread && oriData.media_spread.name}>
                             <NewMedia
                                 title={oriData.media_spread.name}

src/pages/CommonBigScreen/components/Activity.jsx

@@ -1,37 +1,67 @@
-import { onMount, For } from "solid-js";
+import { onMount, For, Show } from "solid-js";
 
 import utils from "../../../utils/index"
 import "../../../assets/style/CommonBigScreenHome.css"
 
 function ListeningRate(prop) {
     onMount(() => { })
+
     return (
         <div class="livRang" style={{
-            width:`${prop.width}px`
+            width: `${prop.width}px`
         }}>
             <div class="head">{prop.title}</div>
-            <div class="table">
-                <div class="tr" style={{"background-color":"#03375e"}}>
-                    <div class='td'>序号</div>
-                    <div class='td' style={{"flex":"2"}}>活动名称</div>
-                    <div class='td'>传播次数</div>
+            <div style={{ display: 'flex' }}>
+
+                <div class="table">
+                    <div class="tr" style={{ "background-color": "#03375e" }}>
+                        <div class='td'>序号</div>
+                        <div class='td' style={{ "flex": "2" }}>活动名称</div>
+                        <div class='td'>传播次数</div>
+                    </div>
+                    <div style={{
+                        height: `${prop.height - 42}px`,
+                    }}>
+                        <For each={prop.list}>{(item, i) => <div class="tr trColor" style={{ display: i() + 1 > 6 ? 'none' : 'flex' }}>
+                            <div class='td'>{i() + 1}</div>
+                            <Show when={item.activity.length > 7}>
+                                <marquee class='td' style={{ "flex": "2", "min-width": "0" }}>
+                                    {item.activity}
+                                </marquee>
+                            </Show>
+                            <Show when={item.activity.length <= 7}>
+                                <dev class='td' style={{ "flex": "2", "min-width": "0" }}>
+                                    {item.activity}
+                                </dev>
+                            </Show>
+                            <div class='td'>{utils.formatNumber(item.readCount)}</div>
+                        </div>}</For>
+                    </div>
                 </div>
-                <div style={{
-                    height:`${prop.height - 42}px`,
-                    overflow: 'auto'
-                }}>
-                    <For each={prop.list}>{(item, i) => <div class="tr trColor">
-                        <div class='td'>{i() + 1}</div>
-                        <div class='td' style={{"flex":"2","min-width":"0"}}>
-                            {/* <Show when={maxlen <= item.activity.length}>
-                                <marquee behavior="scroll">{item.activity} </marquee>
+                <div class="table">
+                    <div class="tr" style={{ "background-color": "#03375e" }}>
+                        <div class='td'>序号</div>
+                        <div class='td' style={{ "flex": "2" }}>活动名称</div>
+                        <div class='td'>传播次数</div>
+                    </div>
+                    <div style={{
+                        height: `${prop.height - 42}px`,
+                    }}>
+                        <For each={prop.list}>{(item, i) => <div class="tr trColor" style={{ display: i() + 1 <= 6 ? 'none' : 'flex' }}>
+                            <div class='td'>{i() + 1}</div>
+                            <Show when={item.activity.length > 7}>
+                                <marquee class='td' style={{ "flex": "2", "min-width": "0" }}>
+                                    {item.activity}
+                                </marquee>
+                            </Show>
+                            <Show when={item.activity.length <= 7}>
+                                <dev class='td' style={{ "flex": "2", "min-width": "0" }}>
+                                    {item.activity}
+                                </dev>
                             </Show>
-                            <Show when={maxlen > item.activity.length}> */}
-                                {item.activity}
-                            {/* </Show> */}
-                        </div>
-                        <div class='td'>{utils.formatNumber(item.readCount)}</div>
-                    </div>}</For>
+                            <div class='td'>{utils.formatNumber(item.readCount)}</div>
+                        </div>}</For>
+                    </div>
                 </div>
             </div>
         </div>

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

@@ -18,11 +18,9 @@ let total = 0
 function Map(prop) {
     let anchorLayer = undefined,
         textLayer = undefined,
-        timeHome = undefined,
         $canvas = undefined,
         scene = undefined,
         source = [],
-        index = 0,
         li = [],
         cli = [
             '#87CEFA',
@@ -69,10 +67,10 @@ function Map(prop) {
             //     token: config.gaodeToken
             // })
             map: new Mapbox({
-                pitch: 0,
+                pitch: 60,
                 center: [108.2, 35.6],
                 style: 'blank',
-                zoom: 5.4,
+                zoom: 5.6,
                 minZoom: 5.4,
             })
         });
@@ -213,75 +211,67 @@ function Map(prop) {
                 // scene.addLayer(barLayer);
 
                 timeout()
-                mapFun();
             })
         });
     }
 
-    function mapFun() {
-        if (timeHome) clearTimeout(timeHome);
-        timeHome = setTimeout(() => {
-            timeout(scene)
-        }, 3000);
-    }
-
     function timeout() {
         // scene.setCenter([source[index].lng, source[index].lat])
-        mapFun(scene);
-        anchorLayer && scene.removeAllMakers();
-        textLayer && scene.removeLayer(textLayer);
-        var el = document.createElement('div'), son = document.createElement('div');
-        el.className = 'tooltip';
-        son.className = "tooltipSon";
-        son.innerHTML = `<div>${source[index].name}</div>${utils.formatNumber(source[index].size, 2)}`;
-        el.appendChild(son);
-        // toolpit
-        anchorLayer = new Marker({
-            element: el
-        }).setLnglat([source[index].lng, source[index].lat]);
+        for (let index = 0; index < source.length; index++) {
+            console.log(source[index])
+            // anchorLayer && scene.removeAllMakers();
+            // textLayer && scene.removeLayer(textLayer);
+            var el = document.createElement('div'), son = document.createElement('div');
+            el.className = 'tooltip';
+            son.className = "tooltipSon";
+            son.innerHTML = `<div>${source[index].name}</div>${utils.formatNumber(source[index].size, 2)}`;
+            el.appendChild(son);
+            // toolpit
+            anchorLayer = new Marker({
+                element: el
+            }).setLnglat([source[index].lng, source[index].lat]);
 
-        const text = [], province = [];
-        for (let i = 0; i < source.length; i++) {
-            if (index === i) {
-                li[i].value = 10000 * Math.random();
-                li[i] && province.push(li[i]);
-                continue
+            const text = [], province = [];
+            for (let i = 0; i < source.length; i++) {
+                if (index === i) {
+                    li[i].value = 10000 * Math.random();
+                    li[i] && province.push(li[i]);
+                    continue
+                }
+                const v = source[i];
+                text.push(v);
             }
-            const v = source[i];
-            text.push(v);
+            // 文字
+            textLayer = new PointLayer({ zIndex: 1, blend: "normal" })
+                .source(text, {
+                    parser: {
+                        type: 'json',
+                        x: 'lng',
+                        y: 'lat'
+                    }
+                })
+                .shape('name', 'text')
+                .size(14)
+                .style({
+                    textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+                    spacing: 2, // 字符间距
+                    padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+                    stroke: '#FFFFFF', // 描边颜色
+                    strokeWidth: 0.2, // 描边宽度
+                    raisingHeight: 1,
+                    textAllowOverlap: true
+                });
+            scene.addLayer(textLayer);
+            scene.addMarker(anchorLayer);
         }
-        // 文字
-        textLayer = new PointLayer({ zIndex: 1, blend: "normal" })
-            .source(text, {
-                parser: {
-                    type: 'json',
-                    x: 'lng',
-                    y: 'lat'
-                }
-            })
-            .shape('name', 'text')
-            .size(14)
-            .style({
-                textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-                spacing: 2, // 字符间距
-                padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-                stroke: '#FFFFFF', // 描边颜色
-                strokeWidth: 0.2, // 描边宽度
-                raisingHeight: 1,
-                textAllowOverlap: true
-            });
-        scene.addLayer(textLayer);
-        scene.addMarker(anchorLayer);
 
-        if (source[index + 1]) index++
-        else index = 0;
     }
     onMount(() => {
         TrendChart()
     })
 
     const openBigData = () => {
-        window.open("http://djweb.smcic.net/centerRelay/center.html?"+ Date.now())
+        window.open("http://djweb.smcic.net/centerRelay/center.html?" + Date.now())
     }
     return (
         <div class="livRang map" style={{

src/pages/bigScreen/Home.jsx

@@ -14,7 +14,7 @@ import Activity from "./components/Activity";
 import Map from "./components/Map-l7";
 // import Map from "./components/Map";
 import NewMedia from "./components/NewMedia";
-import NewMediaTrend from "./components/NewMediaTrend"
+// import NewMediaTrend from "./components/NewMediaTrend"
 
 import { getWeather, getData } from "../../api/bigScreen"
 const [TimeDate, setTimeDate] = createSignal("");
@@ -105,7 +105,7 @@ function BigScreenHome() {
                 },
                 {
                     title: "日收视次数",
-                    value: d.media_overview.data.watchCount,
+                    value: d.media_overview.data.timeCount,
                     path: [
                         {
                             d: "M682.666667 853.333333H213.333333V213.333333h469.333334v256h170.666666v384h-170.666666z m0-42.666666h128v-298.666667h-128v298.666667z m-42.666667-298.666667V256H256v554.666667h384v-298.666667zM341.333333 384V298.666667h42.666667v85.333333H341.333333z m85.333334 0V298.666667h42.666666v85.333333h-42.666666z m-85.333334 128v-85.333333h42.666667v85.333333H341.333333z m85.333334 0v-85.333333h42.666666v85.333333h-42.666666z m-85.333334 128v-85.333333h42.666667v85.333333H341.333333z m85.333334 0v-85.333333h42.666666v85.333333h-42.666666z m-85.333334 128v-85.333333h42.666667v85.333333H341.333333z m85.333334 0v-85.333333h42.666666v85.333333h-42.666666z m85.333333-384V298.666667h42.666667v85.333333h-42.666667z m0 128v-85.333333h42.666667v85.333333h-42.666667z m0 128v-85.333333h42.666667v85.333333h-42.666667z m0 128v-85.333333h42.666667v85.333333h-42.666667z m213.333333-170.666667v-42.666666h42.666667v42.666666h-42.666667z m0 85.333334v-42.666667h42.666667v42.666667h-42.666667z m0 85.333333v-42.666667h42.666667v42.666667h-42.666667z",
@@ -115,7 +115,8 @@ function BigScreenHome() {
                 },
                 {
                     title: "昨日收视时长",
-                    value: (d.media_overview.data.timeCount / 60).toFixed(0),
+                    value: (d.media_overview.data.watchCount).toFixed(0),
+                    key: '小时',
                     path: [
                         {
                             d: 'M920.900621 803.267543 112.32753 803.267543c-49.059901 0-88.982874-39.921757-88.982874-88.982874L23.344655 172.240573c0-49.07328 39.922973-88.996254 88.982874-88.996254l808.573091 0c49.061117 0 88.981658 39.922973 88.981658 88.996254l0 542.044096C1009.882279 763.345786 969.961738 803.267543 920.900621 803.267543zM112.32753 104.039587c-37.593738 0-68.188823 30.595085-68.188823 68.202202l0 542.044096c0 37.594954 30.595085 68.190039 68.188823 68.190039l808.573091 0c37.592522 0 68.190039-30.593869 68.190039-68.190039L989.09066 172.240573c0-37.605901-30.596301-68.202202-68.190039-68.202202L112.32753 104.038371z',
@@ -227,6 +228,9 @@ function BigScreenHome() {
         //     setWeather(err.message || "未获得地理位置授权！")
         // })
     })
+
+    document.title = "陕西广电融媒体集团大数据平台";
+
     return (
         <div class="home">
             <div class="homeHeader">
@@ -332,30 +336,21 @@ function BigScreenHome() {
                                 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 + 12}
+                                width={Math.floor($ele.offsetWidth - 20)}
+                                height={(mainHeight - 104) / 3 + 20}
                             />
                         </Show>
-                        <div style={{ display: "inline-block", width: "50%" }}>
-                            <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 / 2 - 10)}
-                                    height={(mainHeight - 104) / 3}
-                                />
-                            </Show>
-                            <Show when={eHeight() > 0 && oriData.media_read_trend && oriData.media_read_trend.name}>
+                        <Show when={eHeight() > 0 && oriData.media_read_trend && oriData.media_read_trend.name}>
+                            <div style={{ "margin-bottom": "6px", "margin-top": "6px" }}>
                                 <SelfPlatform
                                     styleCss={{ marginBottom: '6px' }}
                                     title={oriData.media_read_trend.name}
                                     list={oriData.media_read_trend.data}
-                                    width={Math.floor($ele.offsetWidth / 2 - 10)}
+                                    width={Math.floor($ele.offsetWidth - 20)}
                                     height={(mainHeight - 104) / 3}
                                 />
-                            </Show>
-                        </div>
+                            </div>
+                        </Show>
                         <Show when={eHeight() > 0 && oriData.media_spread && oriData.media_spread.name}>
                             <NewMedia
                                 title={oriData.media_spread.name}

src/pages/bigScreen/components/Activity.jsx

@@ -1,37 +1,67 @@
-import { onMount, For } from "solid-js";
+import { onMount, For, Show } from "solid-js";
 
 import utils from "../../../utils/index"
-import "../../../assets/style/BigScreenHome.css"
+import "../../../assets/style/CommonBigScreenHome.css"
 
 function ListeningRate(prop) {
     onMount(() => { })
+
     return (
         <div class="livRang" style={{
-            width:`${prop.width}px`
+            width: `${prop.width}px`
         }}>
             <div class="head">{prop.title}</div>
-            <div class="table">
-                <div class="tr" style={{"background-color":"#03375e"}}>
-                    <div class='td'>序号</div>
-                    <div class='td' style={{"flex":"2"}}>活动名称</div>
-                    <div class='td'>传播次数</div>
+            <div style={{ display: 'flex' }}>
+
+                <div class="table">
+                    <div class="tr" style={{ "background-color": "#03375e" }}>
+                        <div class='td'>序号</div>
+                        <div class='td' style={{ "flex": "2" }}>活动名称</div>
+                        <div class='td'>传播次数</div>
+                    </div>
+                    <div style={{
+                        height: `${prop.height - 42}px`,
+                    }}>
+                        <For each={prop.list}>{(item, i) => <div class="tr trColor" style={{ display: i() + 1 > 6 ? 'none' : 'flex' }}>
+                            <div class='td'>{i() + 1}</div>
+                            <Show when={item.activity.length > 7}>
+                                <marquee class='td' style={{ "flex": "2", "min-width": "0" }}>
+                                    {item.activity}
+                                </marquee>
+                            </Show>
+                            <Show when={item.activity.length <= 7}>
+                                <dev class='td' style={{ "flex": "2", "min-width": "0" }}>
+                                    {item.activity}
+                                </dev>
+                            </Show>
+                            <div class='td'>{utils.formatNumber(item.readCount)}</div>
+                        </div>}</For>
+                    </div>
                 </div>
-                <div style={{
-                    height:`${prop.height - 42}px`,
-                    overflow: 'auto'
-                }}>
-                    <For each={prop.list}>{(item, i) => <div class="tr trColor">
-                        <div class='td'>{i() + 1}</div>
-                        <div class='td' style={{"flex":"2","min-width":"0"}}>
-                            {/* <Show when={maxlen <= item.activity.length}>
-                                <marquee behavior="scroll">{item.activity} </marquee>
+                <div class="table">
+                    <div class="tr" style={{ "background-color": "#03375e" }}>
+                        <div class='td'>序号</div>
+                        <div class='td' style={{ "flex": "2" }}>活动名称</div>
+                        <div class='td'>传播次数</div>
+                    </div>
+                    <div style={{
+                        height: `${prop.height - 42}px`,
+                    }}>
+                        <For each={prop.list}>{(item, i) => <div class="tr trColor" style={{ display: i() + 1 <= 6 ? 'none' : 'flex' }}>
+                            <div class='td'>{i() + 1}</div>
+                            <Show when={item.activity.length > 7}>
+                                <marquee class='td' style={{ "flex": "2", "min-width": "0" }}>
+                                    {item.activity}
+                                </marquee>
+                            </Show>
+                            <Show when={item.activity.length <= 7}>
+                                <dev class='td' style={{ "flex": "2", "min-width": "0" }}>
+                                    {item.activity}
+                                </dev>
                             </Show>
-                            <Show when={maxlen > item.activity.length}> */}
-                                {item.activity}
-                            {/* </Show> */}
-                        </div>
-                        <div class='td'>{utils.formatNumber(item.readCount)}</div>
-                    </div>}</For>
+                            <div class='td'>{utils.formatNumber(item.readCount)}</div>
+                        </div>}</For>
+                    </div>
                 </div>
             </div>
         </div>

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

@@ -11,18 +11,16 @@ import utils from "../../../utils/index"
 
 import { getMapfull } from "../../../api/bigScreen"
 
-import "../../../assets/style/BigScreenHome.css"
+import "../../../assets/style/CommonBigScreenHome.css"
 
 let total = 0
 
 function Map(prop) {
     let anchorLayer = undefined,
         textLayer = undefined,
-        timeHome = undefined,
         $canvas = undefined,
         scene = undefined,
         source = [],
-        index = 0,
         li = [],
         cli = [
             '#87CEFA',
@@ -69,10 +67,10 @@ function Map(prop) {
             //     token: config.gaodeToken
             // })
             map: new Mapbox({
-                pitch: 0,
+                pitch: 60,
                 center: [108.2, 35.6],
                 style: 'blank',
-                zoom: 5.4,
+                zoom: 5.6,
                 minZoom: 5.4,
             })
         });
@@ -213,78 +211,75 @@ function Map(prop) {
                 // scene.addLayer(barLayer);
 
                 timeout()
-                mapFun();
             })
         });
     }
 
-    function mapFun() {
-        if (timeHome) clearTimeout(timeHome);
-        timeHome = setTimeout(() => {
-            timeout(scene)
-        }, 3000);
-    }
-
     function timeout() {
         // scene.setCenter([source[index].lng, source[index].lat])
-        mapFun(scene);
-        anchorLayer && scene.removeAllMakers();
-        textLayer && scene.removeLayer(textLayer);
-        var el = document.createElement('div'), son = document.createElement('div');
-        el.className = 'tooltip';
-        son.className = "tooltipSon";
-        son.innerHTML = `<div>${source[index].name}</div>${utils.formatNumber(source[index].size, 2)}`;
-        el.appendChild(son);
-        // toolpit
-        anchorLayer = new Marker({
-            element: el
-        }).setLnglat([source[index].lng, source[index].lat]);
+        for (let index = 0; index < source.length; index++) {
+            console.log(source[index])
+            // anchorLayer && scene.removeAllMakers();
+            // textLayer && scene.removeLayer(textLayer);
+            var el = document.createElement('div'), son = document.createElement('div');
+            el.className = 'tooltip';
+            son.className = "tooltipSon";
+            son.innerHTML = `<div>${source[index].name}</div>${utils.formatNumber(source[index].size, 2)}`;
+            el.appendChild(son);
+            // toolpit
+            anchorLayer = new Marker({
+                element: el
+            }).setLnglat([source[index].lng, source[index].lat]);
 
-        const text = [], province = [];
-        for (let i = 0; i < source.length; i++) {
-            if (index === i) {
-                li[i].value = 10000 * Math.random();
-                li[i] && province.push(li[i]);
-                continue
+            const text = [], province = [];
+            for (let i = 0; i < source.length; i++) {
+                if (index === i) {
+                    li[i].value = 10000 * Math.random();
+                    li[i] && province.push(li[i]);
+                    continue
+                }
+                const v = source[i];
+                text.push(v);
             }
-            const v = source[i];
-            text.push(v);
+            // 文字
+            textLayer = new PointLayer({ zIndex: 1, blend: "normal" })
+                .source(text, {
+                    parser: {
+                        type: 'json',
+                        x: 'lng',
+                        y: 'lat'
+                    }
+                })
+                .shape('name', 'text')
+                .size(14)
+                .style({
+                    textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+                    spacing: 2, // 字符间距
+                    padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+                    stroke: '#FFFFFF', // 描边颜色
+                    strokeWidth: 0.2, // 描边宽度
+                    raisingHeight: 1,
+                    textAllowOverlap: true
+                });
+            scene.addLayer(textLayer);
+            scene.addMarker(anchorLayer);
         }
-        // 文字
-        textLayer = new PointLayer({ zIndex: 1, blend: "normal" })
-            .source(text, {
-                parser: {
-                    type: 'json',
-                    x: 'lng',
-                    y: 'lat'
-                }
-            })
-            .shape('name', 'text')
-            .size(14)
-            .style({
-                textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-                spacing: 2, // 字符间距
-                padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-                stroke: '#FFFFFF', // 描边颜色
-                strokeWidth: 0.2, // 描边宽度
-                raisingHeight: 1,
-                textAllowOverlap: true
-            });
-        scene.addLayer(textLayer);
-        scene.addMarker(anchorLayer);
 
-        if (source[index + 1]) index++
-        else index = 0;
     }
     onMount(() => {
         TrendChart()
     })
+
+    const openBigData = () => {
+        window.open("http://djweb.smcic.net/centerRelay/center.html?" + Date.now())
+    }
     return (
         <div class="livRang map" style={{
             width: `${prop.width}px`
         }}>
             <div class="head">
                 {prop.title}
+                <div onClick={openBigData} class="btn">大数据平台登录入口</div>
             </div>
             <div ref={$canvas} style={{
                 width: `${prop.width}px`,