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

<template>
  <div class="weatherBox">
    <div class="weatherContain">
      <leftTree ref="sideTree"></leftTree>
      <div class="rightTable">
        <div class="dataBox">
          <div class="fatherTableShowBox" v-if="!childFlag">
            <el-table
              :data="tableData"
              style="width: 100%"
              v-loading="loading"
              height="calc(100% - 40px)"
            >
              <el-table-column prop="lineName" label="线路"> </el-table-column>
              <el-table-column prop="towerName" label="杆塔"> </el-table-column>
              <el-table-column prop="cmdid" label="终端"> </el-table-column>

              <el-table-column prop="updateTime" label="时间">
                <template slot-scope="scope">
                  <span v-if="scope.row.lastWeathers !== null">
                    {{
                      $moment(scope.row.lastWeathers.updateTime * 1000).format(
                        "YYYY-MM-DD HH:mm:ss"
                      )
                    }}</span
                  >
                  <span v-else> - </span>
                </template>
              </el-table-column>
              <el-table-column label="温度(℃)">
                <template slot-scope="scope">
                  <span v-if="scope.row.lastWeathers !== null">{{
                    scope.row.lastWeathers.airTemperature.toFixed(1)
                  }}</span>
                  <span v-else> - </span>
                </template>
              </el-table-column>
              <el-table-column prop="humidity" label="湿度(%RH)">
                <template slot-scope="scope">
                  <span v-if="scope.row.lastWeathers !== null"
                    ><span v-if="scope.row.lastWeathers.humidity != 65535">
                      {{ scope.row.lastWeathers.humidity.toFixed(1) }}</span
                    ><span v-else> - </span></span
                  >
                  <span v-else> - </span>
                </template>
              </el-table-column>
              <el-table-column prop="maxWindSpeed" label="最大风速(m/s)">
                <template slot-scope="scope">
                  <span v-if="scope.row.lastWeathers !== null">{{
                    scope.row.lastWeathers.maxWindSpeed.toFixed(1)
                  }}</span>
                  <span v-else> - </span>
                </template>
              </el-table-column>
              <el-table-column prop="windDirection" label="瞬时风向(°)">
                <template slot-scope="scope">
                  <span
                    v-if="
                      scope.row.lastWeathers !== null &&
                      scope.row.lastWeathers.windDirection !== null
                    "
                    >{{ scope.row.lastWeathers.windDirection.toFixed(1) }}</span
                  >
                  <span v-else> - </span>
                </template>
              </el-table-column>
              <el-table-column prop="precipitation" label="雨量(mm/hour)">
                <template slot-scope="scope">
                  <span v-if="scope.row.lastWeathers !== null">{{
                    scope.row.lastWeathers.precipitation.toFixed(1)
                  }}</span>
                  <span v-else> - </span>
                </template>
              </el-table-column>
              <el-table-column prop="airPressure" label="气压(hPa(百帕))">
                <template slot-scope="scope">
                  <span v-if="scope.row.lastWeathers !== null">{{
                    scope.row.lastWeathers.airPressure.toFixed(1)
                  }}</span>
                  <span v-else> - </span>
                </template>
              </el-table-column>
              <el-table-column prop="radiationIntensity" label="日照(W/m2)">
                <template slot-scope="scope">
                  <span v-if="scope.row.lastWeathers !== null"
                    ><span
                      v-if="scope.row.lastWeathers.radiationIntensity != 65535"
                    >
                      {{
                        scope.row.lastWeathers.radiationIntensity.toFixed(0)
                      }}</span
                    ><span v-else> - </span></span
                  >
                  <span v-else> - </span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="moreDataClick(scope.row)"
                    v-if="scope.row.lastWeathers !== null"
                    >更多历史数据</el-button
                  >
                  <span v-else> 没有数据</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="pageNation">
              <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>
          <div class="childBox" v-else>
            <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>
            </div>
            <div class="termalBox">
              <p>
                <span class="text"
                  >线路:{{ childMsg.lineName || childMsg.lineName }}</span
                >
                <span class="text"
                  >杆塔:{{ childMsg.towerName || childMsg.name }}</span
                >
                <span class="text">终端:{{ childMsg.cmdid }}</span>
              </p>
              <div class="gropBtn">
                <el-button type="text" @click="onWdLine" icon="el-icon-odometer"
                  >温度趋势</el-button
                >
                <el-button
                  type="text"
                  @click="onSdLine"
                  icon="el-icon-heavy-rain"
                  >湿度趋势</el-button
                >
              </div>
            </div>
            <!-- <div class="echartsBox">
              <div class="btnbox">
                <el-button type="primary" @click="onWdLine"
                  >温度变化趋势</el-button
                >
                <el-button type="primary" @click="onSdLine"
                  >湿度变化趋势</el-button
                >
                <el-button type="primary" @click="onHidden">隐藏图表</el-button>
              </div>
              <div id="wDechart" class="chartClass" v-show="wdFlag"></div>
              <div id="sDechart" class="chartClass" v-show="sdFlag"></div>
            </div> -->

            <div class="childTableShowBox">
              <el-table
                :data="childTableDate"
                style="width: 100%"
                v-loading="loading"
                height="calc(100% - 2px)"
              >
                <el-table-column prop="updateTime" label="时间" width="138px">
                  <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="airTemperature"
                  label="温度(℃)"
                ></el-table-column>
                <el-table-column prop="humidity" label="湿度(%RH)">
                  <template slot-scope="scope">
                    <span v-if="scope.row.humidity != 65535">
                      {{ scope.row.humidity.toFixed(1) }}</span
                    >
                    <span v-else> - </span>
                  </template>
                </el-table-column>
                <el-table-column prop="maxWindSpeed" label="瞬时风速(m/s)">
                  <template slot-scope="scope">
                    <span> {{ scope.row.maxWindSpeed.toFixed(1) }} </span>
                  </template></el-table-column
                >
                <el-table-column
                  prop="windDirection"
                  label="瞬时风向(°)"
                ></el-table-column>
                <el-table-column
                  prop="precipitation"
                  label="雨量(mm/hour)"
                ></el-table-column>
                <el-table-column
                  prop="airPressure"
                  label="气压(hPa(百帕))"
                ></el-table-column>
                <el-table-column prop="radiationIntensity" label="日照(W/m2)">
                  <template slot-scope="scope">
                    <span v-if="scope.row.radiationIntensity !== 65535">
                      {{ scope.row.radiationIntensity.toFixed(0) }}</span
                    >
                    <span v-else> - </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="avgWindDir1min"
                  label="1分钟平均风速(m/s)"
                ></el-table-column>
                <el-table-column
                  prop="avgWindSpeed1min"
                  label="1分钟平均风向(°)"
                ></el-table-column>
                <el-table-column
                  prop="avgWindSpeed10min"
                  label="10分钟平均风速(m/s)"
                >
                  <template slot-scope="scope">
                    <span> {{ scope.row.avgWindSpeed10min.toFixed(1) }} </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="avgWindDir10min"
                  label="10分钟平均风向(°)"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.avgWindDir10min !== 65535">
                      {{ scope.row.avgWindDir10min.toFixed(1) }}</span
                    >
                    <span v-else> - </span>
                  </template>
                </el-table-column>
                <el-table-column prop="maxWindSpeed" label="10分钟最大风速(m/s)"
                  ><template slot-scope="scope">
                    <span> {{ scope.row.maxWindSpeed.toFixed(1) }} </span>
                  </template></el-table-column
                >
              </el-table>
            </div>
            <div class="pageNation">
              <el-pagination
                @current-change="handlechildCurrentChange"
                @size-change="handlechildSizeChange"
                :current-page="childpage"
                :page-size="childpageSize"
                layout="sizes, prev, pager, next, jumper,total"
                :total="childtotal"
              >
              </el-pagination>
            </div>
            <el-dialog title="温度折线图" :visible.sync="wdFlag">
              <div id="wDechart" class="chartClass"></div>
            </el-dialog>
            <el-dialog title="湿度折线图" :visible.sync="sdFlag">
              <div id="sDechart" class="chartClass"></div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import leftTree from "../components/leftTree";
