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

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

@@ -0,0 +1,82 @@
+<template>
+    <div :style="height" class="mt10">
+        <vxe-table height="auto" v-bind="defaultAttribute" :data="tableData">
+            <vxe-column type="seq" title="序号"></vxe-column>
+            <vxe-column field="a" title="终端名称"></vxe-column>
+            <vxe-column field="b" title="所属电站"></vxe-column>
+            <vxe-column field="c" title="完整性"></vxe-column>
+            <vxe-column field="d" title="在线率"></vxe-column>
+            <vxe-column field="e" title="合格率"></vxe-column>
+        </vxe-table>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+const tableData = ref([
+    {
+        a: '025875',
+        b: '测试变电站1',
+        c: '60',
+        d: '95',
+        e: '66'
+    },
+    {
+        a: '025876',
+        b: '测试变电站2',
+        c: '60',
+        d: '95',
+        e: '66'
+    }
+])
+const height = mainHeight(360, 3)
+
+const info = () => {}
+onMounted(() => {
+    info()
+})
+</script>
+<style lang="scss" scoped>
+// :deep(.vxe-header--row) {
+//     background: #071de2 !important;
+//     color: #fff !important;
+// }
+
+/*调整表格 单元格背景颜色*/
+:deep(.vxe-table .vxe-table--body-wrapper, .vxe-table .vxe-table--footer-wrapper) {
+    background: #ffffff00 !important;
+}
+:deep(.vxe-table--render-wrapper) {
+    background-color: #ffffff00 !important;
+}
+:deep(.vxe-table--body .vxe-body--row) {
+    background-color:#ffffff2e !important;
+}
+
+:deep(.vxe-table--render-default .vxe-table--body-wrapper table) {
+    background-color: #00000000 !important;
+    color: #fff;
+}
+:deep(
+        .vxe-table--render-default.border--full .vxe-body--column,
+        .vxe-table--render-default.border--full .vxe-footer--column,
+        .vxe-table--render-default.border--full .vxe-header--column,
+
+    ) {
+    background-image: linear-gradient(#00fff4, #00fff4), linear-gradient(#00fff4, #00fff4);
+}
+:deep(
+
+        .vxe-table--render-default.border--full .vxe-header--column
+    ) {
+    background-image: linear-gradient(#00fff4, #00fff4), linear-gradient(#00fff4, #00fff4) !important;
+}
+:deep(.vxe-table--render-default .vxe-table--border-line){
+    border: var(--vxe-table-border-width) solid #00fff4;
+}
+:deep(.vxe-header--row) {
+    background: var(--el-color-primary);
+    color:#fff;
+}
+</style>