提交

src/api/bigScreen.js

@@ -31,3 +31,10 @@ export function getData(data) {
     data,
   });
 }
+export function getCommonData(data) {
+  return Net({
+    url: `${config.localBaseUrl}/cxzx-screen/big-screen/index/x2`,
+    method: "GET",
+    data,
+  });
+}

src/assets/style/CommonBigScreenHome.css

@@ -0,0 +1,245 @@
+.home {
+  background-image: url("/src/assets/img/bg@3x.jpg");
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.home * {
+  user-select: none;
+}
+
+.home .headTitle {
+  padding: 0 35%;
+  width: 100%;
+  text-align: center;
+  font-size: 21px;
+  font-weight: 600;
+  float: left;
+}
+
+.home .homeHeader {
+  width: 100%;
+  overflow: hidden;
+  height: 7.5vh;
+  line-height: 7.5vh;
+}
+
+.home .itemHeader {
+  flex: 1;
+}
+
+.home .itemMain {
+  margin: 5px 2px;
+  white-space: nowrap;
+  padding: 1em;
+  background-color: rgba(6, 30, 56, 0.9);
+}
+
+.home .sz {
+  float: left;
+  padding-left: 5em;
+}
+
+.home .tq {
+  position: absolute;
+  z-index: 101;
+  right: 0;
+  padding-right: 5em;
+}
+
+.home .text {
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+}
+.home .textNum {
+  font-size: 18pt;
+  color: #ff9900;
+  font-weight: 600;
+  font-family: "微软雅黑";
+}
+
+.icons {
+  background: linear-gradient(rgba(3, 76, 117, 0), #034c75);
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  margin: 5px;
+  position: relative;
+  vertical-align: middle;
+}
+
+.icons svg {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 10%;
+}
+
+.icons .img {
+  transform-style: preserve-3d;
+  transform: rotateX(-77deg) rotateY(2deg) rotateZ(40deg);
+
+  position: absolute;
+  bottom: -50%;
+  width: 100%;
+  height: 100%;
+  left: 5%;
+}
+
+.body .main {
+  width: 100%;
+  height: calc(92.5vh - 124px);
+  overflow: hidden;
+  width: 100vw;
+  display: flex;
+}
+
+.body .mainbody {
+  flex: 1;
+  padding: 3px;
+}
+
+.body .livRang {
+  display: inline-block;
+  vertical-align: top;
+  font-size: 14px;
+  background-color: rgba(6, 30, 56, 0.9);
+}
+
+.livRang .head {
+  padding: 5px 3px 5px 15px;
+  font-size: 17px;
+}
+.livRang .head::before {
+  content: " ";
+  float: left;
+  display: block;
+  margin-left: -10px;
+  margin-top: 2px;
+  border-radius: 3px;
+  width: 3px;
+  height: 1.2em;
+  background-color: #02ffec;
+}
+
+.livRang .table {
+  padding-top: 3px;
+  white-space: nowrap;
+}
+
+.livRang .table .tr {
+  border-radius: 3px;
+  overflow: hidden;
+  display: flex;
+}
+.livRang .table .td {
+  border: none;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 6px 3px;
+  text-align: center;
+}
+
+.livRang .table .trColor:nth-child(even) {
+  background-color: #03375e;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex .flexItem {
+  flex: 1;
+  height: 90px;
+  text-align: center;
+  line-height: 35px;
+  padding: 3px 0;
+  background-color: rgba(6, 30, 56, 0.9);
+}
+
+.flex .flexItem:not(:first-child) {
+  margin-left: 5px;
+}
+
+.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%);
+}
+
+.home .map {
+  position: relative;
+}
+
+@keyframes example {
+  from {
+    width: 0;
+    /* height: 0; */
+  }
+  to {
+    width: 10em;
+    /* height: 5em; */
+  }
+}
+
+.home .TabBtn {
+    flex: 1;
+  padding: 5px 0 5px 5px;
+  white-space: nowrap;
+  /* display: inline-block;
+  width: 7em; */
+}
+
+.home #tooltip {
+  position: absolute;
+  z-index: 2;
+  background: white;
+  color: #000000;
+  padding: 10px;
+  border-radius: 2px;
+  visibility: hidden;
+}
+
+.tabIcon {
+    width: 100%;
+    vertical-align: middle;
+    margin-right: 3px;
+}
+
+.newMdia{
+    width: 100%;
+}
+
+.btn {
+    float: right;
+    background-color: #1a62eb;
+    border-radius: 5px;
+    padding: 3px 5px;
+    cursor: pointer;
+    font-weight: 500;
+}

src/components/bacgroundMap.css

@@ -1,7 +0,0 @@
-#map {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    z-index: -1;
-    top:0
-}

src/components/bacgroundMap.jsx

