<template>
  <div class="statisticAnalysis">
    <el-tabs class="full_tab" v-model="activeName" @tab-click="changeTabs">
      <el-tab-pane label="设备分析" name="first" class="tab_con">
        <DeviceSummary
          class="deviceSummary"
          :dataList="equipments"
        ></DeviceSummary>
        <div class="bottomTabs">
          <DeviceUptime :dataList="equipments" class="tabs-lo" />
          <OnLineBarCharts :dataList="sectionData" class="tabs-mo" />
          <!-- <MonthlyEquipment class="tabs-mo" :dataList="equipments" /> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="设备查询" name="second" class="tab_con">
        <div class="topdiv">
          <div class="left-div">
            <el-button
              size="mini"
              icon="el-icon-refresh-left"
              class="btnSearch"
              @click="onRefreshData"
              >刷新</el-button
            >
            <el-button
              size="mini"
              icon="el-icon-download"
              class="btnSearch"
              @click="SystemStatusExport"
              >导出Excel</el-button
            >
          </div>
          <div class="right-div">
            <InputSearch
              :formList="searchFormList"
              @handleSearch="handleSearch"
            />
            <!-- :placeholder="searchText" -->
          </div>
        </div>
        <div class="queryChart">
          <!-- v-if="isEmpty01"  -->
          <Empty
            v-if="isEmpty01"
            class="floatEmpty"
            :text="emptyText01"
          ></Empty>
          <div ref="queryChart" class="keep-ratio"></div>
        </div>
        <div style="position: relative; bottom: 15px">
          <Empty
            v-if="isEmpty02"
            class="floatEmpty"
            :text="emptyText02"
          ></Empty>
          <el-table
            :border="false"
            :data="tableData"
            height="420"
            header-align="left"
            empty-text=" "
          >
            <el-table-column prop="order" label="序号" width="80">
            </el-table-column>
            <el-table-column
              prop="deviceName"
              label="设备名称"
            ></el-table-column>
            <el-table-column prop="deviceNo" label="设备桩号">
            </el-table-column>
            <el-table-column
              prop="direction"
              label="方向"
              class-name="showClass"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.direction == "1"
                    ? "菏泽"
                    : scope.row.direction == "2"
                    ? "双向"
                    : "济南"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="deviceIp" label="设备IP"> </el-table-column>
            <el-table-column prop="production" label="厂家"> </el-table-column>
            <!-- <el-table-column prop="model" label="型号"> </el-table-column> -->
            <!-- <el-table-column prop="network" label="网段"> </el-table-column> -->
            <el-table-column prop="time" label="监测时间"> </el-table-column>
            <el-table-column prop="deviceStatus" label="设备状态">
              <template slot-scope="scope">
                <div v-if="scope.row.deviceStatus == 1">在线</div>
                <div v-if="scope.row.deviceStatus == 0" style="color: #bbb">
                  离线
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="footer">
            <Pagination
              @current-change="changePage"
              width="'100%'"
              :page-size="pageSize"
              :current-page.sync="pageIndex"
              layout="total, sizes, prev, pager, next"
              :total="pageTotal"
              @size-change="handleSizeChange"
            >
            </Pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from "echarts";
import onlineCharts from "./assets/charts";
// import barCharts from "./assets/barCharts";
import DeviceUptime from "./components/deviceUptime";
import OnLineBarCharts from "./components/onLineBarCharts";
import MonthlyEquipment from "./components/monthlyEquipment";
import DeviceSummary from "./components/deviceSummary";
import {
  getSystemStatusList,
  getSystemStatusTabList,
  getSystemStatusType,
  getSystemStatusExport,
  getStatusSection,
} from "@/api/MonthlyEquipment";
// import { download } from "../../../../../utils/request.js";
import Pagination from "@screen/components/Pagination.vue";
import InputSearch from "@screen/components/InputSearch/index.vue";
import { searchFormList } from "./data";
import { Loading } from "element-ui";
import { first } from "lodash";

