提交

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "description": "",
   "scripts": {
-    "dev": "vite --mode development --open",
+    "dev": "vite --mode development",
     "build": "vite build --mode production",
     "serve": "vite preview"
   },

src/assets/style/BigScreenHome.css

@@ -170,13 +170,13 @@
 
 .home .tooltip {
     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-color: rgba(6, 30, 56, 0.9);
     background-image: url(/src/assets/img/k.png);
     animation-name: example;
     animation-duration: 0.4s;
@@ -242,4 +242,8 @@
 .center{
     overflow: hidden;
     position: relative;
-}
+}
+
+.selfSwiper{
+    width: 438px;
+}

src/assets/style/CommonBigScreenHome.css

@@ -171,13 +171,13 @@
 
 .home .tooltip {
   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-color: rgba(6, 30, 56, 0.9);
   background-image: url(/src/assets/img/k.png);
   animation-name: example;
   animation-duration: 0.4s;
@@ -251,3 +251,7 @@
 .ismore{
     width: 1em;
 }
+
+.selfSwiper{
+    width: 438px;
+}

src/pages/CommonBigScreen/Home.jsx

@@ -257,7 +257,7 @@ function BigScreenHome() {
                                     </svg>
                                 </div>
                                 <div class="text">
-                                    <span class="textNum" style={{ color: title.color }}>{utils.formatNumber(title.value, 2) + (title.key || "")}</span>
+                                    <span class="textNum" style={{ color: title.color }}>{utils.formatNum(title.value, 2) + (title.key || "")}</span>
                                     <Show when={title.isMore != undefined && title.isMore}>
                                         <img class='ismore' src="http://113.142.79.114:8088/webroot/decision/view/form?id=__ImageCache__6EC5222330C7FC9FAF3990694813298C&cache=true&op=fr_attach&cmd=ah_image" alt="" />
                                     </Show>
@@ -327,7 +327,7 @@ function BigScreenHome() {
                         </div>
                         <div class="flex">
                             <For each={proTv()} >{item => <div class="flexItem">
-                                <p class="textNum" style={{ color: item.color }}>{utils.formatNumber(item.value, 2)}%</p>
+                                <p class="textNum" style={{ color: item.color }}>{utils.formatNum(item.value, 2)}%</p>
                                 {item.text}
                             </div>
                             }</For>

src/pages/CommonBigScreen/components/Activity.jsx

@@ -24,12 +24,12 @@ function ListeningRate(prop) {
                     }}>
                         <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}>
+                            <Show when={item.activity.length > 9}>
                                 <marquee class='td' style={{ "flex": "2", "min-width": "0" }}>
                                     {item.activity}
                                 </marquee>
                             </Show>
-                            <Show when={item.activity.length <= 7}>
+                            <Show when={item.activity.length <= 9}>
                                 <dev class='td' style={{ "flex": "2", "min-width": "0" }}>
                                     {item.activity}
                                 </dev>
@@ -49,12 +49,12 @@ function ListeningRate(prop) {
                     }}>
                         <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}>
+                            <Show when={item.activity.length > 9}>
                                 <marquee class='td' style={{ "flex": "2", "min-width": "0" }}>
                                     {item.activity}
                                 </marquee>
                             </Show>
-                            <Show when={item.activity.length <= 7}>
+                            <Show when={item.activity.length <= 9}>
                                 <dev class='td' style={{ "flex": "2", "min-width": "0" }}>
                                     {item.activity}
                                 </dev>

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

@@ -67,10 +67,11 @@ function Map(prop) {
             //     token: config.gaodeToken
             // })
             map: new Mapbox({
-                pitch: 60,
-                center: [108.2, 35.6],
+                pitch: 40,
+                center: [108.2, 34.8],
                 style: 'blank',
-                zoom: 5.6,
+                zoom: 5.8,
+                rotation: -10,
                 minZoom: 5.4,
             })
         });

src/pages/CommonBigScreen/components/NewMedia.jsx

