diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/system/user.js b/src/api/system/user.js index 02a38d0..3b67ef5 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -93,3 +93,12 @@ } }) } + +// 在线用户查询 +export function getUserOnLine(params) { + return request({ + url: '/userDevice/userDeviceOnLine', + method: 'get', + params + }) +} diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/system/user.js b/src/api/system/user.js index 02a38d0..3b67ef5 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -93,3 +93,12 @@ } }) } + +// 在线用户查询 +export function getUserOnLine(params) { + return request({ + url: '/userDevice/userDeviceOnLine', + method: 'get', + params + }) +} diff --git a/src/assets/case/offline.png b/src/assets/case/offline.png new file mode 100644 index 0000000..d0a290f --- /dev/null +++ b/src/assets/case/offline.png Binary files differ diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/system/user.js b/src/api/system/user.js index 02a38d0..3b67ef5 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -93,3 +93,12 @@ } }) } + +// 在线用户查询 +export function getUserOnLine(params) { + return request({ + url: '/userDevice/userDeviceOnLine', + method: 'get', + params + }) +} diff --git a/src/assets/case/offline.png b/src/assets/case/offline.png new file mode 100644 index 0000000..d0a290f --- /dev/null +++ b/src/assets/case/offline.png Binary files differ diff --git a/src/assets/case/online.png b/src/assets/case/online.png new file mode 100644 index 0000000..767bcc5 --- /dev/null +++ b/src/assets/case/online.png Binary files differ diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/system/user.js b/src/api/system/user.js index 02a38d0..3b67ef5 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -93,3 +93,12 @@ } }) } + +// 在线用户查询 +export function getUserOnLine(params) { + return request({ + url: '/userDevice/userDeviceOnLine', + method: 'get', + params + }) +} diff --git a/src/assets/case/offline.png b/src/assets/case/offline.png new file mode 100644 index 0000000..d0a290f --- /dev/null +++ b/src/assets/case/offline.png Binary files differ diff --git a/src/assets/case/online.png b/src/assets/case/online.png new file mode 100644 index 0000000..767bcc5 --- /dev/null +++ b/src/assets/case/online.png Binary files differ diff --git a/src/assets/case/status_overTime.png b/src/assets/case/status_overTime.png new file mode 100644 index 0000000..9b3ecb8 --- /dev/null +++ b/src/assets/case/status_overTime.png Binary files differ diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/system/user.js b/src/api/system/user.js index 02a38d0..3b67ef5 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -93,3 +93,12 @@ } }) } + +// 在线用户查询 +export function getUserOnLine(params) { + return request({ + url: '/userDevice/userDeviceOnLine', + method: 'get', + params + }) +} diff --git a/src/assets/case/offline.png b/src/assets/case/offline.png new file mode 100644 index 0000000..d0a290f --- /dev/null +++ b/src/assets/case/offline.png Binary files differ diff --git a/src/assets/case/online.png b/src/assets/case/online.png new file mode 100644 index 0000000..767bcc5 --- /dev/null +++ b/src/assets/case/online.png Binary files differ diff --git a/src/assets/case/status_overTime.png b/src/assets/case/status_overTime.png new file mode 100644 index 0000000..9b3ecb8 --- /dev/null +++ b/src/assets/case/status_overTime.png Binary files differ diff --git a/src/assets/case/status_toCheck.png b/src/assets/case/status_toCheck.png new file mode 100644 index 0000000..19a8d89 --- /dev/null +++ b/src/assets/case/status_toCheck.png Binary files differ diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/system/user.js b/src/api/system/user.js index 02a38d0..3b67ef5 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -93,3 +93,12 @@ } }) } + +// 在线用户查询 +export function getUserOnLine(params) { + return request({ + url: '/userDevice/userDeviceOnLine', + method: 'get', + params + }) +} diff --git a/src/assets/case/offline.png b/src/assets/case/offline.png new file mode 100644 index 0000000..d0a290f --- /dev/null +++ b/src/assets/case/offline.png Binary files differ diff --git a/src/assets/case/online.png b/src/assets/case/online.png new file mode 100644 index 0000000..767bcc5 --- /dev/null +++ b/src/assets/case/online.png Binary files differ diff --git a/src/assets/case/status_overTime.png b/src/assets/case/status_overTime.png new file mode 100644 index 0000000..9b3ecb8 --- /dev/null +++ b/src/assets/case/status_overTime.png Binary files differ diff --git a/src/assets/case/status_toCheck.png b/src/assets/case/status_toCheck.png new file mode 100644 index 0000000..19a8d89 --- /dev/null +++ b/src/assets/case/status_toCheck.png Binary files differ diff --git a/src/assets/case/status_toHandle.png b/src/assets/case/status_toHandle.png new file mode 100644 index 0000000..fea9fe9 --- /dev/null +++ b/src/assets/case/status_toHandle.png Binary files differ diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/system/user.js b/src/api/system/user.js index 02a38d0..3b67ef5 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -93,3 +93,12 @@ } }) } + +// 在线用户查询 +export function getUserOnLine(params) { + return request({ + url: '/userDevice/userDeviceOnLine', + method: 'get', + params + }) +} diff --git a/src/assets/case/offline.png b/src/assets/case/offline.png new file mode 100644 index 0000000..d0a290f --- /dev/null +++ b/src/assets/case/offline.png Binary files differ diff --git a/src/assets/case/online.png b/src/assets/case/online.png new file mode 100644 index 0000000..767bcc5 --- /dev/null +++ b/src/assets/case/online.png Binary files differ diff --git a/src/assets/case/status_overTime.png b/src/assets/case/status_overTime.png new file mode 100644 index 0000000..9b3ecb8 --- /dev/null +++ b/src/assets/case/status_overTime.png Binary files differ diff --git a/src/assets/case/status_toCheck.png b/src/assets/case/status_toCheck.png new file mode 100644 index 0000000..19a8d89 --- /dev/null +++ b/src/assets/case/status_toCheck.png Binary files differ diff --git a/src/assets/case/status_toHandle.png b/src/assets/case/status_toHandle.png new file mode 100644 index 0000000..fea9fe9 --- /dev/null +++ b/src/assets/case/status_toHandle.png Binary files differ diff --git a/src/assets/case/status_toVerify.png b/src/assets/case/status_toVerify.png new file mode 100644 index 0000000..f553650 --- /dev/null +++ b/src/assets/case/status_toVerify.png Binary files differ diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/system/user.js b/src/api/system/user.js index 02a38d0..3b67ef5 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -93,3 +93,12 @@ } }) } + +// 在线用户查询 +export function getUserOnLine(params) { + return request({ + url: '/userDevice/userDeviceOnLine', + method: 'get', + params + }) +} diff --git a/src/assets/case/offline.png b/src/assets/case/offline.png new file mode 100644 index 0000000..d0a290f --- /dev/null +++ b/src/assets/case/offline.png Binary files differ diff --git a/src/assets/case/online.png b/src/assets/case/online.png new file mode 100644 index 0000000..767bcc5 --- /dev/null +++ b/src/assets/case/online.png Binary files differ diff --git a/src/assets/case/status_overTime.png b/src/assets/case/status_overTime.png new file mode 100644 index 0000000..9b3ecb8 --- /dev/null +++ b/src/assets/case/status_overTime.png Binary files differ diff --git a/src/assets/case/status_toCheck.png b/src/assets/case/status_toCheck.png new file mode 100644 index 0000000..19a8d89 --- /dev/null +++ b/src/assets/case/status_toCheck.png Binary files differ diff --git a/src/assets/case/status_toHandle.png b/src/assets/case/status_toHandle.png new file mode 100644 index 0000000..fea9fe9 --- /dev/null +++ b/src/assets/case/status_toHandle.png Binary files differ diff --git a/src/assets/case/status_toVerify.png b/src/assets/case/status_toVerify.png new file mode 100644 index 0000000..f553650 --- /dev/null +++ b/src/assets/case/status_toVerify.png Binary files differ diff --git a/src/assets/icons/icon-poi.png b/src/assets/icons/icon-poi.png new file mode 100644 index 0000000..364f2f6 --- /dev/null +++ b/src/assets/icons/icon-poi.png Binary files differ diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/system/user.js b/src/api/system/user.js index 02a38d0..3b67ef5 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -93,3 +93,12 @@ } }) } + +// 在线用户查询 +export function getUserOnLine(params) { + return request({ + url: '/userDevice/userDeviceOnLine', + method: 'get', + params + }) +} diff --git a/src/assets/case/offline.png b/src/assets/case/offline.png new file mode 100644 index 0000000..d0a290f --- /dev/null +++ b/src/assets/case/offline.png Binary files differ diff --git a/src/assets/case/online.png b/src/assets/case/online.png new file mode 100644 index 0000000..767bcc5 --- /dev/null +++ b/src/assets/case/online.png Binary files differ diff --git a/src/assets/case/status_overTime.png b/src/assets/case/status_overTime.png new file mode 100644 index 0000000..9b3ecb8 --- /dev/null +++ b/src/assets/case/status_overTime.png Binary files differ diff --git a/src/assets/case/status_toCheck.png b/src/assets/case/status_toCheck.png new file mode 100644 index 0000000..19a8d89 --- /dev/null +++ b/src/assets/case/status_toCheck.png Binary files differ diff --git a/src/assets/case/status_toHandle.png b/src/assets/case/status_toHandle.png new file mode 100644 index 0000000..fea9fe9 --- /dev/null +++ b/src/assets/case/status_toHandle.png Binary files differ diff --git a/src/assets/case/status_toVerify.png b/src/assets/case/status_toVerify.png new file mode 100644 index 0000000..f553650 --- /dev/null +++ b/src/assets/case/status_toVerify.png Binary files differ diff --git a/src/assets/icons/icon-poi.png b/src/assets/icons/icon-poi.png new file mode 100644 index 0000000..364f2f6 --- /dev/null +++ b/src/assets/icons/icon-poi.png Binary files differ diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue index 617dd05..931a024 100644 --- a/src/components/CaseCommon/caseDetail.vue +++ b/src/components/CaseCommon/caseDetail.vue @@ -352,7 +352,8 @@ title="位置详情" > - + + @@ -366,12 +367,13 @@ import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process' import TianDiTuMapRead from '@/components/Map/tiandiMapRead' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' import { radioMap } from './radioMap' import CaseFile from '@/components/caseCommon/caseFile' export default { name: 'CaseDetail', - components: { TianDiTuMapRead, ArcGisMapRead, CaseFile }, + components: { TianDiTuMapRead, ArcGisMapRead, CaseFile, LeafletMapRead }, data() { const validateEmptyString = (rule, value, callback) => { if (!value.trim()) { @@ -880,6 +882,11 @@ this.$message.error('请选择部门') return false } + const checkDept = _.find(this.processCompObj.deptList, ['id', this.processCompObj.dispatchDeptId]) + if (!checkDept) { + this.$message.error('部门必须为处置单位') + return false + } this.processForm.dispatchDeptId = this.processCompObj.dispatchDeptId } else if (radioConfig.passBack === 'onedeptid') { this.processForm.dispatchDeptId = this.caseDetail.onedeptid diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/system/user.js b/src/api/system/user.js index 02a38d0..3b67ef5 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -93,3 +93,12 @@ } }) } + +// 在线用户查询 +export function getUserOnLine(params) { + return request({ + url: '/userDevice/userDeviceOnLine', + method: 'get', + params + }) +} diff --git a/src/assets/case/offline.png b/src/assets/case/offline.png new file mode 100644 index 0000000..d0a290f --- /dev/null +++ b/src/assets/case/offline.png Binary files differ diff --git a/src/assets/case/online.png b/src/assets/case/online.png new file mode 100644 index 0000000..767bcc5 --- /dev/null +++ b/src/assets/case/online.png Binary files differ diff --git a/src/assets/case/status_overTime.png b/src/assets/case/status_overTime.png new file mode 100644 index 0000000..9b3ecb8 --- /dev/null +++ b/src/assets/case/status_overTime.png Binary files differ diff --git a/src/assets/case/status_toCheck.png b/src/assets/case/status_toCheck.png new file mode 100644 index 0000000..19a8d89 --- /dev/null +++ b/src/assets/case/status_toCheck.png Binary files differ diff --git a/src/assets/case/status_toHandle.png b/src/assets/case/status_toHandle.png new file mode 100644 index 0000000..fea9fe9 --- /dev/null +++ b/src/assets/case/status_toHandle.png Binary files differ diff --git a/src/assets/case/status_toVerify.png b/src/assets/case/status_toVerify.png new file mode 100644 index 0000000..f553650 --- /dev/null +++ b/src/assets/case/status_toVerify.png Binary files differ diff --git a/src/assets/icons/icon-poi.png b/src/assets/icons/icon-poi.png new file mode 100644 index 0000000..364f2f6 --- /dev/null +++ b/src/assets/icons/icon-poi.png Binary files differ diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue index 617dd05..931a024 100644 --- a/src/components/CaseCommon/caseDetail.vue +++ b/src/components/CaseCommon/caseDetail.vue @@ -352,7 +352,8 @@ title="位置详情" > - + + @@ -366,12 +367,13 @@ import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process' import TianDiTuMapRead from '@/components/Map/tiandiMapRead' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' import { radioMap } from './radioMap' import CaseFile from '@/components/caseCommon/caseFile' export default { name: 'CaseDetail', - components: { TianDiTuMapRead, ArcGisMapRead, CaseFile }, + components: { TianDiTuMapRead, ArcGisMapRead, CaseFile, LeafletMapRead }, data() { const validateEmptyString = (rule, value, callback) => { if (!value.trim()) { @@ -880,6 +882,11 @@ this.$message.error('请选择部门') return false } + const checkDept = _.find(this.processCompObj.deptList, ['id', this.processCompObj.dispatchDeptId]) + if (!checkDept) { + this.$message.error('部门必须为处置单位') + return false + } this.processForm.dispatchDeptId = this.processCompObj.dispatchDeptId } else if (radioConfig.passBack === 'onedeptid') { this.processForm.dispatchDeptId = this.caseDetail.onedeptid diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue index 6f163ce..f8440a7 100644 --- a/src/components/CaseCommon/caseDetailRead.vue +++ b/src/components/CaseCommon/caseDetailRead.vue @@ -163,7 +163,8 @@ :append-to-body="true" title="位置详情" > - + + @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/system/user.js b/src/api/system/user.js index 02a38d0..3b67ef5 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -93,3 +93,12 @@ } }) } + +// 在线用户查询 +export function getUserOnLine(params) { + return request({ + url: '/userDevice/userDeviceOnLine', + method: 'get', + params + }) +} diff --git a/src/assets/case/offline.png b/src/assets/case/offline.png new file mode 100644 index 0000000..d0a290f --- /dev/null +++ b/src/assets/case/offline.png Binary files differ diff --git a/src/assets/case/online.png b/src/assets/case/online.png new file mode 100644 index 0000000..767bcc5 --- /dev/null +++ b/src/assets/case/online.png Binary files differ diff --git a/src/assets/case/status_overTime.png b/src/assets/case/status_overTime.png new file mode 100644 index 0000000..9b3ecb8 --- /dev/null +++ b/src/assets/case/status_overTime.png Binary files differ diff --git a/src/assets/case/status_toCheck.png b/src/assets/case/status_toCheck.png new file mode 100644 index 0000000..19a8d89 --- /dev/null +++ b/src/assets/case/status_toCheck.png Binary files differ diff --git a/src/assets/case/status_toHandle.png b/src/assets/case/status_toHandle.png new file mode 100644 index 0000000..fea9fe9 --- /dev/null +++ b/src/assets/case/status_toHandle.png Binary files differ diff --git a/src/assets/case/status_toVerify.png b/src/assets/case/status_toVerify.png new file mode 100644 index 0000000..f553650 --- /dev/null +++ b/src/assets/case/status_toVerify.png Binary files differ diff --git a/src/assets/icons/icon-poi.png b/src/assets/icons/icon-poi.png new file mode 100644 index 0000000..364f2f6 --- /dev/null +++ b/src/assets/icons/icon-poi.png Binary files differ diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue index 617dd05..931a024 100644 --- a/src/components/CaseCommon/caseDetail.vue +++ b/src/components/CaseCommon/caseDetail.vue @@ -352,7 +352,8 @@ title="位置详情" > - + + @@ -366,12 +367,13 @@ import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process' import TianDiTuMapRead from '@/components/Map/tiandiMapRead' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' import { radioMap } from './radioMap' import CaseFile from '@/components/caseCommon/caseFile' export default { name: 'CaseDetail', - components: { TianDiTuMapRead, ArcGisMapRead, CaseFile }, + components: { TianDiTuMapRead, ArcGisMapRead, CaseFile, LeafletMapRead }, data() { const validateEmptyString = (rule, value, callback) => { if (!value.trim()) { @@ -880,6 +882,11 @@ this.$message.error('请选择部门') return false } + const checkDept = _.find(this.processCompObj.deptList, ['id', this.processCompObj.dispatchDeptId]) + if (!checkDept) { + this.$message.error('部门必须为处置单位') + return false + } this.processForm.dispatchDeptId = this.processCompObj.dispatchDeptId } else if (radioConfig.passBack === 'onedeptid') { this.processForm.dispatchDeptId = this.caseDetail.onedeptid diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue index 6f163ce..f8440a7 100644 --- a/src/components/CaseCommon/caseDetailRead.vue +++ b/src/components/CaseCommon/caseDetailRead.vue @@ -163,7 +163,8 @@ :append-to-body="true" title="位置详情" > - + + @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -30,14 +30,9 @@ required: true } // 数据 }, - // mounted() { - // debugger - // console.log(this.data.feature) - // }, methods: { // 点击数据项 itemClick() { - console.log('点击item') this.$emit('click', this.data) } } diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/system/user.js b/src/api/system/user.js index 02a38d0..3b67ef5 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -93,3 +93,12 @@ } }) } + +// 在线用户查询 +export function getUserOnLine(params) { + return request({ + url: '/userDevice/userDeviceOnLine', + method: 'get', + params + }) +} diff --git a/src/assets/case/offline.png b/src/assets/case/offline.png new file mode 100644 index 0000000..d0a290f --- /dev/null +++ b/src/assets/case/offline.png Binary files differ diff --git a/src/assets/case/online.png b/src/assets/case/online.png new file mode 100644 index 0000000..767bcc5 --- /dev/null +++ b/src/assets/case/online.png Binary files differ diff --git a/src/assets/case/status_overTime.png b/src/assets/case/status_overTime.png new file mode 100644 index 0000000..9b3ecb8 --- /dev/null +++ b/src/assets/case/status_overTime.png Binary files differ diff --git a/src/assets/case/status_toCheck.png b/src/assets/case/status_toCheck.png new file mode 100644 index 0000000..19a8d89 --- /dev/null +++ b/src/assets/case/status_toCheck.png Binary files differ diff --git a/src/assets/case/status_toHandle.png b/src/assets/case/status_toHandle.png new file mode 100644 index 0000000..fea9fe9 --- /dev/null +++ b/src/assets/case/status_toHandle.png Binary files differ diff --git a/src/assets/case/status_toVerify.png b/src/assets/case/status_toVerify.png new file mode 100644 index 0000000..f553650 --- /dev/null +++ b/src/assets/case/status_toVerify.png Binary files differ diff --git a/src/assets/icons/icon-poi.png b/src/assets/icons/icon-poi.png new file mode 100644 index 0000000..364f2f6 --- /dev/null +++ b/src/assets/icons/icon-poi.png Binary files differ diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue index 617dd05..931a024 100644 --- a/src/components/CaseCommon/caseDetail.vue +++ b/src/components/CaseCommon/caseDetail.vue @@ -352,7 +352,8 @@ title="位置详情" > - + + @@ -366,12 +367,13 @@ import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process' import TianDiTuMapRead from '@/components/Map/tiandiMapRead' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' import { radioMap } from './radioMap' import CaseFile from '@/components/caseCommon/caseFile' export default { name: 'CaseDetail', - components: { TianDiTuMapRead, ArcGisMapRead, CaseFile }, + components: { TianDiTuMapRead, ArcGisMapRead, CaseFile, LeafletMapRead }, data() { const validateEmptyString = (rule, value, callback) => { if (!value.trim()) { @@ -880,6 +882,11 @@ this.$message.error('请选择部门') return false } + const checkDept = _.find(this.processCompObj.deptList, ['id', this.processCompObj.dispatchDeptId]) + if (!checkDept) { + this.$message.error('部门必须为处置单位') + return false + } this.processForm.dispatchDeptId = this.processCompObj.dispatchDeptId } else if (radioConfig.passBack === 'onedeptid') { this.processForm.dispatchDeptId = this.caseDetail.onedeptid diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue index 6f163ce..f8440a7 100644 --- a/src/components/CaseCommon/caseDetailRead.vue +++ b/src/components/CaseCommon/caseDetailRead.vue @@ -163,7 +163,8 @@ :append-to-body="true" title="位置详情" > - + + @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -30,14 +30,9 @@ required: true } // 数据 }, - // mounted() { - // debugger - // console.log(this.data.feature) - // }, methods: { // 点击数据项 itemClick() { - console.log('点击item') this.$emit('click', this.data) } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 71147d8..5ae0c05 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -17,7 +17,7 @@ - + @@ -45,10 +45,15 @@ drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 clearDisabled: true, // 禁用重置按钮 - layers: this.baseConfig.layers, // 所有图层 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层 + baseLayer: [], + layers: [ + { 'id': 0, 'name': '商户', 'type': 'layer', 'domain': [35] }, + { 'id': 1, 'name': '部件', 'type': 'layer', 'domain': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15, 16, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45] } + ], + selectLayers: [0], // 选中图层 maps: [], // 地图图层 parts: [], // 部件图层 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 searchList: [], // 全部查询结果 featureCollection: [], // 选中的图层和Feature featureCollectionLength: 0, // 选中的feature个数 @@ -60,9 +65,8 @@ ...mapGetters([ 'baseUrl', 'partsUrl', - 'partsAllUrl', - 'mapUrl', - 'partsEditUrl' + 'shopUrl', + 'mapUrl' ]) }, destroyed() { @@ -89,18 +93,17 @@ } // 其他不予处理 this.searchLoading = true const results = [] // 存放查询结果列表 - // 遍历所有图层进行查询 - const partsLength = this.parts.length // 全部部件图层数量 - for (let i = 0; i < partsLength; i++) { - const part = this.parts[i] - var str = ['编码', '小类名称', '大类名称'] - var query = esri.query({ url: part.options.url }) + + // 获取是查询部件还是查询商户 + if (this.selectLayers.toString() === '0') { + // 查询商户 + const str = ['objid', 'dutyname', 'position_'] // 查询条件属性 + const query = esri.query({ url: `${this.baseUrl}${this.shopUrl}` }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 if (this.keyword) { // 拼接查询语句 queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') - console.log(queryString) } else { return } @@ -119,18 +122,98 @@ if (featuresLength > 0) { // 遍历所有查询结果，放入results for (const feature of featureCollection.features) { + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + feature.properties.dutyname + '
' + + '
' + feature.properties.objid + '
' + + // '
' + feature.properties.communame + '
' + + // '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname + '
' + + '
' + feature.properties.position_ + '
' + + '
' + results.push({ - layer: part, - feature: feature + name: feature.properties.dutyname, + code: feature.properties.objid, + content: { + title: '地址', + text: feature.properties.position_ + }, + lng: feature.properties.x, + lat: feature.properties.y, + popupStr: popupStr }) } } - // 如果是最后一个图层 - if (i === (partsLength - 1)) { - this.searchList = results - this.searchLoading = false - } + + this.searchList = results + this.searchLoading = false }) + } else if (this.selectLayers.toString() === '1') { + // 查询部件 + // 遍历所有图层进行查询 + const partsLength = this.parts.length // 全部部件图层数量 + for (let i = 0; i < partsLength; i++) { + const part = this.parts[i] + const str = ['objid', 'xl', 'dl'] + const query = esri.query({ url: part.url }) + let queryString = '1=1' // 默认查询语句 + // 如果有关键字 + if (this.keyword) { + // 拼接查询语句 + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') + } else { + return + } + query.where(queryString) + // 如果有查询边界 + if (this.bounds) { + query.within(this.bounds) + } + // 执行查询 + query.run((error, featureCollection, response) => { + if (error) { + console.log(error) + return + } + const featuresLength = featureCollection.features.length + if (featuresLength > 0) { + // 遍历所有查询结果，放入results + for (const feature of featureCollection.features) { + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + feature.properties.dl + ' / ' + feature.properties.xl + '
' + + '
' + feature.properties.objid + '
' + + '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname2 + '
' + + '
' + feature.properties.deptname1 + '
' + + '
' + feature.properties.deptname3 + '
' + + '
' + + results.push({ + name: feature.properties.dl + ' / ' + feature.properties.xl, + code: feature.properties.objid, + content: { + title: '权属部门', + text: feature.properties.deptname2 + }, + lng: feature.geometry.coordinates[0], + lat: feature.geometry.coordinates[1], + popupStr: popupStr + }) + } + } + // 如果是最后一个图层 + if (i === (partsLength - 1)) { + this.searchList = results + this.searchLoading = false + } + }) + } + } else { + this.searchLoading = false } }, // 清空查询 @@ -154,28 +237,16 @@ // 赋予新的查询结果 const currentMarkesLength = data.length for (let i = 0; i < currentMarkesLength; i++) { - const feature = data[i].feature - var icon = this.searchIconList[i] - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) - var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) + const icon = this.searchIconList[i] + const latlng = L.latLng([data[i].lat, data[i].lng]) + const item = L.marker(latlng, { icon: icon }).addTo(this.map) item.on('click', e => { if (item.getPopup()) { item.unbindPopup() } // 绑定弹窗 - const properties = feature.properties - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - item.bindPopup(popup).openPopup(e.latlng) + const popup = L.popup().setContent(data[i].popupStr) + item.bindPopup(popup).openPopup([data[i].lat, data[i].lng]) }) this.currentSearchMarkers.push(item) } @@ -186,10 +257,8 @@ }, // 点击查询列表项，将位置放在中间 clickSearchItem(item, index) { - console.log('clickItem') if (item) { - const feature = item.feature - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) + const latlng = L.latLng([item.lat, item.lng]) let zoom = this.map.getZoom() if (zoom < 19) { zoom = 19 @@ -229,36 +298,18 @@ }) }, // 部件图层切换 - layerChange(node, checked) { - const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } - } + layerChange(node) { + this.$refs.layerRadio.$refs.layerTree.setCheckedKeys([node.id]) + this.selectLayers = [node.id] + + // 清除查询 + this.clearSearch() }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -268,40 +319,64 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + this.map.addLayer(mapDtGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: 18 } + const layer = esri.featureLayer(item).addTo(group) + this.parts.push(item) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) + this.map.addLayer(group) }, // 初始化图标 initIcons() { @@ -310,23 +385,17 @@ const icon = L.icon({ iconUrl: require(`@/assets/global_images/point${i}.png`), iconSize: [25, 25], - iconAnchor: [12.5, 25] + iconAnchor: [12, 25], + popupAnchor: [0, -25] }) this.searchIconList.push(icon) } }, handleCurrentChange(val) { this.offset = val - var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val - this.showlist = this.searchlist.slice(5 * (val - 1), num) + const num = 5 * val >= this.searchList.length ? this.searchList.length : 5 * val + this.showlist = this.searchList.slice(5 * (val - 1), num) this.drawIcon() - }, - // 根据url找到layer - searchLayerByUrl(url) { - const layer = this.parts.filter(item => item.options.url === url)[0] - if (layer) { - this.currentLayer = layer - } } } } @@ -345,8 +414,9 @@ /*}*/ $tableTitleHeight:35px; .leaflet_container{ - width: 100%; - height: 84vh; + width: calc( 100vw - 208px ); + height: calc( 100vh - 158px ); + background-color: white; } .search-total{ background-color: white; width: 300px;height: 35px; @@ -453,3 +523,33 @@ } } + + diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/system/user.js b/src/api/system/user.js index 02a38d0..3b67ef5 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -93,3 +93,12 @@ } }) } + +// 在线用户查询 +export function getUserOnLine(params) { + return request({ + url: '/userDevice/userDeviceOnLine', + method: 'get', + params + }) +} diff --git a/src/assets/case/offline.png b/src/assets/case/offline.png new file mode 100644 index 0000000..d0a290f --- /dev/null +++ b/src/assets/case/offline.png Binary files differ diff --git a/src/assets/case/online.png b/src/assets/case/online.png new file mode 100644 index 0000000..767bcc5 --- /dev/null +++ b/src/assets/case/online.png Binary files differ diff --git a/src/assets/case/status_overTime.png b/src/assets/case/status_overTime.png new file mode 100644 index 0000000..9b3ecb8 --- /dev/null +++ b/src/assets/case/status_overTime.png Binary files differ diff --git a/src/assets/case/status_toCheck.png b/src/assets/case/status_toCheck.png new file mode 100644 index 0000000..19a8d89 --- /dev/null +++ b/src/assets/case/status_toCheck.png Binary files differ diff --git a/src/assets/case/status_toHandle.png b/src/assets/case/status_toHandle.png new file mode 100644 index 0000000..fea9fe9 --- /dev/null +++ b/src/assets/case/status_toHandle.png Binary files differ diff --git a/src/assets/case/status_toVerify.png b/src/assets/case/status_toVerify.png new file mode 100644 index 0000000..f553650 --- /dev/null +++ b/src/assets/case/status_toVerify.png Binary files differ diff --git a/src/assets/icons/icon-poi.png b/src/assets/icons/icon-poi.png new file mode 100644 index 0000000..364f2f6 --- /dev/null +++ b/src/assets/icons/icon-poi.png Binary files differ diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue index 617dd05..931a024 100644 --- a/src/components/CaseCommon/caseDetail.vue +++ b/src/components/CaseCommon/caseDetail.vue @@ -352,7 +352,8 @@ title="位置详情" > - + + @@ -366,12 +367,13 @@ import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process' import TianDiTuMapRead from '@/components/Map/tiandiMapRead' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' import { radioMap } from './radioMap' import CaseFile from '@/components/caseCommon/caseFile' export default { name: 'CaseDetail', - components: { TianDiTuMapRead, ArcGisMapRead, CaseFile }, + components: { TianDiTuMapRead, ArcGisMapRead, CaseFile, LeafletMapRead }, data() { const validateEmptyString = (rule, value, callback) => { if (!value.trim()) { @@ -880,6 +882,11 @@ this.$message.error('请选择部门') return false } + const checkDept = _.find(this.processCompObj.deptList, ['id', this.processCompObj.dispatchDeptId]) + if (!checkDept) { + this.$message.error('部门必须为处置单位') + return false + } this.processForm.dispatchDeptId = this.processCompObj.dispatchDeptId } else if (radioConfig.passBack === 'onedeptid') { this.processForm.dispatchDeptId = this.caseDetail.onedeptid diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue index 6f163ce..f8440a7 100644 --- a/src/components/CaseCommon/caseDetailRead.vue +++ b/src/components/CaseCommon/caseDetailRead.vue @@ -163,7 +163,8 @@ :append-to-body="true" title="位置详情" > - + + @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -30,14 +30,9 @@ required: true } // 数据 }, - // mounted() { - // debugger - // console.log(this.data.feature) - // }, methods: { // 点击数据项 itemClick() { - console.log('点击item') this.$emit('click', this.data) } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 71147d8..5ae0c05 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -17,7 +17,7 @@ - +
@@ -45,10 +45,15 @@ drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 clearDisabled: true, // 禁用重置按钮 - layers: this.baseConfig.layers, // 所有图层 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层 + baseLayer: [], + layers: [ + { 'id': 0, 'name': '商户', 'type': 'layer', 'domain': [35] }, + { 'id': 1, 'name': '部件', 'type': 'layer', 'domain': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15, 16, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45] } + ], + selectLayers: [0], // 选中图层 maps: [], // 地图图层 parts: [], // 部件图层 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 searchList: [], // 全部查询结果 featureCollection: [], // 选中的图层和Feature featureCollectionLength: 0, // 选中的feature个数 @@ -60,9 +65,8 @@ ...mapGetters([ 'baseUrl', 'partsUrl', - 'partsAllUrl', - 'mapUrl', - 'partsEditUrl' + 'shopUrl', + 'mapUrl' ]) }, destroyed() { @@ -89,18 +93,17 @@ } // 其他不予处理 this.searchLoading = true const results = [] // 存放查询结果列表 - // 遍历所有图层进行查询 - const partsLength = this.parts.length // 全部部件图层数量 - for (let i = 0; i < partsLength; i++) { - const part = this.parts[i] - var str = ['编码', '小类名称', '大类名称'] - var query = esri.query({ url: part.options.url }) + + // 获取是查询部件还是查询商户 + if (this.selectLayers.toString() === '0') { + // 查询商户 + const str = ['objid', 'dutyname', 'position_'] // 查询条件属性 + const query = esri.query({ url: `${this.baseUrl}${this.shopUrl}` }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 if (this.keyword) { // 拼接查询语句 queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') - console.log(queryString) } else { return } @@ -119,18 +122,98 @@ if (featuresLength > 0) { // 遍历所有查询结果，放入results for (const feature of featureCollection.features) { + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + feature.properties.dutyname + '
' + + '
' + feature.properties.objid + '
' + + // '
' + feature.properties.communame + '
' + + // '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname + '
' + + '
' + feature.properties.position_ + '
' + + '
' + results.push({ - layer: part, - feature: feature + name: feature.properties.dutyname, + code: feature.properties.objid, + content: { + title: '地址', + text: feature.properties.position_ + }, + lng: feature.properties.x, + lat: feature.properties.y, + popupStr: popupStr }) } } - // 如果是最后一个图层 - if (i === (partsLength - 1)) { - this.searchList = results - this.searchLoading = false - } + + this.searchList = results + this.searchLoading = false }) + } else if (this.selectLayers.toString() === '1') { + // 查询部件 + // 遍历所有图层进行查询 + const partsLength = this.parts.length // 全部部件图层数量 + for (let i = 0; i < partsLength; i++) { + const part = this.parts[i] + const str = ['objid', 'xl', 'dl'] + const query = esri.query({ url: part.url }) + let queryString = '1=1' // 默认查询语句 + // 如果有关键字 + if (this.keyword) { + // 拼接查询语句 + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') + } else { + return + } + query.where(queryString) + // 如果有查询边界 + if (this.bounds) { + query.within(this.bounds) + } + // 执行查询 + query.run((error, featureCollection, response) => { + if (error) { + console.log(error) + return + } + const featuresLength = featureCollection.features.length + if (featuresLength > 0) { + // 遍历所有查询结果，放入results + for (const feature of featureCollection.features) { + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + feature.properties.dl + ' / ' + feature.properties.xl + '
' + + '
' + feature.properties.objid + '
' + + '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname2 + '
' + + '
' + feature.properties.deptname1 + '
' + + '
' + feature.properties.deptname3 + '
' + + '
' + + results.push({ + name: feature.properties.dl + ' / ' + feature.properties.xl, + code: feature.properties.objid, + content: { + title: '权属部门', + text: feature.properties.deptname2 + }, + lng: feature.geometry.coordinates[0], + lat: feature.geometry.coordinates[1], + popupStr: popupStr + }) + } + } + // 如果是最后一个图层 + if (i === (partsLength - 1)) { + this.searchList = results + this.searchLoading = false + } + }) + } + } else { + this.searchLoading = false } }, // 清空查询 @@ -154,28 +237,16 @@ // 赋予新的查询结果 const currentMarkesLength = data.length for (let i = 0; i < currentMarkesLength; i++) { - const feature = data[i].feature - var icon = this.searchIconList[i] - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) - var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) + const icon = this.searchIconList[i] + const latlng = L.latLng([data[i].lat, data[i].lng]) + const item = L.marker(latlng, { icon: icon }).addTo(this.map) item.on('click', e => { if (item.getPopup()) { item.unbindPopup() } // 绑定弹窗 - const properties = feature.properties - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - item.bindPopup(popup).openPopup(e.latlng) + const popup = L.popup().setContent(data[i].popupStr) + item.bindPopup(popup).openPopup([data[i].lat, data[i].lng]) }) this.currentSearchMarkers.push(item) } @@ -186,10 +257,8 @@ }, // 点击查询列表项，将位置放在中间 clickSearchItem(item, index) { - console.log('clickItem') if (item) { - const feature = item.feature - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) + const latlng = L.latLng([item.lat, item.lng]) let zoom = this.map.getZoom() if (zoom < 19) { zoom = 19 @@ -229,36 +298,18 @@ }) }, // 部件图层切换 - layerChange(node, checked) { - const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } - } + layerChange(node) { + this.$refs.layerRadio.$refs.layerTree.setCheckedKeys([node.id]) + this.selectLayers = [node.id] + + // 清除查询 + this.clearSearch() }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -268,40 +319,64 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + this.map.addLayer(mapDtGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: 18 } + const layer = esri.featureLayer(item).addTo(group) + this.parts.push(item) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) + this.map.addLayer(group) }, // 初始化图标 initIcons() { @@ -310,23 +385,17 @@ const icon = L.icon({ iconUrl: require(`@/assets/global_images/point${i}.png`), iconSize: [25, 25], - iconAnchor: [12.5, 25] + iconAnchor: [12, 25], + popupAnchor: [0, -25] }) this.searchIconList.push(icon) } }, handleCurrentChange(val) { this.offset = val - var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val - this.showlist = this.searchlist.slice(5 * (val - 1), num) + const num = 5 * val >= this.searchList.length ? this.searchList.length : 5 * val + this.showlist = this.searchList.slice(5 * (val - 1), num) this.drawIcon() - }, - // 根据url找到layer - searchLayerByUrl(url) { - const layer = this.parts.filter(item => item.options.url === url)[0] - if (layer) { - this.currentLayer = layer - } } } } @@ -345,8 +414,9 @@ /*}*/ $tableTitleHeight:35px; .leaflet_container{ - width: 100%; - height: 84vh; + width: calc( 100vw - 208px ); + height: calc( 100vh - 158px ); + background-color: white; } .search-total{ background-color: white; width: 300px;height: 35px; @@ -453,3 +523,33 @@ } } + + diff --git a/src/views/baseSource/overview.vue b/src/views/baseSource/overview.vue index 8a3f857..02267ef 100644 --- a/src/views/baseSource/overview.vue +++ b/src/views/baseSource/overview.vue @@ -20,9 +20,11 @@ components: { LayerChoose, ToolsContainer }, data() { return { + baseLayer: [], layers: this.baseConfig.layers, // 图层列表 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层列表 + selectLayers: [0, 1, 2], // 选中图层列表 map: null, // 地图对象 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 maps: [], // 地图图层 parts: [] // 部件图层 } @@ -32,7 +34,10 @@ 'baseUrl', 'partsUrl', 'partsAllUrl', - 'mapUrl' + 'shopUrl', + 'mapUrl', + 'gridUrl', + 'mapDtUrl' ]) }, mounted() { @@ -42,34 +47,18 @@ // 部件图层切换 layerChange(node, checked) { const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } + + if (!checked) { + this.map.removeLayer(this.layerGroups[selectItem.id]) + } else { + this.map.addLayer(this.layerGroups[selectItem.id]) } }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -79,48 +68,147 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图图层 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + this.addGridLayer() // 网格 + this.addShopLayer() // 商户 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + + // 添加默认显示的图层 + this.selectLayers.forEach(item => { + this.map.addLayer(this.layerGroups[item]) + }) + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapDtUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + }, + // 添加网格图层 + addGridLayer: function() { + const gridGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.gridUrl}` } + esri.featureLayer(item).addTo(gridGroup) + + this.layerGroups.push(gridGroup) + }, + // 添加商户图层 + addShopLayer: function() { + const shopGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.shopUrl}` } + const layer = esri.featureLayer(item).addTo(shopGroup) + + const that = this + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + properties.dutyname + '
' + + '
' + properties.objid + '
' + + // '
' + properties.communame + '
' + + // '
' + properties.bgid + '
' + + '
' + properties.deptname + '
' + + '
' + properties.position_ + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + this.layerGroups.push(shopGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + const minZoom = this.baseConfig.layers[index].minZoom === undefined ? 18 : this.baseConfig.layers[index].minZoom + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: minZoom } + const layer = esri.featureLayer(item).addTo(group) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) } } } + + diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/system/user.js b/src/api/system/user.js index 02a38d0..3b67ef5 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -93,3 +93,12 @@ } }) } + +// 在线用户查询 +export function getUserOnLine(params) { + return request({ + url: '/userDevice/userDeviceOnLine', + method: 'get', + params + }) +} diff --git a/src/assets/case/offline.png b/src/assets/case/offline.png new file mode 100644 index 0000000..d0a290f --- /dev/null +++ b/src/assets/case/offline.png Binary files differ diff --git a/src/assets/case/online.png b/src/assets/case/online.png new file mode 100644 index 0000000..767bcc5 --- /dev/null +++ b/src/assets/case/online.png Binary files differ diff --git a/src/assets/case/status_overTime.png b/src/assets/case/status_overTime.png new file mode 100644 index 0000000..9b3ecb8 --- /dev/null +++ b/src/assets/case/status_overTime.png Binary files differ diff --git a/src/assets/case/status_toCheck.png b/src/assets/case/status_toCheck.png new file mode 100644 index 0000000..19a8d89 --- /dev/null +++ b/src/assets/case/status_toCheck.png Binary files differ diff --git a/src/assets/case/status_toHandle.png b/src/assets/case/status_toHandle.png new file mode 100644 index 0000000..fea9fe9 --- /dev/null +++ b/src/assets/case/status_toHandle.png Binary files differ diff --git a/src/assets/case/status_toVerify.png b/src/assets/case/status_toVerify.png new file mode 100644 index 0000000..f553650 --- /dev/null +++ b/src/assets/case/status_toVerify.png Binary files differ diff --git a/src/assets/icons/icon-poi.png b/src/assets/icons/icon-poi.png new file mode 100644 index 0000000..364f2f6 --- /dev/null +++ b/src/assets/icons/icon-poi.png Binary files differ diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue index 617dd05..931a024 100644 --- a/src/components/CaseCommon/caseDetail.vue +++ b/src/components/CaseCommon/caseDetail.vue @@ -352,7 +352,8 @@ title="位置详情" > - + + @@ -366,12 +367,13 @@ import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process' import TianDiTuMapRead from '@/components/Map/tiandiMapRead' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' import { radioMap } from './radioMap' import CaseFile from '@/components/caseCommon/caseFile' export default { name: 'CaseDetail', - components: { TianDiTuMapRead, ArcGisMapRead, CaseFile }, + components: { TianDiTuMapRead, ArcGisMapRead, CaseFile, LeafletMapRead }, data() { const validateEmptyString = (rule, value, callback) => { if (!value.trim()) { @@ -880,6 +882,11 @@ this.$message.error('请选择部门') return false } + const checkDept = _.find(this.processCompObj.deptList, ['id', this.processCompObj.dispatchDeptId]) + if (!checkDept) { + this.$message.error('部门必须为处置单位') + return false + } this.processForm.dispatchDeptId = this.processCompObj.dispatchDeptId } else if (radioConfig.passBack === 'onedeptid') { this.processForm.dispatchDeptId = this.caseDetail.onedeptid diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue index 6f163ce..f8440a7 100644 --- a/src/components/CaseCommon/caseDetailRead.vue +++ b/src/components/CaseCommon/caseDetailRead.vue @@ -163,7 +163,8 @@ :append-to-body="true" title="位置详情" > - + + @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -30,14 +30,9 @@ required: true } // 数据 }, - // mounted() { - // debugger - // console.log(this.data.feature) - // }, methods: { // 点击数据项 itemClick() { - console.log('点击item') this.$emit('click', this.data) } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 71147d8..5ae0c05 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -17,7 +17,7 @@ - +
@@ -45,10 +45,15 @@ drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 clearDisabled: true, // 禁用重置按钮 - layers: this.baseConfig.layers, // 所有图层 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层 + baseLayer: [], + layers: [ + { 'id': 0, 'name': '商户', 'type': 'layer', 'domain': [35] }, + { 'id': 1, 'name': '部件', 'type': 'layer', 'domain': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15, 16, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45] } + ], + selectLayers: [0], // 选中图层 maps: [], // 地图图层 parts: [], // 部件图层 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 searchList: [], // 全部查询结果 featureCollection: [], // 选中的图层和Feature featureCollectionLength: 0, // 选中的feature个数 @@ -60,9 +65,8 @@ ...mapGetters([ 'baseUrl', 'partsUrl', - 'partsAllUrl', - 'mapUrl', - 'partsEditUrl' + 'shopUrl', + 'mapUrl' ]) }, destroyed() { @@ -89,18 +93,17 @@ } // 其他不予处理 this.searchLoading = true const results = [] // 存放查询结果列表 - // 遍历所有图层进行查询 - const partsLength = this.parts.length // 全部部件图层数量 - for (let i = 0; i < partsLength; i++) { - const part = this.parts[i] - var str = ['编码', '小类名称', '大类名称'] - var query = esri.query({ url: part.options.url }) + + // 获取是查询部件还是查询商户 + if (this.selectLayers.toString() === '0') { + // 查询商户 + const str = ['objid', 'dutyname', 'position_'] // 查询条件属性 + const query = esri.query({ url: `${this.baseUrl}${this.shopUrl}` }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 if (this.keyword) { // 拼接查询语句 queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') - console.log(queryString) } else { return } @@ -119,18 +122,98 @@ if (featuresLength > 0) { // 遍历所有查询结果，放入results for (const feature of featureCollection.features) { + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + feature.properties.dutyname + '
' + + '
' + feature.properties.objid + '
' + + // '
' + feature.properties.communame + '
' + + // '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname + '
' + + '
' + feature.properties.position_ + '
' + + '
' + results.push({ - layer: part, - feature: feature + name: feature.properties.dutyname, + code: feature.properties.objid, + content: { + title: '地址', + text: feature.properties.position_ + }, + lng: feature.properties.x, + lat: feature.properties.y, + popupStr: popupStr }) } } - // 如果是最后一个图层 - if (i === (partsLength - 1)) { - this.searchList = results - this.searchLoading = false - } + + this.searchList = results + this.searchLoading = false }) + } else if (this.selectLayers.toString() === '1') { + // 查询部件 + // 遍历所有图层进行查询 + const partsLength = this.parts.length // 全部部件图层数量 + for (let i = 0; i < partsLength; i++) { + const part = this.parts[i] + const str = ['objid', 'xl', 'dl'] + const query = esri.query({ url: part.url }) + let queryString = '1=1' // 默认查询语句 + // 如果有关键字 + if (this.keyword) { + // 拼接查询语句 + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') + } else { + return + } + query.where(queryString) + // 如果有查询边界 + if (this.bounds) { + query.within(this.bounds) + } + // 执行查询 + query.run((error, featureCollection, response) => { + if (error) { + console.log(error) + return + } + const featuresLength = featureCollection.features.length + if (featuresLength > 0) { + // 遍历所有查询结果，放入results + for (const feature of featureCollection.features) { + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + feature.properties.dl + ' / ' + feature.properties.xl + '
' + + '
' + feature.properties.objid + '
' + + '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname2 + '
' + + '
' + feature.properties.deptname1 + '
' + + '
' + feature.properties.deptname3 + '
' + + '
' + + results.push({ + name: feature.properties.dl + ' / ' + feature.properties.xl, + code: feature.properties.objid, + content: { + title: '权属部门', + text: feature.properties.deptname2 + }, + lng: feature.geometry.coordinates[0], + lat: feature.geometry.coordinates[1], + popupStr: popupStr + }) + } + } + // 如果是最后一个图层 + if (i === (partsLength - 1)) { + this.searchList = results + this.searchLoading = false + } + }) + } + } else { + this.searchLoading = false } }, // 清空查询 @@ -154,28 +237,16 @@ // 赋予新的查询结果 const currentMarkesLength = data.length for (let i = 0; i < currentMarkesLength; i++) { - const feature = data[i].feature - var icon = this.searchIconList[i] - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) - var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) + const icon = this.searchIconList[i] + const latlng = L.latLng([data[i].lat, data[i].lng]) + const item = L.marker(latlng, { icon: icon }).addTo(this.map) item.on('click', e => { if (item.getPopup()) { item.unbindPopup() } // 绑定弹窗 - const properties = feature.properties - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - item.bindPopup(popup).openPopup(e.latlng) + const popup = L.popup().setContent(data[i].popupStr) + item.bindPopup(popup).openPopup([data[i].lat, data[i].lng]) }) this.currentSearchMarkers.push(item) } @@ -186,10 +257,8 @@ }, // 点击查询列表项，将位置放在中间 clickSearchItem(item, index) { - console.log('clickItem') if (item) { - const feature = item.feature - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) + const latlng = L.latLng([item.lat, item.lng]) let zoom = this.map.getZoom() if (zoom < 19) { zoom = 19 @@ -229,36 +298,18 @@ }) }, // 部件图层切换 - layerChange(node, checked) { - const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } - } + layerChange(node) { + this.$refs.layerRadio.$refs.layerTree.setCheckedKeys([node.id]) + this.selectLayers = [node.id] + + // 清除查询 + this.clearSearch() }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -268,40 +319,64 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + this.map.addLayer(mapDtGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: 18 } + const layer = esri.featureLayer(item).addTo(group) + this.parts.push(item) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) + this.map.addLayer(group) }, // 初始化图标 initIcons() { @@ -310,23 +385,17 @@ const icon = L.icon({ iconUrl: require(`@/assets/global_images/point${i}.png`), iconSize: [25, 25], - iconAnchor: [12.5, 25] + iconAnchor: [12, 25], + popupAnchor: [0, -25] }) this.searchIconList.push(icon) } }, handleCurrentChange(val) { this.offset = val - var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val - this.showlist = this.searchlist.slice(5 * (val - 1), num) + const num = 5 * val >= this.searchList.length ? this.searchList.length : 5 * val + this.showlist = this.searchList.slice(5 * (val - 1), num) this.drawIcon() - }, - // 根据url找到layer - searchLayerByUrl(url) { - const layer = this.parts.filter(item => item.options.url === url)[0] - if (layer) { - this.currentLayer = layer - } } } } @@ -345,8 +414,9 @@ /*}*/ $tableTitleHeight:35px; .leaflet_container{ - width: 100%; - height: 84vh; + width: calc( 100vw - 208px ); + height: calc( 100vh - 158px ); + background-color: white; } .search-total{ background-color: white; width: 300px;height: 35px; @@ -453,3 +523,33 @@ } } + + diff --git a/src/views/baseSource/overview.vue b/src/views/baseSource/overview.vue index 8a3f857..02267ef 100644 --- a/src/views/baseSource/overview.vue +++ b/src/views/baseSource/overview.vue @@ -20,9 +20,11 @@ components: { LayerChoose, ToolsContainer }, data() { return { + baseLayer: [], layers: this.baseConfig.layers, // 图层列表 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层列表 + selectLayers: [0, 1, 2], // 选中图层列表 map: null, // 地图对象 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 maps: [], // 地图图层 parts: [] // 部件图层 } @@ -32,7 +34,10 @@ 'baseUrl', 'partsUrl', 'partsAllUrl', - 'mapUrl' + 'shopUrl', + 'mapUrl', + 'gridUrl', + 'mapDtUrl' ]) }, mounted() { @@ -42,34 +47,18 @@ // 部件图层切换 layerChange(node, checked) { const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } + + if (!checked) { + this.map.removeLayer(this.layerGroups[selectItem.id]) + } else { + this.map.addLayer(this.layerGroups[selectItem.id]) } }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -79,48 +68,147 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图图层 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + this.addGridLayer() // 网格 + this.addShopLayer() // 商户 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + + // 添加默认显示的图层 + this.selectLayers.forEach(item => { + this.map.addLayer(this.layerGroups[item]) + }) + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapDtUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + }, + // 添加网格图层 + addGridLayer: function() { + const gridGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.gridUrl}` } + esri.featureLayer(item).addTo(gridGroup) + + this.layerGroups.push(gridGroup) + }, + // 添加商户图层 + addShopLayer: function() { + const shopGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.shopUrl}` } + const layer = esri.featureLayer(item).addTo(shopGroup) + + const that = this + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + properties.dutyname + '
' + + '
' + properties.objid + '
' + + // '
' + properties.communame + '
' + + // '
' + properties.bgid + '
' + + '
' + properties.deptname + '
' + + '
' + properties.position_ + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + this.layerGroups.push(shopGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + const minZoom = this.baseConfig.layers[index].minZoom === undefined ? 18 : this.baseConfig.layers[index].minZoom + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: minZoom } + const layer = esri.featureLayer(item).addTo(group) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) } } } + + diff --git a/src/views/busAdmin/caseType/detailCaseType.vue b/src/views/busAdmin/caseType/detailCaseType.vue index 38a9cbd..ade5437 100644 --- a/src/views/busAdmin/caseType/detailCaseType.vue +++ b/src/views/busAdmin/caseType/detailCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -25,6 +30,7 @@ + @@ -49,6 +55,7 @@ typeId: '', deptName: '', deptId: '', + num: '', typesTime: [] } } @@ -60,7 +67,7 @@ this.caseTypeForm.typeDetailName = row.typeDetailName this.caseTypeForm.typeDetailCode = row.typeDetailCode this.caseTypeForm.id = row.id - + this.caseTypeForm.num = row.num getCaseTypesTime(this.caseTypeForm.id).then(response => { response.data.rows.forEach(element => { const typeTime = { @@ -70,6 +77,7 @@ hours: element.hours, minutes: element.minutes, deptId: element.deptId, + num: element.num, deptName: element.deptName, edit: false } diff --git a/src/api/coorBusiness/process.js b/src/api/coorBusiness/process.js index 4cdabe2..44b5db5 100644 --- a/src/api/coorBusiness/process.js +++ b/src/api/coorBusiness/process.js @@ -28,3 +28,12 @@ params }) } + +export function cancelTask(params) { + console.log(params) + return request({ + url: '/process/cancelTask', + method: 'get', + params + }) +} diff --git a/src/api/system/user.js b/src/api/system/user.js index 02a38d0..3b67ef5 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -93,3 +93,12 @@ } }) } + +// 在线用户查询 +export function getUserOnLine(params) { + return request({ + url: '/userDevice/userDeviceOnLine', + method: 'get', + params + }) +} diff --git a/src/assets/case/offline.png b/src/assets/case/offline.png new file mode 100644 index 0000000..d0a290f --- /dev/null +++ b/src/assets/case/offline.png Binary files differ diff --git a/src/assets/case/online.png b/src/assets/case/online.png new file mode 100644 index 0000000..767bcc5 --- /dev/null +++ b/src/assets/case/online.png Binary files differ diff --git a/src/assets/case/status_overTime.png b/src/assets/case/status_overTime.png new file mode 100644 index 0000000..9b3ecb8 --- /dev/null +++ b/src/assets/case/status_overTime.png Binary files differ diff --git a/src/assets/case/status_toCheck.png b/src/assets/case/status_toCheck.png new file mode 100644 index 0000000..19a8d89 --- /dev/null +++ b/src/assets/case/status_toCheck.png Binary files differ diff --git a/src/assets/case/status_toHandle.png b/src/assets/case/status_toHandle.png new file mode 100644 index 0000000..fea9fe9 --- /dev/null +++ b/src/assets/case/status_toHandle.png Binary files differ diff --git a/src/assets/case/status_toVerify.png b/src/assets/case/status_toVerify.png new file mode 100644 index 0000000..f553650 --- /dev/null +++ b/src/assets/case/status_toVerify.png Binary files differ diff --git a/src/assets/icons/icon-poi.png b/src/assets/icons/icon-poi.png new file mode 100644 index 0000000..364f2f6 --- /dev/null +++ b/src/assets/icons/icon-poi.png Binary files differ diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue index 617dd05..931a024 100644 --- a/src/components/CaseCommon/caseDetail.vue +++ b/src/components/CaseCommon/caseDetail.vue @@ -352,7 +352,8 @@ title="位置详情" > - + + @@ -366,12 +367,13 @@ import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process' import TianDiTuMapRead from '@/components/Map/tiandiMapRead' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' import { radioMap } from './radioMap' import CaseFile from '@/components/caseCommon/caseFile' export default { name: 'CaseDetail', - components: { TianDiTuMapRead, ArcGisMapRead, CaseFile }, + components: { TianDiTuMapRead, ArcGisMapRead, CaseFile, LeafletMapRead }, data() { const validateEmptyString = (rule, value, callback) => { if (!value.trim()) { @@ -880,6 +882,11 @@ this.$message.error('请选择部门') return false } + const checkDept = _.find(this.processCompObj.deptList, ['id', this.processCompObj.dispatchDeptId]) + if (!checkDept) { + this.$message.error('部门必须为处置单位') + return false + } this.processForm.dispatchDeptId = this.processCompObj.dispatchDeptId } else if (radioConfig.passBack === 'onedeptid') { this.processForm.dispatchDeptId = this.caseDetail.onedeptid diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue index 6f163ce..f8440a7 100644 --- a/src/components/CaseCommon/caseDetailRead.vue +++ b/src/components/CaseCommon/caseDetailRead.vue @@ -163,7 +163,8 @@ :append-to-body="true" title="位置详情" > - + + @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -30,14 +30,9 @@ required: true } // 数据 }, - // mounted() { - // debugger - // console.log(this.data.feature) - // }, methods: { // 点击数据项 itemClick() { - console.log('点击item') this.$emit('click', this.data) } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 71147d8..5ae0c05 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -17,7 +17,7 @@ - +
@@ -45,10 +45,15 @@ drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 clearDisabled: true, // 禁用重置按钮 - layers: this.baseConfig.layers, // 所有图层 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层 + baseLayer: [], + layers: [ + { 'id': 0, 'name': '商户', 'type': 'layer', 'domain': [35] }, + { 'id': 1, 'name': '部件', 'type': 'layer', 'domain': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15, 16, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45] } + ], + selectLayers: [0], // 选中图层 maps: [], // 地图图层 parts: [], // 部件图层 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 searchList: [], // 全部查询结果 featureCollection: [], // 选中的图层和Feature featureCollectionLength: 0, // 选中的feature个数 @@ -60,9 +65,8 @@ ...mapGetters([ 'baseUrl', 'partsUrl', - 'partsAllUrl', - 'mapUrl', - 'partsEditUrl' + 'shopUrl', + 'mapUrl' ]) }, destroyed() { @@ -89,18 +93,17 @@ } // 其他不予处理 this.searchLoading = true const results = [] // 存放查询结果列表 - // 遍历所有图层进行查询 - const partsLength = this.parts.length // 全部部件图层数量 - for (let i = 0; i < partsLength; i++) { - const part = this.parts[i] - var str = ['编码', '小类名称', '大类名称'] - var query = esri.query({ url: part.options.url }) + + // 获取是查询部件还是查询商户 + if (this.selectLayers.toString() === '0') { + // 查询商户 + const str = ['objid', 'dutyname', 'position_'] // 查询条件属性 + const query = esri.query({ url: `${this.baseUrl}${this.shopUrl}` }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 if (this.keyword) { // 拼接查询语句 queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') - console.log(queryString) } else { return } @@ -119,18 +122,98 @@ if (featuresLength > 0) { // 遍历所有查询结果，放入results for (const feature of featureCollection.features) { + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + feature.properties.dutyname + '
' + + '
' + feature.properties.objid + '
' + + // '
' + feature.properties.communame + '
' + + // '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname + '
' + + '
' + feature.properties.position_ + '
' + + '
' + results.push({ - layer: part, - feature: feature + name: feature.properties.dutyname, + code: feature.properties.objid, + content: { + title: '地址', + text: feature.properties.position_ + }, + lng: feature.properties.x, + lat: feature.properties.y, + popupStr: popupStr }) } } - // 如果是最后一个图层 - if (i === (partsLength - 1)) { - this.searchList = results - this.searchLoading = false - } + + this.searchList = results + this.searchLoading = false }) + } else if (this.selectLayers.toString() === '1') { + // 查询部件 + // 遍历所有图层进行查询 + const partsLength = this.parts.length // 全部部件图层数量 + for (let i = 0; i < partsLength; i++) { + const part = this.parts[i] + const str = ['objid', 'xl', 'dl'] + const query = esri.query({ url: part.url }) + let queryString = '1=1' // 默认查询语句 + // 如果有关键字 + if (this.keyword) { + // 拼接查询语句 + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') + } else { + return + } + query.where(queryString) + // 如果有查询边界 + if (this.bounds) { + query.within(this.bounds) + } + // 执行查询 + query.run((error, featureCollection, response) => { + if (error) { + console.log(error) + return + } + const featuresLength = featureCollection.features.length + if (featuresLength > 0) { + // 遍历所有查询结果，放入results + for (const feature of featureCollection.features) { + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + feature.properties.dl + ' / ' + feature.properties.xl + '
' + + '
' + feature.properties.objid + '
' + + '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname2 + '
' + + '
' + feature.properties.deptname1 + '
' + + '
' + feature.properties.deptname3 + '
' + + '
' + + results.push({ + name: feature.properties.dl + ' / ' + feature.properties.xl, + code: feature.properties.objid, + content: { + title: '权属部门', + text: feature.properties.deptname2 + }, + lng: feature.geometry.coordinates[0], + lat: feature.geometry.coordinates[1], + popupStr: popupStr + }) + } + } + // 如果是最后一个图层 + if (i === (partsLength - 1)) { + this.searchList = results + this.searchLoading = false + } + }) + } + } else { + this.searchLoading = false } }, // 清空查询 @@ -154,28 +237,16 @@ // 赋予新的查询结果 const currentMarkesLength = data.length for (let i = 0; i < currentMarkesLength; i++) { - const feature = data[i].feature - var icon = this.searchIconList[i] - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) - var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) + const icon = this.searchIconList[i] + const latlng = L.latLng([data[i].lat, data[i].lng]) + const item = L.marker(latlng, { icon: icon }).addTo(this.map) item.on('click', e => { if (item.getPopup()) { item.unbindPopup() } // 绑定弹窗 - const properties = feature.properties - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - item.bindPopup(popup).openPopup(e.latlng) + const popup = L.popup().setContent(data[i].popupStr) + item.bindPopup(popup).openPopup([data[i].lat, data[i].lng]) }) this.currentSearchMarkers.push(item) } @@ -186,10 +257,8 @@ }, // 点击查询列表项，将位置放在中间 clickSearchItem(item, index) { - console.log('clickItem') if (item) { - const feature = item.feature - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) + const latlng = L.latLng([item.lat, item.lng]) let zoom = this.map.getZoom() if (zoom < 19) { zoom = 19 @@ -229,36 +298,18 @@ }) }, // 部件图层切换 - layerChange(node, checked) { - const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } - } + layerChange(node) { + this.$refs.layerRadio.$refs.layerTree.setCheckedKeys([node.id]) + this.selectLayers = [node.id] + + // 清除查询 + this.clearSearch() }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -268,40 +319,64 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + this.map.addLayer(mapDtGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: 18 } + const layer = esri.featureLayer(item).addTo(group) + this.parts.push(item) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) + this.map.addLayer(group) }, // 初始化图标 initIcons() { @@ -310,23 +385,17 @@ const icon = L.icon({ iconUrl: require(`@/assets/global_images/point${i}.png`), iconSize: [25, 25], - iconAnchor: [12.5, 25] + iconAnchor: [12, 25], + popupAnchor: [0, -25] }) this.searchIconList.push(icon) } }, handleCurrentChange(val) { this.offset = val - var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val - this.showlist = this.searchlist.slice(5 * (val - 1), num) + const num = 5 * val >= this.searchList.length ? this.searchList.length : 5 * val + this.showlist = this.searchList.slice(5 * (val - 1), num) this.drawIcon() - }, - // 根据url找到layer - searchLayerByUrl(url) { - const layer = this.parts.filter(item => item.options.url === url)[0] - if (layer) { - this.currentLayer = layer - } } } } @@ -345,8 +414,9 @@ /*}*/ $tableTitleHeight:35px; .leaflet_container{ - width: 100%; - height: 84vh; + width: calc( 100vw - 208px ); + height: calc( 100vh - 158px ); + background-color: white; } .search-total{ background-color: white; width: 300px;height: 35px; @@ -453,3 +523,33 @@ } } + + diff --git a/src/views/baseSource/overview.vue b/src/views/baseSource/overview.vue index 8a3f857..02267ef 100644 --- a/src/views/baseSource/overview.vue +++ b/src/views/baseSource/overview.vue @@ -20,9 +20,11 @@ components: { LayerChoose, ToolsContainer }, data() { return { + baseLayer: [], layers: this.baseConfig.layers, // 图层列表 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层列表 + selectLayers: [0, 1, 2], // 选中图层列表 map: null, // 地图对象 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 maps: [], // 地图图层 parts: [] // 部件图层 } @@ -32,7 +34,10 @@ 'baseUrl', 'partsUrl', 'partsAllUrl', - 'mapUrl' + 'shopUrl', + 'mapUrl', + 'gridUrl', + 'mapDtUrl' ]) }, mounted() { @@ -42,34 +47,18 @@ // 部件图层切换 layerChange(node, checked) { const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } + + if (!checked) { + this.map.removeLayer(this.layerGroups[selectItem.id]) + } else { + this.map.addLayer(this.layerGroups[selectItem.id]) } }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -79,48 +68,147 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图图层 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + this.addGridLayer() // 网格 + this.addShopLayer() // 商户 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + + // 添加默认显示的图层 + this.selectLayers.forEach(item => { + this.map.addLayer(this.layerGroups[item]) + }) + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapDtUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + }, + // 添加网格图层 + addGridLayer: function() { + const gridGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.gridUrl}` } + esri.featureLayer(item).addTo(gridGroup) + + this.layerGroups.push(gridGroup) + }, + // 添加商户图层 + addShopLayer: function() { + const shopGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.shopUrl}` } + const layer = esri.featureLayer(item).addTo(shopGroup) + + const that = this + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + properties.dutyname + '
' + + '
' + properties.objid + '
' + + // '
' + properties.communame + '
' + + // '
' + properties.bgid + '
' + + '
' + properties.deptname + '
' + + '
' + properties.position_ + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + this.layerGroups.push(shopGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + const minZoom = this.baseConfig.layers[index].minZoom === undefined ? 18 : this.baseConfig.layers[index].minZoom + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: minZoom } + const layer = esri.featureLayer(item).addTo(group) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) } } } + + diff --git a/src/views/busAdmin/caseType/detailCaseType.vue b/src/views/busAdmin/caseType/detailCaseType.vue index 38a9cbd..ade5437 100644 --- a/src/views/busAdmin/caseType/detailCaseType.vue +++ b/src/views/busAdmin/caseType/detailCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -25,6 +30,7 @@ + @@ -49,6 +55,7 @@ typeId: '', deptName: '', deptId: '', + num: '', typesTime: [] } } @@ -60,7 +67,7 @@ this.caseTypeForm.typeDetailName = row.typeDetailName this.caseTypeForm.typeDetailCode = row.typeDetailCode this.caseTypeForm.id = row.id - + this.caseTypeForm.num = row.num getCaseTypesTime(this.caseTypeForm.id).then(response => { response.data.rows.forEach(element => { const typeTime = { @@ -70,6 +77,7 @@ hours: element.hours, minutes: element.minutes, deptId: element.deptId, + num: element.num, deptName: element.deptName, edit: false } diff --git a/src/views/busAdmin/caseType/editCaseType.vue b/src/views/busAdmin/caseType/editCaseType.vue index 85415b7..c0e3a08 100644 --- a/src/views/busAdmin/caseType/editCaseType.vue +++ b/src/views/busAdmin/caseType/editCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -59,11 +64,22 @@ + + + @@ -30,14 +30,9 @@ required: true } // 数据 }, - // mounted() { - // debugger - // console.log(this.data.feature) - // }, methods: { // 点击数据项 itemClick() { - console.log('点击item') this.$emit('click', this.data) } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 71147d8..5ae0c05 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -17,7 +17,7 @@ - +
@@ -45,10 +45,15 @@ drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 clearDisabled: true, // 禁用重置按钮 - layers: this.baseConfig.layers, // 所有图层 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层 + baseLayer: [], + layers: [ + { 'id': 0, 'name': '商户', 'type': 'layer', 'domain': [35] }, + { 'id': 1, 'name': '部件', 'type': 'layer', 'domain': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15, 16, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45] } + ], + selectLayers: [0], // 选中图层 maps: [], // 地图图层 parts: [], // 部件图层 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 searchList: [], // 全部查询结果 featureCollection: [], // 选中的图层和Feature featureCollectionLength: 0, // 选中的feature个数 @@ -60,9 +65,8 @@ ...mapGetters([ 'baseUrl', 'partsUrl', - 'partsAllUrl', - 'mapUrl', - 'partsEditUrl' + 'shopUrl', + 'mapUrl' ]) }, destroyed() { @@ -89,18 +93,17 @@ } // 其他不予处理 this.searchLoading = true const results = [] // 存放查询结果列表 - // 遍历所有图层进行查询 - const partsLength = this.parts.length // 全部部件图层数量 - for (let i = 0; i < partsLength; i++) { - const part = this.parts[i] - var str = ['编码', '小类名称', '大类名称'] - var query = esri.query({ url: part.options.url }) + + // 获取是查询部件还是查询商户 + if (this.selectLayers.toString() === '0') { + // 查询商户 + const str = ['objid', 'dutyname', 'position_'] // 查询条件属性 + const query = esri.query({ url: `${this.baseUrl}${this.shopUrl}` }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 if (this.keyword) { // 拼接查询语句 queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') - console.log(queryString) } else { return } @@ -119,18 +122,98 @@ if (featuresLength > 0) { // 遍历所有查询结果，放入results for (const feature of featureCollection.features) { + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + feature.properties.dutyname + '
' + + '
' + feature.properties.objid + '
' + + // '
' + feature.properties.communame + '
' + + // '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname + '
' + + '
' + feature.properties.position_ + '
' + + '
' + results.push({ - layer: part, - feature: feature + name: feature.properties.dutyname, + code: feature.properties.objid, + content: { + title: '地址', + text: feature.properties.position_ + }, + lng: feature.properties.x, + lat: feature.properties.y, + popupStr: popupStr }) } } - // 如果是最后一个图层 - if (i === (partsLength - 1)) { - this.searchList = results - this.searchLoading = false - } + + this.searchList = results + this.searchLoading = false }) + } else if (this.selectLayers.toString() === '1') { + // 查询部件 + // 遍历所有图层进行查询 + const partsLength = this.parts.length // 全部部件图层数量 + for (let i = 0; i < partsLength; i++) { + const part = this.parts[i] + const str = ['objid', 'xl', 'dl'] + const query = esri.query({ url: part.url }) + let queryString = '1=1' // 默认查询语句 + // 如果有关键字 + if (this.keyword) { + // 拼接查询语句 + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') + } else { + return + } + query.where(queryString) + // 如果有查询边界 + if (this.bounds) { + query.within(this.bounds) + } + // 执行查询 + query.run((error, featureCollection, response) => { + if (error) { + console.log(error) + return + } + const featuresLength = featureCollection.features.length + if (featuresLength > 0) { + // 遍历所有查询结果，放入results + for (const feature of featureCollection.features) { + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + feature.properties.dl + ' / ' + feature.properties.xl + '
' + + '
' + feature.properties.objid + '
' + + '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname2 + '
' + + '
' + feature.properties.deptname1 + '
' + + '
' + feature.properties.deptname3 + '
' + + '
' + + results.push({ + name: feature.properties.dl + ' / ' + feature.properties.xl, + code: feature.properties.objid, + content: { + title: '权属部门', + text: feature.properties.deptname2 + }, + lng: feature.geometry.coordinates[0], + lat: feature.geometry.coordinates[1], + popupStr: popupStr + }) + } + } + // 如果是最后一个图层 + if (i === (partsLength - 1)) { + this.searchList = results + this.searchLoading = false + } + }) + } + } else { + this.searchLoading = false } }, // 清空查询 @@ -154,28 +237,16 @@ // 赋予新的查询结果 const currentMarkesLength = data.length for (let i = 0; i < currentMarkesLength; i++) { - const feature = data[i].feature - var icon = this.searchIconList[i] - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) - var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) + const icon = this.searchIconList[i] + const latlng = L.latLng([data[i].lat, data[i].lng]) + const item = L.marker(latlng, { icon: icon }).addTo(this.map) item.on('click', e => { if (item.getPopup()) { item.unbindPopup() } // 绑定弹窗 - const properties = feature.properties - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - item.bindPopup(popup).openPopup(e.latlng) + const popup = L.popup().setContent(data[i].popupStr) + item.bindPopup(popup).openPopup([data[i].lat, data[i].lng]) }) this.currentSearchMarkers.push(item) } @@ -186,10 +257,8 @@ }, // 点击查询列表项，将位置放在中间 clickSearchItem(item, index) { - console.log('clickItem') if (item) { - const feature = item.feature - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) + const latlng = L.latLng([item.lat, item.lng]) let zoom = this.map.getZoom() if (zoom < 19) { zoom = 19 @@ -229,36 +298,18 @@ }) }, // 部件图层切换 - layerChange(node, checked) { - const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } - } + layerChange(node) { + this.$refs.layerRadio.$refs.layerTree.setCheckedKeys([node.id]) + this.selectLayers = [node.id] + + // 清除查询 + this.clearSearch() }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -268,40 +319,64 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + this.map.addLayer(mapDtGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: 18 } + const layer = esri.featureLayer(item).addTo(group) + this.parts.push(item) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) + this.map.addLayer(group) }, // 初始化图标 initIcons() { @@ -310,23 +385,17 @@ const icon = L.icon({ iconUrl: require(`@/assets/global_images/point${i}.png`), iconSize: [25, 25], - iconAnchor: [12.5, 25] + iconAnchor: [12, 25], + popupAnchor: [0, -25] }) this.searchIconList.push(icon) } }, handleCurrentChange(val) { this.offset = val - var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val - this.showlist = this.searchlist.slice(5 * (val - 1), num) + const num = 5 * val >= this.searchList.length ? this.searchList.length : 5 * val + this.showlist = this.searchList.slice(5 * (val - 1), num) this.drawIcon() - }, - // 根据url找到layer - searchLayerByUrl(url) { - const layer = this.parts.filter(item => item.options.url === url)[0] - if (layer) { - this.currentLayer = layer - } } } } @@ -345,8 +414,9 @@ /*}*/ $tableTitleHeight:35px; .leaflet_container{ - width: 100%; - height: 84vh; + width: calc( 100vw - 208px ); + height: calc( 100vh - 158px ); + background-color: white; } .search-total{ background-color: white; width: 300px;height: 35px; @@ -453,3 +523,33 @@ } } + + diff --git a/src/views/baseSource/overview.vue b/src/views/baseSource/overview.vue index 8a3f857..02267ef 100644 --- a/src/views/baseSource/overview.vue +++ b/src/views/baseSource/overview.vue @@ -20,9 +20,11 @@ components: { LayerChoose, ToolsContainer }, data() { return { + baseLayer: [], layers: this.baseConfig.layers, // 图层列表 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层列表 + selectLayers: [0, 1, 2], // 选中图层列表 map: null, // 地图对象 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 maps: [], // 地图图层 parts: [] // 部件图层 } @@ -32,7 +34,10 @@ 'baseUrl', 'partsUrl', 'partsAllUrl', - 'mapUrl' + 'shopUrl', + 'mapUrl', + 'gridUrl', + 'mapDtUrl' ]) }, mounted() { @@ -42,34 +47,18 @@ // 部件图层切换 layerChange(node, checked) { const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } + + if (!checked) { + this.map.removeLayer(this.layerGroups[selectItem.id]) + } else { + this.map.addLayer(this.layerGroups[selectItem.id]) } }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -79,48 +68,147 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图图层 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + this.addGridLayer() // 网格 + this.addShopLayer() // 商户 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + + // 添加默认显示的图层 + this.selectLayers.forEach(item => { + this.map.addLayer(this.layerGroups[item]) + }) + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapDtUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + }, + // 添加网格图层 + addGridLayer: function() { + const gridGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.gridUrl}` } + esri.featureLayer(item).addTo(gridGroup) + + this.layerGroups.push(gridGroup) + }, + // 添加商户图层 + addShopLayer: function() { + const shopGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.shopUrl}` } + const layer = esri.featureLayer(item).addTo(shopGroup) + + const that = this + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + properties.dutyname + '
' + + '
' + properties.objid + '
' + + // '
' + properties.communame + '
' + + // '
' + properties.bgid + '
' + + '
' + properties.deptname + '
' + + '
' + properties.position_ + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + this.layerGroups.push(shopGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + const minZoom = this.baseConfig.layers[index].minZoom === undefined ? 18 : this.baseConfig.layers[index].minZoom + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: minZoom } + const layer = esri.featureLayer(item).addTo(group) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) } } } + + diff --git a/src/views/busAdmin/caseType/detailCaseType.vue b/src/views/busAdmin/caseType/detailCaseType.vue index 38a9cbd..ade5437 100644 --- a/src/views/busAdmin/caseType/detailCaseType.vue +++ b/src/views/busAdmin/caseType/detailCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -25,6 +30,7 @@ + @@ -49,6 +55,7 @@ typeId: '', deptName: '', deptId: '', + num: '', typesTime: [] } } @@ -60,7 +67,7 @@ this.caseTypeForm.typeDetailName = row.typeDetailName this.caseTypeForm.typeDetailCode = row.typeDetailCode this.caseTypeForm.id = row.id - + this.caseTypeForm.num = row.num getCaseTypesTime(this.caseTypeForm.id).then(response => { response.data.rows.forEach(element => { const typeTime = { @@ -70,6 +77,7 @@ hours: element.hours, minutes: element.minutes, deptId: element.deptId, + num: element.num, deptName: element.deptName, edit: false } diff --git a/src/views/busAdmin/caseType/editCaseType.vue b/src/views/busAdmin/caseType/editCaseType.vue index 85415b7..c0e3a08 100644 --- a/src/views/busAdmin/caseType/editCaseType.vue +++ b/src/views/busAdmin/caseType/editCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -59,11 +64,22 @@ + + + @@ -30,14 +30,9 @@ required: true } // 数据 }, - // mounted() { - // debugger - // console.log(this.data.feature) - // }, methods: { // 点击数据项 itemClick() { - console.log('点击item') this.$emit('click', this.data) } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 71147d8..5ae0c05 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -17,7 +17,7 @@ - +
@@ -45,10 +45,15 @@ drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 clearDisabled: true, // 禁用重置按钮 - layers: this.baseConfig.layers, // 所有图层 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层 + baseLayer: [], + layers: [ + { 'id': 0, 'name': '商户', 'type': 'layer', 'domain': [35] }, + { 'id': 1, 'name': '部件', 'type': 'layer', 'domain': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15, 16, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45] } + ], + selectLayers: [0], // 选中图层 maps: [], // 地图图层 parts: [], // 部件图层 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 searchList: [], // 全部查询结果 featureCollection: [], // 选中的图层和Feature featureCollectionLength: 0, // 选中的feature个数 @@ -60,9 +65,8 @@ ...mapGetters([ 'baseUrl', 'partsUrl', - 'partsAllUrl', - 'mapUrl', - 'partsEditUrl' + 'shopUrl', + 'mapUrl' ]) }, destroyed() { @@ -89,18 +93,17 @@ } // 其他不予处理 this.searchLoading = true const results = [] // 存放查询结果列表 - // 遍历所有图层进行查询 - const partsLength = this.parts.length // 全部部件图层数量 - for (let i = 0; i < partsLength; i++) { - const part = this.parts[i] - var str = ['编码', '小类名称', '大类名称'] - var query = esri.query({ url: part.options.url }) + + // 获取是查询部件还是查询商户 + if (this.selectLayers.toString() === '0') { + // 查询商户 + const str = ['objid', 'dutyname', 'position_'] // 查询条件属性 + const query = esri.query({ url: `${this.baseUrl}${this.shopUrl}` }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 if (this.keyword) { // 拼接查询语句 queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') - console.log(queryString) } else { return } @@ -119,18 +122,98 @@ if (featuresLength > 0) { // 遍历所有查询结果，放入results for (const feature of featureCollection.features) { + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + feature.properties.dutyname + '
' + + '
' + feature.properties.objid + '
' + + // '
' + feature.properties.communame + '
' + + // '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname + '
' + + '
' + feature.properties.position_ + '
' + + '
' + results.push({ - layer: part, - feature: feature + name: feature.properties.dutyname, + code: feature.properties.objid, + content: { + title: '地址', + text: feature.properties.position_ + }, + lng: feature.properties.x, + lat: feature.properties.y, + popupStr: popupStr }) } } - // 如果是最后一个图层 - if (i === (partsLength - 1)) { - this.searchList = results - this.searchLoading = false - } + + this.searchList = results + this.searchLoading = false }) + } else if (this.selectLayers.toString() === '1') { + // 查询部件 + // 遍历所有图层进行查询 + const partsLength = this.parts.length // 全部部件图层数量 + for (let i = 0; i < partsLength; i++) { + const part = this.parts[i] + const str = ['objid', 'xl', 'dl'] + const query = esri.query({ url: part.url }) + let queryString = '1=1' // 默认查询语句 + // 如果有关键字 + if (this.keyword) { + // 拼接查询语句 + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') + } else { + return + } + query.where(queryString) + // 如果有查询边界 + if (this.bounds) { + query.within(this.bounds) + } + // 执行查询 + query.run((error, featureCollection, response) => { + if (error) { + console.log(error) + return + } + const featuresLength = featureCollection.features.length + if (featuresLength > 0) { + // 遍历所有查询结果，放入results + for (const feature of featureCollection.features) { + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + feature.properties.dl + ' / ' + feature.properties.xl + '
' + + '
' + feature.properties.objid + '
' + + '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname2 + '
' + + '
' + feature.properties.deptname1 + '
' + + '
' + feature.properties.deptname3 + '
' + + '
' + + results.push({ + name: feature.properties.dl + ' / ' + feature.properties.xl, + code: feature.properties.objid, + content: { + title: '权属部门', + text: feature.properties.deptname2 + }, + lng: feature.geometry.coordinates[0], + lat: feature.geometry.coordinates[1], + popupStr: popupStr + }) + } + } + // 如果是最后一个图层 + if (i === (partsLength - 1)) { + this.searchList = results + this.searchLoading = false + } + }) + } + } else { + this.searchLoading = false } }, // 清空查询 @@ -154,28 +237,16 @@ // 赋予新的查询结果 const currentMarkesLength = data.length for (let i = 0; i < currentMarkesLength; i++) { - const feature = data[i].feature - var icon = this.searchIconList[i] - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) - var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) + const icon = this.searchIconList[i] + const latlng = L.latLng([data[i].lat, data[i].lng]) + const item = L.marker(latlng, { icon: icon }).addTo(this.map) item.on('click', e => { if (item.getPopup()) { item.unbindPopup() } // 绑定弹窗 - const properties = feature.properties - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - item.bindPopup(popup).openPopup(e.latlng) + const popup = L.popup().setContent(data[i].popupStr) + item.bindPopup(popup).openPopup([data[i].lat, data[i].lng]) }) this.currentSearchMarkers.push(item) } @@ -186,10 +257,8 @@ }, // 点击查询列表项，将位置放在中间 clickSearchItem(item, index) { - console.log('clickItem') if (item) { - const feature = item.feature - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) + const latlng = L.latLng([item.lat, item.lng]) let zoom = this.map.getZoom() if (zoom < 19) { zoom = 19 @@ -229,36 +298,18 @@ }) }, // 部件图层切换 - layerChange(node, checked) { - const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } - } + layerChange(node) { + this.$refs.layerRadio.$refs.layerTree.setCheckedKeys([node.id]) + this.selectLayers = [node.id] + + // 清除查询 + this.clearSearch() }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -268,40 +319,64 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + this.map.addLayer(mapDtGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: 18 } + const layer = esri.featureLayer(item).addTo(group) + this.parts.push(item) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) + this.map.addLayer(group) }, // 初始化图标 initIcons() { @@ -310,23 +385,17 @@ const icon = L.icon({ iconUrl: require(`@/assets/global_images/point${i}.png`), iconSize: [25, 25], - iconAnchor: [12.5, 25] + iconAnchor: [12, 25], + popupAnchor: [0, -25] }) this.searchIconList.push(icon) } }, handleCurrentChange(val) { this.offset = val - var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val - this.showlist = this.searchlist.slice(5 * (val - 1), num) + const num = 5 * val >= this.searchList.length ? this.searchList.length : 5 * val + this.showlist = this.searchList.slice(5 * (val - 1), num) this.drawIcon() - }, - // 根据url找到layer - searchLayerByUrl(url) { - const layer = this.parts.filter(item => item.options.url === url)[0] - if (layer) { - this.currentLayer = layer - } } } } @@ -345,8 +414,9 @@ /*}*/ $tableTitleHeight:35px; .leaflet_container{ - width: 100%; - height: 84vh; + width: calc( 100vw - 208px ); + height: calc( 100vh - 158px ); + background-color: white; } .search-total{ background-color: white; width: 300px;height: 35px; @@ -453,3 +523,33 @@ } } + + diff --git a/src/views/baseSource/overview.vue b/src/views/baseSource/overview.vue index 8a3f857..02267ef 100644 --- a/src/views/baseSource/overview.vue +++ b/src/views/baseSource/overview.vue @@ -20,9 +20,11 @@ components: { LayerChoose, ToolsContainer }, data() { return { + baseLayer: [], layers: this.baseConfig.layers, // 图层列表 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层列表 + selectLayers: [0, 1, 2], // 选中图层列表 map: null, // 地图对象 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 maps: [], // 地图图层 parts: [] // 部件图层 } @@ -32,7 +34,10 @@ 'baseUrl', 'partsUrl', 'partsAllUrl', - 'mapUrl' + 'shopUrl', + 'mapUrl', + 'gridUrl', + 'mapDtUrl' ]) }, mounted() { @@ -42,34 +47,18 @@ // 部件图层切换 layerChange(node, checked) { const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } + + if (!checked) { + this.map.removeLayer(this.layerGroups[selectItem.id]) + } else { + this.map.addLayer(this.layerGroups[selectItem.id]) } }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -79,48 +68,147 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图图层 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + this.addGridLayer() // 网格 + this.addShopLayer() // 商户 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + + // 添加默认显示的图层 + this.selectLayers.forEach(item => { + this.map.addLayer(this.layerGroups[item]) + }) + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapDtUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + }, + // 添加网格图层 + addGridLayer: function() { + const gridGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.gridUrl}` } + esri.featureLayer(item).addTo(gridGroup) + + this.layerGroups.push(gridGroup) + }, + // 添加商户图层 + addShopLayer: function() { + const shopGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.shopUrl}` } + const layer = esri.featureLayer(item).addTo(shopGroup) + + const that = this + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + properties.dutyname + '
' + + '
' + properties.objid + '
' + + // '
' + properties.communame + '
' + + // '
' + properties.bgid + '
' + + '
' + properties.deptname + '
' + + '
' + properties.position_ + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + this.layerGroups.push(shopGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + const minZoom = this.baseConfig.layers[index].minZoom === undefined ? 18 : this.baseConfig.layers[index].minZoom + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: minZoom } + const layer = esri.featureLayer(item).addTo(group) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) } } } + + diff --git a/src/views/busAdmin/caseType/detailCaseType.vue b/src/views/busAdmin/caseType/detailCaseType.vue index 38a9cbd..ade5437 100644 --- a/src/views/busAdmin/caseType/detailCaseType.vue +++ b/src/views/busAdmin/caseType/detailCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -25,6 +30,7 @@ + @@ -49,6 +55,7 @@ typeId: '', deptName: '', deptId: '', + num: '', typesTime: [] } } @@ -60,7 +67,7 @@ this.caseTypeForm.typeDetailName = row.typeDetailName this.caseTypeForm.typeDetailCode = row.typeDetailCode this.caseTypeForm.id = row.id - + this.caseTypeForm.num = row.num getCaseTypesTime(this.caseTypeForm.id).then(response => { response.data.rows.forEach(element => { const typeTime = { @@ -70,6 +77,7 @@ hours: element.hours, minutes: element.minutes, deptId: element.deptId, + num: element.num, deptName: element.deptName, edit: false } diff --git a/src/views/busAdmin/caseType/editCaseType.vue b/src/views/busAdmin/caseType/editCaseType.vue index 85415b7..c0e3a08 100644 --- a/src/views/busAdmin/caseType/editCaseType.vue +++ b/src/views/busAdmin/caseType/editCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -59,11 +64,22 @@ + + + @@ -30,14 +30,9 @@ required: true } // 数据 }, - // mounted() { - // debugger - // console.log(this.data.feature) - // }, methods: { // 点击数据项 itemClick() { - console.log('点击item') this.$emit('click', this.data) } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 71147d8..5ae0c05 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -17,7 +17,7 @@ - +
@@ -45,10 +45,15 @@ drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 clearDisabled: true, // 禁用重置按钮 - layers: this.baseConfig.layers, // 所有图层 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层 + baseLayer: [], + layers: [ + { 'id': 0, 'name': '商户', 'type': 'layer', 'domain': [35] }, + { 'id': 1, 'name': '部件', 'type': 'layer', 'domain': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15, 16, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45] } + ], + selectLayers: [0], // 选中图层 maps: [], // 地图图层 parts: [], // 部件图层 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 searchList: [], // 全部查询结果 featureCollection: [], // 选中的图层和Feature featureCollectionLength: 0, // 选中的feature个数 @@ -60,9 +65,8 @@ ...mapGetters([ 'baseUrl', 'partsUrl', - 'partsAllUrl', - 'mapUrl', - 'partsEditUrl' + 'shopUrl', + 'mapUrl' ]) }, destroyed() { @@ -89,18 +93,17 @@ } // 其他不予处理 this.searchLoading = true const results = [] // 存放查询结果列表 - // 遍历所有图层进行查询 - const partsLength = this.parts.length // 全部部件图层数量 - for (let i = 0; i < partsLength; i++) { - const part = this.parts[i] - var str = ['编码', '小类名称', '大类名称'] - var query = esri.query({ url: part.options.url }) + + // 获取是查询部件还是查询商户 + if (this.selectLayers.toString() === '0') { + // 查询商户 + const str = ['objid', 'dutyname', 'position_'] // 查询条件属性 + const query = esri.query({ url: `${this.baseUrl}${this.shopUrl}` }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 if (this.keyword) { // 拼接查询语句 queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') - console.log(queryString) } else { return } @@ -119,18 +122,98 @@ if (featuresLength > 0) { // 遍历所有查询结果，放入results for (const feature of featureCollection.features) { + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + feature.properties.dutyname + '
' + + '
' + feature.properties.objid + '
' + + // '
' + feature.properties.communame + '
' + + // '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname + '
' + + '
' + feature.properties.position_ + '
' + + '
' + results.push({ - layer: part, - feature: feature + name: feature.properties.dutyname, + code: feature.properties.objid, + content: { + title: '地址', + text: feature.properties.position_ + }, + lng: feature.properties.x, + lat: feature.properties.y, + popupStr: popupStr }) } } - // 如果是最后一个图层 - if (i === (partsLength - 1)) { - this.searchList = results - this.searchLoading = false - } + + this.searchList = results + this.searchLoading = false }) + } else if (this.selectLayers.toString() === '1') { + // 查询部件 + // 遍历所有图层进行查询 + const partsLength = this.parts.length // 全部部件图层数量 + for (let i = 0; i < partsLength; i++) { + const part = this.parts[i] + const str = ['objid', 'xl', 'dl'] + const query = esri.query({ url: part.url }) + let queryString = '1=1' // 默认查询语句 + // 如果有关键字 + if (this.keyword) { + // 拼接查询语句 + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') + } else { + return + } + query.where(queryString) + // 如果有查询边界 + if (this.bounds) { + query.within(this.bounds) + } + // 执行查询 + query.run((error, featureCollection, response) => { + if (error) { + console.log(error) + return + } + const featuresLength = featureCollection.features.length + if (featuresLength > 0) { + // 遍历所有查询结果，放入results + for (const feature of featureCollection.features) { + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + feature.properties.dl + ' / ' + feature.properties.xl + '
' + + '
' + feature.properties.objid + '
' + + '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname2 + '
' + + '
' + feature.properties.deptname1 + '
' + + '
' + feature.properties.deptname3 + '
' + + '
' + + results.push({ + name: feature.properties.dl + ' / ' + feature.properties.xl, + code: feature.properties.objid, + content: { + title: '权属部门', + text: feature.properties.deptname2 + }, + lng: feature.geometry.coordinates[0], + lat: feature.geometry.coordinates[1], + popupStr: popupStr + }) + } + } + // 如果是最后一个图层 + if (i === (partsLength - 1)) { + this.searchList = results + this.searchLoading = false + } + }) + } + } else { + this.searchLoading = false } }, // 清空查询 @@ -154,28 +237,16 @@ // 赋予新的查询结果 const currentMarkesLength = data.length for (let i = 0; i < currentMarkesLength; i++) { - const feature = data[i].feature - var icon = this.searchIconList[i] - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) - var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) + const icon = this.searchIconList[i] + const latlng = L.latLng([data[i].lat, data[i].lng]) + const item = L.marker(latlng, { icon: icon }).addTo(this.map) item.on('click', e => { if (item.getPopup()) { item.unbindPopup() } // 绑定弹窗 - const properties = feature.properties - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - item.bindPopup(popup).openPopup(e.latlng) + const popup = L.popup().setContent(data[i].popupStr) + item.bindPopup(popup).openPopup([data[i].lat, data[i].lng]) }) this.currentSearchMarkers.push(item) } @@ -186,10 +257,8 @@ }, // 点击查询列表项，将位置放在中间 clickSearchItem(item, index) { - console.log('clickItem') if (item) { - const feature = item.feature - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) + const latlng = L.latLng([item.lat, item.lng]) let zoom = this.map.getZoom() if (zoom < 19) { zoom = 19 @@ -229,36 +298,18 @@ }) }, // 部件图层切换 - layerChange(node, checked) { - const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } - } + layerChange(node) { + this.$refs.layerRadio.$refs.layerTree.setCheckedKeys([node.id]) + this.selectLayers = [node.id] + + // 清除查询 + this.clearSearch() }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -268,40 +319,64 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + this.map.addLayer(mapDtGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: 18 } + const layer = esri.featureLayer(item).addTo(group) + this.parts.push(item) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) + this.map.addLayer(group) }, // 初始化图标 initIcons() { @@ -310,23 +385,17 @@ const icon = L.icon({ iconUrl: require(`@/assets/global_images/point${i}.png`), iconSize: [25, 25], - iconAnchor: [12.5, 25] + iconAnchor: [12, 25], + popupAnchor: [0, -25] }) this.searchIconList.push(icon) } }, handleCurrentChange(val) { this.offset = val - var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val - this.showlist = this.searchlist.slice(5 * (val - 1), num) + const num = 5 * val >= this.searchList.length ? this.searchList.length : 5 * val + this.showlist = this.searchList.slice(5 * (val - 1), num) this.drawIcon() - }, - // 根据url找到layer - searchLayerByUrl(url) { - const layer = this.parts.filter(item => item.options.url === url)[0] - if (layer) { - this.currentLayer = layer - } } } } @@ -345,8 +414,9 @@ /*}*/ $tableTitleHeight:35px; .leaflet_container{ - width: 100%; - height: 84vh; + width: calc( 100vw - 208px ); + height: calc( 100vh - 158px ); + background-color: white; } .search-total{ background-color: white; width: 300px;height: 35px; @@ -453,3 +523,33 @@ } } + + diff --git a/src/views/baseSource/overview.vue b/src/views/baseSource/overview.vue index 8a3f857..02267ef 100644 --- a/src/views/baseSource/overview.vue +++ b/src/views/baseSource/overview.vue @@ -20,9 +20,11 @@ components: { LayerChoose, ToolsContainer }, data() { return { + baseLayer: [], layers: this.baseConfig.layers, // 图层列表 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层列表 + selectLayers: [0, 1, 2], // 选中图层列表 map: null, // 地图对象 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 maps: [], // 地图图层 parts: [] // 部件图层 } @@ -32,7 +34,10 @@ 'baseUrl', 'partsUrl', 'partsAllUrl', - 'mapUrl' + 'shopUrl', + 'mapUrl', + 'gridUrl', + 'mapDtUrl' ]) }, mounted() { @@ -42,34 +47,18 @@ // 部件图层切换 layerChange(node, checked) { const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } + + if (!checked) { + this.map.removeLayer(this.layerGroups[selectItem.id]) + } else { + this.map.addLayer(this.layerGroups[selectItem.id]) } }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -79,48 +68,147 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图图层 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + this.addGridLayer() // 网格 + this.addShopLayer() // 商户 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + + // 添加默认显示的图层 + this.selectLayers.forEach(item => { + this.map.addLayer(this.layerGroups[item]) + }) + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapDtUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + }, + // 添加网格图层 + addGridLayer: function() { + const gridGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.gridUrl}` } + esri.featureLayer(item).addTo(gridGroup) + + this.layerGroups.push(gridGroup) + }, + // 添加商户图层 + addShopLayer: function() { + const shopGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.shopUrl}` } + const layer = esri.featureLayer(item).addTo(shopGroup) + + const that = this + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + properties.dutyname + '
' + + '
' + properties.objid + '
' + + // '
' + properties.communame + '
' + + // '
' + properties.bgid + '
' + + '
' + properties.deptname + '
' + + '
' + properties.position_ + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + this.layerGroups.push(shopGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + const minZoom = this.baseConfig.layers[index].minZoom === undefined ? 18 : this.baseConfig.layers[index].minZoom + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: minZoom } + const layer = esri.featureLayer(item).addTo(group) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) } } } + + diff --git a/src/views/busAdmin/caseType/detailCaseType.vue b/src/views/busAdmin/caseType/detailCaseType.vue index 38a9cbd..ade5437 100644 --- a/src/views/busAdmin/caseType/detailCaseType.vue +++ b/src/views/busAdmin/caseType/detailCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -25,6 +30,7 @@ + @@ -49,6 +55,7 @@ typeId: '', deptName: '', deptId: '', + num: '', typesTime: [] } } @@ -60,7 +67,7 @@ this.caseTypeForm.typeDetailName = row.typeDetailName this.caseTypeForm.typeDetailCode = row.typeDetailCode this.caseTypeForm.id = row.id - + this.caseTypeForm.num = row.num getCaseTypesTime(this.caseTypeForm.id).then(response => { response.data.rows.forEach(element => { const typeTime = { @@ -70,6 +77,7 @@ hours: element.hours, minutes: element.minutes, deptId: element.deptId, + num: element.num, deptName: element.deptName, edit: false } diff --git a/src/views/busAdmin/caseType/editCaseType.vue b/src/views/busAdmin/caseType/editCaseType.vue index 85415b7..c0e3a08 100644 --- a/src/views/busAdmin/caseType/editCaseType.vue +++ b/src/views/busAdmin/caseType/editCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -59,11 +64,22 @@ + + + @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -30,14 +30,9 @@ required: true } // 数据 }, - // mounted() { - // debugger - // console.log(this.data.feature) - // }, methods: { // 点击数据项 itemClick() { - console.log('点击item') this.$emit('click', this.data) } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 71147d8..5ae0c05 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -17,7 +17,7 @@ - +
@@ -45,10 +45,15 @@ drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 clearDisabled: true, // 禁用重置按钮 - layers: this.baseConfig.layers, // 所有图层 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层 + baseLayer: [], + layers: [ + { 'id': 0, 'name': '商户', 'type': 'layer', 'domain': [35] }, + { 'id': 1, 'name': '部件', 'type': 'layer', 'domain': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15, 16, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45] } + ], + selectLayers: [0], // 选中图层 maps: [], // 地图图层 parts: [], // 部件图层 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 searchList: [], // 全部查询结果 featureCollection: [], // 选中的图层和Feature featureCollectionLength: 0, // 选中的feature个数 @@ -60,9 +65,8 @@ ...mapGetters([ 'baseUrl', 'partsUrl', - 'partsAllUrl', - 'mapUrl', - 'partsEditUrl' + 'shopUrl', + 'mapUrl' ]) }, destroyed() { @@ -89,18 +93,17 @@ } // 其他不予处理 this.searchLoading = true const results = [] // 存放查询结果列表 - // 遍历所有图层进行查询 - const partsLength = this.parts.length // 全部部件图层数量 - for (let i = 0; i < partsLength; i++) { - const part = this.parts[i] - var str = ['编码', '小类名称', '大类名称'] - var query = esri.query({ url: part.options.url }) + + // 获取是查询部件还是查询商户 + if (this.selectLayers.toString() === '0') { + // 查询商户 + const str = ['objid', 'dutyname', 'position_'] // 查询条件属性 + const query = esri.query({ url: `${this.baseUrl}${this.shopUrl}` }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 if (this.keyword) { // 拼接查询语句 queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') - console.log(queryString) } else { return } @@ -119,18 +122,98 @@ if (featuresLength > 0) { // 遍历所有查询结果，放入results for (const feature of featureCollection.features) { + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + feature.properties.dutyname + '
' + + '
' + feature.properties.objid + '
' + + // '
' + feature.properties.communame + '
' + + // '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname + '
' + + '
' + feature.properties.position_ + '
' + + '
' + results.push({ - layer: part, - feature: feature + name: feature.properties.dutyname, + code: feature.properties.objid, + content: { + title: '地址', + text: feature.properties.position_ + }, + lng: feature.properties.x, + lat: feature.properties.y, + popupStr: popupStr }) } } - // 如果是最后一个图层 - if (i === (partsLength - 1)) { - this.searchList = results - this.searchLoading = false - } + + this.searchList = results + this.searchLoading = false }) + } else if (this.selectLayers.toString() === '1') { + // 查询部件 + // 遍历所有图层进行查询 + const partsLength = this.parts.length // 全部部件图层数量 + for (let i = 0; i < partsLength; i++) { + const part = this.parts[i] + const str = ['objid', 'xl', 'dl'] + const query = esri.query({ url: part.url }) + let queryString = '1=1' // 默认查询语句 + // 如果有关键字 + if (this.keyword) { + // 拼接查询语句 + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') + } else { + return + } + query.where(queryString) + // 如果有查询边界 + if (this.bounds) { + query.within(this.bounds) + } + // 执行查询 + query.run((error, featureCollection, response) => { + if (error) { + console.log(error) + return + } + const featuresLength = featureCollection.features.length + if (featuresLength > 0) { + // 遍历所有查询结果，放入results + for (const feature of featureCollection.features) { + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + feature.properties.dl + ' / ' + feature.properties.xl + '
' + + '
' + feature.properties.objid + '
' + + '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname2 + '
' + + '
' + feature.properties.deptname1 + '
' + + '
' + feature.properties.deptname3 + '
' + + '
' + + results.push({ + name: feature.properties.dl + ' / ' + feature.properties.xl, + code: feature.properties.objid, + content: { + title: '权属部门', + text: feature.properties.deptname2 + }, + lng: feature.geometry.coordinates[0], + lat: feature.geometry.coordinates[1], + popupStr: popupStr + }) + } + } + // 如果是最后一个图层 + if (i === (partsLength - 1)) { + this.searchList = results + this.searchLoading = false + } + }) + } + } else { + this.searchLoading = false } }, // 清空查询 @@ -154,28 +237,16 @@ // 赋予新的查询结果 const currentMarkesLength = data.length for (let i = 0; i < currentMarkesLength; i++) { - const feature = data[i].feature - var icon = this.searchIconList[i] - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) - var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) + const icon = this.searchIconList[i] + const latlng = L.latLng([data[i].lat, data[i].lng]) + const item = L.marker(latlng, { icon: icon }).addTo(this.map) item.on('click', e => { if (item.getPopup()) { item.unbindPopup() } // 绑定弹窗 - const properties = feature.properties - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - item.bindPopup(popup).openPopup(e.latlng) + const popup = L.popup().setContent(data[i].popupStr) + item.bindPopup(popup).openPopup([data[i].lat, data[i].lng]) }) this.currentSearchMarkers.push(item) } @@ -186,10 +257,8 @@ }, // 点击查询列表项，将位置放在中间 clickSearchItem(item, index) { - console.log('clickItem') if (item) { - const feature = item.feature - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) + const latlng = L.latLng([item.lat, item.lng]) let zoom = this.map.getZoom() if (zoom < 19) { zoom = 19 @@ -229,36 +298,18 @@ }) }, // 部件图层切换 - layerChange(node, checked) { - const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } - } + layerChange(node) { + this.$refs.layerRadio.$refs.layerTree.setCheckedKeys([node.id]) + this.selectLayers = [node.id] + + // 清除查询 + this.clearSearch() }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -268,40 +319,64 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + this.map.addLayer(mapDtGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: 18 } + const layer = esri.featureLayer(item).addTo(group) + this.parts.push(item) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) + this.map.addLayer(group) }, // 初始化图标 initIcons() { @@ -310,23 +385,17 @@ const icon = L.icon({ iconUrl: require(`@/assets/global_images/point${i}.png`), iconSize: [25, 25], - iconAnchor: [12.5, 25] + iconAnchor: [12, 25], + popupAnchor: [0, -25] }) this.searchIconList.push(icon) } }, handleCurrentChange(val) { this.offset = val - var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val - this.showlist = this.searchlist.slice(5 * (val - 1), num) + const num = 5 * val >= this.searchList.length ? this.searchList.length : 5 * val + this.showlist = this.searchList.slice(5 * (val - 1), num) this.drawIcon() - }, - // 根据url找到layer - searchLayerByUrl(url) { - const layer = this.parts.filter(item => item.options.url === url)[0] - if (layer) { - this.currentLayer = layer - } } } } @@ -345,8 +414,9 @@ /*}*/ $tableTitleHeight:35px; .leaflet_container{ - width: 100%; - height: 84vh; + width: calc( 100vw - 208px ); + height: calc( 100vh - 158px ); + background-color: white; } .search-total{ background-color: white; width: 300px;height: 35px; @@ -453,3 +523,33 @@ } } + + diff --git a/src/views/baseSource/overview.vue b/src/views/baseSource/overview.vue index 8a3f857..02267ef 100644 --- a/src/views/baseSource/overview.vue +++ b/src/views/baseSource/overview.vue @@ -20,9 +20,11 @@ components: { LayerChoose, ToolsContainer }, data() { return { + baseLayer: [], layers: this.baseConfig.layers, // 图层列表 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层列表 + selectLayers: [0, 1, 2], // 选中图层列表 map: null, // 地图对象 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 maps: [], // 地图图层 parts: [] // 部件图层 } @@ -32,7 +34,10 @@ 'baseUrl', 'partsUrl', 'partsAllUrl', - 'mapUrl' + 'shopUrl', + 'mapUrl', + 'gridUrl', + 'mapDtUrl' ]) }, mounted() { @@ -42,34 +47,18 @@ // 部件图层切换 layerChange(node, checked) { const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } + + if (!checked) { + this.map.removeLayer(this.layerGroups[selectItem.id]) + } else { + this.map.addLayer(this.layerGroups[selectItem.id]) } }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -79,48 +68,147 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图图层 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + this.addGridLayer() // 网格 + this.addShopLayer() // 商户 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + + // 添加默认显示的图层 + this.selectLayers.forEach(item => { + this.map.addLayer(this.layerGroups[item]) + }) + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapDtUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + }, + // 添加网格图层 + addGridLayer: function() { + const gridGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.gridUrl}` } + esri.featureLayer(item).addTo(gridGroup) + + this.layerGroups.push(gridGroup) + }, + // 添加商户图层 + addShopLayer: function() { + const shopGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.shopUrl}` } + const layer = esri.featureLayer(item).addTo(shopGroup) + + const that = this + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + properties.dutyname + '
' + + '
' + properties.objid + '
' + + // '
' + properties.communame + '
' + + // '
' + properties.bgid + '
' + + '
' + properties.deptname + '
' + + '
' + properties.position_ + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + this.layerGroups.push(shopGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + const minZoom = this.baseConfig.layers[index].minZoom === undefined ? 18 : this.baseConfig.layers[index].minZoom + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: minZoom } + const layer = esri.featureLayer(item).addTo(group) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) } } } + + diff --git a/src/views/busAdmin/caseType/detailCaseType.vue b/src/views/busAdmin/caseType/detailCaseType.vue index 38a9cbd..ade5437 100644 --- a/src/views/busAdmin/caseType/detailCaseType.vue +++ b/src/views/busAdmin/caseType/detailCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -25,6 +30,7 @@ + @@ -49,6 +55,7 @@ typeId: '', deptName: '', deptId: '', + num: '', typesTime: [] } } @@ -60,7 +67,7 @@ this.caseTypeForm.typeDetailName = row.typeDetailName this.caseTypeForm.typeDetailCode = row.typeDetailCode this.caseTypeForm.id = row.id - + this.caseTypeForm.num = row.num getCaseTypesTime(this.caseTypeForm.id).then(response => { response.data.rows.forEach(element => { const typeTime = { @@ -70,6 +77,7 @@ hours: element.hours, minutes: element.minutes, deptId: element.deptId, + num: element.num, deptName: element.deptName, edit: false } diff --git a/src/views/busAdmin/caseType/editCaseType.vue b/src/views/busAdmin/caseType/editCaseType.vue index 85415b7..c0e3a08 100644 --- a/src/views/busAdmin/caseType/editCaseType.vue +++ b/src/views/busAdmin/caseType/editCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -59,11 +64,22 @@ + + + @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -30,14 +30,9 @@ required: true } // 数据 }, - // mounted() { - // debugger - // console.log(this.data.feature) - // }, methods: { // 点击数据项 itemClick() { - console.log('点击item') this.$emit('click', this.data) } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 71147d8..5ae0c05 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -17,7 +17,7 @@ - +
@@ -45,10 +45,15 @@ drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 clearDisabled: true, // 禁用重置按钮 - layers: this.baseConfig.layers, // 所有图层 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层 + baseLayer: [], + layers: [ + { 'id': 0, 'name': '商户', 'type': 'layer', 'domain': [35] }, + { 'id': 1, 'name': '部件', 'type': 'layer', 'domain': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15, 16, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45] } + ], + selectLayers: [0], // 选中图层 maps: [], // 地图图层 parts: [], // 部件图层 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 searchList: [], // 全部查询结果 featureCollection: [], // 选中的图层和Feature featureCollectionLength: 0, // 选中的feature个数 @@ -60,9 +65,8 @@ ...mapGetters([ 'baseUrl', 'partsUrl', - 'partsAllUrl', - 'mapUrl', - 'partsEditUrl' + 'shopUrl', + 'mapUrl' ]) }, destroyed() { @@ -89,18 +93,17 @@ } // 其他不予处理 this.searchLoading = true const results = [] // 存放查询结果列表 - // 遍历所有图层进行查询 - const partsLength = this.parts.length // 全部部件图层数量 - for (let i = 0; i < partsLength; i++) { - const part = this.parts[i] - var str = ['编码', '小类名称', '大类名称'] - var query = esri.query({ url: part.options.url }) + + // 获取是查询部件还是查询商户 + if (this.selectLayers.toString() === '0') { + // 查询商户 + const str = ['objid', 'dutyname', 'position_'] // 查询条件属性 + const query = esri.query({ url: `${this.baseUrl}${this.shopUrl}` }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 if (this.keyword) { // 拼接查询语句 queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') - console.log(queryString) } else { return } @@ -119,18 +122,98 @@ if (featuresLength > 0) { // 遍历所有查询结果，放入results for (const feature of featureCollection.features) { + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + feature.properties.dutyname + '
' + + '
' + feature.properties.objid + '
' + + // '
' + feature.properties.communame + '
' + + // '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname + '
' + + '
' + feature.properties.position_ + '
' + + '
' + results.push({ - layer: part, - feature: feature + name: feature.properties.dutyname, + code: feature.properties.objid, + content: { + title: '地址', + text: feature.properties.position_ + }, + lng: feature.properties.x, + lat: feature.properties.y, + popupStr: popupStr }) } } - // 如果是最后一个图层 - if (i === (partsLength - 1)) { - this.searchList = results - this.searchLoading = false - } + + this.searchList = results + this.searchLoading = false }) + } else if (this.selectLayers.toString() === '1') { + // 查询部件 + // 遍历所有图层进行查询 + const partsLength = this.parts.length // 全部部件图层数量 + for (let i = 0; i < partsLength; i++) { + const part = this.parts[i] + const str = ['objid', 'xl', 'dl'] + const query = esri.query({ url: part.url }) + let queryString = '1=1' // 默认查询语句 + // 如果有关键字 + if (this.keyword) { + // 拼接查询语句 + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') + } else { + return + } + query.where(queryString) + // 如果有查询边界 + if (this.bounds) { + query.within(this.bounds) + } + // 执行查询 + query.run((error, featureCollection, response) => { + if (error) { + console.log(error) + return + } + const featuresLength = featureCollection.features.length + if (featuresLength > 0) { + // 遍历所有查询结果，放入results + for (const feature of featureCollection.features) { + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + feature.properties.dl + ' / ' + feature.properties.xl + '
' + + '
' + feature.properties.objid + '
' + + '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname2 + '
' + + '
' + feature.properties.deptname1 + '
' + + '
' + feature.properties.deptname3 + '
' + + '
' + + results.push({ + name: feature.properties.dl + ' / ' + feature.properties.xl, + code: feature.properties.objid, + content: { + title: '权属部门', + text: feature.properties.deptname2 + }, + lng: feature.geometry.coordinates[0], + lat: feature.geometry.coordinates[1], + popupStr: popupStr + }) + } + } + // 如果是最后一个图层 + if (i === (partsLength - 1)) { + this.searchList = results + this.searchLoading = false + } + }) + } + } else { + this.searchLoading = false } }, // 清空查询 @@ -154,28 +237,16 @@ // 赋予新的查询结果 const currentMarkesLength = data.length for (let i = 0; i < currentMarkesLength; i++) { - const feature = data[i].feature - var icon = this.searchIconList[i] - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) - var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) + const icon = this.searchIconList[i] + const latlng = L.latLng([data[i].lat, data[i].lng]) + const item = L.marker(latlng, { icon: icon }).addTo(this.map) item.on('click', e => { if (item.getPopup()) { item.unbindPopup() } // 绑定弹窗 - const properties = feature.properties - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - item.bindPopup(popup).openPopup(e.latlng) + const popup = L.popup().setContent(data[i].popupStr) + item.bindPopup(popup).openPopup([data[i].lat, data[i].lng]) }) this.currentSearchMarkers.push(item) } @@ -186,10 +257,8 @@ }, // 点击查询列表项，将位置放在中间 clickSearchItem(item, index) { - console.log('clickItem') if (item) { - const feature = item.feature - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) + const latlng = L.latLng([item.lat, item.lng]) let zoom = this.map.getZoom() if (zoom < 19) { zoom = 19 @@ -229,36 +298,18 @@ }) }, // 部件图层切换 - layerChange(node, checked) { - const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } - } + layerChange(node) { + this.$refs.layerRadio.$refs.layerTree.setCheckedKeys([node.id]) + this.selectLayers = [node.id] + + // 清除查询 + this.clearSearch() }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -268,40 +319,64 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + this.map.addLayer(mapDtGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: 18 } + const layer = esri.featureLayer(item).addTo(group) + this.parts.push(item) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) + this.map.addLayer(group) }, // 初始化图标 initIcons() { @@ -310,23 +385,17 @@ const icon = L.icon({ iconUrl: require(`@/assets/global_images/point${i}.png`), iconSize: [25, 25], - iconAnchor: [12.5, 25] + iconAnchor: [12, 25], + popupAnchor: [0, -25] }) this.searchIconList.push(icon) } }, handleCurrentChange(val) { this.offset = val - var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val - this.showlist = this.searchlist.slice(5 * (val - 1), num) + const num = 5 * val >= this.searchList.length ? this.searchList.length : 5 * val + this.showlist = this.searchList.slice(5 * (val - 1), num) this.drawIcon() - }, - // 根据url找到layer - searchLayerByUrl(url) { - const layer = this.parts.filter(item => item.options.url === url)[0] - if (layer) { - this.currentLayer = layer - } } } } @@ -345,8 +414,9 @@ /*}*/ $tableTitleHeight:35px; .leaflet_container{ - width: 100%; - height: 84vh; + width: calc( 100vw - 208px ); + height: calc( 100vh - 158px ); + background-color: white; } .search-total{ background-color: white; width: 300px;height: 35px; @@ -453,3 +523,33 @@ } } + + diff --git a/src/views/baseSource/overview.vue b/src/views/baseSource/overview.vue index 8a3f857..02267ef 100644 --- a/src/views/baseSource/overview.vue +++ b/src/views/baseSource/overview.vue @@ -20,9 +20,11 @@ components: { LayerChoose, ToolsContainer }, data() { return { + baseLayer: [], layers: this.baseConfig.layers, // 图层列表 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层列表 + selectLayers: [0, 1, 2], // 选中图层列表 map: null, // 地图对象 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 maps: [], // 地图图层 parts: [] // 部件图层 } @@ -32,7 +34,10 @@ 'baseUrl', 'partsUrl', 'partsAllUrl', - 'mapUrl' + 'shopUrl', + 'mapUrl', + 'gridUrl', + 'mapDtUrl' ]) }, mounted() { @@ -42,34 +47,18 @@ // 部件图层切换 layerChange(node, checked) { const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } + + if (!checked) { + this.map.removeLayer(this.layerGroups[selectItem.id]) + } else { + this.map.addLayer(this.layerGroups[selectItem.id]) } }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -79,48 +68,147 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图图层 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + this.addGridLayer() // 网格 + this.addShopLayer() // 商户 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + + // 添加默认显示的图层 + this.selectLayers.forEach(item => { + this.map.addLayer(this.layerGroups[item]) + }) + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapDtUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + }, + // 添加网格图层 + addGridLayer: function() { + const gridGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.gridUrl}` } + esri.featureLayer(item).addTo(gridGroup) + + this.layerGroups.push(gridGroup) + }, + // 添加商户图层 + addShopLayer: function() { + const shopGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.shopUrl}` } + const layer = esri.featureLayer(item).addTo(shopGroup) + + const that = this + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + properties.dutyname + '
' + + '
' + properties.objid + '
' + + // '
' + properties.communame + '
' + + // '
' + properties.bgid + '
' + + '
' + properties.deptname + '
' + + '
' + properties.position_ + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + this.layerGroups.push(shopGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + const minZoom = this.baseConfig.layers[index].minZoom === undefined ? 18 : this.baseConfig.layers[index].minZoom + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: minZoom } + const layer = esri.featureLayer(item).addTo(group) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) } } } + + diff --git a/src/views/busAdmin/caseType/detailCaseType.vue b/src/views/busAdmin/caseType/detailCaseType.vue index 38a9cbd..ade5437 100644 --- a/src/views/busAdmin/caseType/detailCaseType.vue +++ b/src/views/busAdmin/caseType/detailCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -25,6 +30,7 @@ + @@ -49,6 +55,7 @@ typeId: '', deptName: '', deptId: '', + num: '', typesTime: [] } } @@ -60,7 +67,7 @@ this.caseTypeForm.typeDetailName = row.typeDetailName this.caseTypeForm.typeDetailCode = row.typeDetailCode this.caseTypeForm.id = row.id - + this.caseTypeForm.num = row.num getCaseTypesTime(this.caseTypeForm.id).then(response => { response.data.rows.forEach(element => { const typeTime = { @@ -70,6 +77,7 @@ hours: element.hours, minutes: element.minutes, deptId: element.deptId, + num: element.num, deptName: element.deptName, edit: false } diff --git a/src/views/busAdmin/caseType/editCaseType.vue b/src/views/busAdmin/caseType/editCaseType.vue index 85415b7..c0e3a08 100644 --- a/src/views/busAdmin/caseType/editCaseType.vue +++ b/src/views/busAdmin/caseType/editCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -59,11 +64,22 @@ + + + @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -30,14 +30,9 @@ required: true } // 数据 }, - // mounted() { - // debugger - // console.log(this.data.feature) - // }, methods: { // 点击数据项 itemClick() { - console.log('点击item') this.$emit('click', this.data) } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 71147d8..5ae0c05 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -17,7 +17,7 @@ - +
@@ -45,10 +45,15 @@ drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 clearDisabled: true, // 禁用重置按钮 - layers: this.baseConfig.layers, // 所有图层 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层 + baseLayer: [], + layers: [ + { 'id': 0, 'name': '商户', 'type': 'layer', 'domain': [35] }, + { 'id': 1, 'name': '部件', 'type': 'layer', 'domain': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15, 16, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45] } + ], + selectLayers: [0], // 选中图层 maps: [], // 地图图层 parts: [], // 部件图层 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 searchList: [], // 全部查询结果 featureCollection: [], // 选中的图层和Feature featureCollectionLength: 0, // 选中的feature个数 @@ -60,9 +65,8 @@ ...mapGetters([ 'baseUrl', 'partsUrl', - 'partsAllUrl', - 'mapUrl', - 'partsEditUrl' + 'shopUrl', + 'mapUrl' ]) }, destroyed() { @@ -89,18 +93,17 @@ } // 其他不予处理 this.searchLoading = true const results = [] // 存放查询结果列表 - // 遍历所有图层进行查询 - const partsLength = this.parts.length // 全部部件图层数量 - for (let i = 0; i < partsLength; i++) { - const part = this.parts[i] - var str = ['编码', '小类名称', '大类名称'] - var query = esri.query({ url: part.options.url }) + + // 获取是查询部件还是查询商户 + if (this.selectLayers.toString() === '0') { + // 查询商户 + const str = ['objid', 'dutyname', 'position_'] // 查询条件属性 + const query = esri.query({ url: `${this.baseUrl}${this.shopUrl}` }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 if (this.keyword) { // 拼接查询语句 queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') - console.log(queryString) } else { return } @@ -119,18 +122,98 @@ if (featuresLength > 0) { // 遍历所有查询结果，放入results for (const feature of featureCollection.features) { + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + feature.properties.dutyname + '
' + + '
' + feature.properties.objid + '
' + + // '
' + feature.properties.communame + '
' + + // '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname + '
' + + '
' + feature.properties.position_ + '
' + + '
' + results.push({ - layer: part, - feature: feature + name: feature.properties.dutyname, + code: feature.properties.objid, + content: { + title: '地址', + text: feature.properties.position_ + }, + lng: feature.properties.x, + lat: feature.properties.y, + popupStr: popupStr }) } } - // 如果是最后一个图层 - if (i === (partsLength - 1)) { - this.searchList = results - this.searchLoading = false - } + + this.searchList = results + this.searchLoading = false }) + } else if (this.selectLayers.toString() === '1') { + // 查询部件 + // 遍历所有图层进行查询 + const partsLength = this.parts.length // 全部部件图层数量 + for (let i = 0; i < partsLength; i++) { + const part = this.parts[i] + const str = ['objid', 'xl', 'dl'] + const query = esri.query({ url: part.url }) + let queryString = '1=1' // 默认查询语句 + // 如果有关键字 + if (this.keyword) { + // 拼接查询语句 + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') + } else { + return + } + query.where(queryString) + // 如果有查询边界 + if (this.bounds) { + query.within(this.bounds) + } + // 执行查询 + query.run((error, featureCollection, response) => { + if (error) { + console.log(error) + return + } + const featuresLength = featureCollection.features.length + if (featuresLength > 0) { + // 遍历所有查询结果，放入results + for (const feature of featureCollection.features) { + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + feature.properties.dl + ' / ' + feature.properties.xl + '
' + + '
' + feature.properties.objid + '
' + + '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname2 + '
' + + '
' + feature.properties.deptname1 + '
' + + '
' + feature.properties.deptname3 + '
' + + '
' + + results.push({ + name: feature.properties.dl + ' / ' + feature.properties.xl, + code: feature.properties.objid, + content: { + title: '权属部门', + text: feature.properties.deptname2 + }, + lng: feature.geometry.coordinates[0], + lat: feature.geometry.coordinates[1], + popupStr: popupStr + }) + } + } + // 如果是最后一个图层 + if (i === (partsLength - 1)) { + this.searchList = results + this.searchLoading = false + } + }) + } + } else { + this.searchLoading = false } }, // 清空查询 @@ -154,28 +237,16 @@ // 赋予新的查询结果 const currentMarkesLength = data.length for (let i = 0; i < currentMarkesLength; i++) { - const feature = data[i].feature - var icon = this.searchIconList[i] - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) - var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) + const icon = this.searchIconList[i] + const latlng = L.latLng([data[i].lat, data[i].lng]) + const item = L.marker(latlng, { icon: icon }).addTo(this.map) item.on('click', e => { if (item.getPopup()) { item.unbindPopup() } // 绑定弹窗 - const properties = feature.properties - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - item.bindPopup(popup).openPopup(e.latlng) + const popup = L.popup().setContent(data[i].popupStr) + item.bindPopup(popup).openPopup([data[i].lat, data[i].lng]) }) this.currentSearchMarkers.push(item) } @@ -186,10 +257,8 @@ }, // 点击查询列表项，将位置放在中间 clickSearchItem(item, index) { - console.log('clickItem') if (item) { - const feature = item.feature - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) + const latlng = L.latLng([item.lat, item.lng]) let zoom = this.map.getZoom() if (zoom < 19) { zoom = 19 @@ -229,36 +298,18 @@ }) }, // 部件图层切换 - layerChange(node, checked) { - const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } - } + layerChange(node) { + this.$refs.layerRadio.$refs.layerTree.setCheckedKeys([node.id]) + this.selectLayers = [node.id] + + // 清除查询 + this.clearSearch() }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -268,40 +319,64 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + this.map.addLayer(mapDtGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: 18 } + const layer = esri.featureLayer(item).addTo(group) + this.parts.push(item) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) + this.map.addLayer(group) }, // 初始化图标 initIcons() { @@ -310,23 +385,17 @@ const icon = L.icon({ iconUrl: require(`@/assets/global_images/point${i}.png`), iconSize: [25, 25], - iconAnchor: [12.5, 25] + iconAnchor: [12, 25], + popupAnchor: [0, -25] }) this.searchIconList.push(icon) } }, handleCurrentChange(val) { this.offset = val - var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val - this.showlist = this.searchlist.slice(5 * (val - 1), num) + const num = 5 * val >= this.searchList.length ? this.searchList.length : 5 * val + this.showlist = this.searchList.slice(5 * (val - 1), num) this.drawIcon() - }, - // 根据url找到layer - searchLayerByUrl(url) { - const layer = this.parts.filter(item => item.options.url === url)[0] - if (layer) { - this.currentLayer = layer - } } } } @@ -345,8 +414,9 @@ /*}*/ $tableTitleHeight:35px; .leaflet_container{ - width: 100%; - height: 84vh; + width: calc( 100vw - 208px ); + height: calc( 100vh - 158px ); + background-color: white; } .search-total{ background-color: white; width: 300px;height: 35px; @@ -453,3 +523,33 @@ } } + + diff --git a/src/views/baseSource/overview.vue b/src/views/baseSource/overview.vue index 8a3f857..02267ef 100644 --- a/src/views/baseSource/overview.vue +++ b/src/views/baseSource/overview.vue @@ -20,9 +20,11 @@ components: { LayerChoose, ToolsContainer }, data() { return { + baseLayer: [], layers: this.baseConfig.layers, // 图层列表 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层列表 + selectLayers: [0, 1, 2], // 选中图层列表 map: null, // 地图对象 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 maps: [], // 地图图层 parts: [] // 部件图层 } @@ -32,7 +34,10 @@ 'baseUrl', 'partsUrl', 'partsAllUrl', - 'mapUrl' + 'shopUrl', + 'mapUrl', + 'gridUrl', + 'mapDtUrl' ]) }, mounted() { @@ -42,34 +47,18 @@ // 部件图层切换 layerChange(node, checked) { const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } + + if (!checked) { + this.map.removeLayer(this.layerGroups[selectItem.id]) + } else { + this.map.addLayer(this.layerGroups[selectItem.id]) } }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -79,48 +68,147 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图图层 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + this.addGridLayer() // 网格 + this.addShopLayer() // 商户 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + + // 添加默认显示的图层 + this.selectLayers.forEach(item => { + this.map.addLayer(this.layerGroups[item]) + }) + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapDtUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + }, + // 添加网格图层 + addGridLayer: function() { + const gridGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.gridUrl}` } + esri.featureLayer(item).addTo(gridGroup) + + this.layerGroups.push(gridGroup) + }, + // 添加商户图层 + addShopLayer: function() { + const shopGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.shopUrl}` } + const layer = esri.featureLayer(item).addTo(shopGroup) + + const that = this + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + properties.dutyname + '
' + + '
' + properties.objid + '
' + + // '
' + properties.communame + '
' + + // '
' + properties.bgid + '
' + + '
' + properties.deptname + '
' + + '
' + properties.position_ + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + this.layerGroups.push(shopGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + const minZoom = this.baseConfig.layers[index].minZoom === undefined ? 18 : this.baseConfig.layers[index].minZoom + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: minZoom } + const layer = esri.featureLayer(item).addTo(group) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) } } } + + diff --git a/src/views/busAdmin/caseType/detailCaseType.vue b/src/views/busAdmin/caseType/detailCaseType.vue index 38a9cbd..ade5437 100644 --- a/src/views/busAdmin/caseType/detailCaseType.vue +++ b/src/views/busAdmin/caseType/detailCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -25,6 +30,7 @@ + @@ -49,6 +55,7 @@ typeId: '', deptName: '', deptId: '', + num: '', typesTime: [] } } @@ -60,7 +67,7 @@ this.caseTypeForm.typeDetailName = row.typeDetailName this.caseTypeForm.typeDetailCode = row.typeDetailCode this.caseTypeForm.id = row.id - + this.caseTypeForm.num = row.num getCaseTypesTime(this.caseTypeForm.id).then(response => { response.data.rows.forEach(element => { const typeTime = { @@ -70,6 +77,7 @@ hours: element.hours, minutes: element.minutes, deptId: element.deptId, + num: element.num, deptName: element.deptName, edit: false } diff --git a/src/views/busAdmin/caseType/editCaseType.vue b/src/views/busAdmin/caseType/editCaseType.vue index 85415b7..c0e3a08 100644 --- a/src/views/busAdmin/caseType/editCaseType.vue +++ b/src/views/busAdmin/caseType/editCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -59,11 +64,22 @@ + + + @@ -172,10 +173,11 @@ import 'element-ui/lib/theme-chalk/index.css' import { getCaseDetail } from '@/api/coorBusiness/case' import ArcGisMapRead from '@/components/Map/arcgisMapRead' +import LeafletMapRead from '@/components/Map/leafletMapRead' export default { name: 'CaseDetail', - components: { ArcGisMapRead }, + components: { ArcGisMapRead, LeafletMapRead }, props: { id: { type: String, diff --git a/src/components/CaseCommon/caseList.vue b/src/components/CaseCommon/caseList.vue index c574dcd..6706961 100644 --- a/src/components/CaseCommon/caseList.vue +++ b/src/components/CaseCommon/caseList.vue @@ -6,6 +6,7 @@ @@ -30,14 +30,9 @@ required: true } // 数据 }, - // mounted() { - // debugger - // console.log(this.data.feature) - // }, methods: { // 点击数据项 itemClick() { - console.log('点击item') this.$emit('click', this.data) } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 71147d8..5ae0c05 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -17,7 +17,7 @@ - +
@@ -45,10 +45,15 @@ drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 clearDisabled: true, // 禁用重置按钮 - layers: this.baseConfig.layers, // 所有图层 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层 + baseLayer: [], + layers: [ + { 'id': 0, 'name': '商户', 'type': 'layer', 'domain': [35] }, + { 'id': 1, 'name': '部件', 'type': 'layer', 'domain': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15, 16, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45] } + ], + selectLayers: [0], // 选中图层 maps: [], // 地图图层 parts: [], // 部件图层 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 searchList: [], // 全部查询结果 featureCollection: [], // 选中的图层和Feature featureCollectionLength: 0, // 选中的feature个数 @@ -60,9 +65,8 @@ ...mapGetters([ 'baseUrl', 'partsUrl', - 'partsAllUrl', - 'mapUrl', - 'partsEditUrl' + 'shopUrl', + 'mapUrl' ]) }, destroyed() { @@ -89,18 +93,17 @@ } // 其他不予处理 this.searchLoading = true const results = [] // 存放查询结果列表 - // 遍历所有图层进行查询 - const partsLength = this.parts.length // 全部部件图层数量 - for (let i = 0; i < partsLength; i++) { - const part = this.parts[i] - var str = ['编码', '小类名称', '大类名称'] - var query = esri.query({ url: part.options.url }) + + // 获取是查询部件还是查询商户 + if (this.selectLayers.toString() === '0') { + // 查询商户 + const str = ['objid', 'dutyname', 'position_'] // 查询条件属性 + const query = esri.query({ url: `${this.baseUrl}${this.shopUrl}` }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 if (this.keyword) { // 拼接查询语句 queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') - console.log(queryString) } else { return } @@ -119,18 +122,98 @@ if (featuresLength > 0) { // 遍历所有查询结果，放入results for (const feature of featureCollection.features) { + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + feature.properties.dutyname + '
' + + '
' + feature.properties.objid + '
' + + // '
' + feature.properties.communame + '
' + + // '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname + '
' + + '
' + feature.properties.position_ + '
' + + '
' + results.push({ - layer: part, - feature: feature + name: feature.properties.dutyname, + code: feature.properties.objid, + content: { + title: '地址', + text: feature.properties.position_ + }, + lng: feature.properties.x, + lat: feature.properties.y, + popupStr: popupStr }) } } - // 如果是最后一个图层 - if (i === (partsLength - 1)) { - this.searchList = results - this.searchLoading = false - } + + this.searchList = results + this.searchLoading = false }) + } else if (this.selectLayers.toString() === '1') { + // 查询部件 + // 遍历所有图层进行查询 + const partsLength = this.parts.length // 全部部件图层数量 + for (let i = 0; i < partsLength; i++) { + const part = this.parts[i] + const str = ['objid', 'xl', 'dl'] + const query = esri.query({ url: part.url }) + let queryString = '1=1' // 默认查询语句 + // 如果有关键字 + if (this.keyword) { + // 拼接查询语句 + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') + } else { + return + } + query.where(queryString) + // 如果有查询边界 + if (this.bounds) { + query.within(this.bounds) + } + // 执行查询 + query.run((error, featureCollection, response) => { + if (error) { + console.log(error) + return + } + const featuresLength = featureCollection.features.length + if (featuresLength > 0) { + // 遍历所有查询结果，放入results + for (const feature of featureCollection.features) { + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + feature.properties.dl + ' / ' + feature.properties.xl + '
' + + '
' + feature.properties.objid + '
' + + '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname2 + '
' + + '
' + feature.properties.deptname1 + '
' + + '
' + feature.properties.deptname3 + '
' + + '
' + + results.push({ + name: feature.properties.dl + ' / ' + feature.properties.xl, + code: feature.properties.objid, + content: { + title: '权属部门', + text: feature.properties.deptname2 + }, + lng: feature.geometry.coordinates[0], + lat: feature.geometry.coordinates[1], + popupStr: popupStr + }) + } + } + // 如果是最后一个图层 + if (i === (partsLength - 1)) { + this.searchList = results + this.searchLoading = false + } + }) + } + } else { + this.searchLoading = false } }, // 清空查询 @@ -154,28 +237,16 @@ // 赋予新的查询结果 const currentMarkesLength = data.length for (let i = 0; i < currentMarkesLength; i++) { - const feature = data[i].feature - var icon = this.searchIconList[i] - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) - var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) + const icon = this.searchIconList[i] + const latlng = L.latLng([data[i].lat, data[i].lng]) + const item = L.marker(latlng, { icon: icon }).addTo(this.map) item.on('click', e => { if (item.getPopup()) { item.unbindPopup() } // 绑定弹窗 - const properties = feature.properties - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - item.bindPopup(popup).openPopup(e.latlng) + const popup = L.popup().setContent(data[i].popupStr) + item.bindPopup(popup).openPopup([data[i].lat, data[i].lng]) }) this.currentSearchMarkers.push(item) } @@ -186,10 +257,8 @@ }, // 点击查询列表项，将位置放在中间 clickSearchItem(item, index) { - console.log('clickItem') if (item) { - const feature = item.feature - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) + const latlng = L.latLng([item.lat, item.lng]) let zoom = this.map.getZoom() if (zoom < 19) { zoom = 19 @@ -229,36 +298,18 @@ }) }, // 部件图层切换 - layerChange(node, checked) { - const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } - } + layerChange(node) { + this.$refs.layerRadio.$refs.layerTree.setCheckedKeys([node.id]) + this.selectLayers = [node.id] + + // 清除查询 + this.clearSearch() }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -268,40 +319,64 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + this.map.addLayer(mapDtGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: 18 } + const layer = esri.featureLayer(item).addTo(group) + this.parts.push(item) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) + this.map.addLayer(group) }, // 初始化图标 initIcons() { @@ -310,23 +385,17 @@ const icon = L.icon({ iconUrl: require(`@/assets/global_images/point${i}.png`), iconSize: [25, 25], - iconAnchor: [12.5, 25] + iconAnchor: [12, 25], + popupAnchor: [0, -25] }) this.searchIconList.push(icon) } }, handleCurrentChange(val) { this.offset = val - var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val - this.showlist = this.searchlist.slice(5 * (val - 1), num) + const num = 5 * val >= this.searchList.length ? this.searchList.length : 5 * val + this.showlist = this.searchList.slice(5 * (val - 1), num) this.drawIcon() - }, - // 根据url找到layer - searchLayerByUrl(url) { - const layer = this.parts.filter(item => item.options.url === url)[0] - if (layer) { - this.currentLayer = layer - } } } } @@ -345,8 +414,9 @@ /*}*/ $tableTitleHeight:35px; .leaflet_container{ - width: 100%; - height: 84vh; + width: calc( 100vw - 208px ); + height: calc( 100vh - 158px ); + background-color: white; } .search-total{ background-color: white; width: 300px;height: 35px; @@ -453,3 +523,33 @@ } } + + diff --git a/src/views/baseSource/overview.vue b/src/views/baseSource/overview.vue index 8a3f857..02267ef 100644 --- a/src/views/baseSource/overview.vue +++ b/src/views/baseSource/overview.vue @@ -20,9 +20,11 @@ components: { LayerChoose, ToolsContainer }, data() { return { + baseLayer: [], layers: this.baseConfig.layers, // 图层列表 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层列表 + selectLayers: [0, 1, 2], // 选中图层列表 map: null, // 地图对象 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 maps: [], // 地图图层 parts: [] // 部件图层 } @@ -32,7 +34,10 @@ 'baseUrl', 'partsUrl', 'partsAllUrl', - 'mapUrl' + 'shopUrl', + 'mapUrl', + 'gridUrl', + 'mapDtUrl' ]) }, mounted() { @@ -42,34 +47,18 @@ // 部件图层切换 layerChange(node, checked) { const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } + + if (!checked) { + this.map.removeLayer(this.layerGroups[selectItem.id]) + } else { + this.map.addLayer(this.layerGroups[selectItem.id]) } }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -79,48 +68,147 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图图层 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + this.addGridLayer() // 网格 + this.addShopLayer() // 商户 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + + // 添加默认显示的图层 + this.selectLayers.forEach(item => { + this.map.addLayer(this.layerGroups[item]) + }) + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapDtUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + }, + // 添加网格图层 + addGridLayer: function() { + const gridGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.gridUrl}` } + esri.featureLayer(item).addTo(gridGroup) + + this.layerGroups.push(gridGroup) + }, + // 添加商户图层 + addShopLayer: function() { + const shopGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.shopUrl}` } + const layer = esri.featureLayer(item).addTo(shopGroup) + + const that = this + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + properties.dutyname + '
' + + '
' + properties.objid + '
' + + // '
' + properties.communame + '
' + + // '
' + properties.bgid + '
' + + '
' + properties.deptname + '
' + + '
' + properties.position_ + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + this.layerGroups.push(shopGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + const minZoom = this.baseConfig.layers[index].minZoom === undefined ? 18 : this.baseConfig.layers[index].minZoom + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: minZoom } + const layer = esri.featureLayer(item).addTo(group) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) } } } + + diff --git a/src/views/busAdmin/caseType/detailCaseType.vue b/src/views/busAdmin/caseType/detailCaseType.vue index 38a9cbd..ade5437 100644 --- a/src/views/busAdmin/caseType/detailCaseType.vue +++ b/src/views/busAdmin/caseType/detailCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -25,6 +30,7 @@ + @@ -49,6 +55,7 @@ typeId: '', deptName: '', deptId: '', + num: '', typesTime: [] } } @@ -60,7 +67,7 @@ this.caseTypeForm.typeDetailName = row.typeDetailName this.caseTypeForm.typeDetailCode = row.typeDetailCode this.caseTypeForm.id = row.id - + this.caseTypeForm.num = row.num getCaseTypesTime(this.caseTypeForm.id).then(response => { response.data.rows.forEach(element => { const typeTime = { @@ -70,6 +77,7 @@ hours: element.hours, minutes: element.minutes, deptId: element.deptId, + num: element.num, deptName: element.deptName, edit: false } diff --git a/src/views/busAdmin/caseType/editCaseType.vue b/src/views/busAdmin/caseType/editCaseType.vue index 85415b7..c0e3a08 100644 --- a/src/views/busAdmin/caseType/editCaseType.vue +++ b/src/views/busAdmin/caseType/editCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -59,11 +64,22 @@ + + + @@ -30,14 +30,9 @@ required: true } // 数据 }, - // mounted() { - // debugger - // console.log(this.data.feature) - // }, methods: { // 点击数据项 itemClick() { - console.log('点击item') this.$emit('click', this.data) } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 71147d8..5ae0c05 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -17,7 +17,7 @@ - +
@@ -45,10 +45,15 @@ drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 clearDisabled: true, // 禁用重置按钮 - layers: this.baseConfig.layers, // 所有图层 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层 + baseLayer: [], + layers: [ + { 'id': 0, 'name': '商户', 'type': 'layer', 'domain': [35] }, + { 'id': 1, 'name': '部件', 'type': 'layer', 'domain': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15, 16, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45] } + ], + selectLayers: [0], // 选中图层 maps: [], // 地图图层 parts: [], // 部件图层 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 searchList: [], // 全部查询结果 featureCollection: [], // 选中的图层和Feature featureCollectionLength: 0, // 选中的feature个数 @@ -60,9 +65,8 @@ ...mapGetters([ 'baseUrl', 'partsUrl', - 'partsAllUrl', - 'mapUrl', - 'partsEditUrl' + 'shopUrl', + 'mapUrl' ]) }, destroyed() { @@ -89,18 +93,17 @@ } // 其他不予处理 this.searchLoading = true const results = [] // 存放查询结果列表 - // 遍历所有图层进行查询 - const partsLength = this.parts.length // 全部部件图层数量 - for (let i = 0; i < partsLength; i++) { - const part = this.parts[i] - var str = ['编码', '小类名称', '大类名称'] - var query = esri.query({ url: part.options.url }) + + // 获取是查询部件还是查询商户 + if (this.selectLayers.toString() === '0') { + // 查询商户 + const str = ['objid', 'dutyname', 'position_'] // 查询条件属性 + const query = esri.query({ url: `${this.baseUrl}${this.shopUrl}` }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 if (this.keyword) { // 拼接查询语句 queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') - console.log(queryString) } else { return } @@ -119,18 +122,98 @@ if (featuresLength > 0) { // 遍历所有查询结果，放入results for (const feature of featureCollection.features) { + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + feature.properties.dutyname + '
' + + '
' + feature.properties.objid + '
' + + // '
' + feature.properties.communame + '
' + + // '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname + '
' + + '
' + feature.properties.position_ + '
' + + '
' + results.push({ - layer: part, - feature: feature + name: feature.properties.dutyname, + code: feature.properties.objid, + content: { + title: '地址', + text: feature.properties.position_ + }, + lng: feature.properties.x, + lat: feature.properties.y, + popupStr: popupStr }) } } - // 如果是最后一个图层 - if (i === (partsLength - 1)) { - this.searchList = results - this.searchLoading = false - } + + this.searchList = results + this.searchLoading = false }) + } else if (this.selectLayers.toString() === '1') { + // 查询部件 + // 遍历所有图层进行查询 + const partsLength = this.parts.length // 全部部件图层数量 + for (let i = 0; i < partsLength; i++) { + const part = this.parts[i] + const str = ['objid', 'xl', 'dl'] + const query = esri.query({ url: part.url }) + let queryString = '1=1' // 默认查询语句 + // 如果有关键字 + if (this.keyword) { + // 拼接查询语句 + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') + } else { + return + } + query.where(queryString) + // 如果有查询边界 + if (this.bounds) { + query.within(this.bounds) + } + // 执行查询 + query.run((error, featureCollection, response) => { + if (error) { + console.log(error) + return + } + const featuresLength = featureCollection.features.length + if (featuresLength > 0) { + // 遍历所有查询结果，放入results + for (const feature of featureCollection.features) { + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + feature.properties.dl + ' / ' + feature.properties.xl + '
' + + '
' + feature.properties.objid + '
' + + '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname2 + '
' + + '
' + feature.properties.deptname1 + '
' + + '
' + feature.properties.deptname3 + '
' + + '
' + + results.push({ + name: feature.properties.dl + ' / ' + feature.properties.xl, + code: feature.properties.objid, + content: { + title: '权属部门', + text: feature.properties.deptname2 + }, + lng: feature.geometry.coordinates[0], + lat: feature.geometry.coordinates[1], + popupStr: popupStr + }) + } + } + // 如果是最后一个图层 + if (i === (partsLength - 1)) { + this.searchList = results + this.searchLoading = false + } + }) + } + } else { + this.searchLoading = false } }, // 清空查询 @@ -154,28 +237,16 @@ // 赋予新的查询结果 const currentMarkesLength = data.length for (let i = 0; i < currentMarkesLength; i++) { - const feature = data[i].feature - var icon = this.searchIconList[i] - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) - var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) + const icon = this.searchIconList[i] + const latlng = L.latLng([data[i].lat, data[i].lng]) + const item = L.marker(latlng, { icon: icon }).addTo(this.map) item.on('click', e => { if (item.getPopup()) { item.unbindPopup() } // 绑定弹窗 - const properties = feature.properties - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - item.bindPopup(popup).openPopup(e.latlng) + const popup = L.popup().setContent(data[i].popupStr) + item.bindPopup(popup).openPopup([data[i].lat, data[i].lng]) }) this.currentSearchMarkers.push(item) } @@ -186,10 +257,8 @@ }, // 点击查询列表项，将位置放在中间 clickSearchItem(item, index) { - console.log('clickItem') if (item) { - const feature = item.feature - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) + const latlng = L.latLng([item.lat, item.lng]) let zoom = this.map.getZoom() if (zoom < 19) { zoom = 19 @@ -229,36 +298,18 @@ }) }, // 部件图层切换 - layerChange(node, checked) { - const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } - } + layerChange(node) { + this.$refs.layerRadio.$refs.layerTree.setCheckedKeys([node.id]) + this.selectLayers = [node.id] + + // 清除查询 + this.clearSearch() }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -268,40 +319,64 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + this.map.addLayer(mapDtGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: 18 } + const layer = esri.featureLayer(item).addTo(group) + this.parts.push(item) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) + this.map.addLayer(group) }, // 初始化图标 initIcons() { @@ -310,23 +385,17 @@ const icon = L.icon({ iconUrl: require(`@/assets/global_images/point${i}.png`), iconSize: [25, 25], - iconAnchor: [12.5, 25] + iconAnchor: [12, 25], + popupAnchor: [0, -25] }) this.searchIconList.push(icon) } }, handleCurrentChange(val) { this.offset = val - var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val - this.showlist = this.searchlist.slice(5 * (val - 1), num) + const num = 5 * val >= this.searchList.length ? this.searchList.length : 5 * val + this.showlist = this.searchList.slice(5 * (val - 1), num) this.drawIcon() - }, - // 根据url找到layer - searchLayerByUrl(url) { - const layer = this.parts.filter(item => item.options.url === url)[0] - if (layer) { - this.currentLayer = layer - } } } } @@ -345,8 +414,9 @@ /*}*/ $tableTitleHeight:35px; .leaflet_container{ - width: 100%; - height: 84vh; + width: calc( 100vw - 208px ); + height: calc( 100vh - 158px ); + background-color: white; } .search-total{ background-color: white; width: 300px;height: 35px; @@ -453,3 +523,33 @@ } } + + diff --git a/src/views/baseSource/overview.vue b/src/views/baseSource/overview.vue index 8a3f857..02267ef 100644 --- a/src/views/baseSource/overview.vue +++ b/src/views/baseSource/overview.vue @@ -20,9 +20,11 @@ components: { LayerChoose, ToolsContainer }, data() { return { + baseLayer: [], layers: this.baseConfig.layers, // 图层列表 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层列表 + selectLayers: [0, 1, 2], // 选中图层列表 map: null, // 地图对象 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 maps: [], // 地图图层 parts: [] // 部件图层 } @@ -32,7 +34,10 @@ 'baseUrl', 'partsUrl', 'partsAllUrl', - 'mapUrl' + 'shopUrl', + 'mapUrl', + 'gridUrl', + 'mapDtUrl' ]) }, mounted() { @@ -42,34 +47,18 @@ // 部件图层切换 layerChange(node, checked) { const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } + + if (!checked) { + this.map.removeLayer(this.layerGroups[selectItem.id]) + } else { + this.map.addLayer(this.layerGroups[selectItem.id]) } }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -79,48 +68,147 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图图层 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + this.addGridLayer() // 网格 + this.addShopLayer() // 商户 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + + // 添加默认显示的图层 + this.selectLayers.forEach(item => { + this.map.addLayer(this.layerGroups[item]) + }) + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapDtUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + }, + // 添加网格图层 + addGridLayer: function() { + const gridGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.gridUrl}` } + esri.featureLayer(item).addTo(gridGroup) + + this.layerGroups.push(gridGroup) + }, + // 添加商户图层 + addShopLayer: function() { + const shopGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.shopUrl}` } + const layer = esri.featureLayer(item).addTo(shopGroup) + + const that = this + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + properties.dutyname + '
' + + '
' + properties.objid + '
' + + // '
' + properties.communame + '
' + + // '
' + properties.bgid + '
' + + '
' + properties.deptname + '
' + + '
' + properties.position_ + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + this.layerGroups.push(shopGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + const minZoom = this.baseConfig.layers[index].minZoom === undefined ? 18 : this.baseConfig.layers[index].minZoom + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: minZoom } + const layer = esri.featureLayer(item).addTo(group) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) } } } + + diff --git a/src/views/busAdmin/caseType/detailCaseType.vue b/src/views/busAdmin/caseType/detailCaseType.vue index 38a9cbd..ade5437 100644 --- a/src/views/busAdmin/caseType/detailCaseType.vue +++ b/src/views/busAdmin/caseType/detailCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -25,6 +30,7 @@ + @@ -49,6 +55,7 @@ typeId: '', deptName: '', deptId: '', + num: '', typesTime: [] } } @@ -60,7 +67,7 @@ this.caseTypeForm.typeDetailName = row.typeDetailName this.caseTypeForm.typeDetailCode = row.typeDetailCode this.caseTypeForm.id = row.id - + this.caseTypeForm.num = row.num getCaseTypesTime(this.caseTypeForm.id).then(response => { response.data.rows.forEach(element => { const typeTime = { @@ -70,6 +77,7 @@ hours: element.hours, minutes: element.minutes, deptId: element.deptId, + num: element.num, deptName: element.deptName, edit: false } diff --git a/src/views/busAdmin/caseType/editCaseType.vue b/src/views/busAdmin/caseType/editCaseType.vue index 85415b7..c0e3a08 100644 --- a/src/views/busAdmin/caseType/editCaseType.vue +++ b/src/views/busAdmin/caseType/editCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -59,11 +64,22 @@ + + + @@ -30,14 +30,9 @@ required: true } // 数据 }, - // mounted() { - // debugger - // console.log(this.data.feature) - // }, methods: { // 点击数据项 itemClick() { - console.log('点击item') this.$emit('click', this.data) } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 71147d8..5ae0c05 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -17,7 +17,7 @@ - +
@@ -45,10 +45,15 @@ drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 clearDisabled: true, // 禁用重置按钮 - layers: this.baseConfig.layers, // 所有图层 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层 + baseLayer: [], + layers: [ + { 'id': 0, 'name': '商户', 'type': 'layer', 'domain': [35] }, + { 'id': 1, 'name': '部件', 'type': 'layer', 'domain': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15, 16, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45] } + ], + selectLayers: [0], // 选中图层 maps: [], // 地图图层 parts: [], // 部件图层 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 searchList: [], // 全部查询结果 featureCollection: [], // 选中的图层和Feature featureCollectionLength: 0, // 选中的feature个数 @@ -60,9 +65,8 @@ ...mapGetters([ 'baseUrl', 'partsUrl', - 'partsAllUrl', - 'mapUrl', - 'partsEditUrl' + 'shopUrl', + 'mapUrl' ]) }, destroyed() { @@ -89,18 +93,17 @@ } // 其他不予处理 this.searchLoading = true const results = [] // 存放查询结果列表 - // 遍历所有图层进行查询 - const partsLength = this.parts.length // 全部部件图层数量 - for (let i = 0; i < partsLength; i++) { - const part = this.parts[i] - var str = ['编码', '小类名称', '大类名称'] - var query = esri.query({ url: part.options.url }) + + // 获取是查询部件还是查询商户 + if (this.selectLayers.toString() === '0') { + // 查询商户 + const str = ['objid', 'dutyname', 'position_'] // 查询条件属性 + const query = esri.query({ url: `${this.baseUrl}${this.shopUrl}` }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 if (this.keyword) { // 拼接查询语句 queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') - console.log(queryString) } else { return } @@ -119,18 +122,98 @@ if (featuresLength > 0) { // 遍历所有查询结果，放入results for (const feature of featureCollection.features) { + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + feature.properties.dutyname + '
' + + '
' + feature.properties.objid + '
' + + // '
' + feature.properties.communame + '
' + + // '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname + '
' + + '
' + feature.properties.position_ + '
' + + '
' + results.push({ - layer: part, - feature: feature + name: feature.properties.dutyname, + code: feature.properties.objid, + content: { + title: '地址', + text: feature.properties.position_ + }, + lng: feature.properties.x, + lat: feature.properties.y, + popupStr: popupStr }) } } - // 如果是最后一个图层 - if (i === (partsLength - 1)) { - this.searchList = results - this.searchLoading = false - } + + this.searchList = results + this.searchLoading = false }) + } else if (this.selectLayers.toString() === '1') { + // 查询部件 + // 遍历所有图层进行查询 + const partsLength = this.parts.length // 全部部件图层数量 + for (let i = 0; i < partsLength; i++) { + const part = this.parts[i] + const str = ['objid', 'xl', 'dl'] + const query = esri.query({ url: part.url }) + let queryString = '1=1' // 默认查询语句 + // 如果有关键字 + if (this.keyword) { + // 拼接查询语句 + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') + } else { + return + } + query.where(queryString) + // 如果有查询边界 + if (this.bounds) { + query.within(this.bounds) + } + // 执行查询 + query.run((error, featureCollection, response) => { + if (error) { + console.log(error) + return + } + const featuresLength = featureCollection.features.length + if (featuresLength > 0) { + // 遍历所有查询结果，放入results + for (const feature of featureCollection.features) { + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + feature.properties.dl + ' / ' + feature.properties.xl + '
' + + '
' + feature.properties.objid + '
' + + '
' + feature.properties.bgid + '
' + + '
' + feature.properties.deptname2 + '
' + + '
' + feature.properties.deptname1 + '
' + + '
' + feature.properties.deptname3 + '
' + + '
' + + results.push({ + name: feature.properties.dl + ' / ' + feature.properties.xl, + code: feature.properties.objid, + content: { + title: '权属部门', + text: feature.properties.deptname2 + }, + lng: feature.geometry.coordinates[0], + lat: feature.geometry.coordinates[1], + popupStr: popupStr + }) + } + } + // 如果是最后一个图层 + if (i === (partsLength - 1)) { + this.searchList = results + this.searchLoading = false + } + }) + } + } else { + this.searchLoading = false } }, // 清空查询 @@ -154,28 +237,16 @@ // 赋予新的查询结果 const currentMarkesLength = data.length for (let i = 0; i < currentMarkesLength; i++) { - const feature = data[i].feature - var icon = this.searchIconList[i] - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) - var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) + const icon = this.searchIconList[i] + const latlng = L.latLng([data[i].lat, data[i].lng]) + const item = L.marker(latlng, { icon: icon }).addTo(this.map) item.on('click', e => { if (item.getPopup()) { item.unbindPopup() } // 绑定弹窗 - const properties = feature.properties - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - item.bindPopup(popup).openPopup(e.latlng) + const popup = L.popup().setContent(data[i].popupStr) + item.bindPopup(popup).openPopup([data[i].lat, data[i].lng]) }) this.currentSearchMarkers.push(item) } @@ -186,10 +257,8 @@ }, // 点击查询列表项，将位置放在中间 clickSearchItem(item, index) { - console.log('clickItem') if (item) { - const feature = item.feature - const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) + const latlng = L.latLng([item.lat, item.lng]) let zoom = this.map.getZoom() if (zoom < 19) { zoom = 19 @@ -229,36 +298,18 @@ }) }, // 部件图层切换 - layerChange(node, checked) { - const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } - } + layerChange(node) { + this.$refs.layerRadio.$refs.layerTree.setCheckedKeys([node.id]) + this.selectLayers = [node.id] + + // 清除查询 + this.clearSearch() }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -268,40 +319,64 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + this.map.addLayer(mapDtGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: 18 } + const layer = esri.featureLayer(item).addTo(group) + this.parts.push(item) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) + this.map.addLayer(group) }, // 初始化图标 initIcons() { @@ -310,23 +385,17 @@ const icon = L.icon({ iconUrl: require(`@/assets/global_images/point${i}.png`), iconSize: [25, 25], - iconAnchor: [12.5, 25] + iconAnchor: [12, 25], + popupAnchor: [0, -25] }) this.searchIconList.push(icon) } }, handleCurrentChange(val) { this.offset = val - var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val - this.showlist = this.searchlist.slice(5 * (val - 1), num) + const num = 5 * val >= this.searchList.length ? this.searchList.length : 5 * val + this.showlist = this.searchList.slice(5 * (val - 1), num) this.drawIcon() - }, - // 根据url找到layer - searchLayerByUrl(url) { - const layer = this.parts.filter(item => item.options.url === url)[0] - if (layer) { - this.currentLayer = layer - } } } } @@ -345,8 +414,9 @@ /*}*/ $tableTitleHeight:35px; .leaflet_container{ - width: 100%; - height: 84vh; + width: calc( 100vw - 208px ); + height: calc( 100vh - 158px ); + background-color: white; } .search-total{ background-color: white; width: 300px;height: 35px; @@ -453,3 +523,33 @@ } } + + diff --git a/src/views/baseSource/overview.vue b/src/views/baseSource/overview.vue index 8a3f857..02267ef 100644 --- a/src/views/baseSource/overview.vue +++ b/src/views/baseSource/overview.vue @@ -20,9 +20,11 @@ components: { LayerChoose, ToolsContainer }, data() { return { + baseLayer: [], layers: this.baseConfig.layers, // 图层列表 - selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层列表 + selectLayers: [0, 1, 2], // 选中图层列表 map: null, // 地图对象 + layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏 maps: [], // 地图图层 parts: [] // 部件图层 } @@ -32,7 +34,10 @@ 'baseUrl', 'partsUrl', 'partsAllUrl', - 'mapUrl' + 'shopUrl', + 'mapUrl', + 'gridUrl', + 'mapDtUrl' ]) }, mounted() { @@ -42,34 +47,18 @@ // 部件图层切换 layerChange(node, checked) { const selectItem = this.layers.filter(item => item.name === node.name)[0] - // 如果选中底图,选中添加，没选中移除 - if (selectItem.type === 'map') { - if (!checked) { - for (const item of this.maps) { - this.map.removeLayer(item) - } - } else { - for (const item of this.maps) { - this.map.addLayer(item) - } - } - } else if (node.type === 'layer') { // 其他图层 - if (!checked) { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.removeLayer(this.parts[selectItem.domain[i] - 1]) - } - } else { - for (let i = 0; i < selectItem.domain.length; i++) { - this.map.addLayer(this.parts[selectItem.domain[i] - 1]) - } - } + + if (!checked) { + this.map.removeLayer(this.layerGroups[selectItem.id]) + } else { + this.map.addLayer(this.layerGroups[selectItem.id]) } }, // 地图初始化 init() { const map = L.map('map', { - minZoom: 4, - maxZoom: 21, + minZoom: 14, + maxZoom: 25, center: this.baseConfig.center, zoom: this.baseConfig.zoom, zoomControl: false, @@ -79,48 +68,147 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - // 添加底图图层 - for (let i = 0; i <= 21; i++) { - const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } - this.maps.push(esri.featureLayer(item).addTo(map)) + + // 加载天地图底图和标注 + this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map)) + this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map)) + + // 构建并加载layerGroup + /* eslint-disable new-cap */ + this.addMapDtLyaer() // 底图 + this.addGridLayer() // 网格 + this.addShopLayer() // 商户 + + // 部件图层组 + for (let i = 3; i < 10; i++) { + this.addPartsLayer(i) } - // 添加部件图层 - const partsLayer = this.baseConfig.partsLayer - for (const parent of partsLayer) { // 遍历大类 - const childs = parent.children - for (const child of childs) { // 遍历小类 - const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } - console.log(item) - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - // 弹窗样式 - var str = `
-
- ${properties['小类名称']} -
-
大类：${properties['大类名称']}
-
小类：${properties['小类名称']}
-
部件编码：${properties['编码']}
-
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
-
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
-
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) - } - } + + // 添加默认显示的图层 + this.selectLayers.forEach(item => { + this.map.addLayer(this.layerGroups[item]) + }) + }, + // 添加底图图层 + addMapDtLyaer: function() { + const mapDtGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.mapDtUrl}` } + esri.dynamicMapLayer(item).addTo(mapDtGroup) + + this.layerGroups.push(mapDtGroup) + }, + // 添加网格图层 + addGridLayer: function() { + const gridGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.gridUrl}` } + esri.featureLayer(item).addTo(gridGroup) + + this.layerGroups.push(gridGroup) + }, + // 添加商户图层 + addShopLayer: function() { + const shopGroup = new L.layerGroup() // 创建layerGroup + + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.shopUrl}` } + const layer = esri.featureLayer(item).addTo(shopGroup) + + const that = this + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
商户信息
' + + '
' + + '
' + properties.dutyname + '
' + + '
' + properties.objid + '
' + + // '
' + properties.communame + '
' + + // '
' + properties.bgid + '
' + + '
' + properties.deptname + '
' + + '
' + properties.position_ + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + this.layerGroups.push(shopGroup) + }, + addPartsLayer: function(index) { + const that = this + const group = new L.layerGroup() // 创建layerGroup + + const domains = this.baseConfig.layers[index].domain + const minZoom = this.baseConfig.layers[index].minZoom === undefined ? 18 : this.baseConfig.layers[index].minZoom + domains.forEach(dom => { + // 创建图层并加载到layerGroup中 + const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: minZoom } + const layer = esri.featureLayer(item).addTo(group) + + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + + // 弹窗样式 + const popupStr = '
' + + '
部件信息
' + + '
' + + '
' + properties.dl + ' / ' + properties.xl + '
' + + '
' + properties.objid + '
' + + '
' + properties.bgid + '
' + + '
' + properties.deptname2 + '
' + + '
' + properties.deptname1 + '
' + + '
' + properties.deptname3 + '
' + + '
' + // 弹出窗口 + L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map) + }) + + that.layerGroups.push(group) + }) } } } + + diff --git a/src/views/busAdmin/caseType/detailCaseType.vue b/src/views/busAdmin/caseType/detailCaseType.vue index 38a9cbd..ade5437 100644 --- a/src/views/busAdmin/caseType/detailCaseType.vue +++ b/src/views/busAdmin/caseType/detailCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -25,6 +30,7 @@ + @@ -49,6 +55,7 @@ typeId: '', deptName: '', deptId: '', + num: '', typesTime: [] } } @@ -60,7 +67,7 @@ this.caseTypeForm.typeDetailName = row.typeDetailName this.caseTypeForm.typeDetailCode = row.typeDetailCode this.caseTypeForm.id = row.id - + this.caseTypeForm.num = row.num getCaseTypesTime(this.caseTypeForm.id).then(response => { response.data.rows.forEach(element => { const typeTime = { @@ -70,6 +77,7 @@ hours: element.hours, minutes: element.minutes, deptId: element.deptId, + num: element.num, deptName: element.deptName, edit: false } diff --git a/src/views/busAdmin/caseType/editCaseType.vue b/src/views/busAdmin/caseType/editCaseType.vue index 85415b7..c0e3a08 100644 --- a/src/views/busAdmin/caseType/editCaseType.vue +++ b/src/views/busAdmin/caseType/editCaseType.vue @@ -2,12 +2,17 @@ - + - + + + + + + @@ -59,11 +64,22 @@ + + +