export default {
  name: "publicService",
  components: {
    DeviceUptime,
    MonthlyEquipment,
    Pagination,
    InputSearch,
    DeviceSummary,
    OnLineBarCharts,
  },
  data() {
    return {
      searchText: "请设置查询条件",
      isEmpty01: true,
      emptyText01: "请输入参数查询...",
      isEmpty02: true,
      emptyText02: "请输入参数查询...",
      startTime: "",
      time: "",
      typeQuery: "", //高清网络枪型固定摄像机
      pageTotal: 0,
      pageIndex: 1,
      pageSize: 30,
      searchFormList,
      equipSeries: [
        "高清网络球形摄像机",
        "360°全景摄像机",
        "门架式可变信息标志",
        "站前悬臂式可变信息标志",
        "气象检测器",
        "合流区预警系统",
        "高清网络枪型固定摄像机",
        "智能设备箱",
        "毫米波雷达",
        "路段语音广播系统",
        "护碰撞预警系统",
        "激光疲劳唤醒系统",
        "180°全景摄像机",
        "一类交通量调音站",
        "雨棚可变信息标志",
        "智能行车诱导系统",
      ],
      equipments: [],
      activeName: "first",
      tableData: [],
      interval: null,
      sectionData: [],
    };
  },
  provide() {
    return {
      initDataList: this.initDevice,
    };
  },
  destroyed() {
    clearInterval(this.interval);
  },
  methods: {
    getSection() {
      getStatusSection().then((res) => {
        this.sectionData = res.data;
      });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.initData();
    },
    initData() {
      this.startTime = moment().startOf("month").format("YYYY-MM-DD HH:mm:ss");
      this.time = moment().format("YYYY-MM-DD HH:mm:ss");
      this.typeQuery = this.searchFormList[1].options.options[0].value;
      clearInterval(this.interval);
      if (this.activeName == "first") {
        this.initDevice();
      } else if (this.activeName == "second") {
        this.queryChart = echarts.init(this.$refs["queryChart"]);
        this.queryChart.setOption(onlineCharts);
        this.initQueryChart();
        this.initQueryTable(1);
      }

      this.interval = setInterval(() => {
        if (this.activeName == "first") {
          this.initDevice();
        }
      }, 30000);
    },
    changePage(page) {
      this.initQueryTable(page);
    },
    formatDate(val) {
      let year = val.getFullYear();
      var m = val.getMonth() + 1;
      var day = val.getDate();

      m = m < 10 ? "0" + m : "" + m;
      day = day < 10 ? "0" + day : "" + day;

      return year + "-" + m + "-" + day + " 00:00:00";
    },
    onRefreshData() {
      if (!this.typeQuery || !this.startTime) {
        this.$message({
          message: "请先设置查询条件！",
          type: "warning",
        });
        return;
      }
      this.initQueryChart();
      this.initQueryTable(1);
    },
    handleSearch(data) {
      this.typeQuery = data.type;
      this.startTime = moment(data.time[0]).format("YYYY-MM-DD HH:mm:ss");
      this.time = moment(data.time[1]).format("YYYY-MM-DD HH:mm:ss");
      let typeText =
        this.searchFormList[1].options.options[this.typeQuery - 1]?.label;
      this.searchText = `${moment(this.startTime).format(
        "YYYY年MM月DD日"
      )}-${moment(this.time).format("YYYY年MM月DD日")},${typeText}`;
      this.initQueryChart();
      this.initQueryTable(1);
    },
    changeTabs() {
      this.initData();
      this.$nextTick(() => {
        this.queryChart.resize();
      });
    },
    //导出
    SystemStatusExport() {
      let loadingInstance = Loading.service({
        fullscreen: true,
        background: "#00000052",
        text: "文件正在下载...",
      });
      getSystemStatusExport({
        startTime: this.startTime,
        time: this.time,
        type: this.typeQuery,
      })
        .then((res) => {
          const url = window.URL.createObjectURL(new Blob([res]));
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", "设备统计信息.xlsx");
          document.body.appendChild(link);
          link.click();
          URL.revokeObjectURL(link.href); // 释放URL 对象
          document.body.removeChild(link);
          link = null;
          loadingInstance.close();
        })
        .catch((err) => {
          Message.error(err);
          loadingInstance.close();
        });
    },
    initDevice() {
      //设备在线离线率接口

      // if (process.env.NODE_ENV == "development") {
      //     this.equipments = [];
      //     this.equipSeries.forEach((item) => {
      //       this.equipments.push({
      //         title: item,
      //         total: Math.floor(Math.random() * 600) + 800,
      //         pctOnl: Math.floor(100 * Math.random()) + "%",
      //         pctOffl: "25%",
      //         pctLose: "15%",
      //         sumUseState: "90%",
      //       });
      //     });
      //     return;
      //   }

      getSystemStatusType().then((res) => {
        let allList = [];
        let sort = res.data["排序规则"].rule.split(",");
        sort.forEach((i) => {
          for (let key in res.data) {
            let val = res.data[key];
            let item = {
              title: key,
              total: val.sum,
              pctOnl: val.sucessRate,
              pctOffl: val.failRate,
              pctLose: val.lostRate,
              sumUseState: val.sumUseState,
            };
            if (i === key) {
              allList.push(item);
            }
            // if (key.includes("全部设备")) {
            //   allList.unshift(item);
            // } else {
            // allList.push(item);
            // }
          }
        });

        this.equipments = allList;
      });
    },
    setStatus(id, status) {
      if (status == "doing") {
        this["isEmpty" + id] = true;
        this["emptyText" + id] = "数据查询中...";
      } else if (status == "empty") {
        this["isEmpty" + id] = true;
        this["emptyText" + id] = "暂无数据...";
      } else if (status == "finish") {
        this["isEmpty" + id] = false;
        this["emptyText" + id] = "";
      }
    },
    initQueryChart() {
      this.setStatus("01", "doing");
      let data = this.searchFormList[1].options.options;
      let typeLabel = "";
      data.forEach((item) => {
        if (item.value == this.typeQuery) {
          typeLabel = item.label;
        }
      });
      getSystemStatusList({
        startTime: this.startTime,
        time: this.time,
        type: this.typeQuery,
      }).then((res) => {
        if (res.code == 200) {
          this.setStatus("01", "finish");
          let origin = res.data;
          let startStamp = +moment(this.startTime).startOf("day").format("x");
          let endStamp = +moment(this.time).endOf("day").format("x");
          let oneDay = 86400000;
          let daysTotal = Math.ceil((endStamp - startStamp) / oneDay);
          let queryChartData = [];
          let dataX = [];
          let data0 = [];
          let data1 = [];
          for (let i = 0; i < daysTotal; i++) {
            let ts = startStamp + i * oneDay;
            let date = moment(ts).format("YYYY-M-D");
            let val = origin[date] ? +origin[date].replace("%", "") : 0;
            dataX.push(moment(ts).format("MM-DD"));
            data0.push(val);
            data1.push(100);
          }
          onlineCharts.xAxis.data = dataX;
          onlineCharts.series[0].data = data0;
          onlineCharts.series[0].name = typeLabel;
          onlineCharts.series[1].data = data1;
          onlineCharts.yAxis[0].name = "在线率(%)";

          this.$nextTick(() => {
            this.queryChart.setOption(onlineCharts);
          });
          // } else {
          //   this.setStatus("01", "empty");
          // }
        }
      });
    },
    //查询列表
    initQueryTable(pageIndex) {
      this.setStatus("02", "doing");
      getSystemStatusTabList({
        startTime: this.startTime,
        time: this.time,
        type: this.typeQuery,
        pageNum: pageIndex,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 200) {
          // if (res.rows && res.rows.length > 0) {
          this.setStatus("02", "finish");
          this.pageIndex = pageIndex;
          this.pageTotal = res.total;
          this.tableData = res.rows;
          this.tableData.forEach((it, index) => {
            it.order = (pageIndex - 1) * this.pageSize + index + 1;
          });
          // } else {
          //   this.setStatus("02", "empty");
          // }
        }
      });
    },
  },
  async mounted() {
    await this.initData();
    this.getSection();
  },
};
</script>

