hb_sis_zhfx/src/views/Demo.vue

<template>
  <h1>组件示例</h1>
  <tab :data="tabData" @select="select" />
  <!-- 图表 -->
  <el-scrollbar v-if="currTab == 1" style="height:85%;">
    <h2>图表</h2>

    <h2>07-08新增</h2>
    <h3>组合: 时间区域 area-bar-chart</h3>
    <area-bar-chart @areaClick="areaBarChartClick" :showLegend="true" />

    <h3>组合: 柱线图 multiple-bar-line-chart</h3>
    <multiple-bar-line-chart :height="'250px'" />

    <h3>散点图 normal-scatter-chart</h3>
    <normal-scatter-chart />

    <h2>07-07新增</h2>
    <h3>柱状图：multiple-y-line-chart</h3>
    <multiple-y-line-chart :height="'300px'" />

    <h2>old</h2>

    <h3>柱状图：horizontal-bar-chart</h3>
    <horizontal-bar-chart :height="'300px'" />

    <h3>柱状图：horizontal-bar-chart</h3>
    <hover-bar-chart :list="HoverBarChart" :height="'200px'" />

    <h3>柱状图：list-bar-chart-2</h3>
    <list-bar-chart-2 :list="ListBarChart" :height="'200px'" />

    <h3>柱状图：multiple-bar-chart</h3>
    <multiple-bar-chart :list="MultipleBarChart" :height="'200px'" />

    <h3>柱状图：multiple-hover-bar-chart</h3>
    <multiple-hover-bar-chart :height="'200px'" />

    <h3>柱状图：percent-bar</h3>
    <percent-bar />

    <h3>柱状图：single-bar-chart</h3>
    <single-bar-chart />

    <h3>柱状图：thermometer</h3>
    <thermometer />

    <h3>组合：bar-line-chart</h3>
    <bar-line-chart :height="'300px'" />

    <h3>组合：bar-line-chart</h3>
    <vertival-bar-line-chart :height="'300px'" />

    <h3>折线图：double-line-chart</h3>
    <double-line-chart :height="'200px'" />

    <h3>折线图：multiple-line-chart</h3>
    <multiple-line-chart :height="'200px'" />
    
    <h3>折线图：multi-arrow-line-chart</h3>
    <multi-arrow-line-chart :height="'200px'" />

    <h3>折线图：multiple-line-chart</h3>
    <normal-line-chart />

    <h3>折线图：simple-line-chart</h3>
    <simple-line-chart />

    <h3>折线图：table-line-chart</h3>
    <table-line-chart />

    <h3>饼图：dash-pie-chart</h3>
    <div style="width: 350px">
      <dash-pie-chart />
    </div>

    <h3>饼图：dual-pie-chart</h3>
    <div style="width: 350px">
      <dual-pie-chart />
    </div>

    <h3>饼图：normal-pie-chart</h3>
    <div style="width: 350px">
      <normal-pie-chart />
    </div>

    <h3>饼图：percent-pie-chart</h3>
    <div style="width: 350px">
      <percent-pie-chart />
    </div>

    <h3>饼图：direction-radar-chart</h3>
    <div style="height: 500px">
      <direction-radar-chart :height="'500px'" />
    </div>

    <h3>饼图：normal-radar-chart</h3>
    <div style="height: 500px">
      <normal-radar-chart :height="'500px'" />
    </div>

    <h3>饼图：normal-radar-chart</h3>
    <div style="height: 500px">
      <radar-chart :height="'500px'" />
    </div>
  </el-scrollbar>
  <!-- 组件 -->
  <el-scrollbar v-if="currTab == 2" style="height:85%;">
    <h3>panel</h3>
    <panel :title="'title 标题'">
      带标题title
    </panel>
    <br />
    <panel>
      无标题title
    </panel>

    <h3>panel-2</h3>
    <panel-2 :title="'panel -2'">
      panel 2
    </panel-2>

    <h3>panel-3</h3>
    <panel-3>
      panel-3
    </panel-3>

    <h3>toolbar-panel</h3>
    <toolbar-panel title="toolbar-panel">
      <template v-slot:tools>
        <div class="tools">
          <div class="tool-block">
            <div class="legend bg-green"></div>
            <div class="legend-text">实际电量</div>
          </div>
          <div class="tool-block">
            <div class="legend bg-orange"></div>
            <div class="legend-text">计划检修损失</div>
          </div>
          <div class="tool-block">
            <div class="legend bg-yellow"></div>
            <div class="legend-text">非计划检修损失</div>
          </div>
          <div class="tool-block">
            <div class="legend bg-red"></div>
            <div class="legend-text">限电损失</div>
          </div>
          <div class="tool-block">
            <div class="legend bg-purple"></div>
            <div class="legend-text">受累损失</div>
          </div>
          <div class="tool-block">
            <div class="legend bg-blue"></div>
            <div class="legend-text">性能损失</div>
          </div>
        </div>
      </template>
      <bar-line-chart :height="'calc(100vh - 200px)'" :color="barColor" />
    </toolbar-panel>

    <h3>btn-group-double</h3>
    <btn-group-double :btnGroups="btnGroups" @select="btnGroupDoubleSelect" />

    <h3>card-1</h3>
    <card-1 />

    <h3>percent-card</h3>
    <percent-card :value="25" :title="'标题'" />

    <h3>percent-card-2</h3>
    <percent-card-2 />

    <h3>collapse-list</h3>
    <div style="width:200px">
      <collapse-list />
    </div>

    <h3>list</h3>
    <div style="width:200px">
      <list />
    </div>
  </el-scrollbar>

  <el-scrollbar v-if="currTab == 3" style="height:85%;">
    <h2>07-09更新</h2>
    <h3>table-2</h3>
    <h3>组件说明:</h3>
    <p>与原组件使用方式基本相同 原table组件满足的情况下，不更换新组件也可以</p>
    <p>新table支持原table所有特性,优化了props及column, 支持更多功能</p>
    <p>现支持 文本省略及鼠标浮动显示</p>
    <p>* 原有template 及第三方标签实现方式更改 删除了column 中的 template、type及props</p>
    <h3>props说明:</h3>
    <p>height : string 高度 指定列表高度 自动判断是否显示滚动条, 不进行设置则为最大宽度且没有滚动条</p>
    <p>pageSize : number 分页个数 若不传 pagesize 不进行分页处理</p>
    <p>@onPagging : method 分页回调</p>
    <p>data : Object 数据源 { column: [] , data:[] , total: number }</p>
    <h3>column说明:</h3>
    <p>
      { name: "风机名称", field: "name", width:'', click:function(){ } ,sortable:fasle, slot:false, fixed:false, align:"center" }
    </p>
    <p>name : string 列名</p>
    <p>field : string 对应数据项 同时使用于具名插槽的name值</p>
    <p>width : 列宽 可自定与每列宽度 如果想设置横向滚动条 需手动设置列宽 满足各列宽度和大于屏幕宽度</p>
    <p>click : 点击事件 与原有table相同</p>
    <p>sortable : 排序</p>
    <p>slot: 开启插槽 为true时, 可在HTML中添加 插槽模板 添加自定义内容 为false时, 默认对应显示值, 示例参考代码中template </p>
    <p>fixed: 固定列</p>
    <p>align: 默认文本居中 left | center| right</p>
    <table-2 :data="tableData2" :height="'200px'" :pageSize="10" @onPagging="tableonPagging">
      <!-- v-slot:[field] 对应列嵌入自定义内容 包括第三方标签 -->
      <!-- 同时需要在 colum 中设置 slot:true  -->
      <!-- 如果只设置 slot:true 不写模板 列不存在内容 -->
      <!-- scope 内容 scope.column 传入的 col 值, scope.row 数据值 -->
      <template v-slot:lqf="scope"> {{ scope.column.name }}:{{ scope.row.lqf }} </template>
      <template v-slot:action="scope">
        <a style="cursor:pointer;color:green;margin-right:8px;" @click="tableAction(scope)"> 点击查看组件点击事件返回信息 </a>
        <a style="cursor:pointer;color:green;margin-right:8px;"> {{ scope.column.name }}2 </a>
        <a style="cursor:pointer;color:green;margin-right:8px;"> {{ scope.column.name }}3 </a>
      </template>
    </table-2>

    <h3>table</h3>
    <Table :data="tableData" :height="'200px'" :canScroll="true" :pageSize="40" :showHover="false" @onPagging="tableonPagging" />
    <h3>table</h3>
    <check-table :data="tableData" :height="'200px'" :canScroll="true" :pageSize="40" :showHover="false" @onPagging="tableonPagging" @check="CheckTableonCheck" />

    <h3>el-table</h3>
    <el-table :data="eltableData" max-height="200" stripe style="width: 100%" border="false">
      <el-table-column prop="date" label="日期" width="150"> </el-table-column>
      <el-table-column label="配送信息">
        <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
        <el-table-column label="地址">
          <el-table-column prop="province" label="省份" width="120"> </el-table-column>
          <el-table-column prop="city" label="市区" width="120"> </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </el-scrollbar>

  <el-scrollbar v-if="currTab == 4" style="height:85%;">
    <i class="svg-icon svg-icon-sm mg-r-16">
      <svg-icon :svgid="'svg-wind-site'" />
    </i>
    <i class="svg-icon svg-icon-green mg-r-16">
      <svg-icon :svgid="'svg-wind-site'" />
    </i>
    <i class="svg-icon svg-icon-lg svg-icon-red mg-r-16">
      <svg-icon :svgid="'svg-wind-site'" />
    </i>
  </el-scrollbar>
