<template>
  <div class="testdiv">
    <!-- 看板标题 -->
    <div class="top_title">
      <span>{{ title }}</span>
      <img :src="imgLogo" 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_center_box" span="18">
          <div class="middle_center">
            <div class="middle_center_1">
              <div id="middle_center_1"></div>
            </div>
            <div class="middle_center_2">
              <div id="middle_center_2"></div>
            </div>
            <div class="middle_center_3">
              <div class="title">设备状态分布</div>
              <div id="middle_center_3"></div>
            </div>
          </div>
        </i-col>
      </Row>
      <Row class="bottom">
        <i-col class="bottom_box" span="24">
          <div class="title">近三天设备稼动率对比</div>
          <div class="bottom" id="bottom"></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() {
    const _this = this;
    _this.request_1();
    _this.request_2();
    _this.request_3();
    _this.request_4();
    _this.request_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);
    },
    // 区域 1 请求
    request_1() {
      const _this = this;
      let query = _this.$route.query;
      let params = {
        patial_code: "production_line_1",
        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.status);
            // _this.render_2(data);
            // _this.render_3(data);
            // _this.render_4(result);
            // _this.render_5_1(data.qie);
            // _this.render_5_2(data.level, data.dan);
          }
        });
    },
    // 区域 2 请求
    request_2() {
      const _this = this;
      let query = _this.$route.query;
      let params = {
        patial_code: "production_line_2",
        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.status);
            _this.render_2(data);
            // _this.render_3(data);
            // _this.render_4(result);
            // _this.render_5_1(data.qie);
            // _this.render_5_2(data.level, data.dan);
          }
        });
    },
    // 区域 3 请求
    request_3() {
      const _this = this;
      let query = _this.$route.query;
      let params = {
        patial_code: "production_line_3",
        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.status);
            // _this.render_2(data);
            _this.render_3(data);
            // _this.render_4(result);
            // _this.render_5_1(data.qie);
            // _this.render_5_2(data.level, data.dan);
          }
        });
    },
    // 区域 4 请求
    request_4() {
      const _this = this;
      let query = _this.$route.query;
      let params = {
        patial_code: "production_line_4",
        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.status);
            // _this.render_2(data);
            // _this.render_3(data);
            _this.render_4(result);
            // _this.render_5_1(data.qie);
            // _this.render_5_2(data.level, data.dan);
          }
        });
    },
    // 区域 5 请求
    request_5() {
      const _this = this;
      let query = _this.$route.query;
      let params = {
        patial_code: "production_line_5",
        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.status);
            // _this.render_2(data);
            // _this.render_3(data);
            // _this.render_4(result);
            _this.render_5_1(data.qie);
            _this.render_5_2(data.level, data.dan);
          }
        });
    },
    render_1(res) {
      let ctg0 = 0,
        ctg1 = 0,
        ctg2 = 0,
        ctg3 = 0,
        ctg4 = 0;
      if (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,
        tooltip: {
          trigger: "item",
        },
        legend: {
          x: "center",
          bottom: 10,
          textStyle: {
            color: "#fff",
          },
          data: ["运行", "报警", "空闲", "手动/调试", "关机"],
        },
        color: ["#40CC5F", "#F53D40", "#F48F37", "#4F8FDB", "#C6C5CB"],
        series: [
          {
            type: "pie",
            radius: ["30%", "50%"],
            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.running, name: "运行" },
              { value: res.fault, name: "报警" },
              { value: res.free, name: "空闲" },
              { value: res.debugging, name: "手动/调试" },
              { value: res.shutdown, name: "关机" },
            ],
          },
        ],
      };
      if (document.getElementById("middle_center_3")) {
        echarts
          .init(document.getElementById("middle_center_3"))
          .setOption(option);
      }
    },
    render_4(res) {
      let option = {
        title: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          x: "right",
          y: "4",
          data: ["前天", "昨天", "今天"],
          textStyle: {
            color: "#fff",
            fontSize: "12",
          },
        },
        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.data.day.title,
          },
        ],
        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.data.oneYesterday.running,
            itemStyle: {
              normal: {
                color: "#5384E6",
              },
            },
          },
          {
            name: "昨天",
            barMaxWidth: 70,
            type: "bar",
            stack: "2",
            data: res.data.yesterday.running,
            itemStyle: {
              normal: {
                color: "#52C69B",
              },
            },
          },
          {
            name: "今天",
            barMaxWidth: 70,
            type: "bar",
            stack: "3",
            data: res.data.day.running,
            itemStyle: {
              normal: {
                color: "#586C8D",
              },
            },
          },
        ],
      };
      if (document.getElementById("bottom")) {
        echarts.init(document.getElementById("bottom")).setOption(option);
      }
    },
    render_5_1(allData) {
      var dataname = [];
      var datanum = [];
      $.each(allData, function (i, value) {
        dataname.push(value.datetime);
        datanum.push(value.data);
      });
      var datanumber = [];
      var datanumber1 = [];
      var datanumber2 = [];
      var datanumber3 = [];
      var datanumber4 = [];
      var datanumber5 = [];
      if (datanum) {
        $.each(datanum, function (i, v) {
          datanumber1.push(v.num1);
          datanumber2.push(v.num2);
          datanumber3.push(v.num3);
          datanumber4.push(v.num4);
          datanumber5.push(v.num5);
        });
        datanumber.push(datanumber1);
        datanumber.push(datanumber2);
        datanumber.push(datanumber3);
        datanumber.push(datanumber4);
        datanumber.push(datanumber5);
      }
      getCanvasDataPhoto(dataname, datanumber);
      function getCanvasDataPhoto(dataname, datanumber) {
        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            textStyle: {
              color: "#fff",
            },
            data: ["运行", "手动/调试", "空闲", "报警", "关机"],
          },
          grid: {
            left: "2%",
            right: "2%",
            bottom: "12%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: dataname,
              axisLine: { lineStyle: { color: "#fff" } },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "%",
              max: 100,
              min: 0,
              axisLine: { lineStyle: { color: "#fff" } },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
          ],
          series: [
            {
              name: "运行",
              type: "bar",
              stack: 1,
              data: datanumber[1],
              label: {
                show: true,
                position: "inside",
              },
              itemStyle: {
                normal: {
                  color: "#40CC5F",
                },
              },
            },
            {
              name: "手动/调试",
              type: "bar",
              stack: 1,
              data: datanumber[2],
              itemStyle: {
                normal: {
                  color: "#4F8FDB",
                },
              },
            },
            {
              name: "空闲",
              type: "bar",
              stack: 1,
              data: datanumber[3],
              itemStyle: {
                normal: {
                  color: "#F48F37",
                },
              },
            },
            {
              name: "报警",
              type: "bar",
              stack: 1,
              data: datanumber[4],
              itemStyle: {
                normal: {
                  color: "#F53D40",
                },
              },
            },
            {
              name: "关机",
              type: "bar",
              stack: 1,
              data: datanumber[0],
              itemStyle: {
                normal: {
                  color: "#C6C5CB",
                },
              },
            },
          ],
        };
        if (document.getElementById("middle_center_1")) {
          echarts
            .init(document.getElementById("middle_center_1"))
            .setOption(option);
        }
      }
    },
    render_5_2(res1, res2) {
      let option = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            return `${params.seriesName}<br/>${params.data.name}：${params.data.value}（${params.data.percent}%）`;
          },
        },
        legend: {
          left: "top",
          top: "center",
          orient: "vertical",
          textStyle: {
            color: "#fff",
          },
          data: res1.title,
        },
        color: res1.color,
        series: [
          {
            name: "总效率",
            type: "pie",
            radius: ["30%", "45%"],
            center: ["50%", "25%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "center",
                fontWeight: "bold",
                fontSize: 16,
                color: "#fff",
                formatter: "{a}",
              },
            },
            labelLine: {
              show: false,
            },
            data: res1.running,
          },
          {
            name: "单位效率",
            type: "pie",
            radius: ["30%", "45%"],
            center: ["50%", "75%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "center",
                fontWeight: "bold",
                fontSize: 16,
                color: "#fff",
                formatter: "{a}",
              },
            },
            labelLine: {
              show: false,
            },
            data: res2.running,
          },
        ],
      };
      if (document.getElementById("middle_center_2")) {
        echarts
          .init(document.getElementById("middle_center_2"))
          .setOption(option);
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    console.log(from);
    if (from.path == "/") {
      next((vm) => {
        vm.$router.replace({ name: "8000063", query: { combId: vm.combId } });
      });
      return false;
    }
    next();
  },
};
</script>
<style lang="less" scoped>
.middle {
  margin-top: 24px;
  height: 400px;

  .middle_left_box {
    height: 100%;
    .title {
      height: 32px;
      background: url("../../../static/images/u6.png") center center no-repeat;
      background-size: 100% 100%;
      font-size: 20px;
      font-weight: bolder;
      color: #b1e2ff;
      line-height: 32px;
      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_center_box {
    height: 100%;
    .middle_center {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      height: 100%;

      .middle_center_1 {
        height: 100%;
        width: 38%;

        #middle_center_1 {
          height: 100%;
          padding: 12px 8px;
          background: url("../../../static/images/u9.png") center center
            no-repeat;
          background-size: 100% 100%;
        }
      }

      .middle_center_2 {
        height: 100%;
        width: 25%;

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

      .middle_center_3 {
        height: 100%;
        width: 35%;

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

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

.bottom {
  height: 400px;
  margin-top: 24px;

  .bottom_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 {
      height: 100%;
    }
  }
}

.top {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.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 24px;
}

::-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>