@@ -1,27 +0,0 @@
-import { onMount } from "solid-js"
-import { Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-
-import config from "../base/config"
-
-import "./bacgroundMap.css"
-
-function itemHead() {
-    onMount(() => {
-        new Scene({
-            id: 'map',
-            logoVisible: false,
-            map: new GaodeMap({
-                style: 'dark',
-                center: [108.945, 34.205],
-                pitch: 0,
-                zoom: 15,
-                logoVisible: false,
-                token: config.gaodeToken,
-            }),
-        });
-    })
-    return <div id="map"></div>
-}
-
-export default itemHead;

src/components/itemHead.css

@@ -1,27 +0,0 @@
-.subject {
-    padding: 0 0 1em 0;
-    max-width: 10rem;
-}
-
-.subject .subjectTitle {
-    font-size: .4rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.subject .subjectTitle .text {
-    min-width: 8em;
-    margin-right: 1em;
-}
-
-.subject .subjectSubTitle {
-    font-size: .3rem;
-}
-
-.subject .subjectIcon {
-    height: 1em;
-    width: calc(100% - 8em);
-    max-width: 40em;
-    vertical-align: middle;
-}

src/components/itemHead.jsx

@@ -1,17 +0,0 @@
-import { Show } from 'solid-js';
-
-import "./itemHead.css"
-
-function itemHead(props) {
-    return <div class="subject">
-        <div class="subjectTitle">
-            <span class="text">{props.title}</span>
-            <Show when={!props.noimg}>
-                <img src="/src/assets/img/hadIcon.png" class="subjectIcon" />
-            </Show>
-        </div>
-        <div class="subjectSubTitle">{props.subtitle}</div>
-    </div>
-}
-
-export default itemHead;

src/components/laydate.css

@@ -1,25 +0,0 @@
-.back{
-    display: inline-block;
-    position: relative;
-}
-
-.back .icon{
-    position: absolute;
-    top: .3em;
-    left: .5em;
-}
-
-.layui-input {
-    outline:none;
-    font-size: .3rem;
-    padding-left: 2em;
-    height: 2em;
-    line-height: 2em;
-    border-width: 1px;
-    border-style: solid;
-    background: rgba(29,183,182,.2);
-    color: #eee;
-    border-radius: 2px;
-    border-color: #1db7b6;
-}
-

src/components/laydate.jsx

@@ -1,28 +0,0 @@
-import { onMount } from "solid-js"
-
-import utils from "../utils";
-
-import "./laydate.css"
-
-function laydateRender(props) {
-    const time = utils.getTime();
-    onMount(() => {
-        window.laydate.render({
-            elem: "#" + props.id,
-            range: true,
-            format: "yyyy/MM/dd",
-            value: [
-                `${time.year}/${time.month}/${time.day}`,
-                `${time.year}/${time.month}/${time.day}`
-            ].join(' - '),
-            max: `${time.year}/${time.month}/${time.day}`,
-            theme: '#1db7b6'
-        });
-    })
-    return <div class="back">
-        <i class="icon iconfont">&#xe637;</i>
-        <input class="layui-input" style={'width:' + props.width} id={props.id} type="text" placeholder="开始日期 - 结束时间" />
-    </div>
-}
-
-export default laydateRender;

src/components/select.css

@@ -1,46 +0,0 @@
-.local_select {
-    display: inline-block;
-    vertical-align: top;
-    font-size: 16px;
-    width: 8em;
-    text-align: center;
-    position: relative;
-    overflow: hidden;
-    cursor: pointer;
-    border: 1px solid #1db7b6;
-}
-
-.local_select .title_select {
-    height: 1.5em;
-    line-height: 1.5em;
-}
-
-.local_select .icon_select {
-    float: right;
-    transition: all .5s;
-}
-
-.local_select:hover .icon_select {
-    transform: rotate(180deg);
-}
-
-.local_select .option_select {
-    font-size: .8em;
-    line-height: 2em;
-    transition: height .5s;
-    height: 0;
-}
-
-.local_select .option_select:hover,
-.local_select .option_act_select {
-    background: linear-gradient(90deg, #2effff, rgba(0, 0, 0, .2));
-}
-
-.local_select:hover .option_select {
-    height: 2em;
-}
-
-.local_select:hover .title_select {
-    border-bottom: 1px solid #1db7b6;
-    margin-bottom: 3px;
-}

src/components/selsect.jsx

@@ -1,30 +0,0 @@
-import { mergeProps, createSignal, For } from "solid-js";
-
-// import config from "../base/config"
-
-
-import "./select.css"
-
-
-function table(props) {
-    const parentProps = mergeProps(props);
-    const [actSelect, setActSelect] = createSignal(0);
-    function selectOption(e) {
-        console.log(e.target.getAttribute('code'))
-        setActSelect(e.target.getAttribute('code'))
-    }
-    // 监听parops更新
-    return <div class="local_select">
-        <div class="title_select">
-            <i class="icon_select iconfont icon-arrow-down"></i>
-            {parentProps.title}
-        </div>
-        <For each={parentProps.list}>
-            {li => (
-                <div classList={{ 'option_select': true, 'option_act_select': li.code == actSelect() }} code={li.code} onClick={selectOption} >{li.name}</div>
-            )}
-        </For>
-    </div>
-}
-
-export default table;

src/components/table.css

@@ -1,11 +0,0 @@
-.table{
-    width: 100%;
-    height: calc(100% - 64px);
-    text-align: center;
-    overflow: hidden;
-}
-.table .body{
-    width: calc(100% + 5px);
-    max-height: calc(100% - 30px);
-    overflow-y: scroll;
-}

src/components/table.jsx

@@ -1,29 +0,0 @@
-import { mergeProps, Show, For } from "solid-js";
-
-import TableItem from "./tableItem";
-
-import "./table.css"
-
-function table(props) {
-    const parentProps = mergeProps(props);
-    return <div class={"table " + (props.localclass || "") }>
-        <Show when={parentProps.head && parentProps.head.length}>
-            <div class="head">
-                <TableItem list={parentProps.head || []} />
-            </div>
-        </Show>
-        <Show when={parentProps.body && parentProps.body.length}>
-            <div class="bodyB">
-                <div class="body">
-                    <For each={parentProps.body}>
-                        {(b) => (
-                            <TableItem showColor={b.color || "rgb(215 1 1 / 60%)"} list={b.col || []} />
-                        )}
-                    </For>
-                </div>
-            </div>
-        </Show>
-    </div>
-}
-
-export default table;

src/components/tableItem.css

@@ -1,45 +0,0 @@
-.tableItem{
-    font-size: 0.15rem;
-    border-radius: 0.06rem;
-    padding: 3px 5px;
-    background-color: #025B70;
-    margin-bottom: 10px;
-    overflow: hidden;
-}
-
-.tableItem .col1,
-.tableItem .col2,
-.tableItem .col3,
-.tableItem .col4,
-.tableItem .col5{
-    padding: 0;
-}
-
-.tableItem:hover{
-    background-color: #42C7D3;
-}
-
-.tableItem .colItem {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    word-break: break-all;
-    height: 3em;
-    line-height: 3em;
-}
-
-.tableItem .colItem .d {
-    display: none;
-}
-
-.tableItem .colItem .j {
-    max-width: 300px;
-}
-
-.tableItem .colItem:hover .j {
-    display: none;
-}
-
-.tableItem .colItem:hover .d {
-    display: block;
-}

src/components/tableItem.jsx

@@ -1,37 +0,0 @@
-import { Dynamic } from "solid-js/web";
-import { mergeProps, For } from "solid-js";
-
-import "./tableItem.css"
-
-
-function Scroll(props) {
-    const parentProps = mergeProps(props);
-    return <div class={'colItem col' + parentProps.flex} style={parentProps.style}>
-        <div class="j">{parentProps.text} </div>
-        <marquee behavior="scroll">{props.text} </marquee>
-    </div>
-}
-function Text(props) {
-    const parentProps = mergeProps(props);
-    return <div class={'colItem col' + parentProps.flex} style={parentProps.style}>
-        {props.text}
-    </div>
-}
-
-const objComponents = {
-    Scroll,
-    Text
-}
-
-function tableItem(props) {
-    const parentProps = mergeProps(props);
-    return <div class="tableItem row" style={'box-shadow: 0 4px 3px 0 ' + props.showColor}>
-        <For each={parentProps.list}>
-            {li => (
-                <Dynamic text={li.text} flex={li.flex || 1} component={objComponents[li.type || 'Text']} />
-            )}
-        </For>
-    </div>
-}
-
-export default tableItem;

src/components/titleStyle.css

@@ -1,54 +0,0 @@
-.headTitle{
-    padding: 10px 0;
-    position: absolute;
-    z-index: 100;
-}
-
-.title {
-    width: 6rem;
-    margin: 0 0.175rem;
-    height: 1.19rem;
-    position: relative;
-    overflow: hidden;
-    font-size: 0;
-}
-
-.title .bgUp {
-    position: absolute;
-    width: 100%;
-    border: 0.595rem solid rgba(255, 255, 255, 0);
-    border-top-color: rgba(255, 255, 255, 0.1);
-    bottom: -0.595rem;
-}
-
-.title .bgDown {
-    position: absolute;
-    width: 100%;
-    border: 0.595rem solid rgba(255, 255, 255, 0);
-    border-bottom-color: rgba(255, 255, 255, 0.1);
-    top: -0.595rem;
-}
-
-.title .textTop,
-.title .textBottom {
-    font-size: .3rem;
-    margin: 0 0.595rem;
-    height: 0.595rem;
-    line-height: 0.595rem;
-    white-space: nowrap;
-    /* 规定文本是否折行 */
-    overflow: hidden;
-    /* 规定超出内容宽度的元素隐藏 */
-    text-overflow: ellipsis;
-
-}
-
-.title .textTop {
-    border-bottom: 1px solid #eee;
-    font-size: .4rem;
-}
-
-.title .textBottom {
-    font-size: .16rem;
-    text-align: center;
-}

src/components/titleStyle.jsx

@@ -1,50 +0,0 @@
-import { onMount, onCleanup, createSignal } from "solid-js"
-
-import utils from "../utils/index"
-
-import "./titleStyle.css"
-
-const [timeDate, settimeDate] = createSignal(utils.getTime())
-let lastTime = Date.now();
-
-function animation() {
-    window.animationID = window.requestAnimFrame(() => {
-        const nowTime = Date.now();
-        window.cancelrequestAnimFrame(window.animationID);
-        animation()
-        if ((nowTime - lastTime) < 60000) return
-        lastTime = nowTime;
-        settimeDate(utils.getTime())
-    })
-}
-
-function titleStyle() {
-    onMount(() => {
-        animation()
-    })
-    onCleanup(()=>{
-        window.animationID >= 0 && window.cancelrequestAnimFrame(window.animationID);
-    })
-    return <div class="headTitle">
-        <div class="title">
-            <div class="bgUp"></div>
-            <div class="bgDown"></div>
-            <div class="textTop">
-                舆情态势感知
-                <span style={{"font-size":"0.2rem","padding-left":"1em"}}>陕西广电融媒体集团</span>
-            </div>
-            <div class="textBottom">
-                <i class="iconfont icon-shijian"></i>
-                <span>
-                    &nbsp;
-                    {timeDate().year}-{timeDate().month}-{timeDate().day}
-                    &nbsp;
-                    &nbsp;
-                    {timeDate().hour}:{timeDate().min}
-                </span>
-            </div>
-        </div>
-    </div>
-}
-
-export default titleStyle;

src/components/water.css

@@ -1,53 +0,0 @@
-.waterBox {
-    background-image: url("../assets/img/waterBox.png");
-    background-size: 100% 100%;
-    margin: 0 auto 0 auto;
-
-    padding: 10px;
-    height: 150px;
-    width: 150px;
-    position: relative;
-    border-radius: 50%;
-}
-
-.wave {
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-}
-
-.wave .wave-text{
-    position: relative;
-    z-index: 21;
-    text-align: center;
-    font-size: .5rem;
-    height: 80px;
-    padding-top: 40%;
-}
-.wave .wave-text p{
-    font-size: .3rem;
-    color: #3fd4da;
-}
-
-.wave-mask {
-    position: absolute;
-    width: 200%;
-    height: 200%;
-    top: 240%;/* 240% - 160% */
-    left: 50%;
-    border-radius: 40%;
-    background: #cb4228;
-    transform: translate(-50%, -70%) rotate(0);
-    animation: toRotate 10s linear -5s infinite;
-    z-index: 20;
-}
-@keyframes toRotate {
-    50% {
-        transform: translate(-50%, -70%) rotate(180deg);
-    }
-    100% {
-        transform: translate(-50%, -70%) rotate(360deg);
-    }
-}

src/components/water.jsx

@@ -1,18 +0,0 @@
-import { mergeProps } from "solid-js";
-
-import "./water.css"
-
-function water(props) {
-    const parentProps = mergeProps(props);
-    return <div id="waterBox" class="waterBox">
-        <div class="wave">
-            <div class="wave-text">
-                {parentProps.text}
-                <p>{parentProps.percentage}%</p>
-            </div>
-            <div class="wave-mask" style={'top:' + (240 - Math.ceil(parentProps.percentage / 100 * 80)) + '%'}></div>
-        </div>
-    </div>
-}
-
-export default water;

src/pages/CommonBigScreen/Home.jsx

@@ -0,0 +1,360 @@
+import { onMount, createSignal, Show, For } from "solid-js";
+import { createStore } from "solid-js/store";
+import dayjs from "dayjs"
+
+import utils from "../../utils/index"
+
+import "../../assets/style/CommonBigScreenHome.css";
+
+import Usertrend from "./components/Usertrend";
+import SelfPlatform from "./components/SelfPlatform";
+import Column from "./components/Column_g2";
+import ListeningRate from "./components/ListeningRate_g2";
+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 { getWeather, getCommonData } from "../../api/bigScreen"
+const [TimeDate, setTimeDate] = createSignal("");
+const [eHeight, seteHeight] = createSignal(0);
+const [Weather, setWeather] = createSignal("请稍候...");
+const [Geography] = createSignal({
+    latitude: -190,
+    longitude: -190
+})
+
+function setTQ(TQ) {
+    const w = TQ.lives && TQ.lives.length ? TQ.lives[0] : {};
+    w.city && setWeather(`${w.city} ${w.weather} ${w.temperature}℃ ${w.winddirection}风 ${w.windpower}级`);
+    !w.city && setWeather(TQ);
+}
+
+function BigScreenHome() {
+    const [HeadTitle, setHeadTitle] = createSignal();
+    const [proTv, setproTv] = createSignal([
+        {
+            text: "陕台频道收视率",
+            value: 0
+        },
+        {
+            text: "陕台频道忠诚度",
+            value: 0
+        },
+        {
+            text: "陕台频道市场份额",
+            value: 0
+        },
+    ])
+    const [oriData, setoriData] = createStore({});
+    let $ele = undefined, mainHeight = document.body.offsetHeight * 0.925 - 124;
+
+    onMount(() => {
+        setTimeDate(dayjs().format('YYYY-MM-DD'));
+        seteHeight(Math.floor($ele.offsetWidth / 16 * 9) + 70);
+        getWeather().then(r => setTQ(r.data))
+        getCommonData().then(r => {
+            if (r.code != 0) return
+            const d = r.data || {};
+            setoriData(d || {})
+            setHeadTitle([
+                {
+                    title: "传统媒体-覆盖终端",
+                    value: d.media_overview.data.totalUser,
+                    path: [
+                        {
+                            d: "M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z",
+                            color: "#02ffec"
+                        }
+                    ]
+                },
+                {
+                    title: "传统媒体-日活跃用户",
+                    value: d.media_overview.data.activeUser,
+                    path: [
+                        {
+                            d: "M512.000512 64.909335c-246.926856 0-447.090665 200.158692-447.090665 447.088618 0 246.935042 200.163809 447.090665 447.090665 447.090665 246.935042 0 447.087595-200.158692 447.087595-447.090665C959.088106 265.068028 758.933507 64.909335 512.000512 64.909335zM512.000512 899.476939c-213.646891 0-387.478985-173.828001-387.478985-387.476939 0-213.646891 173.832094-387.475915 387.478985-387.475915 213.647915 0 387.474892 173.830047 387.474892 387.475915C899.476427 725.646891 725.648426 899.476939 512.000512 899.476939z",
+                            color: "#02ffec"
+                        },
+                        {
+                            d: "M159.919734 484.371756l55.255465 0 0 55.256488-55.255465 0 0-55.256488Z",
+                            color: "#02f5e2"
+                        },
+                        {
+                            d: "M807.639812 484.370733l55.256488 0 0 55.256488-55.256488 0 0-55.256488Z",
+                            color: "#02f5e2"
+                        },
+                        {
+                            d: "M484.370221 164.528194l55.256488 0 0 55.256488-55.256488 0 0-55.256488Z",
+                            color: "#02f5e2"
+                        },
+                        {
+                            d: "M484.370221 253.55174l55.256488 0 0 286.079574-55.256488 0 0-286.079574Z",
+                            color: "#02f5e2"
+                        },
+                        {
+                            d: "M682.960649 660.67276l-39.071863 39.071863-159.509552-159.509552 39.071863-39.071863 159.509552 159.509552Z",
+                            color: "#02f5e2"
+                        },
+                        {
+                            d: "M484.371244 802.527886l55.256488 0 0 55.256488-55.256488 0 0-55.256488Z",
+                            color: "#02f5e2"
+                        }
+                    ]
+                },
+                {
+                    title: "传统媒体-日收视次数",
+                    value: d.media_overview.data.watchCount,
+                    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",
+                            color: "#02ffec"
+                        }
+                    ]
+                },
+                {
+                    title: "传统媒体-昨日收视时长",
+                    value: (d.media_overview.data.timeCount / 60).toFixed(0),
+                    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',
+                            color: "#02ffec"
+                        },
+                        {
+                            d: 'M908.227878 636.659706 124.997841 636.659706 124.997841 163.603549l783.230037 0L908.227878 636.659706zM145.791892 615.866871l741.643151 0L887.435043 184.397601 145.791892 184.397601 145.791892 615.866871z',
+                            color: "#02ffec"
+                        },
+                        {
+                            d: "M516.613467 943.368317c-5.740988 0-10.397026-4.657255-10.397026-10.397026l0-109.736787c0-5.739771 4.656038-10.394593 10.397026-10.394593 5.739771 0 10.397026 4.654822 10.397026 10.394593l0 109.736787C527.010493 938.711062 522.353239 943.368317 516.613467 943.368317z",
+                            color: "#02ffec"
+                        },
+                        {
+                            d: "M682.963447 943.368317 350.263488 943.368317c-5.739771 0-10.397026-4.657255-10.397026-10.397026 0-5.738555 4.657255-10.395809 10.397026-10.395809l332.699958 0c5.739771 0 10.397026 4.657255 10.397026 10.395809C693.360472 938.711062 688.703218 943.368317 682.963447 943.368317z",
+                            color: "#02ffec"
+                        },
+                        {
+                            d: "M608.966739 494.002247c-2.66737 0-5.320144-1.01562-7.350167-3.046859-4.062478-4.061262-4.062478-10.640288 0-14.70155l168.08079-168.082006c4.061262-4.061262 10.641504-4.061262 14.70155 0 4.062478 4.062478 4.062478 10.641504 0 14.702766L616.318122 490.955388C614.285667 492.986628 611.632893 494.002247 608.966739 494.002247z",
+                            color: "#02ffec"
+                        },
+                        {
+                            d: 'M270.486871 470.89234c-2.66737 0-5.32136-1.01562-7.350167-3.044426-4.062478-4.062478-4.062478-10.640288 0-14.703983l110.899581-110.899581c4.061262-4.060046 10.640288-4.060046 14.70155 0 4.061262 4.063695 4.061262 10.641504 0 14.703983l-110.899581 110.899581C275.807015 469.87672 273.153025 470.89234 270.486871 470.89234z',
+                            color: "#02ffec"
+                        },
+                        {
+                            d: 'M270.486871 470.89234c-2.66737 0-5.32136-1.01562-7.350167-3.044426-4.062478-4.062478-4.062478-10.640288 0-14.703983l110.899581-110.899581c4.061262-4.060046 10.640288-4.060046 14.70155 0 4.061262 4.063695 4.061262 10.641504 0 14.703983l-110.899581 110.899581C275.807015 469.87672 273.153025 470.89234 270.486871 470.89234z',
+                            color: "#02ffec"
+                        },
+                        {
+                            d: "M259.225048 478.982024c0 9.090708-7.365979 16.462768-16.462768 16.462768-9.08341 0-16.461552-7.37206-16.461552-16.462768 0-9.089492 7.378142-16.462768 16.461552-16.462768C251.857853 462.519255 259.225048 469.892532 259.225048 478.982024z",
+                            color: "#02ffec"
+                        },
+                        {
+                            d: "M417.776042 331.984768c0 9.090708-7.363546 16.461552-16.461552 16.461552-9.084626 0-16.462768-7.370844-16.462768-16.461552 0-9.098006 7.376926-16.462768 16.462768-16.462768C410.411279 315.521999 417.776042 322.886762 417.776042 331.984768z",
+                            color: "#02ffec"
+                        },
+                        {
+                            d: "M597.122303 505.839385c0 9.09314-7.364763 16.462768-16.462768 16.462768-9.08341 0-16.460336-7.370844-16.460336-16.462768 0-9.089492 7.376926-16.460336 16.460336-16.460336C589.757541 489.37905 597.122303 496.749894 597.122303 505.839385z",
+                            color: "#02ffec"
+                        },
+                        {
+                            d: "M533.075019 704.246455c0 9.090708-7.364763 16.462768-16.461552 16.462768-9.084626 0-16.462768-7.373277-16.462768-16.462768 0-9.089492 7.378142-16.462768 16.462768-16.462768C525.711473 687.783687 533.075019 695.156963 533.075019 704.246455z",
+                            color: "#02ffec"
+                        },
+                        {
+                            d: "M813.721736 293.571236c0 9.090708-7.36233 16.462768-16.459119 16.462768-9.084626 0-16.462768-7.37206-16.462768-16.462768 0-9.089492 7.378142-16.461552 16.462768-16.461552C806.359406 277.109684 813.721736 284.481745 813.721736 293.571236z",
+                            color: "#02ffec"
+                        },
+                        {
+                            d: "M552.934944 494.002247c-2.706292 0-5.40042-1.042378-7.443823-3.140515L414.66107 356.852244c-4.006528-4.100184-3.926252-10.680426 0.189745-14.700334 4.102617-3.978553 10.680426-3.954227 14.70155 0.190961l130.826402 134.007056c4.007744 4.102617 3.927468 10.681642-0.188528 14.703983C558.173595 493.013387 555.562176 494.002247 552.934944 494.002247z",
+                            color: "#02ffec"
+                        }
+                    ]
+                },
+                {
+                    title: "新媒体月度传播力",
+                    value: d.media_month_play.data,
+                    path: [
+                        {
+                            d: "M294.4 684.032c-95.232 0-174.592-79.36-174.592-174.592s79.36-174.592 174.592-174.592 174.592 79.36 174.592 174.592-78.848 174.592-174.592 174.592z m0-293.376c-65.024 0-118.784 53.76-118.784 118.784s53.76 118.784 118.784 118.784 118.784-53.76 118.784-118.784-53.248-118.784-118.784-118.784zM732.672 1013.248c-86.016 0-156.16-69.632-156.16-156.16s69.632-156.16 156.16-156.16 156.16 69.632 156.16 156.16-70.144 156.16-156.16 156.16z m0-256c-55.808 0-99.84 44.032-99.84 99.84s44.032 99.84 99.84 99.84 99.84-44.032 99.84-99.84-44.032-99.84-99.84-99.84zM667.136 291.84c-79.36 0-141.824-62.976-141.824-141.824s62.976-141.824 141.824-141.824S808.96 71.168 808.96 150.016 745.984 291.84 667.136 291.84z m0-227.84c-46.592 0-86.016 39.424-86.016 86.016s39.424 86.016 86.016 86.016 86.016-39.424 86.016-86.016-39.424-86.016-86.016-86.016z",
+                            color: "#02ffec"
+                        },
+                        {
+                            d: "M573.44 259.072L401.408 398.848c-11.776 9.216-30.208 7.168-39.424-4.608l-2.56-2.56c-9.216-11.776-7.168-30.208 4.608-39.424l172.032-139.776c11.776-9.216 30.208-7.168 39.424 4.608l2.56 2.56c9.216 13.824 7.168 30.208-4.608 39.424zM588.288 785.408l-177.152-134.144c-13.312-10.24-14.336-26.624-6.656-39.936l2.56-2.048c10.24-13.312 26.624-14.336 39.936-6.656l177.152 134.144c13.312 10.24 14.336 26.624 6.656 39.936l-2.56 2.048c-10.24 13.824-27.136 17.408-39.936 6.656z",
+                            color: "#02ffec"
+                        }
+                    ]
+                },
+                {
+                    title: "重大活动传播总量",
+                    value: d.activity_total.data,
+                    path: [
+                        {
+                            d: "M910.4 0H115.2C52.8 0 1.6 51.2 1.6 113.6v793.6c0 62.4 51.2 113.6 113.6 113.6h793.6c62.4 0 113.6-51.2 113.6-113.6V113.6C1024 51.2 972.8 0 910.4 0z m-568 795.2H228.8V396.8h113.6v398.4z m227.2 0H456v-568h113.6v568z m227.2 0H683.2V568h113.6v227.2z",
+                            color: "#02ffec"
+                        }
+                    ]
+                }
+            ])
+            setproTv([
+                {
+                    text: "陕台频道收视率",
+                    value: d.cm_tv_overview.data.watchRate
+                },
+                {
+                    text: "陕台频道忠诚度",
+                    value: d.cm_tv_overview.data.occRate
+                },
+                {
+                    text: "陕台频道市场份额",
+                    value: d.cm_tv_overview.data.loyalty
+                },
+            ])
+        })
+    })
+    return (
+        <div class="home">
+            <div class="homeHeader">
+                <div class="sz">
+                    <img style={{ "vertical-align": 'middle', width: '115px' }}
+                        src="https://cxzx.smcic.net/topic/tool/img/jtlogo.png" alt="" />
+                    <span style={{ "vertical-align": 'middle' }}>
+                        {TimeDate()}
+                    </span>
+                </div>
+                <div class="tq">{Weather()}</div>
+                <div class="headTitle">陕西广电融媒体集团大数据平台</div>
+                {/* <div className="tq">
+                    <iframe style="height: 5em; " src="//i.tianqi.com/index.php?c=code&id=10&color=%23C6C6C6&icon=1&site=16" frameborder="0"></iframe>
+                </div> */}
+            </div>
+            <div class="body">
+                <div style={{ "display": "flex", "width": "100%" }}>
+                    <For each={HeadTitle()}>{title =>
+                        <div class="itemHeader">
+                            <div class="itemMain">
+                                <div class="icons">
+                                    <svg t="1650243218920" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+                                        <For each={title.path}>{dItem =>
+                                            <path d={dItem.d} fill={dItem.color}></path>
+                                        }</For>
+                                    </svg>
+                                    <svg
+                                        t="1650263511830"
+                                        class="img"
+                                        viewBox="0 0 1077 1024"
+                                        version="1.1"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                        <path d="M794.211994 1024h-0.832916l-563.050769-6.108046a83.91622 83.91622 0 0 1-79.265776-61.358096L3.15065 428.396123a83.291534 83.291534 0 0 1 33.316614-91.551278L509.077309 14.506609a83.291534 83.291534 0 0 1 97.173457 2.359927l437.83583 330.112112a83.91622 83.91622 0 0 1 27.763844 96.340541l-199.760862 526.402495a83.707992 83.707992 0 0 1-77.877584 54.278316zM556.275845 83.360944L83.457571 405.69918l147.564834 528.415373 563.189589 6.246865 199.760862-526.471904z" fill="#02ffec"></path>
+                                        <path d="M229.888 942.08L51.712 394.24l466.432-338.944L984.576 394.24l-178.176 547.84z" fill="rgba(3, 76, 117, 1)" ></path>
+                                    </svg>
+                                </div>
+                                <div class="text">
+                                    <span class="textNum">{utils.formatNumber(title.value, 2)}</span>
+                                    <br />
+                                    {title.title}
+                                </div>
+                            </div>
+                        </div>
+                    }
+                    </For>
+                </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.schedule_rank && oriData.schedule_rank.name} >
+                            <div style={{ "margin-bottom": "6px" }}>
+                                <Column
+                                    title={oriData.schedule_rank.name}
+                                    list={oriData.schedule_rank.data}
+                                    width={Math.floor($ele.offsetWidth)}
+                                    height={(mainHeight - 106 - eHeight()) / 2}
+                                />
+                            </div>
+                        </Show>
+                        <Show when={eHeight() > 0 && oriData.user_trend && oriData.user_trend.name} >
+                            <Usertrend
+                                title={oriData.user_trend.name}
+                                list={oriData.user_trend.data}
+                                width={Math.floor($ele.offsetWidth)}
+                                height={(mainHeight - 106 - eHeight()) / 2}
+                            />
+                        </Show>
+                    </div>
+                    <div class="mainbody center">
+                            <div style={{ "margin-bottom": "6px" }}>
+                            <Show when={eHeight() > 0 && oriData.cm_area && oriData.cm_area.name}>
+                                <Map
+                                    title={oriData.cm_area.name}
+                                    Geography={Geography()}
+                                    li={oriData.cm_area.data}
+                                    width={Math.floor($ele.offsetWidth)}
+                                    height={mainHeight - 130}
+                                    setfun={setTQ}
+                                />
+                            </Show>
+                        </div>
+                        <div class="flex">
+                            <For each={proTv()} >{item => <div class="flexItem">
+                                <p class="textNum">{utils.formatNumber(item.value, 2)}%</p>
+                                {item.text}
+                            </div>
+                            }</For>
+                        </div>
+                    </div>
+                    <div class="mainbody right">
+                        <Show when={eHeight() > 0 && oriData.platform_trend && oriData.platform_trend.name}>
+                            <div style={{ "margin-bottom": "6px" }}>
+                                <SelfPlatform
+                                    title={oriData.platform_trend.name}
+                                    list={oriData.platform_trend.data}
+                                    width={Math.floor($ele.offsetWidth - 20)}
+                                    height={(mainHeight - 104) / 3}
+                                />
+                            </div>
+                        </Show>
+                        <Show when={eHeight() > 0 && oriData.media_spread_trend && oriData.media_spread_trend.name}>
+                            <div style={{ "margin-bottom": "6px" }}>
+                                <NewMediaTrend
+                                    title={oriData.media_spread_trend.name}
+                                    list={oriData.media_spread_trend.data}
+                                    width={Math.floor($ele.offsetWidth - 20)}
+                                    height={(mainHeight - 104) / 3}
+                                />
+                            </div>
+                        </Show>
+                        <Show when={eHeight() > 0 && oriData.media_spread && oriData.media_spread.name}>
+                            <NewMedia
+                                title={oriData.media_spread.name}
+                                list={oriData.media_spread.data}
+                                width={Math.floor($ele.offsetWidth - 20)}
+                                height={(mainHeight - 104) / 3}
+                            />
+                        </Show>
+                    </div>
+                </div>
+            </div >
+        </div >
+    );
+}
+
+export default BigScreenHome;

