<template>
  <div class="testdiv">
    <!-- 看板标题 -->
    <div class="top_title">
      <span>{{ title }}</span>
      <img :src="imgLogo" alt class="logo" @click="back()" />
      <div class="times_bg">{{ nowTime }}</div>
      <div class="setting" @click="openSet()">
        <img src="../../../static/images/setting.svg" />
      </div>
    </div>
    <div class="middle_bottom">
      <Row class="top" v-if="top">
        <i-col span="4">
          <div class="status_total status_normal">
            <div>
              <div class="status_total_left">
                <div>
                  <Icon type="md-thumbs-up" size="44" />
                  <p>运行</p>
                </div>
              </div>
              <div class="status_total_right">{{ top.ctg1 }}</div>
            </div>
          </div>
        </i-col>
        <i-col span="4">
          <div class="status_total status_manual">
            <div>
              <div class="status_total_left">
                <div>
                  <Icon type="ios-build" size="44" />
                  <p>手动/调试</p>
                </div>
              </div>
              <div class="status_total_right">{{ top.ctg2 }}</div>
            </div>
          </div>
        </i-col>
        <i-col span="4">
          <div class="status_total status_free">
            <div>
              <div class="status_total_left">
                <div>
                  <Icon type="md-checkbox-outline" size="44" />
                  <p>空闲</p>
                </div>
              </div>
              <div class="status_total_right">{{ top.ctg3 }}</div>
            </div>
          </div>
        </i-col>
        <i-col span="4">
          <div class="status_total status_danger">
            <div>
              <div class="status_total_left">
                <div>
                  <Icon type="md-information-circle" size="44" />
                  <p>设备报警</p>
                </div>
              </div>
              <div class="status_total_right">{{ top.ctg4 }}</div>
            </div>
          </div>
        </i-col>
        <i-col span="4">
          <div class="status_total status_close">
            <div>
              <div class="status_total_left">
                <div>
                  <Icon type="md-power" size="44" />
                  <p>关机</p>
                </div>
              </div>
              <div class="status_total_right">{{ top.ctg0 }}</div>
            </div>
          </div>
        </i-col>
      </Row>
      <Row class="middle">
        <i-col class="middle_left_box" span="6">
          <div class="title">设备运行状态汇总</div>
          <div class="middle_left" v-if="middle_left">
            <table border="0" class="middle_left_table">
              <tr>
                <td>当天运行时间</td>
                <td>{{ middle_left.dayRun }}小时</td>
              </tr>
              <tr>
                <td>当天空闲时间</td>
                <td>{{ middle_left.dayFree }}小时</td>
              </tr>
              <tr>
                <td>当天报警时间</td>
                <td>{{ middle_left.dayFault }}小时</td>
              </tr>
              <tr>
                <td>当月运行时间</td>
                <td>{{ middle_left.monthRun }}小时</td>
              </tr>
              <tr>
                <td>当月空闲时间</td>
                <td>{{ middle_left.monthFree }}小时</td>
              </tr>
              <tr>
                <td>当月报警时间</td>
                <td>{{ middle_left.monthFault }}小时</td>
              </tr>
              <tr>
                <td>当天效率最高机台</td>
                <td>{{ middle_left.effBig }}</td>
              </tr>
              <tr>
                <td>当天效率最低机台</td>
                <td>{{ middle_left.effSmall }}</td>
              </tr>
            </table>
          </div>
        </i-col>
        <i-col class="middle_right_box" span="17">
          <div class="title">近三天设备稼动率对比</div>
          <div class="middle_right" id="middle_right"></div>
        </i-col>
      </Row>
      <Row class="bottom">
        <i-col class="bottom_left_box" span="6">
          <div class="title">设备运行状态分布</div>
          <div class="bottom_left" id="bottom_left"></div>
        </i-col>
        <i-col class="bottom_right_box" span="17">
          <div class="title">近两月设备运行时间对比</div>
          <div class="bottom_right" id="bottom_right"></div>
        </i-col>
      </Row>
    </div>
    <!-- 弹出框 -->
    <Modal :styles="setting" v-model="setModal" footer-hide>
      <p slot="header">
        <span>请选择要跳转的组合</span>
      </p>
      <div class="modal_body" style="max-height: 160px; overflow-y: auto">
        <List size="small">
          <ListItem v-for="(v, i) in combList" :key="i">
            <span class="setItem" @click="play(v.id)">{{ v.title }}</span>
          </ListItem>
        </List>
      </div>
    </Modal>
  </div>
