<template>
  <div>
    <el-row v-show="bg">
      <el-col :span="12">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="指标:">
            <el-select
              v-model="value"
              multiple
              collapse-tags
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option-group
                v-for="group in options"
                :key="group.label"
                :label="group.label"
              >
                <el-option
                  v-for="item in group.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item label="筛选:">
            <el-input
              v-model="search"
              placeholder="输入关键字搜索"
              style="width: 89%"
            />
          </el-form-item>
          <el-form-item v-if="xb" label="谐波:">
            <el-select
              v-model="harmonic"
              multiple
              collapse-tags
              placeholder="请选择谐波"
              style="width: 100%"
            >
              <el-option
                v-for="item in harmonicoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="jxb" label="间谐波:">
            <el-select
              v-model="inharmonic"
              multiple
              collapse-tags
              placeholder="请选择谐波"
              style="width: 100%"
            >
              <el-option
                v-for="item in inharmonicoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col v-if="bg" :span="10" :offset="6" style="margin-top: -43px">
        <timeindex
          :id="id"
          @querfromdata="querfromdata"
          :interval="interval"
          :treenode="treenode"
          :dataTree="dataTree"
        ></timeindex>
      </el-col>
    </el-row>
    <el-row v-show="bg">
      <el-col :span="24">
        <!-- 过滤筛选: <el-input v-model="search" clearable size="small" style="width: 250px" placeholder="筛选数据"/> -->
        <!-- <el-button @click="exportExcel" style="float:right;margin-bottom:10px" size="small" type="primary">导出Excel文件</el-button> -->

        <el-table
          stripe
          :data="tables"
          style="width: 100%"
          row-key="id"
          id="rebateSetTable"
          border
          v-loading="loading"
          height="calc(100vh - 125px)"
          :header-cell-style="{
            height: '25px',
            padding: '0px',
          }"
          header-cell-class-name="table_header"
          :row-style="{ height: '25px' }"
          :cell-style="{ padding: '0px' }"
          :default-expand-all="false"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            align="center"
            prop="subName"
            label="站点"
            sortable
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="lineName"
            label="监测点名称"
            :show-overflow-tooltip="true"
            sortable
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="targetName"
            label="指标类型"
            sortable
            width="250"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="phaseType"
            label="相别"
            sortable
          ></el-table-column>
          <el-table-column
            align="center"
            prop="scale"
            label="电压等级"
            sortable
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="timeId"
            label="时间"
            sortable
            width="180"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="unit"
            label="单位"
            sortable
          ></el-table-column>
          <el-table-column align="center" prop="maxData" label="最大值">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.statisticalType == 3"
                @click="maxvalue(scope.row)"
                style="color: red"
                type="text"
                size="small"
                >{{ scope.row.maxData }}</el-button
              >
              <el-button
                v-if="
                  scope.row.statisticalType !== 3 &&
                  scope.row.cp95Data !== 3.14159
                "
                @click="maxvalue(scope.row)"
                type="text"
                size="small"
                >{{ scope.row.maxData }}</el-button
              >
              <el-button
                v-if="
                  scope.row.statisticalType !== 3 &&
                  scope.row.maxData == 3.14159
                "
                type="text"
                size="small"
                >--</el-button
              >
            </template>
          </el-table-column>
          <el-table-column align="center" prop="minData" label="最小值">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.statisticalType == 2"
                @click="minvalue(scope.row)"
                style="color: red"
                type="text"
                size="small"
                >{{ scope.row.minData }}</el-button
              >
              <el-button
                v-if="
                  scope.row.statisticalType !== 2 &&
                  scope.row.cp95Data !== 3.14159
                "
                @click="minvalue(scope.row)"
                type="text"
                size="small"
                >{{ scope.row.minData }}</el-button
              >
              <el-button
                v-if="
                  scope.row.statisticalType !== 2 &&
                  scope.row.minData == 3.14159
                "
                type="text"
                size="small"
                >--</el-button
              >
            </template>
          </el-table-column>
          <el-table-column align="center" prop="avgData" label="平均值">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.statisticalType == 1"
                @click="avgvalue(scope.row)"
                style="color: red"
                type="text"
                size="small"
                >{{ scope.row.avgData }}</el-button
              >
              <el-button
                v-if="
                  scope.row.statisticalType !== 1 &&
                  scope.row.cp95Data !== 3.14159
                "
                @click="avgvalue(scope.row)"
                type="text"
                size="small"
                >{{ scope.row.avgData }}</el-button
              >
              <el-button
                v-if="
                  scope.row.statisticalType !== 1 &&
                  scope.row.avgvalue == 3.14159
                "
                type="text"
                size="small"
                >--</el-button
              >
            </template>
          </el-table-column>
          <el-table-column align="center" prop="cp95Data" label="CP95值">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.statisticalType == 4"
                @click="cp95value(scope.row)"
                style="color: red"
                type="text"
                size="small"
                >{{ scope.row.cp95Data }}</el-button
              >
              <el-button
                v-if="
                  scope.row.statisticalType !== 4 &&
                  scope.row.cp95Data !== 3.14159
                "
                @click="cp95value(scope.row)"
                type="text"
                size="small"
                >{{ scope.row.cp95Data }}</el-button
              >
              <el-button
                v-if="
                  scope.row.statisticalType !== 4 &&
                  scope.row.cp95Data == 3.14159
                "
                type="text"
                size="small"
                >--</el-button
              >
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="cp95Value" label="国限值"  fixed="right">
                                     <template slot-scope="scope">
                                       <el-button v-if="scope.row.statisticalType==4"  @click="cp95value(scope.row)" style="color:red;" type="text" size="small">{{scope.row.cp95Value}}</el-button>
                                       <el-button v-if="scope.row.statisticalType !==4"  @click="cp95value(scope.row)" type="text" size="small">{{scope.row.cp95Value}}</el-button>
                                     </template>
                                </el-table-column> -->
        </el-table>
        <!-- <pagination :pageData="pageData" @changePageNum="changePageNum" @changePageSize="changePageSize"></pagination> -->
      </el-col>
    </el-row>

    <el-row v-show="tu">
      <el-button
        type="primary"
        icon="el-icon-close"
        size="small"
        style="float: right"
        @click="backgg"
        >返回</el-button
      >
      <el-col :span="24">
        <div
          ref="llk"
          id="qshfx"
          :style="'width:100%;height:calc(100vh - 100px);zoom:' + device"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getheight } from "../../assets/commjs/common";
