From 30748ea70f14c675743c7ea54e5c162d4a5e2839 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期一, 21 四月 2025 17:31:15 +0800 Subject: [PATCH] 修改多个组件的展示样式 --- src/api/clue/clueConclusionApi.js | 6 src/components.d.ts | 2 src/views/overlay-clue/report/ClueReport.vue | 59 ++++++ src/views/overlay-clue/list/ClueManage.vue | 43 ++++- src/api/clue/clueQuestionApi.js | 10 src/components/map/MapSearch.vue | 4 src/views/overlay-clue/report/components/ClueReportQuestion.vue | 74 ++++++-- src/api/index.js | 7 src/composables/messageBox.js | 8 src/api/grid/gridInfoApi.js | 10 src/views/overlay-clue/report/components/QuestionDetail.vue | 32 ++- src/styles/base.scss | 101 ++++++++++++ src/views/overlay-clue/task/ClueTaskEdit.vue | 3 src/api/grid/gridSchemeApi.js | 4 vite.config.js | 7 src/styles/index.scss | 2 src/api/config.js | 6 src/api/clue/clueApi.js | 17 + src/views/overlay-clue/list/components/ClueList.vue | 29 ++- 19 files changed, 327 insertions(+), 97 deletions(-) diff --git a/src/api/clue/clueApi.js b/src/api/clue/clueApi.js index 82e565a..ce9c458 100644 --- a/src/api/clue/clueApi.js +++ b/src/api/clue/clueApi.js @@ -14,9 +14,8 @@ if (eTime) { url += `eTime=${eTime}&`; } - return $clue.get( - `${url}pageNum=${pageNum}&pageSize=${pageSize}` - ); + return $clue.get(`${url}pageNum=${pageNum}&pageSize=${pageSize}`); + // .then((res) => res.data); }, /** @@ -25,7 +24,9 @@ * @returns */ fetchRemoteClue(updateTime) { - return $clue.get(`clue/fetch/remote?updateTime=${updateTime}`); + return $clue + .get(`clue/fetch/remote?updateTime=${updateTime}`) + .then((res) => res.data); }, fetchRemoteClueFileUrl(clueId) { @@ -34,10 +35,12 @@ /** * 鎺ㄩ�佺嚎绱㈢殑缁撹涓庨棶棰� - * @param {string} clueId - * @returns + * @param {string} clueId + * @returns */ pushClue(clueId) { - return $clue.post(`clue/push?clueId=${clueId}`); + return $clue + .post(`clue/push?clueId=${clueId}`) + .then((res) => res.data); } }; diff --git a/src/api/clue/clueConclusionApi.js b/src/api/clue/clueConclusionApi.js index 9a4a076..cdea07b 100644 --- a/src/api/clue/clueConclusionApi.js +++ b/src/api/clue/clueConclusionApi.js @@ -6,7 +6,7 @@ * @param {string} clueId 绾跨储id */ getConclusion(clueId) { - return $clue.get(`clue/conclusion/fetch?clueId=${clueId}`); + return $clue.get(`clue/conclusion/fetch?clueId=${clueId}`).then((res) => res.data); }, /** @@ -15,7 +15,7 @@ * @returns */ uploadConclusion(conclusion) { - return $clue.post(`clue/conclusion/upload`, conclusion); + return $clue.post(`clue/conclusion/upload`, conclusion).then((res) => res.data); }, /** @@ -24,6 +24,6 @@ * @returns */ pushConclusion(conclusionIdList) { - return $clue.post(`clue/conclusion/push`, conclusionIdList); + return $clue.post(`clue/conclusion/push`, conclusionIdList).then((res) => res.data); } }; diff --git a/src/api/clue/clueQuestionApi.js b/src/api/clue/clueQuestionApi.js index 8d04cf6..a5b99a9 100644 --- a/src/api/clue/clueQuestionApi.js +++ b/src/api/clue/clueQuestionApi.js @@ -10,7 +10,7 @@ return $clue .get(`clue/question/fetch?clueId=${clueId}`) .then((res) => { - return getClueQuestionList(res); + return getClueQuestionList(res.data); }); }, @@ -26,7 +26,11 @@ files.forEach((e) => { formData.append('images', e); }); - return $clue.post(`clue/question/upload`, formData); + return $clue.post(`clue/question/upload`, formData).then((res) => res.data); + }, + + deleteQuestion(questionId) { + return $clue.delete(`clue/question`, { params: { questionId } }).then((res) => res.data); }, uploadQuestionUrl() { @@ -39,6 +43,6 @@ * @returns */ pushQuestion(questionIdList) { - return $clue.post(`clue/question/push`, questionIdList); + return $clue.post(`clue/question/push`, questionIdList).then((res) => res.data); } }; diff --git a/src/api/config.js b/src/api/config.js index ff28cae..e15bd82 100644 --- a/src/api/config.js +++ b/src/api/config.js @@ -47,9 +47,9 @@ // ElMessage({ // message: response.data.message, // type: 'success' - // }); + // }); // } - return response.data.data; + return response.data; } else { ElMessage({ message: response.data.message, @@ -58,7 +58,7 @@ return Promise.reject(response.data.message); } } else { - return response.data; + return response; } } else { return Promise.reject(response); diff --git a/src/api/grid/gridInfoApi.js b/src/api/grid/gridInfoApi.js index 824675e..02ba652 100644 --- a/src/api/grid/gridInfoApi.js +++ b/src/api/grid/gridInfoApi.js @@ -7,7 +7,7 @@ */ fetchGridList(schemeId) { return $clue.get(`grid/info/fetch?id=${schemeId}`).then((res) => { - return getGridRecordList(res); + return getGridRecordList(res.data); }); }, @@ -17,15 +17,17 @@ */ createGrid(gridInfo) { return $clue.post(`grid/info/create`, gridInfo).then((res) => { - return getGridRecord(res); + return getGridRecord(res.data); }); }, /** * 鏇存柊缃戞牸 - * @param {Object} gridInfo + * @param {Object} gridInfo */ updateGrid(gridInfo) { - return $clue.post(`grid/info/update`, gridInfo) + return $clue + .post(`grid/info/update`, gridInfo) + .then((res) => res.data); } }; diff --git a/src/api/grid/gridSchemeApi.js b/src/api/grid/gridSchemeApi.js index eaee15d..bb01f9a 100644 --- a/src/api/grid/gridSchemeApi.js +++ b/src/api/grid/gridSchemeApi.js @@ -5,7 +5,7 @@ * 鑾峰彇鍏ㄩ儴缃戞牸鍖栬鍒掓柟妗� */ fetchAllSchemes() { - return $clue.get(`grid/scheme/fetch`); + return $clue.get(`grid/scheme/fetch`).then((res) => res.data); }, /** @@ -13,6 +13,6 @@ * @param {Object} scheme */ createScheme(scheme) { - return $clue.post(`grid/scheme/create`, scheme); + return $clue.post(`grid/scheme/create`, scheme).then((res) => res.data); } }; diff --git a/src/api/index.js b/src/api/index.js index e42338e..8c92e9a 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -1,9 +1,10 @@ import axios from 'axios'; import { setInterceptors } from "./config"; -const url = 'http://47.100.191.150:9031/'; -// const url = 'http://192.168.0.138:8083/'; -const imgUrl = 'http://47.100.191.150:9031/images/'; +// const url = 'http://47.100.191.150:9031/'; +const url = 'http://192.168.0.110:8084/'; +// const imgUrl = 'http://47.100.191.150:9031/images/'; +const imgUrl = 'http://192.168.0.110:8084/images/'; //椋炵窘鐩戠 const $clue = axios.create({ diff --git a/src/components.d.ts b/src/components.d.ts index 89a3cf1..85ce2c9 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -13,7 +13,6 @@ DescriptionsList: typeof import('./components/list/DescriptionsList.vue')['default'] DescriptionsListItem: typeof import('./components/list/DescriptionsListItem.vue')['default'] ElButton: typeof import('element-plus/es')['ElButton'] - ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup'] ElCol: typeof import('element-plus/es')['ElCol'] ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] @@ -26,6 +25,7 @@ ElImageViewer: typeof import('element-plus/es')['ElImageViewer'] ElInput: typeof import('element-plus/es')['ElInput'] ElOption: typeof import('element-plus/es')['ElOption'] + ElPagination: typeof import('element-plus/es')['ElPagination'] ElRadio: typeof import('element-plus/es')['ElRadio'] ElRadioButton: typeof import('element-plus/es')['ElRadioButton'] ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] diff --git a/src/components/map/MapSearch.vue b/src/components/map/MapSearch.vue index 909e355..e397bc5 100644 --- a/src/components/map/MapSearch.vue +++ b/src/components/map/MapSearch.vue @@ -45,11 +45,11 @@ <span>{{ searchResult.address }}</span> <div> <span>{{ - searchResult.lon + ', ' + searchResult.lat + '楂樺痉' + searchResult.lon + ', ' + searchResult.lat }}</span> <el-divider direction="vertical" /> <span>{{ - searchResult.gpsLon + ', ' + searchResult.gpsLat + 'GPS' + searchResult.gpsLon + ', ' + searchResult.gpsLat }}</span> </div> </div> diff --git a/src/composables/messageBox.js b/src/composables/messageBox.js index 3f43447..e697815 100644 --- a/src/composables/messageBox.js +++ b/src/composables/messageBox.js @@ -34,10 +34,10 @@ if (err != 'cancel') { errStr = `${confirmTitle}澶辫触, ${err}`; } - ElMessage({ - message: errStr, - type: 'warning' - }); + // ElMessage({ + // message: errStr, + // type: 'warning' + // }); }); } }) diff --git a/src/styles/base.scss b/src/styles/base.scss new file mode 100644 index 0000000..8f386e1 --- /dev/null +++ b/src/styles/base.scss @@ -0,0 +1,101 @@ +/************************************** font size **************************************/ +$fontsize: ( + s: var(--el-font-size-small), + b: var(--el-font-size-base), + m: var(--el-font-size-medium), + l: var(--el-font-size-large) +); + +@each $dName, $dValue in $fontsize { + .f-#{$dName} { + font-size: #{$dValue}; + } +} + +/************************************** color **************************************/ +$colors: ( + p: var(--el-color-primary), + s: var(--el-color-success), + w: var(--el-color-warning), + d: var(--el-color-danger), + e: var(--el-color-error), + i: var(--el-color-info) +); + +@each $dName, $dValue in $colors { + .color-#{$dName} { + color: #{$dValue}; + } + .b-color-#{$dName} { + background-color: #{$dValue}; + } +} + +/************************************** 鍐呭杈硅窛 **************************************/ +$direction: ( + l: 'left', + t: 'top', + r: 'right', + b: 'bottom' +); +$size: (2, 4, 8, 10, 16); +@each $dName, $dValue in $direction { + @each $i in $size { + .p-#{$dName}-#{$i} { + padding-#{$dValue}: #{$i}px; + } + .m-#{$dName}-#{$i} { + margin-#{$dValue}: #{$i}px; + } + } +} + +@each $i in $size { + .p-#{$i} { + padding: #{$i}px; + } + .p-v-#{$i} { + padding: #{$i}px 0; + } + .p-h-#{$i} { + padding: 0 #{$i}px; + } + .m-#{$i} { + margin: #{$i}px; + } + .m-v-#{$i} { + margin: #{$i}px 0; + } + .m-h-#{$i} { + margin: 0 #{$i}px; + } +} + +/************************************** 瀹介珮 **************************************/ +$csize: ( + small: var(--el-component-size-small), + default: var(--el-component-size-default), + large: var(--el-component-size-large) +); +$ws: (20, 40, 50, 60, 80, 100, 120, 150, 200, 250, 300); +@each $name, $value in $csize { + .w-#{$name} { + width: #{$value}; + } + .h-#{$name} { + height: #{$value}; + } +} +@each $i in $ws { + .w-#{$i} { + width: #{$i}px; + } + .h-#{$i} { + height: #{$i}px; + } +} + +// +.cursor-p { + cursor: pointer; +} diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 0000000..feda6a9 --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,2 @@ +@use './base.scss'; +// @use './elementUI.scss'; diff --git a/src/views/overlay-clue/list/ClueManage.vue b/src/views/overlay-clue/list/ClueManage.vue index 8519370..4999f83 100644 --- a/src/views/overlay-clue/list/ClueManage.vue +++ b/src/views/overlay-clue/list/ClueManage.vue @@ -14,11 +14,25 @@ > </div> <el-scrollbar height="70vh" class="p-h-1"> - <ClueList - :dataList="clueList" - @itemSelected="selectClue" - ></ClueList> + <ClueList :dataList="clueList" @itemSelected="selectClue"> + <!-- <template #extra> + <el-button size="small" type="primary" @click="getClues"> + 鍙戝竷浠诲姟 + </el-button> + </template> --> + </ClueList> </el-scrollbar> + <el-row justify="space-between" class="p-8"> + <el-pagination + size="small" + v-model:current-page="currentPage" + v-model:page-size="pageSize" + :page-sizes="[10, 20, 50, 100]" + :background="true" + layout="total, sizes, pager" + :total="total" + /> + </el-row> </div> </template> @@ -36,6 +50,9 @@ const updateTime = ref(); // 绾跨储娓呭崟 const clueList = ref([]); +const currentPage = ref(1); +const pageSize = ref(100); +const total = ref(0); /** * 鏌ヨ宸蹭笅鍙戠殑绾跨储娓呭崟 @@ -49,9 +66,17 @@ eTime = now.add(1, 'month').format('YYYY-MM-DD HH:mm:ss'); } onMapMounted(() => { - clueApi.getClue({ sTime, eTime }).then((res) => { - clueList.value = res; - }); + clueApi + .getClue({ + sTime, + eTime, + pageNum: currentPage.value, + pageSize: pageSize.value + }) + .then((res) => { + total.value = res.head.totalCount; + clueList.value = res.data; + }); }); }; @@ -75,6 +100,4 @@ getClues(); }); </script> -<style scoped> - -</style> \ No newline at end of file +<style scoped></style> diff --git a/src/views/overlay-clue/list/components/ClueList.vue b/src/views/overlay-clue/list/components/ClueList.vue index 5449148..b9158ce 100644 --- a/src/views/overlay-clue/list/components/ClueList.vue +++ b/src/views/overlay-clue/list/components/ClueList.vue @@ -9,25 +9,30 @@ v-if="!item.delete" > <div class="clue-item"> - <div class="flex gap-1"> - <div class="clue-num">{{ $nf(item.cid) }}</div> - <el-text class="fy-h1" truncated>{{ - item.cclueName - }}</el-text> - </div> + <el-row justify="space-between"> + <el-col span="20"> + <div class="flex gap-1"> + <div class="clue-num">{{ $nf(item.cid) }}</div> + <el-text class="fy-h1" truncated>{{ + item.cclueName + }}</el-text> + </div> + </el-col> + <!-- <el-col :span="4"> + <el-row justify="end"> + <slot name="extra"></slot> + </el-row> + </el-col> --> + </el-row> <el-space> <el-row align="middle"> <el-text type="info" size="small">缁撹锛�</el-text> - <!-- <el-text size="small"> --> <el-tag - :type=" - item.conclusionCount == 1 ? 'success' : 'danger' - " + :type="item.cuploaded ? 'success' : 'danger'" effect="dark" > - {{ item.conclusionCount == 1 ? '宸叉帹閫�' : '鏈帹閫�' }} + {{ item.cuploaded ? '宸叉帹閫�' : '鏈帹閫�' }} </el-tag> - <!-- </el-text> --> </el-row> <el-divider direction="vertical" /> <el-row align="middle"> diff --git a/src/views/overlay-clue/report/ClueReport.vue b/src/views/overlay-clue/report/ClueReport.vue index 564199a..dabd554 100644 --- a/src/views/overlay-clue/report/ClueReport.vue +++ b/src/views/overlay-clue/report/ClueReport.vue @@ -6,7 +6,8 @@ :type="clueData.cuploaded ? 'success' : 'danger'" @click="pushCheck" :disabled="clueData.cuploaded" - ><div class="flex-col"> + > + <div class="flex-col"> <template v-if="clueData.cuploaded"> <el-icon><Check /></el-icon> <div>宸�</div> @@ -20,8 +21,30 @@ <div>鍙�</div> <div>棣�</div> </template> - </div></el-button + </div> + </el-button> + <el-button + class="task-btn" + :type="clueTask ? 'success' : 'danger'" + @click="publishTask" > + <div class="flex-col"> + <template v-if="clueTask"> + <el-icon><Check /></el-icon> + <div>鏌�</div> + <div>鐪�</div> + <div>浠�</div> + <div>鍔�</div> + </template> + <template v-else> + <el-icon><Upload /></el-icon> + <div>鍙�</div> + <div>甯�</div> + <div>浠�</div> + <div>鍔�</div> + </template> + </div> + </el-button> <div class="fy-card"> <div class="fy-h1">绾跨储鍙嶉</div> <el-scrollbar height="80vh" class="p-h-1"> @@ -29,9 +52,7 @@ <ClueReportConclusion :clueId="clueData.cid" ></ClueReportConclusion> - <ClueReportQuestion - :clueId="clueData.cid" - ></ClueReportQuestion> + <ClueReportQuestion :clueData="clueData"></ClueReportQuestion> </el-scrollbar> </div> </CloseButton> @@ -61,7 +82,9 @@ }, emits: ['update:show', 'pushed'], data() { - return {}; + return { + clueTask: undefined + }; }, methods: { closeEdit() { @@ -80,6 +103,9 @@ return clueApi.pushClue(this.clueData.cid).then((res) => { this.$emit('pushed', res); }); + }, + publishTask() { + } } }; @@ -106,4 +132,25 @@ border-bottom-right-radius: 0px; /* box-shadow: var(--el-box-shadow-light); */ } + +.task-btn { + position: absolute; + z-index: 1; + bottom: 2rem; + left: -2.5rem; + width: 2.5rem; + height: initial; + margin: initial; + display: flex; + flex-direction: column; + align-items: center; + /* background-color: white; */ + /* border-color: white; */ + /* border-top: 1px solid; + border-left: 1px solid; + border-bottom: 1px solid; */ + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + /* box-shadow: var(--el-box-shadow-light); */ +} </style> diff --git a/src/views/overlay-clue/report/components/ClueReportQuestion.vue b/src/views/overlay-clue/report/components/ClueReportQuestion.vue index bec32fd..ba7598f 100644 --- a/src/views/overlay-clue/report/components/ClueReportQuestion.vue +++ b/src/views/overlay-clue/report/components/ClueReportQuestion.vue @@ -4,29 +4,23 @@ <template v-for="(item, index) in questionList" :key="index"> <DescriptionsList :title="item.cqUid"> <template #extra> - <el-button-group> - <!-- <el-button - type="warning" - size="small" - plain - icon="Upload" - @click="pushQuestion(item)" - :disabled="item.pushing ? true : item.cqUploaded" - >{{ - item.cqUploaded - ? '宸叉帹閫�' - : item.pushing - ? '鎺ㄩ�佷腑' - : '鎺ㄩ�侀棶棰�' - }}</el-button - > --> + <div> + <el-button + type="danger" + size="small" + icon="Delete" + :disabled="clueData.cuploaded" + @click="deleteQuestion(item)" + ></el-button> <el-button type="primary" size="small" @click="checkQuestion(item)" - >闂璇︽儏</el-button + >{{ + clueData.cuploaded ? '闂璇︽儏' : '淇敼闂' + }}</el-button > - </el-button-group> + </div> </template> <DescriptionsListItem label="闂鍚嶇О" @@ -44,7 +38,10 @@ <!-- <el-divider /> --> </template> <div class="btn-wrap"> - <el-button type="primary" @click="openDialog" + <el-button + v-if="!clueData.cuploaded" + type="primary" + @click="openDialog" >娣诲姞闂</el-button > </div> @@ -57,7 +54,7 @@ </el-empty> </div> <QuestionDetail - :clueId="clueId" + :clueData="clueData" v-model:show="dialogShow" :question="selectedQuestion" @on-submit="getQuestion" @@ -68,9 +65,19 @@ import { ref, watch, computed } from 'vue'; import clueQuestionApi from '@/api/clue/clueQuestionApi'; import QuestionDetail from './QuestionDetail.vue'; +import { + useMessageBoxTip, + useMessageBox +} from '@/composables/messageBox'; const props = defineProps({ - clueId: Number + // clueId: Number, + clueData: { + type: Object, + default: () => { + return {}; + } + } }); // 绾跨储缁撹 @@ -78,9 +85,10 @@ // 涓婃姤寮瑰嚭妗� const dialogShow = ref(false); const selectedQuestion = ref(); +const deleteLoading = ref(false); watch( - () => props.clueId, + () => props.clueData, () => { getQuestion(); } @@ -97,11 +105,31 @@ selectedQuestion.value = item; dialogShow.value = true; } + +// 鍒犻櫎闂 +function deleteQuestion(item) { + useMessageBoxTip({ + confirmMsg: '纭鏄惁鍒犻櫎闂', + confirmTitle: '鍒犻櫎闂', + onConfirm: () => { + return clueQuestionApi + .deleteQuestion(item.cqId) + .then((res) => { + if (res) { + const index = questionList.value.indexOf(item); + questionList.value.splice(index, 1); + } + }) + .finally(() => (deleteLoading.value = true)); + } + }); +} + /** * 鑾峰彇绾跨储缁撹 */ function getQuestion() { - clueQuestionApi.getQuestion(props.clueId).then((res) => { + clueQuestionApi.getQuestion(props.clueData.cid).then((res) => { questionList.value = res; }); } diff --git a/src/views/overlay-clue/report/components/QuestionDetail.vue b/src/views/overlay-clue/report/components/QuestionDetail.vue index 2ab04e7..f0f6603 100644 --- a/src/views/overlay-clue/report/components/QuestionDetail.vue +++ b/src/views/overlay-clue/report/components/QuestionDetail.vue @@ -112,8 +112,18 @@ const props = defineProps({ clueId: Number, + clueData: { + type: Object, + default: () => { + return {}; + } + }, show: Boolean, - question: Object + question: Object, + create: { + type: Boolean, + default: true + } }); const emit = defineEmits(['update:show', 'onSubmit', 'onClose']); @@ -222,7 +232,7 @@ function submit() { const coor = formObj.value.coordinate.split(','); const q = { - cId: parseInt(props.clueId), + cid: parseInt(props.clueData.cid), cqName: formObj.value.cqName, cqDescription: formObj.value.cqDescription, cqStreet: formObj.value.cqStreet, @@ -236,7 +246,7 @@ files.push(f.raw); }); } - return uploadQuestion(q, files); + return props.create ? uploadQuestion(q, files) : updateQuestion(q, ); } function cancel() { @@ -272,6 +282,10 @@ }); } +function updateQuestion(question, newFiles, deleteFiles) { + +} + function parseFormObj(question) { question.coordinate = question.cqLongitude + ',' + question.cqLatitude; @@ -299,17 +313,7 @@ } } ); -// watch( -// () => props.question, -// (val) => { -// fileList.value = []; -// if (val) { -// formObj.value = parseFormObj(val); -// } else { -// formObj.value = {}; -// } -// } -// ); + watch(dialogShow, (val) => { emit('update:show', val); }); diff --git a/src/views/overlay-clue/task/ClueTaskEdit.vue b/src/views/overlay-clue/task/ClueTaskEdit.vue new file mode 100644 index 0000000..61c7765 --- /dev/null +++ b/src/views/overlay-clue/task/ClueTaskEdit.vue @@ -0,0 +1,3 @@ +<template> + +</template> \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index 56719e5..0a0db6a 100644 --- a/vite.config.js +++ b/vite.config.js @@ -27,6 +27,13 @@ '@': fileURLToPath(new URL('./src', import.meta.url)) } }, + css: { + preprocessorOptions: { + scss: { + additionalData: `@use "@/styles/index.scss" as *;` + } + } + }, server: { host: '0.0.0.0' } -- Gitblit v1.9.3