fd_dwgz_zhyw/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 /> -->
    <div id="box" style="width: 1000px; height: 600px"></div>
  </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 partten from "@/helper/partten.js";

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

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

  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) {
        that.initChart(res);
      },
    });
    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: {
    initChart(res) {
      let myChart = echarts.init(document.getElementById("box"));

      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]);
      });

      const series = [
        {
          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",
          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",
          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,
        },
      ];
      //指定图表的配置项和数据
      var option = {
        //标题
        title: {
          text: "折线散点图",
          textStyle: {
            fontSize: util.vh(16),
            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
          },
        },
        backgroundColor:
          this.$store.state.themeName === "dark"
            ? "rgba(0,0,0,0.4)"
            : "rgba(255,255,255,0.5)",
        //工具箱
        toolbox: {
          show: true,
          x: "right",
          position: [10, 10],
          backgroundColor:
            this.$store.state.themeName === "dark"
              ? "rgba(0,0,0,0.4)"
              : "rgba(255,255,255,0.5)",
          borderColor:
            this.$store.state.themeName === "dark"
              ? partten.getColor("gray")
              : "#000",
          textStyle: {
            fontSize: util.vh(16),
            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
          },
          iconStyle: {
            borderColor:
              this.$store.state.themeName === "dark" ? "#fff" : "#000",
          },
          emphasis: {
            iconStyle: {
              borderColor:
                this.$store.state.themeName === "dark" ? "#fff" : "#000",
            },
          },
          // feature: {
          //   dataZoom: {
          //     yAxisIndex: "none",
          //   },
          //   dataView: { readOnly: false },
          //   magicType: { type: ["line", "bar"] },
          //   restore: {},
          //   saveAsImage: {},
          // },
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "cross",
          },
          backgroundColor:
            this.$store.state.themeName === "dark"
              ? "rgba(0,0,0,0.4)"
              : "rgba(255,255,255,0.5)",
          borderColor:
            this.$store.state.themeName === "dark"
              ? partten.getColor("gray")
              : "#000",
          textStyle: {
            fontSize: util.vh(16),
            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
          },
          formatter(params) {
            return params.name
              ? `${params.seriesName}<br />风速：${params.name}米/s<br />功率：${params.value}KW`
              : `${params.seriesName}<br />风速：${params.data[0]}米/s<br />功率：${params.data[1]}KW`;
          },
        },
        brush: {
          xAxisIndex: "all",
          yAxisIndex: "all",
          transformable: true,
          throttleType: "debounce",
          throttleDelay: 600,
          removeOnClick: false,
          brushType: "polygon",
          brushMode: "multiple",
          brushStyle: {
            borderWidth: 1,
            color: "rgba(255,36,36,0.2)",
            borderColor: "#ff2424",
          },
          // outOfBrush: {
          //   colorAlpha: 0.5,
          // },
        },
        dataZoom: [
          {
            type: "inside", //图表下方的伸缩条
            show: true, //是否显示
            realtime: true, //拖动时，是否实时更新系列的视图
            start: 0, //伸缩条开始位置（1-100），可以随时更改
            end: 100, //伸缩条结束位置（1-100），可以随时更改
          },
          {
            type: "slider", //图表下方的伸缩条
            show: true, //是否显示
            realtime: true, //拖动时，是否实时更新系列的视图
            start: 0, //伸缩条开始位置（1-100），可以随时更改
            end: 100, //伸缩条结束位置（1-100），可以随时更改
          },
        ],
        textStyle: {
          fontSize: util.vh(16),
          color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
        },
        //图例-每一条数据的名字叫销量
        legend: {
          show: true,
          data: ["风速功率", "实际功率", "最优功率"],
          right: "120",
          top:"5",
          icon: "circle",
          itemWidth: 6,
          inactiveColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
          textStyle: {
            color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
            fontSize: 12,
          },
        },
        grid: {
          top: 32,
          left: 40,
          right: 40,
          bottom: 24,
        },
        //x轴
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xAxisData || [
              "0",
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
              "20",
              "21",
              "22",
              "23",
              "24",
              "25",
            ],
            min: 0,
            axisLabel: {
              formatter: "{value}",
              fontSize: util.vh(14),
            },
            textStyle: {
              color:
                this.$store.state.themeName === "dark"
                  ? partten.getColor("gray")
                  : "#000",
            },
          },
          {
            // name: this.xTitle,
            show: false,
            type: "value",
            boundaryGap: false,
            min: xAxisData[0],
            max: xAxisData[xAxisData.length - 1],
            scale: true,
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: {
              show: false,
            },
          },
        ],
        //y轴没有显式设置，根据值自动生成y轴
        yAxis: {
          splitLine: { show: false },
        },
        //数据-data是最终要显示的数据
        series,
      };

      myChart.on("brushSelected", (params) => {
        const selected = params.batch[0]?.selected;
        let selectRes = [];
        selected?.forEach((pEle) => {
          if (pEle.dataIndex.length) {
            let item = {
              name: pEle.seriesName,
              data: [],
            };
            pEle.dataIndex.forEach((cEle) => {
              item.data.push(
                Array.isArray(series[pEle.seriesIndex].data[cEle])
                  ? series[pEle.seriesIndex].data[cEle][
                      series[pEle.seriesIndex].data[cEle].length - 1
                    ]
                  : series[pEle.seriesIndex].data[cEle]
              );
            });
            selectRes.push(item);
          }
        });
        let altMsg = "选中了";
        if (selectRes.length) {
          selectRes.forEach((ele) => {
            altMsg +=
              ele.data.length +
              "条" +
              ele.name +
              "：[" +
              ele.data.toString() +
              "].";
          });
          this.BASE.showMsg({
            type: "success",
            msg: altMsg,
          });
        }
      });

      //使用刚刚指定的配置项和数据项显示图表
      myChart.setOption(option);

      myChart.dispatchAction({
        type: "takeGlobalCursor",
        // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
        key: "brush",
        brushOption: {
          // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
          brushType: "polygon",
          // 参见 brush 组件的 brushMode。如果不设置，则取 brush 组件的 brushMode 设置。
          brushMode: "multiple",
        },
      });
    },
    showDialog() {
      this.show = true;
    },

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (!rowIndex && !columnIndex) {
        return [1, 3];
      } else if (rowIndex === 5 && !columnIndex) {
        return [10, 1];
      }
    },
  },
};
</script>
<style lang="less" scoped>
.fjBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
</style>