From b292a0a81869547e94fd85e783f9597db241a87e Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期一, 15 七月 2024 17:30:37 +0800
Subject: [PATCH] 2024.7.15

---
 src/components/BaseTable.vue                              |   71 +++++++++++++++++
 src/views/inspection/problem/component/ProblemSummary.vue |   51 +++++++++---
 src/views/management/ManagementView.vue                   |    6 
 src/assets/icon/bg-border-1.png                           |    0 
 src/assets/icon/bg-border-2.png                           |    0 
 src/assets/styles/element/index.scss                      |    1 
 src/views/inspection/problem/ProblemTrack.vue             |   24 +++++
 src/components.d.ts                                       |    3 
 src/views/inspection/WorkStream.vue                       |    8 +
 src/components/BaseCard.vue                               |   26 ++++++
 src/views/management/evaluate/EvaluateSummary.vue         |    6 +
 src/assets/styles/var.scss                                |    8 ++
 12 files changed, 179 insertions(+), 25 deletions(-)

diff --git a/src/assets/icon/bg-border-1.png b/src/assets/icon/bg-border-1.png
new file mode 100644
index 0000000..c949b28
--- /dev/null
+++ b/src/assets/icon/bg-border-1.png
Binary files differ
diff --git a/src/assets/icon/bg-border-2.png b/src/assets/icon/bg-border-2.png
new file mode 100644
index 0000000..6e8e4ae
--- /dev/null
+++ b/src/assets/icon/bg-border-2.png
Binary files differ
diff --git a/src/assets/styles/element/index.scss b/src/assets/styles/element/index.scss
index e900c70..37fade8 100644
--- a/src/assets/styles/element/index.scss
+++ b/src/assets/styles/element/index.scss
@@ -2,6 +2,7 @@
   $bg-color: (
     'page': #ffffffa9,
     '': #14428be8,
+    // '': transparent,
     'overlay': #102f63c9
   ),
   $colors: (
diff --git a/src/assets/styles/var.scss b/src/assets/styles/var.scss
new file mode 100644
index 0000000..935ba79
--- /dev/null
+++ b/src/assets/styles/var.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+$colors-bg:(
+  primary: #14428be8
+)
+// :root {
+//   --fy-color-bg: #14428be8;
+// }
diff --git a/src/components.d.ts b/src/components.d.ts
index d60bda3..721575b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,8 +7,11 @@
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    BaseCard: typeof import('./components/BaseCard.vue')['default']
     BaseMap: typeof import('./components/map/BaseMap.vue')['default']
+    BaseTable: typeof import('./components/BaseTable.vue')['default']
     CoreHeader: typeof import('./components/core/CoreHeader.vue')['default']
+    DataTable: typeof import('./components/DataTable.vue')['default']
     ElCalendar: typeof import('element-plus/es')['ElCalendar']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCascader: typeof import('element-plus/es')['ElCascader']
diff --git a/src/components/BaseCard.vue b/src/components/BaseCard.vue
new file mode 100644
index 0000000..d853a01
--- /dev/null
+++ b/src/components/BaseCard.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="wrap-2">
+    <slot></slot>
+  </div>
+</template>
+<script></script>
+<style scoped>
+.wrap {
+  background-image: url('@/assets/icon/bg-border-1.png');
+  background-repeat: no-repeat;
+  /* background-position: center; */
+  background-size: cover;
+  /* background-color: white; */
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  margin: 10px;
+}
+
+.wrap-2 {
+  border: 2px solid rgba(255, 255, 255, 0.829);
+  border-radius: 8px;
+  padding: 4px;
+  background: linear-gradient(#14428be8, #14428b8f);
+}
+</style>
diff --git a/src/components/BaseTable.vue b/src/components/BaseTable.vue
new file mode 100644
index 0000000..ba3b9df
--- /dev/null
+++ b/src/components/BaseTable.vue
@@ -0,0 +1,71 @@
+<template>
+  <el-table
+    ref="tableRef"
+    :data="data"
+    v-loading="loading"
+    table-layout="fixed"
+    size="small"
+    :show-overflow-tooltip="true"
+    border
+    row-class-name="t-row"
+    cell-class-name="t-cell"
+    header-row-class-name="t-header-row"
+    header-cell-class-name="t-header-cell"
+    :show-summary="false"
+    :highlight-current-row="true"
+    @row-click="handleRowClick"
+  >
+    <slot></slot>
+  </el-table>
+</template>
+
+<script>
+export default {
+  props: {
+    loading: Boolean,
+    data: Array
+  },
+  data() {
+    return {}
+  },
+  emits: ['rowClick'],
+  watch: {},
+  computed: {},
+  methods: {
+    handleRowClick(row, col, event) {
+      this.$emit('rowClick', row.index)
+      // console.log(row);
+      // console.log(col);
+      // console.log(event.target.getBoundingClientRect().height);
+    }
+  }
+}
+</script>
+<style>
+.el-table {
+  --el-table-bg-color: transparent;
+  --el-table-row-hover-bg-color: #23dad0a2;
+  --el-table-current-row-bg-color: #7dff5d96;
+  --el-table-text-color: var(--font-color);
+}
+
+.t-row {
+  cursor: pointer;
+  background-color: transparent !important;
+}
+
+.t-cell {
+  /* background: red !important; */
+  /* height: 40px;
+  border: 1px solid black; */
+}
+
+.t-header-row {
+}
+
+.t-header-cell {
+  background-color: var(--bg-color-2) !important;
+  text-align: center !important;
+  color: white !important;
+}
+</style>
diff --git a/src/views/inspection/WorkStream.vue b/src/views/inspection/WorkStream.vue
index 769878e..0a5d41c 100644
--- a/src/views/inspection/WorkStream.vue
+++ b/src/views/inspection/WorkStream.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="border-r-small m-h-2 p-h-4">
+  <!-- <div class="border-r-small m-h-2 p-h-4"> -->
+  <BaseCard>
     <el-scrollbar ref="scrollbarRef" :height="height">
       <div ref="scrollContentRef">
         <div v-for="item in streams" :key="item.index">
@@ -12,7 +13,8 @@
         </div>
       </div>
     </el-scrollbar>
-  </div>
+  </BaseCard>
+  <!-- </div> -->
 </template>
 <script setup>
 import { reactive, ref, onMounted, inject } from 'vue'
@@ -21,7 +23,7 @@
 import { unCalc } from '@/utils/css-util'
 
 const excludeMapHeight = inject('excludeMapHeight')
-const height = `calc(${unCalc(excludeMapHeight)} - 30px)`
+const height = `calc(${unCalc(excludeMapHeight)} - 36px)`
 
 const streams = reactive([])
 const scrollContentRef = ref()
diff --git a/src/views/inspection/problem/ProblemTrack.vue b/src/views/inspection/problem/ProblemTrack.vue
index 29cc15a..ebab9b2 100644
--- a/src/views/inspection/problem/ProblemTrack.vue
+++ b/src/views/inspection/problem/ProblemTrack.vue
@@ -1,11 +1,12 @@
 <template>
-  <div class="border-r-small">
+  <!-- <div class="border-r-small"> -->
+  <BaseCard>
     <div class="font-large">闂鏁存敼璺熻釜</div>
     <div>
       <el-row justify="end">
         <OptionTime v-model="time" type="date"></OptionTime>
       </el-row>
-      <ProblemSummary :data="subtaskList"></ProblemSummary>
+      <ProblemSummary :data="subtaskList" :proStatistic="proStatistic"></ProblemSummary>
       <ProblemTable :data="subtaskList"></ProblemTable>
     </div>
     <el-collapse v-model="activeNames" @change="handleChange">
@@ -16,7 +17,8 @@
         <ProblemType ref="pTypeRef"></ProblemType>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </BaseCard>
+  <!-- </div> -->
 </template>
 
 <script>
@@ -30,14 +32,21 @@
 import ProblemType from './component/ProblemType.vue'
 
 import taskApi from '@/api/fysp/taskApi.js'
+import problemApi from '@/api/fysp/problemApi.js'
 
 export default {
   components: { ProblemSummary, ProblemTable, ProblemChangeChart, ProblemType },
   data() {
     return {
+      // 鍗曟棩浠诲姟璇︽儏
       subtaskList: [],
+      // 鍗曟棩闂缁熻
+      proStatistic: [],
+      // 鎶樺彔妗嗘縺娲诲悕绉伴泦鍚�
       activeNames: ['1', '2'],
+      // 褰撳墠鏃堕棿
       time: '',
+      // 绛涢�夊尯鍩熸潯浠�
       area: {}
     }
   },
@@ -49,6 +58,7 @@
         this.area.endtime = d.endOf('day').format('YYYY-MM-DD HH:mm:ss')
         // this.areaStore.setTimeOneDay(nV)
         this.fetchSubtask()
+        this.fetchDayProblemsStatistic()
       }
     }
   },
