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