|
@@ -0,0 +1,123 @@
|
|
|
+<template>
|
|
|
+ <div class="statistics-box flex-row">
|
|
|
+ <div class="statistics-all flex-row">
|
|
|
+ <div class="statistics-progress">
|
|
|
+ <div class="statistics-progress-num">
|
|
|
+ <p>25%</p>
|
|
|
+ <p>完成情况</p>
|
|
|
+ </div>
|
|
|
+ <el-progress width="90" type="circle" :percentage="25" :show-text="false"></el-progress>
|
|
|
+ </div>
|
|
|
+ <div class="statistics-all-box flex-col">
|
|
|
+ <span>总任务:<b>2000</b></span>
|
|
|
+ <span>已完成:<b>500</b></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul class="statistics-list flex-row">
|
|
|
+ <li>
|
|
|
+ <p class="statistics-list-text">未找到设备:</p>
|
|
|
+ <p class="statistics-list-num">2000</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p class="statistics-list-text">未找到设备:</p>
|
|
|
+ <p class="statistics-list-num">2000</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p class="statistics-list-text">未找到设备:</p>
|
|
|
+ <p class="statistics-list-num">2000</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p class="statistics-list-text">未找到设备:</p>
|
|
|
+ <p class="statistics-list-num">2000</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from "vuex"
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters("layout", ["projectId", "secret", "userId" ])
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() { },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .statistics-box {
|
|
|
+ height: 120px;
|
|
|
+ color: #333;
|
|
|
+ .statistics-all{
|
|
|
+ flex: 2;
|
|
|
+ border: 1px solid #c9c9c9;
|
|
|
+ margin-right: 10px;
|
|
|
+ background: #fff;
|
|
|
+ .statistics-progress{
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ height: 120px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ padding: 15px 0;
|
|
|
+ .statistics-progress-num{
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 18px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .statistics-all-box{
|
|
|
+ flex: 1;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 25px 0;
|
|
|
+ >span{
|
|
|
+ flex: 1;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 35px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .statistics-list{
|
|
|
+ flex: 7;
|
|
|
+ >li{
|
|
|
+ flex: 1;
|
|
|
+ border: 1px solid #c9c9c9;
|
|
|
+ padding: 10px;
|
|
|
+ margin-left: 10px;
|
|
|
+ background: #fff;
|
|
|
+ .statistics-list-text{
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .statistics-list-num{
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 50px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flex-row{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+ .flex-col{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+</style>
|