<template>
  <div class="page page-home homeIndex" style="min-height: 100vh">
    <el-row :gutter="10">
      <el-row
        style="margin-left: 50px; margin-right: 50px"
        type="flex"
        justify="end"
        :gutter="10"
      >
        <el-button type="text" size="mini"
          >数据更新:{{ formatterDate(statData.updateTime) }} 2分钟后自动更新</el-button
        >
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="syncDeviceStat"
          type="text"
          >手动刷新</el-button
        >
      </el-row>

      <el-card style="margin-left: 50px; margin-right: 50px; margin-top: 10px">
        <el-row
          :gutter="20"
          style="height: 80px; align-items: center; margin-top: 10px"
        >
          <el-col :span="3">
            <el-row type="flex" justify="center">
              <span style="font-size: 20px"
                ><b>{{ statData.deviceTotalCount }}</b></span
              ></el-row
            >
            <el-row type="flex" justify="center">
              <span style="font-size: 12px"
                ><span style="color: #6182f6">昨日 </span
                ><span
                  v-bind:class="{
                    success: statData.deviceAddCount >= 0,
                    warn: statData.deviceAddCount < 0,
                  }"
                  >{{
                    statData.deviceAddCount >= 0
                      ? "+" + statData.deviceAddCount
                      : "-" + statData.deviceAddCount
                  }}</span
                ></span
              ></el-row
            >
            <el-row type="flex" justify="center">
              <i class="el-icon-mobile customIcon"> 设备总数</i>
            </el-row>
          </el-col>
          <el-col :span="3">
            <el-row type="flex" justify="center"
              ><span style="font-size: 20px"
                ><b>{{ statData.siteTotalCount }}</b></span
              ></el-row
            >
            <el-row type="flex" justify="center">
              <span style="font-size: 12px"
                ><span style="color: #6182f6">昨日 </span
                ><span
                  v-bind:class="{
                    success: statData.siteAddCount >= 0,
                    warn: statData.siteAddCount < 0,
                  }"
                  >{{
                    statData.siteAddCount >= 0
                      ? "+" + statData.siteAddCount
                      : "-" + statData.siteAddCount
                  }}</span
                ></span
              ></el-row
            >
            <el-row type="flex" justify="center">
              <i class="el-icon-place customIcon"> 监控站点数</i>
            </el-row>
          </el-col>
          <el-col :span="3">
            <el-row type="flex" justify="center"
              ><span style="font-size: 20px"
                ><b>{{ statData.deviceOnlineCount }}</b></span
              ></el-row
            >

            <el-row type="flex" justify="center">
              <span style="font-size: 12px"
                ><span style="color: #6182f6">上线率 </span
                ><span
                  v-bind:class="{ success: statData.deviceOnlineRatio >= 0 }"
                  >{{ statData.deviceOnlineRatio * 100 }}%</span
                ></span
              ></el-row
            >
            <el-row type="flex" justify="center">
              <i class="el-icon-data-line customIcon"> 在线设备</i>
            </el-row>
          </el-col>
          <el-col :span="3">
            <el-row type="flex" justify="center"
              ><span style="font-size: 20px"
                ><b>{{ statData.deviceOfflineCount }}</b></span
              ></el-row
            >
            <el-row type="flex" justify="center">
              <span style="font-size: 12px"
                ><span style="color: #6182f6">离线率 </span
                ><span v-bind:class="{ warn: statData.deviceOfflineRatio >= 0 }"
                  >{{ statData.deviceOfflineRatio * 100 }}%</span
                ></span
              ></el-row
            >
            <el-row type="flex" justify="center">
              <i class="el-icon-data-board customIcon"> 离线设备</i>
            </el-row>
          </el-col>
          <el-col :span="3">
            <el-row type="flex" justify="center"
              ><span style="font-size: 20px"
                ><b>{{ statData.deviceStopRatio }}</b></span
              ></el-row
            >
            <el-row type="flex" justify="center">
              <span style="font-size: 12px"
                ><span style="color: #6182f6">停用率 </span
                ><span v-bind:class="{ warn: statData.deviceStopRatio >= 0 }"
                  >{{ statData.deviceStopRatio * 100 }}%</span
                ></span
              ></el-row
            >
            <el-row type="flex" justify="center">
              <i class="el-icon-data-board customIcon">停用设备</i>
            </el-row>
          </el-col>
          <el-col :span="3">
            <el-row type="flex" justify="center"
              ><span style="font-size: 20px"
                ><b>{{ statData.alarmTotalCount }}</b></span
              ></el-row
            >
            <el-row type="flex" justify="center">
              <span style="font-size: 12px"
                ><span style="color: #6182f6">昨日 </span
                ><span
                  v-bind:class="{
                    success: statData.alarmAddCount >= 0,
                    warn: statData.alarmAddCount < 0,
                  }"
                  >{{
                    statData.alarmAddCount >= 0
                      ? "+" + statData.alarmAddCount
                      : "-" + statData.alarmAddCount
                  }}</span
                ></span
              ></el-row
            >
            <el-row type="flex" justify="center">
              <i class="el-icon-data-board customIcon"> 今日告警次数</i>
            </el-row>
          </el-col>
          <el-col :span="3">
            <el-row type="flex" justify="center"
              ><span style="font-size: 20px"
                ><b>{{ statData.pushTotalCount }}</b></span
              ></el-row
            >

            <el-row type="flex" justify="center">
              <span style="font-size: 12px"
                ><span style="color: #6182f6">昨日 </span
                ><span
                  v-bind:class="{
                    success: statData.pushAddCount >= 0,
                    warn: statData.pushAddCount < 0,
                  }"
                  >{{
                    statData.pushAddCount >= 0
                      ? "+" + statData.pushAddCount
                      : "-" + statData.pushAddCount
                  }}</span
                ></span
              ></el-row
            >

            <el-row type="flex" justify="center">
              <i class="el-icon-data-board customIcon"> 今日消息推送</i>
            </el-row>
          </el-col>
          <el-col :span="3" type="flex" style="height: 100%">
            <el-row type="flex" style="margin-top: 6px" justify="center"
              ><span style="font-size: 13px"
                ><span style="color: #6182f6">今日下发命令 </span>
                <b>{{ statData.uploadMessageTotalCount }}</b></span
              ></el-row
            >
            <el-row type="flex" style="margin-top: 6px" justify="center"
              ><span style="font-size: 13px"
                ><span style="color: #6182f6">今日下发命令 </span>
                <b>{{ statData.downloadMessageTotalCount }}</b></span
              ></el-row
            >
            <el-row type="flex" justify="center">
              <i class="el-icon-data-board customIcon"> 数据获取</i>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
    </el-row>

    <el-row
      style="margin-left: 35px; margin-right: 35px; margin-top: 15px"
      :gutter="20"
    >
      <el-col :span="12">
        <el-card class="box-card">
          <div id="deviceTotal" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div id="deviceStat" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row
      style="margin-left: 35px; margin-right: 35px; margin-top: 10px"
      :gutter="20"
    >
      <el-col :span="12">
        <el-card class="box-card">
          <div id="deviceAlarm" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div id="devicePush" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  computed: {
    userData() {
      return this.$store.state.userData.currUserName;
    },
  },
  mounted() {
    this.timer = setInterval(this.syncDeviceStat, 1000 * 120);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  created() {
    let today = new Date();
    let query = {
      year: today.getFullYear(),
      month: today.getMonth() + 1,
      day: today.getDate(),
    };
    //查询今日设备统计
    this.loading = true;
    this.$post("/device/stat/list", query)
      .then((res) => {
        if (res.code == 1) {
          this.statData = res.data.data[0];
        }
        this.loading = false;
      })
      .catch((error) => {
        this.$message.error(error.message);
      });
    //默认查询15天数据
    let beforeday = new Date(today);

    beforeday.setDate(beforeday.getDate() - 15);
    this.findDeviceTotalStat(beforeday);

    this.findDeviceStat(beforeday);

    this.findDeviceAlarm(beforeday);

    this.findDevicePush(beforeday);
  },
  methods: {
    syncDeviceStat() {
      this.$post("/device/stat/syncDeviceStat", {})
        .then((res) => {
          if (res.code == 1) {
            this.statData = res.data.data[0];
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },

    findDeviceTotalStat(beforeday) {
      let query = { createTimeStart: this.formatterDate(beforeday) };
      this.$post("/device/stat/list", query)
        .then((res) => {
          if (res.code == 1) {
            console.log("res", res);
            this.statArrayData = res.data.data;
            this.beforeday = this.statArrayData.map((i) => {
              let daystr = i.month + "-" + i.day;
              return daystr;
            });

            this.deviceTotalyData = this.statArrayData.map((i) => {
              return i.deviceTotalCount;
            });
            this.deviceOnlineyData = this.statArrayData.map((i) => {
              return i.deviceOnlineRatio;
            });

            this.$nextTick(() => {
              this.myEcharts();
            });
          }
          this.loading = false;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },

    findDeviceStat(beforeday) {
      let query = { createTimeStart: this.formatterDate(beforeday) };
      this.$post("/device/stat/list", query)
        .then((res) => {
          if (res.code == 1) {
            this.statArrayData = res.data.data;

            this.beforeDeviceStatday = this.statArrayData.map((i) => {
              let daystr = i.month + "-" + i.day;
              return daystr;
            });

            this.deviceStatOnlineyData = this.statArrayData.map((i) => {
              return i.deviceOnlineRatio;
            });
            this.deviceStatOfflineyData = this.statArrayData.map((i) => {
              return i.deviceOfflineRatio;
            });
            this.$nextTick(() => {
              this.deviceStatEcharts();
            });
          }
          this.loading = false;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },

    findDeviceAlarm(beforeday) {
      let query = { createTimeStart: this.formatterDate(beforeday) };
      this.$post("/device/stat/list", query)
        .then((res) => {
          if (res.code == 1) {
            this.statArrayData = res.data.data;

            this.beforeDeviceAlarmday = this.statArrayData.map((i) => {
              let daystr = i.month + "-" + i.day;
              return daystr;
            });

            this.deviceAlarmyData = this.statArrayData.map((i) => {
              return i.alarmTotalCount;
            });

            this.$nextTick(() => {
              this.deviceAlarmEcharts();
            });
          }
          this.loading = false;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },

    findDevicePush(beforeday) {
      let query = { createTimeStart: this.formatterDate(beforeday) };
      this.$post("/device/stat/list", query)
        .then((res) => {
          if (res.code == 1) {
            this.statArrayData = res.data.data;

            this.beforeDevicePushday = this.statArrayData.map((i) => {
              let daystr = i.month + "-" + i.day;
              return daystr;
            });

            this.devicePushyData = this.statArrayData.map((i) => {
              return i.pushTotalCount;
            });

            this.$nextTick(() => {
              this.devicePushEcharts();
            });
          }
          this.loading = false;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },

    formatterDate(time) {
      let date = new Date(Number(time));
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = this.panLeft(date.getDate()) + " ";
      let h = this.panLeft(date.getHours()) + ":";
      let m = this.panLeft(date.getMinutes()) + ":";
      let s = this.panLeft(date.getSeconds());
      return Y + M + D + h + m + s;
    },

    getYear(time) {
      let date = new Date(Number(time));
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = this.panLeft(date.getDate()) + " ";
      let h = this.panLeft(date.getHours()) + ":";
      let m = this.panLeft(date.getMinutes()) + ":";
      let s = this.panLeft(date.getSeconds());
      return Y + M + D + h + m + s;
    },

    panLeft(num) {
      return num < 10 ? "0" + num : num;
    },
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var deviceTotalChart = this.$echarts.init(
        document.getElementById("deviceTotal")
      );
      let option = {
        title: {
          text: "设备数据",
          subtext: "",
          x: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },

        legend: {
          orient: "horizontal",
          x: "left",
          y: "top",
          data: ["设备总量", "在线趋势"],
        },
        xAxis: {
          name: "天",
          type: "category",
          data: this.beforeday,
        },
        yAxis: [
          {
            name: "设备总量",
            type: "value",
            // min: 0, // 配置 Y 轴刻度最小值
            max: 400, // 配置 Y 轴刻度最大值
            // splitNumber: 7, // 配置 Y 轴数值间隔
          },
          {
            name: "在线率",
            type: "value",
            // min: 0, // 配置 Y 轴刻度最小值
            max: 1, // 配置 Y 轴刻度最大值
            //splitNumber: 7, // 配置 Y 轴数值间隔
          },
        ],

        series: [
          // 多组折线图数据
          {
            name: "设备总量",
            data: this.deviceTotalyData,
            type: "bar",
            barWidth: 22, // 设置柱状图的宽度
          },

          {
            name: "在线趋势",
            yAxisIndex: 1,
            data: this.deviceOnlineyData,
            type: "line",
          },
        ],
        color: ["#3366CC", "#008000"],
      };

      // 使用刚指定的配置项和数据显示图表。
      deviceTotalChart.setOption(option);
    },

    deviceStatEcharts() {
      var deviceStatChart = this.$echarts.init(
        document.getElementById("deviceStat")
      );

      let deviceStatOption = {
        title: {
          text: "设备状态",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["在线率", "离线率"],
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.beforeDeviceStatday,
          },
        ],
        yAxis: [
          {
            type: "value",
              max: 1,
          },
        ],
        series: [
          {
            name: "在线率",
            type: "line",
            stack: "online",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: this.deviceStatOnlineyData,
          },
          {
            name: "离线率",
            type: "line",
            stack: "offline",
            smooth: true,
            lineStyle: {
              width: 0,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255,99,71)",
                },
                {
                  offset: 1,
                  color: "rgb(255, 0, 0)",
                },
              ]),
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
            },
            emphasis: {
              focus: "series",
            },
            data: this.deviceStatOfflineyData,
          },
        ],
      };

      deviceStatChart.setOption(deviceStatOption);
    },

    deviceAlarmEcharts() {
      var chart = this.$echarts.init(document.getElementById("deviceAlarm"));

      let option = {
        title: {
          text: "设备告警趋势",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["告警次数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.beforeDeviceAlarmday,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "告警次数",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(55, 162, 255)",
                },
                {
                  offset: 1,
                  color: "rgb(116, 21, 219)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: this.deviceAlarmyData,
          },
        ],
      };
      chart.setOption(option);
    },

    devicePushEcharts() {
      var chart = this.$echarts.init(document.getElementById("devicePush"));

      let option = {
        title: {
          text: "设备消息推送趋势",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["告警次数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.beforeDevicePushday,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "告警次数",
            type: "line",
            smooth: true,

            data: this.devicePushyData,
          },
        ],
      };
      chart.setOption(option);
    },
  },
  data() {
    return {
      timer: "",
      loading: false,
      indexStatInfo: {},
      recordListLoading: false,
      statData: {},
      dayProjectList: [],
      pendList: [],
      beforeday: [],
      beforeDeviceStatday: [],
      beforePushday: [],
      beforeAlarmday: [],
      deviceTotalyData: [],

      deviceOnlineyData: [],
      deviceStatOnlineyData: [],
      deviceStatOfflineyData: [],
      deviceAlarmyData: [],
      devicePushyData: [],
      weekPerDay: {
        xData: [],
        yData: [],
      },
      dict: {},
      value: new Date(),
    };
  },
};
</script>

<style scoped>
.success {
  color: green;
}
.warn {
  color: rgb(215, 25, 25);
}
.customIcon {
  font-size: 13px;
  margin-top: 5px;
  color: dodgerblue;
}

.homeIndex {
  display: inline-block;
  position: relative;
}
.homeIndex::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 35%;
  background: #1848c8;
}
</style>

