sis_zhfx/src/views/About.vue

<template>
  <div class="about">
    <template v-if="false">
      <h1 @click="showDialog">This is an about page</h1>
      <HealthReport
        :show="show"
        :params="{ wtId: 'QG01_11', recorddate: '2021-06-19' }"
        @closed="
          (res) => {
            this.show = false;
          }
        "
      />
      <div class="fjBox1">
        <!-- 风机 SVG 使用方法 -->
        <FJ id="fj-1" speed="5s" color="red" width="43px" height="46px" />
        <FJ :speed="0.1" color="#1890ff" width="200px" height="210px" />
        <FJ id="fj-3" speed="2s" width="80px" height="82px" />
        <FJ />
        <FJ :speed="1" />
        <clock style="display: inline-block" />
      </div>
      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        border
        style="width: 100%"
      >
        <el-table-column prop="name" label="部件" />
        <el-table-column
          prop="amount1"
          sortable
          label="隐患类新"
        ></el-table-column>
        <el-table-column
          prop="amount2"
          sortable
          label="频次1"
        ></el-table-column>
        <el-table-column
          prop="amount2"
          sortable
          label="频次2"
        ></el-table-column>
        <el-table-column
          prop="amount2"
          sortable
          label="频次3"
        ></el-table-column>
        <el-table-column
          prop="amount2"
          sortable
          label="频次4"
        ></el-table-column>
      </el-table>
      <!-- <list-bar-chart /> -->
    </template>
    <cesium />
    <!-- <currentScatterChart
      width="100%"
      height="600px"
      chartTitle="可框选折线散点图"
      :xAxisData="xAxisData"
      :yAxisData="{ splitLine: { show: false } }"
      :seriesData="seriesData"
      :showLegend="true"
      :brushSelected="true"
      @getSelected="getSelected"
    /> -->
  </div>
</template>

<script>
import ListBarChart from "../components/chart/bar/list-bar-chart.vue";
import HealthReport from "@com/other/healthReport/index.vue";
import FJ from "@com/other/fj/index.vue";
import clock from "@com/other/clock/index.vue";
import cesium from "@com/other/cesium/index.vue";
import * as echarts from "echarts";
import util from "@/helper/util.js";
import currentScatterChart from "../components/chart/scatter/current-scatter-chart.vue";
import partten from "@/helper/partten.js";

// 导入header.vue文件
export default {
  data() {
    return {
      show: true,
      tableData: [],
      xAxisData: [],
      seriesData: [],
    };
  },

  components: {
    // ListBarChart,
    HealthReport,
    FJ,
    clock,
    cesium,
    currentScatterChart,
  },

  created() {
    let tableData = [];
    let item = {
      id: "12987122",
      name: "王小虎",
      amount1: "234",
      amount2: "3.2",
      amount3: 10,
    };
    for (let i = 0; i < 100; i++) {
      tableData.push(item);
    }
    this.tableData = tableData;
  },

  mounted() {
    const that = this;
    that.API.requestData({
      method: "POST",
      baseURL: "http://192.168.1.18:9002/",
      subUrl: "scatter/list",
      data: {
        station: "NSS_FDC",
        wtId: "NG01_01",
        time: "2022-02",
      },
      success(res) {
        let sjgl = [];
        let zygl = [];
        let xAxisData = [];

        res.data.lineactual.forEach((ele, index) => {
          sjgl.push(ele[1]);
          xAxisData.push(index);
        });

        res.data.lineoptimal.forEach((ele) => {
          zygl.push(ele[1]);
        });

        that.seriesData = [
          {
            name: "风速功率",
            type: "effectScatter",
            showEffectOn: "emphasis",
            symbolSize: 5,
            data: res.data.scatter || [
              [174.0, 65.6],
              [175.3, 71.8],
              [193.5, 80.7],
              [186.5, 72.6],
              [187.2, 78.8],
              [181.5, 74.8],
              [184.0, 86.4],
              [184.5, 78.4],
              [175.0, 62.0],
              [184.0, 81.6],
              [180.0, 76.6],
              [177.8, 83.6],
              [192.0, 90.0],
              [176.0, 74.6],
              [174.0, 71.0],
              [184.0, 79.6],
              [192.7, 93.8],
              [171.5, 70.0],
              [173.0, 72.4],
              [176.0, 85.9],
              [176.0, 78.8],
              [180.5, 77.8],
            ],
            xAxisIndex: 1,
          },
          {
            name: "实际功率",
            type: "line",
            symbol: "circle", //设定为实心点
            symbolSize: 0, //设定实心点的大小
            smooth: true, //这个是把线变成曲线
            data: sjgl || [
              10, 20, 30, 40, 30, 20, 50, 80, 50, 80, 50, 80, 60, 40, 20, 40,
              60, 80, 60, 40, 20,
            ],
            itemStyle: {
              normal: {
                color: "#05bb4c",
                lineStyle: {
                  color: "#05bb4c",
                },
              },
            },
            xAxisIndex: 0,
          },
          {
            name: "最优功率",
            type: "line",
            symbol: "circle", //设定为实心点
            symbolSize: 0, //设定实心点的大小
            smooth: true, //这个是把线变成曲线
            data: zygl || [
              0, 10, 20, 30, 40, 50, 60, 70, 80, 80, 80, 80, 90, 90, 90, 95, 95,
              100, 100, 100, 100,
            ],
            itemStyle: {
              normal: {
                color: "#f8de5b",
                lineStyle: {
                  color: "#f8de5b",
                },
              },
            },
            xAxisIndex: 0,
          },
        ];

        that.xAxisData = xAxisData;
      },
    });
    return;
    let thArray = [
      [
        { field: "name", name: "表1姓名" },
        { field: "age", name: "表1年龄" },
        { field: "sex", name: "表1性别" },
      ],
      [
        { field: "name", name: "表2姓名" },
        { field: "age", name: "表2年龄" },
        { field: "sex", name: "表2性别" },
      ],
      [
        { field: "name", name: "表3姓名" },
        { field: "age", name: "表3年龄" },
        { field: "sex", name: "表3性别" },
      ],
    ];

    let dataArray = [
      [
        { name: "张三", age: 12, sex: "男" },
        { name: "李四", age: 19, sex: "男" },
      ],
      [
        { name: "王五", age: 9, sex: "女" },
        { name: "赵六", age: 21, sex: "男" },
      ],
      [
        { name: "吴七", age: 26, sex: "男" },
        { name: "沈八", age: 17, sex: "女" },
        { name: "刘九", age: 18, sex: "女" },
      ],
    ];

    let sheetNameArray = ["这是sheet-1", "这是sheet-2", "这是sheet-3"];

    // this.BASE.exportMultiple(thArray, dataArray, sheetNameArray, "单表格多sheet示例");
  },

  methods: {
    showDialog() {
      this.show = true;
    },

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (!rowIndex && !columnIndex) {
        return [1, 3];
      } else if (rowIndex === 5 && !columnIndex) {
        return [10, 1];
      }
    },

    getSelected(res) {
      const seriesIndex = res[0]?.selected[0]?.seriesIndex;
      const selected = res[0]?.selected[0]?.dataIndex;
      selected?.forEach((seleIndex, timmerIndex) => {
        setTimeout(() => {
          const item = this.seriesData[seriesIndex].data[seleIndex];
          this.BASE.showMsg({
            type: "success",
            msg: `${item[0]}米风速时功率为：${item[1]}KW`,
          });
        }, timmerIndex * 50);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.fjBox {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
}
</style>