<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>数据分析</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link rel="stylesheet" href="/static/admin/css/other/console.css" />
  </head>

  <body>
    <div class="pear-container">
      <div class="layui-row layui-col-space10">
        <div class="layui-col-md8">
          <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
              <div class="layui-card">
                <div class="layui-card-header">快捷菜单</div>
                <div class="layui-card-body">
                  <div class="layui-row layui-col-space10">
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                      <div
                        class="shortcut-menu"
                        data-id="home1"
                        data-title="主页"
                        data-url="http://www.baidu.com"
                      >
                        <i class="layui-icon layui-icon-home"></i>
                      </div>
                      <span class="shortcut-menu-label">主页</span>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                      <div
                        class="shortcut-menu"
                        data-id="home2"
                        data-title="弹层"
                        data-url="http://www.baidu.com"
                      >
                        <i class="layui-icon layui-icon-camera"></i>
                      </div>
                      <span class="shortcut-menu-label">弹层</span>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                      <div
                        class="shortcut-menu"
                        data-id="home2"
                        data-title="聊天"
                        data-url="http://www.baidu.com"
                      >
                        <i class="layui-icon layui-icon-star"></i>
                      </div>
                      <span class="shortcut-menu-label">聊天</span>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                      <div
                        class="shortcut-menu"
                        data-id="home3"
                        data-title="相机"
                        data-url="http://www.baidu.com"
                      >
                        <i class="layui-icon layui-icon-camera"></i>
                      </div>
                      <span class="shortcut-menu-label">相机</span>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                      <div
                        class="shortcut-menu"
                        data-id="home4"
                        data-title="表单"
                        data-url="http://www.baidu.com"
                      >
                        <i class="layui-icon layui-icon-console"></i>
                      </div>
                      <span class="shortcut-menu-label">表单</span>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                      <div
                        class="shortcut-menu"
                        data-id="home5"
                        data-title="安全"
                        data-url="http://www.baidu.com"
                      >
                        <i class="layui-icon layui-icon-auz"></i>
                      </div>
                      <span class="shortcut-menu-label">安全</span>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                      <div
                        class="shortcut-menu"
                        data-id="home6"
                        data-title="公告"
                        data-url="http://www.baidu.com"
                      >
                        <i class="layui-icon layui-icon-cart"></i>
                      </div>
                      <span class="shortcut-menu-label">公告</span>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                      <div
                        class="shortcut-menu"
                        data-id="home7"
                        data-title="更多"
                        data-url="http://www.baidu.com"
                      >
                        <i class="layui-icon layui-icon-app"></i>
                      </div>
                      <span class="shortcut-menu-label">更多</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-col-md6">
              <div class="layui-card">
                <div class="layui-card-header">代办任务</div>
                <div class="layui-card-body">
                  <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                      <div class="deputy">
                        <div class="deputy-label">待审评论</div>
                        <div class="deputy-count">21</div>
                      </div>
                    </div>
                    <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                      <div class="deputy">
                        <div class="deputy-label">待审帖子</div>
                        <div class="deputy-count">32</div>
                      </div>
                    </div>
                    <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                      <div class="deputy">
                        <div class="deputy-label">待审文章</div>
                        <div class="deputy-count">14</div>
                      </div>
                    </div>
                    <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                      <div class="deputy">
                        <div class="deputy-label">待审用户</div>
                        <div class="deputy-count">63</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-col-md12">
              <div class="layui-card">
                <div class="layui-card-body">
                  <div
                    class="layui-tab custom-tab layui-tab-brief"
                    lay-filter="docDemoTabBrief"
                  >
                    <div id="echarts-records-1" style="min-height: 400px"></div>
                  </div>
                </div>
              </div>
              <div class="layui-card">
                <div
                  class="layui-card-body"
                  style="padding-top: 15px; padding-bottom: 15px"
                >
                  <table class="layui-hide" id="ID-table-demo-data"></table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-md4">
          <div class="layui-card">
            <div class="layui-card-header">留言板</div>
            <div class="layui-card-body">
              <ul class="message-board">
                <li>
                  <p>要不要作为我的家人，搬来我家。</p>
                  <span>12月25日 19:92</span>
                  <a
                    href="javascript:;"
                    data-id="1"
                    class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
                    >回复</a
                  >
                </li>
                <li>
                  <p>快乐的时候不敢尽兴，频繁警戒自己保持清醒。</p>
                  <span>4月30日 22:43</span>
                  <a
                    href="javascript:;"
                    data-id="1"
                    class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
                    >回复</a
                  >
                </li>
                <li>
                  <p>夏天真的来了，尽管它还有些犹豫。</p>
                  <span>4月30日 22:43</span>
                  <a
                    href="javascript:;"
                    data-id="1"
                    class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
                    >回复</a
                  >
                </li>
                <li>
                  <p>看似不可达到的高度，只要坚持不懈就可能到达。</p>
                  <span>4月30日 22:43</span>
                  <a
                    href="javascript:;"
                    data-id="1"
                    class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
                    >回复</a
                  >
                </li>
                <li>
                  <p>当浑浊变成了一种常态，那么清白就成了一种罪过。</p>
                  <span>4月30日 22:43</span>
                  <a
                    href="javascript:;"
                    data-id="1"
                    class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
                    >回复</a
                  >
                </li>
                <li>
                  <p>那是一种内在的东西，他们到达不了，也无法触及！</p>
                  <span>5月12日 01:25</span>
                  <a
                    href="javascript:;"
                    data-id="1"
                    class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
                    >回复</a
                  >
                </li>
                <li>
                  <p>希望是一个好东西,也许是最好的,好东西是不会消亡的！</p>
                  <span>6月11日 15:33</span>
                  <a
                    href="javascript:;"
                    data-id="1"
                    class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
                    >回复</a
                  >
                </li>
                <li>
                  <p>一切都在不可避免的走向庸俗。</p>
                  <span>2月09日 13:40</span>
                  <a
                    href="javascript:;"
                    data-id="1"
                    class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
                    >回复</a
                  >
                </li>
                <li>
                  <p>路上没有灯火的时候，就点亮自己的头颅。</p>
                  <span>3月11日 12:30</span>
                  <a
                    href="javascript:;"
                    data-id="1"
                    class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
                    >回复</a
                  >
                </li>

                <li>
                  <p>
                    我们应该不虚度一生，应该能够说：＂我已经做了我能做的事。＂
                  </p>
                  <span>4月30日 22:43</span>
                  <a
                    href="javascript:;"
                    data-id="1"
                    class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
                    >回复</a
                  >
                </li>
                <li>
                  <p>接近，是我对一切的态度，是我对一切态度的距离</p>
                  <span>6月11日 15:33</span>
                  <a
                    href="javascript:;"
                    data-id="1"
                    class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
                    >回复</a
                  >
                </li>
                <li>
                  <p>没有锚的船当然也可以航行，只是紧张充满你的一生。</p>
                  <span>2月09日 13:40</span>
                  <a
                    href="javascript:;"
                    data-id="1"
                    class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
                    >回复</a
                  >
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      layui.use(
        ["layer", "echarts", "carousel", "element", "table"],
        function () {
          var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            echarts = layui.echarts,
            table = layui.table,
            carousel = layui.carousel;

          var inst = table.render({
            elem: "#ID-table-demo-data",
            cols: [
              [
                { field: "id", title: "ID", width: 80, sort: true },
                { field: "username", title: "用户", width: 120 },
                { field: "sex", title: "性别", width: 80 },
                { field: "sign", title: "签名", minWidth: 160 },
                { field: "city", title: "城市", width: 80 },
                { field: "experience", title: "状态", width: 80, sort: true },
              ],
            ],
            data: [
              {
                id: "10001",
                username: "就眠儀式",
                sex: "男",
                city: "山东",
                sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
                experience: "在线",
              },
              {
                id: "10002",
                username: "就眠儀式",
                sex: "男",
                city: "山东",
                sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
                experience: "在线",
              },
              {
                id: "10003",
                username: "就眠儀式",
                sex: "男",
                city: "山东",
                sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
                experience: "在线",
              },
              {
                id: "10004",
                username: "就眠儀式",
                sex: "男",
                city: "山东",
                sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
                experience: "在线",
              },
              {
                id: "10005",
                username: "就眠儀式",
                sex: "男",
                city: "山东",
                sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
                experience: "在线",
              },
              {
                id: "10006",
                username: "就眠儀式",
                sex: "男",
                city: "山东",
                sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
                experience: "在线",
              },
              {
                id: "10007",
                username: "就眠儀式",
                sex: "男",
                city: "山东",
                sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
                experience: "在线",
              },
            ],
            page: false,
          });

          var echartsRecordsOne = echarts.init(
            document.getElementById("echarts-records-1"),
            "walden",
          );

          $("body").on("click", "[data-url]", function () {
            parent.layui.tab.addTabOnlyByElem("content", {
              id: $(this).attr("data-id"),
              title: $(this).attr("data-title"),
              url: $(this).attr("data-url"),
              close: true,
            });
          });

          let color = [
            "#0090FF",
            "#36CE9E",
            "#FFC005",
            "#FF515A",
            "#8B5CFF",
            "#00CA69",
          ];
          let echartData = [
            {
              name: "1",
              value1: 100,
              value2: 233,
            },
            {
              name: "2",
              value1: 138,
              value2: 233,
            },
            {
              name: "3",
              value1: 350,
              value2: 200,
            },
            {
              name: "4",
              value1: 173,
              value2: 180,
            },
            {
              name: "5",
              value1: 180,
              value2: 199,
            },
            {
              name: "6",
              value1: 150,
              value2: 233,
            },
            {
              name: "7",
              value1: 180,
              value2: 210,
            },
            {
              name: "8",
              value1: 230,
              value2: 180,
            },
          ];

          let xAxisData = echartData.map((v) => v.name);
          //  ["1", "2", "3", "4", "5", "6", "7", "8"]
          let yAxisData1 = echartData.map((v) => v.value1);
          // [100, 138, 350, 173, 180, 150, 180, 230]
          let yAxisData2 = echartData.map((v) => v.value2);
          // [233, 233, 200, 180, 199, 233, 210, 180]
          const hexToRgba = (hex, opacity) => {
            let rgbaColor = "";
            let reg = /^#[\da-f]{6}$/i;
            if (reg.test(hex)) {
              rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                "0x" + hex.slice(3, 5),
              )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
            }
            return rgbaColor;
          };

          optionOne = {
            color: color,
            legend: {
              right: 10,
              top: 10,
            },
            tooltip: {
              trigger: "axis",
              formatter: function (params) {
                let html = "";
                params.forEach((v) => {
                  html += `<div style="color: #666;font-size: 14px;line-height: 24px">
					                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                            color[v.componentIndex]
                          };"></span>
					                ${v.seriesName}.${v.name}
					                <span style="color:${
                            color[v.componentIndex]
                          };font-weight:700;font-size: 18px">${v.value}</span>
					                万元`;
                });
                return html;
              },
              extraCssText:
                "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
              axisPointer: {
                type: "shadow",
                shadowStyle: {
                  color: "#ffffff",
                  shadowColor: "rgba(225,225,225,1)",
                  shadowBlur: 5,
                },
              },
            },
            grid: {
              top: 100,
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                axisLabel: {
                  formatter: "{value}月",
                  textStyle: {
                    color: "#333",
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: "#D9D9D9",
                  },
                },
                data: xAxisData,
              },
            ],
            yAxis: [
              {
                type: "value",
                name: "单位：万千瓦时",
                axisLabel: {
                  textStyle: {
                    color: "#666",
                  },
                },
                nameTextStyle: {
                  color: "#666",
                  fontSize: 12,
                  lineHeight: 40,
                },
                splitLine: {
                  lineStyle: {
                    type: "dashed",
                    color: "#E9E9E9",
                  },
                },
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
              },
            ],
            series: [
              {
                name: "2018",
                type: "line",
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                  normal: {
                    color: color[0],
                    shadowBlur: 3,
                    shadowColor: hexToRgba(color[0], 0.5),
                    shadowOffsetY: 8,
                  },
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: hexToRgba(color[0], 0.3),
                        },
                        {
                          offset: 1,
                          color: hexToRgba(color[0], 0.1),
                        },
                      ],
                      false,
                    ),
                    shadowColor: hexToRgba(color[0], 0.1),
                    shadowBlur: 10,
                  },
                },
                data: yAxisData1,
              },
              {
                name: "2019",
                type: "line",
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                  normal: {
                    color: color[1],
                    shadowBlur: 3,
                    shadowColor: hexToRgba(color[1], 0.5),
                    shadowOffsetY: 8,
                  },
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: hexToRgba(color[1], 0.3),
                        },
                        {
                          offset: 1,
                          color: hexToRgba(color[1], 0.1),
                        },
                      ],
                      false,
                    ),
                    shadowColor: hexToRgba(color[1], 0.1),
                    shadowBlur: 10,
                  },
                },
                data: yAxisData2,
              },
            ],
          };

          echartsRecordsOne.setOption(optionOne);

          window.onresize = function () {
            echartsRecordsOne.resize();
          };
        },
      );
    </script>
  </body>
</html>