<style lang="scss" scoped>
.floatEmpty {
  position: absolute;
  z-index: 100;
  // background: rgba($color: #000000, $alpha: 0.2);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.bottomTabs {
  position: relative;
  display: inline-flex;
  width: 100%;
  flex-direction: row;
  flex: 1;
  height: 0;

  .tabs-lo {
    display: inline-flex;
    width: 670px;
    margin-right: 15px;
  }

  .tabs-mo {
    display: inline-flex;
    flex: 1;
  }
}

.deviceSummary {
  height: 390px;
  margin-bottom: 6px;
}

.btnSearch {
  background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
  margin-left: 10px;
  border-color: transparent;
  color: #fff;
}

::v-deep .el-table .cell {
  padding-left: 0px !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #064258 !important;
  color: #00d1ff;
  border-color: #064258 !important;
  border: 0px !important;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
}

::v-deep .el-table {
  border: 0px !important;
  background-color: transparent;
  font-size: 12px !important;
}

::v-deep .el-table__body-wrapper {
  background-color: #064258;
  color: #fff;
}

::v-deep .el-table .el-table__cell {
  height: 47px;
  padding-left: 15px;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #ffffff;
}

::v-deep .el-table tr:hover td {
  background: #1b2528 !important;
  color: #00d1ff;
  height: 47px;
}