import { A, B, C, AB, BC, CA } from "../../assets/commjs/color";
import timeindex from "../components/TimePicker/timeindex2";
import pagination from "../components/pagination/index";
import api from "@/api/harmonic/onlineData";
import FileSaver from "file-saver";
import echarts from "echarts";
import XLSX from "xlsx";
import json2csv from "json2csv";

export default {
  components: {
    timeindex,
    pagination,
  },
  computed: {
    // 实时监听表格
    tables: function () {
      const search = this.search;
      if (search) {
        return this.tableData.filter((dataNews) => {
          return Object.keys(dataNews).some((key) => {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.tableData;
    },
  },
  data() {
    return {
      loading: true,
      formInline: {},
      bg: true,
      tu: false,
      rowname: "",
      pttype: 0,
      phaseType: "",
      dialogTableVisible: false,
      search: "",
      tableData: [],
      echartsheight: undefined,
      value: ["40"],
      //指标类型
      options2: [
        {
          label: "电压趋势",
          options: [
            {
              value: "12",
              label: "电压偏差",
            },
            {
              value: "15",
              label: "电压总谐波畸变率",
            },
          ],
        },
        {
          label: "电流趋势",
          options: [
            {
              value: "22",
              label: "负序电流",
            },
          ],
        },
        {
          label: "频率趋势",
          options: [
            {
              value: "30",
              label: "频率",
            },
          ],
        },
        {
          label: "谐波趋势",
          options: [
            {
              value: "40",
              label: "谐波电压含有率",
            },
            {
              value: "43",
              label: "谐波电流幅值",
            },
            {
              value: "46",
              label: "间谐波电压含有率",
            },
            {
              value: "47",
              label: "间谐波电流含有率",
            },
          ],
        },
        {
          label: "闪变趋势",
          options: [
            {
              value: "61",
              label: "长时电压闪变",
            },
          ],
        },
      ],
      //参数
      formData: {
        condition: [],
        harmonics: [],
        inHarmonics: [],
        // lineId: [],
        searchBeginTime: "",
        searchEndTime: "",
      },
      interval: 4,
      device: 1,
      limit: 8,
      limit2: 8,
      span1: 5,
      span2: 14,
      n: 40,
      m: 75,
      options: [
        {
          label: "电压趋势",
          options: [
            {
              value: "12",
              label: "电压偏差",
            },
            {
              value: "15",
              label: "电压总谐波畸变率",
            },
            {
              value: "13",
              label: "三相电压不平衡",
            },
          ],
        },
        {
          label: "电流趋势",
          options: [
            {
              value: "22",
              label: "负序电流",
            },
          ],
        },
        {
          label: "频率趋势",
          options: [
            {
              value: "30",
              label: "频率",
            },
          ],
        },
        {
          label: "谐波趋势",
          options: [
            {
              value: "40",
              label: "谐波电压含有率",
            },
            {
              value: "43",
              label: "谐波电流幅值",
            },
            {
              value: "46",
              label: "间谐波电压含有率",
            },
          ],
        },
        {
          label: "闪变趋势",
          options: [
            {
              value: "61",
              label: "长时电压闪变",
            },
          ],
        },
      ],
      xb: false,
      jxb: false,
      checked: true,
      checkbox: true,
      tableheight: undefined,
      id: 1,
      harmonic: [333],
      harmonicoptions: [
        { label: "全部", value: 333 },
        { label: "偶次", value: 222 },
        { label: "奇次", value: 111 },
        { label: "2次", value: 2 },
        { label: "3次", value: 3 },
        { label: "4次", value: 4 },
        { label: "5次", value: 5 },
        { label: "6次", value: 6 },
        { label: "7次", value: 7 },
        { label: "8次", value: 8 },
        { label: "9次", value: 9 },
        { label: "10次", value: 10 },
        { label: "11次", value: 11 },
        { label: "12次", value: 12 },
        { label: "13次", value: 13 },
        { label: "14次", value: 14 },
        { label: "15次", value: 15 },
        { label: "16次", value: 16 },
        { label: "17次", value: 17 },
        { label: "18次", value: 18 },
        { label: "19次", value: 19 },
        { label: "20次", value: 20 },
        { label: "21次", value: 21 },
        { label: "22次", value: 22 },
        { label: "23次", value: 23 },
        { label: "24次", value: 24 },
        { label: "25次", value: 25 },
      ],
      inharmonic: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
      inharmonicoptions: [
        { label: "0.5次", value: 1 },
        { label: "1.5次", value: 2 },
        { label: "2.5次", value: 3 },
        { label: "3.5次", value: 4 },
        { label: "4.5次", value: 5 },
        { label: "5.5次", value: 6 },
        { label: "6.5次", value: 7 },
        { label: "7.5次", value: 8 },
        { label: "8.5次", value: 9 },
        { label: "9.5次", value: 10 },
        { label: "10.5次", value: 11 },
        { label: "11.5次", value: 12 },
        { label: "12.5次", value: 13 },
        { label: "13.5次", value: 14 },
        { label: "14.5次", value: 15 },
        { label: "15.5次", value: 16 },
      ],
      number: 333,
      list: [],
      disabled: false,
    };
  },

  props: {
    treenode: {
      type: Object,
      default: undefined,
    },
    dataTree: {
      type: Array,
      default: undefined,
    },
    linelist: {
      type: Array,
      default: undefined,
    },
    view: {
      type: Boolean,
      default: undefined,
    },
  },
  watch: {
    value: function (a, b) {
      for (var i = 0; i < a.length; i++) {
        if (a.length == 0) {
          this.xb = false;
          this.jxb = false;
        } else {
          if (a[i] == "40" || a[i] == "43") {
            this.xb = true;
            this.jxb = false;
          } else if (a[i] == "46") {
            this.jxb = true;
            this.xb = false;
          } else if (a[i] == "61") {
            return;
          } else {
            this.xb = false;
            this.jxb = false;
          }
        }
      }
    },
    harmonic: function (a, b) {
      if (a.length !== 0) {
        for (var i = 0; i < a.length; i++) {
          if (a[i] == 111) {
            //奇
            this.number = 111;
            this.limit2 = 1;
          } else if (a[i] == 222) {
            //偶
            this.number = 222;
          } else if (a[i] == 333) {
            //全部
            this.number = 333;
            this.limit2 = 1;
          } else {
            this.number = 555;
            this.limit2 = 24;
          }
        }
      } else {
        this.number = 0;
      }
    },
  },
  created() {
    // this.menutree()
  },
  mounted() {
    // this.echartsheight= (getheight()*1.92)
    this.device = window.devicePixelRatio;
    // const width = document.documentElement.clientWidth || document.body.clientWidth
    // this.device = 1/(width / 1920)
    //  if(this.device==1){
    //     this.tableheight = (getheight()*1.82)
    //     this.echartsheight =getheight()*1.92
    //   }else if(this.device==1.25){
    //     this.echartsheight =getheight()*0.8
    //   }else if(this.device==1.5){
    //     this.echartsheight =getheight()*0.75
    //   }
  },
  methods: {
    menutree() {
      var data = this.checked;
      this.$emit("menuTree", data);
    },
    backgg() {
      this.bg = true;
      this.tu = false;
      this.disabled = false;
    },
    //日期组件触发事件
    querfromdata(data) {
      this.loading = true;
      //监测点赋值
      this.formData.lineId = [];
      this.timeValue = data;
      this.formData.searchBeginTime = data[0];
      this.formData.searchEndTime = data[1];
      this.formData.condition = this.value;
      this.formData.inHarmonics = this.inharmonic;
      if (this.number == 111) {
        this.formData.harmonics = [];
        for (var i = 2; i < 25; i++) {
          if (i % 2 !== 0) {
            this.formData.harmonics.push(i);
          }
        }
      } else if (this.number == 222) {
        this.formData.harmonics = [];
        for (var i = 2; i < 25; i++) {
          if (i % 2 == 0) {
            this.formData.harmonics.push(i);
          }
        }
      } else if (this.number == 333) {
        this.formData.harmonics = [];
        for (var i = 2; i < 25; i++) {
          this.formData.harmonics.push(i);
        }
      } else if (this.number == 555) {
        this.formData.harmonics = this.harmonic;
      }
      api.getHistoryData(this.formData).then((res) => {
        if (res.code == "A0000") {
          this.tableData = res.data;
          this.loading = false;
        }
      });
    },
    //最大值触发
    maxvalue(row) {
      this.disabled = true;
      // this.rowname = row.lineName +'--'+row.targetName+'--'+'最大值趋势分析'
      // this.dialogTableVisible = true
      this.phaseType = row.phaseType;
      this.bg = false;
      this.tu = true;
      var data = {
        lineId: row.lineId,
        number: row.number,
        phaseType: row.phaseType,
        searchTime: row.timeId,
        targetCode: row.targetCode,
        valueType: 3,
      };
      api.getHistoryLineData(data).then((res) => {
        if (res.code == "A0000") {
          this.list = res.data;
          this.list[0].phaiscType[0] = row.phaseType + "相";
          this.datachuli();
          // this.$nextTick(()=>{
          this.trendanalysis(row);
          //  })
        }
      });
    },
    //最下值触发
    minvalue(row) {
      this.disabled = true;
      this.phaseType = row.phaseType;
      //this.rowname = row.lineName +'--'+row.targetName+'--'+'最小值趋势分析'
      //this.dialogTableVisible = true
      this.bg = false;
      this.tu = true;
      var data = {
        lineId: row.lineId,
        number: row.number,
        phaseType: row.phaseType,
        searchTime: row.timeId,
        targetCode: row.targetCode,
        valueType: 2,
      };
      api.getHistoryLineData(data).then((res) => {
        if (res.code == "A0000") {
          this.list = res.data;
          this.list[0].phaiscType[0] = row.phaseType + "相";
          this.datachuli();
          //  this.$nextTick(()=>{
          this.trendanalysis(row);
          // })
        }
      });
    },
    //平均值触发
    avgvalue(row) {
      this.disabled = true;
      this.phaseType = row.phaseType;
      this.bg = false;
      this.tu = true;
      //this.rowname = row.lineName +'--'+row.targetName+'--'+'平均值趋势分析'
      //this.dialogTableVisible = true
      var data = {
        lineId: row.lineId,
        number: row.number,
        phaseType: row.phaseType,
        searchTime: row.timeId,
        targetCode: row.targetCode,
        valueType: 1,
      };
      api.getHistoryLineData(data).then((res) => {
        if (res.code == "A0000") {
          this.list = res.data;
          this.list[0].phaiscType[0] = row.phaseType + "相";
          this.datachuli();
          // this.$nextTick(()=>{
          this.trendanalysis(row);
          //  })
        }
      });
    },
    //CP95值触发
    cp95value(row) {
      this.disabled = true;
      // this.phaseType = row.phaseType
      this.bg = false;
      this.tu = true;
      //this.rowname = row.lineName +'--'+row.targetName+'--'+'cp95值趋势分析'
      //this.dialogTableVisible = true
      var data = {
        lineId: row.lineId,
        number: row.number,
        phaseType: row.phaseType,
        searchTime: row.timeId,
        targetCode: row.targetCode,
        valueType: 4,
      };
      api.getHistoryLineData(data).then((res) => {
        if (res.code == "A0000") {
          this.list = res.data;
          this.list[0].phaiscType[0] = row.phaseType + "相";
          this.datachuli();
          //this.$nextTick(()=>{
          this.trendanalysis(row);
          // })
        }
      });
    },
    // 判断是否IE浏览器
    MyBrowserIsIE() {
      let isIE = false;
      if (
        navigator.userAgent.indexOf("compatible") > -1 &&
        navigator.userAgent.indexOf("MSIE") > -1
      ) {
        // ie浏览器
        isIE = true;
      }
      if (navigator.userAgent.indexOf("Trident") > -1) {
        // edge 浏览器
        isIE = true;
      }
      return isIE;
    },
    //创建a标签下载
    createDownLoadClick(content, fileName) {
      const link = document.createElement("a");
      link.href = encodeURI(content);
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    exporeCSV(rows) {
      try {
        const result = json2csv.parse(rows, {
          // fields: fields,
          excelStrings: true,
        });
        if (this.MyBrowserIsIE()) {
          // IE10以及Edge浏览器
          var BOM = "\uFEFF";
          // 文件转Blob格式
          var csvData = new Blob([BOM + result], { type: "text/csv" });
          navigator.msSaveBlob(csvData, `导出数据.csv`);
        } else {
          let csvContent = "data:text/csv;charset=utf-8,\uFEFF" + result;
          // 非ie 浏览器
          this.createDownLoadClick(csvContent, `导出数据.csv`);
        }
      } catch (err) {
        alert(err);
      }
    },
    exportExcel() {
      /* generate workbook object from table */
      let wb = XLSX.utils.table_to_book(
        document.querySelector("#rebateSetTable")
      );
      /* get binary string as output */
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "数据表.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined"){}// console.log(e, wbout);
      }
      return wbout;
    },
    //数据处理
    datachuli() {
      var time = [];
      var value = [];
      var topLimit = [];
      var lowerLimit = [];
      if (this.list[0].value !== null) {
        for (var j = 0; j < this.list[0].value.length; j++) {
          time.push(this.list[0].value[j][0]);
          value.push(this.list[0].value[j][1]);
        }
        this.list[0].time = time;
        this.list[0].value = value;
        for (var k = 0; k < this.list[0].time.length; k++) {
          if (
            this.list[0].topLimit !== null &&
            this.list[0].lowerLimit == null
          ) {
            topLimit.push(this.list[0].topLimit);
          } else if (
            this.list[0].lowerLimit == null &&
            this.list[0].lowerLimit !== null
          ) {
            lowerLimit.push(this.list[0].lowerLimit);
          } else if (
            this.list[0].lowerLimit !== null &&
            this.list[0].lowerLimit !== null
          ) {
            topLimit.push(this.list[0].topLimit);
            lowerLimit.push(this.list[0].lowerLimit);
          }
        }
        this.list[0].topLimit = topLimit;
        this.list[0].lowerLimit = lowerLimit;
        if (
          this.list[0].topLimit !== null &&
          this.list[0].lowerLimit !== null
        ) {
          this.list[0].phaiscType.push("上限");
          this.list[0].phaiscType.push("下限");
          this.list[0].seriesData = [
            {
              name: this.list[0].phaiscType[0],
              type: "line",
              symbol: "none",
              smooth: "true",
              sampling: "lttb",
              itemStyle: {
                color: A,
              },
              data: this.list[0].value,
            },
            {
              name: this.list[0].phaiscType[2],
              type: "line",
              smooth: "true",
              symbol: "none",
              sampling: "lttb",
              itemStyle: {
                color: B,
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dotted", //'dotted'虚线 'solid'实线
                  },
                },
              },
              data: this.list[0].lowerLimit,
            },
            {
              name: this.list[0].phaiscType[1],
              type: "line",
              smooth: "true",
              symbol: "none",
              sampling: "lttb",
              itemStyle: {
                color: C,
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dotted", //'dotted'虚线 'solid'实线
                  },
                },
              },
              data: this.list[0].topLimit,
            },
          ];
        } else if (
          this.list[0].topLimit !== null &&
          this.list[0].lowerLimit == null
        ) {
          this.list[0].phaiscType.push("下限");
          this.list[0].seriesData = [
            {
              name: this.list[0].phaiscType[0],
              type: "line",
              symbol: "none",
              smooth: "true",
              sampling: "lttb",
              itemStyle: {
                color: A,
              },
              data: this.list[0].value,
            },
            {
              name: this.list[0].phaiscType[1],
              type: "line",
              smooth: "true",
              symbol: "none",
              sampling: "lttb",
              itemStyle: {
                color: C,
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dotted", //'dotted'虚线 'solid'实线
                  },
                },
              },
              data: this.list[0].topLimit,
            },
          ];
        } else if (
          this.list[0].topLimit == null &&
          this.list[0].lowerLimit !== null
        ) {
          this.list[0].phaiscType.push("上限");
          this.list[0].seriesData = [
            {
              name: this.list[0].phaiscType[0],
              type: "line",
              symbol: "none",
              smooth: "true",
              sampling: "lttb",
              itemStyle: {
                color: A,
              },
              data: this.list[0].value,
            },
            {
              name: this.list[0].phaiscType[1],
              type: "line",
              smooth: "true",
              symbol: "none",
              sampling: "lttb",
              itemStyle: {
                color: C,
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dotted", //'dotted'虚线 'solid'实线
                  },
                },
              },
              data: this.list[0].lowerLimit,
            },
          ];
        }
      } else {
        // this.list=[]
        // var time=[]
        // var value=[]
        //  var topLimit=[]
        // var lowerLimit=[]
      }
    },
    //趋势分析图
    trendanalysis(row) {
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("qshfx"));
      myChartes.clear();
      var option = {
        tooltip: {
          trigger: "axis",
        },
        title: {
          left: "center",
          text:
            "时间:" +
            row.timeId +
            "--指标:" +
            this.list[0].targetName +
            "--监测点:" +
            this.list[0].lineName,
          textStyle: {
            fontSize: 12,
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.list[0].time,
        },
        legend: {
          data: this.list[0].phaiscType,
          left: "0%",
        },
        grid: {
          left: "4%",
          right: "4%",
          bottom: "8%",
          containLabel: true,
        },
        yAxis: {
          name: "单位(" + this.list[0].unit[0] + ")",
          type: "value",
          boundaryGap: [0, "100%"],
          axisLine: {
            show: true,
          },
        },
        dataZoom: [
          {
            type: "inside",
            height: 10,
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true },
            //     dataZoom: {
            //          yAxisIndex: 'none'
            // },
            // //restore: {},
            // mark : {show: true},
            //magicType : {show: true, type: ['line', 'bar']},
          },
        },
        series: this.list[0].seriesData,
      };

      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      let _this = this;
      _this.$erd.listenTo(_this.$refs.llk, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      setTimeout(() => {
        myChartes.resize();
      }, 100);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table.el-table--enable-row-hover .el-table__body tr:hover > td {
  //background: $themeColor;
  background: $themeColor;
  color: aliceblue;
}
</style>
<style lang="less" scoped>
.cfd {
  display: inline-block;

  margin-bottom: 10px;
  width: 100%;
  margin-top: -3%;
  position: relative;
  z-index: 100000;
}
.cf {
  display: inline-block;
  margin-left: 55%;
  margin-bottom: 10px;
  width: 100%;
  margin-top: -3.6%;
  position: relative;
  z-index: 100000;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #79878769;
  width: 10px;
}
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
//   width: 8px; /*滚动条宽度*/
//   height: 12px; /*滚动条高度*/
// }
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
//   border-radius: 0px; /*滚动条的背景区域的圆角*/
//   background-color: rgba(203, 208, 207, 0.286); /*滚动条的背景颜色*/
//   cursor: pointer;
// }
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-corner {
//   background-color: rgba(202, 207, 206, 0.286);
//   cursor: pointer;
// }
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
//   border-radius: 4px; /*滚动条的圆角*/
//   background-color: rgba(144, 148, 148, 0.979); /*滚动条的背景颜色*/
// }
::v-deep .el-select-group__title {
  padding-left: 20px;
  font-size: 14px;
  color: #010c11;
  line-height: 30px;
  font-weight: bold;
}
</style>