src/pages/CommonBigScreen/components/Activity.jsx

@@ -0,0 +1,41 @@
+import { onMount, For } 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`
+        }}>
+            <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>
+                <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>
+                            </Show>
+                            <Show when={maxlen > item.activity.length}> */}
+                                {item.activity}
+                            {/* </Show> */}
+                        </div>
+                        <div class='td'>{utils.formatNumber(item.readCount)}</div>
+                    </div>}</For>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default ListeningRate;

src/pages/CommonBigScreen/components/Column_g2.jsx

@@ -0,0 +1,174 @@
+import { onMount } from "solid-js";
+import { Chart, registerShape } from '@antv/g2';
+// import DataSet from '@antv/data-set';
+
+import "../../../assets/style/CommonBigScreenHome.css"
+
+let cli1 = [
+    "135,206,250",
+    "0,191,255",
+    "127,255,170",
+    "0,255,127",
+    "50,205,50",
+    "240,230,140",
+    "255,215,0",
+    "255,127,80",
+    "255,99,71",
+    "255,0,0",
+], index = 0;
+// 绘制柱状图顶部
+registerShape('interval', 'triangle', {
+    // 1. 定义关键点
+    getPoints(cfg) {
+        const x = cfg.x;
+        const y = cfg.y;
+        const width = cfg.size;
+        return [
+            { x: x - width / 2, y },
+            { x, y: y + width*2 },
+            { x: x + width / 2, y },
+            { x, y: y - width*2 },
+        ];
+    },
+    // 2. 绘制
+    draw(cfg, group) {
+        const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
+        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],
+                ],
+                fillOpacity: 0.95,
+                fill: `rgb(${cli1[index % cli1.length]})`
+            },
+        });
+        index++
+        return polygon;
+    },
+})
+// 绘制柱状图楞线
+registerShape('interval', 'edgeLine', {
+    // 1. 定义关键点
+    getPoints(cfg) {
+        const x = cfg.x;
+        const y = cfg.y;
+        const y0 = cfg.y0;
+        const width = cfg.size;
+        const p1 = (width / 100).toFixed(4) - 0
+        return [
+            { x: x - p1, y: y - width / 2 },
+            { x: x + p1, y: y - width / 2 },
+            { x: x + p1, y: y0 },
+            { x: x - p1, y: y0 },
+        ];
+    },
+    // 2. 绘制
+    draw(cfg, group) {
+        const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
+        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],
+                ],
+                fillOpacity: 1,
+                fill: `l(90) 0:rgba(${cli1[index % cli1.length]}, 1) 1:rgba(${cli1[index % cli1.length]}, 0.4)`
+            },
+        });
+        index++
+        return polygon;
+    },
+})
+
+function Column(prop) {
+    let $canvas = undefined;
+    function TrendChart(width, height, $canvas) {
+        const data = prop.list.map(v => {
+            return {
+                type: v.scheduleName,
+                value: v.watchRate
+            }
+        });
+
+        const chart = new Chart({
+            container: $canvas,
+            autoFit: true,
+            height,
+            width,
+            padding: [
+                20,
+                20,
+                50,
+                20
+            ]
+        });
+        chart.data(data);
+        chart.legend(false);
+        chart.axis('type', {
+            tickLine: {
+                alignTick: false,
+            },
+            label: {
+                autoHide: false,
+                formatter: n => {
+                    const nl = n.split(""), len = nl.length > 6 ? 5 : nl.length, out = [];
+                    for (let i = 0; i < len; i++) {
+                        if (i % 3 !== 2 || i === len - 1) {
+                            out.push(nl[i]);
+                            continue
+                        }
+                        out.push(nl[i] + '\n');
+                    }
+                    if (nl.length <= 6) return out.join("")
+                    else return out.join("") + "..."
+                },
+                style: {
+                    fill: "#fff"
+                }
+            }
+        });
+        chart.axis('value', false);
+
+        chart.tooltip(false);
+
+        chart.interval().position('type*value').color('type', cli1.map(v => `l(90) 0:rgba(${v},0.8) 1:rgba(${v},0.2)`));
+        index = 0;
+        chart.interval().position('type*value').shape('triangle');
+        index = 0;
+        chart.interval().position('type*value').shape('edgeLine');
+
+        // 添加文本标注
+        data.forEach((item) => {
+            chart
+                .annotation()
+                .text({
+                    position: [item.type, item.value],
+                    content: item.value,
+                    style: {
+                        textAlign: 'center',
+                        fill: "#fff"
+                    },
+                    offsetY: -10,
+                });
+        });
+        chart.render();
+    }
+    onMount(() => {
+        TrendChart(prop.width, prop.height, $canvas)
+    })
+    return (
+        <div class="livRang" style={{
+            width:`${prop.width}px`
+        }}>
+            <div class="head">{prop.title}</div>
+            <div ref={$canvas}></div>
+        </div>
+    );
+}
+
+export default Column;

src/pages/CommonBigScreen/components/ListeningRate_g2.jsx

@@ -0,0 +1,132 @@
+import { onMount } from "solid-js";
+import { Chart,registerShape } from '@antv/g2';
+// import DataSet from '@antv/data-set';
+
+import "../../../assets/style/CommonBigScreenHome.css"
+
+let cli1 = [
+    "135,206,250",
+    "0,191,255",
+    "127,255,170",
+    "0,255,127",
+    "50,205,50",
+    "240,230,140",
+    "255,215,0",
+    "255,127,80",
+    "255,99,71",
+    "255,0,0",
+], index = 0;
+
+// 绘制原型柱状图
+registerShape('point', 'circular', {
+    // 1. 定义关键点
+    getPoints(cfg) {
+        const x = cfg.x;
+        const y = cfg.y;
+        const width = cfg.size;
+        return [
+            { x: x - width / 2, y },
+            { x, y: y + width*2 },
+            { x: x + width / 2, y },
+            { x, y: y - width*2 },
+        ];
+    },
+    // 2. 绘制
+    draw(cfg, group) {
+        const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
+        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],
+                ],
+                fillOpacity: 0.95,
+                fill: `l(90) 0:rgb(${cli1[index % cli1.length]}) 1:rgba(${cli1[index % cli1.length]}, 0.8)`
+            },
+        });
+        index++
+        return polygon;
+    },
+})
+
+function ListeningRate(prop) {
+    let $canvas = undefined;
+    function TrendChart(width, height, $canvas) {
+        const data = prop.list.map(v => {
+            return {
+                type: v.channelName,
+                value: v.watchRate
+            }
+        }).reverse();
+        const chart = new Chart({
+            container: $canvas,
+            width,
+            height,
+            padding: [10, 60, 10, 10]
+        });
+        chart.data(data);
+        chart.axis('value', false);
+        chart.axis('type', {
+            title: null,
+            tickLine: null,
+            subTickLine: null,
+            line: null,
+            label: {
+                style: {
+                    fill: "#fff"
+                },
+                formatter: () => {
+                    return ""
+                }
+            }
+        });
+        // chart.tooltip({
+        //     shared: true,
+        //     itemTpl: `
+        //     <div style="margin-bottom: 10px;list-style:none;">
+        //         <span style="background-color:{color};" class="g2-tooltip-marker"></span>
+        //         {value}
+        //     </div>
+        //     `
+        // })
+        chart.tooltip(false)
+        chart.legend(false);
+        chart.coordinate().transpose();
+        chart
+            .interval()
+            .position('type*value')
+            .color('l(0) 0:#1890ff 1:#70cdd0');
+        // 添加文本标注
+        data.forEach((item) => {
+            chart
+                .annotation()
+                .text({
+                    position: [item.type, item.value],
+                    content: item.type,
+                    style: {
+                        textAlign: 'center',
+                        fill: '#fff',
+                    },
+                    offsetX: 30,
+                });
+        });
+        index = 0;
+        chart.point().position('type*value').shape('circular');
+        chart.render();
+    }
+    onMount(() => {
+        TrendChart(prop.width, prop.height - 10, $canvas)
+    })
+    return (
+        <div class="livRang" style={{
+            height:`${prop.width}px`
+        }}>
+            <div class="head">{prop.title}</div>
+            <div ref={$canvas}></div>
+        </div>
+    );
+}
+
+export default ListeningRate;

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

