联调数据清洗页面 绘制终端运行评价页面

src/views/pqs/runManage/runEvaluate/components/statistics.vue

@@ -0,0 +1,61 @@
+<template>
+    <div style="height:150px" class="box">
+        <div class="boxDiv">
+            <div style="color: #07ccca">300</div>
+            <img src="@/assets/imgs/ditu.png" />
+            <div class="mt10 divBot">总数</div>
+        </div>
+        <div class="boxDiv">
+            <div style="color: #339900">250</div>
+            <img src="@/assets/imgs/ditu.png" />
+            <div class="mt10 divBot">在运</div>
+        </div>
+        <div class="boxDiv">
+            <div style="color: #cc0000">50</div>
+            <img src="@/assets/imgs/ditu.png" />
+            <div class="mt10 divBot">停运</div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { mainHeight } from '@/utils/layout'
+import { color } from '@/components/echarts/color'
+const height = mainHeight(330, 3)
+
+const info = () => {}
+onMounted(() => {
+    info()
+})
+</script>
+<style lang="scss" scoped>
+.box {
+    display: flex;
+    align-items: center;
+    
+    .boxDiv {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        margin-top: 20px;
+        img {
+            width: 80%;
+        }
+        div:nth-child(1) {
+            position: absolute;
+            font-size: 30px;
+            top: -10px;
+            font-weight: 700;
+        }
+        .divBot {
+            font-size: 16px;
+            position: absolute;
+            top: -45px;
+        }
+        color: #fff;
+    }
+}
+</style>