已修改25个文件
已删除4个文件
已添加25个文件
| | |
|---|
| | | # ff-ai-ep-underway-vue |
|---|
| | | # ff-ai-ep-underway-vuegit |
|---|
| | | |
|---|
| | | This template should help get you started developing with Vue 3 in Vite. |
|---|
| | | |
|---|
| | |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <link rel="icon" href="/favicon.ico"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|---|
| | | <title>Vite App</title> |
|---|
| | | <title>ç½æ ¼ä¸ä½å</title> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app"></div> |
|---|
| | |
|---|
| | | import { $clue } from './index'; |
|---|
| | | import { $clue } from '../index'; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | /** |
|---|
| | | * æ¥è¯¢å·²ä¸åç线索æ¸
å |
|---|
| | | * æ¥è¯¢çº¿ç´¢æ¸
å |
|---|
| | | * @param {object} param0 |
|---|
| | | * @returns |
|---|
| | | */ |
|---|
| | | getClue({ sTime, eTime, pageNum = 1, pageSize = 30 }) { |
|---|
| | | let url = 'clue/fetch?'; |
|---|
| | | if (sTime) { |
|---|
| | | url += `sTime=${sTime}&`; |
|---|
| | | } |
|---|
| | | if (eTime) { |
|---|
| | | url += `eTime=${eTime}&`; |
|---|
| | | } |
|---|
| | | return $clue.get( |
|---|
| | | `${url}pageNum=${pageNum}&pageSize=${pageSize}` |
|---|
| | | ); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | getClues(time) { |
|---|
| | | return $clue.get(`feedback/queryYxfList?updateTime=${time}`); |
|---|
| | | /** |
|---|
| | | * ä»ç¬¬ä¸æ¹è¿ç¨æå线索æ¸
å |
|---|
| | | * @param {string} updateTime æ´æ°æ¶é´ï¼è·å该æ¶é´ä¹åç线索 |
|---|
| | | * @returns |
|---|
| | | */ |
|---|
| | | fetchRemoteClue(updateTime) { |
|---|
| | | return $clue.get(`clue/fetch/remote?updateTime=${updateTime}`); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | fetchRemoteClueFileUrl(clueId) { |
|---|
| | | return `${$clue.defaults.baseURL}clue/fetch/remote/file?clueId=${clueId}`; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¨é线索çç»è®ºä¸é®é¢ |
|---|
| | | * @param {string} clueId |
|---|
| | | * @returns |
|---|
| | | */ |
|---|
| | | pushClue(clueId) { |
|---|
| | | return $clue.post(`clue/push?clueId=${clueId}`); |
|---|
| | | } |
|---|
| | | }; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { $clue } from '../index'; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | /** |
|---|
| | | * è·å线索ç»è®º |
|---|
| | | * @param {string} clueId 线索id |
|---|
| | | */ |
|---|
| | | getConclusion(clueId) { |
|---|
| | | return $clue.get(`clue/conclusion/fetch?clueId=${clueId}`); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ交线索ç»è®º |
|---|
| | | * @param {object} conclusion 线索 |
|---|
| | | * @returns |
|---|
| | | */ |
|---|
| | | uploadConclusion(conclusion) { |
|---|
| | | return $clue.post(`clue/conclusion/upload`, conclusion); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¨é线索ç»è®ºè³ç¬¬ä¸æ¹ |
|---|
| | | * @param {Array} conclusionIdList 线索idéå |
|---|
| | | * @returns |
|---|
| | | */ |
|---|
| | | pushConclusion(conclusionIdList) { |
|---|
| | | return $clue.post(`clue/conclusion/push`, conclusionIdList); |
|---|
| | | } |
|---|
| | | }; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { $clue } from '../index'; |
|---|
| | | import { getClueQuestionList } from '@/model/clueQuestion'; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | /** |
|---|
| | | * è·åå·²æ交ç线索é®é¢ |
|---|
| | | * @param {string} clueId 线索id |
|---|
| | | */ |
|---|
| | | getQuestion(clueId) { |
|---|
| | | return $clue |
|---|
| | | .get(`clue/question/fetch?clueId=${clueId}`) |
|---|
| | | .then((res) => { |
|---|
| | | return getClueQuestionList(res); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * ä¸ä¼ 线索é®é¢ |
|---|
| | | * @param {object} question é®é¢æè¿° |
|---|
| | | * @param {*} files é®é¢å¾ç |
|---|
| | | * @returns |
|---|
| | | */ |
|---|
| | | uploadQuestion(question, files) { |
|---|
| | | const formData = new FormData(); |
|---|
| | | formData.append('question', JSON.stringify(question)); |
|---|
| | | files.forEach((e) => { |
|---|
| | | formData.append('images', e); |
|---|
| | | }); |
|---|
| | | return $clue.post(`clue/question/upload`, formData); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | uploadQuestionUrl() { |
|---|
| | | return `${$clue.defaults.baseURL}clue/question/upload`; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¨é线索é®é¢è³ç¬¬ä¸æ¹ |
|---|
| | | * @param {Array} questionIdList é®é¢idéå |
|---|
| | | * @returns |
|---|
| | | */ |
|---|
| | | pushQuestion(questionIdList) { |
|---|
| | | return $clue.post(`clue/question/push`, questionIdList); |
|---|
| | | } |
|---|
| | | }; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { ElMessage } from 'element-plus'; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 设置ç½è·¯è¯·æ±çå¬ |
|---|
| | | */ |
|---|
| | | function setInterceptors(...instance) { |
|---|
| | | instance.forEach((i) => { |
|---|
| | | // æ·»å 请æ±æ¦æªå¨ |
|---|
| | | i.interceptors.request.use( |
|---|
| | | function (config) { |
|---|
| | | // å¨åé请æ±ä¹å, æ·»å 请æ±å¤´ |
|---|
| | | // config.headers = addHeaders(config.headers); |
|---|
| | | |
|---|
| | | console.log('==>请æ±å¼å§'); |
|---|
| | | console.log(`${config.baseURL}${config.url}`); |
|---|
| | | if (config.data) { |
|---|
| | | console.log('==>请æ±æ°æ®', config.data); |
|---|
| | | } |
|---|
| | | return config; |
|---|
| | | }, |
|---|
| | | function (error) { |
|---|
| | | // 对请æ±é误åäºä»ä¹ |
|---|
| | | console.log('==>请æ±å¼å§'); |
|---|
| | | console.log(error); |
|---|
| | | ElMessage({ |
|---|
| | | message: error, |
|---|
| | | type: 'error' |
|---|
| | | }); |
|---|
| | | return Promise.reject(error); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | |
|---|
| | | // æ·»å ååºæ¦æªå¨ |
|---|
| | | i.interceptors.response.use( |
|---|
| | | function (response) { |
|---|
| | | // 2xx èå´å
çç¶æç é½ä¼è§¦å该å½æ°ã |
|---|
| | | // 对ååºæ°æ®åç¹ä»ä¹ |
|---|
| | | console.log(response); |
|---|
| | | console.log('==>请æ±ç»æ'); |
|---|
| | | if (response.status == 200) { |
|---|
| | | if ( |
|---|
| | | response.data.success != undefined && |
|---|
| | | response.data.success != null |
|---|
| | | ) { |
|---|
| | | if (response.data.success == true) { |
|---|
| | | // if (response.data.message && response.data.message != '') { |
|---|
| | | // ElMessage({ |
|---|
| | | // message: response.data.message, |
|---|
| | | // type: 'success' |
|---|
| | | // }); |
|---|
| | | // } |
|---|
| | | return response.data.data; |
|---|
| | | } else { |
|---|
| | | ElMessage({ |
|---|
| | | message: response.data.message, |
|---|
| | | type: 'error' |
|---|
| | | }); |
|---|
| | | return Promise.reject(response.data.message); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | return response; |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | return Promise.reject(response); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | function (error) { |
|---|
| | | // è¶
åº 2xx èå´çç¶æç é½ä¼è§¦å该å½æ°ã |
|---|
| | | // 对ååºé误åç¹ä»ä¹ |
|---|
| | | console.log(error); |
|---|
| | | console.log('==>请æ±ç»æ'); |
|---|
| | | ElMessage({ |
|---|
| | | message: error, |
|---|
| | | type: 'error' |
|---|
| | | }); |
|---|
| | | return Promise.reject(error); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | export { setInterceptors }; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { $clue } from '../index'; |
|---|
| | | import { getGridRecord, getGridRecordList } from '@/model/gridRecord'; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | /** |
|---|
| | | * è·åæ¹æ¡ç½æ ¼ä¿¡æ¯ |
|---|
| | | */ |
|---|
| | | fetchGridList(schemeId) { |
|---|
| | | return $clue.get(`grid/info/fetch?id=${schemeId}`).then((res) => { |
|---|
| | | return getGridRecordList(res); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ°å»ºç½æ ¼ |
|---|
| | | * @param {Object} grid |
|---|
| | | */ |
|---|
| | | createGrid(gridInfo) { |
|---|
| | | return $clue.post(`grid/info/create`, gridInfo).then((res) => { |
|---|
| | | return getGridRecord(res); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ´æ°ç½æ ¼ |
|---|
| | | * @param {Object} gridInfo |
|---|
| | | */ |
|---|
| | | updateGrid(gridInfo) { |
|---|
| | | return $clue.post(`grid/info/update`, gridInfo) |
|---|
| | | } |
|---|
| | | }; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { $clue } from '../index'; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | /** |
|---|
| | | * è·åå
¨é¨ç½æ ¼åè§åæ¹æ¡ |
|---|
| | | */ |
|---|
| | | fetchAllSchemes() { |
|---|
| | | return $clue.get(`grid/scheme/fetch`); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ°å»ºç½æ ¼æ¹æ¡ |
|---|
| | | * @param {Object} scheme |
|---|
| | | */ |
|---|
| | | createScheme(scheme) { |
|---|
| | | return $clue.post(`grid/scheme/create`, scheme); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | |
|---|
| | | import axios from 'axios'; |
|---|
| | | import { setInterceptors } from "./config"; |
|---|
| | | |
|---|
| | | const url = 'http://47.100.191.150:9031/'; |
|---|
| | | // const url = 'http://192.168.1.9:8080/'; |
|---|
| | | const imgUrl = 'http://47.100.191.150:9031/images/'; |
|---|
| | | |
|---|
| | | //é£ç¾½ç管 |
|---|
| | | const $clue = axios.create({ |
|---|
| | | baseURL: url, |
|---|
| | | timeout: 10000 |
|---|
| | | // headers: addHeaders() |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // function getHeaders() { |
|---|
| | | // const token = 'e6dc8bb9e1ff0ce973fb92b4af2e4c3f'; |
|---|
| | | |
|---|
| | | // const date = new Date(); |
|---|
| | | // const timestamp = parseInt(date.getTime() / 1000) - 200; |
|---|
| | | |
|---|
| | | // const sign = md5(timestamp + token); |
|---|
| | | |
|---|
| | | // return { |
|---|
| | | // 'JA-TIMESTAMP': timestamp, |
|---|
| | | // 'JA-SIGN': sign, |
|---|
| | | // 'JA-TOKEN': token |
|---|
| | | // }; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | //æ·»å æ¦æªå¨ |
|---|
| | | setInterceptors($clue) |
|---|
| | | |
|---|
| | | export { $clue, imgUrl }; |
|---|
| | |
|---|
| | | /* color palette from <https://github.com/vuejs/theme> */ |
|---|
| | | :root { |
|---|
| | | --vt-c-white: #ffffff; |
|---|
| | | --vt-c-white-soft: #f8f8f8; |
|---|
| | | --vt-c-white-mute: #f2f2f2; |
|---|
| | | |
|---|
| | | --vt-c-black: #181818; |
|---|
| | | --vt-c-black-soft: #222222; |
|---|
| | | --vt-c-black-mute: #282828; |
|---|
| | | |
|---|
| | | --vt-c-indigo: #2c3e50; |
|---|
| | | |
|---|
| | | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); |
|---|
| | | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); |
|---|
| | | --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); |
|---|
| | | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); |
|---|
| | | |
|---|
| | | --vt-c-text-light-1: var(--vt-c-indigo); |
|---|
| | | --vt-c-text-light-2: rgba(60, 60, 60, 0.66); |
|---|
| | | --vt-c-text-dark-1: var(--vt-c-white); |
|---|
| | | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* semantic color variables for this project */ |
|---|
| | | :root { |
|---|
| | | --color-background: var(--vt-c-white); |
|---|
| | | --color-background-soft: var(--vt-c-white-soft); |
|---|
| | | --color-background-mute: var(--vt-c-white-mute); |
|---|
| | | |
|---|
| | | --color-border: var(--vt-c-divider-light-2); |
|---|
| | | --color-border-hover: var(--vt-c-divider-light-1); |
|---|
| | | |
|---|
| | | --color-heading: var(--vt-c-text-light-1); |
|---|
| | | --color-text: var(--vt-c-text-light-1); |
|---|
| | | |
|---|
| | | --section-gap: 160px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @media (prefers-color-scheme: dark) { |
|---|
| | | :root { |
|---|
| | | --color-background: var(--vt-c-black); |
|---|
| | | --color-background-soft: var(--vt-c-black-soft); |
|---|
| | | --color-background-mute: var(--vt-c-black-mute); |
|---|
| | | |
|---|
| | | --color-border: var(--vt-c-divider-dark-2); |
|---|
| | | --color-border-hover: var(--vt-c-divider-dark-1); |
|---|
| | | |
|---|
| | | --color-heading: var(--vt-c-text-dark-1); |
|---|
| | | --color-text: var(--vt-c-text-dark-2); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | *, |
|---|
| | | *::before, |
|---|
| | | *::after { |
|---|
| | |
|---|
| | | font-weight: normal; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :root { |
|---|
| | | --fy-head-height: 50px; |
|---|
| | | --fy-body-height: calc(100% - var(--fy-head-height)); |
|---|
| | | } |
|---|
| | | |
|---|
| | | table { |
|---|
| | | border-collapse: collapse; |
|---|
| | | border-spacing: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | td, th { |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | body { |
|---|
| | | --screen-min-width: 1440px; |
|---|
| | | --screen-min-height: 900px; |
|---|
| | | --screen-min-width: 1200px; |
|---|
| | | --screen-min-height: 600px; |
|---|
| | | min-height: var(--screen-min-height); |
|---|
| | | min-width: var(--screen-min-width); |
|---|
| | | /* overflow: scroll; */ |
|---|
| | | color: var(--color-text); |
|---|
| | | background: var(--color-background); |
|---|
| | | transition: color 0.5s, background-color 0.5s; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | .fy-dashed-border { |
|---|
| | | border: 1px dashed var(--el-border-color); |
|---|
| | | border-radius: var(--el-border-radius-base); |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | .fy-head { |
|---|
| | | height: var(--fy-head-height); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fy-body { |
|---|
| | | height: var(--fy-body-height); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fy-overlay-container { |
|---|
| | | pointer-events: none; |
|---|
| | | /* background-color: aqua; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fy-card { |
|---|
| | | position: relative; |
|---|
| | | /* height: 700px; */ |
|---|
| | | background: white; |
|---|
| | | border-radius: 12px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 16px; |
|---|
| | | pointer-events: auto; |
|---|
| | | box-shadow: var(--el-box-shadow-dark); |
|---|
| | | /* padding: 0 8px; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fy-main { |
|---|
| | | /* background-color: aliceblue; */ |
|---|
| | | padding: 8px 8px 16px 8px; |
|---|
| | | font-size: var(--el-font-size-base); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fy-main-border { |
|---|
| | | /* background-color: aliceblue; */ |
|---|
| | | padding: 0 8px; |
|---|
| | | font-size: var(--el-font-size-base); |
|---|
| | | border: var(--el-border); |
|---|
| | | border-radius: 6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fy-column-reverse { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column-reverse; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fy-flex-row { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 4px; |
|---|
| | | padding: 0 8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fy-flex-row>span{ |
|---|
| | | color: var(--el-text-color-regular); |
|---|
| | | } |
|---|
| | |
|---|
| | | @import './base.css'; |
|---|
| | | @import './border.css'; |
|---|
| | | @import './text.css'; |
|---|
| | | @import './layout.css'; |
|---|
| | | @import './shortcut.css'; |
|---|
| | | |
|---|
| | | #app { |
|---|
| | | margin: 0 auto; |
|---|
| | | |
|---|
| | | font-weight: normal; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* a, |
|---|
| | | .green { |
|---|
| | | text-decoration: none; |
|---|
| | | color: hsla(160, 100%, 37%, 1); |
|---|
| | | transition: 0.4s; |
|---|
| | | } */ |
|---|
| | | |
|---|
| | | @media (hover: hover) { |
|---|
| | | /* a:hover { |
|---|
| | | background-color: hsla(160, 100%, 37%, 0.2); |
|---|
| | | } */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | @media (min-width: 1024px) { |
|---|
| | | /* body { |
|---|
| | | display: flex; |
|---|
| | | place-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app { |
|---|
| | | display: grid; |
|---|
| | | grid-template-columns: 1fr 1fr; |
|---|
| | | padding: 0 2rem; |
|---|
| | | } */ |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | .flex { |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .flex-col { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .gap-1 { |
|---|
| | | gap: 4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .p-h-1 { |
|---|
| | | padding: 0 8px; |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | .fy-h1 { |
|---|
| | | padding: 8px 8px 8px 8px; |
|---|
| | | font-size: var(--el-font-size-large); |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fy-h2 { |
|---|
| | | padding: 8px 8px; |
|---|
| | | font-size: var(--el-font-size-medium); |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fy-p1 { |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fy-p2 { |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fy-tip-red { |
|---|
| | | font-size: var(--el-font-size-small); |
|---|
| | | color: var(--el-color-danger); |
|---|
| | | } |
|---|
| | |
|---|
| | | declare module 'vue' { |
|---|
| | | export interface GlobalComponents { |
|---|
| | | BaseMap: typeof import('./components/map/BaseMap.vue')['default'] |
|---|
| | | CloseButton: typeof import('./components/button/CloseButton.vue')['default'] |
|---|
| | | CoreHeader: typeof import('./components/core/CoreHeader.vue')['default'] |
|---|
| | | 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'] |
|---|
| | | ElDescriptions: typeof import('element-plus/es')['ElDescriptions'] |
|---|
| | | ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem'] |
|---|
| | | ElDialog: typeof import('element-plus/es')['ElDialog'] |
|---|
| | | ElDivider: typeof import('element-plus/es')['ElDivider'] |
|---|
| | | ElEmpty: typeof import('element-plus/es')['ElEmpty'] |
|---|
| | | ElForm: typeof import('element-plus/es')['ElForm'] |
|---|
| | | ElFormItem: typeof import('element-plus/es')['ElFormItem'] |
|---|
| | | ElIcon: typeof import('element-plus/es')['ElIcon'] |
|---|
| | | ElImageViewer: typeof import('element-plus/es')['ElImageViewer'] |
|---|
| | | ElInput: typeof import('element-plus/es')['ElInput'] |
|---|
| | | ElOption: typeof import('element-plus/es')['ElOption'] |
|---|
| | | ElRadio: typeof import('element-plus/es')['ElRadio'] |
|---|
| | | ElRadioButton: typeof import('element-plus/es')['ElRadioButton'] |
|---|
| | | ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] |
|---|
| | | ElRow: typeof import('element-plus/es')['ElRow'] |
|---|
| | | ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] |
|---|
| | | ElSelect: typeof import('element-plus/es')['ElSelect'] |
|---|
| | | ElSwitch: typeof import('element-plus/es')['ElSwitch'] |
|---|
| | | ElTag: typeof import('element-plus/es')['ElTag'] |
|---|
| | | ElText: typeof import('element-plus/es')['ElText'] |
|---|
| | | ElUpload: typeof import('element-plus/es')['ElUpload'] |
|---|
| | | MapSearch: typeof import('./components/map/MapSearch.vue')['default'] |
|---|
| | | OptionTime: typeof import('./components/search-option/OptionTime.vue')['default'] |
|---|
| | | RouterLink: typeof import('vue-router')['RouterLink'] |
|---|
| | | RouterView: typeof import('vue-router')['RouterView'] |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="wrapper"> |
|---|
| | | <el-button |
|---|
| | | class="close-btn" |
|---|
| | | type="danger" |
|---|
| | | icon="Close" |
|---|
| | | circle |
|---|
| | | @click="close" |
|---|
| | | /> |
|---|
| | | <slot></slot> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | emits: ['close'], |
|---|
| | | methods: { |
|---|
| | | close() { |
|---|
| | | this.$emit('close'); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style scoped> |
|---|
| | | .wrapper { |
|---|
| | | position: relative; |
|---|
| | | padding-right: 10px; |
|---|
| | | pointer-events: auto; |
|---|
| | | } |
|---|
| | | .close-btn { |
|---|
| | | position: absolute; |
|---|
| | | right: 2px; |
|---|
| | | top: -10px; |
|---|
| | | z-index: 1; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-row class="fy-head"> |
|---|
| | | <div> |
|---|
| | | <el-radio-group |
|---|
| | | class="container" |
|---|
| | | v-model="radio1" |
|---|
| | | size="large" |
|---|
| | | @change="onChange" |
|---|
| | | > |
|---|
| | | <el-radio-button |
|---|
| | | v-for="item in radioOptions" |
|---|
| | | :key="item.label" |
|---|
| | | :label="item.label" |
|---|
| | | >{{ item.name }}</el-radio-button |
|---|
| | | > |
|---|
| | | </el-radio-group> |
|---|
| | | </div> |
|---|
| | | </el-row> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | emits: ['onChange'], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | radioOptions: [ |
|---|
| | | { name: '线索管ç', label: 0 }, |
|---|
| | | { name: 'ç½æ ¼ç®¡ç', label: 1 } |
|---|
| | | ], |
|---|
| | | radio1: 0 |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | onChange(e) { |
|---|
| | | this.$emit('onChange', e); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style scoped> |
|---|
| | | .container { |
|---|
| | | pointer-events: auto; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="title-wrapper"> |
|---|
| | | <div v-if="title" class="fy-h2">{{ title }}</div> |
|---|
| | | <slot name="extra"></slot> |
|---|
| | | </div> |
|---|
| | | <table> |
|---|
| | | <tbody> |
|---|
| | | <slot></slot> |
|---|
| | | </tbody> |
|---|
| | | </table> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | title: String |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .title-wrapper { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | table { |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <tr> |
|---|
| | | <td v-if="label" class="td-1">{{ label }}</td> |
|---|
| | | <td v-else class="td-1"><slot name="label"></slot></td> |
|---|
| | | <td v-if="content" class="td-2">{{ content }}</td> |
|---|
| | | <td v-else class="td-2"><slot name="content"></slot></td> |
|---|
| | | </tr> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | label: String, |
|---|
| | | content: String |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | tr { |
|---|
| | | font-size: var(--el-font-size-small); |
|---|
| | | } |
|---|
| | | td { |
|---|
| | | border: var(--el-border); |
|---|
| | | padding: 2px 6px; |
|---|
| | | } |
|---|
| | | .td-1 { |
|---|
| | | width: 68px; |
|---|
| | | background-color: var(--el-fill-color-light); |
|---|
| | | color: var(--el-text-color-regular); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .td-2 { |
|---|
| | | color: var(--el-text-color-primary); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | import { onMounted } from 'vue'; |
|---|
| | | import { map, AMap } from './baseMap'; |
|---|
| | | |
|---|
| | | // window._AMapSecurityConfig = { |
|---|
| | | // securityJsCode: 'ãæ¨ç³è¯·çå®å
¨å¯é¥ã' |
|---|
| | |
|---|
| | | // map.add(marker); //æ·»å å°å°å¾ |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | <style> |
|---|
| | | <style scoped> |
|---|
| | | #container { |
|---|
| | | position: relative; |
|---|
| | | width: 100%; |
|---|
| | | height: 100vh; |
|---|
| | | min-height: 900px; |
|---|
| | | min-width: 1440px; |
|---|
| | | min-height: var(--screen-min-height); |
|---|
| | | min-width: var(--screen-min-width); |
|---|
| | | z-index: 0px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-dialog v-model="dialogShow" width="70%" destroy-on-close> |
|---|
| | | <template #header> |
|---|
| | | <div> åæ æ¾å</div> |
|---|
| | | </template> |
|---|
| | | <div class="fy-tip-red">å·¦é®ç¹å»å°å¾éååæ ç¹ï¼æè
æ ¹æ®å
³é®åæç´¢å°ç¹</div> |
|---|
| | | <el-row> |
|---|
| | | <el-col :span="10"> |
|---|
| | | <el-form |
|---|
| | | :inline="true" |
|---|
| | | label-width="50px" |
|---|
| | | label-position="left" |
|---|
| | | :model="formObj" |
|---|
| | | ref="formRef" |
|---|
| | | destroy-on-close |
|---|
| | | > |
|---|
| | | <el-form-item label="å°å" prop="address"> |
|---|
| | | <el-input |
|---|
| | | v-model="formObj.address" |
|---|
| | | placeholder="请è¾å
¥å°åæç´¢" |
|---|
| | | ></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <!-- <el-form-item label="ç»åº¦" prop="lon"> |
|---|
| | | <el-input |
|---|
| | | v-model="formObj.lon" |
|---|
| | | style="width: 100px" |
|---|
| | | ></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="纬度" prop="lat"> |
|---|
| | | <el-input |
|---|
| | | v-model="formObj.lat" |
|---|
| | | style="width: 100px" |
|---|
| | | ></el-input> |
|---|
| | | </el-form-item> --> |
|---|
| | | <el-form-item> |
|---|
| | | <el-button type="primary" @click="searchKeyword" |
|---|
| | | >æç´¢</el-button |
|---|
| | | > |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <div v-if="searchResult.address"> |
|---|
| | | <span>éæ©å°åï¼</span> |
|---|
| | | <span>{{ searchResult.address }}</span> |
|---|
| | | <div> |
|---|
| | | <span>{{ |
|---|
| | | searchResult.lon + ', ' + searchResult.lat |
|---|
| | | }}</span> |
|---|
| | | <el-divider direction="vertical" /> |
|---|
| | | <span>{{ |
|---|
| | | searchResult.gpsLon + ', ' + searchResult.gpsLat |
|---|
| | | }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="2"> |
|---|
| | | <el-button |
|---|
| | | :disabled="searchResult.gpsLon == undefined" |
|---|
| | | type="success" |
|---|
| | | @click="submit" |
|---|
| | | >éæ©</el-button |
|---|
| | | > |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <div id="mapContainer"></div> |
|---|
| | | </el-dialog> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { shallowRef } from 'vue'; |
|---|
| | | import AMapLoader from '@amap/amap-jsapi-loader'; |
|---|
| | | // import { AMap, onMapMounted } from './baseMap'; |
|---|
| | | import baseMapUtil from './baseMapUtil.js'; |
|---|
| | | |
|---|
| | | // var map; |
|---|
| | | var AMap; |
|---|
| | | var geocoder; |
|---|
| | | var inited = false; |
|---|
| | | // onMapMounted(() => { |
|---|
| | | // AMap.plugin('AMap.Geocoder', function () { |
|---|
| | | // geocoder = new AMap.Geocoder({ |
|---|
| | | // city: 'ä¸æµ·' // city æå®è¿è¡ç¼ç æ¥è¯¢çåå¸ï¼æ¯æä¼ å
¥åå¸åãadcode å citycode |
|---|
| | | // }); |
|---|
| | | |
|---|
| | | // // 使ç¨geocoderåå°ç/éå°çç¼ç |
|---|
| | | // }); |
|---|
| | | // }); |
|---|
| | | export default { |
|---|
| | | setup() { |
|---|
| | | const map = shallowRef(null); |
|---|
| | | return { |
|---|
| | | map |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | props: { |
|---|
| | | show: Boolean |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | dialogShow: false, |
|---|
| | | formObj: {}, |
|---|
| | | searchResult: {} |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | emits: ['update:show', 'onSubmit'], |
|---|
| | | watch: { |
|---|
| | | show(val) { |
|---|
| | | this.dialogShow = val; |
|---|
| | | }, |
|---|
| | | dialogShow(val) { |
|---|
| | | if (val) { |
|---|
| | | this.mapInit(); |
|---|
| | | } else { |
|---|
| | | this.formObj = {}; |
|---|
| | | this.searchResult = {}; |
|---|
| | | this.map.destroy(); |
|---|
| | | } |
|---|
| | | this.$emit('update:show', val); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | mapInit() { |
|---|
| | | // if (!inited) { |
|---|
| | | AMapLoader.load({ |
|---|
| | | key: 'c55f27799afbfa69dc5a3fad90cafe51', // ç³è¯·å¥½çWeb端å¼åè
Keyï¼é¦æ¬¡è°ç¨ load æ¶å¿
å¡« |
|---|
| | | version: '2.0', // æå®è¦å è½½ç JS API ççæ¬ï¼ç¼ºçæ¶é»è®¤ä¸º 1.4.15 |
|---|
| | | plugins: ['AMap.Geocoder'] // éè¦ä½¿ç¨ççæ件å表ï¼å¦æ¯ä¾å°º'AMap.Scale'ç |
|---|
| | | }).then((_AMap) => { |
|---|
| | | AMap = _AMap; |
|---|
| | | this.map = new AMap.Map('mapContainer', { |
|---|
| | | rotateEnable: true, |
|---|
| | | pitchEnable: true, |
|---|
| | | alwaysRender: false, |
|---|
| | | showLabel: true, |
|---|
| | | showBuildingBlock: true, |
|---|
| | | // mapStyle: 'amap://styles/e1e78509de64ddcd2efb4cb34c6fae2a', |
|---|
| | | // features: ['bg', 'road'], |
|---|
| | | pitch: 0, // å°å¾ä¿¯ä»°è§åº¦ï¼ææèå´ 0 度- 83 度 |
|---|
| | | viewMode: '2D', // å°å¾æ¨¡å¼ |
|---|
| | | resizeEnable: true, |
|---|
| | | center: [121.6039283, 31.25295567], |
|---|
| | | zooms: [3, 18], |
|---|
| | | zoom: 14 |
|---|
| | | }); |
|---|
| | | geocoder = new AMap.Geocoder({ |
|---|
| | | city: 'ä¸æµ·' // city æå®è¿è¡ç¼ç æ¥è¯¢çåå¸ï¼æ¯æä¼ å
¥åå¸åãadcode å citycode |
|---|
| | | }); |
|---|
| | | this.map.on('click', (ev) => { |
|---|
| | | // this.formObj.lon = ev.lnglat.getLng(); |
|---|
| | | // this.formObj.lat = ev.lnglat.getLat(); |
|---|
| | | this.map.clearMap(); |
|---|
| | | const marker = new AMap.Marker({ |
|---|
| | | position: ev.lnglat |
|---|
| | | }); |
|---|
| | | this.map.add(marker); |
|---|
| | | |
|---|
| | | geocoder.getAddress(ev.lnglat, (status, result) => { |
|---|
| | | if (status === 'complete' && result.info === 'OK') { |
|---|
| | | this.searchResult.address = |
|---|
| | | result.regeocode.formattedAddress; |
|---|
| | | this.searchResult.lon = ev.lnglat.getLng(); |
|---|
| | | this.searchResult.lat = ev.lnglat.getLat(); |
|---|
| | | const [gpsLon, gpsLat] = baseMapUtil.gcj02towgs84( |
|---|
| | | this.searchResult.lon, |
|---|
| | | this.searchResult.lat |
|---|
| | | ); |
|---|
| | | this.searchResult.gpsLon = gpsLon; |
|---|
| | | this.searchResult.gpsLat = gpsLat; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | // inited = true; |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | searchKeyword() { |
|---|
| | | const keyWord = this.formObj.address; |
|---|
| | | this.map.clearMap(); |
|---|
| | | geocoder.getLocation(keyWord, (status, result) => { |
|---|
| | | if (status === 'complete' && result.info === 'OK') { |
|---|
| | | const geocode = result.geocodes[0]; |
|---|
| | | this.searchResult.address = geocode.formattedAddress; |
|---|
| | | |
|---|
| | | this.searchResult.lon = geocode.location.getLng(); |
|---|
| | | this.searchResult.lat = geocode.location.getLat(); |
|---|
| | | const [gpsLon, gpsLat] = baseMapUtil.gcj02towgs84( |
|---|
| | | this.searchResult.lon, |
|---|
| | | this.searchResult.lat |
|---|
| | | ); |
|---|
| | | this.searchResult.gpsLon = gpsLon; |
|---|
| | | this.searchResult.gpsLat = gpsLat; |
|---|
| | | |
|---|
| | | const marker = new AMap.Marker({ |
|---|
| | | position: geocode.location |
|---|
| | | }); |
|---|
| | | this.map.add(marker); |
|---|
| | | this.map.setFitView(marker); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | submit() { |
|---|
| | | this.$emit('onSubmit', this.searchResult); |
|---|
| | | this.dialogShow = false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // updated() { |
|---|
| | | // this.mapInit(); |
|---|
| | | // } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style> |
|---|
| | | #mapContainer { |
|---|
| | | position: relative; |
|---|
| | | width: 100%; |
|---|
| | | height: 60vh; |
|---|
| | | z-index: 0px; |
|---|
| | | border-radius: var(--el-border-radius-round); |
|---|
| | | box-shadow: var(--el-box-shadow); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | satellite.hide(); |
|---|
| | | map.add([satellite]); |
|---|
| | | |
|---|
| | | const rPx = 100; |
|---|
| | | const tPx = 110; |
|---|
| | | // const rPx = 100; |
|---|
| | | // const tPx = 110; |
|---|
| | | // æ·»å å°å¾æ§å¶å·¥å
· |
|---|
| | | map.addControl( |
|---|
| | | new AMap.ControlBar({ |
|---|
| | | position: { |
|---|
| | | right: rPx + 'px', |
|---|
| | | top: tPx + 'px' |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | ); |
|---|
| | | map.addControl( |
|---|
| | | new AMap.ToolBar({ |
|---|
| | | position: { |
|---|
| | | right: rPx + 30 + 'px', |
|---|
| | | top: tPx + 90 + 'px' |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | ); |
|---|
| | | // map.addControl( |
|---|
| | | // new AMap.ControlBar({ |
|---|
| | | // position: { |
|---|
| | | // right: rPx + 'px', |
|---|
| | | // top: tPx + 'px' |
|---|
| | | // } |
|---|
| | | // }) |
|---|
| | | // ); |
|---|
| | | // map.addControl( |
|---|
| | | // new AMap.ToolBar({ |
|---|
| | | // position: { |
|---|
| | | // right: rPx + 30 + 'px', |
|---|
| | | // top: tPx + 90 + 'px' |
|---|
| | | // } |
|---|
| | | // }) |
|---|
| | | // ); |
|---|
| | | |
|---|
| | | // |
|---|
| | | mouseTool = new AMap.MouseTool(map); |
|---|
| | |
|---|
| | | import { map, AMap } from './baseMap'; |
|---|
| | | import { toRaw } from 'vue'; |
|---|
| | | |
|---|
| | | //å®ä¹ä¸äºå¸¸é |
|---|
| | | const PI = 3.1415926535897932384626; |
|---|
| | | const a = 6378245.0; //é¿åè½´ |
|---|
| | | const ee = 0.00669342162296594323; //æç/*** GCJ02 转æ¢ä¸º WGS84* @param lng* @param lat* @returns {*[]}*/ |
|---|
| | | |
|---|
| | | function transformlat(lng, lat) { |
|---|
| | | // lat = +lat lng = +lng |
|---|
| | | let ret = |
|---|
| | | -100.0 + |
|---|
| | | 2.0 * lng + |
|---|
| | | 3.0 * lat + |
|---|
| | | 0.2 * lat * lat + |
|---|
| | | 0.1 * lng * lat + |
|---|
| | | 0.2 * Math.sqrt(Math.abs(lng)); |
|---|
| | | ret += |
|---|
| | | ((20.0 * Math.sin(6.0 * lng * PI) + |
|---|
| | | 20.0 * Math.sin(2.0 * lng * PI)) * |
|---|
| | | 2.0) / |
|---|
| | | 3.0; |
|---|
| | | ret += |
|---|
| | | ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * |
|---|
| | | 2.0) / |
|---|
| | | 3.0; |
|---|
| | | ret += |
|---|
| | | ((160.0 * Math.sin((lat / 12.0) * PI) + |
|---|
| | | 320 * Math.sin((lat * PI) / 30.0)) * |
|---|
| | | 2.0) / |
|---|
| | | 3.0; |
|---|
| | | return ret; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function transformlng(lng, lat) { |
|---|
| | | // lat = +latlng = +lng |
|---|
| | | let ret = |
|---|
| | | 300.0 + |
|---|
| | | lng + |
|---|
| | | 2.0 * lat + |
|---|
| | | 0.1 * lng * lng + |
|---|
| | | 0.1 * lng * lat + |
|---|
| | | 0.1 * Math.sqrt(Math.abs(lng)); |
|---|
| | | ret += |
|---|
| | | ((20.0 * Math.sin(6.0 * lng * PI) + |
|---|
| | | 20.0 * Math.sin(2.0 * lng * PI)) * |
|---|
| | | 2.0) / |
|---|
| | | 3.0; |
|---|
| | | ret += |
|---|
| | | ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) * |
|---|
| | | 2.0) / |
|---|
| | | 3.0; |
|---|
| | | ret += |
|---|
| | | ((150.0 * Math.sin((lng / 12.0) * PI) + |
|---|
| | | 300.0 * Math.sin((lng / 30.0) * PI)) * |
|---|
| | | 2.0) / |
|---|
| | | 3.0; |
|---|
| | | return ret; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å¤ææ¯å¦å¨å½å
ï¼ä¸å¨å½å
åä¸åå移 |
|---|
| | | * @param lng |
|---|
| | | * @param lat |
|---|
| | | * @returns {boolean} |
|---|
| | | */ |
|---|
| | | function out_of_china(lng, lat) { |
|---|
| | | // 纬度3.86~53.55,ç»åº¦73.66~135.05 |
|---|
| | | return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55); |
|---|
| | | } |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | /** |
|---|
| | | * å°æ°ç»è¡¨ç¤ºçåæ ç¹ï¼è½¬æ¢ä¸ºAMap.LngLat对象 |
|---|
| | |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | addMarker(lnglat) { |
|---|
| | | const marker = new AMap.Marker({ |
|---|
| | | position: lnglat |
|---|
| | | }); |
|---|
| | | map.add(marker); |
|---|
| | | this.setCenter(lnglat); |
|---|
| | | return marker; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | setCenter(lnglat) { |
|---|
| | | map.setCenter(lnglat); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 缩æ¾å°å¾å°åéçè§éçº§å« |
|---|
| | | */ |
|---|
| | | setFitView(overlays, type = 0) { |
|---|
| | | setFitView(...overlays) { |
|---|
| | | const _overlays = toRaw(overlays); |
|---|
| | | switch (type) { |
|---|
| | | case 0: |
|---|
| | | map.setFitView([_overlays]); |
|---|
| | | break; |
|---|
| | | case 1: |
|---|
| | | map.setFitView(_overlays); |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | map.setFitView([_overlays]); |
|---|
| | | break; |
|---|
| | | map.setFitView(_overlays, true, [60, 60, 500, 60], 14.5); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | addView(overlays) { |
|---|
| | | if (overlays) { |
|---|
| | | const _overlays = toRaw(overlays); |
|---|
| | | map.add(_overlays); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | |
|---|
| | | * 移é¤è¦çç© |
|---|
| | | */ |
|---|
| | | removeView(overlays) { |
|---|
| | | const _overlays = toRaw(overlays); |
|---|
| | | map.remove(_overlays); |
|---|
| | | if (overlays) { |
|---|
| | | const _overlays = toRaw(overlays); |
|---|
| | | map.remove(_overlays); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | |
|---|
| | | if (map == undefined) return; |
|---|
| | | map.clearMap(); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * é«å¾·å°å¾åæ 转GPSåæ ç®æ³ |
|---|
| | | */ |
|---|
| | | gcj02towgs84(lng, lat) { |
|---|
| | | // lat = +latlng = +lng |
|---|
| | | if (out_of_china(lng, lat)) { |
|---|
| | | return [lng, lat]; |
|---|
| | | } else { |
|---|
| | | let dlat = transformlat(lng - 105.0, lat - 35.0); |
|---|
| | | let dlng = transformlng(lng - 105.0, lat - 35.0); |
|---|
| | | let radlat = (lat / 180.0) * PI; |
|---|
| | | let magic = Math.sin(radlat); |
|---|
| | | magic = 1 - ee * magic * magic; |
|---|
| | | let sqrtmagic = Math.sqrt(magic); |
|---|
| | | dlat = |
|---|
| | | (dlat * 180.0) / |
|---|
| | | (((a * (1 - ee)) / (magic * sqrtmagic)) * PI); |
|---|
| | | dlng = |
|---|
| | | (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI); |
|---|
| | | let mglat = |
|---|
| | | Math.round((lat * 2 - lat - dlat) * 1000000) / 1000000; |
|---|
| | | let mglng = |
|---|
| | | Math.round((lng * 2 - lng - dlng) * 1000000) / 1000000; |
|---|
| | | return [mglng, mglat]; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * WGS84 转æ¢ä¸º GCJ02 |
|---|
| | | * @param lng |
|---|
| | | * @param lat |
|---|
| | | * @returns {*[]} |
|---|
| | | */ |
|---|
| | | wgs84togcj02(lng, lat) { |
|---|
| | | // lat = +latlng = +lng |
|---|
| | | if (out_of_china(lng, lat)) { |
|---|
| | | return [lng, lat]; |
|---|
| | | } else { |
|---|
| | | let dlat = transformlat(lng - 105.0, lat - 35.0); |
|---|
| | | let dlng = transformlng(lng - 105.0, lat - 35.0); |
|---|
| | | let radlat = (lat / 180.0) * PI; |
|---|
| | | let magic = Math.sin(radlat); |
|---|
| | | magic = 1 - ee * magic * magic; |
|---|
| | | let sqrtmagic = Math.sqrt(magic); |
|---|
| | | dlat = |
|---|
| | | (dlat * 180.0) / |
|---|
| | | (((a * (1 - ee)) / (magic * sqrtmagic)) * PI); |
|---|
| | | dlng = |
|---|
| | | (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI); |
|---|
| | | let mglat = Math.round((lat + dlat) * 1000000) / 1000000; |
|---|
| | | let mglng = Math.round((lng + dlng) * 1000000) / 1000000; |
|---|
| | | return [mglng, mglat]; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | gpsConvert(gps) { |
|---|
| | | return new Promise((reject) => { |
|---|
| | | // åæ°è¯´æï¼éè¦è½¬æ¢çåæ ï¼éè¦è½¬æ¢çåæ ç±»åï¼è½¬æ¢æååçåè°å½æ° |
|---|
| | | AMap.convertFrom(gps, 'baidu', function (status, result) { |
|---|
| | | if (result.info === 'ok') { |
|---|
| | | var lnglats = result.locations; // 转æ¢åçé«å¾·åæ Array.<LngLat> |
|---|
| | | reject(lnglats[0]); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | |
|---|
| | | }; |
|---|
| | | mouseTool.on('draw', lastDrawEvent); |
|---|
| | | mouseTool.polygon({ |
|---|
| | | strokeColor: '#FF33FF', |
|---|
| | | strokeColor: 'green', |
|---|
| | | strokeOpacity: 1, |
|---|
| | | strokeWeight: 6, |
|---|
| | | fillColor: '#1791fc', |
|---|
| | | strokeWeight: 2, |
|---|
| | | fillColor: '#fff', |
|---|
| | | fillOpacity: 0.4, |
|---|
| | | // çº¿æ ·å¼è¿æ¯æ 'dashed' |
|---|
| | | strokeStyle: 'solid' |
|---|
| | |
|---|
| | | <script> |
|---|
| | | // ç½æ ¼åæ¹æ¡è®°å½é项 |
|---|
| | | |
|---|
| | | import gridRecordApi from '@/api/gridRecordApi'; |
|---|
| | | import gridSchemeApi from '@/api/grid/gridSchemeApi'; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | getOptions() { |
|---|
| | | gridRecordApi.getGridRecords().then((res) => { |
|---|
| | | gridSchemeApi.getGridRecords().then((res) => { |
|---|
| | | this.options = res; |
|---|
| | | this.selectedOptions = res[0]; |
|---|
| | | }); |
|---|
| | |
|---|
| | | // 表åç确认ååæ¶ |
|---|
| | | import { onActivated, onDeactivated, ref, watch } from 'vue'; |
|---|
| | | import { useCloned } from '@vueuse/core'; |
|---|
| | | // import { useCloned } from '@vueuse/core'; |
|---|
| | | import { useMessageBoxTip, useMessageBox } from './messageBox'; |
|---|
| | | |
|---|
| | | export function useFormConfirm({ |
|---|
| | |
|---|
| | | // manual: true |
|---|
| | | // }).cloned.value; |
|---|
| | | formRef.value.clearValidate(); |
|---|
| | | formRef.value.resetFields(); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // æ¸
空表å |
|---|
| | | const clear = function () { |
|---|
| | | formRef.value.clearValidate(); |
|---|
| | | edit.value = false; |
|---|
| | | isReset = true; |
|---|
| | | formRef.value.resetFields(); |
|---|
| | | formObj.value = {}; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // æ交æåå |
|---|
| | |
|---|
| | | confirmMsg: submit.msg, |
|---|
| | | confirmTitle: submit.title, |
|---|
| | | onConfirm: async () => { |
|---|
| | | await submit.do(); |
|---|
| | | submited(); |
|---|
| | | return; |
|---|
| | | return submit.do().then(() => { |
|---|
| | | submited(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | formRef.value.clearValidate(); |
|---|
| | | cancel.do(); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | return { formObj, formRef, edit, active, onSubmit, onCancel, onReset }; |
|---|
| | | return { |
|---|
| | | formObj, |
|---|
| | | formRef, |
|---|
| | | edit, |
|---|
| | | active, |
|---|
| | | onSubmit, |
|---|
| | | onCancel, |
|---|
| | | onReset, |
|---|
| | | clear |
|---|
| | | }; |
|---|
| | | } |
|---|
| | |
|---|
| | | import { ElMessageBox, ElNotification, ElMessage } from 'element-plus'; |
|---|
| | | import { |
|---|
| | | ElMessageBox, |
|---|
| | | ElNotification, |
|---|
| | | ElMessage |
|---|
| | | } from 'element-plus'; |
|---|
| | | |
|---|
| | | function useMessageBoxTip({ |
|---|
| | | confirmMsg, |
|---|
| | | confirmTitle = 'æ交', |
|---|
| | | doneMsg = confirmTitle, |
|---|
| | | onConfirm, |
|---|
| | | onConfirm |
|---|
| | | }) { |
|---|
| | | ElMessageBox.confirm(confirmMsg, `${confirmTitle}确认`, { |
|---|
| | | confirmButtonText: '确认', |
|---|
| | | cancelButtonText: 'åæ¶', |
|---|
| | | type: 'warning', |
|---|
| | | type: 'warning' |
|---|
| | | }) |
|---|
| | | .then(async () => { |
|---|
| | | let msg = `å·²${doneMsg}` |
|---|
| | | let msg = `å·²${doneMsg}`; |
|---|
| | | if (typeof onConfirm === 'function') { |
|---|
| | | const str = await onConfirm(); |
|---|
| | | if (str && str != '') { |
|---|
| | | msg = `å·²${doneMsg}, ${str}` |
|---|
| | | } |
|---|
| | | onConfirm() |
|---|
| | | .then((res) => { |
|---|
| | | if (res && res != '') { |
|---|
| | | msg = `å·²${doneMsg}, ${res}`; |
|---|
| | | } |
|---|
| | | ElNotification({ |
|---|
| | | title: `${confirmTitle}æå`, |
|---|
| | | message: msg, |
|---|
| | | type: 'success' |
|---|
| | | }); |
|---|
| | | }) |
|---|
| | | .catch((err) => { |
|---|
| | | let errStr = `${confirmTitle}åæ¶`; |
|---|
| | | if (err != 'cancel') { |
|---|
| | | errStr = `${confirmTitle}失败, ${err}`; |
|---|
| | | } |
|---|
| | | ElMessage({ |
|---|
| | | message: errStr, |
|---|
| | | type: 'warning' |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | ElNotification({ |
|---|
| | | title: `${confirmTitle}æå`, |
|---|
| | | message: msg, |
|---|
| | | type: 'success', |
|---|
| | | // offset: 170, |
|---|
| | | position: 'bottom-left', |
|---|
| | | }); |
|---|
| | | }) |
|---|
| | | .catch((err) => { |
|---|
| | | let errStr = `${confirmTitle}åæ¶`; |
|---|
| | |
|---|
| | | } |
|---|
| | | ElMessage({ |
|---|
| | | message: errStr, |
|---|
| | | type: 'warning', |
|---|
| | | type: 'warning' |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | |
|---|
| | | ElMessageBox.confirm(confirmMsg, confirmTitle, { |
|---|
| | | confirmButtonText: '确认', |
|---|
| | | cancelButtonText: 'åæ¶', |
|---|
| | | type: 'warning', |
|---|
| | | type: 'warning' |
|---|
| | | }) |
|---|
| | | .then(async () => { |
|---|
| | | if (typeof onConfirm === 'function') { |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export const streets = [ |
|---|
| | | { label: '大å®è·¯è¡é', value: ['310106019', '大å®è·¯è¡é'] }, |
|---|
| | | { label: 'å½æµ¦æ°æè¡é', value: ['310106020', 'å½æµ¦æ°æè¡é'] }, |
|---|
| | | { label: '临汾路è¡é', value: ['310106021', '临汾路è¡é'] }, |
|---|
| | | { label: 'è·æ±è¥¿è·¯è¡é', value: ['310106022', 'è·æ±è¥¿è·¯è¡é'] }, |
|---|
| | | { label: 'å½æµ¦é', value: ['310106101', 'å½æµ¦é'] }, |
|---|
| | | { label: 'æ±å®è·¯è¡é', value: ['310106006', 'æ±å®è·¯è¡é'] }, |
|---|
| | | { label: 'ç³é¨äºè·¯è¡é', value: ['310106011', 'ç³é¨äºè·¯è¡é'] }, |
|---|
| | | { label: 'å京西路è¡é', value: ['310106012', 'å京西路è¡é'] }, |
|---|
| | | { label: 'éå®å¯ºè¡é', value: ['310106013', 'éå®å¯ºè¡é'] }, |
|---|
| | | { label: 'æ¹å®¶æ¸¡è¡é', value: ['310106014', 'æ¹å®¶æ¸¡è¡é'] }, |
|---|
| | | { label: '天ç®è¥¿è·¯è¡é', value: ['310106015', '天ç®è¥¿è·¯è¡é'] }, |
|---|
| | | { label: 'åç«è¡é', value: ['310106016', 'åç«è¡é'] }, |
|---|
| | | { label: 'å®å±±è·¯è¡é', value: ['310106017', 'å®å±±è·¯è¡é'] }, |
|---|
| | | { label: 'å
±åæ°è·¯è¡é', value: ['310106018', 'å
±åæ°è·¯è¡é'] } |
|---|
| | | ]; |
|---|
| | |
|---|
| | | import { createPinia } from 'pinia'; |
|---|
| | | import App from './App.vue'; |
|---|
| | | import { createMap } from './components/map/baseMap'; |
|---|
| | | import { tf, nf } from './utils/textFormat'; |
|---|
| | | |
|---|
| | | import * as ElementPlusIconsVue from '@element-plus/icons-vue'; |
|---|
| | | import 'element-plus/theme-chalk/src/overlay.scss'; |
|---|
| | |
|---|
| | | |
|---|
| | | // é«å¾·å°å¾åå§å |
|---|
| | | createMap('container'); |
|---|
| | | |
|---|
| | | // æè½½æ¶é´æ ¼å¼åå½æ°è³å
¨å± |
|---|
| | | app.config.globalProperties.$tf = tf; |
|---|
| | | app.config.globalProperties.$nf = nf; |
|---|
| | | |
|---|
| | | app.use(createPinia()).mount('#app'); |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { imgUrl } from '@/api/index'; |
|---|
| | | |
|---|
| | | function getClueQuestion(data) { |
|---|
| | | data.cqFilePath = data.cqFilePath.split(';').map((val) => { |
|---|
| | | return imgUrl + val; |
|---|
| | | }); |
|---|
| | | return data; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function getClueQuestionList(dataList) { |
|---|
| | | return dataList.map((v) => { |
|---|
| | | return getClueQuestion(v); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | export { getClueQuestion, getClueQuestionList }; |
|---|
| | |
|---|
| | | * @returns |
|---|
| | | */ |
|---|
| | | function getGridRecord(data) { |
|---|
| | | const path = util.listToLngLat(data.gSide); |
|---|
| | | data.gSide = path; |
|---|
| | | return data; |
|---|
| | | const _sides = data.giSide.split(';').map((value) => { |
|---|
| | | return value.split(','); |
|---|
| | | }); |
|---|
| | | const _data = { |
|---|
| | | id: data.giUid, |
|---|
| | | schemeId: data.gsId, |
|---|
| | | name: data.giName, |
|---|
| | | sides: util.listToLngLat(_sides), |
|---|
| | | delete: data.giDelete, |
|---|
| | | createTime: data.giCreateTime |
|---|
| | | }; |
|---|
| | | return _data; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function parseToGridInfo(data) { |
|---|
| | | return { |
|---|
| | | giUid: data.id, |
|---|
| | | gsId: data.schemeId, |
|---|
| | | giName: data.name, |
|---|
| | | giSide: data.overlays.getPath().join(';'), |
|---|
| | | giDelete: data.delete, |
|---|
| | | giCreateTime: data.createTime |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function getGridRecordList(dataList) { |
|---|
| | |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | export { getGridRecord, getGridRecordList }; |
|---|
| | | export { getGridRecord, getGridRecordList, parseToGridInfo }; |
|---|
| | |
|---|
| | | import { defineStore } from 'pinia'; |
|---|
| | | import mapGrid from '@/components/map/mapGrid'; |
|---|
| | | import baseMapUtil from '@/components/map/baseMapUtil'; |
|---|
| | | import gridInfoApi from '@/api/grid/gridInfoApi'; |
|---|
| | | import { parseToGridInfo } from '@/model/gridRecord'; |
|---|
| | | |
|---|
| | | export const useGridStore = defineStore('grid', () => { |
|---|
| | | // å½åå è½½çç½æ ¼æ°æ®éå |
|---|
| | | const gridList = ref([]); |
|---|
| | | // å½åæ¯å¦æéä¸æ¹æ¡ |
|---|
| | | const hasScheme = ref(false); |
|---|
| | | // å½åéä¸æä½çç½æ ¼ä¿¡æ¯ |
|---|
| | | const selectedGrid = ref({}); |
|---|
| | | const selectedGrid = ref(); |
|---|
| | | // å½åéä¸æä½çç½æ ¼æ¯å¦å¤äºå¯ç¼è¾ç¶æ |
|---|
| | | const isEdit = ref(false); |
|---|
| | | // è®°å½å½åç½æ ¼è·¯å¾ä¿¡æ¯ |
|---|
| | | var selectedPath = undefined; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ£æ¥å½åæ¯å¦æéä¸çç½æ ¼ |
|---|
| | | * @returns {Boolean} |
|---|
| | | */ |
|---|
| | | function _checkGridExist() { |
|---|
| | | return selectedGrid.value != undefined; |
|---|
| | | return selectedGrid.value && selectedGrid.value.id != undefined; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /**æ°æ®å¢å **************************************************************/ |
|---|
| | |
|---|
| | | function setGrid(index) { |
|---|
| | | if (index >= 0 && index < gridList.value.length) { |
|---|
| | | selectedGrid.value = gridList.value[index]; |
|---|
| | | selectedPath = selectedGrid.value.overlays.getPath().join(';'); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * åæ¶éä¸ |
|---|
| | | */ |
|---|
| | | function clearSelect() { |
|---|
| | | selectedGrid.value = undefined; |
|---|
| | | selectedPath = undefined; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | |
|---|
| | | */ |
|---|
| | | function setGridList(list) { |
|---|
| | | gridList.value = list; |
|---|
| | | hasScheme.value = true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | |
|---|
| | | */ |
|---|
| | | function saveSelectedGrid() { |
|---|
| | | if (!_checkGridExist()) return; |
|---|
| | | selectedGrid.value.gSide = selectedGrid.value.overlays.getPath(); |
|---|
| | | const newPath = selectedGrid.value.overlays.getPath().join(';'); |
|---|
| | | if (selectedPath != newPath) { |
|---|
| | | const _data = parseToGridInfo(selectedGrid.value); |
|---|
| | | return gridInfoApi.updateGrid(_data).then(() => { |
|---|
| | | selectedGrid.value.sides = |
|---|
| | | selectedGrid.value.overlays.getPath(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | |
|---|
| | | if (!_checkGridExist()) return; |
|---|
| | | baseMapUtil.removeView(selectedGrid.value.overlays); |
|---|
| | | selectedGrid.value.overlays = mapGrid.drawPolygon( |
|---|
| | | selectedGrid.value.gSide |
|---|
| | | selectedGrid.value.sides |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | showGrid(i); |
|---|
| | | grids.push(l.overlays); |
|---|
| | | }); |
|---|
| | | baseMapUtil.setFitView(grids, 1); |
|---|
| | | baseMapUtil.setFitView(...grids); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | |
|---|
| | | if (item.overlays) { |
|---|
| | | baseMapUtil.setFitView(item.overlays); |
|---|
| | | } else { |
|---|
| | | item.overlays = mapGrid.drawPolygon(item.gSide); |
|---|
| | | item.overlays = mapGrid.drawPolygon(item.sides); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { |
|---|
| | | hasScheme, |
|---|
| | | gridList, |
|---|
| | | selectedGrid, |
|---|
| | | isEdit, |
|---|
| | | setGrid, |
|---|
| | | clearSelect, |
|---|
| | | setGridList, |
|---|
| | | addGrid, |
|---|
| | | deleteGrid, |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /** |
|---|
| | | * ææ¬æ ·å¼æ ¼å¼å |
|---|
| | | */ |
|---|
| | | |
|---|
| | | import moment from 'moment'; |
|---|
| | | |
|---|
| | | function tf(timeStr) { |
|---|
| | | return moment(timeStr).format('YYYY-MM-DD HH:mm:ss'); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function nf(num, digit = 2) { |
|---|
| | | let numStr = num + ''; |
|---|
| | | while (numStr.length < digit) { |
|---|
| | | numStr = '0' + numStr; |
|---|
| | | } |
|---|
| | | return numStr; |
|---|
| | | } |
|---|
| | | |
|---|
| | | export { tf, nf }; |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <BaseMap></BaseMap> |
|---|
| | | <div class="overlay-container"> |
|---|
| | | <CoreHeader @on-change="(e) => (menuIndex = e)"></CoreHeader> |
|---|
| | | <!-- <router-view> --> |
|---|
| | | <!-- <GridLayout></GridLayout> --> |
|---|
| | | <ClueLayout></ClueLayout> |
|---|
| | | <ClueLayout v-show="menuIndex == 0"></ClueLayout> |
|---|
| | | <GridLayout v-show="menuIndex == 1"></GridLayout> |
|---|
| | | <!-- </router-view> --> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | import { ref } from 'vue'; |
|---|
| | | |
|---|
| | | import GridLayout from '@/views/overlay-grid/GridLayout.vue'; |
|---|
| | | import ClueLayout from '@/views/overlay-clue/ClueLayout.vue'; |
|---|
| | | |
|---|
| | | // é¤åç´¢å¼ |
|---|
| | | const menuIndex = ref(0); |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .overlay-container { |
|---|
| | | background: transparent; |
|---|
| | | position: absolute; |
|---|
| | | width: 100%; |
|---|
| | | min-height: var(--screen-min-height); |
|---|
| | | min-width: var(--screen-min-width); |
|---|
| | | width: 100vw; |
|---|
| | | height: 100vh; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | padding: 4px; |
|---|
| | | /* padding: 4px; */ |
|---|
| | | pointer-events: none; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <el-row class="container"> |
|---|
| | | <el-col :span="6" class="grid-content bg-content"> |
|---|
| | | <div class="title">ä¸å线索æ¸
å</div> |
|---|
| | | <div class="search-wrap"> |
|---|
| | | <span>æ¶é´</span> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="updateTime" |
|---|
| | | type="datetime" |
|---|
| | | placeholder="éæ©æ¥æåæ¶é´" |
|---|
| | | /> |
|---|
| | | <el-button type="primary" @click="getClues">æ¥è¯¢</el-button> |
|---|
| | | </div> |
|---|
| | | <ClueList |
|---|
| | | :dataList="clueList" |
|---|
| | | @itemSelected="selectClue" |
|---|
| | | ></ClueList> |
|---|
| | | <el-row class="fy-overlay-container" justify="space-between"> |
|---|
| | | <el-col :span="6"> |
|---|
| | | <ClueManage @itemSelected="selectClue"></ClueManage> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="6" class="grid-content bg-content-1"> |
|---|
| | | <ClueReport></ClueReport> |
|---|
| | | <el-col :span="6"> |
|---|
| | | <ClueReport |
|---|
| | | v-model:show="show" |
|---|
| | | :clueData="selectedClue" |
|---|
| | | ></ClueReport> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | import ClueList from './components/ClueList.vue'; |
|---|
| | | import ClueReport from './components/ClueReport.vue'; |
|---|
| | | import ClueManage from './list/ClueManage.vue'; |
|---|
| | | import ClueReport from './report/ClueReport.vue'; |
|---|
| | | import { ref } from 'vue'; |
|---|
| | | |
|---|
| | | import clueApi from '@/api/clue/clueApi'; |
|---|
| | | import { onMapMounted } from '@/components/map/baseMap'; |
|---|
| | | import moment from 'moment'; |
|---|
| | | import { ref, watch } from 'vue'; |
|---|
| | | |
|---|
| | | // ä¸åæ¶é´ï¼æ¯æ¬¡æ¥è¯¢å¤§äºæ¤æ¶é´çæ°æ®ï¼ |
|---|
| | | const updateTime = ref(new Date()); |
|---|
| | | // 线索æ¸
å |
|---|
| | | const clueList = ref([]); |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¥è¯¢å·²ä¸åç线索æ¸
å |
|---|
| | | */ |
|---|
| | | const getClues = function () { |
|---|
| | | const time = moment(updateTime.value).format('YYYY-MM-DD HH:mm:ss'); |
|---|
| | | onMapMounted(() => { |
|---|
| | | clueApi.getClues(time).then((res) => { |
|---|
| | | clueList.value = res; |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | const selectedClue = ref(); |
|---|
| | | const show = ref(false); |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * éæ©çº¿ç´¢äºä»¶ |
|---|
| | | */ |
|---|
| | | const selectClue = function (clue) {}; |
|---|
| | | const selectClue = function (clue) { |
|---|
| | | show.value = true; |
|---|
| | | selectedClue.value = clue; |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .title { |
|---|
| | | font-size: var(--el-font-size-large); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .container { |
|---|
| | | pointer-events: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .grid-content { |
|---|
| | | /* min-width: 180px; */ |
|---|
| | | border-radius: 4px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 16px; |
|---|
| | | padding: 8px 8px; |
|---|
| | | pointer-events: auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .bg-content { |
|---|
| | | height: 90vh; |
|---|
| | | background: white; |
|---|
| | | min-width: calc(var(--screen-min-width) / 6); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .bg-content-1 { |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search-wrap { |
|---|
| | | display: flex; |
|---|
| | | gap: 4px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | <style scoped></style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="fy-card"> |
|---|
| | | <div class="fy-h1">线索æ¸
å</div> |
|---|
| | | <div class="fy-flex-row"> |
|---|
| | | <span>æ¶é´</span> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="updateTime" |
|---|
| | | type="datetime" |
|---|
| | | placeholder="éæ©æ¥æåæ¶é´" |
|---|
| | | /> |
|---|
| | | <el-button type="primary" @click="getClues">æ¥è¯¢</el-button> |
|---|
| | | <el-button type="primary" @click="fetchRemoteClue" plain |
|---|
| | | >æå线索</el-button |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | <el-scrollbar height="70vh" class="p-h-1"> |
|---|
| | | <ClueList |
|---|
| | | :dataList="clueList" |
|---|
| | | @itemSelected="selectClue" |
|---|
| | | ></ClueList> |
|---|
| | | </el-scrollbar> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | import ClueList from './components/ClueList.vue'; |
|---|
| | | |
|---|
| | | import clueApi from '@/api/clue/clueApi'; |
|---|
| | | import { onMapMounted } from '@/components/map/baseMap'; |
|---|
| | | import moment from 'moment'; |
|---|
| | | import { ref, onMounted } from 'vue'; |
|---|
| | | |
|---|
| | | const emits = defineEmits('itemSelected'); |
|---|
| | | |
|---|
| | | // ä¸åæ¶é´ï¼æ¯æ¬¡æ¥è¯¢å¤§äºæ¤æ¶é´çæ°æ®ï¼ |
|---|
| | | const updateTime = ref(); |
|---|
| | | // 线索æ¸
å |
|---|
| | | const clueList = ref([]); |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¥è¯¢å·²ä¸åç线索æ¸
å |
|---|
| | | */ |
|---|
| | | const getClues = function () { |
|---|
| | | let sTime; |
|---|
| | | let eTime; |
|---|
| | | if (updateTime.value) { |
|---|
| | | const now = moment(updateTime.value); |
|---|
| | | sTime = now.format('YYYY-MM-DD HH:mm:ss'); |
|---|
| | | eTime = now.add(1, 'month').format('YYYY-MM-DD HH:mm:ss'); |
|---|
| | | } |
|---|
| | | onMapMounted(() => { |
|---|
| | | clueApi.getClue({ sTime, eTime }).then((res) => { |
|---|
| | | clueList.value = res; |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | function fetchRemoteClue() { |
|---|
| | | const time = moment(updateTime.value).format('YYYY-MM-DD HH:mm:ss'); |
|---|
| | | onMapMounted(() => { |
|---|
| | | clueApi.fetchRemoteClue(time).then((res) => { |
|---|
| | | clueList.value = res; |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * éæ©çº¿ç´¢äºä»¶ |
|---|
| | | */ |
|---|
| | | const selectClue = function (clue) { |
|---|
| | | emits('itemSelected', clue); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | onMounted(() => { |
|---|
| | | getClues(); |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | <style scoped> |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <ul class="list-container"> |
|---|
| | | <template v-for="(item, index) in dataList" :key="index"> |
|---|
| | | <li |
|---|
| | | :class=" |
|---|
| | | 'list-item ' + (item.selected ? 'list-item__selected' : '') |
|---|
| | | " |
|---|
| | | @click="selectItem(item)" |
|---|
| | | 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> |
|---|
| | | <div class="flex gap-1"> |
|---|
| | | <div class=""> |
|---|
| | | <el-text type="info" size="small">ç»è®ºï¼</el-text> |
|---|
| | | <el-text size="small">{{ item.conclusionCount + '/1' }}</el-text> |
|---|
| | | </div> |
|---|
| | | <div class=""> |
|---|
| | | <el-text type="info" size="small">é®é¢ï¼</el-text> |
|---|
| | | <el-text size="small">{{ item.questionCount }}</el-text> |
|---|
| | | </div> |
|---|
| | | <el-text type="info" size="small">{{item.cuploaded ? 'å·²æ¨é' : 'æªæ¨é'}}</el-text> |
|---|
| | | </div> |
|---|
| | | <el-row justify="space-between"> |
|---|
| | | <span class="flex gap-1"> |
|---|
| | | <el-tag v-if="item.csiteType" size="default" type="info">{{ |
|---|
| | | item.csiteType |
|---|
| | | }}</el-tag> |
|---|
| | | <el-tag v-if="item.cfactor" size="default" effect="" type="danger">{{ |
|---|
| | | item.cfactor |
|---|
| | | }}</el-tag> |
|---|
| | | </span> |
|---|
| | | <el-text size="small">ä¸åæ¶é´ï¼{{ |
|---|
| | | $tf(item.creleaseTime) |
|---|
| | | }}</el-text> |
|---|
| | | </el-row> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | </template> |
|---|
| | | </ul> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import baseMapUtil from '@/components/map/baseMapUtil'; |
|---|
| | | |
|---|
| | | var _marker; |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | dataList: Array |
|---|
| | | }, |
|---|
| | | emits: ['itemSelected'], |
|---|
| | | data() { |
|---|
| | | return {}; |
|---|
| | | }, |
|---|
| | | watch: {}, |
|---|
| | | methods: { |
|---|
| | | // å表éæ© |
|---|
| | | selectItem(item) { |
|---|
| | | this.clearSelect(); |
|---|
| | | item.selected = true; |
|---|
| | | // const lnglat = baseMapUtil.wgs84togcj02( |
|---|
| | | // item.clongitude, |
|---|
| | | // item.clatitude |
|---|
| | | // ); |
|---|
| | | baseMapUtil |
|---|
| | | .gpsConvert([item.clongitude, item.clatitude]) |
|---|
| | | .then((lnglat) => { |
|---|
| | | baseMapUtil.removeView(_marker); |
|---|
| | | _marker = baseMapUtil.addMarker(lnglat); |
|---|
| | | }); |
|---|
| | | this.$emit('itemSelected', item); |
|---|
| | | }, |
|---|
| | | clearSelect() { |
|---|
| | | this.dataList.forEach((e) => { |
|---|
| | | e.selected = false; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style scoped> |
|---|
| | | .list-container { |
|---|
| | | padding: initial; |
|---|
| | | /* border: var(--el-border); */ |
|---|
| | | font-size: var(--el-font-size-base); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .list-item { |
|---|
| | | padding: 4px; |
|---|
| | | list-style-type: none; |
|---|
| | | border: var(--el-border); |
|---|
| | | border-radius: var(--el-border-radius-base); |
|---|
| | | box-shadow: var(--el-box-shadow-lighter); |
|---|
| | | margin-bottom: 6px; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .list-item:hover { |
|---|
| | | background-color: var(--el-color-primary-light-9); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .list-item__selected { |
|---|
| | | background-color: var(--el-color-primary-light-9); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .v-enter-from, |
|---|
| | | .v-leave-to { |
|---|
| | | opacity: 0; |
|---|
| | | transform: translateX(8px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .v-enter-active, |
|---|
| | | .v-leave-active { |
|---|
| | | transition: all 0.3s ease-out; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .clue-item { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .clue-num { |
|---|
| | | font-size: 16px; |
|---|
| | | font-weight: 700; |
|---|
| | | font-style: italic; |
|---|
| | | color: var(--el-color-primary); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .clue-tag { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: flex-start; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- æ¸
å详æ
--> |
|---|
| | | <CloseButton v-show="show" @close="closeEdit"> |
|---|
| | | <el-button |
|---|
| | | class="push-btn" |
|---|
| | | :type="clueData.cuploaded ? 'success' : 'danger'" |
|---|
| | | @click="pushCheck" |
|---|
| | | :disabled="clueData.cuploaded" |
|---|
| | | ><div class="flex-col"> |
|---|
| | | <template v-if="clueData.cuploaded"> |
|---|
| | | <el-icon><Check /></el-icon> |
|---|
| | | <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"> |
|---|
| | | <ClueReportClue :clue="clueData"></ClueReportClue> |
|---|
| | | <ClueReportConclusion |
|---|
| | | :clueId="clueData.cid" |
|---|
| | | ></ClueReportConclusion> |
|---|
| | | <ClueReportQuestion |
|---|
| | | :clueId="clueData.cid" |
|---|
| | | ></ClueReportQuestion> |
|---|
| | | </el-scrollbar> |
|---|
| | | </div> |
|---|
| | | </CloseButton> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import ClueReportClue from './components/ClueReportClue.vue'; |
|---|
| | | import ClueReportConclusion from './components/ClueReportConclusion.vue'; |
|---|
| | | import ClueReportQuestion from './components/ClueReportQuestion.vue'; |
|---|
| | | import { useMessageBoxTip } from '@/composables/messageBox'; |
|---|
| | | import clueApi from "@/api/clue/clueApi"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | ClueReportClue, |
|---|
| | | ClueReportConclusion, |
|---|
| | | ClueReportQuestion |
|---|
| | | }, |
|---|
| | | props: { |
|---|
| | | clueData: { |
|---|
| | | type: Object, |
|---|
| | | default: () => { |
|---|
| | | return {}; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | show: Boolean |
|---|
| | | }, |
|---|
| | | emits: ['update:show'], |
|---|
| | | data() { |
|---|
| | | return {}; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | closeEdit() { |
|---|
| | | this.$emit('update:show', false); |
|---|
| | | }, |
|---|
| | | pushCheck() { |
|---|
| | | useMessageBoxTip({ |
|---|
| | | confirmMsg: '线索æ¨éåæ æ³åä¿®æ¹ç»è®ºä¸é®é¢ï¼ç¡®è®¤æ¨éï¼', |
|---|
| | | confirmTitle: '线索æ¨é', |
|---|
| | | onConfirm: () => { |
|---|
| | | return this.pushClue(); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | pushClue() { |
|---|
| | | return clueApi.pushClue(this.clueData.cid) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .push-btn { |
|---|
| | | position: absolute; |
|---|
| | | z-index: 1; |
|---|
| | | top: 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> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- æ¸
å详æ
--> |
|---|
| | | <DescriptionsList title="线索æ¸
å详æ
"> |
|---|
| | | <template #extra> |
|---|
| | | <el-button type="primary" text size="small" @click="openPDF" |
|---|
| | | >æ¥çPDF</el-button |
|---|
| | | > |
|---|
| | | </template> |
|---|
| | | <DescriptionsListItem label="线索ç¼å·" :content="clue.cid" /> |
|---|
| | | <DescriptionsListItem |
|---|
| | | label="线索å称" |
|---|
| | | :content="clue.cclueName" |
|---|
| | | /> |
|---|
| | | <DescriptionsListItem label="å建æ¶é´" :content="$tf(clue.ccreateTime)" /> |
|---|
| | | <DescriptionsListItem label="ä¸åæ¶é´" :content="$tf(clue.creleaseTime)" /> |
|---|
| | | <DescriptionsListItem |
|---|
| | | label="æ¥è¦ç«ç¹" |
|---|
| | | :content="clue.csiteName" |
|---|
| | | /> |
|---|
| | | <DescriptionsListItem |
|---|
| | | label="ç«ç¹ç±»å" |
|---|
| | | :content="clue.csiteType" |
|---|
| | | /> |
|---|
| | | <DescriptionsListItem |
|---|
| | | label="线索ç»è®º" |
|---|
| | | :content="clue.cconclusion" |
|---|
| | | /> |
|---|
| | | <!-- <DescriptionsListItem |
|---|
| | | label="ç«ç¹ç±»åé项" |
|---|
| | | :content="clue.cairCheckedOptions" |
|---|
| | | /> --> |
|---|
| | | </DescriptionsList> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import clueApi from '@/api/clue/clueApi'; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | clue: Object |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | openPDF() { |
|---|
| | | window.open( |
|---|
| | | clueApi.fetchRemoteClueFileUrl(this.clue.cid), |
|---|
| | | '_blank' |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="fy-h2">线索ç»è®º</div> |
|---|
| | | <DescriptionsList v-if="conclusion"> |
|---|
| | | <!-- <template #extra> |
|---|
| | | <el-button |
|---|
| | | v-if="conclusion" |
|---|
| | | type="warning" |
|---|
| | | size="small" |
|---|
| | | plain |
|---|
| | | icon="Upload" |
|---|
| | | @click="pushConclusion" |
|---|
| | | :disabled="pushing ? true : conclusion.ccUploaded" |
|---|
| | | >{{ pushing ? 'æ¨éä¸' : pushText }}</el-button |
|---|
| | | > |
|---|
| | | </template> --> |
|---|
| | | <DescriptionsListItem |
|---|
| | | label="é®é¢ç±»å" |
|---|
| | | :content="conclusion.ccQuestionType" |
|---|
| | | /> |
|---|
| | | <DescriptionsListItem |
|---|
| | | label="线索ç»è®º" |
|---|
| | | :content="conclusion.ccConclusion" |
|---|
| | | /> |
|---|
| | | <DescriptionsListItem |
|---|
| | | label="详ç»æè¿°" |
|---|
| | | :content="conclusion.ccDetails" |
|---|
| | | /> |
|---|
| | | </DescriptionsList> |
|---|
| | | <div v-else class="fy-dashed-border"> |
|---|
| | | <el-empty :image-size="50" description="线索ç»è®ºæªä¸ä¼ "> |
|---|
| | | <el-button type="primary" @click="openDialog" |
|---|
| | | >åé¦ä¸æ¥</el-button |
|---|
| | | > |
|---|
| | | </el-empty> |
|---|
| | | </div> |
|---|
| | | <el-dialog |
|---|
| | | v-model="dialogShow" |
|---|
| | | width="50%" |
|---|
| | | :close-on-click-modal="false" |
|---|
| | | :close-on-press-escape="false" |
|---|
| | | > |
|---|
| | | <template #header> |
|---|
| | | <span> åé¦ç»è®º</span> |
|---|
| | | </template> |
|---|
| | | <el-form |
|---|
| | | label-width="120px" |
|---|
| | | label-position="left" |
|---|
| | | :rules="rules" |
|---|
| | | :model="formObj" |
|---|
| | | ref="formRef" |
|---|
| | | > |
|---|
| | | <el-form-item label="é®é¢ç±»å" prop="ccQuestionType"> |
|---|
| | | <el-radio-group v-model="formObj.ccQuestionType"> |
|---|
| | | <el-radio label="æé®é¢">æé®é¢</el-radio> |
|---|
| | | <el-radio label="æ é®é¢">æ é®é¢</el-radio> |
|---|
| | | <el-radio label="已解å³">已解å³</el-radio> |
|---|
| | | </el-radio-group> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="线索ç»è®º" prop="ccConclusion"> |
|---|
| | | <el-input v-model="formObj.ccConclusion"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="详ç»æè¿°" prop="ccDetails"> |
|---|
| | | <el-input |
|---|
| | | v-model="formObj.ccDetails" |
|---|
| | | type="textarea" |
|---|
| | | placeholder="请è¾å
¥è¯¦æ
" |
|---|
| | | ></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | <template #footer> |
|---|
| | | <el-button @click="onCancel">åæ¶</el-button> |
|---|
| | | <el-button type="primary" :loading="loading" @click="onSubmit" |
|---|
| | | >ç¡®å®</el-button |
|---|
| | | > |
|---|
| | | </template> |
|---|
| | | </el-dialog> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | import { reactive, ref, watch, computed } from 'vue'; |
|---|
| | | import { useFormConfirm } from '@/composables/formConfirm'; |
|---|
| | | import clueConclusionApi from '@/api/clue/clueConclusionApi'; |
|---|
| | | |
|---|
| | | const props = defineProps({ |
|---|
| | | clueId: Number |
|---|
| | | }); |
|---|
| | | |
|---|
| | | watch( |
|---|
| | | () => props.clueId, |
|---|
| | | () => { |
|---|
| | | getConclusion(); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | |
|---|
| | | // æ¨éç¶æ |
|---|
| | | const pushing = ref(false); |
|---|
| | | |
|---|
| | | // 线索ç»è®º |
|---|
| | | const conclusion = ref({}); |
|---|
| | | |
|---|
| | | // ä¸æ¥å¼¹åºæ¡ |
|---|
| | | const dialogShow = ref(false); |
|---|
| | | const { formObj, formRef, onSubmit, onCancel, clear } = |
|---|
| | | useFormConfirm({ |
|---|
| | | submit: { |
|---|
| | | do: submit |
|---|
| | | }, |
|---|
| | | cancel: { |
|---|
| | | do: cancel |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | const loading = ref(false); |
|---|
| | | // 表åæ£æ¥è§å |
|---|
| | | const rules = reactive({ |
|---|
| | | ccQuestionType: [ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: 'é®é¢ç±»åä¸è½ä¸ºç©º', |
|---|
| | | trigger: 'change' |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | ccConclusion: [ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: '线索ç»è®ºä¸è½ä¸ºç©º', |
|---|
| | | trigger: 'blur' |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | ccDetails: [ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: '详ç»æè¿°ä¸è½ä¸ºç©º', |
|---|
| | | trigger: 'blur' |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // æå¼ä¸æ¥åé¦å¯¹è¯æ¡ |
|---|
| | | function openDialog() { |
|---|
| | | dialogShow.value = true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function submit() { |
|---|
| | | formObj.value.cid = props.clueId; |
|---|
| | | return uploadConclusion(); |
|---|
| | | } |
|---|
| | | function cancel() { |
|---|
| | | dialogShow.value = false; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * ä¸ä¼ 线索ç»è®º |
|---|
| | | */ |
|---|
| | | function uploadConclusion() { |
|---|
| | | loading.value = true; |
|---|
| | | return clueConclusionApi |
|---|
| | | .uploadConclusion(formObj.value) |
|---|
| | | .then(() => { |
|---|
| | | dialogShow.value = false; |
|---|
| | | clear(); |
|---|
| | | getConclusion(); |
|---|
| | | }) |
|---|
| | | .finally(() => { |
|---|
| | | loading.value = false; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·å线索ç»è®º |
|---|
| | | */ |
|---|
| | | function getConclusion() { |
|---|
| | | clueConclusionApi.getConclusion(props.clueId).then((res) => { |
|---|
| | | conclusion.value = res; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function pushConclusion() { |
|---|
| | | clueConclusionApi |
|---|
| | | .pushConclusion([conclusion.value.ccId]) |
|---|
| | | .then(() => { |
|---|
| | | pushing.value = true; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | const pushText = computed(() => { |
|---|
| | | return conclusion.value.ccUploaded ? 'å·²æ¨é' : 'æ¨éé®é¢'; |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | <style scoped> |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="fy-h2">线索é®é¢</div> |
|---|
| | | <template v-if="questionList.length > 0"> |
|---|
| | | <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 |
|---|
| | | > --> |
|---|
| | | <el-button |
|---|
| | | type="primary" |
|---|
| | | size="small" |
|---|
| | | @click="checkQuestion(item)" |
|---|
| | | >é®é¢è¯¦æ
</el-button |
|---|
| | | > |
|---|
| | | </el-button-group> |
|---|
| | | </template> |
|---|
| | | <DescriptionsListItem |
|---|
| | | label="é®é¢å称" |
|---|
| | | :content="item.cqName" |
|---|
| | | /> |
|---|
| | | <DescriptionsListItem |
|---|
| | | label="æå¨è¡é" |
|---|
| | | :content="item.cqStreet" |
|---|
| | | /> |
|---|
| | | <DescriptionsListItem |
|---|
| | | label="é®é¢æè¿°" |
|---|
| | | :content="item.cqDescription" |
|---|
| | | /> |
|---|
| | | </DescriptionsList> |
|---|
| | | <!-- <el-divider /> --> |
|---|
| | | </template> |
|---|
| | | <div class="btn-wrap"> |
|---|
| | | <el-button type="primary" @click="openDialog" |
|---|
| | | >æ·»å é®é¢</el-button |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | <div v-else class="fy-dashed-border"> |
|---|
| | | <el-empty :image-size="50" description="æ 线索é®é¢"> |
|---|
| | | <el-button type="primary" @click="openDialog" |
|---|
| | | >åé¦ä¸æ¥</el-button |
|---|
| | | > |
|---|
| | | </el-empty> |
|---|
| | | </div> |
|---|
| | | <QuestionDetail |
|---|
| | | :clueId="clueId" |
|---|
| | | v-model:show="dialogShow" |
|---|
| | | :question="selectedQuestion" |
|---|
| | | @on-submit="getQuestion" |
|---|
| | | ></QuestionDetail> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | import { ref, watch, computed } from 'vue'; |
|---|
| | | import clueQuestionApi from '@/api/clue/clueQuestionApi'; |
|---|
| | | import QuestionDetail from './QuestionDetail.vue'; |
|---|
| | | |
|---|
| | | const props = defineProps({ |
|---|
| | | clueId: Number |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 线索ç»è®º |
|---|
| | | const questionList = ref([]); |
|---|
| | | // ä¸æ¥å¼¹åºæ¡ |
|---|
| | | const dialogShow = ref(false); |
|---|
| | | const selectedQuestion = ref(); |
|---|
| | | |
|---|
| | | watch( |
|---|
| | | () => props.clueId, |
|---|
| | | () => { |
|---|
| | | getQuestion(); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | |
|---|
| | | // æå¼ä¸æ¥åé¦å¯¹è¯æ¡ |
|---|
| | | function openDialog() { |
|---|
| | | selectedQuestion.value = undefined; |
|---|
| | | dialogShow.value = true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ¥çé®é¢è¯¦æ
|
|---|
| | | function checkQuestion(item) { |
|---|
| | | selectedQuestion.value = item; |
|---|
| | | dialogShow.value = true; |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * è·å线索ç»è®º |
|---|
| | | */ |
|---|
| | | function getQuestion() { |
|---|
| | | clueQuestionApi.getQuestion(props.clueId).then((res) => { |
|---|
| | | questionList.value = res; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function pushQuestion(item) { |
|---|
| | | clueQuestionApi.pushQuestion([item.cqId]).then(() => { |
|---|
| | | item.pushing = true; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style scoped> |
|---|
| | | .btn-wrap { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | padding: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-dialog |
|---|
| | | v-model="dialogShow" |
|---|
| | | width="50%" |
|---|
| | | :close-on-click-modal="false" |
|---|
| | | :close-on-press-escape="false" |
|---|
| | | destroy-on-close |
|---|
| | | > |
|---|
| | | <template #header> |
|---|
| | | <span> æ·»å é®é¢</span> |
|---|
| | | </template> |
|---|
| | | <el-form |
|---|
| | | label-width="90px" |
|---|
| | | label-position="left" |
|---|
| | | :rules="rules" |
|---|
| | | :model="formObj" |
|---|
| | | ref="formRef" |
|---|
| | | > |
|---|
| | | <el-form-item label="é®é¢å称" prop="cqName"> |
|---|
| | | <el-input |
|---|
| | | v-model="formObj.cqName" |
|---|
| | | placeholder="请è¾å
¥é®é¢å称" |
|---|
| | | ></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="é®é¢æè¿°" prop="cqDescription"> |
|---|
| | | <el-input |
|---|
| | | v-model="formObj.cqDescription" |
|---|
| | | type="textarea" |
|---|
| | | placeholder="请è¾å
¥é®é¢æè¿°" |
|---|
| | | ></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="æå¨è¡é" prop="cqStreet"> |
|---|
| | | <el-select v-model="formObj.cqStreet" placeholder="æå¨è¡é"> |
|---|
| | | <el-option |
|---|
| | | v-for="s in streets" |
|---|
| | | :key="s.value" |
|---|
| | | :label="s.label" |
|---|
| | | :value="s.label" |
|---|
| | | /> |
|---|
| | | </el-select> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="详ç»å°å" prop="cqAddress"> |
|---|
| | | <el-input |
|---|
| | | v-model="formObj.cqAddress" |
|---|
| | | placeholder="请è¾å
¥å°åæè
éè¿âåæ æ¾åâèªå¨è·å¾" |
|---|
| | | ></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="åæ " prop="coordinate"> |
|---|
| | | <el-input |
|---|
| | | style="width: 300px; margin-right: 8px" |
|---|
| | | v-model="formObj.coordinate" |
|---|
| | | placeholder="ç»çº¬åº¦åæ ï¼æ ¼å¼ä¸º121.123452,31.231235" |
|---|
| | | ></el-input> |
|---|
| | | <el-button plain type="primary" @click="openMapDialog" |
|---|
| | | >åæ æ¾å</el-button |
|---|
| | | > |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="é®é¢å¾ç" prop="files"> |
|---|
| | | <el-upload |
|---|
| | | ref="uploadRef" |
|---|
| | | :file-list="fileList" |
|---|
| | | action="" |
|---|
| | | :auto-upload="false" |
|---|
| | | list-type="picture-card" |
|---|
| | | name="images" |
|---|
| | | accept="image/png, image/jpeg" |
|---|
| | | :limit="3" |
|---|
| | | multiple |
|---|
| | | :on-preview="handleFilePreview" |
|---|
| | | :on-remove="handleFileRemove" |
|---|
| | | :on-change="handleFileChange" |
|---|
| | | > |
|---|
| | | <el-icon><Plus /></el-icon> |
|---|
| | | <template #tip> |
|---|
| | | <div class="el-upload__tip"> |
|---|
| | | 请éæ©å°äº500kbçjpg/pngå¾çï¼æå¤3å¼ |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | </el-upload> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | <template #footer> |
|---|
| | | <el-button @click="onCancel">åæ¶</el-button> |
|---|
| | | <el-button |
|---|
| | | :disabled="!edit" |
|---|
| | | type="primary" |
|---|
| | | :loading="loading" |
|---|
| | | @click="onSubmit" |
|---|
| | | >ç¡®å®</el-button |
|---|
| | | > |
|---|
| | | </template> |
|---|
| | | </el-dialog> |
|---|
| | | <el-image-viewer |
|---|
| | | v-if="previewShow" |
|---|
| | | :url-list="urlList" |
|---|
| | | :initial-index="initialIndex" |
|---|
| | | :infinite="false" |
|---|
| | | @close="closePreview" |
|---|
| | | ></el-image-viewer> |
|---|
| | | <MapSearch |
|---|
| | | v-model:show="mapDialogShow" |
|---|
| | | @on-submit="selectAddress" |
|---|
| | | ></MapSearch> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | import { reactive, ref, watch, computed } from 'vue'; |
|---|
| | | import { useFormConfirm } from '@/composables/formConfirm'; |
|---|
| | | import { streets } from '@/constant/street'; |
|---|
| | | import clueQuestionApi from '@/api/clue/clueQuestionApi'; |
|---|
| | | import MapSearch from '@/components/map/MapSearch.vue'; |
|---|
| | | |
|---|
| | | const props = defineProps({ |
|---|
| | | clueId: Number, |
|---|
| | | show: Boolean, |
|---|
| | | question: Object |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const emit = defineEmits(['update:show', 'onSubmit', 'onClose']); |
|---|
| | | |
|---|
| | | // ä¸æ¥å¼¹åºæ¡ |
|---|
| | | const dialogShow = ref(false); |
|---|
| | | const mapDialogShow = ref(false); |
|---|
| | | const uploadRef = ref(); |
|---|
| | | const fileList = ref([]); |
|---|
| | | |
|---|
| | | const previewShow = ref(false); |
|---|
| | | const initialIndex = ref(0); |
|---|
| | | const urlList = computed(() => |
|---|
| | | fileList.value.map((value) => { |
|---|
| | | return value.url; |
|---|
| | | }) |
|---|
| | | ); |
|---|
| | | |
|---|
| | | function handleFilePreview(file) { |
|---|
| | | initialIndex.value = fileList.value.indexOf(file); |
|---|
| | | previewShow.value = true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function closePreview() { |
|---|
| | | previewShow.value = false; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function handleFileRemove(file, fileList) { |
|---|
| | | formObj.value.files = fileList; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function handleFileChange(file, fileList) { |
|---|
| | | formObj.value.files = fileList; |
|---|
| | | } |
|---|
| | | |
|---|
| | | const { formObj, formRef, edit, onSubmit, onCancel, clear } = |
|---|
| | | useFormConfirm({ |
|---|
| | | submit: { |
|---|
| | | do: submit |
|---|
| | | }, |
|---|
| | | cancel: { |
|---|
| | | do: cancel |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | const loading = ref(false); |
|---|
| | | // 表åæ£æ¥è§å |
|---|
| | | const rules = reactive({ |
|---|
| | | cqName: [ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: 'é®é¢å称ä¸è½ä¸ºç©º', |
|---|
| | | trigger: 'blur' |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | cqDescription: [ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: 'é®é¢æè¿°ä¸è½ä¸ºç©º', |
|---|
| | | trigger: 'blur' |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | cqStreet: [ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: 'æå¨è¡éä¸è½ä¸ºç©º', |
|---|
| | | trigger: 'change' |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | cqAddress: [ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: '详ç»å°åä¸è½ä¸ºç©º', |
|---|
| | | trigger: 'blur' |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | coordinate: [ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: 'åæ ä¸è½ä¸ºç©º', |
|---|
| | | trigger: 'blur' |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | // cqLongitude: [ |
|---|
| | | // { |
|---|
| | | // required: true, |
|---|
| | | // message: 'ç»åº¦ä¸è½ä¸ºç©º', |
|---|
| | | // trigger: 'blur' |
|---|
| | | // } |
|---|
| | | // ], |
|---|
| | | // cqLatitude: [ |
|---|
| | | // { |
|---|
| | | // required: true, |
|---|
| | | // message: '维度ä¸è½ä¸ºç©º', |
|---|
| | | // trigger: 'blur' |
|---|
| | | // } |
|---|
| | | // ], |
|---|
| | | files: [ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: 'å¾çä¸è½ä¸ºç©º', |
|---|
| | | trigger: 'change' |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | |
|---|
| | | function submit() { |
|---|
| | | const coor = formObj.value.coordinate.split(','); |
|---|
| | | const q = { |
|---|
| | | cId: parseInt(props.clueId), |
|---|
| | | cqName: formObj.value.cqName, |
|---|
| | | cqDescription: formObj.value.cqDescription, |
|---|
| | | cqStreet: formObj.value.cqStreet, |
|---|
| | | cqAddress: formObj.value.cqAddress, |
|---|
| | | cqLongitude: parseFloat(coor[0]), |
|---|
| | | cqLatitude: parseFloat(coor[1]) |
|---|
| | | }; |
|---|
| | | const files = []; |
|---|
| | | formObj.value.files.forEach((f) => { |
|---|
| | | files.push(f.raw); |
|---|
| | | }); |
|---|
| | | return uploadQuestion(q, files); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function cancel() { |
|---|
| | | // clear(); |
|---|
| | | dialogShow.value = false; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function openMapDialog() { |
|---|
| | | mapDialogShow.value = true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function selectAddress(result) { |
|---|
| | | formObj.value.cqAddress = result.address; |
|---|
| | | formObj.value.coordinate = result.gpsLon + ',' + result.gpsLat; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * ä¸ä¼ 线索ç»è®º |
|---|
| | | */ |
|---|
| | | function uploadQuestion(question, files) { |
|---|
| | | loading.value = true; |
|---|
| | | |
|---|
| | | return clueQuestionApi |
|---|
| | | .uploadQuestion(question, files) |
|---|
| | | .then(() => { |
|---|
| | | dialogShow.value = false; |
|---|
| | | clear(); |
|---|
| | | uploadRef.value.clearFiles(); |
|---|
| | | emit('onSubmit'); |
|---|
| | | }) |
|---|
| | | .finally(() => { |
|---|
| | | loading.value = false; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function parseFormObj(question) { |
|---|
| | | question.coordinate = |
|---|
| | | question.cqLongitude + ',' + question.cqLatitude; |
|---|
| | | fileList.value = []; |
|---|
| | | question.cqFilePath.forEach((f, index) => { |
|---|
| | | fileList.value.push({ |
|---|
| | | name: `${index}`, |
|---|
| | | url: f |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | return { ...question }; |
|---|
| | | } |
|---|
| | | |
|---|
| | | watch( |
|---|
| | | () => [props.show, props.question], |
|---|
| | | (val) => { |
|---|
| | | dialogShow.value = val[0]; |
|---|
| | | if (val[0]) { |
|---|
| | | fileList.value = []; |
|---|
| | | if (val[1]) { |
|---|
| | | formObj.value = parseFormObj(val[1]); |
|---|
| | | } else { |
|---|
| | | formObj.value = {}; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | // watch( |
|---|
| | | // () => props.question, |
|---|
| | | // (val) => { |
|---|
| | | // fileList.value = []; |
|---|
| | | // if (val) { |
|---|
| | | // formObj.value = parseFormObj(val); |
|---|
| | | // } else { |
|---|
| | | // formObj.value = {}; |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // ); |
|---|
| | | watch(dialogShow, (val) => { |
|---|
| | | emit('update:show', val); |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <el-row class="container"> |
|---|
| | | <el-col :span="4" class="grid-content bg-content"> |
|---|
| | | <div class="title">ç½æ ¼å管ç</div> |
|---|
| | | <OptionGridRecord v-model:value="gridRecord"></OptionGridRecord> |
|---|
| | | <ListGridDetail></ListGridDetail> |
|---|
| | | <GridCreate |
|---|
| | | :is-active="dialogVisible" |
|---|
| | | :is-create="true" |
|---|
| | | ></GridCreate> |
|---|
| | | <el-row class="fy-body fy-overlay-container" gutter="0"> |
|---|
| | | <el-col :span="6"> |
|---|
| | | <div class="fy-card fy-main"> |
|---|
| | | <div class="fy-h1">ç½æ ¼å管ç</div> |
|---|
| | | <div class="fy-flex-row"> |
|---|
| | | <span>æ¹æ¡</span> |
|---|
| | | <OptionGridRecord |
|---|
| | | :refresh="newScheme" |
|---|
| | | v-model:value="gridSchemeId" |
|---|
| | | ></OptionGridRecord> |
|---|
| | | <el-button |
|---|
| | | :disabled="!gridSchemeId" |
|---|
| | | icon="Search" |
|---|
| | | type="primary" |
|---|
| | | @click="getSchemeList" |
|---|
| | | >æ¥è¯¢</el-button |
|---|
| | | > |
|---|
| | | <SchemeCreate @created="newScheme = !newScheme"></SchemeCreate> |
|---|
| | | </div> |
|---|
| | | <ListGridDetail></ListGridDetail> |
|---|
| | | <GridCreate |
|---|
| | | :schemeId="gridSchemeId" |
|---|
| | | :is-active="dialogVisible" |
|---|
| | | ></GridCreate> |
|---|
| | | </div> |
|---|
| | | </el-col> |
|---|
| | | <el-col v-if="gridStore.selectedGrid" :span="4" class="grid-content bg-content-1"> |
|---|
| | | <GridEditing></GridEditing> |
|---|
| | | <el-col v-if="gridStore.selectedGrid" :span="4" :offset="14"> |
|---|
| | | <div class="fy-column-reverse"> |
|---|
| | | <!-- <div class="fy-card"> --> |
|---|
| | | <GridEditing></GridEditing> |
|---|
| | | <!-- </div> --> |
|---|
| | | </div> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </template> |
|---|
| | |
|---|
| | | import OptionGridRecord from './components/OptionGridRecord.vue'; |
|---|
| | | import GridCreate from './components/GridCreate.vue'; |
|---|
| | | import GridEditing from './components/GridEditing.vue'; |
|---|
| | | import SchemeCreate from './components/SchemeCreate.vue'; |
|---|
| | | |
|---|
| | | import { ref, watch } from 'vue'; |
|---|
| | | import baseMapUtil from '@/components/map/baseMapUtil'; |
|---|
| | | import { onMapMounted } from '@/components/map/baseMap'; |
|---|
| | | import gridRecordApi from '@/api/gridRecordApi'; |
|---|
| | | import gridInfoApi from '@/api/grid/gridInfoApi'; |
|---|
| | | import { useGridStore } from '@/stores/grid'; |
|---|
| | | |
|---|
| | | const gridStore = useGridStore(); |
|---|
| | | |
|---|
| | | // ç½æ ¼è§åæ¹æ¡id |
|---|
| | | const gridRecord = ref({ value: '' }); |
|---|
| | | // æ¹æ¡å
·ä½ç½æ ¼ä¿¡æ¯éå |
|---|
| | | const gridSchemeId = ref(); |
|---|
| | | |
|---|
| | | const getList = function () { |
|---|
| | | const newScheme = ref(false) |
|---|
| | | |
|---|
| | | // è·åæ¹æ¡è®°å½ |
|---|
| | | function getSchemeList() { |
|---|
| | | onMapMounted(() => { |
|---|
| | | gridRecordApi |
|---|
| | | .getGridRecordDetail(gridRecord.value) |
|---|
| | | .then((res) => { |
|---|
| | | baseMapUtil.clearMap(); |
|---|
| | | gridStore.setGridList(res); |
|---|
| | | }); |
|---|
| | | gridInfoApi.fetchGridList(gridSchemeId.value).then((res) => { |
|---|
| | | baseMapUtil.clearMap(); |
|---|
| | | gridStore.setGridList(res); |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | |
|---|
| | | watch(gridRecord, getList); |
|---|
| | | // watch(gridSchemeId, getList); |
|---|
| | | </script> |
|---|
| | | <style scoped> |
|---|
| | | .container { |
|---|
| | | pointer-events: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title { |
|---|
| | | font-size: var(--el-font-size-large); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .grid-content { |
|---|
| | | min-width: calc(var(--screen-min-width) / 6); |
|---|
| | | /* min-width: 180px; */ |
|---|
| | | border-radius: 4px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 16px; |
|---|
| | | padding: 8px 8px; |
|---|
| | | pointer-events: auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .bg-content { |
|---|
| | | height: 90vh; |
|---|
| | | background: white; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .bg-content-1 { |
|---|
| | | background: antiquewhite; |
|---|
| | | height: 40vh; |
|---|
| | | margin-left: 8px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | <style scoped></style> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | <el-button type="primary" @click="createGrid">æ°å»ºç½æ ¼</el-button> |
|---|
| | | <el-button |
|---|
| | | :disabled="!gridStore.hasScheme" |
|---|
| | | type="primary" |
|---|
| | | @click="createGrid" |
|---|
| | | >æ°å»ºç½æ ¼</el-button |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | <el-dialog v-model="dialogVisible" title="Tips" width="30%"> |
|---|
| | | <el-dialog |
|---|
| | | v-model="dialogVisible" |
|---|
| | | title="æ°å»ºç½æ ¼" |
|---|
| | | width="600px" |
|---|
| | | :close-on-click-modal="false" |
|---|
| | | :close-on-press-escape="false" |
|---|
| | | > |
|---|
| | | <el-form |
|---|
| | | :inline="false" |
|---|
| | | :model="formObj" |
|---|
| | |
|---|
| | | import { useGridStore } from '@/stores/grid'; |
|---|
| | | import mapGrid from '@/components/map/mapGrid'; |
|---|
| | | import baseMapUtil from '@/components/map/baseMapUtil'; |
|---|
| | | import gridInfoApi from '@/api/grid/gridInfoApi'; |
|---|
| | | import { getGridRecord } from '@/model/gridRecord'; |
|---|
| | | |
|---|
| | | const gridStore = useGridStore(); |
|---|
| | | |
|---|
| | |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const props = defineProps({ |
|---|
| | | //åºæ¬ä¿¡æ¯ |
|---|
| | | formInfo: Object, |
|---|
| | | //æ¯å建æè
æ´æ° |
|---|
| | | isCreate: Boolean, |
|---|
| | | //ç½æ ¼æ¹æ¡id |
|---|
| | | schemeId: String, |
|---|
| | | // |
|---|
| | | isActive: Boolean |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const emit = defineEmits(['onSubmit', 'onCancel']); |
|---|
| | | |
|---|
| | | const { formObj, formRef, edit, active, onSubmit, onCancel } = |
|---|
| | | useFormConfirm({ |
|---|
| | |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // å建 |
|---|
| | | async function create() { |
|---|
| | | // loading.value = true; |
|---|
| | | // return sceneApi |
|---|
| | | // .createScene(formObj.value) |
|---|
| | | // .then((res) => { |
|---|
| | | // console.log(res); |
|---|
| | | // }) |
|---|
| | | // .finally(() => { |
|---|
| | | // loading.value = false; |
|---|
| | | // }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ´æ° |
|---|
| | | async function update() { |
|---|
| | | // loading.value = true; |
|---|
| | | // return sceneApi |
|---|
| | | // .updateScene(formObj.value) |
|---|
| | | // .then((res) => { |
|---|
| | | // console.log(res); |
|---|
| | | // }) |
|---|
| | | // .finally(() => { |
|---|
| | | // loading.value = false; |
|---|
| | | // }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function submit() { |
|---|
| | | const newRecord = { |
|---|
| | | gId: '1', |
|---|
| | | gType: 0, |
|---|
| | | gName: formObj.value.gName, |
|---|
| | | gSide: tempOverlays.getPath(), |
|---|
| | | overlays: tempOverlays |
|---|
| | | const gridInfo = { |
|---|
| | | gsId: props.schemeId, |
|---|
| | | giName: formObj.value.gName, |
|---|
| | | giSide: tempOverlays.getPath().join(';') |
|---|
| | | }; |
|---|
| | | |
|---|
| | | gridStore.addGrid(newRecord); |
|---|
| | | emit('onSubmit', newRecord); |
|---|
| | | dialogVisible.value = false; |
|---|
| | | loading.value = true; |
|---|
| | | return gridInfoApi |
|---|
| | | .createGrid(gridInfo) |
|---|
| | | .then((res) => { |
|---|
| | | const newRecord = { |
|---|
| | | ...res, |
|---|
| | | overlays: tempOverlays |
|---|
| | | }; |
|---|
| | | |
|---|
| | | return props.isCreate ? create() : update(); |
|---|
| | | gridStore.addGrid(getGridRecord(newRecord)); |
|---|
| | | dialogVisible.value = false; |
|---|
| | | }) |
|---|
| | | // .catch((err) => { |
|---|
| | | // return err; |
|---|
| | | // }) |
|---|
| | | .finally(() => (loading.value = false)); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function cancel() { |
|---|
| | | emit('onCancel'); |
|---|
| | | baseMapUtil.removeView(tempOverlays); |
|---|
| | | dialogVisible.value = false; |
|---|
| | | } |
|---|
| | | |
|---|
| | | watch( |
|---|
| | | () => props.formInfo, |
|---|
| | | (nValue) => { |
|---|
| | | formObj.value = nValue; |
|---|
| | | }, |
|---|
| | | { immediate: false } |
|---|
| | | ); |
|---|
| | | // watch( |
|---|
| | | // () => props.formInfo, |
|---|
| | | // (nValue) => { |
|---|
| | | // formObj.value = nValue; |
|---|
| | | // }, |
|---|
| | | // { immediate: false } |
|---|
| | | // ); |
|---|
| | | |
|---|
| | | watch(dialogVisible, (nValue) => { |
|---|
| | | active.value = nValue; |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div>å½åæä½ç½æ ¼: {{ selectedGrid.gName }}</div> |
|---|
| | | <div>ç½æ ¼ç¼å·ï¼{{ selectedGrid.gId }}</div> |
|---|
| | | <div>ç½æ ¼é¡¶ç¹ï¼</div> |
|---|
| | | <div v-for="(item, index) in selectedGrid.gSide" :key="index"> |
|---|
| | | {{ item }} |
|---|
| | | </div> |
|---|
| | | <div class="btn-group"> |
|---|
| | | <el-button @click="startOrCompleteEdit">{{ |
|---|
| | | isEdit ? 'ä¿åç¼è¾' : 'å¼å§ç¼è¾' |
|---|
| | | }}</el-button> |
|---|
| | | <el-button :disabled="!isEdit" @click="cancelEdit" |
|---|
| | | >åæ¶ç¼è¾</el-button |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | <CloseButton @close="closeEdit"> |
|---|
| | | <div class="fy-card"> |
|---|
| | | <div class="fy-h2">æ£å¨ç¼è¾ç½æ ¼</div> |
|---|
| | | <div class="fy-main"> |
|---|
| | | <el-form |
|---|
| | | label-position="left" |
|---|
| | | :rules="rules" |
|---|
| | | :model="selectedGrid" |
|---|
| | | ref="formRef" |
|---|
| | | > |
|---|
| | | <!-- <el-form-item label="ç¼å·" prop="id"> |
|---|
| | | <div>{{ selectedGrid.id }}</div> |
|---|
| | | </el-form-item> --> |
|---|
| | | <el-form-item label="å称" prop="name"> |
|---|
| | | <el-input |
|---|
| | | v-model="selectedGrid.name" |
|---|
| | | placeholder="请è¾å
¥ç½æ ¼å称" |
|---|
| | | clearable |
|---|
| | | disabled |
|---|
| | | ></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="顶ç¹" prop="sides"> |
|---|
| | | <el-scrollbar height="100px" class="fy-main-border"> |
|---|
| | | <div |
|---|
| | | class="list-wrapper" |
|---|
| | | v-for="(item, index) in selectedGrid.sides" |
|---|
| | | :key="index" |
|---|
| | | > |
|---|
| | | {{ `${index + 1}. ${item}` }} |
|---|
| | | </div> |
|---|
| | | </el-scrollbar> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | <div class="btn-group"> |
|---|
| | | <el-button |
|---|
| | | @click="startOrCompleteEdit" |
|---|
| | | :loading="loading" |
|---|
| | | >{{ isEdit ? 'ä¿åç¼è¾' : 'å¼å§ç¼è¾' }}</el-button |
|---|
| | | > |
|---|
| | | <el-button |
|---|
| | | type="danger" |
|---|
| | | :disabled="!isEdit" |
|---|
| | | @click="cancelEdit" |
|---|
| | | >åæ¶ç¼è¾</el-button |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </CloseButton> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | editing: false |
|---|
| | | editing: false, |
|---|
| | | loading: false |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | |
|---|
| | | 'openGridEdit', |
|---|
| | | 'closeGridEdit', |
|---|
| | | 'saveSelectedGrid', |
|---|
| | | 'quitSelectedGrid' |
|---|
| | | 'quitSelectedGrid', |
|---|
| | | 'clearSelect' |
|---|
| | | ]), |
|---|
| | | // å¼å§æå®æä¿åç¼è¾ç½æ ¼å¤è¾¹å½¢ |
|---|
| | | startOrCompleteEdit() { |
|---|
| | | if (this.isEdit) { |
|---|
| | | this.saveSelectedGrid(); |
|---|
| | | this.closeGridEdit(); |
|---|
| | | this.loading = true; |
|---|
| | | this.saveSelectedGrid() |
|---|
| | | .then(() => { |
|---|
| | | this.closeGridEdit(); |
|---|
| | | }) |
|---|
| | | .finally(() => (this.loading = false)); |
|---|
| | | } else { |
|---|
| | | this.openGridEdit(); |
|---|
| | | } |
|---|
| | |
|---|
| | | cancelEdit() { |
|---|
| | | this.quitSelectedGrid(); |
|---|
| | | this.closeGridEdit(); |
|---|
| | | }, |
|---|
| | | // å
³éç¼è¾çé¢ |
|---|
| | | closeEdit() { |
|---|
| | | this.cancelEdit(); |
|---|
| | | this.clearSelect(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style scoped> |
|---|
| | | .wrapper { |
|---|
| | | /* position: relative; |
|---|
| | | background: antiquewhite; |
|---|
| | | padding-right: 10px; */ |
|---|
| | | } |
|---|
| | | .btn-group { |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | .list-wrapper { |
|---|
| | | width: 100%; |
|---|
| | | /* background-color: var(--el-bg-color-page); */ |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | v-if="!item.delete" |
|---|
| | | > |
|---|
| | | <div style="display: flex; gap: 8px"> |
|---|
| | | <div>{{ item.gName }}</div> |
|---|
| | | <div>{{ item.gSide.length + '/4' }}</div> |
|---|
| | | <div>{{ item.name }}</div> |
|---|
| | | <div>{{ item.sides.length + '/4' }}</div> |
|---|
| | | </div> |
|---|
| | | <Transition> |
|---|
| | | <el-button |
|---|
| | |
|---|
| | | .list-container { |
|---|
| | | /* background-color: antiquewhite; */ |
|---|
| | | padding: initial; |
|---|
| | | height: 50vh; |
|---|
| | | height: 60vh; |
|---|
| | | overflow: auto; |
|---|
| | | overflow-x: hidden; |
|---|
| | | border: var(--el-border); |
|---|
| | |
|---|
| | | <el-select |
|---|
| | | v-model="selectedOptions" |
|---|
| | | placeholder="ç½æ ¼åè®°å½" |
|---|
| | | style="max-width: 150px" |
|---|
| | | style="width: 150px" |
|---|
| | | > |
|---|
| | | <el-option |
|---|
| | | v-for="s in options" |
|---|
| | | :key="s.value" |
|---|
| | | :label="s.label" |
|---|
| | | :value="s" |
|---|
| | | :key="s.gsId" |
|---|
| | | :label="s.gsName" |
|---|
| | | :value="s.gsId" |
|---|
| | | /> |
|---|
| | | </el-select> |
|---|
| | | </template> |
|---|
| | |
|---|
| | | <script> |
|---|
| | | // ç½æ ¼åæ¹æ¡è®°å½é项 |
|---|
| | | |
|---|
| | | import gridRecordApi from '@/api/gridRecordApi'; |
|---|
| | | import gridSchemeApi from '@/api/grid/gridSchemeApi'; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ¯å¦å¨é¦é项å¤æ·»å âå
¨é¨âé项 |
|---|
| | | // allOption: { |
|---|
| | | // type: Boolean, |
|---|
| | | // default: true, |
|---|
| | | // }, |
|---|
| | | // å·æ°ä¸æå表 |
|---|
| | | refresh: Boolean, |
|---|
| | | // è¿åç»æ |
|---|
| | | value: Object, |
|---|
| | | value: Number |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | selectedOptions: { |
|---|
| | | handler(val) { |
|---|
| | | this.$emit('update:value', val); |
|---|
| | | }, |
|---|
| | | deep: true, |
|---|
| | | // selectedOptions: { |
|---|
| | | // handler(val) { |
|---|
| | | // this.$emit('update:value', val); |
|---|
| | | // }, |
|---|
| | | // deep: true |
|---|
| | | // }, |
|---|
| | | selectedOptions(nVal) { |
|---|
| | | this.$emit('update:value', nVal); |
|---|
| | | }, |
|---|
| | | refresh() { |
|---|
| | | this.getOptions(true); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | getOptions() { |
|---|
| | | gridRecordApi.getGridRecords().then((res) => { |
|---|
| | | this.options = res; |
|---|
| | | this.selectedOptions = res[0]; |
|---|
| | | getOptions(newScheme) { |
|---|
| | | gridSchemeApi.fetchAllSchemes().then((res) => { |
|---|
| | | if (res.length > 0) { |
|---|
| | | this.options = res; |
|---|
| | | this.selectedOptions = newScheme |
|---|
| | | ? res[res.length - 1].gsId |
|---|
| | | : res[0].gsId; |
|---|
| | | // this.selectedOptions = res[0].gsId; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-button icon="Plus" type="success" plain @click="openDialog" |
|---|
| | | >æ°å»ºæ¹æ¡</el-button |
|---|
| | | > |
|---|
| | | <el-dialog |
|---|
| | | v-model="dialogShow" |
|---|
| | | width="600px" |
|---|
| | | :close-on-click-modal="false" |
|---|
| | | :close-on-press-escape="false" |
|---|
| | | destroy-on-close |
|---|
| | | > |
|---|
| | | <template #header> |
|---|
| | | <span> æ°å»ºæ¹æ¡</span> |
|---|
| | | </template> |
|---|
| | | <el-form |
|---|
| | | label-width="90px" |
|---|
| | | label-position="left" |
|---|
| | | :rules="rules" |
|---|
| | | :model="formObj" |
|---|
| | | ref="formRef" |
|---|
| | | > |
|---|
| | | <el-form-item label="æ¹æ¡å称" prop="gsName"> |
|---|
| | | <el-input |
|---|
| | | style="width: 400px" |
|---|
| | | v-model="formObj.gsName" |
|---|
| | | placeholder="请è¾å
¥æ¹æ¡å称" |
|---|
| | | ></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="æ¹æ¡æè¿°" prop="gsDescription"> |
|---|
| | | <el-input |
|---|
| | | v-model="formObj.gsDescription" |
|---|
| | | type="textarea" |
|---|
| | | placeholder="请è¾å
¥æ¹æ¡æè¿°" |
|---|
| | | ></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="å建人" prop="gsCreatorName"> |
|---|
| | | <el-input |
|---|
| | | style="width: 200px" |
|---|
| | | v-model="formObj.gsCreatorName" |
|---|
| | | placeholder="请è¾å
¥å建人" |
|---|
| | | ></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | <template #footer> |
|---|
| | | <el-button @click="onCancel">åæ¶</el-button> |
|---|
| | | <el-button |
|---|
| | | :disabled="!edit" |
|---|
| | | type="primary" |
|---|
| | | :loading="loading" |
|---|
| | | @click="onSubmit" |
|---|
| | | >ç¡®å®</el-button |
|---|
| | | > |
|---|
| | | </template> |
|---|
| | | </el-dialog> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | import { reactive, ref, watch } from 'vue'; |
|---|
| | | import { useFormConfirm } from '@/composables/formConfirm'; |
|---|
| | | import gridSchemeApi from '@/api/grid/gridSchemeApi'; |
|---|
| | | |
|---|
| | | const emit = defineEmits(['created']); |
|---|
| | | |
|---|
| | | const rules = reactive({ |
|---|
| | | gsName: [ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: 'æ¹æ¡å称ä¸è½ä¸ºç©º', |
|---|
| | | trigger: 'blur' |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const { formObj, formRef, edit, onSubmit, onCancel } = useFormConfirm( |
|---|
| | | { |
|---|
| | | submit: { |
|---|
| | | do: submit |
|---|
| | | }, |
|---|
| | | cancel: { |
|---|
| | | do: cancel |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | |
|---|
| | | const dialogShow = ref(false); |
|---|
| | | function openDialog() { |
|---|
| | | dialogShow.value = true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function submit() { |
|---|
| | | return gridSchemeApi.createScheme(formObj.value).then(() => { |
|---|
| | | // clear() |
|---|
| | | emit('created') |
|---|
| | | dialogShow.value = false; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function cancel() { |
|---|
| | | dialogShow.value = false; |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | |
|---|
| | | alias: { |
|---|
| | | '@': fileURLToPath(new URL('./src', import.meta.url)) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | server: { |
|---|
| | | host: '0.0.0.0' |
|---|
| | | } |
|---|
| | | }); |
|---|
