frontend/src/views/stritl/index.vue

<template>
  <div class="stritleEchartsPage">
    <div class="echart-top">
      <el-card class="box-card" v-loading="numloading">
        <h3>装置数量统计</h3>
        <!-- <el-button class="lookBtn" type="primary" @click="handleLook"
          >查看</el-button
        > -->
        <div class="bottomM">
          <div class="infoBox">
            <p @click="handleLook">
              <span>装置总数</span>
              <span>{{ termDataNum.totalNum }}</span>
            </p>
            <p>
              <span>在线数量</span>
              <span>{{ termDataNum.onlineNum }}</span>
            </p>
            <p>
              <span>离线率</span>
              <span>{{ (termDataNum.offlinePercent * 100).toFixed(2) }}%</span>
            </p>
            <p>
              <span>在线率</span>
              <span>{{ (termDataNum.onlinePercent * 100).toFixed(2) }}%</span>
            </p>
          </div>
        </div>
      </el-card>
      <el-card class="box-card">
        <h3>装置在线统计</h3>
        <div id="echart2" class="chartClass" v-loading="pieloading"></div>
      </el-card>
    </div>
    <div class="echart-top">
      <el-card class="box-card" v-loading="barloading">
        <h3>7天告警数量统计</h3>
        <div class="dateBox">
          <span class="datemsg">当前日期前七天</span>
          <el-date-picker
            v-model="dateValue"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="singpickerOptions"
            @change="changedate"
          >
          </el-date-picker>
        </div>
        <div id="echart3" class="chartClass"></div>
      </el-card>
      <el-card class="box-card" v-loading="pie2loading">
        <h3>告警类型统计</h3>
        <div class="dateBox">
          <el-date-picker
            v-model="dateValue2"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="singpickerOptions"
            @change="changedate2"
          >
          </el-date-picker>
        </div>
        <div id="echart4" class="chartClass"></div>
      </el-card>
    </div>
    <el-dialog
      class="exportDialog"
      title="装置列表"
      width="70%"
      :visible.sync="dialogTableVisible"
    >
      <div class="exportList" v-loading="exportLoading">
        <el-button class="exportbtn" type="primary" @click="handleExport()"
          >导出</el-button
        >
        <el-table
          :data="onLineData"
          stripe
          tooltip-effect="dark"
          height="calc(100% - 54px)"
        >
          <el-table-column prop="lineName" label="线路名称"></el-table-column>
          <el-table-column prop="towerName" label="杆塔名称"></el-table-column>
          <el-table-column prop="cmdId" label="装置ID"></el-table-column>
          <el-table-column
            prop="hearttime"
            label="最新心跳时间"
          ></el-table-column>
          <el-table-column
            prop="pictime"
            label="最新图片拍照时间"
          ></el-table-column>
          <el-table-column prop="isonline" label="是否在线"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getTermStatistics,
  getWeekAlarmStatistics,
  getTodayAlarmStatistics,
  getOnlineTerminalList,
  getOnlineTerminalListExcel,
} from "@/utils/api/index";
export default {
  name: "",
  data() {
    return {
      termDataNum: "", //总数
      dateValue: "", //7天告警统计日期
      dateValue2: "", //当天告警分类统计日期
      weekData: [], //7天告警统计
      todayAlarm: [], //当天告警分类统计
      singpickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      myChart2: "",
      myChart3: "",
      myChart4: "",
      numloading: false,
      pieloading: false,
      barloading: false,
      pie2loading: false,

      dialogTableVisible: false,
      onLineData: [],
      exportLoading: false,
    };
  },
  created() {
    console.log(window.devicePixelRatio);
  },
  mounted() {
    this.getDateTime(); //获取当前时间
    this.getTermData();
    this.getWeekAlarmStatistics();
    this.getTodayAlarmStatistics();
  },
  watch: {
    "$store.state.collapse"(val) {
      console.log(val);
      setTimeout(() => {
        //echarts得重绘方法
        this.myChart1.resize();
        this.myChart2.resize();
        this.myChart3.resize();
        this.myChart4.resize();
      }, 300);
    },
  },
  methods: {
    //查看在线列表
    handleLook() {
      this.dialogTableVisible = true;
      this.exportLoading = true;
      getOnlineTerminalList()
        .then((res) => {
          console.log(res);
          this.onLineData = res.data;
          this.exportLoading = false;
          console.log(this.onLineData);
        })
        .catch((err) => {});
    },
    //导出
    handleExport() {
      window.location.href = "/api/api/getOnlineTerminalListExcel";
    },
    // 隐患数量统计
    changedate() {
      console.log(this.dateValue.getTime());
      this.dateValue = this.dateValue.getTime();
      this.getWeekAlarmStatistics();
    },
    // 隐患分类统计
    changedate2() {
      console.log(this.dateValue2.getTime());
      this.dateValue2 = this.dateValue2.getTime();
      this.getTodayAlarmStatistics();
    },
    //获取当前时间
    getDateTime() {
      console.log(new Date());
      this.dateValue = new Date().getTime();
      this.dateValue2 = new Date().getTime();
      console.log(this.dateValue);
      //console.log(this.$moment(this.dateValue).format("yy-MM-DD"));
    },
    //装置数量统计
    getTermData() {
      this.numloading = true;
      this.pieloading = true;
      getTermStatistics()
        .then((res) => {
          console.log(res);
          this.termDataNum = res.data;
          this.numloading = false;
          this.pieloading = false;
          this.getEchart2();
        })
        .catch((err) => {});
    },
    //获取7天告警统计
    getWeekAlarmStatistics() {
      this.barloading = true;
      getWeekAlarmStatistics({ starttime: this.dateValue })
        .then((res) => {
          console.log(res);
          this.weekData = res.data.list;
          this.barloading = false;
          this.getEchart3();
        })
        .catch((err) => {});
    },
    //获取当天告警分类统计
    getTodayAlarmStatistics() {
      this.pie2loading = true;
      getTodayAlarmStatistics({ starttime: this.dateValue2 })
        .then((res) => {
          console.log(res);
          this.todayAlarm = res.data.list;
          this.pie2loading = false;
          this.getEchart4();
        })
        .catch((err) => {});
    },
    //装置数量统计
    getEchart2() {
      this.$nextTick(() => {
        console.log(this.termDataNum);
        this.$echarts.init(document.getElementById("echart2")).dispose();
        this.myChart2 = this.$echarts.init(document.getElementById("echart2"));
        let option = {
          // title: {
          //   text: "装置在线统计",
          // },
          color: ["#169e8c", "#bbb"],
          tooltip: {
            trigger: "item",
          },
          legend: {
            type: "scroll",
            orient: "vertical",
            right: 10,
            top: 20,
            bottom: 20,
          },
          series: [
            {
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,

              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: true,
                fontSize: 16,
                fontWeight: "bold",
                formatter: "{b}\n{d}%",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 26,
                  fontWeight: "bold",
                  formatter: "{b}\n{d}%",
                },
              },
              labelLine: {
                show: true,
              },
              data: [
                { value: this.termDataNum.onlineNum, name: "在线" },
                { value: this.termDataNum.offlineNum, name: "离线" },
              ],
            },
          ],
        };
        this.myChart2.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart2.resize();
        });
      });
    },
    //获取7天告警统计
    getEchart3() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart3")).dispose();
        this.myChart3 = this.$echarts.init(document.getElementById("echart3"));
        let option = {
          // title: {
          //   text: "隐患分类统计",
          // },
          color: ["#169e8c"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            //与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
            top: "10%",
            left: "10%",
            right: "10%",
            bottom: "10%",
          },
          xAxis: {
            type: "category",
            data: this.weekData.map((x) => {
              return this.$moment(x.date).format("MM-DD");
            }),
            axisTick: {
              alignWithLabel: true,
            },
          },
          yAxis: { type: "value" },
          series: [
            {
              name: "告警数量",
              data: this.weekData.map((x) => {
                return x.num;
              }),
              type: "bar",
              showBackground: true,
              backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
            },
          ],
        };
        this.myChart3.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart3.resize();
        });
      });
    },
    //获取当天告警分类统计
    getEchart4() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart4")).dispose();
        this.myChart4 = this.$echarts.init(document.getElementById("echart4"));
        let arr = [];
        this.todayAlarm.forEach((element) => {
          arr.push({
            value: element.num, //将数组的num值赋给value
            name: element.enname, //将数组的name值赋给name
          });
        });
        let option = {
          // title: {
          //   text: "隐患分类统计",
          // },
          // tooltip: {
          //   trigger: "axis",
          //   axisPointer: {
          //     type: "shadow",
          //   },
          // },
          // xAxis: {
          //   type: "category",
          //   data: this.todayAlarm.map((item) => {
          //     return item.enname;
          //   }),
          //   axisTick: {
          //     alignWithLabel: true,
          //   },
          // },
          // yAxis: { type: "value" },
          // series: [
          //   {
          //     name: "告警数量",
          //     data: this.todayAlarm.map((item) => {
          //       return item.num;
          //     }),
          //     type: "bar",
          //     showBackground: true,
          //     backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
          //   },
          // ],

          // title: {
          //   text: "装置在线统计",
          // },
          tooltip: {
            trigger: "item",
          },
          legend: {
            type: "scroll",
            orient: "vertical",
            right: 10,
            top: 20,
            bottom: 20,
          },
          series: [
            {
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,

              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: true,
                fontSize: 16,
                fontWeight: "bold",
                formatter: "{b}\n{d}%",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 26,
                  fontWeight: "bold",
                  formatter: "{b}\n{d}%",
                },
              },
              labelLine: {
                show: true,
              },
              data: arr,
            },
          ],
        };
        this.myChart4.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart4.resize();
        });
      });
    },
  },
};
</script>
<style lang="less">
.stritleEchartsPage {
  height: calc(100% - 32px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .echart-top {
    display: flex;
    height: 48%;
    justify-content: space-between;
    .el-card {
      width: 49%;
      height: 100%;
      .el-card__body {
        height: calc(100% - 40px);
        position: relative;
      }
    }
    .box-card {
      .chartClass {
        height: calc(100% - 32px);
        width: 100%;
      }
      h3 {
        font-size: 18px;
        color: #333;
        line-height: 32px;
      }
      .lookBtn {
        position: absolute;
        right: 20px;
        top: 20px;
      }
      .bottomM {
        .infoBox {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          margin-top: 2%;
          p {
            width: 40%;
            //height: 88px;
            padding: 2%;
            text-align: center;
            margin: 2%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            &:first-child {
              &:hover {
                cursor: pointer;
              }
            }

            span {
              color: #333;
              font-size: 16px;
              &:last-child {
                font-size: 20px;
                margin-top: 5px;
                font-weight: bold;
              }
            }
            &:first-child {
              span {
                &:last-child {
                  color: #128071;
                }
              }
            }
            &:nth-child(2) {
              span {
                &:last-child {
                  color: #409eff;
                }
              }
            }
            &:nth-child(3) {
            }
            &:nth-child(4) {
            }
          }
        }
      }
      .dateBox {
        position: absolute;
        top: 20px;
        right: 20px;
        .datemsg {
          margin-right: 8px;
          font-size: 12px;
        }
        .el-date-editor.el-input {
          width: 140px;
        }
      }
    }
  }
}
.exportDialog {
  .el-dialog__body {
    //height: 400px;
    height: 620px;
    .exportList {
      height: 100%;
      .exportbtn {
        margin-bottom: 12px;
        float: right;
      }
    }
  }
}
</style>