<template>
  <div class="app-container">
    <el-row :gutter="28">
      <el-col :span="5" :xs="24">
        <div class="head-container">
          <el-input
            v-model="filterBoxName"
            placeholder="请输入母排名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <div class="tree-container">
            <el-tree
              :data="InfoOptions"
              :props="props"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="id"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"

            />

          </div>
        </div>
      </el-col>
      <el-col :span="19" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="100px"
        >
          <!--          <el-form-item label="计量设备编号" prop="monitorCode">-->
          <!--            <el-input-->
          <!--              v-model="queryParams.monitorCode"-->
          <!--              placeholder="请输入计量设备编号"-->
          <!--              clearable-->
          <!--              @keyup.enter.native="handleQuery"-->
          <!--            />-->
          <!--          </el-form-item>-->
          <el-form-item label="记录时间">
            <el-date-picker
              v-model="daterangeRecordTime"
              style="width: 340px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <Chart ref="Chart1" class="chart1"/>
        <Chart ref="Chart2" class="chart2"/>
        <Chart ref="Chart3" class="chart3"/>
        <Chart ref="Chart4" class="chart4"/>
      </el-col>
    </el-row>


  </div>
</template>

<script>


import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { parseTime } from '@/utils/ruoyi'
import Chart from '@/components/Charts/Chart'
import * as echarts from 'echarts'

import {
  addRecordBusbarTemp, busbarTempCurve,
  CabinetAndBusbarTree,
  delRecordBusbarTemp, getRecordBusbarTemp, listRecordBusbarTemp,
  updateRecordBusbarTemp
} from "@/api/record/recordBusbarTemp";

