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.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="temperature" label="温度(℃)">
                <template slot-scope="scope">
                  <span v-if="scope.row.temperature">{{
                    scope.row.temperature
                  }}</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.humidity">{{
                    scope.row.humidity
                  }}</span>
                  <span v-else> - </span>
                </template>
              </el-table-column>
              <el-table-column prop="windSpeed" label="瞬时风速(m/s)">
                <template slot-scope="scope">
                  <span v-if="scope.row.windSpeed">{{
                    scope.row.windSpeed
                  }}</span>
                  <span v-else> - </span>
                </template>
              </el-table-column>
              <el-table-column prop="windDirection" label="瞬时风向(°)">
                <template slot-scope="scope">
                  <span v-if="scope.row.windDirection">{{
                    scope.row.windDirection
                  }}</span>
                  <span v-else> - </span>
                </template>
              </el-table-column>
              <el-table-column prop="rain" label="雨量(mm/hour)">
                <template slot-scope="scope">
                  <span v-if="scope.row.rain">{{ scope.row.rain }}</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.airPressure">{{
                    scope.row.airPressure
                  }}</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.radiationIntensity">{{
                    scope.row.radiationIntensity
                  }}</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.updateTime"
                    >更多历史数据</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">
              <h3>当前监测终端</h3>
              <el-descriptions direction="vertical" :column="4" border>
                <el-descriptions-item label="线路">{{
                  childMsg.lineName
                }}</el-descriptions-item>
                <el-descriptions-item label="杆塔">{{
                  childMsg.towerName
                }}</el-descriptions-item>
                <el-descriptions-item label="终端">{{
                  childMsg.cmdid
                }}</el-descriptions-item>
              </el-descriptions>
            </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">
              <h3>气象数据列表</h3>
              <el-table
                :data="childTableDate"
                style="width: 100%"
                v-loading="loading"
                height="calc(100% - 40px)"
              >
                <el-table-column prop="updateTime" label="时间">
                  <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="temperature"
                  label="温度(℃)"
                ></el-table-column>
                <el-table-column
                  prop="humidity"
                  label="湿度(%RH)"
                ></el-table-column>
                <el-table-column
                  prop="windSpeed"
                  label="瞬时风速(m/s)"
                ></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)"
                ></el-table-column>
                <el-table-column
                  prop="avgWindSpeed1Min"
                  label="1分钟平均风速(m/s)"
                ></el-table-column>
                <el-table-column
                  prop="avgWindDir1Min"
                  label="1分钟平均风向(°)"
                ></el-table-column>
                <el-table-column
                  prop="avgWindSpeed10Min"
                  label="10分钟平均风速(m/s)"
                ></el-table-column>
                <el-table-column
                  prop="avgWindDir10Min"
                  label="10分钟平均风向(°)"
                ></el-table-column>
                <el-table-column
                  prop="maxSpeed10Min"
                  label="10分钟最大风速(m/s)"
                ></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>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import leftTree from "../components/leftTree";
import { getDataListJoggle } from "@/utils/api/index";
export default {
  name: "weather",
  components: {
    leftTree,
  },
  data() {
    return {
      loading: false,
      childFlag: false,
      tableData: [],
      childTableDate: [],
      formdata: {},
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      qt: "",
      id: "",
      paramsData: "",
      childpage: 1, // 当前页数
      childpageSize: 20, // 每页数量
      childtotal: 0, //总条数
      childParma: "",
      childMsg: "",
      echartsData: "", //echarts数据
      wdFlag: true,
      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;
      console.log(data);
      if (data.dyValue) {
        console.log("电压-公司");
        this.qt = "all";
        this.id = data.id;
        this.getWeatherData(data);
      } else if (data.bsManufacturer) {
        console.log("线路-电压");
        this.qt = "line";
        this.id = data.id;
        this.getWeatherData(data);
      } else {
        console.log("装置-杆塔");
        this.qt = "tower";
        this.id = data.towerid;
        this.getWeatherData(data);
      }
      //this.getAllData(data);
    },
    getWeatherData(data) {
      this.childFlag = false;
      console.log(data, this.qt);
      this.loading = true;
      getDataListJoggle({
        act: "meteo",
        qt: this.qt,
        id: this.id,
        p: this.page,
        ps: this.pageSize,
        latest: 1,
      })
        .then((res) => {
          console.log(res);
          this.tableData = res.data;
          this.total = Number(res.page.totalRecords);
          this.loading = false;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.tableData = [];
      this.getWeatherData(this.paramsData);
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.tableData = [];
      this.getWeatherData(this.paramsData);
    },
    //点击查看更多历史数据
    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.qt = "terminal";
      this.id = row.termId;
      this.childParma = row;
      this.getchildWeatherData(row);
    },

    //查询时间
    onSubmit() {
      this.getchildWeatherData(this.childParma);
    },
    getchildWeatherData(row) {
      this.loading = true;
      this.childMsg = row;
      const sTime = Math.floor(this.formdata.starttime / 1000);
      const eTime = Math.floor(this.formdata.endtime / 1000);
      getDataListJoggle({
        act: "meteo",
        qt: this.qt,
        id: this.id,
        bt: sTime,
        et: eTime,
        p: this.childpage,
        ps: this.childpageSize,
      })
        .then((res) => {
          console.log(res);
          this.childTableDate = res.data;
          this.childtotal = Number(res.page.totalRecords);
          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);
      getDataListJoggle({
        act: "meteo",
        qt: this.qt,
        id: this.id,
        bt: sTime,
        et: eTime,
        p: this.childpage,
        ps: 1000,
      })
        .then((res) => {
          console.log(res);
          this.echartsData = res.data;
          //获取温度折线图
          this.getEchart4(this.echartsData);
          this.getEchart5(this.echartsData);
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    onWdLine() {
      this.wdFlag = true;
      this.sdFlag = false;
    },
    onSdLine() {
      this.wdFlag = false;
      this.sdFlag = true;
    },
    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.temperature);
        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;
    }
    .dataBox {
      width: calc(100% - 24px);
      height: calc(100% - 24px);
      padding: 12px 12px;
      background: #fff;
    }
    .fatherTableShowBox {
      height: calc(100% - 0px);
    }
    .childBox {
      height: 100%;
      .echartsBox {
        display: flex;
        flex-direction: column;
        align-items: center;

        .btnbox {
          display: flex;
          margin-bottom: 8px;
          .el-button--primary {
            width: auto;
          }
        }
        .chartClass {
          height: 450px;
          width: 800px;
        }
      }
      .childTableShowBox {
        h3 {
          font-size: 16px;
          font-weight: normal;
          margin-bottom: 8px;
          text-align: center;
          color: #666;
          margin-top: 16px;
        }
        height: calc(100% - 200px);
      }
      .termalBox {
        h3 {
          font-size: 16px;
          font-weight: normal;
          margin-bottom: 4px;
          text-align: center;
          color: #666;
        }
        .el-descriptions {
          margin-bottom: 16px;
          .el-descriptions-item__label.is-bordered-label {
            color: #333;
          }
          .el-descriptions__body
            .el-descriptions__table
            .el-descriptions-item__cell {
            text-align: center;
          }
        }
      }
    }
  }
}
</style>