bigScreen/src/pages/Fourth.jsx

import { onMount, createSignal } from "solid-js"
import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';

import utils from "../utils/index"

import ItemHead from "../components/itemHead";
import Table from "../components/table";
import Water from "../components/water";

import "../assets/style/Fourth.css"

let WordEle, WordCanvas;
let lastTime = Date.now();
window.animationID = -1;
const [timeDate, setTimeDate] = createSignal(utils.getTime())
const [itemHeight, setItemHeight] = createSignal(utils.getTime())

function animation() {
    window.animationID = window.requestAnimFrame(() => {
    const nowTime = Date.now();
    window.cancelrequestAnimFrame(window.animationID);
    animation()
    if ((nowTime - lastTime) < 1000) return
    lastTime = nowTime;
    setTimeDate(utils.getTime())
  })
}

function ClassificationChart() {
  const data = [
    { item: '执法形象', a: 70, b: 30 },
    { item: '突发事件', a: 60, b: 70 },
    { item: '突发事故', a: 50, b: 60 },
    { item: '涉警、涉公务人员问题', a: 40, b: 50 },
    { item: '政府形象问题', a: 60, b: 70 },
    { item: '涉稳事件', a: 70, b: 50 },
    { item: '治安管理', a: 50, b: 40 },
    { item: '民生问题', a: 30, b: 40 },
    { item: '地区重点企业', a: 60, b: 40 },
    { item: '案件问题', a: 50, b: 60 },
  ];
  const { DataView } = DataSet;
  const dv = new DataView().source(data);
  dv.transform({
    type: 'fold',
    fields: ['a', 'b'], // 展开字段集
    key: 'user', // key字段
    value: 'score', // value字段
    renderer: 'svg'
  });
  const chart = new Chart({
    container: 'Classification',
    autoFit: true,
    padding: 20,
    height: WordEle.offsetHeight - 110,
  });
  chart.data(dv.rows);
  chart.scale('score', {
    min: 0,
    max: 80,
  });
  chart.coordinate('polar', {
    radius: 0.8,
  });
  chart.tooltip({
    shared: true,
    showCrosshairs: true,
    crosshairs: {
      line: {
        style: {
          lineDash: [4, 4],
          stroke: '#333'
        }
      }
    }
  });
  chart.axis('item', {
    line: null,
    tickLine: null,
    grid: {
      line: {
        style: {
          lineDash: null,
        },
      },
    },
  });
  chart.axis('score', {
    line: null,
    tickLine: null,
    grid: {
      line: {
        type: 'line',
        style: {
          lineDash: null,
        },
      },
    },
  });

  chart
    .line()
    .position('item*score')
    .color('user')
    .size(2);
  chart
    .point()
    .position('item*score')
    .color('user')
    .shape('circle')
    .size(4)
    .style({
      stroke: '#fff',
      lineWidth: 1,
      fillOpacity: 1,
    });
  chart
    .area()
    .position('item*score')
    .color('user');
  chart.render();
}

function TrendChart() {
  const data = [
    { year: '1991', value: 15468 },
    { year: '1992', value: 16100 },
    { year: '1993', value: 15900 },
    { year: '1994', value: 17409 },
    { year: '1995', value: 17000 },
    { year: '1996', value: 31056 },
    { year: '1997', value: 31982 },
    { year: '1998', value: 32040 },
    { year: '1999', value: 33233 },
  ];
  const chart = new Chart({
    container: 'Trend',
    autoFit: true,
    height: WordEle.offsetHeight - 110,
    renderer: 'svg',
    padding: [20, 20, 30, 50],
  });

  chart.data(data);
  chart.scale({
    value: {
      min: 10000,
      nice: true,
    },
    year: {
      range: [0, 1],
    },
  });
  chart.tooltip({
    showCrosshairs: true,
    shared: true,
  });

  chart.axis('value', {
    label: {
      formatter: (val) => {
        return (val / 1000).toFixed(1) + 'k';
      },
    },
  });

  chart.area().position('year*value').shape('smooth');
  chart.line().position('year*value').shape('smooth');

  chart.render();
}

function WordsChart() {
  WordCanvas.width = WordEle.offsetWidth
  WordCanvas.height = WordEle.offsetHeight - 110
  window.TagCanvas.Start("wordCloud", "tags", {
    textColour: "#3AEDE4",
    outlineColour: "rgba(0,0,0,0)",
    maxSpeed: 0.003,
    lock: "y",
  });
  window.TagCanvas.SetSpeed("wordCloud", [3, 3]);
}


