<template>
  <div id="WorkStatistics">
    <div class="DataList DataList1">
      <div class="DataListLeftTitle">巡查统计</div>
      <div class="DataListRightBox">
        <div class="detailsList2">
          <div class="detailsListHeader">今日</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              <span>{{ WorkData.data1.toDay }}</span>
              <div class="detailsListUnit">次</div>
            </div>
          </div>
        </div>
        <div class="detailsList2">
          <div class="detailsListHeader">本月</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              <span> {{ WorkData.data1.ThisMonth }}</span>
              <div class="detailsListUnit">次</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="DataList DataList2">
      <div class="DataListLeftTitle">值班统计</div>
      <div class="DataListRightBox">
        <div class="detailsList2">
          <div class="detailsListHeader">本月</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              <span> {{ WorkData.data2.ThisMonth }}</span>
              <div class="detailsListUnit">次</div>
            </div>
          </div>
        </div>
        <div class="detailsList2">
          <div class="detailsListHeader">完成率</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              <span> {{ WorkData.data2.CompletionRate }}</span>
              <div class="detailsListUnit">%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="DataList DataList3">
      <div class="DataListLeftTitle">维修统计</div>
      <div class="DataListRightBox">
        <div class="detailsList2">
          <div class="detailsListHeader">本月</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              <span> {{ WorkData.data3.ThisMonth }}</span>
              <div class="detailsListUnit">次</div>
            </div>
          </div>
        </div>
        <div class="detailsList2">
          <div class="detailsListHeader">评分</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              <span> {{ WorkData.data3.score }}</span>
              <div class="detailsListUnit">分</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="DataList DataList4">
      <div class="DataListLeftTitle">考核排名</div>
      <div class="DataListRightBox">
        <div class="detailsList4">
          <div class="detailsListHeader">1季度</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              {{ WorkData.data4.Q1 }}
            </div>
            <div class="detailsListUnit">名次</div>
          </div>
        </div>
        <div class="detailsList4">
          <div class="detailsListHeader">2季度</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              {{ WorkData.data4.Q2 }}
            </div>
            <div class="detailsListUnit">名次</div>
          </div>
        </div>
        <div class="detailsList4">
          <div class="detailsListHeader">3季度</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              {{ WorkData.data4.Q3 }}
            </div>
            <div class="detailsListUnit">名次</div>
          </div>
        </div>
        <div class="detailsList4">
          <div class="detailsListHeader">4季度</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              {{ WorkData.data4.Q4 }}
            </div>
            <div class="detailsListUnit">名次</div>
          </div>
        </div>
      </div>
    </div>
    <div class="DataList DataList5">
      <div class="DataListLeftTitle">培训统计</div>
      <div class="DataListRightBox">
        <div class="detailsList3">
          <div class="detailsListHeader">本月</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              {{ WorkData.data5.ThisMonth }}
            </div>
            <div class="detailsListUnit">次</div>
          </div>
        </div>
        <div class="detailsList3">
          <div class="detailsListHeader">本季度</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              {{ WorkData.data5.ThisQuarter }}
            </div>
            <div class="detailsListUnit">次</div>
          </div>
        </div>
        <div class="detailsList3">
          <div class="detailsListHeader">完成率</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              {{ WorkData.data5.ReadRate }}
            </div>
            <div class="detailsListUnit">%</div>
          </div>
        </div>
      </div>
    </div>
    <div class="DataList DataList6">
      <div class="DataListLeftTitle">通知统计</div>
      <div class="DataListRightBox">
        <div class="detailsList3">
          <div class="detailsListHeader">提醒</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              {{ WorkData.data6.remind }}
            </div>
            <div class="detailsListUnit">次</div>
          </div>
        </div>
        <div class="detailsList3">
          <div class="detailsListHeader">已读</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              {{ WorkData.data6.Read }}
            </div>
            <div class="detailsListUnit">次</div>
          </div>
        </div>
        <div class="detailsList3">
          <div class="detailsListHeader">读取率</div>
          <div class="detailsListBody">
            <div class="detailsListValue">
              {{ WorkData.data6.ReadRate }}
            </div>
            <div class="detailsListUnit">%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from "vue";