@@ -61,6 +71,14 @@
         this.subtaskList = res.data
       })
     },
+    fetchDayProblemsStatistic() {
+      // this.fetchData((page, pageSize) => {
+      //   return
+      // })
+      problemApi.fetchProblemsStatistic(this.area).then((res) => {
+        this.proStatistic = res
+      })
+    },
     handleChange(val) {
       if (val.indexOf('1') != -1) {
         this.$refs.pChangeRef.refresh()
diff --git a/src/views/inspection/problem/component/ProblemSummary.vue b/src/views/inspection/problem/component/ProblemSummary.vue
index 5d75bc9..1bdc8c4 100644
--- a/src/views/inspection/problem/component/ProblemSummary.vue
+++ b/src/views/inspection/problem/component/ProblemSummary.vue
@@ -1,16 +1,44 @@
 <template>
-  <div class="font-small">
+  <!-- <div class="font-small">
     浠婃棩缁熻锛氶棶棰樻暟: {{ summary.proNum }}锛屾暣鏀规暟: {{ summary.changeNum }}锛屾暣鏀圭巼:
     {{ summary.changePer }}
+  </div> -->
+
+  <div v-if="mainProType" class="font-small">
+    绐佸嚭闂锛歿{ mainProType.name }}锛岄棶棰樻暟锛歿{ mainProType.count }}锛屽崰姣攞{ mainProType.per }}
   </div>
