first commit
commit
5c3dcbe289
|
|
@ -0,0 +1,3 @@
|
|||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
'extends': [
|
||||
'plugin:vue/essential',
|
||||
'eslint:recommended'
|
||||
],
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint'
|
||||
},
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
# pingyiemergency
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "pingyiemergency",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.1.3",
|
||||
"core-js": "^3.6.5",
|
||||
"echarts": "^5.4.0",
|
||||
"element-ui": "^2.15.12",
|
||||
"mapbox-gl": "^2.11.0",
|
||||
"vue": "^2.6.11",
|
||||
"vue-drag-resize": "^1.5.4",
|
||||
"vue-router": "^3.2.0",
|
||||
"vuex": "^3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.15",
|
||||
"@vue/cli-plugin-eslint": "~4.5.15",
|
||||
"@vue/cli-plugin-router": "~4.5.15",
|
||||
"@vue/cli-plugin-vuex": "~4.5.15",
|
||||
"@vue/cli-service": "~4.5.15",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1 @@
|
|||
export const BASE_API = "http://123.132.248.154:6005";
|
||||
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1 @@
|
|||
GEOGCS["WGS84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["degree",0.017453292519943295]]
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1 @@
|
|||
GEOGCS["WGS84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["degree",0.017453292519943295]]
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,74 @@
|
|||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [{
|
||||
"type": "Feature",
|
||||
"id": "gongzuoqu.1",
|
||||
"geometry": {
|
||||
"type": "MultiLineString",
|
||||
"coordinates": [
|
||||
[
|
||||
[597164.34124756, 3902914.16094971],
|
||||
[597238.42474365, 3900585.82287598],
|
||||
[596402.33978271, 3900855.69836426],
|
||||
[596365.95953369, 3900497.40789795],
|
||||
[597636.23773193, 3899156.21026611],
|
||||
[597803.25622559, 3894280.59094238],
|
||||
[597792.6729126, 3894280.59094238]
|
||||
]
|
||||
]
|
||||
},
|
||||
"geometry_name": "the_geom",
|
||||
"properties": {
|
||||
"Id": 0
|
||||
}
|
||||
}, {
|
||||
"type": "Feature",
|
||||
"id": "gongzuoqu.2",
|
||||
"geometry": {
|
||||
"type": "MultiLineString",
|
||||
"coordinates": [
|
||||
[
|
||||
[602697.39624023, 3899318.32714844],
|
||||
[602342.85369873, 3899196.61853027],
|
||||
[601046.39282227, 3896979.40576172],
|
||||
[601649.64404297, 3896831.23883057],
|
||||
[601348.01855469, 3895518.902771],
|
||||
[600757.46728516, 3895055.35198975],
|
||||
[600790.2756958, 3893622.56414795]
|
||||
]
|
||||
]
|
||||
},
|
||||
"geometry_name": "the_geom",
|
||||
"properties": {
|
||||
"Id": 0
|
||||
}
|
||||
}, {
|
||||
"type": "Feature",
|
||||
"id": "gongzuoqu.3",
|
||||
"geometry": {
|
||||
"type": "MultiLineString",
|
||||
"coordinates": [
|
||||
[
|
||||
[597752.94244385, 3893617.91619873],
|
||||
[601212.37646484, 3893584.84338379],
|
||||
[603633.31896973, 3893346.71777344],
|
||||
[603613.47497559, 3893346.71777344]
|
||||
]
|
||||
]
|
||||
},
|
||||
"geometry_name": "the_geom",
|
||||
"properties": {
|
||||
"Id": 0
|
||||
}
|
||||
}],
|
||||
"totalFeatures": 3,
|
||||
"numberMatched": 3,
|
||||
"numberReturned": 3,
|
||||
"timeStamp": "2022-11-22T02:15:30.502Z",
|
||||
"crs": {
|
||||
"type": "name",
|
||||
"properties": {
|
||||
"name": "urn:ogc:def:crs:EPSG::4548"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [{
|
||||
"type": "Feature",
|
||||
"id": "hangfeiguiji.fid-bfab12f_18498958fb5_6020",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [117.630269,35.522324]
|
||||
},
|
||||
"geometry_name": "geom",
|
||||
"properties": {
|
||||
"name":"平邑县财政局"
|
||||
}
|
||||
}, {
|
||||
"type": "Feature",
|
||||
"id": "hangfeiguiji.fid-bfab12f_18498958fb5_6020",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [117.625443,35.519967]
|
||||
},
|
||||
"geometry_name": "geom",
|
||||
"properties": {
|
||||
"name":"平邑县自然资源和规划局"
|
||||
}
|
||||
}, {
|
||||
"type": "Feature",
|
||||
"id": "hangfeiguiji.fid-bfab12f_18498958fb5_6021",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [117.621274,35.523047]
|
||||
},
|
||||
"geometry_name": "geom",
|
||||
"properties": {
|
||||
"name":"平邑县人民政府"
|
||||
}
|
||||
}, {
|
||||
"type": "Feature",
|
||||
"id": "hangfeiguiji.fid-bfab12f_18498958fb5_6022",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [117.620173,35.522042]
|
||||
},
|
||||
"geometry_name": "geom",
|
||||
"properties": {
|
||||
"name":"平邑人民法院"
|
||||
}
|
||||
}, {
|
||||
"type": "Feature",
|
||||
"id": "hangfeiguiji.fid-bfab12f_18498958fb5_6023",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [117.635574,35.518108]
|
||||
},
|
||||
"geometry_name": "geom",
|
||||
"properties": {
|
||||
"name":"平邑县水利局"
|
||||
}
|
||||
}
|
||||
],
|
||||
"totalFeatures": 485275,
|
||||
"numberMatched": 485275,
|
||||
"numberReturned": 10,
|
||||
"timeStamp": "2022-11-21T05:47:45.577Z",
|
||||
"crs": {
|
||||
"type": "name",
|
||||
"properties": {
|
||||
"name": "urn:ogc:def:crs:EPSG::4326"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [{
|
||||
"type": "Feature",
|
||||
"id": "hangfeiguiji.fid-bfab12f_18498958fb5_6020",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [117.650865,35.507515]
|
||||
},
|
||||
"geometry_name": "geom",
|
||||
"properties": {
|
||||
"name":"平邑县平邑街道卫生院"
|
||||
}
|
||||
}, {
|
||||
"type": "Feature",
|
||||
"id": "hangfeiguiji.fid-bfab12f_18498958fb5_6020",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [117.633634,35.491953]
|
||||
},
|
||||
"geometry_name": "geom",
|
||||
"properties": {
|
||||
"name":"平邑县人民医院"
|
||||
}
|
||||
}, {
|
||||
"type": "Feature",
|
||||
"id": "hangfeiguiji.fid-bfab12f_18498958fb5_6021",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [117.653922,35.471679]
|
||||
},
|
||||
"geometry_name": "geom",
|
||||
"properties": {
|
||||
"name":"平邑县心里医院"
|
||||
}
|
||||
}, {
|
||||
"type": "Feature",
|
||||
"id": "hangfeiguiji.fid-bfab12f_18498958fb5_6022",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [117.676242,35.473014]
|
||||
},
|
||||
"geometry_name": "geom",
|
||||
"properties": {
|
||||
"name":"平邑县中医医院"
|
||||
}
|
||||
}, {
|
||||
"type": "Feature",
|
||||
"id": "hangfeiguiji.fid-bfab12f_18498958fb5_6023",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [117.676242,35.473014]
|
||||
},
|
||||
"geometry_name": "geom",
|
||||
"properties": {
|
||||
"name":"山东省鲁南眼科医院"
|
||||
}
|
||||
}
|
||||
],
|
||||
"totalFeatures": 485275,
|
||||
"numberMatched": 485275,
|
||||
"numberReturned": 10,
|
||||
"timeStamp": "2022-11-21T05:47:45.577Z",
|
||||
"crs": {
|
||||
"type": "name",
|
||||
"properties": {
|
||||
"name": "urn:ogc:def:crs:EPSG::4326"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,70 @@
|
|||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [{
|
||||
"type": "Feature",
|
||||
"id": "平邑县实验小学",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [117.640066,35.520175]
|
||||
},
|
||||
"geometry_name": "geom",
|
||||
"properties": {
|
||||
"name":"平邑县实验小学"
|
||||
}
|
||||
}, {
|
||||
"type": "Feature",
|
||||
"id": "hangfeiguiji.fid-bfab12f_18498958fb5_6020",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [117.645876,35.510574]
|
||||
},
|
||||
"geometry_name": "geom",
|
||||
"properties": {
|
||||
"name":"平邑县平邑街道第二实验小学"
|
||||
}
|
||||
}, {
|
||||
"type": "Feature",
|
||||
"id": "hangfeiguiji.fid-bfab12f_18498958fb5_6021",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [117.679491,35.507493]
|
||||
},
|
||||
"geometry_name": "geom",
|
||||
"properties": {
|
||||
"name":"平邑蒙阳新星小学"
|
||||
}
|
||||
}, {
|
||||
"type": "Feature",
|
||||
"id": "hangfeiguiji.fid-bfab12f_18498958fb5_6022",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [117.62022,35.51353]
|
||||
},
|
||||
"geometry_name": "geom",
|
||||
"properties": {
|
||||
"name":"平邑县赛博中学"
|
||||
}
|
||||
}, {
|
||||
"type": "Feature",
|
||||
"id": "hangfeiguiji.fid-bfab12f_18498958fb5_6023",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [117.609994,35.505332]
|
||||
},
|
||||
"geometry_name": "geom",
|
||||
"properties": {
|
||||
"name":"平邑县第一中学（西校区）"
|
||||
}
|
||||
}
|
||||
],
|
||||
"totalFeatures": 485275,
|
||||
"numberMatched": 485275,
|
||||
"numberReturned": 10,
|
||||
"timeStamp": "2022-11-21T05:47:45.577Z",
|
||||
"crs": {
|
||||
"type": "name",
|
||||
"properties": {
|
||||
"name": "urn:ogc:def:crs:EPSG::4326"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 865 B |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>平邑县应急管理一张图</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
{
|
||||
"fill":[
|
||||
{
|
||||
"name":"是否反锯齿",
|
||||
"label":"fill-antialias",
|
||||
"alabel":"fillAntialias",
|
||||
"type":"radio",
|
||||
"value":"",
|
||||
"options":[
|
||||
true,false
|
||||
]
|
||||
},{
|
||||
"name":"填充透明度",
|
||||
"label":"fill-opacity",
|
||||
"alabel":"fillOpacity",
|
||||
"type":"input",
|
||||
"value":""
|
||||
},{
|
||||
"name":"填充颜色",
|
||||
"label":"fill-color",
|
||||
"alabel":"fillColor",
|
||||
"type":"color",
|
||||
"value":""
|
||||
},{
|
||||
"name":"边界线颜色",
|
||||
"label":"fill-outline-color",
|
||||
"alabel":"fillOutlineColor",
|
||||
"type":"color",
|
||||
"value":""
|
||||
}
|
||||
],
|
||||
"line":[
|
||||
{
|
||||
"name":"线透明度",
|
||||
"label":"line-opacity",
|
||||
"type":"input",
|
||||
"value":1
|
||||
},{
|
||||
"name":"线颜色",
|
||||
"label":"line-color",
|
||||
"type":"color",
|
||||
"value":"#00ff00"
|
||||
},{
|
||||
"name":"线宽度",
|
||||
"label":"line-width",
|
||||
"type":"input",
|
||||
"value":1
|
||||
}
|
||||
],
|
||||
"circle":[
|
||||
{
|
||||
"name":"圆点的不透明度",
|
||||
"label":"circle-opacity",
|
||||
"type":"input",
|
||||
"value":1
|
||||
},{
|
||||
"name":"圆点的半径",
|
||||
"label":"circle-radius",
|
||||
"type":"input",
|
||||
"value":5
|
||||
},{
|
||||
"name":"圆点颜色",
|
||||
"label":"circle-color",
|
||||
"type":"color",
|
||||
"value":"#00ff00"
|
||||
},{
|
||||
"name":"圆点描边宽度",
|
||||
"label":"circle-stroke-width",
|
||||
"type":"input",
|
||||
"value":1
|
||||
},{
|
||||
"name":"圆点描边颜色",
|
||||
"label":"circle-stroke-color",
|
||||
"type":"color",
|
||||
"value":"#00ff00"
|
||||
},{
|
||||
"name":"圆点描边透明度",
|
||||
"label":"circle-stroke-opacity",
|
||||
"type":"input",
|
||||
"value":1
|
||||
}
|
||||
],
|
||||
"symbol":[
|
||||
{
|
||||
"name":"图标",
|
||||
"label":"icon-image",
|
||||
"type":"icon",
|
||||
"value":""
|
||||
},{
|
||||
"name":"图标大小",
|
||||
"label":"icon-size",
|
||||
"type":"input",
|
||||
"value":""
|
||||
},{
|
||||
"name":"图标旋转角",
|
||||
"label":"icon-rotation",
|
||||
"type":"input",
|
||||
"value":0
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"App",
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
localStorage.setItem("Token","92fc7ed8");
|
||||
},
|
||||
components:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
*{
|
||||
font-size:14px;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import service from "./request";
|
||||
import {Url} from "./urlFormat";
|
||||
|
||||
export const getMethodCommon = function (_url, params) {
|
||||
let urls = new Url()
|
||||
let new_url = urls.getUrl(_url, params)
|
||||
return service({
|
||||
url: new_url,
|
||||
method: 'GET',
|
||||
})
|
||||
}
|
||||
|
||||
export const postMethodCommon = function (_url, data) {
|
||||
return service({
|
||||
url: _url,
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// export const getShpTable = function (params) {
|
||||
// return service({
|
||||
// url: '/ShpManager/SearchShpTable',
|
||||
// method: 'get',
|
||||
// params
|
||||
// })
|
||||
// }
|
||||
|
||||
// export const getKjLoad = function (params) {
|
||||
// return service({
|
||||
// url: '/Categorys/Load',
|
||||
// method: 'get',
|
||||
// params
|
||||
// })
|
||||
// }
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import axios from 'axios'
|
||||
import {BASE_API} from '../../public/config/server.js'
|
||||
import router from '../router/index.js'
|
||||
|
||||
// 创建axios实例
|
||||
const service = axios.create({
|
||||
// baseURL: process.env.VUE_APP_BASE_API, // api的base_url
|
||||
baseURL: BASE_API + "/api",
|
||||
// baseURL:"http://192.168.10.123:9272/api",
|
||||
timeout: 50000, // 请求超时时间
|
||||
withCredentials: false,
|
||||
})
|
||||
|
||||
// request拦截器
|
||||
service.interceptors.request.use(config => {
|
||||
config.headers['Authorization'] = 'Bearer ' + localStorage.getItem("Token");
|
||||
config.headers['Content-Type'] = 'application/json;charset=UTF-8'
|
||||
config.headers['X-Token'] = localStorage.getItem("Token");
|
||||
return config
|
||||
}, error => {
|
||||
// Do something with request error
|
||||
console.log(error) // for debug
|
||||
Promise.reject(error)
|
||||
})
|
||||
|
||||
// respone拦截器
|
||||
service.interceptors.response.use(response => {
|
||||
/**
|
||||
* code为非200是抛错 可结合自己业务进行修改
|
||||
*/
|
||||
const res = response.data
|
||||
if (res.code !== 200) {
|
||||
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
|
||||
if (res.code === 50008 || res.code === 50012 || res.code === 50014 || res.code == 401) {
|
||||
console.log(1);
|
||||
} else {
|
||||
// Message({
|
||||
// message: res.message || res.msg,
|
||||
// type: 'error',
|
||||
// duration: 5 * 1000
|
||||
// })
|
||||
|
||||
}
|
||||
return Promise.reject('error')
|
||||
} else {
|
||||
return response.data
|
||||
}
|
||||
},
|
||||
error => {
|
||||
console.log(error)
|
||||
if (String(error) === 'Error: Request failed with status code 401') {
|
||||
router.replace({
|
||||
path: '/login',
|
||||
// query: { redirect: router.currentRoute.fullPath }
|
||||
})
|
||||
|
||||
// ElMessageBox.confirm('未登录用户，可以【取消】继续留在该页面，或者点击【登录】', '登录提醒', {
|
||||
// confirmButtonText: '登录',
|
||||
// cancelButtonText: '取消',
|
||||
// type: 'warning'
|
||||
// }).then(() => {
|
||||
// localStorage.setItem("Token", "");
|
||||
// router.replace({
|
||||
// path: '/',
|
||||
// // query: { redirect: router.currentRoute.fullPath }
|
||||
// })
|
||||
// })
|
||||
// console.log('response' + error)// for debug
|
||||
|
||||
}
|
||||
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default service
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
export class Url {
|
||||
/**
|
||||
* 传入对象返回url参数
|
||||
* @param {Object} data {a:1}
|
||||
* @returns {string}
|
||||
*/
|
||||
getParam(data) {
|
||||
let url = '';
|
||||
for (let k in data) {
|
||||
let value = data[k] !== undefined ? data[k] : '';
|
||||
if (value !== undefined && value !== "" && value !== null) {
|
||||
url += `&${k}=${encodeURIComponent(value)}`
|
||||
}
|
||||
}
|
||||
return url ? url.substring(1) : ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 将url和参数拼接成完整地址
|
||||
* @param {string} url url地址
|
||||
* @param {Json} data json对象
|
||||
* @returns {string}
|
||||
*/
|
||||
getUrl(url, data) {
|
||||
//看原始url地址中开头是否带?，然后拼接处理好的参数w
|
||||
return url += (url.indexOf('?') < 0 ? '?' : '') + this.getParam(data)
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,291 @@
|
|||
<template>
|
||||
<div class="draw-panl-container">
|
||||
<div class="close-btn" @click="$emit('close')">
|
||||
<i class="el-icon-close"></i>
|
||||
</div>
|
||||
<div class="layer-name">{{this.editLayerInfo.name}}</div>
|
||||
<div class="operate-btn-container">
|
||||
<div class="operate-btn" @click="addPoint">
|
||||
<img src="/images/system/draw-add.png" alt="">
|
||||
<div class="text">添加</div>
|
||||
</div>
|
||||
<div class="operate-btn" @click="deletePoint">
|
||||
<img src="/images/system/draw-del.png" alt="">
|
||||
<div class="text" >删除</div>
|
||||
</div>
|
||||
<div class="operate-btn" @click="saveData()">
|
||||
<img src="/images/system/draw-save.png" alt="">
|
||||
<div class="text">保存</div>
|
||||
</div>
|
||||
<div class="operate-btn" @click="$emit('close')">
|
||||
<img src="/images/system/draw-close.png" alt="">
|
||||
<div class="text">关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title">属性信息</div>
|
||||
|
||||
<div class="form-container">
|
||||
<el-form ref="form" :model="form" label-position="top" label-width="80px" size="mini">
|
||||
<el-form-item v-for="(item,index) in columns" :key="index" v-show="item.dbColumnName != 'gid' && item.dbColumnName != 'geom'" :label="item['cn_name']">
|
||||
<el-input v-model="form[item.dbColumnName]"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="地块面积（亩）：">
|
||||
<el-input v-model="form.area"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="调查类型：">
|
||||
<el-input v-model="form.type"></el-input>
|
||||
</el-form-item> -->
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getMethodCommon, postMethodCommon } from '../api/common';
|
||||
export default {
|
||||
name:"DrawPanl",
|
||||
props:["editLayerInfo","currentLngLat","editRandom"],
|
||||
data(){
|
||||
return {
|
||||
dictionaries:[],
|
||||
columns:[],
|
||||
form:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
editRandom:function(e){
|
||||
let arr = e.split(",");
|
||||
let listQuery = {
|
||||
gid:arr[0],
|
||||
tablename:arr[1]
|
||||
}
|
||||
this.getDetail(listQuery);
|
||||
},
|
||||
editLayerInfo:{
|
||||
deep:true,//true为进行深度监听,false为不进行深度监听
|
||||
handler(newVal){
|
||||
console.log("editLayerInfo",newVal);
|
||||
}
|
||||
},
|
||||
'currentLngLat':function(e){
|
||||
console.log(e);
|
||||
}
|
||||
},
|
||||
created(){
|
||||
console.log("editLayerInfo",this.editLayerInfo);
|
||||
this.getDictionaries();
|
||||
},
|
||||
methods:{
|
||||
// 添加图标
|
||||
addPoint(){
|
||||
this.form = {};
|
||||
this.$emit('addpoint');
|
||||
},
|
||||
// 获取属性字段
|
||||
getDetail(listQuery){
|
||||
getMethodCommon("/LayerManager/GetNodeinfo",listQuery).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.form = res.result;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取字典
|
||||
getDictionaries(){
|
||||
postMethodCommon("/CimEncndesc/Load",{page:1,limit:999}).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.dictionaries = res.data;
|
||||
this.getColumns();
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取数据属性字段信息
|
||||
getColumns(){
|
||||
getMethodCommon("/LayerManager/LoadColumnInfos",{tablename:this.editLayerInfo.tablename}).then(res=>{
|
||||
if(res.code == 200){
|
||||
for(let i=0;i<res.result.length;i++){
|
||||
|
||||
let obj = this.dictionaries.find((item)=>{
|
||||
return item['en_name'] == res.result[i].dbColumnName;
|
||||
})
|
||||
if(obj){
|
||||
res.result[i]['cn_name'] = obj['cn_name']
|
||||
}else{
|
||||
res.result[i]['cn_name'] = '暂无属性'
|
||||
}
|
||||
}
|
||||
this.columns = res.result;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 保存绘制的数据信息
|
||||
saveData(){
|
||||
// let geom = "POINT("+this.currentLngLat+")";
|
||||
let saveInfo = [];
|
||||
for(let key in this.form){
|
||||
let obj = {
|
||||
plname:key,
|
||||
plexp:this.form[key]
|
||||
}
|
||||
saveInfo.push(obj);
|
||||
}
|
||||
let geom = "POINT("+this.currentLngLat+")";
|
||||
saveInfo.push({plname:"geom",plexp:geom});
|
||||
saveInfo = JSON.stringify(saveInfo);
|
||||
postMethodCommon("/LayerManager/InsertData?request="+saveInfo+"&tablename="+this.editLayerInfo.tablename).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.$message({type:"success",message:"保存成功"});
|
||||
this.$emit("addPointSuccess");
|
||||
this.$emit('delpoint')
|
||||
this.form = {};
|
||||
}
|
||||
})
|
||||
},
|
||||
deletePoint(){
|
||||
|
||||
let arr = this.editRandom.split(",");
|
||||
|
||||
postMethodCommon("/LayerManager/DeleteNodeInfo?gid="+parseInt(arr[0])+"&tablename="+arr[1]).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.$message({type:"success",message:"删除成功"});
|
||||
this.form = {};
|
||||
}
|
||||
})
|
||||
|
||||
this.$emit('delpoint')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.draw-panl-container{
|
||||
width:300px;
|
||||
height:500px;
|
||||
padding:20px;
|
||||
border-radius:4px;
|
||||
background:rgba(7, 130, 245, 0.3);
|
||||
box-shadow: 0px 0px 32px inset rgba(0,157,255,0.7);
|
||||
background: rgba(6,16,64,0.6);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 0px 32px inset rgba(0,157,255,0.7);
|
||||
}
|
||||
.operate-btn-container{
|
||||
width:100%;
|
||||
height:100px;
|
||||
}
|
||||
.close-btn{
|
||||
width:30px;
|
||||
height:30px;
|
||||
position:absolute;
|
||||
right:-15px;
|
||||
top:-15px;
|
||||
background:rgba(7, 130, 245, 0.5);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
color:#fff;
|
||||
font-size:14px;
|
||||
line-height:30px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.operate-btn{
|
||||
width:50px;
|
||||
height:50px;
|
||||
text-align: center;
|
||||
background:rgba(0,157,255,0.4);
|
||||
border-radius: 50%;
|
||||
float:left;
|
||||
margin:4px 12.5px;
|
||||
position: relative;
|
||||
}
|
||||
.operate-btn:hover{
|
||||
cursor:pointer;
|
||||
color:rgba(0,157,255,1);
|
||||
}
|
||||
.operate-btn .text{
|
||||
width:50px;
|
||||
position: absolute;
|
||||
bottom:-20px;
|
||||
color:#ccc;
|
||||
text-align: center;
|
||||
left:0px;
|
||||
}
|
||||
.operate-btn img{
|
||||
width:30px;
|
||||
margin-top:10px;
|
||||
}
|
||||
.layer-name{
|
||||
width:100%;
|
||||
height:40px;
|
||||
color:#ccc;
|
||||
position: relative;
|
||||
text-indent:30px;
|
||||
}
|
||||
.layer-name::before{
|
||||
content:"";
|
||||
width:20px;
|
||||
height:1px;
|
||||
background:#ccc;
|
||||
position:absolute;
|
||||
top:10px;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
.title{
|
||||
width:100%;
|
||||
color:#ccc;
|
||||
position: relative;
|
||||
text-indent:30px;
|
||||
}
|
||||
.title::after{
|
||||
content:"";
|
||||
width:200px;
|
||||
height:1px;
|
||||
background:#ccc;
|
||||
position:absolute;
|
||||
top:10px;
|
||||
left:100px;
|
||||
}
|
||||
|
||||
.title::before{
|
||||
content:"";
|
||||
width:20px;
|
||||
height:1px;
|
||||
background:#ccc;
|
||||
position:absolute;
|
||||
top:10px;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
::v-deep .el-form-item__label{
|
||||
color:#ccc;
|
||||
padding:0px 0px;
|
||||
margin-top:10px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
background:none;
|
||||
border:1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
color:#ccc;
|
||||
box-shadow: none;
|
||||
}
|
||||
.form-container{
|
||||
width:100%;
|
||||
height:340px;
|
||||
overflow-y:auto;
|
||||
padding-right:6px;
|
||||
}
|
||||
.form-container::-webkit-scrollbar{
|
||||
width:8px;
|
||||
}
|
||||
.form-container::-webkit-scrollbar-thumb{
|
||||
width:8px;
|
||||
background:rgba(0,0,0,0.7);
|
||||
border-radius:4px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<div class="menu">
|
||||
<div class="menu-box" v-for="(item,index) in menu_tree" :key="index" @click.stop="changeShow(item,level,index)" :style="{'margin-left': level>1?'20px':'0px','text-indent':'8px','border-left':level>1? '1px solid #3a87b1' :'1px solid rgba(0,0,0,0)'}" >
|
||||
<div class="type-name">
|
||||
<p :style="{'color':item.show ? '#3a87b1' :'#8a91aa'}">
|
||||
<i class="el-icon-caret-bottom" v-show="item.children && item.children.length>0 && !item.show"></i>
|
||||
<i class="el-icon-caret-top" v-show="item.children && item.children.length>0 && item.show"></i>
|
||||
<span v-show="item.children && item.children.length==0"> </span>
|
||||
{{item.name}}</p>
|
||||
<div v-show="item.children && item.children.length>0 && item.show" class="point"></div>
|
||||
</div>
|
||||
|
||||
<LayerTree v-show="item.children && item.children.length>0 && item.show" :menu_tree="item.children" :level="level+1" ></LayerTree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"LayerTree",
|
||||
props:["menu_tree","level"],
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
changeShow(item,level,index){
|
||||
console.log(level,index);
|
||||
console.log(item);
|
||||
if(item.children && item.children.length>0){
|
||||
item.show = !item.show;
|
||||
console.log(item.show);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.menu{
|
||||
width:100%;
|
||||
min-height:30px;
|
||||
}
|
||||
.menu-box{
|
||||
width:100%;
|
||||
min-height:30px;
|
||||
line-height:30px;
|
||||
color:#fff;
|
||||
cursor:pointer;
|
||||
/* color:#37c9fa; */
|
||||
color:#efefef;
|
||||
}
|
||||
.type-name{
|
||||
width:100%;
|
||||
height:30px;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.type-name p{
|
||||
position:relative;
|
||||
}
|
||||
.point{
|
||||
width:5px;
|
||||
height:5px;
|
||||
border-radius: 50%;
|
||||
background:#37c9fa;
|
||||
position:absolute;
|
||||
left:18px;
|
||||
bottom:-2.5px;
|
||||
}
|
||||
::v-deep [class*=" el-icon-"], [class^=el-icon-]{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<div class="maplayertree">
|
||||
<div class="layer-type" v-for="(item,index) in menu_tree" :key="index" v-show="item.nodetype == 1" :style="{'border-left':'2px solid '+item.color}">
|
||||
<div class="typeinfo" @click="showChild(item)" >
|
||||
<div style="float:left;"><img :src="item.icon ? item.icon : '/images/map/layer-type-7.png'" alt=""></div>
|
||||
<div style="float:left;margin-left:15px;">
|
||||
<p style="font-weight:bold;line-height:32px;">{{item.name}}</p>
|
||||
<p :style="{'color':item.color}">{{item.children.length}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layers-container" v-show="item.children&&item.children.length>0 && item.children[0].layertype">
|
||||
<p v-for="(it,idx) in item.children" :key="idx" :style="{'color':it.show ? '#ff0000':'#00FFB3'}">
|
||||
<img src="/images/map/box.png" width="20px" style="position:relative;top:4px;" alt="">
|
||||
<span @click="$emit('addLayer',it);it.show = !it.show">{{it.name}}</span>
|
||||
<span class="edit-btn" @click="$emit('editLayer',it)"><i class="el-icon-edit"></i></span>
|
||||
</p>
|
||||
</div>
|
||||
<MapLayerTree @addLayer="addLayer" @editLayer="editLayer" v-show="item.show" :menu_tree="item.children" :level="level+1"></MapLayerTree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"MapLayerTree",
|
||||
props:["menu_tree","level"],
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
methods:{
|
||||
showChild(item){
|
||||
item.show = !item.show
|
||||
},
|
||||
addLayer(item){
|
||||
|
||||
// if(item.show == false){
|
||||
// item.show = true;
|
||||
// }else if(item.show == true){
|
||||
// item.show = false;
|
||||
// }
|
||||
|
||||
this.$emit("addLayer",item);
|
||||
|
||||
// item.show = !item.show;
|
||||
},
|
||||
editLayer(item){
|
||||
this.$emit("editLayer",item);
|
||||
item.isEdit = !item.isEdit;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.maplayertree{
|
||||
width:100%;
|
||||
}
|
||||
.layer-type{
|
||||
width:100%;
|
||||
min-height:50px;
|
||||
margin-left:24px;
|
||||
padding-left:12px;
|
||||
line-height:10px;
|
||||
}
|
||||
.typeinfo:hover{
|
||||
cursor:pointer;
|
||||
}
|
||||
.typeinfo{
|
||||
color:#efefef;
|
||||
font-size:15px;
|
||||
min-height:50px;
|
||||
position: relative;
|
||||
left:-40px;
|
||||
top:-2px;
|
||||
}
|
||||
.typeinfo::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height:0;
|
||||
}
|
||||
.typeinfo img{
|
||||
width:50px;
|
||||
height:50px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
.layers-container{
|
||||
width:100%;
|
||||
line-height:32px;
|
||||
color:#00FFB3;
|
||||
}
|
||||
|
||||
.layers-container p{
|
||||
cursor:pointer;
|
||||
}
|
||||
.edit-btn{
|
||||
margin-left:6px;
|
||||
font-weight:bold;
|
||||
color:#ccc;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
<template>
|
||||
<div class="window-container">
|
||||
<div class="title">
|
||||
详细信息
|
||||
<span class="close-btn" @click="$emit('closeAttributeWindow')">
|
||||
×
|
||||
</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="item-header">
|
||||
{{datainfo.dwmc}}
|
||||
</div>
|
||||
<!-- <div class="item" v-for="(val, key , i) in detailData" :key="i">
|
||||
<div class="item-title">{{key}}</div>
|
||||
<div class="item-value">{{val!='' && val != null && val != 'null' ? val :"暂无数据"}}</div>
|
||||
</div> -->
|
||||
<div class="item" v-for="(item,index) in detailDataArr" :key="index" v-show="item.name && item.value">
|
||||
<div class="item-title">{{item.name != "" && item.name != null && item.name != "nulll" ? item.name : "暂无属性"}}</div>
|
||||
<div class="item-value">{{item.value != "" && item.value != null && item.value != "nulll" ? item.value : "暂无数据"}}</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="item">
|
||||
<div class="item-title">办学类型</div>
|
||||
<div class="item-value">基础教育，九年一贯制学校</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-title">占地面积</div>
|
||||
<div class="item-value">7374.00m²</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-title">校舍占地面积</div>
|
||||
<div class="item-value">365.00m²</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-title">万元以上设备台数</div>
|
||||
<div class="item-value">112</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-title">是否含文物保护单位或历史建筑</div>
|
||||
<div class="item-value">否</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-title">教职工数</div>
|
||||
<div class="item-value">512</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-title">在校生数</div>
|
||||
<div class="item-value">2312</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-title">寄宿生数</div>
|
||||
<div class="item-value">1112</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-title">教室数</div>
|
||||
<div class="item-value">196</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-title">安保人员数量</div>
|
||||
<div class="item-value">32</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-title">应急通信保障</div>
|
||||
<div class="item-value">移动电话</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-title">联系电话</div>
|
||||
<div class="item-value">17861857725</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getMethodCommon, postMethodCommon } from '../api/common'
|
||||
export default {
|
||||
props:["targetObj"],
|
||||
data(){
|
||||
return {
|
||||
detailData:{},
|
||||
datainfo:{},
|
||||
dictionaries:[],
|
||||
detailDataArr:[],
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getDictionaries();
|
||||
},
|
||||
watch:{
|
||||
targetObj:{
|
||||
handler(){
|
||||
this.getDetail();
|
||||
},
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getDictionaries(){
|
||||
postMethodCommon("/CimEncndesc/Load",{page:1,limit:999}).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.dictionaries = res.data;
|
||||
this.getDetail();
|
||||
}
|
||||
})
|
||||
},
|
||||
getDetail(){
|
||||
getMethodCommon("/LayerManager/GetNodeinfo",this.targetObj).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.detailData = res.result;
|
||||
this.detailDataArr = [];
|
||||
for(let key in this.detailData){
|
||||
let detail = {}
|
||||
let enObj = this.dictionaries.find((item)=>{
|
||||
return item.en_name == key
|
||||
})
|
||||
if(enObj){
|
||||
detail.name = enObj.cn_name ? enObj.cn_name : null;
|
||||
}else{
|
||||
detail.name = "暂无属性"
|
||||
}
|
||||
detail.value = this.detailData[key];
|
||||
this.detailDataArr.push(detail);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.window-container{
|
||||
width:100%;height:100%;
|
||||
/* box-shadow: 0px 0px 32px inset rgba(0,157,255,0.7); */
|
||||
}
|
||||
.title{
|
||||
width:100%;
|
||||
height:32px;
|
||||
line-height: 32px;
|
||||
color:#fff;
|
||||
text-indent:8px;
|
||||
}
|
||||
.info{
|
||||
width:100%;
|
||||
padding:12px;
|
||||
box-sizing: border-box;
|
||||
height:460px;
|
||||
overflow: auto;
|
||||
background: rgba(6,16,64,0.7);
|
||||
}
|
||||
.info::-webkit-scrollbar{
|
||||
width:10px;
|
||||
background:rgba(0,0,0,0);
|
||||
border-radius:5px;
|
||||
display:none;
|
||||
}
|
||||
|
||||
.item-header{
|
||||
width:100%;
|
||||
height:30px;
|
||||
background:rgba(0,157,255,0.4);
|
||||
line-height:30px;
|
||||
color:#fff;
|
||||
text-indent: 8px;
|
||||
border-bottom:1px solid #088EDA;
|
||||
}
|
||||
.item{
|
||||
width: calc( 100% - 2px);
|
||||
height:30px;
|
||||
line-height: 30px;
|
||||
color:#fff;
|
||||
border-bottom:1px solid #088EDA;
|
||||
/* border-top:1px solid #088EDA; */
|
||||
border-left:1px solid #088EDA;
|
||||
text-indent: 6px;
|
||||
}
|
||||
.item .item-title{
|
||||
width:40%;
|
||||
float:left;
|
||||
font-size:12px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.item .item-value{
|
||||
width: calc( 60% - 2px);
|
||||
float:left;
|
||||
font-size:12px;
|
||||
border-left:1px solid #088EDA;
|
||||
border-right:1px solid #088EDA;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.close-btn{
|
||||
float:right;font-size:24px;margin-right:10px;cursor:pointer;
|
||||
}
|
||||
.close-btn:hover{
|
||||
color:#cecece;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<div class="search-result-container">
|
||||
<div class="item" v-for="(item,index) in results" :key="index" @click="toPosition(item)">
|
||||
<div class="item-name">
|
||||
<span>{{item.name}}</span><span style="font-size:12px;"> ({{item.address}})</span>
|
||||
</div>
|
||||
<span style="float:right;">
|
||||
<img src="/images/map/nav.png" width="20px" alt="">
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="pagenation">
|
||||
<
|
||||
|
||||
第1页
|
||||
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"SearchResultContainer",
|
||||
props:['searchKeyWord'],
|
||||
data(){
|
||||
return {
|
||||
results:[]
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
searchKeyWord:function(e){
|
||||
|
||||
this.$axios.get(
|
||||
"http://api.tianditu.gov.cn/v2/search",
|
||||
{
|
||||
params:{
|
||||
postStr:`{"keyWord":"${e}","level":12,"mapBound":"117.278042,35.35744,117.889753,35.744603","queryType":1,"start":0,"count":10}`,
|
||||
type:"query",
|
||||
tk:"90d6205af98eba888bedac201220e38c",
|
||||
}
|
||||
}
|
||||
).then(res=>{
|
||||
this.results = [];
|
||||
if(res.data.pois){
|
||||
res.data.pois.forEach((item)=>{
|
||||
this.results.push({
|
||||
name:item.name,
|
||||
address:item.address,
|
||||
lonlat:item.lonlat,
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
|
||||
|
||||
|
||||
},
|
||||
methods:{
|
||||
toPosition(info){
|
||||
this.$emit("toPosition",info);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.search-result-container{
|
||||
width:100%;
|
||||
min-height:240px;
|
||||
height:442px;
|
||||
opacity: 0.78;
|
||||
background: rgba(6,16,64,0.9);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 0px 32px inset rgba(0,157,255,0.7);
|
||||
padding:20px 0px;
|
||||
}
|
||||
|
||||
.item{
|
||||
width: calc( 100% - 50px);
|
||||
margin:0px 15px;
|
||||
padding:0px 10px;
|
||||
height:40px;
|
||||
border-bottom:1px solid #0a4484;
|
||||
line-height:40px;
|
||||
font-size:14px;
|
||||
color:#fff;
|
||||
}
|
||||
.item-name{
|
||||
width:240px;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
float:left;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.item:hover{
|
||||
cursor:pointer;
|
||||
color:rgba(0,157,255,1);
|
||||
}
|
||||
.item img{
|
||||
position:relative;
|
||||
top:5px;
|
||||
}
|
||||
.pagenation{
|
||||
position:absolute;
|
||||
bottom:00px;
|
||||
height:30px;
|
||||
width:100%;
|
||||
color:#fff;
|
||||
text-align:center;
|
||||
line-height:30px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
|
||||
import ElementUI from 'element-ui';
|
||||
import "element-ui/lib/theme-chalk/index.css";
|
||||
Vue.use(ElementUI);
|
||||
import axios from 'axios';
|
||||
Vue.prototype.$axios = axios;
|
||||
|
||||
// 引入Echarts
|
||||
import * as echarts from 'echarts'
|
||||
Vue.prototype.$echarts = echarts
|
||||
|
||||
//引入mapbox css
|
||||
import 'mapbox-gl/dist/mapbox-gl.css'
|
||||
//引入mapbox
|
||||
import mapboxgl from 'mapbox-gl';
|
||||
//将mapbox挂在到Vue对象上
|
||||
Vue.prototype.$mapboxgl = mapboxgl;
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: () => import( '../views/Home.vue'),
|
||||
redirect:"index",
|
||||
meta: {requireAuth: true},
|
||||
children:[
|
||||
{
|
||||
path:"index",
|
||||
name:"Index",
|
||||
component: () => import( '../views/Index.vue'),
|
||||
meta: {requireAuth: true},
|
||||
},{
|
||||
path:"map",
|
||||
name:"Map",
|
||||
component: () => import( '../views/Map.vue'),
|
||||
meta: {requireAuth: true},
|
||||
},{
|
||||
path:"data",
|
||||
name:"Data",
|
||||
redirect:"/data/basedata",
|
||||
component: () => import( '../views/DataManagement.vue'),
|
||||
meta: {requireAuth: true},
|
||||
children:[
|
||||
{
|
||||
path:"basedata",
|
||||
name:"basedata",
|
||||
component: () => import("../views/datamanagement/BaseDataManagement.vue"),
|
||||
meta: {requireAuth: true},
|
||||
},
|
||||
{
|
||||
path:"layertype",
|
||||
name:"LayerType",
|
||||
component: () => import("../views/datamanagement/LayerTypeManagement.vue"),
|
||||
meta: {requireAuth: true},
|
||||
},{
|
||||
path:"layer",
|
||||
name:"Layer",
|
||||
component: () => import("../views/datamanagement/LayerManagement.vue"),
|
||||
meta: {requireAuth: true},
|
||||
},{
|
||||
path:"addlayer",
|
||||
name:"addLayer",
|
||||
component: () => import("../views/datamanagement/AddLayer.vue"),
|
||||
meta: {requireAuth: true},
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
},{
|
||||
path:"/login",
|
||||
name:"Login",
|
||||
component: () => import( '../views/Login.vue'),
|
||||
meta: {requireAuth: false},
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
|
||||
const router = new VueRouter({
|
||||
routes
|
||||
})
|
||||
|
||||
// 导航守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
// 跳转到最顶部
|
||||
// window.scroll(0, 0);
|
||||
console.log(from);
|
||||
|
||||
if (to.meta.requireAuth == true) {
|
||||
let token = localStorage.getItem("X-Token");
|
||||
if (token == null || token == "") {
|
||||
next({
|
||||
path: '/login',
|
||||
query: {redirect: to.fullPath}
|
||||
})
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
} else {
|
||||
if(to.path == '/login'){
|
||||
let token = localStorage.getItem("X-Token");
|
||||
if(token == null || token == ""){
|
||||
next();
|
||||
}
|
||||
}else{
|
||||
next();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
export default router
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
},
|
||||
mutations: {
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<div class="datamanagement-container">
|
||||
<div class="home-bg-container"></div>
|
||||
<div class="left-menu">
|
||||
<div class="btn" :style="{color:$route.path=='/data/basedata'? '#37c9fa':'','border-right':$route.path=='/data/basedata'?'2px solid #37c9fa':'0px'}" @click="$router.push({'path':'/data/basedata'})">
|
||||
<i class="el-icon-s-order"></i> 基础数据
|
||||
</div>
|
||||
<div class="btn">
|
||||
<i class="el-icon-s-order"></i> 区域分布
|
||||
</div>
|
||||
<div class="btn">
|
||||
<i class="el-icon-s-order"></i> 历史灾害
|
||||
</div>
|
||||
<div class="btn">
|
||||
<i class="el-icon-s-order"></i> 应急通知
|
||||
</div>
|
||||
<div class="btn" :style="{color:$route.path=='/data/layertype'? '#37c9fa':'','border-right':$route.path=='/data/layertype'?'2px solid #37c9fa':'0px'}" @click="$router.push({'path':'/data/layertype'})">
|
||||
<i class="el-icon-menu"></i> 模块管理
|
||||
</div>
|
||||
<div class="btn" :style="{color:$route.path=='/data/layer'? '#37c9fa':'','border-right':$route.path=='/data/layer'?'2px solid #37c9fa':'0px'}" @click="$router.push({'path':'/data/layer'})">
|
||||
<i class="el-icon-s-marketing" ></i> 图层管理
|
||||
</div>
|
||||
<div class="btn">
|
||||
<i class="el-icon-s-order"></i> 字典管理
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-container">
|
||||
<router-view/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name:"",
|
||||
components:{
|
||||
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}]
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'$route':function(e){
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.home-bg-container{
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
background-image: url(/images/system/home-bg-1.png);
|
||||
background-size:100% 100%;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
pointer-events: none;
|
||||
z-index:2;
|
||||
}
|
||||
.datamanagement-container{
|
||||
width: calc( 100% - 100px);
|
||||
height: calc( 100% - 200px);
|
||||
background:#2b324f;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
padding:80px 50px;
|
||||
padding-top:120px;
|
||||
|
||||
}
|
||||
.datamanagement-container .left-menu{
|
||||
width:200px;
|
||||
height: calc( 100% - 0px);
|
||||
background:#1d253d;
|
||||
float:left;
|
||||
}
|
||||
.datamanagement-container .left-menu .btn{
|
||||
width:198px;
|
||||
height:20px;
|
||||
margin:24px 0px;
|
||||
line-height:20px;
|
||||
border-right:2px solid #1d253d;
|
||||
text-align:left;
|
||||
text-indent: 20px;
|
||||
color:#cfcfcf;
|
||||
cursor:pointer;
|
||||
}
|
||||
.datamanagement-container .right-container{
|
||||
width: calc( 100% - 220px);
|
||||
height: calc( 100% - 0px);
|
||||
float:right;
|
||||
/* background:#1d253d; */
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<div class="header">
|
||||
<div class="header-title">应急管理一张图</div>
|
||||
<div class="system-operate">
|
||||
<div class="system-opreate-btn" :style="{'border-bottom':$route.path=='/index' ? '2px solid #428EDA':'2px solid rgba(0,0,0,0)'}" @click="$router.push({'path':'/index'})">监测中心</div>
|
||||
<div class="system-opreate-btn" :style="{'border-bottom':$route.path=='/map' ? '2px solid #428EDA':'2px solid rgba(0,0,0,0)'}" @click="$router.push({'path':'/map'})">数据中心</div>
|
||||
<div class="system-opreate-btn" :style="{'border-bottom':$route.path.match('/data') ? '2px solid #428EDA':'2px solid rgba(0,0,0,0)'}" @click="$router.push({'path':'/data'})">数据管理</div>
|
||||
<div class="system-opreate-btn" @click="logout">退出登录</div>
|
||||
<div class="system-opreate-user">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components:{
|
||||
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
console.log(this.$route);
|
||||
},
|
||||
methods:{
|
||||
logout(){
|
||||
localStorage.setItem("X-Token","");
|
||||
this.$router.push({'path':'/login'});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.home{
|
||||
width:100%;
|
||||
height:100vh;
|
||||
background-image: url(/images/system/home-bg.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
overflow: hidden;
|
||||
}
|
||||
.home .header{
|
||||
width:100%;
|
||||
position: relative;
|
||||
z-index:10;
|
||||
|
||||
}
|
||||
.home .header .header-title{
|
||||
width:500px;
|
||||
margin:0px auto;
|
||||
height:60px;
|
||||
line-height: 60px;
|
||||
color:#2fa6f2;
|
||||
text-align:center;
|
||||
font-size:38px;
|
||||
font-family: "微软雅黑";
|
||||
font-weight: 1000;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
.home .header .system-operate{
|
||||
width:400px;
|
||||
float:right;
|
||||
height:40px;
|
||||
position: absolute;
|
||||
top:50px;
|
||||
right:80px;
|
||||
}
|
||||
.home .header .system-operate .system-opreate-btn{
|
||||
width:85px;
|
||||
text-align: center;
|
||||
float:left;
|
||||
color:#428EDA;
|
||||
margin-right:8px;
|
||||
line-height: 40px;
|
||||
font-size:16px;
|
||||
font-weight: bold;
|
||||
cursor:pointer;
|
||||
}
|
||||
.system-opreate-user{
|
||||
width:24px;
|
||||
height:24px;
|
||||
float:left;
|
||||
background-image: url(/images/system/user.png);
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,720 @@
|
|||
<template>
|
||||
<div class="home-body">
|
||||
<div class="left-container">
|
||||
<div class="cate-container">
|
||||
<div class="cate-title">
|
||||
<div class="title">预警能力</div>
|
||||
</div>
|
||||
<div class="data-container">
|
||||
{{count.yjnl}}
|
||||
</div>
|
||||
<div id="power-container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="cate-container" style="height: calc( 28% - 30px)">
|
||||
<div class="cate-title">
|
||||
<div class="title">今日天气</div>
|
||||
</div>
|
||||
<div class="weather-container">
|
||||
<div class="weather">
|
||||
<img src="/images/system/weather.png" style="margin-top:50px" alt="">
|
||||
</div>
|
||||
<div class="weather-info">
|
||||
<p style="font-size:18px;color:#428eda;font-weight:1000;line-height:30px;margin-top:30px;">平邑县</p>
|
||||
<p style="line-height:22px;margin:6px 0px;">{{weatherInfo.narrative}}</p>
|
||||
<p style="line-height:22px">空气质量状况：{{weatherInfo.air_level}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cate-container" style="height: calc( 38.7% - 30px)">
|
||||
<div class="cate-title">
|
||||
<div class="title">区域分布</div>
|
||||
</div>
|
||||
<div class="towns-container" id="towns-container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle-container">
|
||||
<div class="cate-container" style="left:0px;top:150px;">林业防火</div>
|
||||
<div class="cate-container" style="top:380px;left:50px;">防汛抗旱</div>
|
||||
<div class="cate-container" style="bottom:-50px;left:380px;" @click="showMap = true;">承载减灾</div>
|
||||
<div class="cate-container" style="top:380px;;right:50px;">地质灾害</div>
|
||||
<div class="cate-container" style="right:0px;top:150px;">物资救援</div>
|
||||
</div>
|
||||
|
||||
<div class="right-container">
|
||||
<div class="cate-container" >
|
||||
<div class="cate-title">
|
||||
<div class="title">监管对象</div>
|
||||
</div>
|
||||
<div class="supervise-container">
|
||||
<div class="count-box">
|
||||
<div class="image">
|
||||
<img src="/images/system/icon.png" style="width:40px;height:40px" alt="">
|
||||
</div>
|
||||
<div class="count-info">
|
||||
<p class="count-title">森林</p>
|
||||
<p class="count-number" style="color:#09b064;">{{count.sl}}平方公里</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="count-box">
|
||||
<div class="image">
|
||||
<img src="/images/system/icon.png" style="width:40px;height:40px" alt="">
|
||||
</div>
|
||||
<div class="count-info">
|
||||
<p class="count-title">河流</p>
|
||||
<p class="count-number" style="color:#1296db;">{{count.hl}}条</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="count-box">
|
||||
<div class="image">
|
||||
<img src="/images/system/icon.png" style="width:40px;height:40px" alt="">
|
||||
</div>
|
||||
<div class="count-info">
|
||||
<p class="count-title">水库</p>
|
||||
<p class="count-number" style="color:#d33a21;">{{count.sk}}座</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="count-box">
|
||||
<div class="image">
|
||||
<img src="/images/system/icon.png" style="width:40px;height:40px" alt="">
|
||||
</div>
|
||||
<div class="count-info">
|
||||
<p class="count-title">承载体</p>
|
||||
<p class="count-number" style="color:#fecd57;">{{count.czt}}项</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="count-box">
|
||||
<div class="image">
|
||||
<img src="/images/system/icon.png" style="width:40px;height:40px" alt="">
|
||||
</div>
|
||||
<div class="count-info">
|
||||
<p class="count-title">减灾能力</p>
|
||||
<p class="count-number" style="color:#f251fb;">{{count.jznl}}项</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="count-box">
|
||||
<div class="image">
|
||||
<img src="/images/system/icon.png" style="width:40px;height:40px" alt="">
|
||||
</div>
|
||||
<div class="count-info">
|
||||
<p class="count-title">历史灾害</p>
|
||||
<p class="count-number" style="color:#63d0a8;">{{count.lszh}}次</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cate-container" >
|
||||
<div class="cate-title">
|
||||
<div class="title">历史灾害</div>
|
||||
</div>
|
||||
<div class="history-container" id="history-container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="cate-container" >
|
||||
<div class="cate-title">
|
||||
<div class="title">应急通知</div>
|
||||
</div>
|
||||
<div class="notice-container">
|
||||
<table>
|
||||
<tr>
|
||||
<th>地区/单位</th>
|
||||
<th>内容</th>
|
||||
<th>时间</th>
|
||||
</tr>
|
||||
<tr v-for="(item,index) in notice" :key="index">
|
||||
<td>{{item.area_id}}</td>
|
||||
<td>{{item.content}}</td>
|
||||
<td>{{item.createtime}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMethodCommon, postMethodCommon } from '../api/common';
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components:{
|
||||
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
chart1:null,
|
||||
showMap:false,
|
||||
count:{},
|
||||
weatherInfo:{},
|
||||
notice:[],
|
||||
chart1Data:null,
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getCount();
|
||||
this.getCharts1Data();
|
||||
this.getnotice();
|
||||
},
|
||||
mounted(){
|
||||
// this.initEcharts1();
|
||||
this.initEcharts2();
|
||||
this.getWeather();
|
||||
},
|
||||
methods:{
|
||||
getnotice(){
|
||||
postMethodCommon("/ScreenService/Load",{page:1,limit:10}).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.notice = res.data;
|
||||
}
|
||||
})
|
||||
},
|
||||
getWeather(){
|
||||
this.$axios.get(
|
||||
// "http://www.nmc.cn/rest/weather?stationid=54925&_=1670308485471",
|
||||
"https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=%E5%B9%B3%E9%82%91",
|
||||
// "http://www.weather.com.cn/data/sk/101120908.html",
|
||||
{headers:{
|
||||
"Content-Type": "application/octet-stream",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
}}
|
||||
).then(res=>{
|
||||
this.weatherInfo = res.data.data[0];
|
||||
})
|
||||
},
|
||||
getCount(){
|
||||
getMethodCommon("/ScreenService/Getinfo").then(res=>{
|
||||
if(res.code == 200){
|
||||
this.count = res.result;
|
||||
}
|
||||
})
|
||||
},
|
||||
getCharts1Data(){
|
||||
postMethodCommon("/ScreenService/Loadlszh?satrttime=2022-01-01 00:00:00&endtime=2023-01-01 00:00:00").then(res=>{
|
||||
if(res.code == 200){
|
||||
this.chart1Data = res.result;
|
||||
console.log("chart1Data",this.chart1Data);
|
||||
let arr = [];
|
||||
let data = [[],[],[]];
|
||||
|
||||
this.chart1Data.forEach((item)=>{
|
||||
let isExist = arr.find((it)=>{
|
||||
return it == item.area_id;
|
||||
})
|
||||
|
||||
if(!isExist && arr.length<8){
|
||||
arr.push(item.area_id);
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
arr.forEach((item)=>{
|
||||
let dataArr = this.chart1Data.filter((it)=>{
|
||||
return it.area_id == item;
|
||||
})
|
||||
console.log(dataArr);
|
||||
if(dataArr.length>0){
|
||||
dataArr.forEach((i)=>{
|
||||
switch(i.type_id){
|
||||
case "承灾体":
|
||||
data[0].push(i.ems_value)
|
||||
break;
|
||||
case "减灾能力":
|
||||
data[1].push(i.ems_value)
|
||||
break;
|
||||
case "历史灾害":
|
||||
data[2].push(i.ems_value)
|
||||
break;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
this.initEcharts1(arr,data);
|
||||
}
|
||||
})
|
||||
},
|
||||
initEcharts1(arr,data){
|
||||
let indicator = [];
|
||||
arr.forEach((item)=>{
|
||||
let obj = {
|
||||
name:item,
|
||||
max:150,
|
||||
}
|
||||
indicator.push(obj);
|
||||
})
|
||||
|
||||
|
||||
let containerElement = document.getElementById("towns-container");
|
||||
this.chart1 = this.$echarts.init(containerElement);
|
||||
let opts = {
|
||||
title: {
|
||||
|
||||
},
|
||||
legend: {
|
||||
data: ['承载体', '减灾能力','历史灾害'],
|
||||
orient: 'horizontal',//可设定图例水平（horizontal）排列还是竖直排列
|
||||
x:'center', //可设定图例在左、右、居中
|
||||
y:'bottom', //可设定图例在上、下、居中
|
||||
padding:[0,50,6,0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
|
||||
textStyle:{
|
||||
color:'#009dff'
|
||||
},
|
||||
margin: 20,
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
indicator:indicator,
|
||||
name:{
|
||||
textStyle:{color:'#ffffff'}
|
||||
}
|
||||
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'radar',
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: data[0],
|
||||
name: '承载体',
|
||||
itemStyle:{
|
||||
color:"#009dff"
|
||||
}
|
||||
},
|
||||
{
|
||||
value: data[1],
|
||||
name: '减灾能力',
|
||||
itemStyle:{
|
||||
color:"#46fd00"
|
||||
}
|
||||
},{
|
||||
value: data[2],
|
||||
name: '历史灾害',
|
||||
itemStyle:{
|
||||
color:"#f251fb"
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chart1.setOption(opts);
|
||||
},
|
||||
initEcharts2(){
|
||||
let containerElement = document.getElementById("history-container");
|
||||
this.chart2 = this.$echarts.init(containerElement);
|
||||
let opts = {
|
||||
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
show:false,
|
||||
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['一月', '二月', '三月', '四月', '五月', '六月','七月'],
|
||||
splitLine:{
|
||||
show:false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
},
|
||||
clickable: true
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Email',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [120, 132,191, 134, 90, 330, 310],
|
||||
symbolSize:15,
|
||||
// 设置拐点为实心圆
|
||||
symbol:'circle',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#c645d1',//折线图与小圆点颜色
|
||||
lineStyle: {
|
||||
width: 0 //线条宽度
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
name: 'Union Ads',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [220, 182, 101, 234, 290,230,210 ],
|
||||
symbolSize:15,
|
||||
// 设置拐点为实心圆
|
||||
symbol:'circle',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#6bd04f',//折线图与小圆点颜色
|
||||
lineStyle: {
|
||||
width: 0 //线条宽度
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chart2.setOption(opts);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.home{
|
||||
width:100%;
|
||||
height:100vh;
|
||||
background-image: url(/images/system/home-bg.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
overflow: hidden;
|
||||
}
|
||||
.home .header{
|
||||
width:100%;
|
||||
position: relative;
|
||||
z-index:10;
|
||||
|
||||
}
|
||||
.home .header .header-title{
|
||||
width:500px;
|
||||
margin:0px auto;
|
||||
height:60px;
|
||||
line-height: 60px;
|
||||
color:#2fa6f2;
|
||||
text-align:center;
|
||||
font-size:38px;
|
||||
font-family: "微软雅黑";
|
||||
font-weight: 1000;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
.home .header .system-operate{
|
||||
width:400px;
|
||||
float:right;
|
||||
height:40px;
|
||||
position: absolute;
|
||||
top:50px;
|
||||
right:80px;
|
||||
}
|
||||
.home .header .system-operate .system-opreate-btn{
|
||||
width:85px;
|
||||
text-align: center;
|
||||
float:left;
|
||||
color:#428EDA;
|
||||
margin-right:8px;
|
||||
line-height: 40px;
|
||||
font-size:16px;
|
||||
font-weight: bold;
|
||||
cursor:pointer
|
||||
}
|
||||
.system-opreate-user{
|
||||
width:24px;
|
||||
height:24px;
|
||||
float:left;
|
||||
background-image: url(/images/system/user.png);
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
.home-body{
|
||||
width:100%;
|
||||
height: calc(100% - 60px);
|
||||
padding-top:60px;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.home-body .left-container{
|
||||
width:410px;
|
||||
height: calc( 100% - 78px);
|
||||
margin-top:20px;
|
||||
float:left;
|
||||
margin-left:56px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.home-body .right-container{
|
||||
width:410px;
|
||||
height: calc( 100% - 78px);
|
||||
margin-top:20px;
|
||||
float:right;
|
||||
margin-right:46px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.home-body .cate-container{
|
||||
width:100%;
|
||||
height: calc(33.3% - 30px);
|
||||
background-image: url(/images/system/cate-bg.png);
|
||||
background-size:100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
margin-top:30px;
|
||||
z-index: 10;
|
||||
cursor:pointer;
|
||||
}
|
||||
.home-body .left-container .cate-container .data-container{
|
||||
width:100%;
|
||||
height:100%;
|
||||
text-align: center;
|
||||
line-height:226px;
|
||||
font-size:40px;
|
||||
font-weight:bold;
|
||||
color:#46fd00;
|
||||
}
|
||||
.home-body .left-container .cate-container .weather-container{
|
||||
width:100%;
|
||||
height: calc( 100% - 34px);
|
||||
}
|
||||
.home-body .left-container .cate-container .weather-container .weather{
|
||||
width:50%;
|
||||
height:100%;
|
||||
text-align: center;
|
||||
float:left;
|
||||
}
|
||||
.home-body .left-container .cate-container .weather-container .weather-info{
|
||||
width:50%;
|
||||
float:left;
|
||||
height:100%;
|
||||
color:#fff;
|
||||
line-height:34px;
|
||||
}
|
||||
.towns-container{
|
||||
padding:10px 0px;
|
||||
width:100%;
|
||||
height: calc( 100% - 80px);
|
||||
}
|
||||
.cate-title{
|
||||
width:90%;
|
||||
margin-left:2px;
|
||||
height:40px;
|
||||
border-bottom:1px solid #428eda;
|
||||
color:#fff;
|
||||
font-size:18px;
|
||||
line-height: 40px;
|
||||
text-indent: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.cate-title .title{
|
||||
height:38px;
|
||||
width:120px;
|
||||
font-size:16px;
|
||||
border-bottom: 2px solid #428eda;
|
||||
}
|
||||
|
||||
.supervise-container{
|
||||
width:100%;
|
||||
box-sizing: border-box;
|
||||
padding:40px 30px;
|
||||
height: calc( 100% - 80px);
|
||||
}
|
||||
.supervise-container .count-box{
|
||||
width:50%;
|
||||
height:60%;
|
||||
float:left;
|
||||
}
|
||||
.supervise-container .count-box .image{
|
||||
width:60px;
|
||||
height:80px;
|
||||
float:left;
|
||||
text-align: center;
|
||||
}
|
||||
.supervise-container .count-box .count-info{
|
||||
float:left;
|
||||
width: calc(100% - 80px);
|
||||
height:80px;
|
||||
|
||||
}
|
||||
.supervise-container .count-box .count-info .count-title{
|
||||
font-size:14px;
|
||||
color:#fff;
|
||||
}
|
||||
.supervise-container .count-box .count-info .count-number{
|
||||
font-size:14px;
|
||||
font-weight: bold;
|
||||
line-height: 30px;
|
||||
}
|
||||
.history-container{
|
||||
padding:0px 20px;
|
||||
width: calc( 100% - 40px);
|
||||
height: calc( 100% - 34px);
|
||||
}
|
||||
.notice-container{
|
||||
width:100%;
|
||||
height: calc(100% - 34px);
|
||||
color:#fff;
|
||||
}
|
||||
.notice-container table{
|
||||
width:calc(100% - 20px);
|
||||
margin:0px auto;
|
||||
margin-top:15px;
|
||||
padding:10px;
|
||||
border-collapse:collapse;
|
||||
}
|
||||
.notice-container table th{
|
||||
text-align:left;
|
||||
background:#0b4d8d;
|
||||
height:30px;
|
||||
line-height:30px;
|
||||
text-indent:12px;
|
||||
border:1px solid #f1f3f5;
|
||||
}
|
||||
.notice-container table td{
|
||||
height:26px;
|
||||
text-indent:12px;
|
||||
border:1px solid #f1f3f5;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.middle-container{
|
||||
width:1200px;
|
||||
height: calc(100% - 200px);
|
||||
z-index:0;
|
||||
position:absolute;
|
||||
left:50%;
|
||||
margin-left:-600px;
|
||||
margin-top:60px;
|
||||
|
||||
}
|
||||
.middle-container::before{
|
||||
content:"应急中心";
|
||||
display: block;
|
||||
clear: both;
|
||||
height:600px;
|
||||
width:600px;
|
||||
overflow: hidden;
|
||||
background-image:url(/images/system/middle-bg-2.png);
|
||||
background-size:550px;
|
||||
background-repeat: no-repeat;
|
||||
margin:0px auto;
|
||||
margin-top:150px;
|
||||
font-size:32px;
|
||||
color:#fff;
|
||||
line-height:300px;
|
||||
font-weight: bold;
|
||||
text-align:center;
|
||||
}
|
||||
.middle-container::after{
|
||||
content:"";
|
||||
display: block;
|
||||
clear: both;
|
||||
width:1200px;
|
||||
height:400px;
|
||||
overflow: hidden;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
background-image:url(/images/system/middle-bg-1.png);
|
||||
background-size:100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.middle-container .cate-container{
|
||||
width:440px;
|
||||
height:400px;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
background-image:url(/images/system/middle-bg-3.png);
|
||||
background-size:440px 400px;
|
||||
background-repeat: no-repeat;
|
||||
line-height: 480px;
|
||||
text-align: center;
|
||||
font-size:30px;
|
||||
font-weight:bold;
|
||||
color:#fff;
|
||||
|
||||
}
|
||||
.middle-container .cate-container:nth-child(1){
|
||||
animation:jump1 2s ease-in-out infinite alternate;
|
||||
}
|
||||
.middle-container .cate-container:nth-child(2){
|
||||
animation:jump2 2s ease-in-out infinite alternate;
|
||||
}
|
||||
.middle-container .cate-container:nth-child(3){
|
||||
animation:jump3 2s ease-in-out infinite alternate;
|
||||
}
|
||||
.middle-container .cate-container:nth-child(4){
|
||||
animation:jump4 2s ease-in-out infinite alternate;
|
||||
}
|
||||
.middle-container .cate-container:nth-child(5){
|
||||
animation:jump5 2s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes jump1 {
|
||||
from { top: 150px; }
|
||||
to { top: 130px }
|
||||
}
|
||||
@keyframes jump2 {
|
||||
from { top: 380px; }
|
||||
to { top: 360px }
|
||||
}
|
||||
@keyframes jump3 {
|
||||
from { bottom: -10px; }
|
||||
to { bottom: 10px }
|
||||
}
|
||||
@keyframes jump4 {
|
||||
from { top: 380px; }
|
||||
to { top: 360px }
|
||||
}
|
||||
@keyframes jump5 {
|
||||
from { top: 150px; }
|
||||
to { top: 130px }
|
||||
}
|
||||
|
||||
#power-container{
|
||||
position: absolute;
|
||||
top:0px;
|
||||
left:84px;
|
||||
width:240px;
|
||||
height:240px;
|
||||
margin:65px auto;
|
||||
text-align: center;
|
||||
background-image: url(/images/system/cate-1-bg.png);
|
||||
background-size:100% 100%;
|
||||
animation:circleRoate 10s infinite linear;
|
||||
}
|
||||
@keyframes circleRoate{
|
||||
from{transform: rotate(0deg);}
|
||||
to{transform: rotate(360deg);}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="title">平邑县应急一张图</div>
|
||||
<div class="title-en">Pingyi County Emergency Map</div>
|
||||
<div class="form-container">
|
||||
<el-input type="text" v-model="form.account" size="small" placeholder="请输入登录用户名称">
|
||||
<i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
|
||||
</el-input>
|
||||
<el-input type="password" v-model="form.password" size="small" placeholder="请输入登录密码" style="margin:20px 0px;">
|
||||
<i slot="prefix" class="el-input__icon el-icon-lock"></i>
|
||||
</el-input>
|
||||
<el-button type="primary" style="width:100%" size="small" @click="login">立 即 登 录</el-button>
|
||||
<el-checkbox v-model="remember" style="margin-top:20px;" >记住密码</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { postMethodCommon } from '../api/common.js'
|
||||
export default {
|
||||
name:"Login",
|
||||
data(){
|
||||
return {
|
||||
form:{
|
||||
account:"",
|
||||
password:"",
|
||||
appKey:"openauth"
|
||||
},
|
||||
remember:false,
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getLoginForm();
|
||||
},
|
||||
methods:{
|
||||
getLoginForm(){
|
||||
if(localStorage.getItem("loginForm")){
|
||||
this.form = JSON.parse(localStorage.getItem("loginForm"));
|
||||
|
||||
this.remember = true;
|
||||
}
|
||||
},
|
||||
login(){
|
||||
postMethodCommon("/Check/Login",this.form).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.$message({type:"success",message:"登录成功！"});
|
||||
localStorage.setItem("X-Token",res.token);
|
||||
this.$router.push("/");
|
||||
if(this.remember){
|
||||
localStorage.setItem("loginForm",JSON.stringify(this.form));
|
||||
}else{
|
||||
localStorage.setItem("loginForm","");
|
||||
}
|
||||
}else{
|
||||
this.$message({type:"error",message:"用户名或密码错误！"});
|
||||
}
|
||||
}).catch(e=>{
|
||||
console.log(e);
|
||||
this.$message({type:"error",message:"用户名或密码错误！"});
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container{
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
background-image: url(/images/system/login-bg.jpg);
|
||||
background-size:100% 100%;
|
||||
position:relative;
|
||||
}
|
||||
.container::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:100%;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
background:rgba(0,0,0,0.7);
|
||||
z-index:0;
|
||||
}
|
||||
.container .title{
|
||||
width:100%;
|
||||
line-height:30px;
|
||||
padding-top:300px;
|
||||
text-align:center;
|
||||
color:#2fa6f2;
|
||||
font-size:32px;
|
||||
z-index:1;
|
||||
position: relative;
|
||||
letter-spacing: 0px;
|
||||
font-family: '';
|
||||
/* font-weight: bold; */
|
||||
}
|
||||
.container .title-en{
|
||||
width:100%;
|
||||
height:0px;
|
||||
line-height:50px;
|
||||
text-align:center;
|
||||
color:#2fa6f2;
|
||||
font-size:14px;
|
||||
z-index:1;
|
||||
position: relative;
|
||||
word-spacing: 13px;
|
||||
}
|
||||
|
||||
.container .form-container{
|
||||
width:320px;
|
||||
background:rgba(255,255,255,0.5);
|
||||
margin:0px auto;
|
||||
border-radius:4px;
|
||||
position:relative;
|
||||
z-index:1;
|
||||
top:50px;
|
||||
padding:40px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__icon{
|
||||
color:#2fa6f2;
|
||||
font-size:18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__label{
|
||||
color:#f1f3f5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,805 @@
|
|||
<template>
|
||||
<div class="map-container">
|
||||
<div class="home-bg-container">
|
||||
</div>
|
||||
<div class="layer-container">
|
||||
<div class="search-container">
|
||||
<input type="text" id="search-input" v-model="searchKeyWord" placeholder="请输入关键字搜索">
|
||||
<div class="clear-search" @click="closeSearch()" v-show="searchKeyWord">
|
||||
×
|
||||
</div>
|
||||
<div class="search-btn" @click="search()">
|
||||
搜索
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图层树 -->
|
||||
<!-- <VueDragResize> -->
|
||||
<!-- <div class="layers-box" v-for="(item,index) in layers" :key="index">
|
||||
<div class="layer-type-box" @click="showTypeLayers(index)">
|
||||
<div class="image">
|
||||
<img :src="item.image" width="56px" alt="">
|
||||
</div>
|
||||
<div class="layer-type-info">
|
||||
<p>{{item.name}}</p>
|
||||
<p :style="{'color':item.theam}">{{item.children.length}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="child-layers" v-show="item.show" :style="{'border-color': item.children.length>0? item.theam : 'rgba(0,0,0,0)'}">
|
||||
<p v-for="(it,idx) in item.children" :key="idx"> <img src="/images/map/box.png" width="20px" height="20px" style="position:relative;top:5px;" @click="addLayer(item)" />{{it.name}}</p>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="map-layer-tree-container">
|
||||
<MapLayerTree @addLayer="addLayer" @editLayer="editLayer" v-if="show_menu_tree" :menu_tree="menu_tree" :level="1"></MapLayerTree>
|
||||
</div>
|
||||
<!-- </VueDragResize> -->
|
||||
</div>
|
||||
<!-- 搜索结果 -->
|
||||
<VueDragResize :x="0" :y="0" v-if="isShowSearchWindow">
|
||||
<div class="search-result">
|
||||
<SearchContainer :searchKeyWord="searchKeyWord" @toPosition="toPosition"></SearchContainer>
|
||||
</div>
|
||||
</VueDragResize>
|
||||
<!-- 属性表格 -->
|
||||
<VueDragResize :x="positionX" :y="positionY" v-show="showAttributeWindow" >
|
||||
<div class="attribute-window">
|
||||
<AttributeWindow :targetObj="targetObj" @closeAttributeWindow="closeAttributeWindow"></AttributeWindow>
|
||||
</div>
|
||||
</VueDragResize>
|
||||
<!-- 图层目录树 -->
|
||||
|
||||
<!-- <div class="maplayertree-window">
|
||||
<MapLayerTree :menu_tree="menu_tree" :level="1"></MapLayerTree>
|
||||
</div> -->
|
||||
<!-- 绘图工具 -->
|
||||
<!-- <VueDragResize :x="0" :y="0" v-if="isEditLayer" > -->
|
||||
<div class="drawpanl-window" v-if="isEditLayer">
|
||||
<DrawPanl @addpoint="drawPoint" @delpoint="delPoint" :editRandom="editRandom" :editLayerInfo="editLayerInfo" :currentLngLat="currentLngLat" @addPointSuccess="addPointSuccess" @close="closeDrawPanl"></DrawPanl>
|
||||
</div>
|
||||
<!-- </VueDragResize> -->
|
||||
<div id="mapContainer">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import VueDragResize from 'vue-drag-resize'
|
||||
import AttributeWindow from '../components/attributeWindow.vue'
|
||||
import SearchContainer from "../components/searchResult.vue";
|
||||
import MapLayerTree from '../components/MapLayerTree.vue'
|
||||
import DrawPanl from '../components/DrawPanl.vue'
|
||||
import { getMethodCommon } from '../api/common';
|
||||
// import { getMethodCommon } from '../api/common';
|
||||
export default {
|
||||
name:"Map",
|
||||
data(){
|
||||
return {
|
||||
editRandom:1,
|
||||
isEditLayer:false,
|
||||
currentLngLat:null,
|
||||
editLayerInfo:null,
|
||||
positionX:0,
|
||||
positionY:0,
|
||||
showAttributeWindow:false,
|
||||
isShowSearchWindow:false,
|
||||
searchKeyWord:null,
|
||||
searchPoint:null,
|
||||
windowDataInfo:{},
|
||||
layers:[],
|
||||
// menu_tree:null,
|
||||
show_menu_tree:true,
|
||||
menu_tree:null,
|
||||
targetObj:{
|
||||
gid:null,
|
||||
tablename:null,
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
searchKeyWord:function(e){
|
||||
if(e){
|
||||
this.isShowSearchWindow = true;
|
||||
}else{
|
||||
this.isShowSearchWindow = false;
|
||||
}
|
||||
},
|
||||
windowDataInfo:function(e){
|
||||
alert(e);
|
||||
}
|
||||
},
|
||||
components:{
|
||||
AttributeWindow,
|
||||
VueDragResize,
|
||||
SearchContainer,
|
||||
MapLayerTree,
|
||||
DrawPanl
|
||||
},
|
||||
created(){
|
||||
this.getMenuTree();
|
||||
},
|
||||
mounted(){
|
||||
this.initMap();
|
||||
},
|
||||
methods:{
|
||||
closeSearch(){
|
||||
this.isShowSearchWindow = false;
|
||||
this.searchKeyWord = null;
|
||||
this.searchPointResult(null,null,null);
|
||||
},
|
||||
// 绘制点
|
||||
drawPoint(){
|
||||
let layerstyle = JSON.parse(this.editLayerInfo.layerstyle);
|
||||
let _this = this;
|
||||
// 判断是否创建了图层 如果创建了移除所有事件
|
||||
if(_this.globalMap.getLayer("points")){
|
||||
_this.globalMap.off('mousemove', _this.onMove);
|
||||
_this.globalMap.off('touchmove', _this.onMove);
|
||||
}
|
||||
|
||||
// 判断图标有无 创建图标 先移除之前的image
|
||||
if(_this.globalMap.hasImage("points")){
|
||||
_this.globalMap.removeImage("points");
|
||||
}
|
||||
|
||||
_this.globalMap.loadImage('/images/map/'+layerstyle.style['icon-image'],(error, image) => {
|
||||
if (error) throw error;
|
||||
_this.globalMap.addImage("points",image);
|
||||
})
|
||||
|
||||
|
||||
// 设置鼠标为绘制样式
|
||||
_this.globalMap.getCanvas().style.cursor = 'crosshair';
|
||||
|
||||
// e.stopPropagation();
|
||||
// clearLayerAndSource();
|
||||
var isDraw = true;
|
||||
// 禁止双击缩放
|
||||
_this.globalMap.doubleClickZoom.disable();
|
||||
|
||||
var jsonPoint = {
|
||||
'type': 'FeatureCollection',
|
||||
'features': []
|
||||
};
|
||||
|
||||
// 判断是否创建Source 并添加points layer
|
||||
var source = _this.globalMap.getSource('points');
|
||||
|
||||
if(source) {
|
||||
_this.globalMap.getSource('points').setData(jsonPoint);
|
||||
}else{
|
||||
_this.globalMap.addSource('points', {
|
||||
type: 'geojson',
|
||||
data: jsonPoint
|
||||
});
|
||||
_this.globalMap.addLayer({
|
||||
id: 'points',
|
||||
type: 'symbol',
|
||||
source: 'points',
|
||||
'layout': {
|
||||
'icon-image':'points',
|
||||
'icon-size': 0.2,
|
||||
'visibility': 'visible'
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
_this.globalMap.on("click","points",function(e){
|
||||
console.log(e.features[0]);
|
||||
// When the mouse leaves the `my-layer` layer,
|
||||
// reset the entire state object for the
|
||||
// feature under the mouse
|
||||
console.log("data-source",_this.globalMap.getSource("points"));
|
||||
_this.globalMap.removeFeatureState({
|
||||
source: 'points',
|
||||
sourceLayer: 'points',
|
||||
id: e.features[0].id
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
// 鼠标移入points 图标放大 鼠标样式改为移动样式
|
||||
_this.globalMap.on("mouseenter","points",function(e){
|
||||
console.log(e);
|
||||
// _this.globalMap.setLayoutProperty('points', 'icon-size', 0.3);
|
||||
_this.globalMap.getCanvas().style.cursor = 'move';
|
||||
})
|
||||
// 鼠标离开points 图标恢复 鼠标样式改为默认样式
|
||||
_this.globalMap.on("mouseleave","points",function(e){
|
||||
console.log(e);
|
||||
// _this.globalMap.setLayoutProperty('points', 'icon-size', 0.2);
|
||||
_this.globalMap.getCanvas().style.cursor = '';
|
||||
})
|
||||
|
||||
// 鼠标按下 points图层
|
||||
_this.globalMap.on('mousedown', 'points', (e) => {
|
||||
e.preventDefault();
|
||||
// 鼠标样式设置为小手样式
|
||||
_this.globalMap.getCanvas().style.cursor = 'grab';
|
||||
// 鼠标移动 执行图标移动函数
|
||||
_this.globalMap.on('mousemove', _this.onMove);
|
||||
// 执行一次鼠标抬起函数
|
||||
_this.globalMap.once('mouseup', _this.onUp);
|
||||
});
|
||||
|
||||
// 点击地图 添加point
|
||||
_this.globalMap.on('click', function (_e) {
|
||||
if (isDraw) {
|
||||
_this.globalMap.getCanvas().style.cursor = 'grab'
|
||||
isDraw=false;
|
||||
var endCoords=[_e.lngLat.lng, _e.lngLat.lat];
|
||||
jsonPoint.features.push({
|
||||
type: 'Feature',
|
||||
id:"123",
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: endCoords
|
||||
}
|
||||
});
|
||||
_this.currentLngLat = _e.lngLat.lng+" "+_e.lngLat.lat
|
||||
_this.globalMap.getSource('points').setData(jsonPoint);
|
||||
}
|
||||
})
|
||||
},
|
||||
// 绘制点并保存成功
|
||||
addPointSuccess(){
|
||||
|
||||
},
|
||||
// 关闭绘制面板
|
||||
closeDrawPanl(){
|
||||
this.isEditLayer = false;
|
||||
|
||||
this.globalMap.getCanvas().style.cursor = '';
|
||||
// 移除鼠标事件
|
||||
this.globalMap.off('mousemove', this.onMove);
|
||||
this.globalMap.off('touchmove', this.onMove);
|
||||
let geojson = {
|
||||
'type': 'FeatureCollection',
|
||||
'features': []
|
||||
}
|
||||
this.globalMap.getSource('points').setData(geojson);
|
||||
|
||||
},
|
||||
// 图标移动函数
|
||||
onMove(e) {
|
||||
const coords = e.lngLat;
|
||||
this.globalMap.getCanvas().style.cursor = 'grabbing';
|
||||
let geojson = {
|
||||
'type': 'FeatureCollection',
|
||||
'features': [
|
||||
{
|
||||
'type': 'Feature',
|
||||
'geometry': {
|
||||
'type': 'Point',
|
||||
'coordinates': [0, 0]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
geojson.features[0].geometry.coordinates = [coords.lng, coords.lat];
|
||||
this.currentLngLat = coords.lng+" "+coords.lat;
|
||||
this.globalMap.getSource('points').setData(geojson);
|
||||
},
|
||||
// 鼠标抬起移除监听事件
|
||||
onUp(e) {
|
||||
console.log(e);
|
||||
// 获取坐标信息
|
||||
// const coords = e.lngLat;
|
||||
// coordinates.style.display = 'block';
|
||||
// coordinates.innerHTML = `Longitude: ${coords.lng}<br />Latitude: ${coords.lat}`;
|
||||
// 修改鼠标样式
|
||||
this.globalMap.getCanvas().style.cursor = '';
|
||||
// 移除鼠标事件
|
||||
this.globalMap.off('mousemove', this.onMove);
|
||||
this.globalMap.off('touchmove', this.onMove);
|
||||
},
|
||||
// 删除点
|
||||
delPoint(){
|
||||
if(this.globalMap.getLayer("points")){
|
||||
let geojson = {
|
||||
'type': 'FeatureCollection',
|
||||
'features': []
|
||||
}
|
||||
this.globalMap.getSource("points").setData(geojson);
|
||||
}
|
||||
|
||||
this.reloadLayer(this.editLayerInfo);
|
||||
|
||||
|
||||
|
||||
},
|
||||
getMenuTree(){
|
||||
getMethodCommon("/LayerManager/LoadTree").then(res=>{
|
||||
if(res.code == 200){
|
||||
let result = res.result;
|
||||
result = this.handleMenuTree(result);
|
||||
this.menu_tree = {...result}
|
||||
this.show_menu_tree = true;
|
||||
console.log("menu_tree",this.menu_tree);
|
||||
}
|
||||
})
|
||||
},
|
||||
handleMenuTree(arr){
|
||||
if(arr.length>0){
|
||||
for(let i=0;i<arr.length;i++){
|
||||
arr[i].icon = "/images/map/layer-type-7.png";
|
||||
arr[i].color = "#8b58c7";
|
||||
arr[i].show = false;
|
||||
arr[i].isEdit = false;
|
||||
arr[i].layers = [];
|
||||
if(arr[i].children.length>0){
|
||||
arr[i].children = this.handleMenuTree(arr[i].children);
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
},
|
||||
showTypeLayers(index){
|
||||
this.layers[index].show=!this.layers[index].show;
|
||||
},
|
||||
initMap(){
|
||||
//mapbox 2.0以后的版本需要accessToken 到官网注册下载
|
||||
this.$mapboxgl.accessToken = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
|
||||
this.globalMap = new this.$mapboxgl.Map({
|
||||
container:"mapContainer",
|
||||
center:[117.621842,35.520241],
|
||||
zoom:13,
|
||||
maxZoom:20,
|
||||
minZoom:5,
|
||||
pitch:45,
|
||||
style:"mapbox://styles/shichao123/cl2dztvfx001g14o8n5ezc0er"
|
||||
});
|
||||
// 地图加载完毕事件
|
||||
let _this = this;
|
||||
this.globalMap.on("load",function(){
|
||||
|
||||
// 加载天地图
|
||||
_this.globalMap.addLayer({
|
||||
'id': 'tiandituzhuji',
|
||||
'type': 'raster',
|
||||
'source':{
|
||||
"type": "raster",
|
||||
"tiles": ['http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9'],
|
||||
"tileSize": 256,
|
||||
}
|
||||
})
|
||||
|
||||
// let layer = {
|
||||
// id:"4a79d871-d102-4d1a-a83b-41c76c34efc9",
|
||||
// layertype:"fill",
|
||||
// tablename:"pingyi62745103420221126",
|
||||
// style:'{"style":{"fill-opacity":0.8,"fill-color":"#F40A0A","fill-outline-color":"#00FF0D"},"maxZoom":18,"minZoom":8}',
|
||||
// }
|
||||
|
||||
// let lineLayer = {
|
||||
// id:"5cba0ab8-0e35-4315-bd53-74b4f62ecbc1",
|
||||
// layertype:"symbol",
|
||||
// tablename:"pingyi737093143420221126",
|
||||
// style:'{"style":{"line-opacity":0.8,"line-color":"#CC00FF","line-width":5},"maxZoom":18,"minZoom":12}',
|
||||
// }
|
||||
// _this.addLayer(lineLayer);
|
||||
|
||||
})
|
||||
},
|
||||
showSearchWindow(isShow){
|
||||
this.isShowSearchWindow = isShow;
|
||||
},
|
||||
closeAttributeWindow(){
|
||||
this.showAttributeWindow = false;
|
||||
},
|
||||
toPosition(info){
|
||||
console.log("info",info);
|
||||
let arr = info.lonlat.split(",");
|
||||
this.globalMap.flyTo(
|
||||
{center: [arr[0],arr[1]],zoom:16.5,pitch: 45} // 倾斜度
|
||||
);
|
||||
if(this.searchPoint){
|
||||
this.searchPoint.remove();
|
||||
}
|
||||
this.searchPointResult(arr[0], arr[1],info.name);
|
||||
// this.searchPoint = new this.$mapboxgl.Marker().setLngLat([arr[0], arr[1]]).addTo(this.globalMap);
|
||||
},
|
||||
changelayershow(val){
|
||||
console.log(val);
|
||||
},
|
||||
// 加载图层
|
||||
addLayer(layerInfo){
|
||||
console.log("addlayerinfo",layerInfo);
|
||||
if(layerInfo.show == true){
|
||||
if(this.globalMap.hasImage(layerInfo.id)){
|
||||
this.globalMap.removeImage(layerInfo.id)
|
||||
}
|
||||
if(this.globalMap.getLayer(layerInfo.id)){
|
||||
this.globalMap.removeLayer(layerInfo.id)
|
||||
}
|
||||
if(this.globalMap.getSource(layerInfo.id)){
|
||||
this.globalMap.removeSource(layerInfo.id)
|
||||
}
|
||||
return;
|
||||
}
|
||||
let layerStyle = JSON.parse(layerInfo.layerstyle);
|
||||
|
||||
|
||||
if(layerInfo.layertype == 'fill' || layerInfo.layertype == 'line'){
|
||||
|
||||
this.globalMap.addSource(layerInfo.id,{
|
||||
type: 'vector',
|
||||
tiles: ['http://123.132.248.154:6005/api/ScreenService/QueryVectorTileByTable?z={z}&x={x}&y={y}&table='+layerInfo.tablename],
|
||||
minzoom: parseInt(layerStyle.minZoom),
|
||||
maxzoom: parseInt(layerStyle.maxZoom)
|
||||
})
|
||||
|
||||
this.globalMap.addLayer({
|
||||
'id': layerInfo.id,
|
||||
'type': layerInfo.layertype,
|
||||
'source':layerInfo.id,
|
||||
"source-layer": layerInfo.tablename,
|
||||
'paint': layerStyle.style
|
||||
});
|
||||
|
||||
let _this = this;
|
||||
|
||||
this.globalMap.on("click",layerInfo.id,function(e){
|
||||
_this.targetObj.gid = e.features[0].properties.gid;
|
||||
_this.targetObj.tablename = e.features[0].sourceLayer;
|
||||
_this.getDetail(e.features[0].properties.gid,e.features[0].sourceLayer);
|
||||
})
|
||||
|
||||
}else if(layerInfo.layertype == 'symbol'){
|
||||
console.log("layerInfo",layerInfo);
|
||||
// 加载图标
|
||||
this.globalMap.loadImage('/images/map/'+layerStyle.style['icon-image'],(error, image) => {
|
||||
if (error) throw error;
|
||||
this.globalMap.addImage(layerInfo.id,image);
|
||||
})
|
||||
|
||||
this.globalMap.addSource(layerInfo.id,{
|
||||
type: 'vector',
|
||||
tiles: ['http://123.132.248.154:6005/api/ScreenService/QueryVectorTileByTable?z={z}&x={x}&y={y}&table='+layerInfo.tablename],
|
||||
minzoom: layerStyle.minZoom,
|
||||
maxzoom: layerStyle.maxZoom
|
||||
})
|
||||
|
||||
this.globalMap.addLayer({
|
||||
"id": layerInfo.id,
|
||||
"type": "symbol",
|
||||
'source': layerInfo.id,
|
||||
"source-layer": layerInfo.tablename,
|
||||
'layout': {
|
||||
'icon-image':layerInfo.id,
|
||||
'icon-size': 0.2,
|
||||
'visibility': 'visible'
|
||||
},
|
||||
"paint":{}
|
||||
});
|
||||
let _this = this;
|
||||
// 点击图标
|
||||
this.globalMap.on("click",layerInfo.id,function(e){
|
||||
console.log(e.features[0]);
|
||||
|
||||
console.log("_data",_this.globalMap.getSource(layerInfo.id));
|
||||
|
||||
// 删除图标
|
||||
_this.globalMap.removeFeatureState({
|
||||
source:layerInfo.id,
|
||||
sourceLayer:layerInfo.id,
|
||||
id:e.features[0].id
|
||||
})
|
||||
|
||||
_this.targetObj.gid = e.features[0].properties.gid;
|
||||
_this.targetObj.tablename = e.features[0].sourceLayer;
|
||||
_this.getDetail(e.features[0].properties.gid,e.features[0].sourceLayer);
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
reloadLayer(layerInfo){
|
||||
// 移除图层、图标、资源后重新加载
|
||||
if(this.globalMap.getLayer(layerInfo.id)){
|
||||
this.globalMap.removeLayer(layerInfo.id);
|
||||
}
|
||||
if(this.globalMap.hasImage(layerInfo.id)){
|
||||
this.globalMap.removeImage(layerInfo.id);
|
||||
}
|
||||
if(this.globalMap.getSource(layerInfo.id)){
|
||||
this.globalMap.removeSource(layerInfo.id);
|
||||
}
|
||||
|
||||
let layerStyle = JSON.parse(layerInfo.layerstyle);
|
||||
// 加载图标
|
||||
this.globalMap.loadImage('/images/map/'+layerStyle.style['icon-image'],(error, image) => {
|
||||
if (error) throw error;
|
||||
this.globalMap.addImage(layerInfo.id,image);
|
||||
})
|
||||
// 加载资源
|
||||
this.globalMap.addSource(layerInfo.id,{
|
||||
type: 'vector',
|
||||
tiles: ['http://123.132.248.154:6005/api/ScreenService/QueryVectorTileByTable?z={z}&x={x}&y={y}&table='+layerInfo.tablename],
|
||||
minzoom: layerStyle.minZoom,
|
||||
maxzoom: layerStyle.maxZoom
|
||||
})
|
||||
// 加载图层
|
||||
this.globalMap.addLayer({
|
||||
"id": layerInfo.id,
|
||||
"type": "symbol",
|
||||
'source': layerInfo.id,
|
||||
"source-layer": layerInfo.tablename,
|
||||
'layout': {
|
||||
'icon-image':layerInfo.id,
|
||||
'icon-size': 0.2,
|
||||
'visibility': 'visible'
|
||||
},
|
||||
"paint":{}
|
||||
});
|
||||
let _this = this;
|
||||
// 点击图标
|
||||
this.globalMap.on("click",layerInfo.id,function(e){
|
||||
console.log(e.features[0]);
|
||||
|
||||
console.log("_data",_this.globalMap.getSource(layerInfo.id));
|
||||
|
||||
// 删除图标
|
||||
_this.globalMap.removeFeatureState({
|
||||
source:layerInfo.id,
|
||||
sourceLayer:layerInfo.id,
|
||||
id:e.features[0].id
|
||||
})
|
||||
|
||||
_this.targetObj.gid = e.features[0].properties.gid;
|
||||
_this.targetObj.tablename = e.features[0].sourceLayer;
|
||||
_this.getDetail(e.features[0].properties.gid,e.features[0].sourceLayer);
|
||||
})
|
||||
},
|
||||
// 编辑图层
|
||||
editLayer(it){
|
||||
this.setNoEdit(this.menu_tree);
|
||||
it.isEdit = !it.isEdit;
|
||||
this.editLayerInfo = it;
|
||||
this.editLayerInfo.gid = null;
|
||||
this.isEditLayer = true;
|
||||
},
|
||||
setNoEdit(arr){
|
||||
for(let i=0;i<arr.length;i++){
|
||||
arr[i].isEdit = false;
|
||||
if(arr[i].children.length>0){
|
||||
this.setNoEdit(arr[i].children)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取点击详细信息
|
||||
getDetail(gid,tablename){
|
||||
if(this.editLayerInfo && tablename == this.editLayerInfo.tablename){
|
||||
this.editRandom = gid+","+tablename;
|
||||
this.editLayerInfo.gid = gid;
|
||||
}else{
|
||||
this.showAttributeWindow = true;
|
||||
}
|
||||
},
|
||||
// 搜索结果更新
|
||||
searchPointResult(lng,lat,name){
|
||||
let _this = this;
|
||||
// 判断图标有无 创建图标
|
||||
if(!_this.globalMap.hasImage("search")){
|
||||
_this.globalMap.loadImage('/images/map/result.png',(error, image) => {
|
||||
if (error) throw error;
|
||||
_this.globalMap.addImage("search",image);
|
||||
})
|
||||
}
|
||||
|
||||
let jsonPoint = {
|
||||
'type': 'FeatureCollection',
|
||||
'features': []
|
||||
};
|
||||
|
||||
if(lng && lat){
|
||||
jsonPoint.features[0] = {
|
||||
'type': 'Feature',
|
||||
'geometry': {
|
||||
'type': 'Point',
|
||||
'coordinates': [lng,lat]
|
||||
},
|
||||
'properties':{
|
||||
name:name,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 判断是否创建Source 并添加points layer
|
||||
let source = _this.globalMap.getSource('search');
|
||||
|
||||
if(source) {
|
||||
_this.globalMap.getSource('search').setData(jsonPoint);
|
||||
}else{
|
||||
_this.globalMap.addSource('search', {
|
||||
type: 'geojson',
|
||||
data: jsonPoint
|
||||
});
|
||||
_this.globalMap.addLayer({
|
||||
id: 'search',
|
||||
type: 'symbol',
|
||||
source: 'search',
|
||||
'layout': {
|
||||
'icon-image':'search',
|
||||
'icon-size': 0.6,
|
||||
'visibility': 'visible',
|
||||
'text-field':'{name}',
|
||||
'text-offset':[0,-2.4],
|
||||
'text-size':14
|
||||
},
|
||||
paint:{
|
||||
"text-color": "#fff"
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.home-bg-container{
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
background-image: url(/images/system/home-bg-1.png);
|
||||
background-size:100% 100%;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
pointer-events: none;
|
||||
z-index:2;
|
||||
}
|
||||
.map-container{
|
||||
width: 100vw;
|
||||
height:100vh;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#mapContainer{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
.layer-container{
|
||||
width:318px;
|
||||
position:absolute;
|
||||
left:70px;
|
||||
top:100px;
|
||||
z-index:10;
|
||||
}
|
||||
.layer-container .map-layer-tree-container{
|
||||
min-width:318px;
|
||||
max-height:800px;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
padding:15px;
|
||||
}
|
||||
.layer-container .map-layer-tree-container::-webkit-scrollbar{
|
||||
width:5px;
|
||||
}
|
||||
.layer-container .map-layer-tree-container::-webkit-scrollbar-thumb{
|
||||
}
|
||||
.layer-container .layers-box{
|
||||
width:100%;
|
||||
}
|
||||
.layer-container .layers-box .layer-type-box{
|
||||
height:56px;
|
||||
width:100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.layer-container .layers-box .layer-type-box .image{
|
||||
width:56px;
|
||||
height:56px;
|
||||
float:left;
|
||||
}
|
||||
.layer-container .layers-box .layer-type-box .layer-type-info{
|
||||
width:240px;
|
||||
height:56px;
|
||||
color:#fff;
|
||||
line-height: 24px;
|
||||
font-size:14px;
|
||||
font-weight: bold;
|
||||
float:left;
|
||||
margin-left:10px;
|
||||
padding-top:5px;
|
||||
}
|
||||
.layer-container .layers-box .child-layers{
|
||||
width:200px;
|
||||
border-left:2px solid #8b58c7;
|
||||
margin-left:28px;
|
||||
padding-bottom:20px;
|
||||
}
|
||||
.child-layers p{
|
||||
font-size:14px;
|
||||
font-weight: bold;
|
||||
color:#00FFB3;
|
||||
text-indent: 15px;
|
||||
line-height:25px;
|
||||
}
|
||||
.child-layers p:hover{
|
||||
color:#c7000c;
|
||||
cursor:pointer
|
||||
}
|
||||
.search-container{
|
||||
width:100%;
|
||||
height:40px;
|
||||
margin-bottom:40px;
|
||||
background: rgba(66,142,218,0.23);
|
||||
border: 2px solid #102072;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#search-input{
|
||||
width:195px;
|
||||
height:40px;
|
||||
border:0px;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
background:none;
|
||||
text-indent: 12px;
|
||||
color:#fff;
|
||||
float:left;
|
||||
}
|
||||
.clear-search{
|
||||
width:24px;
|
||||
height:24px;
|
||||
background:rgba(255,255,255,0.2);
|
||||
border-radius: 50%;
|
||||
float:left;
|
||||
margin-top:8px;
|
||||
color:#efefef;
|
||||
font-size:14px;
|
||||
line-height:24px;
|
||||
text-align: center;
|
||||
cursor:pointer;
|
||||
}
|
||||
.search-btn{
|
||||
width: 91px;
|
||||
float:right;
|
||||
height: 40px;
|
||||
background: #102072;
|
||||
border-radius: 0px 5px 5px 0px;
|
||||
font-size: 16px;
|
||||
font-family: SimHei, SimHei-Bold;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
line-height: 40px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.attribute-window{
|
||||
width:400px;
|
||||
height:500px;
|
||||
position: absolute;
|
||||
top:155px;
|
||||
left:1070px;
|
||||
z-index:100;
|
||||
background-image:url(/images/system/cate-bg.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
.drawpanl-window{
|
||||
width:340px;
|
||||
height:400px;
|
||||
position:absolute;
|
||||
right:40px;
|
||||
top:150px;
|
||||
z-index:101;
|
||||
}
|
||||
.search-result{
|
||||
width:320px;
|
||||
height:470px;
|
||||
position:absolute;
|
||||
top:155px;
|
||||
left:70px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.maplayertree-window{
|
||||
width:300px;
|
||||
height:500px;
|
||||
position: absolute;
|
||||
top:155px;
|
||||
left:300px;
|
||||
z-index:100;
|
||||
line-height:40px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,455 @@
|
|||
<template>
|
||||
<div class="add-container">
|
||||
<div class="data-operate">
|
||||
|
||||
<span @click="$router.push({path:'/data/layer'})"><i class="el-icon-arrow-left"></i> 返回</span>
|
||||
</div>
|
||||
|
||||
<div class="form-contaner">
|
||||
<el-form ref="form" size="mini" :model="form" label-width="120px">
|
||||
<el-form-item label="图层名称">
|
||||
<el-input v-model="form.name" placeholder="请输入图层名称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="上级分类">
|
||||
<el-cascader :options="jsonDataTree" :props="{ value: 'id',label: 'name',children: 'children',checkStrictly: true}" @change="setParentId" ></el-cascader>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="图层状态">
|
||||
<el-switch v-model="form.isshow"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="图层描述">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="数据表名称">
|
||||
<el-input type="text" v-model="form.tablename"></el-input>
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item label="上传shp文件" size="mini">
|
||||
<el-upload
|
||||
size="mini"
|
||||
class="upload-demo"
|
||||
action="#"
|
||||
drag
|
||||
:limit="limit"
|
||||
:on-preview="handlePreview"
|
||||
:file-list="fileList"
|
||||
:auto-upload="false"
|
||||
:before-upload="beforeUpload"
|
||||
:on-remove="handleRemove"
|
||||
:on-exceed="handleExceed"
|
||||
:on-change="handleChange"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
>
|
||||
<i class="el-icon-upload" style="font-size:60px;line-height:0px;"></i>
|
||||
<div class="el-upload__text">将Shp文件拖到此处，或<em>点击上传</em></div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="最小显示等级">
|
||||
<el-input v-model.number="form.layerstyle.minZoom" type="number"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="最大显示等级">
|
||||
<el-input v-model.number="form.layerstyle.maxZoom" type="number"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="图层类型">
|
||||
<el-radio-group v-model="form.layertype">
|
||||
<el-radio :label="'fill'">面</el-radio>
|
||||
<el-radio :label="'line'">线</el-radio>
|
||||
<el-radio :label="'circle'">点</el-radio>
|
||||
<el-radio :label="'symbol'">图标</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-for="(item,index) in styles[form.layertype]" :key="index" :label="item.name">
|
||||
|
||||
<el-switch v-if="item.type=='radio'" v-model="form.layerstyle.style[item.label]"></el-switch>
|
||||
|
||||
<el-input v-if="item.type=='input'" type="number" v-model.number="form.layerstyle.style[item.label]"></el-input>
|
||||
|
||||
<el-color-picker v-if="item.type=='color'" v-model="form.layerstyle.style[item.label]"></el-color-picker>
|
||||
|
||||
<div style="100%;height:80px;" v-if="item.type=='icon'">
|
||||
<div class="icon-box" v-for="(item,index) in 12" :key="index" :style="{'border-color':selectedIcon==index ? '#2fa6f2':'rgba(0,0,0,0)'}" @click="selectIcon(index)">
|
||||
<img :src="'/images/map/layer-type-'+(index+1)+'.png'" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">{{submitText}}</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import StyleOptions from '../../../public/styleoptions/styleoptions.json'
|
||||
import { getMethodCommon, postMethodCommon } from '../../api/common';
|
||||
export default {
|
||||
name:"AddLayer",
|
||||
data(){
|
||||
return {
|
||||
submitText:null,
|
||||
typetree:null,
|
||||
jsonDataTree:null,
|
||||
styles:null,
|
||||
selectedIcon:0,
|
||||
form:{
|
||||
id:"",
|
||||
// tablename:"",
|
||||
name:"",
|
||||
isshow:1,
|
||||
layerstyle:{
|
||||
style:{},
|
||||
maxZoom:null,
|
||||
minZoom:null,
|
||||
},
|
||||
layertype:"fill",
|
||||
},
|
||||
limit:999,
|
||||
fileList: [],
|
||||
serviceType:null,
|
||||
tablenameExists:false,
|
||||
newServiceId:null,
|
||||
filename:"",
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.$route.query){
|
||||
console.log(this.$route.query)
|
||||
this.form = this.$route.query;
|
||||
this.form.layerstyle = JSON.parse(this.$route.query.layerstyle);
|
||||
this.submitText = "保存修改"
|
||||
}else{
|
||||
this.submitText = "立即创建"
|
||||
}
|
||||
this.styles = StyleOptions;
|
||||
this.loadTypeTree();
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
methods:{
|
||||
selectIcon(index){
|
||||
this.selectedIcon = index;
|
||||
this.form.layerstyle.style['icon-image'] = 'layer-type-'+(index+1)+'.png';
|
||||
},
|
||||
setParentId(parentId){
|
||||
this.form.typeid = parentId[parentId.length-1]
|
||||
},
|
||||
loadTypeTree(){
|
||||
getMethodCommon("/Dictionary/LoadAll").then(res=>{
|
||||
if(res.code == 200){
|
||||
this.typetree = res.result;
|
||||
this.jsonDataTree = this.transData(this.typetree, 'id', 'parentId', 'children')
|
||||
console.log("jsonDataTree",this.jsonDataTree);
|
||||
}
|
||||
})
|
||||
},
|
||||
transData(jsonArr, idStr, pidStr, childrenStr){
|
||||
// 存放的最终结果树数组
|
||||
const result = [];
|
||||
const id = idStr;
|
||||
const pid = pidStr;
|
||||
const children = childrenStr;
|
||||
const len = jsonArr.length;
|
||||
|
||||
// 遍历得到以id为键名的对象(建立整棵树的索引)
|
||||
const hash = {};
|
||||
jsonArr.forEach(item => {
|
||||
hash[item[id]] = item;
|
||||
});
|
||||
|
||||
for (let j = 0; j < len; j++) {
|
||||
const jsonArrItem = jsonArr[j];
|
||||
const hashItem = hash[jsonArrItem[pid]];
|
||||
if (hashItem) {
|
||||
// 如果当前项还没有children属性，则添加该属性并设置为空数组
|
||||
!hashItem[children] && (hashItem[children] = []);
|
||||
hashItem[children].push(jsonArrItem);
|
||||
} else {
|
||||
result.push(jsonArrItem);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
onSubmit(){
|
||||
if(this.fileList.length>0){
|
||||
this.uploadSheFile();
|
||||
}else{
|
||||
this.form.isshow = this.form.isshow ? 1 : 0;
|
||||
// this.form.layerstyle = JSON.stringify(this.form.layerstyle);
|
||||
let tempForm = {...this.form};
|
||||
tempForm.layerstyle = JSON.stringify(tempForm.layerstyle);
|
||||
|
||||
postMethodCommon("/LayerManager/Add",tempForm).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.$router.push({path:'/data/layer'})
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"修改服务成功"
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
// return;
|
||||
// this.form.isshow = this.form.isshow ? 1 : 0;
|
||||
// this.form.layerstyle = JSON.stringify(this.form.layerstyle);
|
||||
// postMethodCommon("/LayerManager/Add",this.form).then(res=>{
|
||||
// if(res.code == 200){
|
||||
// this.newServiceId = res.result;
|
||||
// this.uploadSheFile();
|
||||
// }
|
||||
// })
|
||||
}, //文件上传时的钩子
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
// 删除文件
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file);
|
||||
this.fileList = fileList
|
||||
},
|
||||
// 文件上传成功
|
||||
handleSuccess() {
|
||||
this.$message.success('文件上传成功')
|
||||
},
|
||||
// 文件超出个数限制
|
||||
handleExceed(files, fileList) {
|
||||
console.log(files);
|
||||
console.log(fileList);
|
||||
this.$message.warning(`只能选择 ${this.limit} 个文件进行上传!!`)
|
||||
},
|
||||
// 文件状态改变
|
||||
handleChange(file, fileList) {
|
||||
// this.form.name = file.name.split(".")[0]
|
||||
// let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
|
||||
// let size = file.size / 1024 / 1024;
|
||||
|
||||
// if (extension !== 'shp') {
|
||||
|
||||
// this.$message.warning('只能上传后缀是.shp的文件')
|
||||
// return false
|
||||
// }
|
||||
|
||||
// if (size > 100) {
|
||||
// this.$message.warning('文件大小不得超过100M')
|
||||
// return false
|
||||
// }
|
||||
|
||||
if (file) {
|
||||
this.fileList = fileList
|
||||
}
|
||||
|
||||
},
|
||||
// 文件上传失败
|
||||
handleError() {
|
||||
this.$message.error('文件上传失败')
|
||||
},
|
||||
beforeUpload(file) {
|
||||
let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
|
||||
let size = file.size / 1024 / 1024;
|
||||
if (extension !== 'shp') {
|
||||
|
||||
this.$message.warning('只能上传后缀是.shp的文件')
|
||||
return false
|
||||
}
|
||||
if (size > 100) {
|
||||
this.$message.warning('文件大小不得超过100M')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}, //上传shp
|
||||
uploadSheFile(){
|
||||
if(this.fileList.length>0){
|
||||
let formData = new FormData();
|
||||
this.fileList.forEach(item => {
|
||||
formData.append("files", item.raw);
|
||||
});
|
||||
if (this.fileList.length === 0) {
|
||||
this.$message.warning(`请选择上传文件!!`)
|
||||
return
|
||||
}
|
||||
console.log("formData",formData);
|
||||
// debugger;
|
||||
// let url = '/Files/UploadShpFiles?tablename='+this.form.tablename;
|
||||
|
||||
let tablename = "pingyi"+parseInt(Math.random()*10000000000)
|
||||
this.$axios({
|
||||
method:"post",
|
||||
url:"http://123.132.248.154:6005/api/Files/UploadShpFiles?tablename="+tablename,
|
||||
data:formData, //参数
|
||||
headers:{
|
||||
"Content-Type":"multipart/form-data", //请求头携带的token
|
||||
"X-Token":localStorage.getItem("Token")
|
||||
},
|
||||
}).then(res=>{
|
||||
if (res.data.code === 200) {
|
||||
let path = res.data.result;
|
||||
let tablename = path.substr(path.lastIndexOf("\\")+1,30);
|
||||
this.form.tablename = tablename;
|
||||
this.addServer(tablename,path);
|
||||
}
|
||||
})
|
||||
|
||||
// postMethodCommon(url, formData).then(res => {
|
||||
//
|
||||
// })
|
||||
}else{
|
||||
return;
|
||||
}
|
||||
},
|
||||
//添加服务接口
|
||||
addServer(tablename,path){
|
||||
this.form.tablename = tablename;
|
||||
this.form.isshow = this.form.isshow ? 1 : 0;
|
||||
this.form.layerstyle = JSON.stringify(this.form.layerstyle);
|
||||
postMethodCommon("/LayerManager/Add",this.form).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.newServiceId = res.result;
|
||||
|
||||
let importShpFormData = {
|
||||
filepath:path,
|
||||
serviceid:this.newServiceId,
|
||||
tablename:this.form.tablename,
|
||||
srid: 0
|
||||
}
|
||||
this.importShpToDatabase(importShpFormData);
|
||||
}
|
||||
})
|
||||
},
|
||||
// 导入shp到数据库
|
||||
importShpToDatabase(formData){
|
||||
postMethodCommon("/LayerManager/ImportShpData",formData).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.$router.push({path:'/data/layer'})
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"添加服务成功"
|
||||
})
|
||||
}else{
|
||||
this.$router.push({path:'/data/layer'})
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"服务基本信息添加成功，导入shp文件失败，请重新导入！"
|
||||
})
|
||||
}
|
||||
}).catch(e=>{
|
||||
console.log(e);
|
||||
this.$router.push({path:'/data/layer'})
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"服务基本信息添加成功，导入shp文件失败，请重新导入！"
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.add-container{
|
||||
width:calc( 100% - 0px);
|
||||
height: calc( 100% - 40px);
|
||||
padding:20px;
|
||||
background:#1d253d;
|
||||
}
|
||||
.add-container .form-contaner{
|
||||
width:1000px;
|
||||
height: calc( 100% - 60px);
|
||||
background:#1d253d;
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
.add-container .form-contaner::-webkit-scrollbar{
|
||||
width:10px;
|
||||
}
|
||||
.data-operate{
|
||||
text-indent:5px;
|
||||
width:100%;
|
||||
height:30px;
|
||||
color:#8a91aa;
|
||||
background:#2b324f;
|
||||
line-height:30px;
|
||||
margin-bottom:30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
}
|
||||
.item-name{
|
||||
width:120px;
|
||||
height:40px;
|
||||
line-height:40px;
|
||||
color:#8a91aa;
|
||||
float:left;
|
||||
text-align: right;
|
||||
}
|
||||
.item-value{
|
||||
width: calc( 100% - 140px);
|
||||
margin-left:20px;
|
||||
float:left;
|
||||
line-height: 40px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
background:none;
|
||||
color:#8a91aa;
|
||||
box-shadow: none;
|
||||
border:1px solid #8a91aa;
|
||||
border-radius:0px;
|
||||
}
|
||||
::v-deep .el-textarea__inner{
|
||||
background:none;
|
||||
color:#8a91aa;
|
||||
box-shadow: none;
|
||||
border:1px solid #8a91aa;
|
||||
border-radius:0px;
|
||||
}
|
||||
::v-deep .el-radio__label{
|
||||
color:#8a91aa;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label{
|
||||
color:#8a91aa;
|
||||
}
|
||||
|
||||
::v-deep .el-upload-dragger{
|
||||
background:rgba(0,0,0,0);
|
||||
border-radius:0px;
|
||||
border-color:#8a91aa;
|
||||
color:#8a91aa;
|
||||
}
|
||||
::v-deep .el-upload__text{
|
||||
color:#8a91aa;
|
||||
}
|
||||
|
||||
::v-deep .el-color-picker__trigger{
|
||||
border-radius:0px;
|
||||
border:1px solid #8a91aa;
|
||||
}
|
||||
.icon-box{
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
border:2px solid rgba(0,0,0,0);
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
margin-right:6px;
|
||||
margin-bottom:6px;
|
||||
cursor:pointer;
|
||||
border-radius:3px;
|
||||
}
|
||||
.icon-box img{
|
||||
width:48px;
|
||||
margin-top:8px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
<template>
|
||||
<div class="addLayerType-container">
|
||||
<div class="cate-title">
|
||||
分类信息
|
||||
|
||||
<span class="close-btn" @click="$emit('close')">
|
||||
×
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div class="form-container">
|
||||
<el-form ref="form" size="mini" :model="form" label-width="80px">
|
||||
<el-form-item label="分类名称">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="分类图标">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="上级分类">
|
||||
<el-cascader :options="jsonDataTree" :props="{ value: 'id',label: 'name',children: 'children',checkStrictly: true}" @change="setParentId" ></el-cascader>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="分类描述">
|
||||
<el-input type="textarea" v-model="form.remark"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addData()">立即创建</el-button>
|
||||
|
||||
<el-button @click="$emit('close')">取消</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { postMethodCommon, getMethodCommon } from '../../api/common.js';
|
||||
export default {
|
||||
name:"AddLayerType",
|
||||
data(){
|
||||
return {
|
||||
typetree:null,
|
||||
jsonDataTree:null,
|
||||
options:null,
|
||||
form:{
|
||||
name:"",
|
||||
code:"",
|
||||
parentId:"",
|
||||
parentcode:"",
|
||||
remark:"",
|
||||
},
|
||||
imageUrl:null,
|
||||
}
|
||||
},
|
||||
created(){
|
||||
|
||||
this.loadTypeTree();
|
||||
|
||||
//
|
||||
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
setParentId(parentId){
|
||||
this.form.typeid = parentId[parentId.length-1]
|
||||
},
|
||||
loadTypeTree(){
|
||||
getMethodCommon("/Dictionary/LoadAll").then(res=>{
|
||||
if(res.code == 200){
|
||||
this.typetree = res.result;
|
||||
this.jsonDataTree = this.transData(this.typetree, 'id', 'parentId', 'children')
|
||||
console.log("jsonDataTree",this.jsonDataTree);
|
||||
}
|
||||
})
|
||||
},
|
||||
addData(){
|
||||
|
||||
postMethodCommon("/Dictionary/Add",this.form).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.$emit("close");
|
||||
}
|
||||
})
|
||||
},
|
||||
handleAvatarSuccess(){
|
||||
|
||||
},
|
||||
beforeAvatarUpload(){
|
||||
|
||||
},
|
||||
|
||||
transData(jsonArr, idStr, pidStr, childrenStr){
|
||||
// 存放的最终结果树数组
|
||||
const result = [];
|
||||
const id = idStr;
|
||||
const pid = pidStr;
|
||||
const children = childrenStr;
|
||||
const len = jsonArr.length;
|
||||
|
||||
// 遍历得到以id为键名的对象(建立整棵树的索引)
|
||||
const hash = {};
|
||||
jsonArr.forEach(item => {
|
||||
hash[item[id]] = item;
|
||||
});
|
||||
|
||||
for (let j = 0; j < len; j++) {
|
||||
const jsonArrItem = jsonArr[j];
|
||||
const hashItem = hash[jsonArrItem[pid]];
|
||||
if (hashItem) {
|
||||
// 如果当前项还没有children属性，则添加该属性并设置为空数组
|
||||
!hashItem[children] && (hashItem[children] = []);
|
||||
hashItem[children].push(jsonArrItem);
|
||||
} else {
|
||||
result.push(jsonArrItem);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.addLayerType-container{
|
||||
width:500px;
|
||||
height:600px;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
background-image:url(/images/system/cate-bg.png);
|
||||
background-size:100% 100%;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
.cate-title{
|
||||
width:100%;
|
||||
height:30px;
|
||||
line-height:30px;
|
||||
color:#fff;
|
||||
text-indent:12px;
|
||||
}
|
||||
.form-container{
|
||||
width: calc( 100% - 34px);
|
||||
height: calc( 100% - 64px);
|
||||
padding:15px;
|
||||
background:rgba(43,50,79,0.8);
|
||||
margin:2px auto;
|
||||
position: relative;
|
||||
z-index:999999;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
background:rgba(0,0,0,0);
|
||||
color:#8a91aa;
|
||||
}
|
||||
::v-deep .el-textarea__inner{
|
||||
background:rgba(0,0,0,0);
|
||||
color:#8a91aa;
|
||||
}
|
||||
::v-deep .el-upload,.el-upload--text{
|
||||
|
||||
}
|
||||
::v-deep .el-icon-plus{
|
||||
width:80px;
|
||||
height:80px;
|
||||
line-height: 80px;
|
||||
font-size:20px;
|
||||
border-radius:3px;
|
||||
border:1px dashed #8a91aa;
|
||||
color:#8a91aa;
|
||||
}
|
||||
|
||||
.close-btn{
|
||||
float:right;font-size:24px;margin-right:10px;cursor:pointer;
|
||||
}
|
||||
.close-btn:hover{
|
||||
color:#cecece;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
<template>
|
||||
<div class="add-container">
|
||||
<div class="data-operate">
|
||||
基础数据管理
|
||||
<!-- <span @click="$router.push({path:'/data/layer'})"><i class="el-icon-arrow-left"></i> 返回</span> -->
|
||||
</div>
|
||||
|
||||
<div class="form-contaner">
|
||||
<el-form ref="form" size="mini" :model="form" label-width="180px">
|
||||
<el-form-item label="预警能力：">
|
||||
<el-input type="number" v-model="form.yjnl" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="森林面积（平方公里）：">
|
||||
<el-input type="number" v-model="form.sl" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="河流数量（条）：">
|
||||
<el-input type="number" v-model="form.hl" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="水库数量（座）：">
|
||||
<el-input type="number" v-model="form.sk" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="承灾体项目（项）：">
|
||||
<el-input type="number" v-model="form.czt" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="减灾能力（项）：">
|
||||
<el-input type="number" v-model="form.jznl" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="历史灾害数量（次）：">
|
||||
<el-input type="number" v-model="form.lszh" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">保存修改</el-button>
|
||||
<el-button @click="getDataInfo">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getMethodCommon, postMethodCommon } from '../../api/common';
|
||||
export default {
|
||||
name:"AddLayer",
|
||||
data(){
|
||||
return {
|
||||
form:{}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getDataInfo();
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
methods:{
|
||||
getDataInfo(){
|
||||
getMethodCommon("/ScreenService/Getinfo").then(res=>{
|
||||
if(res.code == 200){
|
||||
this.form = res.result;
|
||||
}
|
||||
})
|
||||
},
|
||||
onSubmit(){
|
||||
postMethodCommon("/ScreenService/AddOrUpdate",this.form).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"修改数据成功！",
|
||||
})
|
||||
}else{
|
||||
this.$message({
|
||||
type:"error",
|
||||
message:"修改数据失败！",
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.add-container{
|
||||
width:calc( 100% - 0px);
|
||||
height: calc( 100% - 40px);
|
||||
padding:20px;
|
||||
background:#1d253d;
|
||||
}
|
||||
.add-container .form-contaner{
|
||||
width: calc( 100% - 40px);
|
||||
height: calc( 100% - 60px);
|
||||
background:#1d253d;
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
.add-container .form-contaner::-webkit-scrollbar{
|
||||
width:10px;
|
||||
}
|
||||
.data-operate{
|
||||
text-indent:5px;
|
||||
width:100%;
|
||||
height:30px;
|
||||
color:#8a91aa;
|
||||
background:#2b324f;
|
||||
line-height:30px;
|
||||
margin-bottom:30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
}
|
||||
.item-name{
|
||||
width:120px;
|
||||
height:40px;
|
||||
line-height:40px;
|
||||
color:#8a91aa;
|
||||
float:left;
|
||||
text-align: right;
|
||||
}
|
||||
.item-value{
|
||||
width: calc( 100% - 140px);
|
||||
margin-left:20px;
|
||||
float:left;
|
||||
line-height: 40px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
background:none;
|
||||
color:#8a91aa;
|
||||
box-shadow: none;
|
||||
border:1px solid #8a91aa;
|
||||
border-radius:0px;
|
||||
}
|
||||
::v-deep .el-textarea__inner{
|
||||
background:none;
|
||||
color:#8a91aa;
|
||||
box-shadow: none;
|
||||
border:1px solid #8a91aa;
|
||||
border-radius:0px;
|
||||
}
|
||||
::v-deep .el-radio__label{
|
||||
color:#8a91aa;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label{
|
||||
color:#8a91aa;
|
||||
}
|
||||
|
||||
::v-deep .el-upload-dragger{
|
||||
background:rgba(0,0,0,0);
|
||||
border-radius:0px;
|
||||
border-color:#8a91aa;
|
||||
color:#8a91aa;
|
||||
}
|
||||
::v-deep .el-upload__text{
|
||||
color:#8a91aa;
|
||||
}
|
||||
|
||||
::v-deep .el-color-picker__trigger{
|
||||
border-radius:0px;
|
||||
border:1px solid #8a91aa;
|
||||
}
|
||||
.icon-box{
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
border:2px solid rgba(0,0,0,0);
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
margin-right:6px;
|
||||
margin-bottom:6px;
|
||||
cursor:pointer;
|
||||
border-radius:3px;
|
||||
}
|
||||
.icon-box img{
|
||||
width:48px;
|
||||
margin-top:8px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<div class="layer-container">
|
||||
<div class="data-container">
|
||||
<div class="data-operate">
|
||||
<span>图层管理</span>
|
||||
<el-button type="primary" style="float:right;" size="mini" @click="$router.push({path:'/data/addlayer'})">添加</el-button>
|
||||
<!-- <el-button type="warning" style="float:right;" size="mini" >删除</el-button> -->
|
||||
</div>
|
||||
<div class="table-head">
|
||||
<el-row>
|
||||
<el-col :span="1">编号</el-col>
|
||||
<el-col :span="5">图层名称</el-col>
|
||||
<el-col :span="2">图层类型</el-col>
|
||||
<el-col :span="5">数据表名</el-col>
|
||||
<el-col :span="5">所属分类</el-col>
|
||||
<el-col :span="4">状态</el-col>
|
||||
<el-col :span="2">操作</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="table-row" v-for="(item,index) in tableData" :key="index">
|
||||
<el-row>
|
||||
<el-col :span="1">{{index}}</el-col>
|
||||
<el-col :span="5">{{item.name}}</el-col>
|
||||
<el-col :span="2">{{item.layertype}}</el-col>
|
||||
<el-col :span="5">{{item.tablename?item.tablename:"暂无"}}</el-col>
|
||||
<el-col :span="5">{{item.createtime}}</el-col>
|
||||
<el-col :span="4">{{item.isshow ? '展示' : '隐藏'}}</el-col>
|
||||
<el-col :span="2">
|
||||
<el-button type="primary" size="mini" @click="editLayer(item)">编辑</el-button>
|
||||
|
||||
<el-button type="warning" size="mini" @click="delLayer(item.id)">删除</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-pagenation">
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getMethodCommon, postMethodCommon } from '../../api/common'
|
||||
export default {
|
||||
name:"LayerManagement",
|
||||
data(){
|
||||
return {
|
||||
tableData:[],
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getLayerList();
|
||||
},
|
||||
methods:{
|
||||
getLayerList(){
|
||||
getMethodCommon("/LayerManager/Load").then(res=>{
|
||||
if(res.code == 200){
|
||||
this.tableData = res.result;
|
||||
}
|
||||
})
|
||||
},
|
||||
delLayer(id){
|
||||
postMethodCommon("/LayerManager/Delete",[id]).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.$message.success("删除成功");
|
||||
this.getLayerList();
|
||||
}
|
||||
})
|
||||
},
|
||||
editLayer(item){
|
||||
this.$router.push({path:'/data/addlayer',query:item})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.layer-container{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:#1d253d;
|
||||
}
|
||||
.data-container{
|
||||
width: calc( 100% - 80px);
|
||||
height: calc( 100% - 40px);
|
||||
padding:20px;
|
||||
float:left;
|
||||
margin-left:20px;
|
||||
background:#1d253d;
|
||||
}
|
||||
.data-container .data-operate{
|
||||
width:100%;
|
||||
height:30px;
|
||||
color:#8a91aa;
|
||||
line-height:30px;
|
||||
}
|
||||
|
||||
.data-container .table-head{
|
||||
width:100%;
|
||||
height:30px;
|
||||
background:#2b324f;
|
||||
margin-top:20px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
color:#8a91aa;
|
||||
}
|
||||
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 140px);
|
||||
overflow: auto;
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
.table-body::-webkit-scrollbar{
|
||||
width:10px;
|
||||
border-radius:5px;
|
||||
}
|
||||
.table-body::-webkit-scrollbar-thumb{
|
||||
background:rgba(0,0,0,0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.table-row{
|
||||
width:100%;
|
||||
height:40px;
|
||||
line-height: 40px;
|
||||
color:#8a91aa;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-pagenation{
|
||||
width:100%;
|
||||
height:50px;
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li{
|
||||
background:rgba(0, 0, 0, 0);
|
||||
color:#efefef;
|
||||
}
|
||||
::v-deep .btn-prev{
|
||||
background:rgba(0, 0, 0, 0);
|
||||
color:#efefef;
|
||||
}
|
||||
::v-deep .el-pagination button:disabled{
|
||||
background:rgba(0, 0, 0, 0);
|
||||
color:#efefef;
|
||||
}
|
||||
::v-deep .btn-next{
|
||||
background:rgba(0, 0, 0, 0);
|
||||
color:#efefef;
|
||||
}
|
||||
|
||||
::v-deep .el-button{
|
||||
margin:0px;
|
||||
border-radius:3px;
|
||||
padding:4px 7px;
|
||||
font-size:12px!important;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,414 @@
|
|||
<template>
|
||||
<div style="width:100%;height:100%;">
|
||||
<div class="tree-container">
|
||||
<div class="cate-title">
|
||||
全部类别
|
||||
</div>
|
||||
<div class="tree">
|
||||
<el-tree :data="jsonDataTree" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true"></el-tree>
|
||||
<LayerTree v-if="false" :menu_tree="menu_tree" :level="1"></LayerTree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-container">
|
||||
<div class="data-operate">
|
||||
<span>公共服务设施</span>
|
||||
<el-button type="primary" style="float:right;" size="mini" @click="addFormShow = true">添加</el-button>
|
||||
<!-- <el-button type="warning" style="float:right;" size="mini" >删除</el-button> -->
|
||||
</div>
|
||||
<div class="table-head">
|
||||
<el-row>
|
||||
<el-col :span="1">编号</el-col>
|
||||
<el-col :span="9">模块名称</el-col>
|
||||
<el-col :span="6">模块标识</el-col>
|
||||
<el-col :span="6">模块描述</el-col>
|
||||
<el-col :span="2">操作</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="table-row" v-for="(item,index) in tableData" :key="index">
|
||||
<el-row>
|
||||
<el-col :span="1">{{index}}</el-col>
|
||||
<el-col :span="9">{{item.name}}</el-col>
|
||||
<el-col :span="6">模块标识</el-col>
|
||||
<el-col :span="6">{{item.remark?item.remark : "暂无描述"}}</el-col>
|
||||
<el-col :span="2">
|
||||
<el-button type="primary" size="mini">编辑</el-button>
|
||||
|
||||
<el-button type="warning" size="mini" @click="delType(item.id)">删除</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-pagenation">
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <VueDragResize :isResizable="false" :isActive="false" :w="0" :h="0"> -->
|
||||
<AddLayerType v-if="addFormShow" @close="addFormShow = false"></AddLayerType>
|
||||
<!-- </VueDragResize> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AddLayerType from './AddLayerType.vue';
|
||||
import LayerTree from '../../components/LayerTree.vue'
|
||||
import { getMethodCommon, postMethodCommon } from '../../api/common';
|
||||
// import VueDragResize from 'vue-drag-resize'
|
||||
export default {
|
||||
name:"LayerTypeManagement",
|
||||
components:{
|
||||
LayerTree,
|
||||
AddLayerType,
|
||||
|
||||
// VueDragResize
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
tableData:[],
|
||||
addFormShow:false,
|
||||
jsonDataTree:null,
|
||||
typetree:null,
|
||||
defaultProps:{
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
menu_tree:[
|
||||
{
|
||||
name:"承载体",
|
||||
show:true,
|
||||
children:[
|
||||
{
|
||||
name:"公共服务设施",
|
||||
show:false,
|
||||
children:[
|
||||
{
|
||||
name:"学校",
|
||||
show:false,
|
||||
children:[
|
||||
{
|
||||
name:"小学",
|
||||
show:false,
|
||||
children:[],
|
||||
},{
|
||||
name:"中学",
|
||||
show:false,
|
||||
children:[
|
||||
{
|
||||
name:"初级中学",
|
||||
show:false,
|
||||
children:[
|
||||
{
|
||||
name:"初中一年级",
|
||||
show:false,
|
||||
children:[],
|
||||
},{
|
||||
name:"初中二年级",
|
||||
show:false,
|
||||
children:[],
|
||||
},{
|
||||
name:"初中三年级",
|
||||
show:false,
|
||||
children:[],
|
||||
}
|
||||
]
|
||||
},{
|
||||
name:"高级中学",
|
||||
show:false,
|
||||
children:[
|
||||
{
|
||||
name:"高中一年级",
|
||||
show:false,
|
||||
children:[],
|
||||
},{
|
||||
name:"高中二年级",
|
||||
show:false,
|
||||
children:[],
|
||||
},{
|
||||
name:"高中三年级",
|
||||
show:false,
|
||||
children:[],
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
},{
|
||||
name:"大学",
|
||||
show:false,
|
||||
children:[],
|
||||
}
|
||||
],
|
||||
},{
|
||||
name:"医疗卫生机构",
|
||||
show:false,
|
||||
children:[],
|
||||
},{
|
||||
name:"社会服务机构",
|
||||
show:false,
|
||||
children:[],
|
||||
}
|
||||
]
|
||||
},{
|
||||
name:"危险化学品",
|
||||
show:false,
|
||||
children:[
|
||||
{
|
||||
name:"化工园区",
|
||||
show:false,
|
||||
children:[],
|
||||
},{
|
||||
name:"企业",
|
||||
show:false,
|
||||
children:[],
|
||||
},{
|
||||
name:"加油加气站",
|
||||
show:false,
|
||||
children:[],
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}, {
|
||||
name:"减灾能力",
|
||||
show:true,
|
||||
children:[
|
||||
{
|
||||
name:"政府减灾能力",
|
||||
show:false,
|
||||
children:[
|
||||
{
|
||||
name:"政府减灾管理能力",
|
||||
show:false,
|
||||
children:[],
|
||||
},{
|
||||
name:"救灾物资储备",
|
||||
show:false,
|
||||
children:[],
|
||||
},{
|
||||
name:"应急避难场所",
|
||||
show:false,
|
||||
children:[],
|
||||
}
|
||||
]
|
||||
},{
|
||||
name:"企业与社会组织减灾在能力",
|
||||
show:false,
|
||||
children:[
|
||||
{
|
||||
name:"救灾物资储备",
|
||||
show:false,
|
||||
children:[],
|
||||
},{
|
||||
name:"应急避难场所",
|
||||
show:false,
|
||||
children:[],
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.loadTypeTree();
|
||||
this.getTypeList();
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
getTypeList(){
|
||||
|
||||
getMethodCommon("/Dictionary/LoadAll").then(res=>{
|
||||
if(res.code == 200){
|
||||
this.tableData = res.result;
|
||||
}
|
||||
})
|
||||
},
|
||||
delType(id){
|
||||
postMethodCommon("/Dictionary/Delete",[id]).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"删除成功",
|
||||
})
|
||||
this.getTypeList();
|
||||
}
|
||||
})
|
||||
},
|
||||
loadTypeTree(){
|
||||
getMethodCommon("/Dictionary/LoadAll").then(res=>{
|
||||
if(res.code == 200){
|
||||
this.typetree = res.result;
|
||||
this.typetree.forEach((item,index)=>{
|
||||
// this.typetree[index].children = this.typetree[index].children ? this.typetree[index].children : [];
|
||||
// this.typetree[index].show = this.typetree[index].children && this.typetree[index].children.length>0 ? true : false;
|
||||
this.typetree[index].show = true;
|
||||
})
|
||||
console.log("typetree",this.typetree);
|
||||
this.jsonDataTree = this.transData(this.typetree, 'id', 'parentId', 'children');
|
||||
// this.menu_tree = { ...this.jsonDataTree };
|
||||
}
|
||||
})
|
||||
},
|
||||
transData(jsonArr, idStr, pidStr, childrenStr){
|
||||
// 存放的最终结果树数组
|
||||
const result = [];
|
||||
const id = idStr;
|
||||
const pid = pidStr;
|
||||
const children = childrenStr;
|
||||
const len = jsonArr.length;
|
||||
|
||||
// 遍历得到以id为键名的对象(建立整棵树的索引)
|
||||
const hash = {};
|
||||
jsonArr.forEach(item => {
|
||||
hash[item[id]] = item;
|
||||
});
|
||||
|
||||
for (let j = 0; j < len; j++) {
|
||||
const jsonArrItem = jsonArr[j];
|
||||
const hashItem = hash[jsonArrItem[pid]];
|
||||
if (hashItem) {
|
||||
// 如果当前项还没有children属性，则添加该属性并设置为空数组
|
||||
!hashItem[children] && (hashItem[children] = []);
|
||||
hashItem[children].push(jsonArrItem);
|
||||
} else {
|
||||
result.push(jsonArrItem);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
handleNodeClick(){
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.tree-container{
|
||||
width:260px;
|
||||
height: calc( 100% - 40px);
|
||||
float:left;
|
||||
background:#1d253d;
|
||||
padding:20px;
|
||||
|
||||
}
|
||||
.tree-container .cate-title{
|
||||
width:100%;
|
||||
height:40px;
|
||||
line-height:30px;
|
||||
font-size:14px;
|
||||
color:#8a91aa;
|
||||
}
|
||||
.tree-container .tree{
|
||||
width:260px;
|
||||
height: calc( 100% - 40px);
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
.tree::-webkit-scrollbar{
|
||||
width:10px;
|
||||
background:rgba(0, 0, 0, 0)
|
||||
}
|
||||
.tree::-webkit-scrollbar-thumb{
|
||||
width:10px;
|
||||
border-radius:5px;
|
||||
background:rgba(0,0,0,0.2);
|
||||
}
|
||||
.data-container{
|
||||
width: calc( 100% - 360px);
|
||||
height: calc( 100% - 40px);
|
||||
padding:20px;
|
||||
float:left;
|
||||
margin-left:20px;
|
||||
background:#1d253d;
|
||||
}
|
||||
.data-container .data-operate{
|
||||
width:100%;
|
||||
height:30px;
|
||||
color:#8a91aa;
|
||||
line-height:30px;
|
||||
}
|
||||
|
||||
.data-container .table-head{
|
||||
width:100%;
|
||||
height:30px;
|
||||
background:#2b324f;
|
||||
margin-top:20px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
color:#8a91aa;
|
||||
}
|
||||
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 140px);
|
||||
overflow: auto;
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
.table-body::-webkit-scrollbar{
|
||||
width:10px;
|
||||
border-radius:5px;
|
||||
}
|
||||
.table-body::-webkit-scrollbar-thumb{
|
||||
background:rgba(0,0,0,0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.table-row{
|
||||
width:100%;
|
||||
height:40px;
|
||||
line-height: 40px;
|
||||
color:#8a91aa;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-pagenation{
|
||||
width:100%;
|
||||
height:50px;
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li{
|
||||
background:rgba(0, 0, 0, 0);
|
||||
color:#efefef;
|
||||
}
|
||||
::v-deep .btn-prev{
|
||||
background:rgba(0, 0, 0, 0);
|
||||
color:#efefef;
|
||||
}
|
||||
::v-deep .el-pagination button:disabled{
|
||||
background:rgba(0, 0, 0, 0);
|
||||
color:#efefef;
|
||||
}
|
||||
::v-deep .btn-next{
|
||||
background:rgba(0, 0, 0, 0);
|
||||
color:#efefef;
|
||||
}
|
||||
|
||||
::v-deep .el-button{
|
||||
margin:0px;
|
||||
border-radius:3px;
|
||||
padding:4px 7px;
|
||||
font-size:12px!important;
|
||||
}
|
||||
|
||||
/* ::v-deep .content-container{ */
|
||||
::v-deep .el-form-item__label{
|
||||
color:#8a91aa;
|
||||
}
|
||||
|
||||
::v-deep .el-tree{
|
||||
background:rgba(0,0,0,0);
|
||||
color:#8a91aa;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__content{
|
||||
background:rgba(0,0,0,0);
|
||||
}
|
||||
::v-deep .el-tree-node__content:focus{
|
||||
background:rgba(0,0,0,0);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue