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