bigScreen/src/pages/IndividualActivities/Home.jsx

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/IndividualActivities.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, getIndividualActivitiesData, getFirstClassData } 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 IndividualActivities() {
    const [HeadTitleLeft, setHeadTitleLeft] = createSignal();
    const [HeadTitleRight, setHeadTitleRight] = createSignal();
    // const [proTv, setproTv] = createSignal([])
    const [oriData_left, setoriData_left] = createStore({});
    const [oriData_right, setoriData_right] = createStore({});
    let $ele = undefined, mainHeight = document.body.offsetHeight * 0.925 - 100;
    onMount(() => {
        setTimeDate(dayjs().format('YYYY-MM-DD'));
        seteHeight(Math.floor($ele.offsetWidth / 16 * 9) + 70);
        getWeather().then(r => setTQ(r.data))

        getIndividualActivitiesData().then(r => {
            if (r.code != 0) return
            const d = r.data || {};
            setoriData_left({
                pie: {
                    name: '盛世中华平台传播排行',
                    data: d.pie
                },
                trendAll: {
                    name: '盛世中华传播量走势',
                    data: d.trendAll || []
                },
                hotTopic: {
                    name: '盛世中华热门稿件',
                    data: (d.article || []).splice(0, 10)
                }
            });
            setHeadTitleLeft([
                {
                    title: "盛世中华-总传播量",
                    color: "rgb(153,204,255)",
                    value: d.top.playCount,
                    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: "传统媒体-总发稿量",
                    color: "rgb(0,255,0)",
                    value: d.top.publishCount,
                    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"
                        }
                    ]
                },

            ])
        })

        getFirstClassData().then(r => {
            if (r.code != 0) return
            const d = r.data || {};
            let c = ['rgb(153, 204, 255)', 'rgb(0, 255, 0)', 'rgb(0, 153, 255)', 'rgb(255, 153, 0)']
            setoriData_right({
                media_read_trend: {
                    name: '开学第一课日累计活跃数',
                    data: d.dayTrend || []
                },
                media_spread_trend: {
                    name: '开学第一课用户趋势',
                    data: d.trend || []
                },
                media_total: {
                    name: '开学第一课综合数据',
                    data: (d.overview || []).map((v, i) => {
                        return {
                            ...v,
                            color: c[i]
                        }
                    })
                }
            });

            setHeadTitleRight([
                {
                    title: '开学第一课-' + d.topList[0].name,
                    color: "rgb(0,153,255)",
                    value: d.topList[0].activeUser,
                    key: '',
                    path: [
                        {
                            d: 'M920.900621 803.267543 112.32753 803.267543c-49.059901 0-88.982874-39.921757-88.982874-88.982874L23.344655 172.240573c0-49.07328 39.922973-88.996254 88.982874-88.996254l808.573091 0c49.061117 0 88.981658 39.922973 88.981658 88.996254l0 542.044096C1009.882279 763.345786 969.961738 803.267543 920.900621 803.267543zM112.32753 104.039587c-37.593738 0-68.188823 30.595085-68.188823 68.202202l0 542.044096c0 37.594954 30.595085 68.190039 68.188823 68.190039l808.573091 0c37.592522 0 68.190039-30.593869 68.190039-68.190039L989.09066 172.240573c0-37.605901-30.596301-68.202202-68.190039-68.202202L112.32753 104.038371z',
                            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: '开学第一课-' + d.topList[1].name,
                    color: "rgb(255,153,0)",
                    key: "小时",
                    value: d.topList[1].activeUser/3600,
                    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"
                        }
                    ]
                }
            ])
        })
    })

    document.title = "集团大数据平台";

    return (
        <div class="idHome">
            <div class="idHomeHeader">
                <div class="sz">
                    <img style={{ "vertical-align": 'middle', width: '115px', "margin-right": '3px' }}
                        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="idBody">
                <div class="main">
                    <div ref={$ele} class="mainbody left">
                        <div style={{ "display": "flex", "width": "100%" }}>
                            <For each={HeadTitleLeft()}>{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" 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>
                                    </div>
                                </div>
                            }
                            </For>
                        </div>
                        <Show when={eHeight() > 0 && oriData_left.pie && oriData_left.pie.name} >
                            <ListeningRate
                                title={oriData_left.pie.name}
                                list={oriData_left.pie.data}
                                width={Math.floor($ele.offsetWidth)}
                                height={mainHeight / 3}
                            />
                        </Show>
                        {/* <Show when={eHeight() > 0 && oriData.schedule_rank && oriData.schedule_rank.name} >
                            <div style={{ "margin-bottom": "6px", "margin-top": "6px" }}>
                                <Column
                                    title={oriData.schedule_rank.name}
                                    list={oriData.schedule_rank.data}
                                    width={Math.floor($ele.offsetWidth)}
                                    height={(mainHeight - 54) / 3}
                                />
                            </div>
                        </Show> */}
                        <Show when={eHeight() > 0 && oriData_left.trendAll && oriData_left.trendAll.name} >
                            <div style={{ "margin-bottom": "6px", "margin-top": "6px" }}>
                                <Usertrend
                                    title={oriData_left.trendAll.name}
                                    list={oriData_left.trendAll.data}
                                    width={Math.floor($ele.offsetWidth)}
                                    height={(mainHeight - 54) / 3}
                                />
                            </div>
                        </Show>
                        <Show when={eHeight() > 0 && oriData_left.hotTopic && oriData_left.hotTopic.name}>
                            <Activity
                                styleCss={{ marginLeft: '6px' }}
                                title={oriData_left.hotTopic.name}
                                list={oriData_left.hotTopic.data}
                                width={Math.floor($ele.offsetWidth)}
                                height={mainHeight / 3}
                            />
                        </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 - 30}
                                    setfun={setTQ}
                                />
                            </Show>
                        </div>
                        <div class="flex">
                            <For each={proTv()} >{item => <div class="flexItem">
                                <p class="textNum" style={{ color: item.color }}>{utils.formatNum(item.value, 2)}%</p>
                                {item.text}
                            </div>
                            }</For>
                        </div>
                    </div> */}
                    <div class="mainbody right">
                        <div style={{ "display": "flex", "width": "100%" }}>
                            <For each={HeadTitleRight()}>{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" 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>
                                    </div>
                                </div>
                            }
                            </For>
                        </div>
                        <Show when={eHeight() > 0 && oriData_right.media_total && oriData_right.media_total.name}>
                            <NewMedia
                                title={oriData_right.media_total.name}
                                list={oriData_right.media_total.data}
                                width={Math.floor($ele.offsetWidth - 20)}
                                height={(mainHeight - 104) / 3 + 20}
                            />
                        </Show>
                        <Show when={eHeight() > 0 && oriData_right.media_read_trend && oriData_right.media_read_trend.name}>
                            <div style={{ "margin-bottom": "6px", "margin-top": "6px" }}>
                                <SelfPlatform
                                    styleCss={{ marginBottom: '6px' }}
                                    title={oriData_right.media_read_trend.name}
                                    list={oriData_right.media_read_trend.data}
                                    width={Math.floor($ele.offsetWidth - 20)}
                                    height={(mainHeight - 104) / 3}
                                />
                            </div>
                        </Show>
                        <Show when={eHeight() > 0 && oriData_right.media_spread_trend && oriData_right.media_spread_trend.name}>
                            <NewMediaTrend
                                styleCss={{ marginBottom: '6px' }}
                                title={oriData_right.media_spread_trend.name}
                                list={oriData_right.media_spread_trend.data}
                                width={Math.floor($ele.offsetWidth - 20)}
                                height={(mainHeight - 104) / 3}
                            />
                        </Show>
                    </div>
                </div>
            </div >
        </div >
    );
}

export default IndividualActivities;