function Fourth() {
  onMount(() => {
    ClassificationChart()
    TrendChart()
    WordsChart()
    animation()
    setItemHeight(WordEle.offsetHeight - 43)
  })
  const tHead = [{ text: '发布时间', type: 'Text' }, { text: '信息来源', type: 'Text' }, { text: '信息标题', type: 'Text', flex: 2 }];
  const tBody = [
    {
      color: "",
      col: [
        { text: '31分钟前', type: 'Text', color: "rgb(215 1 1 / 60%)", flex: 1 },
        { text: '懂车帝', type: 'Text', color: "rgb(215 1 1 / 60%)", flex: 1 },
        {
          flex: 2,
          text: '国足又输了 [流泪][流泪][流泪] 孔老二搬家 ……尽是书 说实话，怪不了这帮小子，他们尽力了，他们也就这能耐。 没有高考不行! 但是，高考为大众目标的教育，必然导致足球人口畸少而且素质极差。 此题',
          type: 'Scroll',
          color: "rgb(215 1 1 / 60%)"
        }
      ]
    }
  ]
  return (
    <div class="page">
      <div class="row FourthLayout height50">
        <div class="col4" style={{"padding":"0 .5em"}}>
          <div class="timeSub">
            预警运行时间：
            <div class="numberFonts">
              <span>{timeDate().year[2]}</span>
              <span>{timeDate().year[3]}</span>
              年
              <span>{timeDate().month[0]}</span>
              <span>{timeDate().month[1]}</span>
              月
              <span>{timeDate().day[0]}</span>
              <span>{timeDate().day[1]}</span>
              日
            </div>
            <div class="numberFonts">
              <span>{timeDate().hour[0]}</span>
              <span>{timeDate().hour[1]}</span>
              时
              <span>{timeDate().min[0]}</span>
              <span>{timeDate().min[1]}</span>
              分
              <span>{timeDate().sec[0]}</span>
              <span>{timeDate().sec[1]}</span>
              秒
            </div>
          </div>
          <div class="dataTotal" style={'height: ' + itemHeight() + 'px'}>
            <img style={{"float":"right"}} src="/src/assets/img/border_right.png" height="100%" />
            <div class="error">
              <div>
                <img src="/src/assets/img/all_error.png" style={{"width":"7em"}} />
                <div>全部预警</div>
              </div>
              <div>
                <img src="/src/assets/img/public_error.png" style={{"width":"7em"}} />
                <div>公共预警</div>
              </div>
            </div>
            <img src="/src/assets/img/link.gif" style={{"float":"right","width":"35%","height":"80%","margin-top":"2em"}} />
            <div class="data" style={{"width":"calc(75% - 1.68rem)","height":"100%"}}>
              <div class="allData">
                <div>监测信息总量</div>
                <img src="/src/assets/img/arrow_right.png" class="arrow" />
                <p>445349</p>
              </div>
              <div class="filterData">
                <div>排除信息量</div>
                <img src="/src/assets/img/arrow_right.png" class="arrow" />
                <p>444393</p>
              </div>
              <div class="proData">
                <div>排除信息占比</div>
                <img src="/src/assets/img/arrow_right.png" class="arrow arrow_left" />
                <p>99.79%</p>
              </div>
              <div style={{"height":"180px"}}>
              <div class="img">
                <img src="/src/assets/img/w1.png" style={{"top":"16px"}} alt="" />
                <img src="/src/assets/img/w2.png" style={{"top":"106px"}} alt="" />
              </div>
              </div>
              <Water percentage={0.21} text="舆情预警" />
            </div>
          </div>
        </div>
        <div class="col3">
          <ItemHead title="预警信息" subtitle="Warning Information" />
          <Table head={tHead} body={tBody} />
        </div>
      </div>
      <div class="row FourthLayout height50">
        <div class="col1">
          <ItemHead title="预警分类" subtitle="Warning Classification" />
          <div class="chart3" id="Classification"></div>
        </div>
        <div class="col1">
          <ItemHead title="预警趋势" subtitle="Warning Trend" />
          <div class="chart3" id="Trend"></div>
        </div>
        <div class="col1" ref={WordEle}>
          <ItemHead title="高频热词" subtitle="High-frequency words" />
          <div class="chart3 heightWord">
            <canvas id="wordCloud" ref={WordCanvas}></canvas>
            <div id="tags" class="tags" style={{"display":"none"}}>
              <ul>
                <li>
                  <a href="http://www.google.com" target="_blank">Google</a>
                </li>
                <li><a href="/fish">Fish</a></li>
                <li><a href="/chips">Chips</a></li>
                <li><a href="/salt">Salt</a></li>
                <li><a href="/vinegar">Vinegar</a></li>
                <li>
                  <a href="http://www.google.com" target="_blank">Google</a>
                </li>
                <li><a href="/fish">Fish</a></li>
                <li><a href="/chips">Chips</a></li>
                <li><a href="/salt">Salt</a></li>
                <li><a href="/vinegar">Vinegar</a></li>
                <li>
                  <a href="http://www.google.com" target="_blank">Google</a>
                </li>
                <li><a href="/fish">Fish</a></li>
                <li><a href="/chips">Chips</a></li>
                <li><a href="/salt">Salt</a></li>
                <li><a href="/vinegar">Vinegar</a></li>
                <li>
                  <a href="http://www.google.com" target="_blank">Google</a>
                </li>
                <li><a href="/fish">Fish</a></li>
                <li><a href="/chips">Chips</a></li>
                <li><a href="/salt">Salt</a></li>
                <li><a href="/vinegar">Vinegar</a></li>
                <li>
                  <a href="http://www.google.com" target="_blank">Google</a>
                </li>
                <li><a href="/fish">Fish</a></li>
                <li><a href="/chips">Chips</a></li>
                <li><a href="/salt">Salt</a></li>
                <li><a href="/vinegar">Vinegar</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Fourth;