<template>
  <div v-loading="loading">
    <el-container>
      <el-aside
        style="background:white;width:75% ;margin-right:2%;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
      >
        <div style="margin-top:10px;margin-left:10px">
          <el-row style="text-align:left;margin-bottom:5% ;font-weight:bold;"
            >设备状态统计实时监测</el-row
          >
          <el-row class="row-bg">
            <el-col :span="4">
              <div class="grid-content bg-blue">设备总数</div>
              <div class="grid-content bg-blue big">4545台</div>
            </el-col>
            <el-col :span="4" :offset="1">
              <div class="grid-content bg-green">正常</div>
              <div class="grid-content bg-green big">3621台</div>
            </el-col>
            <el-col :span="4" :offset="1">
              <div class="grid-content bg-orange">报警</div>
              <div class="grid-content bg-orange big">273台</div>
            </el-col>
            <el-col :span="4" :offset="1">
              <div class="grid-content bg-red">故障</div>
              <div class="grid-content bg-red big">432台</div>
            </el-col>
            <el-col :span="4" :offset="1">
              <div class="grid-content bg-grey">通讯中断</div>
              <div class="grid-content bg-grey big">422台</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col
              ><div><img src="../../assets/map.png" alt="" class="map" /></div
            ></el-col>
          </el-row>
        </div>
      </el-aside>
      <el-container>
        <el-header
          style=" height:280px; margin-bottom:5%;background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
        >
          <el-row style="text-align:left;margin-bottom:5% ;font-weight:bold;"
            >巡检通知</el-row
          >
          <el-row
            ><div v-for="(item, i) in infos" class="info">
              <el-col
                :span="1"
                style=" margin-top:12px;width: 25px;height: 25px;border: 1px solid #314659;color:white;background:#314659;border-radius:50%;text-align:center;line-height:25px"
                >{{ item.id }}</el-col
              >
              <el-col :span="0.3" class="infos">{{ item.location }}</el-col>
              <el-col :span="0.3" class="infos">
                <div>
                  <el-button @click="detail(scope.row)" type="text" size="small"
                    ><div>{{ item.operation }}</div></el-button
                  >
                </div></el-col
              >
            </div></el-row
          >
        </el-header>

        <el-main
          style=" overflow: hidden;height:280px; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
        >
          <el-row style="text-align:left;margin-bottom:5% ;font-weight:bold;"
            >区域耗能统计</el-row
          >
          <el-row
            ><v-chart autoresize :options="option" style="width: 100%;"
          /></el-row>
        </el-main>
      </el-container>
    </el-container>
    <el-container style="margin-top:1%">
      <el-aside
        style="width:49% ;margin-right:2% ; overflow: hidden; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
      >
        <el-row style="text-align:left;margin-bottom:2% ;font-weight:bold;"
          >今日能耗实时统计</el-row
        >
        <el-row
          ><v-chart autoresize :options="option1" style="width: 100%;"
        /></el-row>
      </el-aside>
      <el-main
        style="overflow: hidden; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
      >
        <el-row style="text-align:left;margin-bottom:2% ;font-weight:bold;"
          >今日报警次数统计</el-row
        >
        <el-row
          ><v-chart autoresize :options="option2" style="width: 100%;"
        /></el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script lang="ts">
import { ref, onMounted } from "@vue/composition-api";

export default {
  setup() {
    var labelRight = {
      position: "right"
    };
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        top: 5,
        bottom: 5
      },
      xAxis: {
        type: "value",
        position: "top",

        splitLine: {
          lineStyle: {
            type: "dashed"
          }
        }
      },
      yAxis: {
        type: "category",
        axisLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
        max: 5,
        data: ["孵化器2幢", "孵化器2幢", "孵化器2幢", "孵化器2幢", "孵化器1幢"]
      },
      series: [
        {
          name: "用电",
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            formatter: "{b}"
          },

          data: [
            { value: -0.07, label: labelRight },
            { value: -0.09, label: labelRight },
            0.2,
            0.44,
            { value: -0.23, label: labelRight },
            0.08,
            { value: -0.17, label: labelRight },
            0.47,
            { value: -0.36, label: labelRight },
            0.18
          ]
        }
      ]
    };
    const option1 = {
      color: ["#3398DB"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: [
            "9:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14：00",
            "15：00",
            "16:00",
            "17：00",
            "18：00"
          ],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: [
        {
          name: "能耗",
          type: "bar",
          barWidth: "60%",
          data: [10, 52, 200, 334, 390, 330, 220, 435, 656, 232]
        }
      ]
    };
    const option2 = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "9:00",
          "10:00",
          "11:00",
          "12:00",
          "13:00",
          "14：00",
          "15：00",
          "16:00",
          "17：00",
          "18：00"
        ]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          name: "次数",
          data: [820, 932, 901, 934, 1290, 1330, 1320, 2312, 5435, 2121],
          type: "line",
          areaStyle: {}
        }
      ]
    };
    const infos = [
      { id: "1", location: "孵化器2幢一层", operation: "日常巡检" },
      { id: "2", location: "孵化器2幢一层", operation: "日常巡检" },
      { id: "3", location: "孵化器2幢一层", operation: "日常巡检" },
      { id: "4", location: "孵化器2幢一层", operation: "日常巡检" },
      { id: "5", location: "孵化器2幢一层", operation: "日常巡检" }
    ];
    const loading = ref<boolean>(false);
    return {
      loading,
      infos,
      option,
      option1,
      option2,
      labelRight
    };
  }
};
</script>
<style lang="scss">
.map {
  margin-left: 5%;
  width: 90%;
  overflow: hidden;
  cursor: pointer;
}
.grid-content {
  text-align: center;
  line-height: 30px;
}
.bg-blue {
  color: blue;
}
.el-row {
  margin-bottom: 10px;
}
.bg-green {
  color: green;
}
.bg-orange {
  color: orange;
}
.bg-red {
  color: red;
}
.bg-grey {
  color: grey;
}
.big {
  font-size: large;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.info {
  line-height: 50px;
}
.infos {
  padding: 0 25px;
}
</style>