@@ -102,7 +102,7 @@ function NewMedia(prop) {
                             {item.userName}
                             {/* </Show> */}
                         </div>
-                        <div class='td' style={{ "flex": "2" }}>{utils.formatNumber(item.readCount)}</div>
+                        <div class='td' style={{ "flex": "2" }}>{utils.formatNum(item.readCount)}</div>
                     </div>}</For>
                 </div>
             </div>

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("");
@@ -61,7 +61,9 @@ function BigScreenHome() {
             setoriData(d || {})
             setHeadTitle([
                 {
-                    title: "覆盖终端",
+                    title: "传统媒体-覆盖终端",
+                    color: "rgb(153,204,255)",
+                    isMore: d.media_overview.data.totalUser > d.media_overview.data.yesterday.totalUser,
                     value: d.media_overview.data.totalUser,
                     path: [
                         {
@@ -71,7 +73,9 @@ function BigScreenHome() {
                     ]
                 },
                 {
-                    title: "日活跃用户",
+                    title: "传统媒体-日活跃用户",
+                    color: "rgb(0,255,0)",
+                    isMore: d.media_overview.data.activeUser > d.media_overview.data.yesterday.activeUser,
                     value: d.media_overview.data.activeUser,
                     path: [
                         {
@@ -105,8 +109,11 @@ function BigScreenHome() {
                     ]
                 },
                 {
-                    title: "日收视次数",
+                    title: "传统媒体-日收视次数",
+                    color: "rgb(153,204,0)",
+                    isMore: d.media_overview.data.timeCount > d.media_overview.data.yesterday.timeCount,
                     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",
@@ -115,8 +122,10 @@ function BigScreenHome() {
                     ]
                 },
                 {
-                    title: "昨日收视时长",
-                    value: (d.media_overview.data.watchCount).toFixed(0),
+                    title: "传统媒体-日收视时长",
+                    color: "rgb(0,153,255)",
+                    isMore: d.media_overview.data.watchCount > d.media_overview.data.yesterday.watchCount,
+                    value: d.media_overview.data.watchCount,
                     key: '小时',
                     path: [
                         {
@@ -175,6 +184,7 @@ function BigScreenHome() {
                 },
                 {
                     title: "新媒体月度传播力",
+                    color: "rgb(255,153,0)",
                     value: d.media_month_play.data,
                     path: [
                         {
@@ -189,6 +199,7 @@ function BigScreenHome() {
                 },
                 {
                     title: "重大活动传播总量",
+                    color: "rgb(0,204,255)",
                     value: d.activity_total.data,
                     path: [
                         {
@@ -201,19 +212,24 @@ 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
                 },
             ])
 
-            // new window.Swiper('.selfSwiper')
+            new window.Swiper('.selfSwiper', {
+                autoplay: 5000,
+            })
         })
 
         // TODO: 浏览器获取定位权限
@@ -234,7 +250,6 @@ function BigScreenHome() {
     })
 
     document.title = "陕西广电融媒体集团大数据平台";
-
     return (
         <div class="home">
             <div class="homeHeader">
@@ -274,7 +289,13 @@ function BigScreenHome() {
                                     </svg>
                                 </div>
                                 <div class="text">
-                                    <span class="textNum">{utils.formatNumber(title.value, 2)}</span>
+                                    <span class="textNum" style={{ color: title.color }}>{utils.formatNum(title.value, 2) + (title.key || "")}</span>
+                                    <Show when={title.isMore != undefined && title.isMore}>
+                                        <img class='ismore' src="https://cxzx.smcic.net/topic/tool/img/up.png" alt="" />
+                                    </Show>
+                                    <Show when={title.isMore != undefined && !title.isMore}>
+                                        <img class='ismore' src="https://cxzx.smcic.net/topic/tool/img/down.png" alt="" />
+                                    </Show>
                                     <br />
                                     {title.title}
                                 </div>
@@ -328,7 +349,7 @@ 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.formatNum(item.value, 2)}%</p>
                                 {item.text}
                             </div>
                             }</For>
@@ -344,10 +365,10 @@ function BigScreenHome() {
                                 height={(mainHeight - 104) / 3 + 20}
                             />
                         </Show>
-                        <div class="center" style={{ width: Math.floor($ele.offsetWidth - 20) + 'px', height: (mainHeight - 104) / 3 + 30 + 'px', "margin-bottom": "6px", "margin-top": "6px" }}>
-                            {/* <div class="swiper-container selfSwiper">
+                        <div class="center" style={{ width: '100%', height: (mainHeight - 104) / 3 + 30 + 'px', "margin-bottom": "6px", "margin-top": "6px" }}>
+                            <div class="swiper-container selfSwiper" style={{ width: document.body.offsetWidth / 3 + 'px', height: (mainHeight - 104) / 3 + 30 + 'px' }}>
                                 <div class="swiper-wrapper">
-                                    <div class="swiper-slide"> */}
+                                    <div class="swiper-slide">
                                         <Show when={oriData.media_read_trend && oriData.media_read_trend.name}>
                                             <SelfPlatform
                                                 styleCss={{ marginBottom: '6px' }}
@@ -357,7 +378,7 @@ function BigScreenHome() {
                                                 height={(mainHeight - 104) / 3}
                                             />
                                         </Show>
-                                    {/* </div>
+                                    </div>
                                     <div class="swiper-slide">
                                         <Show when={oriData.media_spread_trend && oriData.media_spread_trend.name}>
                                             <NewMediaTrend
@@ -370,7 +391,7 @@ function BigScreenHome() {
                                         </Show>
                                     </div>
                                 </div>
-                            </div> */}
+                            </div>
 
                         </div>
                         <Show when={eHeight() > 0 && oriData.media_spread && oriData.media_spread.name}>

src/pages/bigScreen/components/Activity.jsx

@@ -24,12 +24,12 @@ function ListeningRate(prop) {
                     }}>
                         <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}>
+                            <Show when={item.activity.length > 9}>
                                 <marquee class='td' style={{ "flex": "2", "min-width": "0" }}>
                                     {item.activity}
                                 </marquee>
                             </Show>
-                            <Show when={item.activity.length <= 7}>
+                            <Show when={item.activity.length <= 9}>
                                 <dev class='td' style={{ "flex": "2", "min-width": "0" }}>
                                     {item.activity}
                                 </dev>
@@ -49,12 +49,12 @@ function ListeningRate(prop) {
                     }}>
                         <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}>
+                            <Show when={item.activity.length > 9}>
                                 <marquee class='td' style={{ "flex": "2", "min-width": "0" }}>
                                     {item.activity}
                                 </marquee>
                             </Show>
-                            <Show when={item.activity.length <= 7}>
+                            <Show when={item.activity.length <= 9}>
                                 <dev class='td' style={{ "flex": "2", "min-width": "0" }}>
                                     {item.activity}
                                 </dev>

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

@@ -67,13 +67,15 @@ function Map(prop) {
             //     token: config.gaodeToken
             // })
             map: new Mapbox({
-                pitch: 60,
-                center: [108.2, 35.6],
+                pitch: 40,
+                center: [108.2, 34.8],
                 style: 'blank',
-                zoom: 5.6,
+                zoom: 5.8,
+                rotation: -10,
                 minZoom: 5.4,
             })
         });
+        console.log("---")
         scene.setMapStatus({ dragEnable: false });
         scene.on('loaded', () => {
 

src/pages/bigScreen/components/NewMedia.jsx

@@ -102,7 +102,7 @@ function NewMedia(prop) {
                             {item.userName}
                             {/* </Show> */}
                         </div>
-                        <div class='td' style={{ "flex": "2" }}>{utils.formatNumber(item.readCount)}</div>
+                        <div class='td' style={{ "flex": "2" }}>{utils.formatNum(item.readCount)}</div>
                     </div>}</For>
                 </div>
             </div>

src/utils/index.js

@@ -49,6 +49,18 @@ export default {
             return (num[0] || "").replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + dw;
         }
     },
+    formatNum(num, d=2){
+        if(isNaN(num)) return '0';
+        let dw = "";
+        if (num >= 100000000) {
+            dw = "亿";
+            num = (num / 100000000).toFixed(d) - 0;
+        } else if (num >= 10000) {
+            dw = "万";
+            num = (num / 10000).toFixed(d) - 0;
+        }
+        return num + dw;
+    },
     decodeURL(url,obj){
         let Keys = Object.keys(obj), urlData = "?";
         for (let i = 0; i < Keys.length; i++) {