</template>

<script>
import horizontalBarChart from "../components/chart/bar/horizontal-bar-chart.vue";
import HoverBarChart from "../components/chart/bar/hover-bar-chart.vue";
import ListBarChart2 from "../components/chart/bar/list-bar-chart2.vue";
import MultipleBarChart from "../components/chart/bar/multiple-bar-chart.vue";
import MultipleHoverBarChart from "../components/chart/bar/multiple-hover-bar-chart.vue";
import PercentBar from "../components/chart/bar/percent-bar.vue";
import SingleBarChart from "../components/chart/bar/single-bar-chart.vue";
import Thermometer from "../components/chart/bar/thermometer.vue";
import AreaBarChart from "../components/chart/combination/area-bar-chart.vue";
import BarLineChart from "../components/chart/combination/bar-line-chart.vue";
import MultipleBarLineChart from "../components/chart/combination/multiple-bar-line-chart.vue";
import VertivalBarLineChart from "../components/chart/combination/vertival-bar-line-chart.vue";
import DoubleLineChart from "../components/chart/line/double-line-chart.vue";
import MultipleLineChart from "../components/chart/line/multiple-line-chart.vue";
import MultipleYLineChart from "../components/chart/line/multiple-y-line-chart.vue";
import NormalLineChart from "../components/chart/line/normal-line-chart.vue";
import SimpleLineChart from "../components/chart/line/simple-line-chart.vue";
import TableLineChart from "../components/chart/line/table-line-chart.vue";
import DashPieChart from "../components/chart/pie/dash-pie-chart.vue";
import DualPieChart from "../components/chart/pie/dual-pie-chart.vue";
import NormalPieChart from "../components/chart/pie/normal-pie-chart.vue";
import PercentPieChart from "../components/chart/pie/percent-pie-chart.vue";
import DirectionRadarChart from "../components/chart/radar/direction-radar-chart.vue";
import NormalRadarChart from "../components/chart/radar/normal-radar-chart.vue";
import RadarChart from "../components/chart/radar/radar-chart.vue";
import NormalScatterChart from "../components/chart/scatter/normal-scatter-chart.vue";
import BtnGroupDouble from "../components/coms/btn/btn-group-double.vue";
import Card1 from "../components/coms/cards/card-1.vue";
import PercentCard2 from "../components/coms/cards/percent-card-2.vue";
import PercentCard from "../components/coms/cards/percent-card.vue";
import CollapseList from "../components/coms/collapse/collapse-list.vue";
import SvgIcon from "../components/coms/icon/svg-icon.vue";
import List from "../components/coms/list/list.vue";
import Panel from "../components/coms/panel/panel.vue";
import Panel2 from "../components/coms/panel/panel2.vue";
import Panel3 from "../components/coms/panel/panel3.vue";
import ToolbarPanel from "../components/coms/panel/toolbar-panel.vue";
import CheckTable from "../components/coms/table/check-table.vue";
import Table from "../components/coms/table/table.vue";
import Table2 from "../components/coms/table/table2.vue";
import Tab from "../components/coms/tabs/tab.vue";
import multiArrowLineChart from "../components/chart/line/multi-arrow-line-chart.vue";