-  <div class="font-small">绐佸嚭闂锛氳矾闈㈢Н灏橈紝闂鏁帮細13锛屽崰姣旓細81%</div>
+  <BaseTable :data="summary">
+    <el-table-column
+      label="闂鏁�"
+      prop="proNum"
+      :show-overflow-tooltip="true"
+      width="60"
+    ></el-table-column>
+    <el-table-column
+      label="鏁存敼鏁�"
+      prop="changeNum"
+      :show-overflow-tooltip="true"
+      width="60"
+    ></el-table-column>
+    <el-table-column
+      label="鏁存敼鐜�"
+      prop="changePer"
+      :show-overflow-tooltip="true"
+      width="60"
+    ></el-table-column>
+  </BaseTable>
 </template>
 <script setup>
 import { computed, ref } from 'vue'
 
 const props = defineProps({
   data: {
-    type: Array
+    type: Array,
+    default: () => []
+  },
+  proStatistic: {
+    type: Array,
+    default: () => []
   },
   loading: Boolean
 })
@@ -28,26 +56,21 @@
     changePer = Math.round((changeNum / proNum) * 100) + '%'
   }
 
-  return { proNum, changeNum, changePer }
+  return [{ proNum, changeNum, changePer }]
 })
 
-const mainPro = computed(() => {
+const mainProType = computed(() => {
   let res
   let total = 0,
     max = 0
-  props.data.forEach((d) => {
-    total += d.proNum
+  props.proStatistic.forEach((d) => {
+    total += d.count
   })
-  props.data.forEach((d) => {
+  props.proStatistic.forEach((d) => {
     if (total > 0) {
-      const per = d.proNum / total
+      const per = d.count / total
       if (per >= max) {
         max = per
-        // res.push({
-        //   name: d.name,
-        //   count: d.count,
-        //   per: Math.round(per * 100) + '%'
-        // })
         res = {
           name: d.name,
           count: d.count,
diff --git a/src/views/management/ManagementView.vue b/src/views/management/ManagementView.vue
index dda60d3..ed9e01e 100644
--- a/src/views/management/ManagementView.vue
+++ b/src/views/management/ManagementView.vue
@@ -39,9 +39,9 @@
     }
   },
   mounted() {
-    vResize.mounted(this.$refs.statusRef.$el, ({ height }) => {
-      this.statusHeight = height
-    })
+    // vResize.mounted(this.$refs.statusRef.$el, ({ height }) => {
+    //   this.statusHeight = height
+    // })
     // vResize.mounted(this.$refs.summaryRef.$el, ({ height }) => {
     //   this.summaryHeight = height
     // })
diff --git a/src/views/management/evaluate/EvaluateSummary.vue b/src/views/management/evaluate/EvaluateSummary.vue
index 40fe487..460924c 100644
--- a/src/views/management/evaluate/EvaluateSummary.vue
+++ b/src/views/management/evaluate/EvaluateSummary.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="border-r-small">
+  <!-- <div class="border-r-small"> -->
+  <BaseCard>
     <el-row justify="space-between">
       <div ref="titleRef" class="font-large">缁煎悎椋庨櫓璇勪及</div>
       <!-- <OptionTime v-model="time"></OptionTime> -->
     </el-row>
     <RiskCount></RiskCount>
     <RiskArea></RiskArea>
-  </div>
+  </BaseCard>
+  <!-- </div> -->
 </template>
 
 <script>

--
Gitblit v1.9.3