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>折线图：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%;">
    <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" />
  </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 Tab from "../components/coms/tabs/tab.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,
  },
  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);
    },
  },
  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,
          },
          {
            name: "理论发电量",
            field: "lqf",
            is_num: false,
            is_light: false,
          },
          {
            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,
      },
      // 柱状图：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",
            },
          ],
        },
      ],
    };
  },
  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;
    }
  },
};
</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>