Newer
Older
operation_web / src / components / shujulvwang / dataBrowsingQuery.vue
<!-- 数据浏览图形 -->
<template>
  <div
    id="dataBrowsingQuery"
    class="tab"
    :element-loading-text="loadingTitle"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(245, 245, 245, 0.8)"
    v-loading="loading"
  >
    <!-- 搜索按钮 -->
    <div class="btns">
      <xf-buttons :btnAuthority="authority">
        <template #dataSource>
          <el-input
            style="width: 130px"
            placeholder="请输入查询名称"
            class="m-r-10"
            v-model="programme"
          ></el-input>
          <el-button
            v-if="draw"
            type="primary"
            size="mini"
            style="height: 31px"
            @click="getCharts('ruleForm', 1)"
            >保存
          </el-button>
          <el-button
            v-if="!draw"
            type="primary"
            size="mini"
            style="height: 31px"
            @click="getCharts('ruleForm', 2)"
            >修改
          </el-button>
          <el-button
            type="primary"
            size="mini"
            style="height: 31px"
            @click="getCharts('ruleForm', 3)"
            >获取平均值
          </el-button>
          <el-button
            type="primary"
            v-show="showFile"
            size="mini"
            style="height: 31px"
            @click="exprotXlsx()"
            >导出
          </el-button>
        </template>

        <!-- 上传按钮 -->
        <template #search>
          <el-date-picker
            v-model="dates"
            type="datetimerange"
            :picker-options="pickerOptions"
            :editable="false"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            align="right"
          >
          </el-date-picker>
          <el-button
            class="dateSearch"
            style="margin-left: 10px"
            size="mini"
            type="primary"
            @click="getCharts('ruleForm')"
          >
            搜索
          </el-button>
        </template>
      </xf-buttons>
    </div>

    <!-- 搜索条件 -->
    <div class="searchCondition">
      <el-form
        status-icon
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="auto"
        class="demo-ruleForm"
      >
        <div
          class="condition"
          :style="{ height: conditionHeight[parentIndex] }"
          v-for="(parentItem, parentIndex) in ruleForm.dataPreviewLists"
          :key="parentIndex"
        >
          <el-row>
            <el-col :span="24" class="sign">
              <span @click="conditional(parentIndex)" title="条件窗开关">
                <i
                  :class="conditionIcon[parentIndex]"
                  style="transform: rotateZ(-90deg)"
                ></i>
                Series{{ parentIndex + 1 }}
              </span>

              <!-- 删除条件按钮 -->
              <div
                class="deleteBtns f_right"
                v-if="closeWindow[parentIndex]"
                @click="deleteWin(parentIndex)"
                title="关闭此条件框"
              >
                <i class="el-icon-close"></i>
              </div>

              <!-- 复制数据按钮 -->
              <div
                class="telescopic f_right"
                v-if="copyBtn[parentIndex]"
                title="复制窗口"
                @click="copyDatas(parentIndex)"
              >
                <i class="el-icon-document-copy"></i>
              </div>

              <!-- 添加按钮 -->
              <div
                class="telescopic f_right"
                v-if="copyBtn[parentIndex]"
                title="添加数据"
                @click="modelAdd(parentIndex)"
              >
                <i class="el-icon-plus"></i>
              </div>
            </el-col>
          </el-row>

          <el-row class="conditionContent conditionContent1">
            <el-col :span="5" class="p-r-10">
              <el-form-item
                label="连接名"
                :prop="'dataPreviewLists.' + parentIndex + '.dataSourceName'"
              >
                <el-select
                  @change="dataSourceChange"
                  @visible-change="fieldNameFocus(parentIndex)"
                  v-model="parentItem.dataSourceName"
                  placeholder="请选择连接"
                >
                  <el-option
                    v-for="(item, index) in datasSources"
                    :key="index + 99"
                    :label="item.value"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="4" class="p-r-10">
              <el-form-item
                label="数据表名"
                :prop="'dataPreviewLists.' + parentIndex + '.tableName'"
              >
                <el-autocomplete
                  @focus="fieldNameFocus(parentIndex)"
                  @select="dataSourceTable(parentIndex)"
                  v-model="parentItem.tableName"
                  :fetch-suggestions="querySearch"
                  placeholder="请选择数据表"
                >
                </el-autocomplete>
              </el-form-item>
            </el-col>

            <el-col :span="4" class="p-r-10">
              <el-form-item
                label="时间字段"
                :prop="'dataPreviewLists.' + parentIndex + '.timeColumnName'"
              >
                <el-select
                  v-model="parentItem.timeColumnName"
                  placeholder="请选择时间字段"
                >
                  <el-option
                    v-for="(item, index) in parentItem.datas.dateColumn"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item
                label="查询字段"
                :prop="'dataPreviewLists.' + parentIndex + '.queryColumnNames'"
              >
                <el-select
                  v-model="parentItem.queryColumnNames"
                  multiple
                  placeholder="请选择查询字段"
                >
                  <el-option
                    v-for="(item, index) in parentItem.datas.numberColumn"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 字段名称 - 过滤条件 -->
          <el-row
            v-for="(items, indexs) in parentItem.queryConditions"
            :key="indexs + 999"
          >
            <el-col :span="4" class="p-r-10 conditionContent">
              <el-form-item label="过滤条件">
                <el-select
                  v-model="items.name"
                  placeholder="请选择字段名称"
                  @change="fieldNameChange"
                  @visible-change="fieldNameFocus(parentIndex, indexs)"
                >
                  <el-option
                    v-for="(item, index) in parentItem.datas.sourcesField"
                    :key="item.value"
                    :label="item.value"
                    :value="item.isStringL"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="2" class="p-r-10">
              <el-select
                v-model="items.symbol"
                style="line-height: 40px"
                placeholder="类型"
              >
                <el-option
                  v-for="(item, index) in parentItem.datas.symbolNum"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>

            <el-col :span="4">
              <el-input
                v-if="items.select"
                v-model.trim="items.value"
                style="margin-top: 5px"
                placeholder="输入字段值"
              >
              </el-input>
              <el-date-picker
                v-if="!items.select"
                v-model="items.value"
                type="datetime"
                placeholder="选择字段值"
                style="margin-top: 5px"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="1" class="addendumNames text-right">
              <i
                @click="deleteAutoIcons('queryConditions', parentIndex, indexs)"
                class="iconfont icon-qiyong deleteIcon"
              ></i>
            </el-col>
          </el-row>
          <div class="addFilter">
            <span @click="filterCondition(parentIndex)"
              ><i class="iconfont icon-jia"></i> 添加</span
            >
          </div>
        </div>
      </el-form>
    </div>

    <!-- 图形展示 -->
    <div id="charts" ref="Echarts"></div>

    <!-- 平均值表格展示 -->
    <div class="m-t-20 p-l-20 p-r-20 m-b-30 text-center">
      <el-table :data="avgDatas" style="width: 100%">
        <el-table-column label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="showTime" label="日期"> </el-table-column>
        <el-table-column label="流量(m³/h)">
          <el-table-column prop="flowMax" label="最大值"> </el-table-column>
          <el-table-column prop="flowMin" label="最小值"> </el-table-column>
          <el-table-column prop="flowAvg" label="平均值"> </el-table-column>
        </el-table-column>
        <el-table-column label="水位(m)">
          <el-table-column prop="waterLevelMax" label="最大值">
          </el-table-column>
          <el-table-column prop="waterLevelMin" label="最小值">
          </el-table-column>
          <el-table-column prop="waterLevelAvg" label="平均值">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="outFlow" label="排水量"> </el-table-column>
      </el-table>
    </div>

    <!-- 向上滚动 -->
    <!-- <el-backtop target="#dataBrowsingQuery" :visibility-height='150'></el-backtop> -->
  </div>
