|
|
@@ -0,0 +1,409 @@
|
|
|
+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.playCount,
|
|
|
+ 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)",
|
|
|
+ value: d.topList[1].activeUser,
|
|
|
+ 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;
|
liyongli