<template>
  <el-row :gutter="10">
    <el-col :md="12" :sm="24">
      <el-card shadow="hover" header="进行项目">
        <div style="width:33%;float:left">
          <div style="margin: 0px 20px 12px 40px;">
            <el-badge :value="operationnumber" class="item">
              <el-button
                icon="el-icon-document-copy"
                type="primary"
                size="small"
              ></el-button>
            </el-badge>
          </div>
          <div style="margin: 0px 20px 12px 40px">
            <span>作业</span>
          </div>
        </div>
        <div style="width:33%;float:left">
          <div style="margin: 0px 20px 12px 40px;">
            <el-badge :value="rpjnumber" class="item">
              <el-button
                icon="el-icon-document-copy"
               type="warning"
                size="small"
              ></el-button>
            </el-badge>
          </div>
          <div style="margin: 0px 20px 12px 40px">
            <span>相关方项目</span>
          </div>
        </div>
        <div style="width:33%;float:left">
          <div style="margin: 0px 20px 12px 40px;">
            <el-badge :value="visitnumber" class="item">
              <el-button
                icon="el-icon-document-copy"
                type="success"
                size="small"
              ></el-button>
            </el-badge>
          </div>
          <div style="margin: 0px 20px 12px 40px">
            <span>访客项目</span>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :md="12" :sm="24">
      <el-card shadow="hover">
        <template #header>
      <div class="card-header">
        <span>人员统计</span>
        <el-button class="button" text>在厂</el-button>
        <el-button class="button" text>有卡</el-button>
      </div>
    </template>
        <div class="screen-cockpits">
          <div class="cockpit-count">
            <!-- <div class="divider"></div>
            <div class="simple-title">
              <div class="countTypeWrap">
                <span
                  :class="{ activeCount: countIndex === '1' }"
                  @click="countINdexChange('1')"
                  >有卡</span
                >
                <el-divider direction="vertical"></el-divider>
                <span
                  :class="{ activeCount: countIndex === '2' }"
                  @click="countINdexChange('2')"
                  >在厂</span
                >
              </div>
            </div> -->
            <div class="count-list">
              <div class="count-list-item">
                <div class="item-img item-img2"></div>
                <div class="item-info">
                  <div title="员工" class="normal">内部员工</div>
                  <div class="bottom">
                    <span class="large">{{ userCount.count_employee }}</span
                    >&nbsp;<span class="normal">人</span>
                  </div>
                </div>
              </div>
              <div class="count-list-item">
                <div class="item-img item-img1"></div>
                <div class="item-info">
                  <div title="外来人员" class="normal">访客</div>
                  <div class="bottom">
                    <span class="large">{{ userCount.count_visitor }}</span
                    >&nbsp;<span class="normal">人</span>
                  </div>
                </div>
              </div>
              <div class="count-list-item">
                <div class="item-img item-img3"></div>
                <div class="item-info">
                  <div title="承包商" class="normal">相关方</div>
                  <div class="bottom">
                    <span class="large">{{ userCount.count_remployee }}</span
                    >&nbsp;<span class="normal">人</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      dutyAgg: [],
      //数据统计
      userCount: {
        total: 0,
        count_employee: 0, //内部员工
        count_remployee: 0, //访客
        count_visitor: 0, //相关方
      },
      operationnumber: null,
      rpjnumber:null,
      visitnumber:null
    };
  },
  created() {
    this.getdutyAgg();
    this.getManCount(); //人员统计$$
    this.getOperation();
    this.getRpj();
    this.getVisit();
  },
  methods: {
    //工单待办
    async getdutyAgg() {
      let res = await this.$API.wf.ticket.dutyAgg.req({ page: 0 });
      this.dutyAgg = res.details;
    },
    //人员统计
    getManCount() {
      let that = this;
      if (that.countIndex === "2") {
        that.$API.third.blt.countNow.req().then((res) => {
          if (res.err_msg) {
          } else {
            that.userCount = { ...res };
          }
        });
      } else {
        that.$API.third.blt.countBind.req().then((res) => {
          if (res.err_msg) {
          } else {
            that.userCount = { ...res };
          }
        });
      }
    },
    //有卡/在线切换
    countINdexChange(index) {
      this.countIndex = index;
      this.getManCount();
    },

    //作业
    getOperation() {
      this.$API.opm.operation.list
        .req({ page: 1, page_size: 1, state: 40 })
        .then((res) => {
          this.operationnumber = res.count;
        });
    },
     //相关方入场项目
    getRpj() {
      this.$API.rpm.rpj.list
        .req({ page: 1, page_size: 1, state: 40 })
        .then((res) => {
          this.rpjnumber = res.count;
        });
    },
     //访客
    getVisit() {
      this.$API.vm.visit.list
        .req({ page: 1, page_size: 1, state: 40 })
        .then((res) => {
          this.visitnumber = res.count;
        });
    },
  },
};
</script>

<style scoped lang="scss">
.welcome .logo {
  text-align: center;
}

