Pārlūkot izejas kodu

添加现场任务管理统计卡片组件

zhangyu 5 gadi atpakaļ
vecāks
revīzija
0a3b65e291

+ 123 - 0
src/components/data_admin/buildTask/taskStatistics.vue

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

+ 37 - 30
src/views/data_admin/buildTask/index.vue

@@ -1,36 +1,43 @@
 <template>
-    <div>
-      <das-board>
-        <template v-slot:plan>
-          <span>{{plan?plan:"yyyy-mm-dd"}}</span>
-        </template>
-        <template v-slot:finish>
-          <span>{{finish?finish:"yyyy-mm-dd"}}</span>
-        </template>
-        <template v-slot:onLine>
-          <span>{{onLine?onLine:"yyyy-mm-dd"}}</span>
-        </template>
-        <template v-slot:explain>
-          <span>{{explain?explain:"yyyy-mm-dd"}}</span>
-        </template>
-      </das-board>
-    </div>
+	<div>
+		<task-statistics></task-statistics>
+		<div class="hanson-bar">
+			<el-select v-model="taskType" @change="getHeaderData(mess)" style="width:140px;margin-right:20px;vertical-align:bottom;">
+        <el-option v-for="item in taskTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+      </el-select>
+		</div>
+	</div>
 </template>
 
 <script>
-import dasBoard from "@/views/dasboard/index";
+import { mapGetters } from "vuex";
+import taskStatistics from '@/components/data_admin/buildTask/taskStatistics'
 export default {
-    components: {
-      dasBoard
-    },
-    data() {
-        return {
-          plan: "2019-08-21",
-          finish: "2019-09-06",
-          onLine: "2019-09-30",
-          explain: "现场任务的创建和修改;v1.2:任务完成情况的查看"
-        }
-    },
-    mounted() {}
+  components: {
+		taskStatistics
+	},
+	computed: {
+		...mapGetters("layout", [  "projectId",  "secret", "userId" ])
+	},
+  data() {
+    return {
+			taskTypeList: [{ value: "verification", label: '现场验证任务' }, { value: "tear", label: '现场撕码任务' }, { value: "replace", label: '现场换码任务' }],
+			taskType: 'verification'
+    }
+  },
+  mounted() { },
+  methods: {
+
+  }
 }
-</script>
+</script>
+<style lang="scss" scoped>
+	.hanson-bar {
+    height: 40px;
+    padding: 5px 0;
+    font-size: 14px;
+    overflow: hidden;
+    margin-top: 0;
+    line-height: 40px;
+	}
+</style>