@@ -0,0 +1,299 @@
+import { onMount } from "solid-js";
+import { Scene, PointLayer, PolygonLayer, LineLayer, Marker } from '@antv/l7';
+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 utils from "../../../utils/index"
+// import config from "../../../base/config"
+
+import { getMapfull } from "../../../api/bigScreen"
+
+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',
+            '#00BFFF',
+            '#7FFFAA',
+            '#00FF7F',
+            '#32CD32',
+            '#F0E68C',
+            '#FFD700',
+            '#FF7F50',
+            '#FF6347',
+            '#FF0000'
+        ];
+
+    // TODO: 高德地图
+    /***
+     * 高德天气，暂时不用只能在https下可以
+     */
+    // function getWatcher(local) {
+    //     getGeography({
+    //         radius: 1,
+    //         key: config.webToke,
+    //         location: [local.lng, local.lat].join()
+    //     }).then(res => {
+    //         let adcode = res.regeocode.addressComponent.adcode.split("");
+    //         getWeather({
+    //             key: config.webToke,
+    //             // city: adcode[0] + adcode[1] + adcode[2] + adcode[3] + "00"
+    //             city: 610100
+    //         }).then(r => prop.setfun(r))
+    //     })
+    // }
+    function TrendChart() {
+        scene = new Scene({
+            id: $canvas,
+            logoVisible: false,
+            // map: new GaodeMap({
+            //     style: 'blank',
+            //     pitch: 50,
+            //     center: [108.2, 35],
+            //     zoom: 2,
+            //     maxZoom: 7,
+            //     minZoom: 7,
+            //     token: config.gaodeToken
+            // })
+            map: new Mapbox({
+                pitch: 0,
+                center: [108.2, 35.6],
+                style: 'blank',
+                zoom: 5.4,
+                minZoom: 5.4,
+            })
+        });
+        scene.setMapStatus({ dragEnable: false });
+        scene.on('loaded', () => {
+
+            // 获取地理/天气信息
+            // AMap.convertFrom([prop.Geography.longitude, prop.Geography.latitude], 'gps', function (status, result) {
+            //     if (result.info !== 'ok') return
+            //     console.log(result)
+            //     const local = result.locations[0] || { Q: -190, R: -190, lat: -190, lng: -1906 }
+            //     scene.setCenter([local.lng, local.lat])
+            //     getWatcher(local)
+            // });
+            getMapfull().then(data => {
+                li = data && data.features && data.features.length ? data.features : [];
+                for (let i = 0; i < li.length; i++) {
+                    const v = li[i].properties || { center: [] };
+                    const size = prop.li.find(item => item.area === v.name).usrcount
+                    total += size;
+                    const Data = {
+                        name: v.name,
+                        lng: v.center[0],
+                        lat: v.center[1],
+                        size // 自定义数据
+                    };
+                    source.push(Data);
+                }
+                const layer = new PointLayer()
+                    .source(source, {
+                        parser: {
+                            type: 'json',
+                            x: 'lng',
+                            y: 'lat'
+                        }
+                    })
+                    .shape('circle')
+                    .color('backgoundColor')
+                    .size(42);
+                // 上层线条
+                const lineUp = new LineLayer({ zIndex: 2, blend: "normal" })
+                    .source(data)
+                    .shape('line')
+                    .color('rgb(0,255,255)')
+                    .size(0.5)
+                    .style({
+                        raisingHeight: 0,
+                        opacity: 0.8,
+                    })
+                    .animate({
+                        interval: 1, // 间隔
+                        duration: 1, // 持续时间，延时
+                        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 gd = new PolygonLayer({ zIndex: 1, blend: "normal" })
+                    .source(data)
+                    .size(1)
+                    .shape('extrude')
+                    .color("#3194fb")
+                    // .color("name", cli)
+                    .style({
+                        heightfixed: true,
+                        pickLight: true,
+                        raisingHeight: 0,
+                        opacity: 0.8,
+                    });
+
+                // 水波
+                const waveLayer = new PointLayer({ zIndex: 2, blend: 'normal' })
+                    .source(source,
+                        {
+                            parser: {
+                                type: 'json',
+                                x: 'lng',
+                                y: 'lat'
+                            }
+                        }
+                    )
+                    .shape('circle')
+                    .color("name", cli)
+                    .size('size', v => {
+                        // let p = v / source[0].size;
+                        // p < 0.3 ? p = (p + 0.2).toFixed(2) - 0 : '';
+                        let p = (v / total * 100).toFixed(2) - 0;
+                        if (p < 30) return p + 30;
+                        return p
+                    })
+                    .animate(true)
+                    .style({
+                        raisingHeight: 0,
+                    });
+
+                // 柱子
+                // const barLayer = new PointLayer({ zIndex: 2, depth: false })
+                //     .source(
+                //         source,
+                //         {
+                //             parser: {
+                //                 type: 'json',
+                //                 x: 'lng',
+                //                 y: 'lat'
+                //             }
+                //         }
+                //     )
+                //     .shape('cylinder')
+                //     .color("name", cli)
+                //     .size('size', v => {
+                //         let p = v / source[0].size;
+                //         p < 0.3 ? p = (p + 0.2).toFixed(2) - 0 : '';
+                //         return [5, 5, p * 100]
+                //     })
+                //     .animate(true)
+                //     .style({
+                //         raisingHeight: 1,
+                //         opacityLinear: {
+                //             enable: true, // true - false
+                //             dir: 'up' // up - down
+                //         },
+                //         lightEnable: false
+                //     });
+                scene.addLayer(gd);
+                // scene.addLayer(bottomLayer);
+                scene.addLayer(layer);
+                scene.addLayer(lineUp);
+                scene.addLayer(waveLayer);
+                // 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]);
+
+        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);
+        }
+        // 文字
+        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()
+    })
+    return (
+        <div class="livRang map" style={{
+            width: `${prop.width}px`
+        }}>
+            <div class="head">
+                {prop.title}
+                <div class="btn">大数据平台登录入口</div>
+            </div>
+            <div ref={$canvas} style={{
+                width: `${prop.width}px`,
+                height: `${prop.height}px`,
+                position: 'relative'
+            }}></div>
+        </div>
+    );
+}
+
+export default Map;

src/pages/CommonBigScreen/components/Map.jsx

@@ -0,0 +1,268 @@
+import { onMount } from "solid-js";
+import * as THREE from 'three';
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import * as D3 from "d3"
+
+import json from "../../../assets/file/100000_full.json"
+
+// import utils from "../../../utils/index"
+// import config from "../../../base/config"
+
+import { getMapfull } from "../../../api/bigScreen"
+
+import "../../../assets/style/CommonBigScreenHome.css"
+
+
+class chinaMap {
+    cli = [
+        '#87CEFA',
+        '#00BFFF',
+        '#7FFFAA',
+        '#00FF7F',
+        '#32CD32',
+        '#F0E68C',
+        '#FFD700',
+        '#FF7F50',
+        '#FF6347',
+        '#FF0000'
+    ]
+    constructor(data) {
+        this.$ele = data.ele;
+        this.$bg = data.bg;
+        this.$tooltip = data.tooltip
+        this.$list = data.data;
+        this.$json = data.json;
+        this.$width = data.width;
+        this.$height = data.height;
+        this.init()
+    }
+
+    init() {
+        // 墨卡托投影转换
+        this.projection = D3
+            .geoMercator()
+            .center([108.7, 35.8])
+            .scale(60)
+            .translate([0, 0])
+        // 第一步新建一个场景
+        this.scene = new THREE.Scene();
+        this.setCamera()
+        this.setRenderer()
+        this.generateGeometry()
+        this.setController()
+        this.setRaycaster()
+        this.animate();
+    }
+
+    setController() {
+        this.controller = new OrbitControls(
+            this.camera,
+            this.$ele
+        )
+        // 使动画循环使用时阻尼或自转 意思是否有惯性 
+        this.controller.enableDamping = false;
+        //是否可以缩放 
+        this.controller.enableZoom = true;
+        //是否自动旋转 
+        this.controller.autoRotate = false;
+        //是否开启右键拖拽 
+        this.controller.enablePan = true;
+
+
+        this.controller.maxAzimuthAngle = Math.PI / 2;
+        this.controller.minAzimuthAngle = 0;
+        this.controller.maxPolarAngle = Math.PI;
+        this.controller.minPolarAngle = Math.PI / 2;
+
+    }
+
+    // 新建透视相机
+    setCamera() {
+        // 第二参数就是 长度和宽度比 默认采用浏览器  返回以像素为单位的窗口的内部宽度和高度
+        this.camera = new THREE.PerspectiveCamera(
+            50,
+            this.$width / this.$height,
+            1,
+            1000
+        )
+        this.camera.position.z = 13
+    }
+
+    // 设置渲染器
+    setRenderer() {
+        this.renderer = new THREE.WebGLRenderer()
+        // 设置画布的大小
+        this.renderer.setSize(this.$width, this.$height)
+        this.renderer.setClearColor("rgb(6, 30, 56)", 1)
+        //这里 其实就是canvas 画布  renderer.domElement
+        this.$ele.appendChild(this.renderer.domElement)
+    }
+
+    // 设置环境光
+    setLight() {
+        this.ambientLight = new THREE.DirectionalLight(0xffffff, 1) // 环境光
+        this.scene.add(this.ambientLight)
+    }
+
+    //render 方法 
+    render() {
+        // 更新鼠标操作
+        let clock = new THREE.Clock();
+        this.controller.update(clock.getDelta());
+        this.renderer.render(this.scene, this.camera)
+    }
+
+    mapData() {
+        // 高亮
+        // 通过摄像机和鼠标位置更新射线
+        this.raycaster.setFromCamera(this.mouse, this.camera)
+        // 算出射线 与当场景相交的对象有那些
+        const intersects = this.raycaster.intersectObjects(
+            this.scene.children,
+            true
+        )
+        if (this.lastPick) {
+            // 恢复上一次清空的
+            this.lastPick.material[0].color.set(0x03f5f5)
+            this.lastPick.material[1].color.set(0x03f5f5)
+        }
+        this.lastPick = null
+        this.lastPick = (intersects.find(
+            (item) => item.object.material && item.object.material.length === 2
+        ) || {}).object
+        if (this.lastPick) {
+            this.lastPick.material[0].color.set(0xff0000)
+            this.lastPick.material[1].color.set(0xff0000)
+        }
+        this.showTip();
+    }
+
+    animate() {
+        requestAnimationFrame(this.animate.bind(this))
+        this.render()
+        // this.showToolTip && this.mapData()
+    }
+
+    generateGeometry() {
+        // 初始化一个地图对象
+        this.map = new THREE.Object3D()
+        this.$list.features.forEach((elem) => {
+            // 定一个省份3D对象
+            const province = new THREE.Object3D()
+            // 加入省份
+            province.properties = elem.properties
+            // 每个的 坐标 数组
+            const coordinates = elem.geometry.coordinates
+            // 循环坐标数组
+            coordinates.forEach((multiPolygon) => {
+                multiPolygon.forEach((polygon) => {
+                    const shape = new THREE.Shape();
+                    const lineMaterial = new THREE.LineBasicMaterial({
+                        color: '#00c0eb',
+                    })
+                    const lineGeometry = new THREE.BufferGeometry()
+                    const pointsArray = new Array()
+
+                    for (let i = 0; i < polygon.length; i++) {
+                        const [x, y] = this.projection(polygon[i])
+                        const v3 = new THREE.Vector3(x, -y, 0.2);
+                        const v30 = new THREE.Vector3(x, -y, 0);
+                        if (i === 0) shape.moveTo(v30.x, v30.y)
+                        shape.lineTo(v30.x, v30.y)
+                        pointsArray.push(v3)
+                    }
+                    lineGeometry.setFromPoints(pointsArray)
+                    const geometry = new THREE.ExtrudeGeometry(
+                        shape,
+                        {
+                            depth: 0.2,
+                            bevelOffset: -1,
+                            bevelEnabled: false,
+                        }
+                    )
+                    const material = new THREE.MeshBasicMaterial({
+                        color: '#50b2d6',
+                        transparent: true,
+                        opacity: 0.6,
+                    })
+                    const material1 = new THREE.MeshBasicMaterial({
+                        color: '#50b2d6',
+                        transparent: true,
+                        opacity: 0.5,
+                    })
+
+                    const mesh = new THREE.Mesh(geometry, [material, material1])
+                    const line = new THREE.Line(lineGeometry, lineMaterial)
+                    province.add(mesh)
+                    province.add(line)
+                })
+            })
+            // 添加坐标
+            // const centerv3 = new THREE.Vector3(elem.properties.center[0], -elem.properties.center[1], 0.2);
+            this.map.add(province)
+
+        })
+        this.scene.add(this.map)
+    }
+
+    setRaycaster() {
+        this.raycaster = new THREE.Raycaster()
+        this.mouse = new THREE.Vector2(0, 0)
+        this.$bg.addEventListener('mousemove', (event) => {
+            event.preventDefault();
+            !this.showToolTip && (this.showToolTip = true);
+            this.mouse.x = ((event.clientX - this.$ele.getBoundingClientRect().left) / this.$width) * 2 - 1
+            this.mouse.y = -((event.clientY - this.$ele.getBoundingClientRect().top) / this.$height) * 2 + 1
+            // 更改div位置
+            this.$tooltip.style.left = event.offsetX + 2 + 'px'
+            this.$tooltip.style.top = event.offsetY + 2 + 'px'
+        }, false)
+    }
+
+    showTip() {
+        // 显示省份的信息
+        console.log(this.lastPick)
+        if (this.lastPick) {
+            const properties = this.lastPick.parent.properties
+            this.$tooltip.textContent = properties.name
+            this.$tooltip.style.visibility = 'visible'
+        } else {
+            this.$tooltip.style.visibility = 'hidden'
+        }
+    }
+}
+
+function Map(prop) {
+    let $canvas = undefined, $tooltip = undefined, $bg = undefined;
+
+    onMount(() => {
+        getMapfull().then(data => {
+            new chinaMap({
+                ele: $canvas,
+                tooltip: $tooltip,
+                bg: $bg,
+                height: prop.height,
+                width: prop.width,
+                json,
+                data
+            })
+        })
+    })
+    return (
+        <div class="livRang map" style={{
+            width:`${prop.width}px`
+        }}>
+            <div class="head">{prop.title}</div>
+            <div ref={$bg} style={{"position":"relative"}}>
+                <div ref={$canvas} style={{
+                    width:`${prop.width}px`,
+                    height:`${prop.height}px`,
+                    position: 'relative'
+                }}></div>
+                <div ref={$tooltip} id="tooltip"></div>
+            </div>
+        </div>
+    );
+}
+
+export default Map;

src/pages/CommonBigScreen/components/NewMedia.jsx

@@ -0,0 +1,113 @@
+import { onMount, createSignal, createEffect, For } from "solid-js";
+import utils from "../../../utils/index"
+import "../../../assets/style/CommonBigScreenHome.css"
+
+import wx from "../../../assets/img/微信.png";
+import wxo from "../../../assets/img/微信-o.png";
+import ks from "../../../assets/img/快手.png";
+import kso from "../../../assets/img/快手-o.png";
+import qdxw from "../../../assets/img/起点新闻.png";
+import qdxwo from "../../../assets/img/起点新闻-o.png";
+import ssp from "../../../assets/img/闪视频.png";
+import sspo from "../../../assets/img/闪视频-o.png";
+import sxtt from "../../../assets/img/陕西头条.png";
+import sxtto from "../../../assets/img/陕西头条-o.png";
+import tt from "../../../assets/img/头条.png";
+import tto from "../../../assets/img/头条-o.png";
+import wb from "../../../assets/img/微博.png";
+import wbo from "../../../assets/img/微博-o.png";
+import dy from "../../../assets/img/抖音.png";
+import dyo from "../../../assets/img/抖音-o.png";
+
+let timeout = undefined;
+function NewMedia(prop) {
+    function getlist() {
+        const setli = [];
+        for (let i = 0; i < Math.floor((prop.height - 42) / 40); i++) {
+            const v = ((prop.list[act()] || {}).data || [])[i];
+            if (!v) break
+            setli.push({
+                userName: v.userName,
+                depName: v.depName,
+                readCount: v.readCount
+            })
+        }
+        return setli
+    }
+    const [act, setact] = createSignal(0)
+    const [TableList, setTableList] = createSignal(getlist())
+    onMount(() => { })
+    function imgClick(index) {
+        setact(index);
+        setTableList(getlist())
+    }
+    function timeoutFun() {
+        return setTimeout(() => {
+            if (timeout) clearTimeout(timeout)
+            const i = act() + 1 >= prop.list.length ? 0 : act() + 1;
+            imgClick(i);
+            timeout = timeoutFun();
+        }, 3000);
+    }
+
+    timeout = timeoutFun()
+    let p = {};
+    createEffect(() => {
+        if (prop.styleCss) p = prop.styleCss;
+        if (prop.width) p.width = `${prop.width}px`;
+        if (prop.height) p.height = `${prop.height + 40}px`;
+    })
+
+    const getimg = (text, isSelect) => {
+        if (text === '微信') return isSelect ? wxo : wx;
+        if (text === '微博') return isSelect ? wbo : wb;
+        if (text === '抖音') return isSelect ? dyo : dy;
+        if (text === '头条') return isSelect ? tto : tt;
+        if (text === '快手') return isSelect ? kso : ks;
+        if (text === '陕西头条') return isSelect ? sxtto : sxtt;
+        if (text === '闪视频') return isSelect ? sspo : ssp;
+        if (text === '起点新闻') return isSelect ? qdxwo : qdxw;
+    }
+
+    return (
+        <div class="livRang newMdia" style={p}>
+            <div class="head">{prop.title}1</div>
+            <div style={{ "white-space": "nowrap", "display": "flex" }}>
+                <For each={prop.list}>{(item, i) => <div class="TabBtn">
+                    <img onClick={() => imgClick(i())} class="tabIcon" src={getimg(item.name, act() === i())} />
+                    {/* <span style="vertical-align: middle;">{item.name}</span> */}
+                </div>}</For>
+            </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' style={{ "flex": "2" }}>账号</div>
+                    <div class='td' style={{ "flex": "2" }}>当月阅读量</div>
+                </div>
+                <div style={{
+                    height: `${prop.height - 82}px`,
+                    overflow: 'hidden'
+                }}>
+                    <For each={TableList()}>{(item, i) => <div class="tr trColor">
+                        <div class='td'>{i() + 1}</div>
+                        <div class='td' style={{ "flex": "2" }}>
+                            {item.depName}
+                        </div>
+                        <div class='td' style={{ "flex": "2" }}>
+                            {/* <Show when={maxlen <= item.userName.length}>
+                                <marquee behavior="scroll">{item.userName}</marquee>
+                            </Show>
+                            <Show when={maxlen > item.userName.length}> */}
+                            {item.userName}
+                            {/* </Show> */}
+                        </div>
+                        <div class='td' style={{ "flex": "2" }}>{utils.formatNumber(item.readCount)}</div>
+                    </div>}</For>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default NewMedia;

src/pages/CommonBigScreen/components/NewMediaTrend.jsx

@@ -0,0 +1,115 @@
+import { onMount } from "solid-js";
+import { Chart } from '@antv/g2';
+// import DataSet from '@antv/data-set';
+
+import "../../../assets/style/CommonBigScreenHome.css"
+import utils from "../../../utils/index"
+
+function DataFormmat(timeString) {
+    if (!timeString || typeof timeString !== 'string') return "";
+    const y = timeString[0] + timeString[1] + timeString[2] + timeString[3];
+    const m = timeString[4] + timeString[5];
+    const d = timeString[6] + timeString[7];
+    return [y, m, d].join("-");
+}
+
+function Usertrend(prop) {
+    let $canvas = undefined;
+    function getlist() {
+        const setli = [];
+        for (let i = 0; i < (prop.list || []).length; i++) {
+            const item = (prop.list || [])[i];
+            (item.data || []).map(v => {
+                setli.push({
+                    Data: DataFormmat(v.dt),
+                    value: v.readCount,
+                    type: item.name
+                })
+            })
+        }
+        return setli
+    }
+    function TrendChart(width, height, $canvas) {
+        const data = getlist(), li = {};
+        const chart = new Chart({
+            container: $canvas,
+            autoFit: true,
+            height,
+            width,
+            padding: [
+                30,
+                40,
+                30,
+                70,
+            ]
+        });
+        chart.data(data);
+        chart.legend({
+            position: "top",
+            marker: {
+                symbol: "hyphen"
+            },
+            itemName: {
+                style: {
+                    fill: "#ffffff",
+                }
+            }
+        });
+        chart.scale('Data', {
+            range: [0, 1],
+            tickCount: 10,
+            type: 'timeCat'
+        });
+        chart.axis('Data', {
+            label: {
+                style: {
+                    fill: "#fff"
+                },
+            },
+            grid: null
+        });
+        chart.tooltip(false);
+        chart.axis("value", {
+            label: {
+                formatter: n => {
+                    return utils.formatNumber(n, 2);
+                },
+                style: {
+                    fill: "#fff"
+                },
+            },
+            position: "left",
+            grid: null
+        });
+
+        chart.line().shape('smooth').color('type', [
+            '#4fdfff',
+            '#8b78fa',
+            '#78d56c',
+            '#ffcf48',
+            '#00b2da',
+        ]).position('Data*value');
+        chart.area().shape('smooth').color('type', [
+            'l(90) 0:#4fdfff 1:rgba(0,0,0,0)',
+            'l(90) 0:#8b78fa 1:rgba(0,0,0,0)',
+            'l(90) 0:#78d56c 1:rgba(0,0,0,0)',
+            'l(90) 0:#ffcf48 1:rgba(0,0,0,0)',
+            'l(90) 0:#00b2da 1:rgba(0,0,0,0)',
+        ]).position('Data*value');
+        chart.scale(li);
+        chart.render();
+    }
+    onMount(() => {
+        TrendChart(prop.width, prop.height, $canvas)
+    })
+    return (
+        <div class="livRang" style={{
+            width: `${prop.width}px`
+        }}>
+            <div class="head">{prop.title}</div>
+            <div ref={$canvas}></div>
+        </div>
+    );
+}
+
+export default Usertrend;

src/pages/CommonBigScreen/components/SelfPlatform.jsx

@@ -0,0 +1,106 @@
+import { onMount } from "solid-js";
+import { Chart } from '@antv/g2';
+// import DataSet from '@antv/data-set';
+
+import "../../../assets/style/CommonBigScreenHome.css"
+import utils from "../../../utils/index"
+
+function DataFormmat(timeString) {
+    if (!timeString || typeof timeString !== 'string') return "";
+    const y = timeString[0] + timeString[1] + timeString[2] + timeString[3];
+    const m = timeString[4] + timeString[5];
+    const d = timeString[6] + timeString[7];
+    return [y, m, d].join("-");
+}
+
+function Usertrend(prop) {
+    let $canvas = undefined;
+    function TrendChart(width, height, $canvas) {
+        const data = (prop.list || []).map(v => {
+            return {
+                Data: DataFormmat(v.dt),
+                sales: v.readCount
+            }
+        });
+        const chart = new Chart({
+            container: $canvas,
+            autoFit: true,
+            height,
+            width,
+            padding: [
+                10,
+                40,
+                30,
+                70,
+            ]
+        });
+        let max = 0, min = Infinity;
+        (data || []).map(v => {
+            if (v.sales > max) {
+                max = v.sales;
+            }
+            if (v.sales < min) {
+                min = v.sales;
+            }
+        })
+        chart.data(data);
+        chart.scale('Data', {
+            range: [0, 1],
+            tickCount: 10,
+            type: 'timeCat'
+        });
+        chart.scale('sales', {
+            nice: true,
+        });
+        // chart.annotation().dataMarker({
+        //     position: [maxText, max],
+        //     top: true,
+        //     text: {
+        //         content: '最高值：' + max,
+        //         style: {
+        //             fontSize: 13,
+        //             fill: "#ffffff",
+        //         }
+        //     },
+        //     line: {
+        //         length: 30,
+        //     },
+        // });
+        chart.axis('sales', {
+            label: {
+                formatter: n => {
+                    return utils.formatNumber(n,2);
+                },
+                style: {
+                    fill: "#fff"
+                },
+            },
+            grid: null
+        });
+        chart.axis('Data', {
+            label: {
+                style: {
+                    fill: "#fff"
+                },
+            },
+            grid: null
+        });
+        chart.tooltip(false);
+        chart.line().shape('smooth').color('#3ae8ef').position('Data*sales');
+        chart.area().shape('smooth').color('l(90) 0:#3ae8ef 1:rgba(0,0,0,0)').position('Data*sales');
+        chart.render();
+    }
+    onMount(() => {
+        TrendChart(prop.width, prop.height, $canvas)
+    })
+    return (
+        <div class="livRang" style={{
+            width: `${prop.width}px`
+        }}>
+            <div class="head">{prop.title}</div>
+            <div ref={$canvas}></div>
+        </div>
+    );
+}
+
+export default Usertrend;

src/pages/CommonBigScreen/components/Usertrend.jsx

@@ -0,0 +1,107 @@
+import { onMount } from "solid-js";
+import { Chart } from '@antv/g2';
+// import DataSet from '@antv/data-set';
+
+import "../../../assets/style/CommonBigScreenHome.css"
+import utils from "../../../utils/index"
+
+function DataFormmat(timeString) {
+    if (!timeString || typeof timeString !== 'string') return "";
+    const y = timeString[0] + timeString[1] + timeString[2] + timeString[3];
+    const m = timeString[4] + timeString[5];
+    const d = timeString[6] + timeString[7];
+    return [y, m, d].join("-");
+}
+
+function Usertrend(prop) {
+    let $canvas = undefined;
+    function TrendChart(width, height, $canvas) {
+        const data = (prop.list || []).map(v => {
+            return {
+                Data: DataFormmat(v.dt),
+                sales: v.userCount
+            }
+        })
+        const chart = new Chart({
+            container: $canvas,
+            autoFit: true,
+            height,
+            width,
+            padding: [
+                10,
+                40,
+                30,
+                70,
+            ]
+        });
+        let max = 0, min = Infinity;
+        (data || []).map(v => {
+            if (v.sales > max) {
+                max = v.sales;
+            }
+            if (v.sales < min) {
+                min = v.sales;
+            }
+        })
+        chart.data(data);
+        chart.scale('Data', {
+            range: [0, 1],
+            tickCount: 10,
+            type: 'timeCat'
+        });
+        chart.scale('sales', {
+            nice: true,
+        });
+        // chart.annotation().dataMarker({
+        //     position: [maxText, max],
+        //     top: true,
+        //     text: {
+        //         content: '最高值：' + max,
+        //         style: {
+        //             fontSize: 13,
+        //             fill: "#fff",
+        //         }
+        //     },
+        //     line: {
+        //         length: 30,
+        //     },
+        // });
+        chart.axis('sales', {
+            label: {
+                formatter: n => {
+                    return utils.formatNumber(n,2);
+                },
+                style: {
+                    fill: "#fff"
+                },
+            },
+            grid: null
+        });
+        chart.axis('Data', {
+            label: {
+                style: {
+                    fill: "#fff"
+                },
+            },
+            grid: null
+        });
+        chart.tooltip(false);
+
+        chart.line().shape('smooth').color('#3ae8ef').position('Data*sales');
+        chart.area().shape('smooth').color('l(90) 0:#3ae8ef 1:rgba(0,0,0,0)').position('Data*sales');
+        chart.render();
+    }
+    onMount(() => {
+        TrendChart(prop.width, prop.height, $canvas)
+    })
+    return (
+        <div class="livRang" style={{
+            width: `${prop.width}px`
+        }}>
+            <div class="head">{prop.title}</div>
+            <div ref={$canvas}></div>
+        </div>
+    );
+}
+
+export default Usertrend;

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

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

src/router/index.jsx

@@ -1,10 +1,10 @@
-import { lazy, createSignal, Show } from "solid-js";
+import { lazy, createSignal } from "solid-js";
 import { Routes, Route } from "solid-app-router";
 
-import TitleStyle from "../components/titleStyle"
 
 import baseText from "../base/baseText"
 const BigScreen = lazy(() => import("../pages/BigScreen/Home"))
+const CommonBigScreen = lazy(() => import("../pages/CommonBigScreen/Home"))
 
 const [BottomLi, setBottomLi] = createSignal(baseText.bottoms);
 
@@ -12,11 +12,9 @@ export default function localRouter() {
     // 根据路由选择tab
     setBottomLi(BottomLi().map(bot => (bot.path === location.pathname ? { ...bot, select: true } : { ...bot, select: false })));
     return <>
-        <Show when={location.pathname !== '/'}>
-            <TitleStyle />
-        </Show>
         <Routes>
             <Route path="/" element={<BigScreen />} />
+            <Route path="/common" element={<CommonBigScreen />} />
         </Routes>
     </>
 }