xy-frontend/src/views/iceWeather/icing/index.vue

<template>
  <div class="icingBox">
    <div class="icingContain">
      <leftTree ref="sideTree"></leftTree>
      <div class="rightTable">
        <div class="dataBox">
          <div class="childBox">
            <div class="searchBox" ref="searchref">
              <el-form
                :inline="true"
                :model="formdata"
                class="demo-form-inline"
              >
                <el-form-item label="开始日期">
                  <el-date-picker
                    v-model="formdata.starttime"
                    type="date"
                    placeholder="开始日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期">
                  <el-date-picker
                    @change="changedate"
                    v-model="formdata.endtime"
                    type="date"
                    placeholder="结束日期"
                    class="ml10"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="exportExcl"
                    >导出数据</el-button
                  >
                </el-form-item>
                <el-form-item v-if="termalFlag">
                  <el-button
                    v-if="!echartsShow"
                    type="primary"
                    @click="lookLineCharts"
                    >曲线图</el-button
                  >
                  <el-button
                    v-if="echartsShow"
                    type="primary"
                    @click="lookTableCharts"
                    >列表数据</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <div class="childTableShowBox" v-if="!echartsShow">
              <el-table
                :data="tableData"
                style="width: 100%"
                v-loading="loading"
                height="calc(100% - 0px)"
              >
                <el-table-column
                  prop="cmdid"
                  label="监测终端编号"
                ></el-table-column>
                <el-table-column
                  prop="updateTime"
                  label="时间"
                  min-width="120px"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.updateTime">
                      {{
                        $moment(scope.row.updateTime * 1000).format(
                          "YYYY-MM-DD HH:mm:ss"
                        )
                      }}</span
                    >
                    <span v-else> - </span>
                  </template>
                </el-table-column>
                <el-table-column prop="funcCode" label="功能单元识别码">
                  <template slot-scope="scope">
                    <span v-if="scope.row.funcCodeName && scope.row.funcCode">
                      {{ scope.row.funcCodeName }}({{
                        scope.row.funcCodeHex
                      }})</span
                    ><span v-else-if="scope.row.funcCodeHex"
                      >({{ scope.row.funcCodeHex }})</span
                    >
                    <span v-else> - </span>
                  </template>
                </el-table-column>
                <el-table-column prop="maxPull" label="最大拉力(Kg)">
                  <template slot-scope="scope">
                    <span v-if="scope.row.maxPull != 65535">
                      {{ scope.row.maxPull }}</span
                    >
                    <span v-else> - </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="maxPullWind"
                  label="最大拉力时风偏角(°)"
                ></el-table-column>
                <el-table-column
                  prop="maxPullTilt"
                  label="最大拉力时倾斜角(°)"
                ></el-table-column>
                <el-table-column prop="minPull" label="最小拉力(Kg)">
                  <template slot-scope="scope">
                    <span v-if="scope.row.minPull != 65535">
                      {{ scope.row.minPull }}</span
                    >
                    <span v-else> - </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="minPullWind"
                  label="最小拉力时风偏角(°)"
                ></el-table-column>
                <el-table-column
                  prop="minPullTilt"
                  label="最小拉力时倾斜角(°)"
                ></el-table-column>
                <el-table-column
                  prop="maxWind"
                  label="最大风偏角(°)"
                ></el-table-column>
                <el-table-column
                  prop="maxWindTilt"
                  label="最大风偏角时倾斜角(°)"
                ></el-table-column>
                <el-table-column
                  prop="maxWindPull"
                  label="最大风偏角时拉力(Kg)"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.maxWindPull != 65535">
                      {{ scope.row.maxWindPull }}</span
                    >
                    <span v-else> - </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="minWind"
                  label="最小风偏角(°)"
                ></el-table-column>
                <el-table-column
                  prop="minWindTilt"
                  label="最小风偏角时倾斜角(°)"
                ></el-table-column>
                <el-table-column
                  prop="minWindPull"
                  label="最小风偏角时拉力(Kg)"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.minWindPull != 65535">
                      {{ scope.row.minWindPull }}</span
                    >
                    <span v-else> - </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="pageNation" v-if="!echartsShow">
              <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page="page"
                :page-size="pageSize"
                layout="sizes, prev, pager, next, jumper,total"
                :total="total"
              >
              </el-pagination>
            </div>
            <div class="graphBox" v-if="echartsShow">
              <div
                class="codeBox1"
                v-for="(item, index) in codeList"
                :key="index"
              >
                <h3>相位(标识): ({{ item }})</h3>
                <div class="codeBox">
                  <div :id="'lineEchart' + index" class="lineChartBox"></div>
                </div>
              </div>
              <div class="noDatabox" v-if="codeList.length == 0">
                <img src="../../../assets/img/nopic1.jpg" />
                <p>暂无图表</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import leftTree from "../components/leftTree.vue";