export default {
  components: {
    horizontalBarChart,
    HoverBarChart,
    ListBarChart2,
    MultipleBarChart,
    MultipleHoverBarChart,
    PercentBar,
    SingleBarChart,
    Thermometer,
    BarLineChart,
    VertivalBarLineChart,
    DoubleLineChart,
    MultipleLineChart,
    NormalLineChart,
    SimpleLineChart,
    TableLineChart,
    DashPieChart,
    DualPieChart,
    NormalPieChart,
    PercentPieChart,
    DirectionRadarChart,
    NormalRadarChart,
    RadarChart,
    Tab,
    BtnGroupDouble,
    Card1,
    PercentCard,
    PercentCard2,
    CollapseList,
    List,
    Panel,
    Panel2,
    Panel3,
    ToolbarPanel,
    Table,
    CheckTable,
    SvgIcon,
    MultipleYLineChart,
    NormalScatterChart,
    AreaBarChart,
    MultipleBarLineChart,
    Table2,
    multiArrowLineChart
  },
  methods: {
    select(data) {
      // console.log(data);
      this.currTab = parseInt(data.id);
    },
    btnGroupDoubleSelect(param) {
      console.log("btn-group-double");
      console.log(param);
    },
    tableonPagging(param) {
      console.log("table pagging event");
      console.log(param);
      this.tableData.data = [
        {
          index: 1,
          name: "MG01-01",
          lqf: "0.1000",
          yggl: "0.1000",
          yyy: "0.10",
          pcspp: "0.1000",
          u1: "0.1000",
          u2: "0.1000",
          v1: "0.1000",
          v2: "0.1000",
          w1: "0.1000",
          w2: "0.1000",
          zca: "0.1000",
          zcb: "0.1000",
          clx: "0.1000",
          clx1: "0.1000",
          clx2: "0.1000",
          jc: "0.1000",
          hh: "0.1000",
          hj: "0.1000",
          is_light: false,
        },
      ];
      let index = 0;
      for (let i = param.start; i < param.end; i++) {
        this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
        this.tableData.data[index].index = i + 1;
        index++;
      }
    },
    CheckTableonCheck(param) {
      console.log("table check event");
      console.log(param);
    },
    areaBarChartClick(param) {
      console.log(param);
    },
    tableAction(param) {
      console.log(param);
    },
  },
  data() {
    return {
      currTab: 1,
      tabData: [
        {
          id: "1",
          text: "图表",
        },
        {
          id: "2",
          text: "组件",
        },
        {
          id: "3",
          text: "表格",
        },
        {
          id: "4",
          text: "图标",
        },
      ],
      tableData: {
        column: [
          {
            name: "",
            field: "index",
            width: "50px",
            is_num: false,
            is_light: false,
          },
          {
            name: "名称",
            field: "name",
            is_num: false,
            is_light: false,
            click: function(event, data) {
              console.log(event);
              console.log(data);
            },
          },
          {
            name: "理论发电量",
            field: "lqf",
            is_num: false,
            is_light: false,
            slot: true,
          },
          {
            name: "SCADA发电量",
            field: "yggl",
            is_num: false,
            is_light: false,
          },
          {
            name: "风速",
            field: "yyy",
            is_num: false,
            is_light: false,
          },
          {
            name: "非计划检修",
            field: "pcspp",
            is_num: false,
            is_light: false,
          },
          {
            name: "计划检修",
            field: "u1",
            is_num: false,
            is_light: false,
          },
          {
            name: "受累",
            field: "u2",
            is_num: false,
            is_light: true,
          },
          {
            name: "限电",
            field: "v1",
            is_num: false,
            is_light: false,
          },
          {
            name: "性能",
            field: "v2",
            is_num: false,
            is_light: false,
          },
          {
            name: "风能率用率%",
            field: "w1",
            is_num: false,
            is_light: false,
          },
        ],
        data: [
          {
            index: 1,
            name: "MG01-01",
            lqf: "0.1000",
            yggl: "0.1000",
            yyy: "0.10",
            pcspp: "0.1000",
            u1: "0.1000",
            u2: "0.1000",
            v1: "0.1000",
            v2: "0.1000",
            w1: "0.1000",
            w2: "0.1000",
            zca: "0.1000",
            zcb: "0.1000",
            clx: "0.1000",
            clx1: "0.1000",
            clx2: "0.1000",
            jc: "0.1000",
            hh: "0.1000",
            hj: "0.1000",
            is_light: false,
          },
        ],
        total: 100,
      },
      tableData2: {
        column: [
          {
            name: "",
            field: "index",
            width: 50,
            sortable: true,
          },
          {
            name: "名称",
            field: "name",
            width: 200,
            click: function(event, data) {
              console.log(event);
              console.log(data);
            },
            align: "left",
            resizable: true,
          },
          {
            name: "理论发电量",
            width: 200,
            field: "lqf",
            slot: true,
          },
          {
            width: 200,
            name: "SCADA发电量",
            field: "yggl",
          },
          {
            name: "风速",
            width: 80,
            field: "yyy",
            sortable: true,
            align: "right",
          },
          {
            name: "非计划检修",
            field: "pcspp",
            width: 200,
          },
          {
            name: "计划检修",
            width: 200,
            field: "u1",
          },
          {
            name: "受累",
            width: 200,
            field: "u2",
          },
          {
            name: "限电",
            field: "v1",
            width: 200,
          },
          {
            name: "性能",
            width: 200,
            field: "v2",
          },
          {
            name: "风能率用率%",
            width: 200,
            field: "w1",
          },
          {
            name: "操作",
            field: "action",
            width: 400,
            slot: true,
          },
        ],
        data: [
          {
            index: 1,
            name: "MG01-01",
            lqf: "0.1000",
            yggl: "0.1000",
            yyy: "0.10",
            pcspp: "0.1000",
            u1: "0.1000",
            u2: "0.1000",
            v1: "0.1000",
            v2: "0.1000",
            w1: "0.1000",
            w2: "0.1000",
            zca: "0.1000",
            zcb: "0.1000",
            clx: "0.1000",
            clx1: "0.1000",
            clx2: "0.1000",
            jc: "0.1000",
            hh: "0.1000",
            hj: "0.1000",
            is_light: false,
          },
        ],
        total: 100,
      },
      // 柱状图：horizontal-bar-chart data
      HorizontalBarChart: {
        area: ["新荣区", "平城区", "云冈区", "云州区", "阳高县", "天镇县", "广灵县", "浑源县", "左云县"],
        legend: ["因病", "因残", "因学", "因灾", "缺土地", "缺水"],
        data: [
          [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
          [320, 302, 301, 334, 390, 330, 320, 100, 50],
          [320, 302, 301, 334, 390, 330, 320, 100, 50],
          [320, 302, 301, 334, 390, 330, 320, 100, 50],
          [320, 302, 301, 334, 390, 330, 320, 100, 50],
          [320, 302, 301, 334, 390, 330, 320, 100, 50],
        ],
      },
      // 柱状图：horizontal-bar-chart data
      HoverBarChart: [
        {
          text: "1",
          value: 1,
        },
        {
          text: "2",
          value: 2,
        },
        {
          text: "3",
          value: 1,
        },
        {
          text: "4",
          value: 3,
        },
        {
          text: "5",
          value: 3,
        },
        {
          text: "6",
          value: 3,
        },
        {
          text: "7",
          value: 3,
        },
        {
          text: "8",
          value: 3,
        },
        {
          text: "9",
          value: 3,
        },
        {
          text: "10",
          value: 3,
        },
        {
          text: "11",
          value: 3,
        },
        {
          text: "12",
          value: 3,
        },
        {
          text: "13",
          value: 3,
        },
        {
          text: "14",
          value: 3,
        },
        {
          text: "15",
          value: 3,
        },
        {
          text: "16",
          value: 3,
        },
        {
          text: "17",
          value: 3,
        },
        {
          text: "18",
          value: 3,
        },
        {
          text: "19",
          value: 3,
        },
        {
          text: "20",
          value: 3,
        },
        {
          text: "21",
          value: 3,
        },
        {
          text: "22",
          value: 3,
        },
        {
          text: "23",
          value: 3,
        },
        {
          text: "24",
          value: 3,
        },
        {
          text: "25",
          value: 3,
        },
        {
          text: "26",
          value: 3,
        },
        {
          text: "27",
          value: 3,
        },
        {
          text: "28",
          value: 3,
        },
        {
          text: "29",
          value: 3,
        },
        {
          text: "30",
          value: 3,
        },
        {
          text: "31",
          value: 3,
        },
      ],
      // list-bar-chart-2 data
      ListBarChart: [
        {
          name: "当日预测电量",
          value: 103.62,
          total: 150,
        },
        {
          name: "实际发电量",
          value: 98.62,
          total: 100,
        },
        {
          name: "当月预测电量",
          value: 113.27,
          total: 150,
        },
        {
          name: "实际发电量",
          value: 136.72,
          total: 150,
        },
      ],
      // multiple-bar-chart data
      MultipleBarChart: [
        {
          title: "日发电量",
          yAxisIndex: 0,
          value: [
            {
              text: "1日",
              value: 1,
            },
            {
              text: "2日",
              value: 2,
            },
            {
              text: "3日",
              value: 1,
            },
            {
              text: "4日",
              value: 3,
            },
            {
              text: "5日",
              value: 3,
            },
            {
              text: "6日",
              value: 3,
            },
            {
              text: "7日",
              value: 3,
            },
          ],
        },
        {
          title: "上网电量",
          yAxisIndex: 0,
          value: [
            {
              text: "1日",
              value: 1,
            },
            {
              text: "2日",
              value: 2,
            },
            {
              text: "3日",
              value: 1,
            },
            {
              text: "4日",
              value: 3,
            },
            {
              text: "5日",
              value: 3,
            },
            {
              text: "6日",
              value: 3,
            },
            {
              text: "7日",
              value: 3,
            },
          ],
        },
        {
          title: "购网电量",
          yAxisIndex: 0,
          value: [
            {
              text: "1日",
              value: 1,
            },
            {
              text: "2日",
              value: 2,
            },
            {
              text: "3日",
              value: 1,
            },
            {
              text: "4日",
              value: 3,
            },
            {
              text: "5日",
              value: 3,
            },
            {
              text: "6日",
              value: 3,
            },
            {
              text: "7日",
              value: 3,
            },
          ],
        },
        {
          title: "风速",
          yAxisIndex: 1,
          value: [
            {
              text: "1日",
              value: 1,
            },
            {
              text: "2日",
              value: 2,
            },
            {
              text: "3日",
              value: 1,
            },
            {
              text: "4日",
              value: 3,
            },
            {
              text: "5日",
              value: 3,
            },
            {
              text: "6日",
              value: 3,
            },
            {
              text: "7日",
              value: 3,
            },
          ],
        },
      ],
      // btnGroups
      btnGroups: [
        {
          icon: "fa fa-fire",
          btns: [
            {
              text: "某某风场",
              code: "mmfdc1",
            },
            {
              text: "某某风场",
              code: "mhsfc",
            },
            {
              text: "某某风场",
              code: "mmfdc2",
            },
            {
              text: "某某风场",
              code: "mmfdc3",
            },
            {
              text: "某某风场",
              code: "mmfdc4",
            },
          ],
        },
        {
          icon: "fa fa-fire-extinguisher",
          btns: [
            {
              text: "某某风场",
              code: "mmgf1",
            },
            {
              text: "某某风场",
              code: "mmgf2",
            },
            {
              text: "某某风场",
              code: "mmgf3",
            },
            {
              text: "某某风场",
              code: "mmgf4",
            },
          ],
        },
      ],
      eltableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
    };
  },
  created() {
    for (let i = 1; i < 21; i++) {
      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
      this.tableData.data[i].index = i + 1;

      this.tableData2.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
      this.tableData2.data[i].index = i + 1;
      this.tableData2.data[i].yyy = i * 0.01 * Math.random();
    }
  },
};
</script>

<style lang="less" scoped>
.tools {
  display: flex;
  line-height: 3.4259vh;

  .tool-block {
    display: flex;
    align-items: center;
    margin-left: 0.741vh;

    .legend {
      flex: auto;
      width: 0.741vh;
      height: 0.741vh;
      margin-right: 0.741vh;

      &.long {
        width: 2.963vh;
        height: 0.37vh;
      }
    }

    .legend-text {
      color: @gray-l;
      font-size: @fontsize-s;
    }
  }
}
</style>