<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 }}</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">
          <!-- <el-descriptions title="设备总量" colon="false" column="3">
          </el-descriptions> -->
          <div id="deviceTotal" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <el-descriptions title="设备状态" colon="false" column="3">
          </el-descriptions>
          <div id="deviceStat" style="width: 100%; height: 150px"></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">
          <el-descriptions title="设备告警趋势" colon="false" column="3">
          </el-descriptions>
          <div id="deviceAlarm" style="width: 100%; height: 150"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <el-descriptions title="设备推送趋势" colon="false" column="3">
          </el-descriptions>
          <div id="devicePush" style="width: 100%; height: 150"></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);
      });

    let beforeday = new Date(today);

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

    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;

          console.log("statData", this.statArrayData);

          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);
      });

    //默认查询15天数据
  },
  methods: {
    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")
      );
      //var myChart1 = this.$echarts.init(document.getElementById("main1"));

      // 指定图表的配置项和数据

      // var option = {
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       type: "shadow",
      //     },
      //   },
      //   legend: {},
      //   grid: {
      //     left: "3%",
      //     right: "4%",
      //     bottom: "3%",
      //     containLabel: true,
      //   },
      //   xAxis: [
      //     {
      //       type: "category",
      //       data: this.weekPerDay.xData,
      //     },
      //   ],
      //   yAxis: [
      //     {
      //       type: "value",
      //     },
      //   ],
      //   series: [
      //     {
      //       name: "项目个数",
      //       type: "bar",
      //       itemStyle: {
      //         normal: {
      //           //这里是重点
      //           color: function (params) {
      //             //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
      //             var colorList = [
      //               "#c23531",
      //               "#2f4554",
      //               "#61a0a8",
      //               // "#d48265",
      //               // "#91c7ae",
      //               // "#749f83",
      //               // "#ca8622",
      //             ];
      //             return colorList[params.dataIndex];
      //           },
      //         },
      //       },
      //       emphasis: {
      //         focus: "series",
      //       },
      //       data: this.weekPerDay.yData,
      //     },
      //   ],
      // };

      let option = {
        title: {
          text: "设备数据",
          subtext: "",
          x: "center",
        },

        legend: {
          orient: "horizontal",
          x: "left",
          y: "top",
          data: ["设备总量", "在线趋势"],
        },
        // grid: {
        //   top: "20%",
        //   left: "3%",
        //   right: "10%",
        //   bottom: "5%",
        //   containLabel: true,
        // },
        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",
          },

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

      // 使用刚指定的配置项和数据显示图表。
      deviceTotalChart.setOption(option);
      //myChart1.setOption(option);
    },
  },
  data() {
    return {
      loading: false,
      indexStatInfo: {},
      recordListLoading: false,
      statData: {},
      dayProjectList: [],
      pendList: [],
      beforeday: [],
      deviceTotalyData: [],
      deviceOnlineyData: [],
      weekPerDay: {
        xData: [],
        yData: [],
      },
      dict: {},
      value: new Date(),
    };
  },
};
</script>

