<template>
  <div class="page page-home" 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"
          >数据更新:{{ formatterDate(statData.updateTime) }}</el-button
        >
        <el-button icon="el-icon-refresh" type="text">手动刷新</el-button>
      </el-row>

      <el-card style="margin-left: 50px; margin-right: 50px; margin-top: 10px">
        <el-col :span="3">
          <span style="font-size: 20px"
            ><b>{{ statData.deviceTotalCount }}</b></span
          >
          <el-row
            ><span style="font-size: 14px"
              >昨日 {{ statData.deviceAddCount }}</span
            ></el-row
          >
          <el-button icon="el-icon-mobile" type="text">设备总数</el-button>
          <!-- <el-row  > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">设备总数</span></el-row> -->
        </el-col>
        <el-col :span="3">
          <el-row
            ><span style="font-size: 20px"
              ><b>{{ statData.siteTotalCount }}</b></span
            ></el-row
          >
          <el-row
            ><span style="font-size: 14px"
              >昨日 {{ statData.siteAddCount }}</span
            ></el-row
          >
          <el-row>
            <i size="mini" :class="'el-icon-mobile'"> </i
            ><span style="font-size: 13px">监控站点数</span></el-row
          >
        </el-col>
        <el-col :span="3">
          <el-row
            ><span style="font-size: 20px"
              ><b>{{ statData.deviceOnlineCount }}</b></span
            ></el-row
          >
          <el-row
            ><span style="font-size: 14px"
              >昨日 {{ statData.deviceOnlineRatio }}</span
            ></el-row
          >
          <el-row>
            <i size="mini" :class="'el-icon-mobile'"> </i
            ><span style="font-size: 14px">在线设备</span></el-row
          >
        </el-col>
        <el-col :span="3">
          <el-row
            ><span style="font-size: 20px"
              ><b>{{ statData.deviceOfflineCount }}</b></span
            ></el-row
          >
          <el-row
            ><span style="font-size: 14px"
              >在线率 {{ statData.deviceOfflineRatio * 100 }}%</span
            ></el-row
          >
          <el-row>
            <i size="mini" :class="'el-icon-mobile'"> </i
            ><span style="font-size: 14px">离线设备</span></el-row
          >
        </el-col>
        <el-col :span="3">
          <el-row
            ><span style="font-size: 20px"
              ><b>{{ statData.deviceStopRatio }}</b></span
            ></el-row
          >
          <el-row
            ><span style="font-size: 14px"
              >停用率 {{ statData.deviceStopRatio * 100 }}%</span
            ></el-row
          >
          <el-row>
            <i size="mini" :class="'el-icon-mobile'"> </i
            ><span style="font-size: 14px">停用设备</span></el-row
          >
        </el-col>
        <el-col :span="3">
          <el-row
            ><span style="font-size: 20px"
              ><b>{{ statData.alarmTotalCount }}</b></span
            ></el-row
          >
          <el-row
            ><span style="font-size: 14px"
              >昨日 {{ statData.alarmAddCount }}</span
            ></el-row
          >
          <el-row>
            <i size="mini" :class="'el-icon-mobile'"> </i
            ><span style="font-size: 14px">今日告警次数</span></el-row
          >
        </el-col>
        <el-col :span="3">
          <el-row
            ><span style="font-size: 20px"
              ><b>{{ statData.pushTotalCount }}</b></span
            ></el-row
          >
          <el-row
            ><span style="font-size: 14px"
              >昨日 {{ statData.pushAddCount }}</span
            ></el-row
          >
          <el-row>
            <i size="mini" :class="'el-icon-mobile'"> </i
            ><span style="font-size: 14px">今日消息推送</span></el-row
          >
        </el-col>
        <el-col :span="3">
          <el-row
            ><span style="font-size: 14px"
              >今日下发命令 <b>{{ statData.uploadMessageTotalCount }}</b></span
            ></el-row
          >
          <el-row
            ><span style="font-size: 14px"
              >今日下发命令
              <b>{{ statData.downloadMessageTotalCount }}</b></span
            ></el-row
          >
          <el-row>
            <i size="mini" :class="'el-icon-mobile'"> </i
            ><span style="font-size: 14px">数据获取</span></el-row
          >
        </el-col>
      </el-card>
    </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="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;
    },
  },
  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) {
          console.log("res", res);
          this.statData = res.data.data[0];
          console.log("statData", this.statData);
        }
        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: {
    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: ["在线率", "离线率"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.beforeDeviceStatday,
          },
        ],
        yAxis: [
          {
            type: "value",
            max: 2,
          },
        ],
        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(255, 0, 135)",
                },
                {
                  offset: 1,
                  color: "rgb(135, 0, 157)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: this.deviceStatOnlineyData,
          },
          {
            name: "离线率",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(0, 221, 255)",
                },
                {
                  offset: 1,
                  color: "rgb(77, 119, 255)",
                },
              ]),
            },
            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: ["告警次数"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        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: ["告警次数"],
        },
       
        
        xAxis: [
          {
            type: "category",
            data: this.beforeDevicePushday,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "告警次数",
            type: "line",
            smooth: true,
      
            data: this.devicePushyData,
          }
        ],
      };
      chart.setOption(option);
    },
  },
  data() {
    return {
      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>