export default {
  name: 'recordBusbarTempCurve',

  components: {
    Chart,
    Treeselect
  },
  data() {
    return {
    //电柜信息下拉树选项
    InfoOptions: [],
      //左侧树结构筛选框
      filterBoxName: undefined,
      props:{
      children: 'children',
        label: 'label'
      /*        label: (data) => `(编号${data.code}) ${data.label} `*/
    },

    // 遮罩层
    loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 母排测温信息表格数据
      recordBusbarTempList: [],
      // 弹出层标题
      title: "",
      // 图片显示标题
      photoTitle: "",
      // 是否显示弹出层
      open: false,
      // 是否显示图片显示
      photoOpen: false,
      // 记录时间时间范围
      daterangeCreatedTime: [],
      // 记录时间时间范围
      daterangeUpdatedTime: [],
      // 记录时间时间范围
      daterangeRecordTime: [],
      // 查询参数
      queryParams: {
      pageNum: 1,
        pageSize: 10,
        objId: null,
        busbarCode: null,
        cabinetCode: null,
        tempMax: null,
        tempMin: null,
        tempAvg: null,
        tempDiff: null,
        isAlarm: null,
        filePath: null,
        isFlag: null,
        remark: null,
        createdBy: null,
        createdTime: null,
        updatedBy: null,
        updatedTime: null,
        recordTime: null
    },
    // 表单参数
    form: {},
    // 表单校验
    rules: {
      busbarCode: [
        { required: true, message: "母排编号不能为空", trigger: "blur" }
      ],
        cabinetCode: [
        { required: true, message: "电柜编号不能为空", trigger: "blur" }
      ],
    },
  };
  },
  created() {
    const nowDate = parseTime(new Date(), '{y}-{m}-{d}')
    this.daterangeRecordTime[0] = nowDate + ' 00:00:00'
    this.daterangeRecordTime[1] = nowDate + ' 23:59:59'
    this.getTreeselect()
    this.getList()
  },
  watch: {
    filterBoxName(val){
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    /** 查询母排测温信息列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};

      if (null != this.daterangeRecordTime && '' != this.daterangeRecordTime) {
        this.queryParams.params["beginRecordTime"] = this.daterangeRecordTime[0];
        this.queryParams.params["endRecordTime"] = this.daterangeRecordTime[1];
      }
      this.getChart()
    },
    /** 查询电柜下拉树结构 */
    getTreeselect() {
      CabinetAndBusbarTree({}).then(response => {
        this.InfoOptions = response.data
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.busbarCode = data.code
      this.selectBusbarName = data.label
      this.handleQuery()
    },


    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.objId != null) {
            updateRecordBusbarTemp(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addRecordBusbarTemp(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const objIds = row.objId || this.ids;
      this.$modal.confirm('是否确认删除母排测温信息编号为"' + objIds + '"的数据项？').then(function() {
        return delRecordBusbarTemp(objIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('record/recordBusbarTemp/export', {
        ...this.queryParams
      }, `recordBusbarTemp_${new Date().getTime()}.xlsx`)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeCreatedTime = [];
      this.daterangeUpdatedTime = [];
      this.daterangeRecordTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.objId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加母排测温信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const objId = row.objId || this.ids
      getRecordBusbarTemp(objId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改母排测温信息";
      });
    },
    // 表单重置
    reset() {
      this.form = {
        objId: null,
        busbarCode: null,
        cabinetCode: null,
        tempMax: null,
        tempMin: null,
        tempAvg: null,
        tempDiff: null,
        isAlarm: null,
        filePath: null,
        isFlag: null,
        remark: null,
        createdBy: null,
        createdTime: null,
        updatedBy: null,
        updatedTime: null,
        recordTime: null,
        photoOpen : false,
        visiblePhoto : null,
        thermalPhoto : null,
        thermalResponse : null,
        visibleResponse : null,
      };
      this.resetForm("form");
      this.photoOpen = false;
      this.visiblePhoto = null;
      this.thermalPhoto = null;
      this.thermalResponse = null;
      this.visibleResponse = null;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.photoOpen = false;
    },


    /** 母排测温曲线 */
    async getChart() {
      if (this.queryParams.busbarCode == null) {
        return
      }
      let query = JSON.parse(JSON.stringify(this.queryParams))
      const {data} = await busbarTempCurve(query)
      let option1 = {
        title: {
          text: this.selectBusbarName + ' 最高温度曲线',
          x: 'center'
        },
        grid: {
          top: '15%',
          bottom: '10%',
          left: '10%',
          right: '3%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        dataZoom: [{
          type: 'slider'
        }],
        legend: {
          right: 0
        },
        xAxis: {
          data: data.map(e => e.recordTime),
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#000000'
            }
          },
          axisTick: {
            show: true //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000000' //X轴文字颜色
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '温度(℃)',
            nameTextStyle: {
              color: '#000000'
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#000000'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000000'
              }
            }
          }
        ],
        series: [
          {
            name: '温度(℃)',
            type: 'line',
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            // itemStyle: {
            //   //折线拐点标志的样式
            //   color: "#058cff",
            // },
            // lineStyle: {
            //   color: "#058cff",
            // },
            // areaStyle: {
            //   color: "rgba(5,140,255, 0.2)",
            // },
            data: data.map(e => e.tempMax)
          },
        ]
      }
      let option2 = {
        title: {
          text: this.selectBusbarName + ' 最低温度曲线',
          x: 'center'
        },
        grid: {
          top: '15%',
          bottom: '10%',
          left: '10%',
          right: '3%'
        },

        dataZoom: [{
          type: 'slider'
        }],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        legend: {
          right: 0
        },
        xAxis: {
          data: data.map(e => e.recordTime),
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#000000'
            }
          },
          axisTick: {
            show: true //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000000' //X轴文字颜色
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '温度(℃)',
            nameTextStyle: {
              color: '#000000'
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#000000'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000000'
              }
            }
          }
        ],
        series: [
          {
            name: '温度(℃)',
            type: 'line',
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            // itemStyle: {
            //   //折线拐点标志的样式
            //   color: "#058cff",
            // },
            // lineStyle: {
            //   color: "#058cff",
            // },
            // areaStyle: {
            //   color: "rgba(5,140,255, 0.2)",
            // },
            data: data.map(e => e.tempMin)
          },
        ]
      }
      let option3 = {
        title: {
          text: this.selectBusbarName + ' 平均温度曲线',
          x: 'center'
        },
        grid: {
          top: '15%',
          bottom: '10%',
          left: '10%',
          right: '3%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        dataZoom: [{
          type: 'slider'
        }],
        legend: {
          right: 0
        },
        xAxis: {
          data: data.map(e => e.recordTime),
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#000000'
            }
          },
          axisTick: {
            show: true //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000000' //X轴文字颜色
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '平均温度',
            nameTextStyle: {
              color: '#000000'
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#000000'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000000'
              }
            }
          }
        ],
        series: [
          {
            name: '平均温度℃',
            type: 'line',
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            // itemStyle: {
            //   //折线拐点标志的样式
            //   color: "#058cff",
            // },
            // lineStyle: {
            //   color: "#058cff",
            // },
            // areaStyle: {
            //   color: "rgba(5,140,255, 0.2)",
            // },
            data: data.map(e => e.tempAvg)
          },
        ]
      }
      let option4 = {
        title: {
          text: this.selectBusbarName + ' 温差曲线',
          x: 'center'
        },
        grid: {
          top: '15%',
          bottom: '10%',
          left: '10%',
          right: '3%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        dataZoom: [{
          type: 'slider'
        }],
        legend: {
          right: 0
        },
        xAxis: {
          data: data.map(e => e.recordTime),
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#000000'
            }
          },
          axisTick: {
            show: true //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000000' //X轴文字颜色
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '温差',
            nameTextStyle: {
              color: '#000000'
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#000000'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000000'
              }
            }
          }
        ],
        series: [
          {
            name: '温差',
            type: 'line',
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            // itemStyle: {
            //   color: "#058cff",
            // },
            // lineStyle: {
            //   color: "#058cff",
            // },
            // areaStyle: {
            //   color: "rgba(5,140,255, 0.2)",
            // },
            data: data.map(e => e.tempDiff)
          },
        ]
      }
      this.$refs.Chart1.setData(option1)
      this.$refs.Chart2.setData(option2)
      this.$refs.Chart3.setData(option3)
      this.$refs.Chart4.setData(option4)
      echarts.connect(this.$refs.Chart1.chart, this.$refs.Chart2.chart, this.$refs.Chart3.chart, this.$refs.Chart4.chart)
      this.$refs.Chart1.chart.on('datazoom', (e) => {
        option2.dataZoom[0].start = e.start
        option2.dataZoom[0].end = e.end
        this.$refs.Chart2.setData(option2)
        option3.dataZoom[0].start = e.start
        option3.dataZoom[0].end = e.end
        this.$refs.Chart3.setData(option3)
        option4.dataZoom[0].start = e.start
        option4.dataZoom[0].end = e.end
        this.$refs.Chart4.setData(option4)
      })
      this.$refs.Chart2.chart.on('datazoom', (e) => {
        option1.dataZoom[0].start = e.start
        option1.dataZoom[0].end = e.end
        this.$refs.Chart1.setData(option1)
        option3.dataZoom[0].start = e.start
        option3.dataZoom[0].end = e.end
        this.$refs.Chart3.setData(option3)
        option4.dataZoom[0].start = e.start
        option4.dataZoom[0].end = e.end
        this.$refs.Chart4.setData(option4)
      })
      this.$refs.Chart3.chart.on('datazoom', (e) => {
        option2.dataZoom[0].start = e.start
        option2.dataZoom[0].end = e.end
        this.$refs.Chart2.setData(option2)
        option1.dataZoom[0].start = e.start
        option1.dataZoom[0].end = e.end
        this.$refs.Chart1.setData(option1)
        option4.dataZoom[0].start = e.start
        option4.dataZoom[0].end = e.end
        this.$refs.Chart4.setData(option4)
      })
      this.$refs.Chart4.chart.on('datazoom', (e) => {
        option2.dataZoom[0].start = e.start
        option2.dataZoom[0].end = e.end
        this.$refs.Chart2.setData(option2)
        option3.dataZoom[0].start = e.start
        option3.dataZoom[0].end = e.end
        this.$refs.Chart3.setData(option3)
        option1.dataZoom[0].start = e.start
        option1.dataZoom[0].end = e.end
        this.$refs.Chart4.setData(option1)
      })
    }
  }
}
</script>
<style scoped>
.chart1 {
  width: 50%;
  height: 40vh;
  display: inline-block;
}
.chart2 {
  width: 50%;
  height: 40vh;
  display: inline-block;
}
.chart3 {
  width: 50%;
  height: 40vh;
  display: inline-block;
}
.chart4 {
  width: 50%;
  display: inline-block;
  height: 40vh;
}
.tree-container {
  height: 666px; /* 设置固定高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}
</style>
