Jelajahi Sumber

尝试迁移

九山 4 tahun lalu
induk
melakukan
32c6212a02

+ 25 - 0
src/assets/css/benchmarkingSys/yardBenchmark.scss

@@ -0,0 +1,25 @@
+
+
+.bg-purple-dark {
+  background: #fff;
+}
+
+.grid-content {
+  border-radius: 2px;
+  min-height: 36px;
+  margin-top: -15px;
+}
+/deep/::-webkit-scrollbar {
+  z-index: 99999999;
+  width: 6px;
+  height: 13px !important;
+  background-color: #f5f5f5;
+}
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+
+.el-row {
+  margin: 10px;
+}

+ 502 - 0
src/assets/js/benchmarkingSys/yardBenchmark.js

@@ -0,0 +1,502 @@
+
+import * as echarts from "echarts";
+// import formateDate from "@/utils/date";
+// import formateDate1 from "@/utils/date_1";
+export default {
+  data() {
+    return {
+      FClist: {
+        name: "",
+        id: "",
+      },
+      fdcName1: "",
+      fdcName2: "",
+      date1: "2021-01-01",
+      date2: "2020-01-03",
+      wp_n_1: {},
+      wp_n_2: {},
+      selectrowdate: {},
+      histogram: {
+        date: [],
+        xdss: [],
+        gzss: [],
+        jxss: [],
+        xnss: [],
+        slss: [],
+      },
+      wpId: [],
+      wpName: [],
+      lineDataOption: [],
+      beginDate: "2021-01-01",
+      endDate: "2021-01-03",
+      fc: "",
+      tableData: [],
+      dialogTableVisible: false,
+      getChartDataValue: [],
+      getChartDataValue2: [],
+      getTableData: [],
+    };
+  },
+  methods: {
+    dialog() {
+      this.dialogTableVisible = true;
+      this.check_wpid();
+      this.$nextTick(function () {
+        this.drawleidatu();
+        this.drawhistogram_n();
+      });
+    },
+    headStyle() {
+      return "text-align:left";
+    },
+    check_wpid() {
+      this.wp_n_1 = "";
+      this.wp_n_2 = "";
+      this.fdcName1 = "";
+      this.fdcName2 = "";
+      this.getChartDataValue = [];
+      this.getChartDataValue2 = [];
+      this.getTableData = [];
+      if (Object.keys(this.selectrowdate).length != 2) {
+        this.alert_jg();
+        return;
+      } else {
+        this.wp_n_1 = this.selectrowdate[0];
+        this.wp_n_2 = this.selectrowdate[1];
+        this.fdcName1 = this.wp_n_1.wpId;
+        this.fdcName2 = this.wp_n_2.wpId;
+        this.getChartDataValue.push(
+          this.wp_n_1.fnlyl,
+          this.wp_n_1.gzssl,
+          this.wp_n_1.jxssl,
+          this.wp_n_1.qfl,
+          this.wp_n_1.xnssl,
+          this.wp_n_1.slssl,
+          this.wp_n_1.fwjsl,
+          this.wp_n_1.ztzhl,
+          this.wp_n_1.xqjsl
+        );
+        this.getChartDataValue2.push(
+          this.wp_n_2.fnlyl,
+          this.wp_n_2.gzssl,
+          this.wp_n_2.jxssl,
+          this.wp_n_2.qfl,
+          this.wp_n_2.xnssl,
+          this.wp_n_2.slssl,
+          this.wp_n_2.fwjsl,
+          this.wp_n_2.ztzhl,
+          this.wp_n_2.xqjsl
+        );
+        this.getTableData.push({
+          index: "发电量",
+          data1: this.wp_n_1.scadafdl,
+          data2: this.wp_n_2.scadafdl,
+        });
+        this.getTableData.push({
+          index: "故障损失电量",
+          data1: this.wp_n_1.gzss,
+          data2: this.wp_n_2.gzss,
+        });
+        this.getTableData.push({
+          index: "检修损失电量",
+          data1: this.wp_n_1.jxssl,
+          data2: this.wp_n_2.jxssl,
+        });
+        this.getTableData.push({
+          index: "性能未达标损失电量",
+          data1: this.wp_n_1.xnsslfraction,
+          data2: this.wp_n_2.xnsslfraction,
+        });
+        this.getTableData.push({
+          index: "受累损失电量",
+          data1: this.wp_n_1.slss,
+          data2: this.wp_n_2.slss,
+        });
+        this.getTableData.push({
+          index: "风能利用率",
+          data1: this.wp_n_1.fnlyl,
+          data2: this.wp_n_2.fnlyl,
+        });
+        this.getTableData.push({
+          index: "故障损失率",
+          data1: this.wp_n_1.gzssl,
+          data2: this.wp_n_2.gzssl,
+        });
+        this.getTableData.push({
+          index: "检修损失率",
+          data1: this.wp_n_1.jxssl,
+          data2: this.wp_n_2.jxssl,
+        });
+        this.getTableData.push({
+          index: "弃风率",
+          data1: this.wp_n_1.qfl,
+          data2: this.wp_n_2.qfl,
+        });
+        this.getTableData.push({
+          index: "性能损失率",
+          data1: this.wp_n_1.xnssl,
+          data2: this.wp_n_2.xnssl,
+        });
+        this.getTableData.push({
+          index: "受累损失率",
+          data1: this.wp_n_1.slssl,
+          data2: this.wp_n_2.slssl,
+        });
+        this.getTableData.push({
+          index: "复位及时率",
+          data1: this.wp_n_1.fwjsl,
+          data2: this.wp_n_2.fwjsl,
+        });
+        this.getTableData.push({
+          index: "消缺及时率",
+          data1: this.wp_n_1.xqjsl,
+          data2: this.wp_n_2.xqjsl,
+        });
+        this.getTableData.push({
+          index: "状态转换率",
+          data1: this.wp_n_1.ztzhjsl,
+          data2: this.wp_n_2.ztzhjsl,
+        });
+      }
+    },
+    changeFun(val) {
+      this.selectrowdate = val;
+    },
+    query_fc() {
+       var newData = new Date();
+       this.beginDate = this.BASE.getBzDate(newData.getTime(), -1);
+       this.endDate = this.BASE.getBzDate(newData.getTime(), 0);
+      this.$http.get("powercompare/windfarmAjax?").then((res) => {
+        this.FClist = res.data.data;
+      });
+    },
+    alert_jg() {
+      this.$message({
+        message: "只能选择两条数据",
+        type: "warning",
+      });
+      return;
+    },
+    handleEdit(a, b) {
+      this.wpId = [];
+      this.lineDataOption = [];
+      if (this.selectrowdate.length == 2) {
+        for (let i = 0; i < this.selectrowdate.length; i++) {
+          this.wpId.push(this.selectrowdate[i].wpId);
+          this.wpName.push(this.selectrowdate[i].wpName);
+          this.lineDataOption.push({
+            id: this.selectrowdate[i].wpId,
+            name: this.selectrowdate[i].wpName,
+          });
+        }
+        this.$router.push({
+          path: "/YardBenchmark_particulars",
+          query: {
+            wpId: this.wpId,
+            beginDate: this.beginDate,
+            endDate: this.endDate,
+            wpName: this.wpName,
+            select: this.lineDataOption,
+          },
+        });
+      } else {
+        this.lineDataOption.push({ id: b.wpId, name: b.wpName });
+        this.$router.push({
+          path: "/YardBenchmark_particulars",
+          query: {
+            wpId: b.wpId,
+            beginDate: this.beginDate,
+            endDate: this.endDate,
+            wpName: b.wpName,
+            select: this.lineDataOption,
+          },
+        });
+      }
+    },
+    query_benchmarkWpList() {
+      Object.assign(this.$data.histogram, this.$options.data().histogram);
+      let that = this;
+      var page = new URLSearchParams();
+      page.append("wpId", this.fc);
+      page.append("beginDate", this.beginDate);
+      page.append("endDate", this.endDate);
+      this.$http.post("/contrast/benchmarkWpList", page).then((res) => {
+        this.tableData = res.data.data;
+        let len = this.tableData.length;
+        for (let i = 0; i < len; i++) {
+          // that.histogram.date[i] = formateDate(
+          //   new Date(res.data.data[i].recordDate) / 1000
+          // );
+          
+            that.histogram.xdss[i] = res.data.data[i].xdss;
+          
+
+          
+            that.histogram.gzss[i] = res.data.data[i].gzss;
+          
+
+          
+            that.histogram.jxss[i] = res.data.data[i].whss;
+         
+            that.histogram.xnss[i] = res.data.data[i].qfss;
+          
+            that.histogram.slss[i] = res.data.data[i].slss;
+          
+        }
+
+        this.drawhistogram();
+      });
+    },
+    filter_date(cellValue) {
+      let date = new Date(cellValue.recordDate);
+
+      // return formateDate(date / 1000);
+    },
+    drawleidatu() {
+      var chartDom = document.getElementById("leidatu");
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: "对标排名分析",
+          left: 400,
+          top: -5,
+          textStyle: {
+            fontSize: 13,
+          },
+        },
+        grid: {
+          top: "10%",
+          left: "10%",
+          right: "10%",
+          bottom: "0",
+        },
+        tooltip: {},
+        legend: {
+          orient: "vertical",
+          x: "left", //可设定图例在左、右、居中
+          y: "0", //可设定图例在上、下、居中
+          padding: [0, 50, 0, 0],
+        },
+        radar: {
+          // shape: 'circle',
+          name: {
+            textStyle: {
+              color: "#fff",
+              backgroundColor: "#999",
+              borderRadius: 3,
+              padding: [3, 5],
+            },
+          },
+          indicator: [
+            { name: "风能利用率", max: 100 },
+            { name: "故障损失率", max: 100 },
+            { name: "检修损失率", max: 100 },
+            { name: "弃风率", max: 100 },
+            { name: "性能损失率", max: 100 },
+            { name: "受累损失率", max: 100 },
+            { name: "复位及时率", max: 100 },
+            { name: "状态转换率", max: 100 },
+            { name: "消缺及时率", max: 100 },
+          ],
+        },
+        series: [
+          {
+            name: "预算 vs 开销(Budget vs spending)",
+            type: "radar",
+            // areaStyle: {normal: {}},
+            data: [
+              {
+                value: this.getChartDataValue,
+                name: formateDate(new Date(this.wp_n_1.recordDate) / 1000),
+              },
+              {
+                value: this.getChartDataValue2,
+                name: formateDate(new Date(this.wp_n_2.recordDate) / 1000),
+              },
+            ],
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+    drawhistogram_n() {
+      var chartDom = document.getElementById("histogram_n");
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        title: {
+          text: "损失电量分析",
+          left: 100,
+          top: 8,
+          textStyle: {
+            fontSize: 13,
+          },
+        },
+        grid: {
+          top: "90",
+          left: "10%",
+          right: "10%",
+          bottom: "30",
+        },
+        legend: {
+          orient: "vertical",
+          x: "right", //可设定图例在左、右、居中
+          y: 0, //可设定图例在上、下、居中
+          padding: [0, 50, 200, 0],
+          data: [
+            "限电损失电量(单位:万kwh)",
+            "故障损失电量(单位:万kwh)",
+            "检修损失电量(单位:万kwh)",
+            "性能损失电量(单位:万kwh)",
+            "受累损失电量(单位:万kwh)",
+          ],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [
+              formateDate(new Date(this.wp_n_1.recordDate) / 1000),
+              formateDate(new Date(this.wp_n_2.recordDate) / 1000),
+            ],
+            axisPointer: {
+              type: "shadow",
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "电量",
+
+            interval: 50,
+            axisLabel: {
+              formatter: "{value} 万kw",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "限电损失电量(单位:万kwh)",
+            type: "bar",
+            yAxisIndex: 0,
+            data: [this.wp_n_1.xdss, this.wp_n_2.xdss],
+          },
+          {
+            name: "故障损失电量(单位:万kwh)",
+            type: "bar",
+            yAxisIndex: 0,
+            data: [this.wp_n_1.zzss, this.wp_n_2.gzss],
+          },
+          {
+            name: "检修损失电量(单位:万kwh)",
+            type: "bar",
+            yAxisIndex: 0,
+            data: [this.wp_n_1.jxss, this.wp_n_2.jxss],
+          },
+          {
+            name: "性能损失电量(单位:万kwh)",
+            type: "bar",
+            yAxisIndex: 0,
+            data: [this.wp_n_1.xnss, this.wp_n_2.xnss],
+          },
+          {
+            name: "受累损失电量(单位:万kwh)",
+            type: "bar",
+            yAxisIndex: 0,
+            data: [this.wp_n_1.slss, this.wp_n_2.slss],
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+    drawhistogram() {
+      var app = {};
+      var chartDom = document.getElementById("histogram");
+
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: "损失电量分析",
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {
+          data: [
+            "限电损失电量(单位:万kwh)",
+            "故障损失电量(单位:万kwh)",
+            "检修损失电量(单位:万kwh)",
+            "性能损失电量(单位:万kwh)",
+            "受累损失电量(单位:万kwh)",
+          ],
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        yAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+        },
+        xAxis: {
+          type: "category",
+          data: this.histogram.date,
+        },
+        series: [
+          {
+            name: "限电损失电量(单位:万kwh)",
+            type: "bar",
+            data: this.histogram.xdss,
+          },
+          {
+            name: "故障损失电量(单位:万kwh)",
+            type: "bar",
+            data: this.histogram.gzss,
+          },
+          ,
+          {
+            name: "检修损失电量(单位:万kwh)",
+            type: "bar",
+            data: this.histogram.jxss,
+          },
+          {
+            name: "性能损失电量(单位:万kwh)",
+            type: "bar",
+            data: this.histogram.xnss,
+          },
+          {
+            name: "受累损失电量(单位:万kwh)",
+            type: "bar",
+            data: this.histogram.slss,
+          },
+        ],
+      };
+      option && myChart.setOption(option);
+    },
+  },
+  mounted() {
+    this.query_fc();
+    // this.query_benchmarkWpList();
+  },
+};

+ 13 - 1
src/jsonData/menu.json

@@ -70,7 +70,19 @@
     {
       "name": "对标管理",
       "url": "/",
-      "children": []
+      "children": [
+        {
+          "name": "场际对标",
+          "url": "/a",
+          "children": [
+            {
+              "name": "场内对标",
+              "url": "/yardBenchmark",
+              "children": []
+            }
+          ]
+        }
+      ]
     },
     {
       "name": "健康管理",

+ 3 - 3
src/router/zm.js

@@ -1,6 +1,6 @@
 export default [
-  { // 路由页面注释
-    path:'/a',
-    component: r => require.ensure([], () => r(require('@views/module1/a')), 'sysManage2')
+  { // 对标管理
+    path:'/yardBenchmark',
+    component: r => require.ensure([], () => r(require('@views/benchmarkingSys/yardBenchmark')), 'benchmarkingSys')
   },
 ]

+ 18 - 0
src/tools/base.js

@@ -1,9 +1,26 @@
 import crypto from "crypto";
+
 //个位数字补零
 export function numberB0(n) {
   return n < 10 ? "0" + n : n;
 }
 
+// 
+//
+/**
+ * 通过传入的时间戳获取所需的一个标准格式的日期
+ * 参数:
+ * time,时间戳
+ * tag,0,今天;1,明天,-1,昨天
+ * 返回:1999-01-10
+ */
+export function getBzDate(time, tag) {
+  let dateTime = new Date(time).getTime() + 3600*1000*24*tag;
+  let newDate = new Date(dateTime);
+
+  return newDate.getFullYear() + "-" + numberB0((newDate.getMonth() + 1)) + "-" + numberB0(newDate.getDate());
+}
+
 /**
  * 传入[开始日期, 结束日期]
  * 返回格式[2020-10-01 00:00:00, 2020-10-01 23:59:59]
@@ -124,6 +141,7 @@ export function getMd5(data) {
 }
 
 export default {
+  getBzDate,
   getMd5,
   cascaderBugRepair,
   getNewNum,

+ 345 - 0
src/views/benchmarkingSys/yardBenchmark.vue

@@ -0,0 +1,345 @@
+<template>
+  <el-container>
+    <el-header>
+      <el-card style="margin-top: -10px">
+        <el-row :gutter="1">
+          <el-form :inline="true" class="demo-form-inline">
+            <el-form-item label="风场">
+              <el-select
+                v-model="fc"
+                clearable
+                placeholder="请选择"
+                @change="query_fc()"
+              >
+                <el-option
+                  v-for="item in FClist"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="开始时间">
+              <el-date-picker
+                v-model="beginDate"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="结束时间">
+              <el-date-picker
+                value-format="yyyy-MM-dd"
+                v-model="endDate"
+                type="date"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button
+                type="primary"
+                @click="query_benchmarkWpList"
+                :plain="true"
+                >查询</el-button
+              >
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="dialog()" :plain="true"
+                >对标分析</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </el-row>
+      </el-card>
+
+      <el-dialog
+        title="对标信息分析"
+        :visible.sync="dialogTableVisible"
+        width="65%"
+      >
+        <el-row>
+          <el-col :span="12">
+            <div id="leidatu" style="width: 600px; height: 350px"></div>
+            <div id="histogram_n" style="width: 600px; height: 350px"></div>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="getTableData">
+              <el-table-column prop="index" label="指标"> </el-table-column>
+              <el-table-column prop="data1" :label="fdcName1">
+              </el-table-column>
+              <el-table-column prop="data2" :label="fdcName2">
+              </el-table-column>
+            </el-table>
+          </el-col>
+        </el-row>
+      </el-dialog>
+    </el-header>
+    <el-main>
+      <el-card style="margin-top: 20px; height: 400px">
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          style="width: 100%"
+          :cell-style="{ textAlign: 'center' }"
+          :header-cell-style="headStyle"
+          border
+          max-height="370px"
+          height="370px"
+          @selection-change="changeFun"
+        >
+          >
+          <!-- <el-table-column label="场内对标列表"> -->
+          <el-table-column type="index" width="50"> </el-table-column>
+          <el-table-column
+            type="selection"
+            class="selection"
+            @selection-change="changeFun"
+            width="50"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="ordernum"
+            label="综合排名"
+            width="120"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            :formatter="filter_date"
+            prop="recordDate"
+            label="日期"
+            value-format="yyyy-MM-dd"
+            width="120"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="scadafdlnum"
+            label="发电量排名"
+            width="120"
+          >
+          </el-table-column>
+          <el-table-column sortable prop="fdl" label="发电量" width="120">
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="gzssnum"
+            label="故障损失排名"
+            width="139"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="gzss"
+            label="故障损失电量"
+            width="130"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="whssnum"
+            label="检修损失排名"
+            width="139"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="whss"
+            label="检修损失电量"
+            width="130"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="qfssnum"
+            label="性能损失排名"
+            width="139"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="qfss"
+            label="性能损失电量"
+            width="130"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="xdssnum"
+            label="限电损失排名"
+            width="130"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="xdss"
+            label="限电损失电量"
+            width="130"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="slssnum"
+            label="受累损失排名"
+            width="130"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="slss"
+            label="受累损失电量"
+            width="130"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="fnlylnum"
+            label="风能利用率排名"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="fnlyl"
+            label="风能利用率(%)"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="gzsslnum"
+            label="故障损失率排名"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="gzssl"
+            label="故障损失率(%)"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="jxsslnum"
+            label="检修损失率排名"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="jxssl"
+            label="检修损失率(%)"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="qflnum"
+            label="弃风率排名"
+            width="130"
+          >
+          </el-table-column>
+          <el-table-column sortable prop="qfl" label="弃风率(%)" width="130">
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="xnsslnum"
+            label="性能损失率排名"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="xnssl"
+            label="性能损失率(%)"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="slsslnum"
+            label="受累损失率排名"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="slssl"
+            label="受累损失率(%)"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="fwjslnum"
+            label="复位及时率排名"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="fwjsl"
+            label="复位及时率(%)"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="ztzhjslnum"
+            label="状态转换率排名"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="ztzhjsl"
+            label="状态转换率(%)"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" width="100">
+            <template slot-scope="scope">
+              <el-button
+                size="medium"
+                type="text"
+                @click="handleEdit(scope.$index, scope.row)"
+                >详情</el-button
+              >
+            </template>
+          </el-table-column>
+          <!-- </el-table-column> -->
+        </el-table>
+      </el-card>
+
+      <el-row
+        style="
+          width: 96%;
+          height: 333px;
+          display: flex;
+          justify-content: space-between;
+        "
+      >
+        <div id="histogram" style="width: 80%; height: 300px"></div>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import yardBenchmark from "@assets/js/benchmarkingSys/yardBenchmark";
+export default yardBenchmark;
+</script>
+
+<style lang="scss" scoped>
+// @import "@assets/css/benchmarkingSys/yardBenchmark.scss";
+</style>