</template>
<script>
import moment from "moment";
import echarts from "echarts";
import { mapState } from "vuex";

export default {
  inject: ["reload"],
  data() {
    return {
      combList: [],
      setModal: false,
      imgLogo: require("../../../static/images/siger.png"), // logo、
      nowTime: moment(new Date().getTime()).format("YYYY-MM-DD"), // 当前时间
      top: null,
      middle_left: null,
    };
  },
  computed: {
    ...mapState(["user"]),
    combId() {
      return this.$route.query.combId;
    },
    title() {
      return this.$route.query.title;
    },
    setting() {
      return {
        position: "fixed",
        top: "50px",
        right: "50px",
        width: "250px",
      };
    },
  },
  created() {
    if (this.user.logo) {
      this.imgLogo = this.user.logo;
    }
  },
  mounted() {
    let _this = this;
    let query = _this.$route.query;
    let params = {
      patial_code: query.patial_code,
      page_id: query.pageId,
      projectid: _this.user.projectId,
    };
    this.axios
      .request({
        url: "/dashboard/DashboardShow/getalldata",
        params,
        method: "get",
      })
      .then((res) => {
        let result = res.data;
        if (result.ret == 1) {
          let data = result.data;
          _this.render_1(data.res_1);
          _this.render_2(data.res_2);
          _this.render_3(data.res_3);
          _this.render_4(data.res_4);
          _this.render_5(data.res_5);
        }
      });
  },
  methods: {
    openSet() {
      const _this = this;
      _this.axios
        .request({
          url: "/dashboard/DashboardConfig/GetCombList",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.combList = result.data_comb;
            _this.setModal = true;
          }
        });
    },
    // 页面播放
    play(combId) {
      const _this = this;
      let params = {
        id: combId,
        projectid: _this.user.projectId,
      };
      _this.axios
        .request({
          url: "/dashboard/DashboardShow/getallcombpages",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.$router.replace({ name: "8000063", query: { combId } });
            _this.reload();
          }
        });
    },
    back() {
      this.$router.go(-1);
    },
    render_1(res) {
      let ctg0 = 0,
        ctg1 = 0,
        ctg2 = 0,
        ctg3 = 0,
        ctg4 = 0;
      if (
        res.last_data &&
        res.last_data !== null &&
        res.last_data.data.length > 0
      ) {
        res.last_data.data.forEach((ele, i) => {
          if (res.listAll[ele.machineId]) {
            switch (ele.staus) {
              case 0:
                ctg0++;
                break;
              case 1:
                ctg1++;
                break;
              case 2:
                ctg2++;
                break;
              case 3:
                ctg3++;
                break;
              case 4:
                ctg4++;
                break;
            }
          }
        });
      }
      let top = {};
      top.ctg0 = ctg0;
      top.ctg1 = ctg1;
      top.ctg2 = ctg2;
      top.ctg3 = ctg3;
      top.ctg4 = ctg4;
      this.top = top;
    },
    render_2(pareto) {
      let middle_left = {};
      middle_left.dayFree = pareto.day.free;
      middle_left.dayFault = pareto.day.fault;
      middle_left.dayRun = pareto.day.running;
      middle_left.monthFree = pareto.month.free;
      middle_left.monthFault = pareto.month.fault;
      middle_left.monthRun = pareto.month.running;
      middle_left.effBig = pareto.eff.big;
      middle_left.effSmall = pareto.eff.small;
      this.middle_left = middle_left;
    },
    render_3(res) {
      let option = {
        title: false,
        legend: {
          x: "right",
          y: "4",
          data: ["前天", "昨天", "今天"],
          textStyle: {
            color: "#fff",
            fontSize: "12",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "12%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: res.day.title,
            axisLine: { lineStyle: { color: "#fff" } },
            axisLabel: {
              show: true,
              interval: 0,
              rotate: 30,
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位:%",
            axisLine: { lineStyle: { color: "#fff" } },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
            },
          },
        ],
        series: [
          {
            name: "前天",
            barMaxWidth: 70,
            type: "bar",
            stack: "1",
            data: res.oneYesterday.running,
            itemStyle: {
              normal: {
                color: "#5384E6",
              },
            },
          },
          {
            name: "昨天",
            barMaxWidth: 70,
            type: "bar",
            stack: "2",
            data: res.yesterday.running,
            itemStyle: {
              normal: {
                color: "#52C69B",
              },
            },
          },
          {
            name: "今天",
            barMaxWidth: 70,
            type: "bar",
            stack: "3",
            data: res.day.running,
            itemStyle: {
              normal: {
                color: "#586C8D",
              },
            },
          },
        ],
      };
      if (document.getElementById("middle_right")) {
        echarts.init(document.getElementById("middle_right")).setOption(option);
      }
    },
    render_4(res) {
      let option = {
        title: false,
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c}%",
        },
        legend: {
          x: "center",
          bottom: 10,
          textStyle: {
            color: "#fff",
          },
          data: ["运行", "报警", "空闲", "手动/调试", "关机"],
        },
        color: ["#40CC5F", "#F53D40", "#F48F37", "#4F8FDB", "#C6C5CB"],
        series: [
          {
            name: "状态监测",
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "50%"],
            label: {
              formatter: "{b|{b}：}{per|{d}%}",
              rich: {
                b: {
                  fontSize: 12,
                  lineHeight: 24,
                  fontWeight: "bold",
                },
                per: {
                  fontSize: 12,
                  fontWeight: "bold",
                },
              },
            },
            data: [
              { value: res.num2, name: "运行" },
              { value: res.num5, name: "报警" },
              { value: res.num4, name: "空闲" },
              { value: res.num3, name: "手动/调试" },
              { value: res.num1, name: "关机" },
            ],
          },
        ],
      };
      if (document.getElementById("bottom_left")) {
        echarts.init(document.getElementById("bottom_left")).setOption(option);
      }
    },
    render_5(res) {
      let option = {
        title: false,
        legend: {
          x: "right",
          y: "4",
          data: ["上月", "本月"],
          textStyle: {
            color: "#fff",
            fontSize: "12",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "12%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLine: { lineStyle: { color: "#fff" } },
            axisLabel: {
              show: true,
              interval: 0,
              rotate: 30,
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
            },
            data: res.onemonth.title,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位:H",
            axisLine: { lineStyle: { color: "#fff" } },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
            },
          },
        ],
        series: [
          {
            name: "上月",
            barMaxWidth: 70,
            type: "bar",
            stack: "1",
            data: res.onemonth.running,
            itemStyle: {
              normal: {
                color: "#4EBE96",
              },
            },
          },
          {
            name: "本月",
            barMaxWidth: 70,
            type: "bar",
            stack: "2",
            data: res.month.running,
            itemStyle: {
              normal: {
                color: "#5789EF",
              },
            },
          },
        ],
      };
      if (document.getElementById("bottom_right")) {
        echarts.init(document.getElementById("bottom_right")).setOption(option);
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    if (from.path == "/") {
      next((vm) => {
        vm.$router.replace({ name: "8000063", query: { combId: vm.combId } });
      });
      return false;
    }
    next();
  },
};
</script>
<style lang="less" scoped>
.top {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.middle {
  margin-top: 24px;
  height: 400px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .middle_left_box {
    height: 100%;

    .title {
      height: 44px;
      background: url("../../../static/images/u6.png") center center no-repeat;
      background-size: 100% 100%;
      font-size: 20px;
      font-weight: bolder;
      color: #b1e2ff;
      line-height: 44px;
      padding-left: 20px;
      box-sizing: border-box;
      margin-bottom: 12px;
    }
    .middle_left {
      height: 90%;
      background: url("../../../static/images/u12.png") center center no-repeat;
      background-size: 100% 100%;

      .middle_left_table {
        color: #b1e2ff;
        font-size: 18px;
        width: 100%;
        height: 100%;
        tr {
          td {
            padding-left: 16px;
          }
        }
      }
    }
  }

  .middle_right_box {
    height: 100%;
    background: url("../../../static/images/u9.png");
    background-size: 100% 100%;
    padding: 16px 14px;
    .title {
      font-size: 20px;
      text-align: center;
      font-weight: bolder;
      height: 32px;
      line-height: 32px;
      color: #b1e2ff;
    }

    .middle_right {
      height: 100%;
    }
  }
}

.bottom {
  height: 400px;
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom_left_box {
  height: 100%;

  .title {
    height: 44px;
    background: url("../../../static/images/u6.png") center center no-repeat;
    background-size: 100% 100%;
    font-size: 20px;
    font-weight: bolder;
    color: #b1e2ff;
    line-height: 44px;
    padding-left: 20px;
    box-sizing: border-box;
    margin-bottom: 12px;
  }

  .bottom_left {
    height: 85%;
    padding: 5px 20px;
    background: url("../../../static/images/u9.png") center center no-repeat;
    background-size: 100% 100%;
  }
}

.bottom_right_box {
  height: 100%;
  background: url("../../../static/images/u9.png");
  background-size: 100% 100%;
  padding: 16px 14px;
  .title {
    font-size: 20px;
    text-align: center;
    font-weight: bolder;
    height: 32px;
    line-height: 32px;
    color: #b1e2ff;
  }
  .bottom_right {
    height: 100%;
  }
}

.status_total {
  width: 175px;
}

.status_total_left {
  width: 75px;
  height: 75px;
  color: #ffffff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.status_total_left div {
  height: 75%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.status_total_right {
  width: 100px;
  text-align: center;
  height: 75px;
  line-height: 75px;
  background-color: #021d35;
  color: #ffffff;
  font-size: 28px;
}

.status_normal > div {
  display: flex;
  border: 2px solid #5db75d;
}

.status_normal .status_total_left {
  background-color: #5db75d;
}

.status_manual > div {
  display: flex;
  border: 2px solid #5babe0;
}

.status_manual .status_total_left {
  background-color: #5babe0;
}

.status_free > div {
  display: flex;
  border: 2px solid #efad4d;
}

.status_free .status_total_left {
  background-color: #efad4d;
}

.status_danger > div {
  display: flex;
  border: 2px solid #d9524b;
}

.status_danger .status_total_left {
  background-color: #d9524b;
}

.status_close > div {
  display: flex;
  border: 2px solid #c6c5cb;
}
.status_close .status_total_left {
  background-color: #c6c5cb;
}

@font-face {
  font-family: "DS-DIGII";
  src: url(../../../static/font/DS-DIGI.TTF) format("truetype");
}

.testdiv {
  width: 100%;
  max-width: 1920px;
  height: 100%;
  background-image: url("../../../static/images/u0.png");
  background-size: 100% 100%;
  padding: 11px;
  box-sizing: border-box;
  overflow-y: auto;
}

.top_title {
  width: 100%;
  height: 106px;
  background: url("../../../static/images/u2.png") center center no-repeat;
  background-size: 81.25% 100%;
  padding: 0 25px 0 40px;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  font-size: 59px;
  color: #fff;
  font-weight: bold;
  line-height: 100px;
  position: relative;
  font-style: italic;

  .logo {
    width: 200px;
    height: 60px;
    float: left;
    margin-top: 27px;
    cursor: pointer;
  }

  .times_bg {
    width: 200px;
    height: 40px;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    float: right;
    background: url("../../../static/images/u4.png") center center no-repeat;
    background-size: 100% 40px;
    margin-top: 34px;
  }
}

.middle_bottom {
  margin-top: 24px;
  padding: 0 12px;
}

::-webkit-scrollbar {
  display: none;
}
.setting {
  display: inline-block;
  position: fixed;
  right: 20px;
  top: -20px;
  img {
    width: 40px;
    cursor: pointer;
  }
}
.setItem {
  font-size: 14px;
  cursor: pointer;
}
.setItem:hover {
  color: #2d8cf0;
  font-weight: bold;
}
</style>