import { getDataListJoggle, funccodeJoggle } from "@/utils/api/index";
export default {
  name: "icing",
  components: {
    leftTree,
  },
  data() {
    return {
      loading: false,
      tableData: [],
      formdata: {},
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      qt: "",
      id: "",
      termId: "",
      paramsData: "",
      termalFlag: false, //是否是子节点显示  曲线图按钮
      echartsShow: false, //显示曲线图页面
      codeList: [], //相位码
      chartsData: [],
    };
  },
  watch: {
    endtime(newVal) {
      if (newVal) {
        const date = new Date(newVal);
        date.setHours(23);
        date.setMinutes(59);
        date.setSeconds(59);
        this.formdata.endtime = date.getTime();
      }
    },
  },
  created() {
    var that = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        that.onSubmit(); // 触发事件
      }
    };
    this.$set(
      this.formdata,
      "starttime",
      new Date(new Date().toLocaleDateString()).getTime()
    );
    const currentDate = new Date(); // 获取当前时间
    currentDate.setHours(23); // 设置小时为23
    currentDate.setMinutes(59); // 设置分钟为59
    currentDate.setSeconds(59); // 设置秒数为59
    this.$set(this.formdata, "endtime", currentDate.getTime());
  },
  mounted() {},
  methods: {
    getCurrentData(data) {
      console.log("执行父组件", data);
      this.paramsData = data;
      console.log(data);
      if (data.dyValue) {
        console.log("电压-公司");
        this.qt = "all";
        this.id = data.id;
        this.getIcingData(data);
        this.termalFlag = false;
      } else if (data.bsManufacturer) {
        console.log("线路-电压");
        this.qt = "line";
        this.id = data.id;
        this.getIcingData(data);
        this.termalFlag = false;
      } else {
        console.log("装置-杆塔");
        this.qt = "tower";
        this.id = data.towerid;
        this.termId = data.id;
        this.getIcingData(data);
        this.termalFlag = true;
      }
    },
    //覆冰数数据
    getIcingData(data) {
      console.log(data, this.qt);
      const sTime = Math.floor(this.formdata.starttime / 1000);
      const eTime = Math.floor(this.formdata.endtime / 1000);
      this.loading = true;
      getDataListJoggle({
        act: "ice_weight",
        qt: this.qt,
        id: this.id,
        bt: sTime,
        et: eTime,
        p: this.page,
        ps: this.pageSize,
      })
        .then((res) => {
          console.log(res);
          this.tableData = res.data;
          this.total = Number(res.page.totalRecords);
          this.loading = false;
          this.echartsShow = false;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },

    lookLineCharts() {
      //获取相位码和数据
      this.echartsShow = true;
      console.log("点击了曲线");
      this.$nextTick(() => {
        this.getchartsData(this.paramsData);
      });
    },
    //获取当天的数据
    getchartsData(data) {
      console.log(data, this.qt);
      const sTime = Math.floor(this.formdata.starttime / 1000);
      const eTime = Math.floor(this.formdata.endtime / 1000);
      this.loading = true;
      getDataListJoggle({
        act: "ice_weight",
        qt: this.qt,
        id: this.id,
        bt: sTime,
        et: eTime,
        p: 1,
        ps: 10000000,
      })
        .then((res) => {
          console.log(res);
          this.chartsData = res.data;
          this.$nextTick(() => {
            this.drawLine();
          });
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    lookTableCharts() {
      this.echartsShow = false;
      this.loading = false;
    },
    drawLine() {
      console.log(this.chartsData);
      var timeXData = [];
      var legendData = [
        "最大拉力",
        "最大拉力时风偏角",
        "最大拉力时倾斜角",
        "最小拉力",
        "最小拉力时风偏角",
        "最小拉力时倾斜角",
        "最大风偏角",
        "最大风偏角时倾斜角",
        "最大风偏角时拉力",
        "最小风偏角",
        "最小风偏角时倾斜角",
        "最小风偏角时拉力",
      ];
      timeXData = this.chartsData.map((item) =>
        this.$moment(item.updateTime * 1000).format("YYYY-MM-DD HH:mm:ss")
      );
      timeXData = [...new Set(timeXData)];
      //console.log(timeXData);
      // var codename = [
      //   ...new Set(this.chartsData.map((item) => item.funcCodeName)),
      // ];
      var code = [...new Set(this.chartsData.map((item) => item.funcCodeHex))];

      this.codeList = code;
      // var finalData = [];
      console.log(this.codeList);
      const groupedData = this.chartsData.reduce((acc, item) => {
        if (!acc[item.funcCodeHex]) {
          acc[item.funcCodeHex] = [];
        }
        acc[item.funcCodeHex].push(item);
        return acc;
      }, []);

      const result = Object.values(groupedData)
        .map((arr) => [...arr])
        .reverse();

      console.log(result);
      this.$nextTick(() => {
        var roseCharts = document.querySelectorAll(".codeBox");
        console.log(roseCharts);
        for (var i = 0; i < roseCharts.length; i++) {
          // console.log(result[i]);
          // console.log(
          //   "最大封片叫拉力",
          //   result[i].map((item) => item.minWindPull)
          // );

          // 通过for循环，在相同class的dom内绘制元素
          var myChart = this.$echarts.init(roseCharts[i]);
          var option = {
            // toolbox: {
            //   feature: {
            //     dataZoom: {
            //       yAxisIndex: "none",
            //     },
            //     restore: {},
            //     saveAsImage: {},
            //   },
            // },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                animation: false,
                label: {
                  backgroundColor: "#505765",
                },
              },
            },
            legend: {
              data: legendData,
              selected: {
                最大拉力: true,
                最大拉力时风偏角: false,
                最大拉力时倾斜角: false,
                最小拉力: false,
                最小拉力时风偏角: false,
                最小拉力时倾斜角: false,
                最大风偏角: false,
                最大风偏角时倾斜角: false,
                最大风偏角时拉力: false,
                最小风偏角: false,
                最小风偏角时倾斜角: false,
                最小风偏角时拉力: false,
              },
              // left: 10,
            },
            dataZoom: [
              {
                show: true,
                realtime: true,
                start: 0,
                end: 100,
              },
              {
                type: "inside",
                realtime: true,
                start: 0,
                end: 100,
              },
            ],
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                axisLine: { onZero: false },
                // prettier-ignore
                data: timeXData,
              },
            ],
            yAxis: [
              {
                name: "拉力(Kg)",
                type: "value",
              },
              {
                name: "偏角（°）",
                alignTicks: true,
                type: "value",
                // inverse: true
              },
            ],
            series: [
              {
                name: "最大拉力",
                type: "line",
                data: result[i].map((item) =>
                  item.maxPull == 65535 ? "" : item.maxPull
                ),
              },
              {
                name: "最小拉力",
                type: "line",
                data: result[i].map((item) =>
                  item.minPull == 65535 ? "" : item.minPull
                ),
              },
              {
                name: "最大风偏角时拉力",
                type: "line",

                data: result[i].map((item) =>
                  item.maxWindPull == 65535 ? "" : item.maxWindPull
                ),
              },
              {
                name: "最小风偏角时拉力",
                type: "line",

                data: result[i].map((item) =>
                  item.minWindPull == 65535 ? "" : item.minWindPull
                ),
              },
              {
                name: "最大拉力时风偏角",
                type: "line",
                yAxisIndex: 1,
                // prettier-ignore
                data: result[i].map((item) => item.maxPullWind),
              },
              {
                name: "最大拉力时倾斜角",
                type: "line",
                yAxisIndex: 1,
                // prettier-ignore
                data: result[i].map((item) => item.maxPullTilt),
              },
              {
                name: "最小拉力时风偏角",
                type: "line",
                yAxisIndex: 1,
                // prettier-ignore
                data: result[i].map((item) => item.minPullWind),
              },
              {
                name: "最小拉力时倾斜角",
                type: "line",
                yAxisIndex: 1,
                // prettier-ignore
                data: result[i].map((item) => item.minPullTilt),
              },
              {
                name: "最大风偏角",
                type: "line",
                yAxisIndex: 1,
                // prettier-ignore
                data:result[i].map((item) => item.maxWind),
              },
              {
                name: "最大风偏角时倾斜角",
                type: "line",
                yAxisIndex: 1,
                // prettier-ignore
                data:result[i].map((item) => item.maxWindTilt),
              },
              {
                name: "最小风偏角",
                type: "line",
                yAxisIndex: 1,
                // prettier-ignore
                data: result[i].map((item) => item.minWind),
              },
              {
                name: "最小风偏角时倾斜角",
                type: "line",
                yAxisIndex: 1,
                // prettier-ignore
                data: result[i].map((item) => item.minWindTilt),
              },
            ],
          };
          myChart.setOption(option);
          console.log("我执行了");
          window.addEventListener("resize", () => {
            myChart.resize();
          });
        }
      });
    },

    //结束日期
    changedate() {
      console.log(new Date(this.formdata.endtime));
      const currentDate = new Date(this.formdata.endtime); // 获取当前时间
      currentDate.setHours(23); // 设置小时为23
      currentDate.setMinutes(59); // 设置分钟为59
      currentDate.setSeconds(59); // 设置秒数为59
      this.formdata.endtime = currentDate;
      console.log("结束时间", this.formdata.endtime);
    },
    exportExcl() {
      const sTime = Math.floor(this.formdata.starttime / 1000);
      const eTime = Math.floor(this.formdata.endtime / 1000);
      // window.location.href = "/api/api/getOnlineTerminalListExcel?type=" + val;
      window.location.href =
        "/api/xapi/query.php?act=ice_weight&qt=" +
        this.qt +
        "&id=" +
        this.id +
        "&bt=" +
        sTime +
        "&et=" +
        eTime +
        "&p=1&ps=20&exp=xls";
    },
    onSubmit() {
      console.log(this.formdata.starttime, this.formdata.endtime);
      // if (
      //   new Date(this.formdata.starttime).getDate() ===
      //   new Date(this.formdata.endtime).getDate()
      // ) {
      //   this.getIcingData(this.paramsData);
      //   console.log("开始时间和结束时间为同一天");
      // } else {
      //   this.$message({
      //     duration: 1500,
      //     showClose: true,
      //     message: "请选择同一天",
      //     type: "warning",
      //   });
      //   return;
      //   console.log("开始时间和结束时间不是同一天");
      // }
      this.getIcingData(this.paramsData);
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.tableData = [];
      this.getIcingData(this.paramsData);
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.tableData = [];
      this.getIcingData(this.paramsData);
    },
  },
};
</script>
<style lang="less">
.icingBox {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  padding: 12px 12px;
  background: #fff;
  .icingContain {
    display: flex;
    height: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .rightTable {
    display: flex;
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
    border-left: 1px solid #ddd;
    .el-table .el-table__cell {
      text-align: center;
    }
    .dataBox {
      width: calc(100% - 24px);
      height: calc(100% - 24px);
      padding: 12px 12px;
      background: #fff;
    }
    // .fatherTableShowBox {
    //   height: calc(100% - 0px);
    // }
    .childBox {
      height: calc(100% - 0px);
      .childTableShowBox {
        height: calc(100% - 91px);
      }
    }
    .graphBox {
      margin: 0 auto;
      height: calc(100% - 54px);
      overflow: auto;
      .codeBox1 {
        width: 100%;
        height: 500px;
        h3 {
          font-size: 14px;
          color: #333;
          margin-top: 8px;
          margin-bottom: 8px;
          font-weight: normal;
          text-align: center;
        }
        .codeBox {
          width: 100%;
          height: 450px;
        }
        .lineChartBox {
          width: 100%;
          height: 372px;
        }
      }
      .noDatabox {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        img {
          width: 400px;
        }
        p {
          font-size: 16px;
        }
      }
    }
  }
}
</style>