::v-deep .el-table tr:nth-child(odd) td {
  background-color: #13272f;
  border: 0px !important;
}

::v-deep .el-table tr:nth-child(even) td {
  border: 0px !important;
}

::v-deep .el-table tr {
  background-color: #133242 !important;
  border-collapse: 0;
  border: 0px !important;
  background-color: transparent !important;
}

::v-deep .el-tabs__item {
  display: inline-flex;
  justify-content: center;
  font-size: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  min-width: 128px;
  position: relative;
  left: 10px;
}

::v-deep .el-tabs__active-bar {
  min-width: 128px;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: #133242;
  opacity: 0.1;
}

.full_tab {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  ::v-deep .el-tabs__header {
  }
  ::v-deep .el-tabs__content {
    flex: 1;
    .el-tab-pane {
      width: 100%;
      height: 100%;
    }
  }
}

.tab_con {
  display: flex;
  flex-direction: column;
}

.topdiv {
  display: inline-flex;
  position: relative;
  width: 100%;
  height: 40px;
  justify-content: space-between;
  align-items: center;

  .right-div {
    display: inline;
    width: 450px;
  }
}

.statisticAnalysis {
  width: 100%;
  height: 100%;
  padding: 8px 20px 20px;

  .header-shot {
    width: 98%;
    margin: auto;
    margin-top: 15px;
    height: 160px;
  }

  .queryChart {
    position: relative;
    display: inline-flex;
    width: 100%;
    height: 343px;
    margin-top: 20px;
    padding: 0 20px;
    background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425860 100%);
    margin-bottom: 30px;
    --keep-ratio: scaleX(1);

    > div {
      display: inline-flex;
      width: 100%;
      height: 100%;
    }
  }

  .content {
    width: 100%;
    margin: auto;
    display: flex;
    flex: 1;
    pointer-events: none;
    margin-top: 19px;

    > div {
      pointer-events: auto;
    }

    .content-l {
      width: calc(25%);

      margin-right: 20px;
    }

    .content-mi {
      width: calc(50%);

      margin-right: 20px;
    }

    .content-m {
      display: inline-flex;
      flex-direction: column;
      width: calc(100% / 4);
      margin-right: 20px;

      .content-m-t {
        width: 100%;
        height: 240px;
        margin-bottom: 20px;
      }
    }

    .content-r {
      width: 49.4%;
    }
  }
}
.footer {
  margin: 15px 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