import { weatherJoggle, weatherListJoggle } from "@/utils/api/iceApi";
export default {
  name: "weather",
  components: {
    leftTree,
  },
  data() {
    return {
      loading: false,
      childFlag: false,
      tableData: [],
      childTableDate: [],
      formdata: {},
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数

      paramsData: "",
      childpage: 1, // 当前页数
      childpageSize: 20, // 每页数量
      childtotal: 0, //总条数
      childParma: "",
      childMsg: "",
      echartsData: "", //echarts数据
      wdFlag: false,
      sdFlag: false,
    };
  },
  created() {
    var that = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        that.onSubmit(); // 触发事件
      }
    };
  },
  watch: {
    endtime(newVal) {
      if (newVal) {
        const date = new Date(newVal);
        date.setHours(23);
        date.setMinutes(59);
        date.setSeconds(59);
        this.formdata.endtime = date.getTime();
      }
    },
  },
  mounted() {
    //this.getWeatherData();
  },
  methods: {
    getCurrentData(data) {
      console.log("执行父组件", data);
      this.paramsData = data;
      let weatherParams;
      console.log(data);
      if (data.dyValue) {
        console.log("电压-公司");
        weatherParams = {
          devType: "3",
          dyId: data.id,
          pageNum: 1,
          pageSize: this.pageSize,
        };
        this.getWeatherData(weatherParams);
      } else if (data.bsManufacturer) {
        console.log("线路-电压");
        weatherParams = {
          devType: "3",
          lineId: data.id,
          pageNum: 1,
          pageSize: this.pageSize,
        };
        this.getWeatherData(weatherParams);
      } else {
        console.log("装置-杆塔");
        // weatherParams = {
        //   pageNum: 1,
        //   pageSize: this.pageSize,
        //   towerId: data.towerid,
        // };
        this.moreDataClick(data);
        // this.getWeatherData(weatherParams);
      }
      //this.getAllData(data);
    },
    getWeatherData(data) {
      console.log(data);
      this.childFlag = false;
      this.loading = true;
      weatherJoggle(data)
        .then((res) => {
          console.log(res);
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },

    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      let data = this.paramsData;
      let weatherParams;
      this.tableData = [];
      if (data.dyValue) {
        console.log("电压-公司");
        weatherParams = {
          devType: "3",
          dyId: data.id,
          pageNum: this.page,
          pageSize: this.pageSize,
        };
        this.getWeatherData(weatherParams);
      } else if (data.bsManufacturer) {
        console.log("线路-电压");
        weatherParams = {
          devType: "3",
          lineId: data.id,
          pageNum: this.page,
          pageSize: this.pageSize,
        };
        this.getWeatherData(weatherParams);
      } else {
        console.log("装置-杆塔");
        weatherParams = {
          pageNum: this.page,
          pageSize: this.pageSize,
          towerId: data.towerid,
        };
        this.getWeatherData(weatherParams);
      }
      //this.getCurrentData(this.paramsData);
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.tableData = [];
      let data = this.paramsData;
      let weatherParams;
      this.tableData = [];
      if (data.dyValue) {
        console.log("电压-公司");
        weatherParams = {
          devType: "3",
          dyId: data.id,
          pageNum: this.page,
          pageSize: this.pageSize,
        };
        this.getWeatherData(weatherParams);
      } else if (data.bsManufacturer) {
        console.log("线路-电压");
        weatherParams = {
          devType: "3",
          lineId: data.id,
          pageNum: this.page,
          pageSize: this.pageSize,
        };
        this.getWeatherData(weatherParams);
      } else {
        console.log("装置-杆塔");
        weatherParams = {
          pageNum: this.page,
          pageSize: this.pageSize,
          towerId: data.towerid,
        };
        this.getWeatherData(weatherParams);
      }
    },
    //点击查看更多历史数据
    moreDataClick(row) {
      this.childFlag = true;
      console.log(row);
      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());

      this.childParma = row;
      this.getchildWeatherData(row);
    },

    //查询时间
    onSubmit() {
      this.getchildWeatherData(this.childParma);
    },
    getchildWeatherData(row) {
      this.loading = true;
      this.childMsg = row;
      console.log("我是子数据", row);
      const sTime = Math.floor(this.formdata.starttime / 1000);
      const eTime = Math.floor(this.formdata.endtime / 1000);
      weatherListJoggle({
        // lineId: row.lineId,
        termId: row.id,
        towerId: row.towerId,
        start: sTime,
        end: eTime,
        pageNum: this.childpage,
        pageSize: this.childpageSize,
      })
        .then((res) => {
          console.log(res);
          this.childTableDate = res.data.list;
          this.childtotal = res.data.total;
          this.loading = false;
          //获取温度折线图
          this.getAllData(row);
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    getAllData(row) {
      const sTime = Math.floor(this.formdata.starttime / 1000);
      const eTime = Math.floor(this.formdata.endtime / 1000);
      weatherListJoggle({
        // lineId: row.lineId,
        termId: row.id,
        towerId: row.towerId,
        start: sTime,
        end: eTime,
        pageNum: 1,
        pageSize: 1000,
      })
        .then((res) => {
          console.log(res);
          this.echartsData = res.data.list;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    onWdLine() {
      this.wdFlag = true;
      this.sdFlag = false;
      //获取温度折线图
      this.getEchart4(this.echartsData);
    },
    onSdLine() {
      this.wdFlag = false;
      this.sdFlag = true;
      this.getEchart5(this.echartsData);
    },
    onHidden() {
      this.wdFlag = false;
      this.sdFlag = false;
    },
    //获取当天告警分类统计
    getEchart4(wd) {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("wDechart"));
        this.mywDechart = this.$echarts.init(
          document.getElementById("wDechart")
        );
        console.log(wd);
        var xData = [];
        var yData = [];
        xData = wd.map((item) =>
          this.$moment(item.updateTime * 1000).format("HH:mm:ss")
        );
        yData = wd.map((item) => item.airTemperature);
        let option = {
          tooltip: {
            trigger: "axis",
          },
          grid: {
            //left: "6%", //图表距离容器左侧多少距离
            //right: "6%", //图表距离容器右侧侧多少距离
            bottom: "6%", //图表距离容器上面多少距离
            //top: "2%", //图表距离容器下面多少距离
          },
          title: {
            text: "温度变化趋势",
            x: "center", //设置标题位置居中
            textStyle: {
              //设置主标题的文字风格
              color: "#333", //字体颜色
              fontSize: 16, //文字大小
              fontWeight: "normal",
            },
          },
          toolbox: {
            show: true,
            feature: {
              dataView: { readOnly: false },
              magicType: { type: ["line", "bar"] },
              restore: {},
              saveAsImage: {},
            },
          },
          xAxis: {
            name: "时间", // 坐标轴名称
            type: "category",
            boundaryGap: false,
            data: xData,
          },
          yAxis: {
            name: "温度", // 坐标轴名称
            type: "value",
            axisLabel: {
              formatter: "{value} °C",
            },
          },
          series: [
            {
              name: "温度",
              symbol: "none",
              type: "line",
              data: yData,
            },
          ],
        };
        this.mywDechart.setOption(option);
        window.addEventListener("resize", () => {
          this.mywDechart.resize();
        });
      });
    },
    getEchart5(sd) {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("sDechart"));
        this.mysDechart = this.$echarts.init(
          document.getElementById("sDechart")
        );
        console.log(sd);
        var xData = [];
        var yData = [];
        xData = sd.map((item) =>
          this.$moment(item.updateTime * 1000).format("HH:mm:ss")
        );
        yData = sd.map((item) => item.humidity);
        let option = {
          tooltip: {
            trigger: "axis",
          },
          grid: {
            //left: "6%", //图表距离容器左侧多少距离
            //right: "6%", //图表距离容器右侧侧多少距离
            bottom: "6%", //图表距离容器上面多少距离
            //top: "2%", //图表距离容器下面多少距离
          },
          title: {
            text: "湿度变化趋势",
            x: "center", //设置标题位置居中
            textStyle: {
              //设置主标题的文字风格
              color: "#333", //字体颜色
              fontSize: 16, //文字大小
              fontWeight: "normal",
            },
          },
          toolbox: {
            show: true,
            feature: {
              dataView: { readOnly: false },
              magicType: { type: ["line", "bar"] },
              restore: {},
              saveAsImage: {},
            },
          },
          xAxis: {
            name: "时间", // 坐标轴名称
            type: "category",
            boundaryGap: false,
            data: xData,
          },
          yAxis: {
            name: "湿度", // 坐标轴名称
            type: "value",
            axisLabel: {
              formatter: "{value} %RH",
            },
          },
          series: [
            {
              name: "湿度",
              symbol: "none",
              type: "line",
              data: yData,
            },
          ],
        };
        this.mysDechart.setOption(option);
        window.addEventListener("resize", () => {
          this.mysDechart.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);
    },
    //点击child分页
    handlechildCurrentChange(val) {
      this.childpage = val;
      this.childTableDate = [];
      this.getchildWeatherData(this.childParma);
    },
    //每页条数child分页
    handlechildSizeChange(val) {
      this.childpageSize = val;
      this.childTableDate = [];
      this.getchildWeatherData(this.childParma);
    },
  },
};
</script>
<style lang="less">
.weatherBox {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  padding: 12px 12px;
  background: #fff;

  .weatherContain {
    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: auto;
    border-left: 1px solid #ddd;
    .el-table .el-table__cell {
      text-align: center;
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
    }
    .dataBox {
      width: calc(100% - 24px);
      height: calc(100% - 24px);
      padding: 12px 12px;
      background: #fff;
    }
    .fatherTableShowBox {
      height: calc(100% - 0px);
    }
    .childBox {
      height: 100%;
      .chartClass {
        height: 450px;
        width: 100%;
      }
      // .echartsBox {
      //   display: flex;
      //   flex-direction: column;
      //   align-items: center;

      //   .btnbox {
      //     display: flex;
      //     margin-bottom: 8px;
      //     .el-button--primary {
      //       width: auto;
      //     }
      //   }

      // }
      .childTableShowBox {
        h3 {
          font-size: 16px;
          font-weight: normal;
          margin-bottom: 8px;
          text-align: center;
          color: #666;
          margin-top: 16px;
        }
        height: calc(100% - 124px);
      }
      .termalBox {
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        line-height: 32px;
        p {
          .text {
            margin-right: 12px;
          }
        }
        .gropBtn {
          //margin-left: auto;
        }
      }
    }
  }
}
</style>