</template>

<script>
import echarts from "echarts";
import project from "../../mixins/project";
import devisor from "../../util/devisor";
import config from "../../util/config";
import { randomColor, headTitle, deepClone } from "../../util";

import { notify, getSession } from "../../util/item";
let moment = require("moment");

export default {
  data() {
    return {
      dates: "",
      datasSources: [],
      fieldParentIndex: 0, //记录当前表格状态
      fieldIndex: 0,
      chart: "",
      centers: "center",
      filePath: "",
      $echarts: "",
      programme: "",
      draw: true,
      loading: false,
      showFile: false,
      loadingTitle: config.loadingTitle,
      datasSourceTypes: [],
      avgDatas: [], //平均值
      copyBtn: [true, true],
      closeWindow: [false, false],
      datasSourceTypes1: [],
      conditionHeight: ["auto", "auto"], //条件窗口高度
      conditionIcon: ["el-icon-d-arrow-right", "el-icon-d-arrow-right"], //条件窗口高度
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              let end = moment()
                .subtract("days", 0)
                .format("YYYY-MM-DD HH:mm:ss");
              let start = moment()
                .subtract("days", 7)
                .format("YYYY-MM-DD HH:mm:ss");
              end = moment(end, "YYYY-MM-DD HH:mm:ss").valueOf();
              start = moment(start, "YYYY-MM-DD HH:mm:ss").valueOf();
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              let end = moment()
                .subtract("days", 0)
                .format("YYYY-MM-DD HH:mm:ss");
              let start = moment()
                .subtract("days", 30)
                .format("YYYY-MM-DD HH:mm:ss");
              end = moment(end, "YYYY-MM-DD HH:mm:ss").valueOf();
              start = moment(start, "YYYY-MM-DD HH:mm:ss").valueOf();
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              let end = moment()
                .subtract("days", 0)
                .format("YYYY-MM-DD HH:mm:ss");
              let start = moment()
                .subtract("days", 90)
                .format("YYYY-MM-DD HH:mm:ss");
              end = moment(end, "YYYY-MM-DD HH:mm:ss").valueOf();
              start = moment(start, "YYYY-MM-DD HH:mm:ss").valueOf();
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      ruleForm: {
        dataPreviewLists: [
          {
            dataSourceName: "", //连接名称
            tableName: "", //数据表名称
            timeColumnName: "", //时间字段名称
            queryColumnNames: [], //待查询字段名称
            datas: {
              //存储改变字段,进行数据区分,比较改变数值,修改不必要字段
              dateColumn: [], //时间字段
              numberColumn: [], //查询字段
              sourcesField: [], //字段名称
              symbolNum: [] //类型
            },
            queryConditions: [
              {
                name: "",
                symbol: "",
                value: "",
                select: true
              }
            ] //过滤条件
          }
        ]
      },
      symbolNum1: [
        {
          label: ">",
          value: ">"
        },
        {
          label: ">=",
          value: ">="
        },
        {
          label: "<",
          value: "<"
        },
        {
          label: "<=",
          value: "<="
        },
        {
          label: "=",
          value: "="
        }
      ],
      symbolNum2: [
        {
          label: "=",
          value: "="
        }
      ],
      rules: {
        dataPreviewLists: [
          {
            queryConditions: [
              {
                name: [
                  {
                    required: true,
                    message: "请选择字段名称",
                    trigger: "change"
                  }
                ], //检测字段
                minVal: [
                  {
                    required: true,
                    message: "请输入小于阈值",
                    trigger: "blur"
                  }
                ], //小于阈值
                maxVal: [
                  {
                    required: true,
                    message: "请输入大于阈值",
                    trigger: "blur"
                  }
                ] //大于阈值
              }
            ],
            queryColumnNames: [
              {
                required: true,
                message: "请选择查询字段",
                trigger: "change"
              }
            ],
            timeColumnName: [
              {
                required: true,
                message: "请选择时间字段",
                trigger: "change"
              }
            ],
            tableName: [
              {
                required: true,
                message: "请选择数据表",
                trigger: "change"
              }
            ],
            dataSourceName: [
              {
                required: true,
                message: "请选择连接",
                trigger: "change"
              }
            ]
          },
          {
            queryConditions: [
              {
                name: [
                  {
                    required: true,
                    message: "请选择字段名称",
                    trigger: "change"
                  }
                ], //检测字段
                minVal: [
                  {
                    required: true,
                    message: "请输入小于阈值",
                    trigger: "blur"
                  }
                ], //小于阈值
                maxVal: [
                  {
                    required: true,
                    message: "请输入大于阈值",
                    trigger: "blur"
                  }
                ] //大于阈值
              }
            ],
            queryColumnNames: [
              {
                required: true,
                message: "请选择查询字段",
                trigger: "change"
              }
            ],
            timeColumnName: [
              {
                required: true,
                message: "请选择时间字段",
                trigger: "change"
              }
            ],
            tableName: [
              {
                required: true,
                message: "请选择数据表",
                trigger: "change"
              }
            ],
            dataSourceName: [
              {
                required: true,
                message: "请选择连接",
                trigger: "change"
              }
            ]
          }
        ]
      }
    };
  },
  mixins: [project],
  components: {},
  computed: {},
  mounted() {
    /**
     * 页面注意事项
     * 每组数值,动态进行数据的添加,方法相同,但是数据组不同
     */
    this.getPlatform();
    // 获取内容
    this.getStorageId();

    this.$nextTick(function() {
      setTimeout(() => {
        this.defaultDrawCanvas();
      }, 300);
    });
    this.dataSourceChanges();
  },
  methods: {
    async getStorageId() {
      // 获取上个页面的内容,并进行数据展示,为[]的时候是新增过程,否则为修改过程
      let row = JSON.parse(sessionStorage.getItem("dataBrowsing"));
      // row = row === [] ? [] : row;
      console.log(row);

      if (row == false) {
        // 新增过程
        this.draw = true;
        return;
      }
      console.log(this.draw);
      this.draw = false;
      // 数据回显
      let response = await this.getHttpDatas(this.nozzle.dataPreviewQueryById, {
        id: row["id"]
      });
      response = response ? response : [];
      let queryCondition = JSON.parse(response["queryCondition"]);

      this.$set(this.ruleForm, "dataPreviewLists", queryCondition);

      // 数据表名称获取
      for (let [key, values] of queryCondition.entries()) {
        this.dataSourceChange(values["dataSourceName"], 2);
        this.dataSourceTable(key, 2);
      }

      // 任务名称
      this.programme = response.name;

      // 任务时间
      this.dates = [
        Date.parse(response.startTime),
        Date.parse(response.endTime)
      ];

      // 窗口复制按钮进行处理
      if (queryCondition.length >= 2) {
        this.copyBtn = [false, false];
        this.closeWindow = [true, true];
      }
    },
    getCharts(formName = "ruleForm", dif = 0) {
      // 获取图形参数

      if (this.dates === null || this.dates === "") {
        this.$notify({
          type: "warning",
          message: "请选择需要查询的时间段"
        });
        return;
      }

      if (this.ruleForm.dataPreviewLists.length === 0) {
        this.$notify({
          type: "warning",
          message: "至少添加一组数据,进行浏览"
        });
        return;
      }

      this.$refs[formName].validate(valid => {
        if (valid) {
          // this.loading = true;

          // 成功请求数据,确认按钮图形查询
          switch (dif) {
            case 0:
              this.getChart();
              break;
            case 1:
              this.dermire(1); //新增数据回掉函数
              break;
            case 2:
              this.dermire(2); //修改数据
              break;
            default:
              this.average(); //修改数据
              break;
          }
        } else {
          this.loading = false;
          console.log("error submit!!");
          return false;
        }
      });
    },
    drawChart(res) {
      let [
        xAxis,
        devisors,
        seriesFactorValue,
        devisorsShowOrHidd,
        colorPump
      ] = [[], [], [], [], 0];
      //自定义色彩搭配
      let colors = [
        "#fa541c",
        "#13c2c2",
        "#52c41a",
        "#2f54eb",
        "#fa8c16",
        "#1890ff",
        "#f5222d",
        "#91d5ff",
        "#0050b3",
        "#10239e",
        "#3366CC"
      ];
      for (let i = 0; i < 100; i++) {
        colors.push(randomColor());
      }

      for (let [keys, values] of res.entries()) {
        for (let [ii, vv] of Object.entries(values)) {
          var xName = devisor[ii.toLowerCase()] || "无";

          // 站点图例
          devisors.push(xName + "(Series" + (1 + keys) + ")");

          var color = colors[colorPump];
          colorPump++;
          // 站点内容
          seriesFactorValue.push({
            name: xName + "(Series" + (1 + keys) + ")",
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                color: color
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: color + "E6"
                  },
                  {
                    offset: 0.6,
                    color: color + "66"
                  },
                  {
                    offset: 1,
                    color: color
                  }
                ])
              }
            },
            smooth: true,
            data: Object.values(vv)
          });

          if (keys === 0 && Object.keys(values)[0] === ii) {
            xAxis = Object.keys(vv);
          }
        }
      }

      // 默认显示数据
      if (devisors.length > 0) {
        for (let [index, values] of devisors.entries()) {
          if (index > 3) {
            var keys = {};
            keys[devisors[index]] = false;
            devisorsShowOrHidd.push(keys);
          } else {
            var keys = {};
            keys[devisors[index]] = true;
            devisorsShowOrHidd.push(keys);
          }
        }
      }
      /**
       * 流速(VA)处理对比分析图
       */
      let dom = document.getElementById("charts");
      let myChart = echarts.init(dom);
      this.$echarts = myChart;
      let option = {
        // backgroundColor: '#F6F9FE',
        title: {
          text: "",
          textStyle: {
            color: "#1890fd80" //标题文字颜色
          },
          y: 15,
          x: "center"
        },
        tooltip: {
          trigger: "axis"
        },
        grid: {
          x: 55,
          x2: 25
        },
        xAxis: {
          axisLine: {
            //设置地名及x轴线条颜色
            show: true,
            lineStyle: {
              type: "dashed", //设置x轴线条样式
              color: "#ced0d1"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ced0d1", //更改坐标轴文字颜色
              fontSize: 12 //更改坐标轴文字大小
            }
          },
          boundaryGap: false, //从x轴起点开始
          data: xAxis
        },
        legend: {
          data: devisors,
          itemGap: 5,
          icon: "rect",
          itemWidth: 15, // 设置宽度
          itemHeight: 15,
          textStyle: {
            color: "#333" //图例文字颜色
          },
          y: 20,
          selected: devisorsShowOrHidd,
          padding: [0, 30, 0, 0],
          x: "center"
        },
        yAxis: {
          axisLine: {
            //y轴
            show: false,
            lineStyle: {
              color: "#ced0d1"
            }
          },
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ced0d1", //更改坐标轴文字颜色
              fontSize: 12 //更改坐标轴文字大小
            }
          },
          name: "",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#ced0d1"
            }
          }
        },
        dataZoom: [
          {
            show: true,
            start: 0,
            end: 15,
            height: 18,
            textStyle: {
              color: "#ced0d1"
            }
          },
          {
            type: "inside",
            realtime: true,
            start: 0,
            height: 18,
            end: 15
          }
        ],
        series: seriesFactorValue
      };
      myChart.clear();
      myChart.setOption(option);

      this.init();
    },
    init() {
      // 图形自适应
      let that = this;
      this.$nextTick(() => {
        // 不加延时,会出现获取不到dom的情况
        setTimeout(() => {
          window.addEventListener("resize", function() {
            that.$echarts.resize();
          });
        }, 100);
      });
    },
    async getChart() {
      // 查询图形数据

      let newDatas = this.dataProcessing();
      let response = await this.getHttpDatas(
        this.nozzle.browsingGetDataComparisonList,
        newDatas,
        2,
        2
      );

      this.loading = false;
      // 判断参数是否有值
      if (
        JSON.stringify(response) === "[{}]" ||
        JSON.stringify(response) === "[{},{}]"
      ) {
        this.defaultDrawCanvas();
        return;
      }
      // 有数据情况下,窗口缩小
      this.conditionIcon = ["el-icon-d-arrow-left", "el-icon-d-arrow-left"];
      this.$set(this.conditionHeight, 0, "110px");
      this.$set(this.conditionHeight, 1, "110px");
      this.drawChart(response);
    },
    async dataSourceChanges() {
      // 连接列表渲染

      let datas = await this.getHttpDatas(this.nozzle.queryDataSrouceName, {
        dbType: "Relational"
      });

      let dataBase = [];
      for (let item of datas.values()) {
        dataBase.push({
          value: item
        });
      }
      this.datasSources = dataBase;
    },
    async dataSourceChange(val, flage = 1) {
      // 选择数据表内容,数据变化
      if (flage === 1) {
        this.ruleForm.dataPreviewLists[this.fieldParentIndex]["tableName"] = "";
      }

      let datas = await this.getHttpDatas(
        this.nozzle.getAllTableNameByDateSourceName,
        {
          dataSourceName: val,
          pageSize: 999999,
          pageNo: 1
        }
      );

      let dataBase = [];

      datas.list = datas.list || [];

      for (let item of datas.list.values()) {
        dataBase.push({
          value: item
        });
      }

      // 填充数据表内容
      if (this.fieldParentIndex === 0) {
        this.datasSourceTypes = dataBase;
      } else {
        this.datasSourceTypes1 = dataBase;
      }
    },
    async dataSourceTable(index = 0, flage = 1) {
      // 数据表内容变化发生改变
      this.fieldParentIndex = index;

      // 展开窗口
      this.$set(this.conditionHeight, index, "auto");

      this.conditionIcon[index] = "el-icon-d-arrow-right";

      let val = this.ruleForm.dataPreviewLists[index].tableName;
      let dataBase = this.ruleForm.dataPreviewLists[index].dataSourceName;

      this.sourceFieldChange(dataBase, val, index);
      this.getZdname(dataBase, val, index);

      if (flage === 1) {
        // 清空字段名
        for (let item of this.ruleForm.dataPreviewLists[
          index
        ].queryConditions.values()) {
          item["name"] = "";
        }

        this.ruleForm.dataPreviewLists[index].datas.sourcesField = [];
        this.ruleForm.dataPreviewLists[index].timeColumnName = "";
        this.ruleForm.dataPreviewLists[index].queryColumnNames = [];
      }
    },
    async sourceFieldChange(dataSourceName, tableName, index) {
      /**
       * 检测字段填充
       * @param {String} dataSourceName 连接名称
       * @param {String} tableName 表名称
       */

      const datas = await this.getHttpDatas(
        this.nozzle.getDataStructureByTableName,
        {
          dataSourceName: dataSourceName,
          tableName: tableName
        }
      );

      let isString = 1; //是否是string类型,是为1,否为2
      if (datas["list"].length !== 0) {
        let newDatas = [];
        for (let item of datas["list"].values()) {
          // 判断是否为字符串类型 1 为string 2为date 3
          if (item["columnType"].includes("String")) {
            isString = 1;
          } else if (item["columnType"].includes("Date")) {
            isString = 2;
          } else {
            isString = 3;
          }

          newDatas.push({
            value: item["columnName"],
            isStringL: item["columnName"] + "," + isString
          });
        }

        this.ruleForm.dataPreviewLists[index].datas.sourcesField = newDatas;
      } else {
        this.ruleForm.dataPreviewLists[index].datas.sourcesField = [];
      }
    },
    async getZdname(dataSourceName, tableName, index) {
      // 字段名称
      let response = await this.getHttpDatas(
        this.nozzle.getDataStructureByTableNameAndType,
        {
          dataSourceName: dataSourceName,
          tableName: tableName
        }
      );
      // 填充时间字段和查询字段
      this.ruleForm.dataPreviewLists[index].datas.dateColumn = this.enOrChin(
        response["dateColumn"]
      );
      this.ruleForm.dataPreviewLists[index].datas.numberColumn = this.enOrChin(
        response["numberColumn"]
      );
    },
    enOrChin(datas = []) {
      // 英文转换成中文
      if (datas.length !== 0) {
        let newDevisor = [];
        for (const item of datas.values()) {
          newDevisor.push({
            label: devisor[item.toLowerCase()],
            value: item
          });
        }
        return newDevisor;
      }
    },
    fieldNameFocus(parentIndex = 0, indexs = 0) {
      // 获取当前字段类行数
      this.fieldParentIndex = parentIndex;
      this.fieldIndex = indexs;
    },
    fieldNameChange(val) {
      /**
       * 字段名称
       * @param {Number} parentIndex 是第几个窗口
       * @param {Number} index 是第几行数据
       */
      let isString = val.split(",")[1];

      // 是字符串类型,类型判断只能展示=
      this.ruleForm.dataPreviewLists[this.fieldParentIndex].queryConditions[
        this.fieldIndex
      ].symbol = "";
      this.ruleForm.dataPreviewLists[this.fieldParentIndex].queryConditions[
        this.fieldIndex
      ].value = "";

      if (isString === "1") {
        // string类型
        this.ruleForm.dataPreviewLists[
          this.fieldParentIndex
        ].datas.symbolNum = this.symbolNum2;
        this.ruleForm.dataPreviewLists[this.fieldParentIndex].queryConditions[
          this.fieldIndex
        ].select = true;
      } else if (isString === "2") {
        // 字段值转换成时间框
        this.ruleForm.dataPreviewLists[
          this.fieldParentIndex
        ].datas.symbolNum = this.symbolNum1;

        this.ruleForm.dataPreviewLists[this.fieldParentIndex].queryConditions[
          this.fieldIndex
        ].select = false;
      } else {
        // 默认情况
        this.ruleForm.dataPreviewLists[
          this.fieldParentIndex
        ].datas.symbolNum = this.symbolNum1;
        this.ruleForm.dataPreviewLists[this.fieldParentIndex].queryConditions[
          this.fieldIndex
        ].select = true;
      }
    },
    querySearch(queryString, cb) {
      // 数据表内容填充
      if (this.fieldParentIndex === 0) {
        var restaurants = this.datasSourceTypes;
      } else {
        var restaurants = this.datasSourceTypes1;
      }

      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      if (results.length !== 0) {
        for (let item of results.values()) {
          item["value"] = item["value"];
        }
      }
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return restaurant.value.indexOf(queryString) !== -1;
      };
    },
    filterCondition(index) {
      /**
       * 添加检测字段,修改时刻,渲染并进行赋值
       * @param {Number} index 当前选中的删除区域
       */
      this.ruleForm.dataPreviewLists[index].queryConditions.push({
        name: "",
        symbol: "",
        value: "",
        select: true
      });
    },
    modelAdd() {
      // 新增窗口

      this.ruleForm.dataPreviewLists.push({
        dataSourceName: "", //连接名称
        tableName: "", //数据表名称
        timeColumnName: "", //时间字段名称
        queryColumnNames: [], //待查询字段名称
        datas: {
          //存储改变字段,进行数据区分,比较改变数值,修改不必要字段
          dateColumn: [], //时间字段
          numberColumn: [], //查询字段
          sourcesField: [],
          symbolNum: []
        },
        queryConditions: [
          {
            name: "",
            symbol: "",
            value: ""
          }
        ] //过滤条件
      });

      if (this.ruleForm.dataPreviewLists.length >= 2) {
        this.copyBtn = [false, false];
        this.closeWindow = [true, true];
      }
    },
    deleteWin(parentIndex) {
      // 删除窗口
      this.ruleForm.dataPreviewLists.splice(parentIndex, 1);

      if (this.ruleForm.dataPreviewLists.length === 1) {
        this.closeWindow = [false, false];
        this.copyBtn = [true, true];
      }
    },
    conditional(parentIndex) {
      // 条件窗开关
      // 条件
      if (this.conditionHeight[parentIndex] === "110px") {
        this.$set(this.conditionHeight, parentIndex, "auto");
        this.conditionIcon[parentIndex] = "el-icon-d-arrow-right";
      } else {
        this.$set(this.conditionHeight, parentIndex, "110px");
        this.conditionIcon[parentIndex] = "el-icon-d-arrow-left";
      }
    },
    deleteAutoIcons(fieldName, parentIndex, index) {
      //   删除字段
      this.ruleForm.dataPreviewLists[parentIndex][fieldName].splice(index, 1);
    },
    dataProcessing() {
      // 数据格式处理

      let newDatas = null;
      newDatas = deepClone(this.ruleForm);
      // 输出处理
      for (let [keys, items] of Object.entries(newDatas.dataPreviewLists)) {
        items["queryCondition"] = [];
        items["queryConditions"] = items["queryConditions"] || [];
        // 时间字段名称
        if (items["queryConditions"].length !== 0) {
          for (let [i, v] of Object.entries(items["queryConditions"])) {
            var pa = new RegExp(/(^[\-0-9][0-9]*(.[0-9]+)?)$/);

            // 处理字段值类型是否是string 或者number
            let paVal = "";
            if (v.name.includes("ST")) {
              paVal = "'" + v["value"] + "'";
            } else {
              paVal = pa.test(v["value"])
                ? +v["value"]
                : "'" + v["value"] + "'";
            }
            let da = v["name"].split(",")[0] + " " + v["symbol"] + " " + paVal;

            //过滤条件非必选
            // if (v['name'] === '' || v['symbol'] === '' || v['value'] === '') {
            //   this.$notify({
            //     type: 'warning',
            //     message: '请将数据填充完全,再进行搜索'
            //   })
            //   return
            // }

            items["queryCondition"].push(da);
          }
        }

        delete items["queryConditions"];
        delete items["datas"];
      }

      newDatas["startTime"] = this.dates[0];
      newDatas["endTime"] = this.dates[1];
      return newDatas;
    },
    dermire(dif = 1) {
      //   确定查询
      if (this.programme === "") {
        this.$notify({
          type: "warning",
          message: "请将查询名称填写完整"
        });
        return;
      }

      let newDatas = Object.assign({}, this.ruleForm);
      //查询确定
      const username = localStorage.getItem("USERNO");
      newDatas["name"] = this.programme;

      let api = "";
      if (dif === 1) {
        // 新增
        api = this.nozzle.dataPreviewCreate;
        newDatas["createdby"] = username;
      } else {
        // 修改
        api = this.nozzle.dataPreviewUpdate;
        newDatas["updatedby"] = username;
        newDatas["id"] = JSON.parse(sessionStorage.getItem("dataBrowsing")).id;
        console.log(JSON.parse(sessionStorage.getItem("dataBrowsing")));
        console.log(newDatas["id"]);
      }

      newDatas["queryCondition"] = JSON.stringify(newDatas["dataPreviewLists"]);
      newDatas["startTime"] = this.dates[0];
      newDatas["endTime"] = this.dates[1];
      delete newDatas["dataPreviewLists"];
      this.getHttpDatas(api, newDatas, 2, 2);
    },
    async average() {
      // 展示平均值
      if (this.programme === "") {
        this.$notify({
          type: "warning",
          message: "请将查询名称填写完整"
        });
        return;
      }

      let api = this.nozzle.getRepairDataList;
      let newDatas = this.dataProcessing();

      newDatas["dataPreviewLists"] =
        newDatas["dataPreviewLists"].length === 2
          ? [newDatas["dataPreviewLists"][1]]
          : [newDatas["dataPreviewLists"]];

      // 修改水位和流量参数
      newDatas["dataPreviewLists"][0]["queryColumnNames"] = ["SBL1", "Z"];

      const res = await this.getHttpDatas(api, newDatas, 2, 2);

      this.loading = false;

      // 展开导出功能
      this.showFile = true;

      this.avgDatas = res.repairData;
      // 下载路径
      this.filePath = res.filePath.replace(/\\/g, "/");
    },
    async exprotXlsx() {
      // 导出平均值
      window.location.href = `${this.nozzle.downloadFile}?filePath=${this.filePath}`;
    },
    copyDatas(index) {
      // 复制窗口 参数为当前窗口的索引
      let newDatas = null;
      newDatas = deepClone(this.ruleForm.dataPreviewLists[0]);
      this.ruleForm.dataPreviewLists.push(newDatas);

      this.datasSourceTypes1 = this.datasSourceTypes;

      if (this.ruleForm.dataPreviewLists.length === 2) {
        this.copyBtn = [false, false];
        this.closeWindow = [true, true];
      }
    },
    defaultDrawCanvas() {
      // 默认图形占位
      let keys = {};
      for (let i = 10; i > 0; i--) {
        keys[
          moment()
            .subtract("days", i * 3)
            .format("YYYY-MM-DD HH:mm:ss")
        ] = 0;
      }
      this.drawChart([
        {
          PN: keys
        }
      ]);
    },
    async getPlatform() {
      // 获取产品名称
      console.log(111);
      let res = await this.$http.get(this.nozzle.getProjectName);
      res = res.data ? res.data.data : "滤网";
      headTitle(res);
    }
  }
};
</script>
<style>
#dataBrowsingQuery {
  height: 98%;
  background-color: #fff;
  overflow-x: hidden;
}
.el-date-editor .el-range__close-icon,
.el-date-editor .el-range__icon {
  line-height: 23px;
}