export default {
  name: "WorkStatistics",
  setup() {
    const AllData = reactive({
      WorkData: {
        data1: {
          toDay: "1",
          ThisMonth: "10",
        },
        data2: {
          ThisMonth: "10",
          CompletionRate: "100",
        },
        data3: {
          ThisMonth: "10",
          score: "4.1",
        },
        data4: {
          Q1: "2",
          Q2: "12",
          Q3: "6",
          Q4: "3",
        },
        data5: {
          ThisMonth: "2",
          ThisQuarter: "10",
          ReadRate: "100",
        },
        data6: {
          remind: "20",
          Read: "10",
          ReadRate: "50",
        },
      },
    });
    onMounted(() => {});
    return {
      ...toRefs(AllData),
    };
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
#WorkStatistics {
  width: 100%;
  height: 100%;

  .DataList {
    width: 265px;
    height: 120px;
    border-radius: 10px;
    float: left;
    margin: 10px 7px;

    .DataListLeftTitle {
      writing-mode: tb-rl;
      width: 50px;
      height: 120px;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      color: #ffffff;
      letter-spacing: 3px;
      float: left;
    }

    .DataListRightBox {
      width: calc(100% - 50px);
      float: left;
      height: 120px;
    }
  }

  .DataList1 {
    background: linear-gradient(60deg, #2e82ff 0%, #58bbff 100%);

    .detailsListHeader {
      background: #72c8ff;
    }
    .detailsListBody {
      background: linear-gradient(0deg, #72c8ff 0%, #4793ff 100%);
    }
  }
  .DataList2 {
    background: linear-gradient(60deg, #4cb4bf 0%, #52c9d6 100%);
    .detailsListHeader {
      background: #5ed5e2;
    }
    .detailsListBody {
      background: linear-gradient(0deg, #5ed5e2 0%, #35b5c2 100%);
    }
  }
  .DataList3 {
    background: linear-gradient(60deg, #e67879 0%, #f78687 100%);
    .detailsListHeader {
      background: #efa7a7;
    }
    .detailsListBody {
      background: linear-gradient(0deg, #efa7a7 0%, #d77273 100%);
    }
  }
  .DataList4 {
    background: linear-gradient(60deg, #9248d8 0%, #b172ed 99%);
  }
  .DataList5 {
    background: linear-gradient(60deg, #fcac79 0%, #f2bc99 100%);

    .detailsList3 {
      background: linear-gradient(
        90deg,
        #f2c6ab 0%,
        rgba(246, 206, 179, 0.13) 100%
      );
    }
  }
  .DataList6 {
    background: linear-gradient(60deg, #5680eb 0%, #67b5ea 100%);

    .detailsList3 {
      background: linear-gradient(
        90deg,
        #86aaf2 0%,
        rgba(111, 154, 234, 0.13) 100%
      );
    }
  }

  .detailsList2 {
    width: 85px;
    height: 100px;
    float: left;
    margin-left: 15px;
    margin-top: 9px;

    .detailsListHeader {
      height: 45px;
      text-align: center;
      line-height: 45px;
      font-size: 18px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #ffffff;
      width: 85px;
    }

    .detailsListBody {
      height: 55px;
      width: 85px;

      .detailsListValue {
        font-size: 32px;
        font-family: DIN;
        font-weight: bold;
        color: #ffffff;
        width: 85px;
        text-align: center;

        .detailsListUnit {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          width: 16px;
          display: inline-block;
        }
      }
    }
  }

  .detailsList4 {
    height: 100px;
    float: left;
    width: 50px;
    background: linear-gradient(
      90deg,
      #b568fe 0%,
      rgba(180, 102, 255, 0.13) 100%
    );
    border-radius: 2px;
    margin-left: 3px;
    margin-top: 10px;

    .detailsListHeader {
      width: 50px;
      text-align: center;
      font-size: 14px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #f2e5ff;
      height: 35px;
      line-height: 35px;
    }

    .detailsListBody {
      width: 50px;
      height: calc(100% - 35px);

      .detailsListValue {
        width: 50px;
        height: 30px;
        line-height: 30px;
        font-size: 28px;
        font-family: DIN;
        font-weight: 500;
        font-style: italic;
        color: #ffffff;
        text-align: center;
      }
      .detailsListUnit {
        font-size: 12px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #c98fff;
        height: 18px;
        line-height: 18px;
        text-align: center;
        width: 50px;
      }
    }
  }

  .detailsList3 {
    height: 100px;
    float: left;
    width: 60px;
    border-radius: 2px;
    margin-left: 10px;
    margin-top: 10px;

    .detailsListHeader {
      width: 60px;
      text-align: center;
      font-size: 14px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #f2e5ff;
      height: 35px;
      line-height: 35px;
    }

    .detailsListBody {
      width: 60px;
      height: calc(100% - 35px);

      .detailsListValue {
        width: 60px;
        height: 30px;
        line-height: 30px;
        font-size: 28px;
        font-family: DIN;
        font-weight: 500;
        font-style: italic;
        color: #ffffff;
        text-align: center;
      }
      .detailsListUnit {
        font-size: 12px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #fff;
        height: 18px;
        line-height: 18px;
        text-align: center;
        width: 60px;
      }
    }
  }
}
</style>