.welcome .logo img {
  vertical-align: bottom;
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.welcome .logo h2 {
  font-size: 30px;
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tips {
  margin-top: 20px;
  padding: 0 40px;
}

.tips-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7.5px 0;
}

.tips-item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  margin-right: 20px;
  color: var(--el-color-primary);
  background: rgba(180, 180, 180, 0.1);
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.tips-item-message {
  flex: 1;
  font-size: 14px;
}
.item-img {
  width: 50px;
  height: 50px;
  position: relative;
  margin-right: 6px;
  flex-shrink: 0;
}

.item-img:after {
  content: "";
  width: 38px;
  height: 38px;
  position: absolute;
  left: 7px;
  top: 7px;
  background: url(/public/img/rotate_line.png) no-repeat;
  background-size: 100% 100%;
  -webkit-animation: rotate 4s linear infinite;
  animation: rotate 4s linear infinite;
}
.zuoye {
  background: url(/public/img/zuoye.png) no-repeat;
  background-size: 100% 100%;
}
.actions {
  text-align: center;
  margin: 40px 0 20px 0;
}
.screen-cockpits {
  margin-top: -15px;
  .cockpit-count {
    .count-list {
      display: flex;
      flex-wrap: wrap;
    margin-left: 30px;
      .count-list-item {
        width: 33.3333%;
        height: 50%;
        display: flex;

        .item-img {
          width: 50px;
          height: 50px;
          position: relative;
          margin-right: 6px;
          flex-shrink: 0;
        }

        .item-img:after {
          content: "";
          width: 38px;
          height: 38px;
          position: absolute;
          left: 7px;
          top: 7px;
          background: url(/public/img/rotate_line.png) no-repeat;
          background-size: 100% 100%;
          -webkit-animation: rotate 4s linear infinite;
          animation: rotate 4s linear infinite;
        }

        .item-img1 {
          background: url(/public/img/icon_wlry.png) no-repeat;
          background-size: 100% 100%;
        }

        .item-img2 {
          background: url(/public/img/icon_nbyg.png) no-repeat;
          background-size: 100% 100%;
        }

        .item-img3 {
          background: url(/public/img/icon_cbs.png) no-repeat;
          background-size: 100% 100%;
        }

        .item-info {
          .normal {
            font-size: 12px;
            font-weight: 400;
            //	color: #fff;
          }

          .large {
            font-size: 30px;
            font-weight: 400;
            //color: #fff;
          }
        }
      }
    }

    .simple-title {
      line-height: 22px;
      font-size: 16px;
      font-weight: 700;
      //color: #fff;
      position: relative;
      padding-left: 8px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .countTypeWrap {
        font-size: 14px;

        span {
          cursor: pointer;
        }

        .activeCount {
          display: inline-block;
          height: 32px;
          line-height: 32px;
          border-radius: 16px;
          //color: #fff;
          font-size: 14px;
          padding: 0 18px;
          border: 1px solid #32fde3;
          background: #007767;
          box-shadow: inset 0 0 8px #5aecf0;
          cursor: pointer;
        }
      }
    }
  }

  .cockpit-alarm {
    .alarm-bell {
      padding: 0 18px 0 32px;
      position: relative;
      //	color: #fff;
    }

    .alarm-bell:after {
      content: "";
      position: absolute;
      left: 12px;
      top: 8px;
      width: 14px;
      height: 16px;
      background: url(/public/img/bell.png) no-repeat;
      background-size: 100% 100%;
    }

    .alarm-bell.danger {
      border: 1px solid #ffc679;
      background: #dd8000;
      box-shadow: inset 0 0 8px #fda732;
    }

    .alarm-bell.danger:hover {
      box-shadow: 0 0 8px #fda732, inset 0 0 8px #fda732;
    }

    .alarm-content {
      display: flex;
      justify-content: space-between;
      height: calc(100% - 50px);

      .content-left {
        width: 160px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .alarm-danger {
          width: 150px;
          height: 150px;
          background: url(/public/img/a_danger.png) no-repeat;
          background-size: 100% 100%;
        }
      }

      .content-right {
        width: calc(100% - 170px);
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;

        .alarm-item {
          width: 50%;
          height: 25%;
          font-size: 14px;
          font-weight: 700;
          padding-left: 8px;
          position: relative;
          display: flex;
          align-items: center;

          .item-name {
            margin-right: 4px;
            flex-shrink: 0;
          }

          .item-number {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .item-icon {
            width: 14px;
            height: 14px;
            margin-right: 4px;
            flex-shrink: 0;
          }
        }

        .alarm-item-danger {
          color: #fda732;

          .item-icon {
            background: url(/public/img/r_danger.png) no-repeat;
            background-size: 100% 100%;
          }
        }

        .alarm-item-safe {
          //		color: #fff;

          .item-icon {
            background: url(/public/img/r_safe.png) no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }

  .cockpit-info {
    .header-tab {
      width: 210px;
    }
  }
}
</style>