.el-input__prefix {
  top: -4px !important;
}

.btns {
  height: 90px;
  line-height: 76px;
  overflow: hidden;
  padding: 20px;
}
.btns .dateSearch {
  height: 31px;
}

.btns .el-date-editor.el-input__inner {
  width: 377px !important;
  height: 31px;
}

.searchButton span {
  line-height: 20px;
}

.conditionContent {
  padding: 0 23px;
}

.conditionContent1 {
  margin-top: 23px;
}

/* // 搜索条件 */
.searchCondition {
  width: 100%;

  padding: 20px 20px 0 20px;
  overflow: hidden;
}

.searchCondition .condition {
  position: relative;
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(111, 165, 255, 1);
  box-shadow: 0px 3px 20px 0px #1890ff1a;
  margin-bottom: 20px;
  overflow: hidden;
  transition: all 1s;
}
.searchCondition .condition .el-autocomplete {
  width: 100%;
}

/* // 标记 */
.condition .sign {
  text-align: left;
  color: #fff;
  position: relative;
  line-height: 35px;
  font-size: 16px;
  /* background-color: #EFF5FCFF; */
  padding-right: 15px;
  padding-left: 23px;
}
/* .searchCondition .condition  &>span {
            cursor: pointer;
          } */

.f_right {
  float: right;
}
.deleteBtns {
  width: 24px;
  height: 24px;
  color: #333333ff;
  margin-right: 8px;
  margin-top: 6px;
  background-color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  cursor: pointer;
}

/* // 打开当前按钮 */
/* .telescopic {
          .deleteBtns();
          margin-right: 8px;
        } */

.icon-jia {
  color: var(--white) !important;
}
.aboutType {
  padding-left: 15px;
}

.addendumNames {
  text-align: left;
  padding-left: 10px;
  cursor: pointer;
  line-height: 40px;
  color: #f15353;
}

/* // 添加按钮 */
.addFilter {
  padding-left: 80px;
  text-align: center;
}
.addFilter span {
  position: absolute;
  width: 150px;
  top: 126px;
  left: 46%;
  border: 1px dashed #ccc;
  height: 31px;
  line-height: 31px;
  cursor: pointer;
}

/* // 图形展示 */
#charts {
  width: 100%;
  height: 400px;
  margin: 20px 0;
  text-align: center;
}

/* // 时间选择框 */
.el-range-editor--mini .el-range-separator {
  line-height: 27px;
}

.el-table .cell {
  text-align: center;
}
</style>