├── public ├── logo.png ├── favicon.ico ├── logo │ └── TB.png ├── css │ ├── leaflet-vector-scalar.css │ ├── MarkerCluster.css │ └── MarkerCluster.Default.css ├── index.html └── js │ ├── chinaProvider.js │ ├── leaflet-typhoon.min.js │ └── leaflet.motion.min.js ├── src ├── views │ ├── 404.vue │ └── Home.vue ├── assets │ ├── draw.png │ ├── logo.png │ ├── chuan.png │ ├── logo1.png │ ├── map │ │ ├── 仓库.png │ │ ├── 作业区.png │ │ ├── 加号.png │ │ ├── 平台.png │ │ ├── 播放.png │ │ ├── 暂停.png │ │ ├── 气压.png │ │ ├── 洋流.png │ │ ├── 海浪.png │ │ ├── 温度.png │ │ ├── 港口.png │ │ ├── 盐度.png │ │ ├── 管线.png │ │ ├── 管线1.png │ │ ├── 管线2.png │ │ ├── 管线3.png │ │ ├── 船舶.png │ │ ├── 警戒线.png │ │ ├── 设备库.png │ │ ├── 风场.png │ │ ├── 油气田平台.png │ │ ├── 港口码头.png │ │ ├── 经纬网格.png │ │ ├── 船舶聚合.png │ │ ├── 进水温度.png │ │ └── arrowRed.png │ ├── setting.png │ ├── upload.png │ ├── 油气田平台.png │ ├── arrowRed.png │ ├── eye-close.png │ ├── openhand.cur │ ├── shipLogo.png │ ├── shipLogo1.png │ ├── tool │ │ ├── area.png │ │ ├── del.png │ │ ├── edit.png │ │ ├── font.png │ │ ├── line.png │ │ ├── more.png │ │ ├── sign.png │ │ ├── arrow.ico │ │ ├── circle.png │ │ ├── clear.png │ │ ├── dashed.png │ │ ├── polygon.png │ │ ├── square.png │ │ ├── distance.png │ │ ├── distance1.png │ │ ├── flag_icon.png │ │ ├── position.png │ │ ├── star_icon.png │ │ ├── icon_marker.png │ │ ├── line_marker.png │ │ ├── screenshot.png │ │ ├── shape_marker.png │ │ ├── sight_icon.png │ │ └── location_icon.png │ ├── arrowOrange.png │ ├── arrowWhite.png │ ├── arrowYellow.png │ ├── chuanLight.png │ ├── closedhand.cur │ ├── platformLogo.png │ ├── typhoon-logo.gif │ ├── typhoon-logo.png │ ├── xiangliang.png │ ├── control-panel.png │ ├── distance-logo.png │ ├── influence-logo.png │ ├── typhoon-legend.png │ ├── sea-risk-legend.png │ ├── typhoon-logo-white.png │ ├── arrowRed.svg │ ├── arrowOrange.svg │ ├── arrowYellow.svg │ ├── arrowWhite.svg │ ├── arrow.svg │ └── common.css ├── http │ ├── platform.js │ ├── user.js │ ├── typhoonConfig.js │ ├── platform-info.js │ ├── field-info.js │ ├── ship.js │ ├── system.js │ ├── events.js │ ├── typhoon.js │ ├── riskEstimate.js │ ├── mapLayer.js │ └── index.js ├── plugins │ ├── zTree │ │ ├── css │ │ │ ├── metroStyle │ │ │ │ ├── img │ │ │ │ │ ├── metro.gif │ │ │ │ │ ├── metro.png │ │ │ │ │ ├── loading.gif │ │ │ │ │ └── line_conn.png │ │ │ │ └── metroStyle.css │ │ │ ├── zTreeStyle │ │ │ │ ├── img │ │ │ │ │ ├── diy │ │ │ │ │ │ ├── 2.png │ │ │ │ │ │ ├── 3.png │ │ │ │ │ │ ├── 4.png │ │ │ │ │ │ ├── 5.png │ │ │ │ │ │ ├── 6.png │ │ │ │ │ │ ├── 7.png │ │ │ │ │ │ ├── 8.png │ │ │ │ │ │ ├── 9.png │ │ │ │ │ │ ├── 1_close.png │ │ │ │ │ │ └── 1_open.png │ │ │ │ │ ├── loading.gif │ │ │ │ │ ├── line_conn.gif │ │ │ │ │ ├── zTreeStandard.gif │ │ │ │ │ └── zTreeStandard.png │ │ │ │ └── zTreeStyle.css │ │ │ ├── awesomeStyle │ │ │ │ ├── img │ │ │ │ │ └── loading.gif │ │ │ │ ├── awesome.less │ │ │ │ ├── awesome.css │ │ │ │ └── fa.less │ │ │ └── demo.css │ │ └── js │ │ │ ├── jquery.ztree.exhide.min.js │ │ │ ├── jquery.ztree.excheck.min.js │ │ │ └── jquery.ztree.exhide.js │ └── vant.js ├── utils │ ├── Token.js │ ├── dialogDrag.js │ └── util.js ├── store │ ├── index.js │ └── modules │ │ └── moduleHome.js ├── mock │ ├── data │ │ └── index.js │ └── testData.js ├── registerServiceWorker.js ├── router │ └── index.js ├── components │ ├── progress │ │ └── Progress.vue │ └── zTree │ │ ├── ZTree.vue │ │ └── ZTreeMobile.vue ├── main.js ├── config │ └── index.js └── App.vue ├── babel.config.js ├── .env.development ├── .env.test ├── .env.production ├── .gitignore ├── README.md ├── LICENSE ├── package.json └── vue.config.js /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/public/logo.png -------------------------------------------------------------------------------- /src/views/404.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo/TB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/public/logo/TB.png -------------------------------------------------------------------------------- /src/assets/draw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/draw.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/chuan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/chuan.png -------------------------------------------------------------------------------- /src/assets/logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/logo1.png -------------------------------------------------------------------------------- /src/assets/map/仓库.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/仓库.png -------------------------------------------------------------------------------- /src/assets/map/作业区.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/作业区.png -------------------------------------------------------------------------------- /src/assets/map/加号.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/加号.png -------------------------------------------------------------------------------- /src/assets/map/平台.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/平台.png -------------------------------------------------------------------------------- /src/assets/map/播放.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/播放.png -------------------------------------------------------------------------------- /src/assets/map/暂停.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/暂停.png -------------------------------------------------------------------------------- /src/assets/map/气压.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/气压.png -------------------------------------------------------------------------------- /src/assets/map/洋流.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/洋流.png -------------------------------------------------------------------------------- /src/assets/map/海浪.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/海浪.png -------------------------------------------------------------------------------- /src/assets/map/温度.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/温度.png -------------------------------------------------------------------------------- /src/assets/map/港口.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/港口.png -------------------------------------------------------------------------------- /src/assets/map/盐度.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/盐度.png -------------------------------------------------------------------------------- /src/assets/map/管线.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/管线.png -------------------------------------------------------------------------------- /src/assets/map/管线1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/管线1.png -------------------------------------------------------------------------------- /src/assets/map/管线2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/管线2.png -------------------------------------------------------------------------------- /src/assets/map/管线3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/管线3.png -------------------------------------------------------------------------------- /src/assets/map/船舶.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/船舶.png -------------------------------------------------------------------------------- /src/assets/map/警戒线.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/警戒线.png -------------------------------------------------------------------------------- /src/assets/map/设备库.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/设备库.png -------------------------------------------------------------------------------- /src/assets/map/风场.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/风场.png -------------------------------------------------------------------------------- /src/assets/setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/setting.png -------------------------------------------------------------------------------- /src/assets/upload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/upload.png -------------------------------------------------------------------------------- /src/assets/油气田平台.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/油气田平台.png -------------------------------------------------------------------------------- /src/assets/arrowRed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/arrowRed.png -------------------------------------------------------------------------------- /src/assets/eye-close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/eye-close.png -------------------------------------------------------------------------------- /src/assets/map/油气田平台.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/油气田平台.png -------------------------------------------------------------------------------- /src/assets/map/港口码头.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/港口码头.png -------------------------------------------------------------------------------- /src/assets/map/经纬网格.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/经纬网格.png -------------------------------------------------------------------------------- /src/assets/map/船舶聚合.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/船舶聚合.png -------------------------------------------------------------------------------- /src/assets/map/进水温度.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/进水温度.png -------------------------------------------------------------------------------- /src/assets/openhand.cur: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/openhand.cur -------------------------------------------------------------------------------- /src/assets/shipLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/shipLogo.png -------------------------------------------------------------------------------- /src/assets/shipLogo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/shipLogo1.png -------------------------------------------------------------------------------- /src/assets/tool/area.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/area.png -------------------------------------------------------------------------------- /src/assets/tool/del.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/del.png -------------------------------------------------------------------------------- /src/assets/tool/edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/edit.png -------------------------------------------------------------------------------- /src/assets/tool/font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/font.png -------------------------------------------------------------------------------- /src/assets/tool/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/line.png -------------------------------------------------------------------------------- /src/assets/tool/more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/more.png -------------------------------------------------------------------------------- /src/assets/tool/sign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/sign.png -------------------------------------------------------------------------------- /src/assets/arrowOrange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/arrowOrange.png -------------------------------------------------------------------------------- /src/assets/arrowWhite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/arrowWhite.png -------------------------------------------------------------------------------- /src/assets/arrowYellow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/arrowYellow.png -------------------------------------------------------------------------------- /src/assets/chuanLight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/chuanLight.png -------------------------------------------------------------------------------- /src/assets/closedhand.cur: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/closedhand.cur -------------------------------------------------------------------------------- /src/assets/map/arrowRed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/map/arrowRed.png -------------------------------------------------------------------------------- /src/assets/platformLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/platformLogo.png -------------------------------------------------------------------------------- /src/assets/tool/arrow.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/arrow.ico -------------------------------------------------------------------------------- /src/assets/tool/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/circle.png -------------------------------------------------------------------------------- /src/assets/tool/clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/clear.png -------------------------------------------------------------------------------- /src/assets/tool/dashed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/dashed.png -------------------------------------------------------------------------------- /src/assets/tool/polygon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/polygon.png -------------------------------------------------------------------------------- /src/assets/tool/square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/square.png -------------------------------------------------------------------------------- /src/assets/typhoon-logo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/typhoon-logo.gif -------------------------------------------------------------------------------- /src/assets/typhoon-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/typhoon-logo.png -------------------------------------------------------------------------------- /src/assets/xiangliang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/xiangliang.png -------------------------------------------------------------------------------- /src/assets/control-panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/control-panel.png -------------------------------------------------------------------------------- /src/assets/distance-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/distance-logo.png -------------------------------------------------------------------------------- /src/assets/influence-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/influence-logo.png -------------------------------------------------------------------------------- /src/assets/tool/distance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/distance.png -------------------------------------------------------------------------------- /src/assets/tool/distance1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/distance1.png -------------------------------------------------------------------------------- /src/assets/tool/flag_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/flag_icon.png -------------------------------------------------------------------------------- /src/assets/tool/position.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/position.png -------------------------------------------------------------------------------- /src/assets/tool/star_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/star_icon.png -------------------------------------------------------------------------------- /src/assets/typhoon-legend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/typhoon-legend.png -------------------------------------------------------------------------------- /src/assets/sea-risk-legend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/sea-risk-legend.png -------------------------------------------------------------------------------- /src/assets/tool/icon_marker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/icon_marker.png -------------------------------------------------------------------------------- /src/assets/tool/line_marker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/line_marker.png -------------------------------------------------------------------------------- /src/assets/tool/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/screenshot.png -------------------------------------------------------------------------------- /src/assets/tool/shape_marker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/shape_marker.png -------------------------------------------------------------------------------- /src/assets/tool/sight_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/sight_icon.png -------------------------------------------------------------------------------- /src/assets/tool/location_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/tool/location_icon.png -------------------------------------------------------------------------------- /src/assets/typhoon-logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/assets/typhoon-logo-white.png -------------------------------------------------------------------------------- /src/http/platform.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 平台 3 | */ 4 | 5 | const uri = '/v1/typhoon-oil-platform' 6 | 7 | export const list = uri + "/get_list"; 8 | -------------------------------------------------------------------------------- /src/plugins/zTree/css/metroStyle/img/metro.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/metroStyle/img/metro.gif -------------------------------------------------------------------------------- /src/plugins/zTree/css/metroStyle/img/metro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/metroStyle/img/metro.png -------------------------------------------------------------------------------- /src/plugins/zTree/css/zTreeStyle/img/diy/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/zTreeStyle/img/diy/2.png -------------------------------------------------------------------------------- /src/plugins/zTree/css/zTreeStyle/img/diy/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/zTreeStyle/img/diy/3.png -------------------------------------------------------------------------------- /src/plugins/zTree/css/zTreeStyle/img/diy/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/zTreeStyle/img/diy/4.png -------------------------------------------------------------------------------- /src/plugins/zTree/css/zTreeStyle/img/diy/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/zTreeStyle/img/diy/5.png -------------------------------------------------------------------------------- /src/plugins/zTree/css/zTreeStyle/img/diy/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/zTreeStyle/img/diy/6.png -------------------------------------------------------------------------------- /src/plugins/zTree/css/zTreeStyle/img/diy/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/zTreeStyle/img/diy/7.png -------------------------------------------------------------------------------- /src/plugins/zTree/css/zTreeStyle/img/diy/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/zTreeStyle/img/diy/8.png -------------------------------------------------------------------------------- /src/plugins/zTree/css/zTreeStyle/img/diy/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/zTreeStyle/img/diy/9.png -------------------------------------------------------------------------------- /src/plugins/zTree/css/metroStyle/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/metroStyle/img/loading.gif -------------------------------------------------------------------------------- /src/plugins/zTree/css/zTreeStyle/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/zTreeStyle/img/loading.gif -------------------------------------------------------------------------------- /src/plugins/zTree/css/awesomeStyle/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/awesomeStyle/img/loading.gif -------------------------------------------------------------------------------- /src/plugins/zTree/css/metroStyle/img/line_conn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/metroStyle/img/line_conn.png -------------------------------------------------------------------------------- /src/plugins/zTree/css/zTreeStyle/img/diy/1_close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/zTreeStyle/img/diy/1_close.png -------------------------------------------------------------------------------- /src/plugins/zTree/css/zTreeStyle/img/diy/1_open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/zTreeStyle/img/diy/1_open.png -------------------------------------------------------------------------------- /src/plugins/zTree/css/zTreeStyle/img/line_conn.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/zTreeStyle/img/line_conn.gif -------------------------------------------------------------------------------- /src/http/user.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 系统 3 | */ 4 | 5 | const uri = '/v1/user' 6 | 7 | export const userInfo = uri + "/info"; 8 | export const changePassword = uri + '/password' 9 | -------------------------------------------------------------------------------- /src/plugins/zTree/css/zTreeStyle/img/zTreeStandard.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/zTreeStyle/img/zTreeStandard.gif -------------------------------------------------------------------------------- /src/plugins/zTree/css/zTreeStyle/img/zTreeStandard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chysxslt/leaflet-vector-scalar-js/HEAD/src/plugins/zTree/css/zTreeStyle/img/zTreeStandard.png -------------------------------------------------------------------------------- /src/http/typhoonConfig.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 台风 3 | */ 4 | 5 | const uri = '/v1/typhoon-config' 6 | 7 | export const getPlatCordonInfo = uri + "/getConfigInfo"; 8 | export const updataConfig = uri; 9 | -------------------------------------------------------------------------------- /.env.development: -------------------------------------------------------------------------------- 1 | NODE_ENV = 'development' 2 | VUE_APP_MODE = 'development' 3 | VUE_APP_SERVER_URL = 'http://web.dev.ops.com:8088' 4 | VUE_APP_BASE_URL = 'http://api.dev.ops.com:7000/typhoon' 5 | VUE_APP_AUTH_URL = 'http://api.dev.ops.com:7000/ops-upms' -------------------------------------------------------------------------------- /.env.test: -------------------------------------------------------------------------------- 1 | NODE_ENV = 'production' 2 | VUE_APP_MODE = 'test' 3 | outputDir = 'test' 4 | VUE_APP_SERVER_URL = 'http://phoon.opstest.qdptzn.com' 5 | VUE_APP_BASE_URL = 'http://api.opstest.qdptzn.com/typhoon' 6 | VUE_APP_AUTH_URL = 'http://api.opstest.qdptzn.com/ops-upms' 7 | -------------------------------------------------------------------------------- /.env.production: -------------------------------------------------------------------------------- 1 | NODE_ENV = 'production' 2 | VUE_APP_MODE = 'production' 3 | outputDir = 'dist' 4 | VUE_APP_SERVER_URL = 'http://phoon.opstest.qdptzn.com' 5 | VUE_APP_BASE_URL = 'http://api.opstest.qdptzn.com/typhoon' 6 | VUE_APP_AUTH_URL = 'http://api.opstest.qdptzn.com/ops-upms' 7 | -------------------------------------------------------------------------------- /src/http/platform-info.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 平台相关 3 | */ 4 | 5 | const uri = '/v1/typhoon-oil-platform' 6 | 7 | export const add = uri; 8 | export const page = uri + '/page'; 9 | export const deleteById = uri; 10 | export const edit = uri; 11 | export const getById = uri + '/info/'; 12 | -------------------------------------------------------------------------------- /src/http/field-info.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 相关 3 | */ 4 | const uri = '/v1/typhoon-oil-field' 5 | export const page = uri + '/page'; 6 | export const add = uri; 7 | export const edit = uri; 8 | export const deleteById = uri; 9 | export const getById = uri + '/'; 10 | export const getFieldList = uri + '/list'; 11 | -------------------------------------------------------------------------------- /public/css/leaflet-vector-scalar.css: -------------------------------------------------------------------------------- 1 | .leaflet-control-velocity { 2 | background-color: rgba(255, 255, 255, 0.7); 3 | padding: 0 5px; 4 | margin: 0 !important; 5 | color: #333; 6 | font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; 7 | } 8 | 9 | .velocity-overlay { 10 | position: absolute; 11 | z-index: 1; 12 | } -------------------------------------------------------------------------------- /src/http/ship.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 船舶 3 | */ 4 | const uri = '/v1/typhoon-ship-type' 5 | const uri1 = '/v1/typhoon-ais-base' 6 | 7 | export const list = uri + "/list"; 8 | export const getCompany = uri1 + "/get_company_name"; 9 | export const getShipType = uri1 + "/get_types"; 10 | export const getShipList = uri1 + "/list"; 11 | export const getDetailById = uri1; 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | yarn.lock 14 | package-lock.json 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | .history/ 25 | /test/ 26 | -------------------------------------------------------------------------------- /src/utils/Token.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Token 3 | * 4 | */ 5 | 6 | export const Token = '' 7 | 8 | export function setToken(value) { 9 | window.localStorage.setItem('TYPHOON_SYS_TOKEN', value); 10 | } 11 | export function getToken(value) { 12 | return window.localStorage.getItem('TYPHOON_SYS_TOKEN') + '' 13 | } 14 | export function removeToken() { 15 | window.localStorage.removeItem('TYPHOON_SYS_TOKEN') 16 | } 17 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | import moduleMap from "./modules/moduleMap" 5 | import moduleHome from "./modules/moduleHome" 6 | 7 | 8 | Vue.use(Vuex) 9 | 10 | export default new Vuex.Store({ 11 | state: { 12 | }, 13 | mutations: { 14 | }, 15 | actions: { 16 | }, 17 | modules: { 18 | moduleMap:moduleMap, 19 | moduleHome:moduleHome, 20 | // moduleToolbar:moduleToolbar, 21 | } 22 | }) 23 | -------------------------------------------------------------------------------- /src/assets/arrowRed.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/arrowOrange.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/arrowYellow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/http/system.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 系统 3 | */ 4 | 5 | const uri = '/v1/auth' 6 | const uri1 = '/v1/sso' 7 | const uri2 = '/v1/sms/send-' 8 | const email = '/v1/email' 9 | 10 | export const login = uri + "/login"; 11 | export const loginApp = uri1 + "/app-login"; 12 | export const register = uri1 + "/external-register"; 13 | export const sendMsg = uri2; 14 | export const logout = uri1 + '/logout'; 15 | export const sendEmailCode = email + '/send'; 16 | export const emailBind = email + '/bind-'; 17 | export const typhoon = `/v1/typhoon-feedback` 18 | 19 | -------------------------------------------------------------------------------- /src/http/events.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 风险分析事件库 3 | */ 4 | const uri = '/v1/typhoon-case-info' 5 | const uri1 = '/v1/typhoon-case-report' 6 | 7 | export const getPageAnalysis = uri + "/page_analysis"; 8 | export const getPageRisk = uri + "/page_assessment"; 9 | export const saveStorageEvents = uri + "/save_storage_events"; 10 | export const deleteById = uri + "/"; 11 | export const downloadById = uri1 + "/download"; 12 | export const shareTo = uri1 + "/forward"; 13 | export const checkExist = uri1 + "/whether/"; 14 | export const importEvents = uri + "/read_events/"; 15 | -------------------------------------------------------------------------------- /src/mock/data/index.js: -------------------------------------------------------------------------------- 1 | import windData from "./windData" 2 | import portData from "./portData" 3 | import seaCurrentData from "./seaCurrentData" 4 | import seaWaveData from "./sea-wave" 5 | import salinityData from "./salinit" 6 | import pressureData from "./pressure" 7 | import temperatureData from "./temperature" 8 | 9 | export default { 10 | windData: windData, 11 | PORT_FLAG: portData, 12 | seaCurrentData: seaCurrentData, 13 | seaWaveData: seaWaveData, 14 | salinityData: salinityData, 15 | pressureData: pressureData, 16 | temperatureData: temperatureData, 17 | } 18 | -------------------------------------------------------------------------------- /src/assets/arrowWhite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/plugins/vant.js: -------------------------------------------------------------------------------- 1 | import 'vant/lib/index.css' 2 | import { ImagePreview, DatetimePicker, Button, Field, Cell, RadioGroup, Radio, 3 | CellGroup, Toast, Tabbar, TabbarItem, PullRefresh, List, Dialog, Row, Col } from 'vant' 4 | export default { 5 | install (Vue) { 6 | Vue.use(Button) 7 | .use(Field) 8 | .use(Cell) 9 | .use(CellGroup) 10 | .use(Toast) 11 | .use(Tabbar) 12 | .use(TabbarItem) 13 | .use(PullRefresh) 14 | .use(List) 15 | .use(Dialog) 16 | .use(DatetimePicker) 17 | .use(ImagePreview) 18 | .use(RadioGroup) 19 | .use(Radio) 20 | .use(Row) 21 | .use(Col) 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # leaflet-vector-scalar-js 2 | 3 | 基于leaflet.js实现的矢量、标量数据可视化Demo。 4 | 包含风场、海浪、洋流、气压、温度等矢量或标量气象数据的可视化展示。 5 | 6 | ## Demo 视频 7 | 8 | [Leaflet动态显示--风场、海浪、洋流、气压、温度等矢量、标量数据](https://v.youku.com/v_show/id_XNDg0OTMzNzUxNg==.html) 9 | 10 | ## 依赖安装 11 | ``` 12 | npm install 13 | ``` 14 | 15 | ### 本地开发调试 16 | ``` 17 | npm run serve 18 | ``` 19 | ### 参考项目 20 | 21 | + [leaflet-velocity](https://github.com/danwild/leaflet-velocity) 22 | 23 | + [earth](https://github.com/cambecc/earth) 24 | 25 | ### Demo核心 26 | 27 | leaflet-vector-scalar.js 是Demo的核心文件。是基于leaflet-velocity（矢量部分） 同时参考 earth（标量部分） 项目来完成的。 28 | 代码还不是很完善，近期可能没有太多时间去修改。 29 | 30 | ### License 31 | MIT License (MIT) 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/assets/arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/store/modules/moduleHome.js: -------------------------------------------------------------------------------- 1 | 2 | // home state 3 | 4 | 5 | const TOGGLE_LEFT_SHOW = 'TOGGLE_LEFT_SHOW'; 6 | const TOGGLE_RIGHT_SHOW = 'TOGGLE_RIGHT_SHOW'; 7 | 8 | 9 | 10 | 11 | export default { 12 | namespaced:true, 13 | state: { 14 | leftShow: true, // 边框左 15 | rightShow: false // 边框右 16 | }, 17 | mutations: { 18 | TOGGLE_LEFT_SHOW(state, payload) { 19 | state.leftShow = !state.leftShow 20 | // console.log(state) 21 | }, 22 | TOGGLE_RIGHT_SHOW(state, payload) { 23 | state.rightShow = !state.rightShow 24 | // console.log(state) 25 | }, 26 | 'TOGGLE_RIGHT_SHOW_FALSE'(state, payload) { 27 | state.rightShow = false 28 | } 29 | }, 30 | actions: { 31 | }, 32 | modules: { 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/http/typhoon.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 台风 3 | */ 4 | 5 | const uri = '/v1/typhoon' 6 | 7 | export const list = uri + "/list/"; //台风列表 8 | export const getDetailById = uri; // 台风详情 9 | export const getRiskStatistics = uri + '/impact_risk_statistics/'; 10 | export const getSpacingDistancePlatform = uri + '/spacing_distance_platform'; // 台风间距 平台 11 | export const getSpacingDistanceArea = uri + '/spacing_distance_field'; // 台风间距 作业区 12 | export const getSpacingDistanceShip = uri + '/spacing_distance_ship'; // 台风间距 船舶 13 | export const downloadModel = uri + '/json_templates'; // 台风模板下载 14 | export const uploadNoId = uri + '/upload_custom_typhoon'; // 自定义台风上传 15 | export const getListCustom = uri + '/list_custom'; // 获取自定义台风列表 16 | export const getTyphoonUpdateTime = uri + '/get_latest_typhoon'; // 获取自定义台风列表 17 | -------------------------------------------------------------------------------- /public/css/MarkerCluster.css: -------------------------------------------------------------------------------- 1 | .leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow { 2 | -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in; 3 | -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in; 4 | -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in; 5 | transition: transform 0.3s ease-out, opacity 0.3s ease-in; 6 | } 7 | 8 | .leaflet-cluster-spider-leg { 9 | /* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */ 10 | -webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in; 11 | -moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in; 12 | -o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in; 13 | transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in; 14 | } 15 | -------------------------------------------------------------------------------- /src/http/riskEstimate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 风险评估 3 | */ 4 | 5 | const uri = '/v1/typhoon-route-info' 6 | const uri1 = '/v1/typhoon-sea-risk' 7 | const uri2 = '/v1/typhoon-sea-risk-info' 8 | 9 | export const add = uri; 10 | export const page = uri + '/page'; 11 | export const deleteById = uri; 12 | export const edit = uri; 13 | export const download = uri + '/export'; 14 | export const downloadModel = uri + '/download'; 15 | export const uploadById = uri + '/import'; 16 | export const uploadNoId = uri + '/upload'; 17 | export const getAirLineList = uri + '/list'; 18 | export const getRouteAssessment = uri + '/route_assessment'; 19 | export const reGetRouteAssessment = uri + '/recalculate_route'; 20 | export const saveRouteEvent = uri + '/save_route_event'; 21 | export const getRouteInfo = uri + '/route_info'; 22 | export const getIntelligentRouteInfo = uri + '/intelligent_route'; 23 | export const seaRiskBigData = uri1 + '/list'; 24 | export const pointRiskEstimateDetail = uri2 + '/getRiskInfo'; 25 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from 'register-service-worker' 4 | 5 | if (process.env.NODE_ENV === 'production') { 6 | register(`${process.env.BASE_URL}service-worker.js`, { 7 | ready () { 8 | console.log( 9 | 'App is being served from cache by a service worker.\n' + 10 | 'For more details, visit https://goo.gl/AFskqB' 11 | ) 12 | }, 13 | registered () { 14 | console.log('Service worker has been registered.') 15 | }, 16 | cached () { 17 | console.log('Content has been cached for offline use.') 18 | }, 19 | updatefound () { 20 | console.log('New content is downloading.') 21 | }, 22 | updated () { 23 | console.log('New content is available; please refresh.') 24 | }, 25 | offline () { 26 | console.log('No internet connection found. App is running in offline mode.') 27 | }, 28 | error (error) { 29 | console.error('Error during service worker registration:', error) 30 | } 31 | }) 32 | } 33 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 36 | 41 | 48 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import Home from '../views/Home.vue' 4 | 5 | 6 | Vue.use(VueRouter); 7 | 8 | // 路由表 9 | const routes = [ 10 | { 11 | path: '/', 12 | name: 'Home', 13 | component: Home, 14 | // component: () => import(/* webpackChunkName: "about" */ '../components/map/LeafletMap.vue') 15 | }, 16 | { 17 | path: '/leaflet', 18 | name: 'LeafletMap', 19 | component: () => import(/* webpackChunkName: "about" */ '../components/map/LeafletMap.vue') 20 | }, 21 | // ==========不能在 path: '*' 此路由下添加路由表！！！ ================== 22 | { 23 | path: '*', 24 | name: '404', 25 | component: () => import(/* webpackChunkName: "404" */ '../views/404.vue') 26 | } 27 | ] 28 | 29 | const router = new VueRouter({ 30 | routes 31 | }) 32 | // 重写 router push 33 | const routerPush = VueRouter.prototype.push 34 | VueRouter.prototype.push = function push(location) { 35 | return routerPush.call(this, location).catch(error=> error) 36 | } 37 | 38 | 39 | export default router 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 chysxslt 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/mock/testData.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 测试用数据 3 | */ 4 | 5 | // 热力图 6 | export const testHeatmapData = { 7 | // max: 100, 8 | data: [{a: 36.6408, o: 120.7728, v: 3}, 9 | {a: 36.12341, o: 120.55, v: 1}, 10 | {a: 36.12341, o: 120.55, v: 9}, 11 | {a: 36.12341, o: 120.55, v: 8}, 12 | {a: 36.12341, o: 120.55, v: 7}, 13 | {a: 36.12341, o: 120.55, v: 6}, 14 | {a: 36.12341, o: 120.55, v: 5} 15 | ] 16 | } 17 | 18 | 19 | // 热力图 20 | export const testDeviceData = { 21 | // max: 100, 22 | data: [{lat: 35.51823901412712, lng: 119.63287353515625}, 23 | {lat: 35.61425872774833, lng: 119.68917846679689}, 24 | {lat: 35.644380711936954, lng: 119.94735717773439},] 25 | } 26 | 27 | // 热力图 28 | export const testPortData = { 29 | // max: 100, 30 | data: [{lat: 36.197924226939875, lng: 120.14099121093751}, 31 | {lat: 36.120351096926775, lng: 120.09704589843751}, 32 | {lat: 36.07155157154837, lng: 120.14923095703126}, 33 | ] 34 | } 35 | 36 | 37 | // 热力图 38 | export const testPipeLineData = { 39 | // max: 100, 40 | data: [{ 41 | pipelineType:'1', 42 | pipelineRoute:[['36.197924226939875','120.14099121093751'],['36.120351096926775','120.09704589843751'],['36.07155157154837','120.14923095703126']] 43 | } 44 | ] 45 | } 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/assets/common.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | border: 0 none; 5 | list-style: none; 6 | text-decoration: none; 7 | } 8 | 9 | 10 | ::-webkit-scrollbar { 11 | width: 5px; 12 | /*height: 5px;*/ 13 | } 14 | 15 | /* 滚动槽 */ 16 | 17 | ::-webkit-scrollbar-track { 18 | -webkit-box-shadow: inset 0 0 5px rgba(244, 255, 239, 0.8); 19 | border-radius: 0; 20 | background: rgba(0, 60, 56, 0.1); 21 | } 22 | 23 | /* 滚动条滑块 */ 24 | 25 | ::-webkit-scrollbar-thumb { 26 | border-radius: 10px; 27 | -webkit-box-shadow: inset 0 0 5px rgb(156, 156, 156); 28 | background: rgba(255, 255, 255, 0.66); 29 | } 30 | 31 | body { 32 | width: 100%; 33 | overflow: hidden; 34 | font-family: "Microsoft YaHei", "微软雅黑"; 35 | -webkit-font-smoothing: antialiased; 36 | -moz-osx-font-smoothing: grayscale; 37 | } 38 | 39 | hr { 40 | border-bottom: 1px solid #FFF; 41 | margin: 0 10px; 42 | } 43 | 44 | .clear { 45 | clear: both; 46 | } 47 | 48 | .collTitle { 49 | width: 100% 50 | } 51 | .f-12{ 52 | font-size: 12px; 53 | } 54 | .collLine { 55 | float: left; 56 | height: 18px; 57 | border-left: 2px solid #FFF; 58 | border-right: 2px solid #FFF; 59 | border-radius: 2px; 60 | margin-left: 10px; 61 | margin-top: 10px; 62 | } 63 | 64 | .collText { 65 | text-align: left; 66 | padding-left: 20px; 67 | font-size: 14px; 68 | } 69 | 70 | .centerText { 71 | text-align: center; 72 | } 73 | 74 | .white { 75 | color: white; 76 | } 77 | -------------------------------------------------------------------------------- /public/css/MarkerCluster.Default.css: -------------------------------------------------------------------------------- 1 | .marker-cluster-small { 2 | background-color: rgba(181, 226, 140, 0.6); 3 | } 4 | .marker-cluster-small div { 5 | background-color: rgba(110, 204, 57, 0.6); 6 | } 7 | 8 | .marker-cluster-medium { 9 | background-color: rgba(241, 211, 87, 0.6); 10 | } 11 | .marker-cluster-medium div { 12 | background-color: rgba(240, 194, 12, 0.6); 13 | } 14 | 15 | .marker-cluster-large { 16 | background-color: rgba(253, 156, 115, 0.6); 17 | } 18 | .marker-cluster-large div { 19 | background-color: rgba(241, 128, 23, 0.6); 20 | } 21 | 22 | /* IE 6-8 fallback colors */ 23 | .leaflet-oldie .marker-cluster-small { 24 | background-color: rgb(181, 226, 140); 25 | } 26 | .leaflet-oldie .marker-cluster-small div { 27 | background-color: rgb(110, 204, 57); 28 | } 29 | 30 | .leaflet-oldie .marker-cluster-medium { 31 | background-color: rgb(241, 211, 87); 32 | } 33 | .leaflet-oldie .marker-cluster-medium div { 34 | background-color: rgb(240, 194, 12); 35 | } 36 | 37 | .leaflet-oldie .marker-cluster-large { 38 | background-color: rgb(253, 156, 115); 39 | } 40 | .leaflet-oldie .marker-cluster-large div { 41 | background-color: rgb(241, 128, 23); 42 | } 43 | 44 | .marker-cluster { 45 | background-clip: padding-box; 46 | border-radius: 20px; 47 | } 48 | .marker-cluster div { 49 | width: 30px; 50 | height: 30px; 51 | margin-left: 5px; 52 | margin-top: 5px; 53 | 54 | text-align: center; 55 | border-radius: 15px; 56 | font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif; 57 | } 58 | .marker-cluster span { 59 | line-height: 30px; 60 | } -------------------------------------------------------------------------------- /src/utils/dialogDrag.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | // v-dialogDrag: 弹窗拖拽 4 | Vue.directive('dialogDrag', { 5 | bind(el, binding, vnode, oldVnode) { 6 | const dialogHeaderEl = el.querySelector('.el-dialog__header') 7 | const dragDom = el.querySelector('.el-dialog') 8 | dialogHeaderEl.style.cursor = 'move' 9 | 10 | // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); 11 | const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null) 12 | 13 | dialogHeaderEl.onmousedown = (e) => { 14 | // 鼠标按下，计算当前元素距离可视区的距离 15 | const disX = e.clientX - dialogHeaderEl.offsetLeft 16 | const disY = e.clientY - dialogHeaderEl.offsetTop 17 | 18 | // 获取到的值带px 正则匹配替换 19 | let styL, styT 20 | 21 | // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px 22 | if (sty.left.includes('%')) { 23 | styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100) 24 | styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100) 25 | } else { 26 | styL = +sty.left.replace(/px/g, '') 27 | styT = +sty.top.replace(/px/g, '') 28 | } 29 | 30 | document.onmousemove = function(e) { 31 | // 通过事件委托，计算移动的距离 32 | const l = e.clientX - disX 33 | const t = e.clientY - disY 34 | 35 | // 移动当前元素 36 | dragDom.style.left = `${l + styL}px` 37 | dragDom.style.top = `${t + styT}px` 38 | 39 | // 将此时的位置传出去 40 | // binding.value({x:e.pageX,y:e.pageY}) 41 | } 42 | 43 | document.onmouseup = function(e) { 44 | document.onmousemove = null 45 | document.onmouseup = null 46 | } 47 | } 48 | } 49 | }) -------------------------------------------------------------------------------- /src/http/mapLayer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * api 请求url 3 | * import {test} from '../api' 4 | * this.$http(test,{...obj}).then() 5 | */ 6 | 7 | 8 | // 例子 9 | export const test = "/api/test"; 10 | 11 | 12 | export const getWindInfo = "/v1/typhoon-wind-field/getWindInfo"; // 风场数据接口 13 | export const getWindHotInfo = "/v1/typhoon-wind-field/getWindHotInfo"; // 风场热力数据接口 14 | export const getWaterDeptInfo = "/v1/typhoon-water-depth/getWaterDeptInfo"; // 水深接口 15 | export const getPlatCordonInfo = "/v1/typhoon-config/getPlatCordonInfo"; // 油汽平台接口 16 | export const getPipeLineList = "/v1/typhoon-pipeline/list"; // 管线平台接口 17 | export const getPortList = "/v1/typhoon-harbor/list"; // 港口平台接口 18 | export const getDeviceList = "/v1/typhoon-equipment-library/list"; // 应急设备接口 19 | export const getCurrentInfo = "/v1/typhoon-current/getCurrentInfo"; // 洋流数据接口 20 | export const getCurrentHotInfo = "/v1/typhoon-current/getCurrentHotInfo"; // 洋流热力数据接口 21 | export const getSaltInfo = "/v1/typhoon-salt-info/getSaltInfo"; // 盐度数据接口 22 | // export const getSaltInfo = "/v1/typhoon-salt-month/getSaltInfo"; // 盐度数据接口 23 | export const getAirTemperature = "/v1/typhoon-sea-temperature/getSeaTemperature"; // 气温数据接口 24 | export const getSeaTemperature = "/v1/typhoon-air-temperature/getAirTemperature"; // 海温数据接口 25 | export const getWaveInfo = "/v1/typhoon-wave-field/getWaveInfo"; // 海浪数据接口 26 | export const getWaveHotInfo = "/v1/typhoon-wave-field/getWaveHotInfo"; // 海浪热力数据接口 27 | export const getAirPressure = "/v1/typhoon-pressure/getPressureInfo"; // 气压数据接口 28 | 29 | export const getEarthWindInfo = "/v1/typhoon-earth-wind-filed/getInfo"; // 全球风场接口 30 | export const getEarthPressureInfo = "/v1/typhoon-earth-pressure-filed/getInfo"; // 全球气压接口 31 | export const getEarthCurrentInfo = "/v1/typhoon-earth-current-filed/getInfo"; // 全球洋流接口 32 | export const getEarthWaveInfo = "/v1/typhoon-earth-wave-hot-filed/getInfo"; // 全球海浪热力接口 33 | export const getEarthSeaTempInfo = "/v1/typhoon-earth-sea-temperature-filed/getInfo"; // 全球海温接口 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 气象数据可视化 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "leaflet-vector-scalar", 3 | "version": "0.1.2", 4 | "author": "chysxslt", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/chysxslt/leaflet-vector-scalar-js.git" 9 | }, 10 | "scripts": { 11 | "serve": "vue-cli-service serve", 12 | "build": "vue-cli-service build", 13 | "lint": "vue-cli-service lint", 14 | "test": "vue-cli-service build --mode test", 15 | "publish": "vue-cli-service build && vue-cli-service build --mode test" 16 | }, 17 | "dependencies": { 18 | "@vant/touch-emulator": "^1.2.0", 19 | "axios": "^0.19.2", 20 | "core-js": "^3.6.4", 21 | "dateformat": "^3.0.3", 22 | "echarts": "^4.6.0", 23 | "element-ui": "^2.13.0", 24 | "heatmap.js": "^2.0.5", 25 | "html2canvas": "^1.0.0-rc.5", 26 | "leaflet": "^1.6.0", 27 | "leaflet-draw": "^1.0.4", 28 | "leaflet-echarts": "^0.2.1", 29 | "leaflet.motion": "^0.1.5", 30 | "moment": "^2.24.0", 31 | "qs": "^6.9.1", 32 | "register-service-worker": "^1.6.2", 33 | "store2": "^2.10.0", 34 | "vant": "^2.5.9", 35 | "view-design": "^4.1.3", 36 | "vue": "^2.6.11", 37 | "vue-echarts": "^4.1.0", 38 | "vue-router": "^3.1.5", 39 | "vue2-leaflet": "^2.5.2", 40 | "vuex": "^3.1.2" 41 | }, 42 | "devDependencies": { 43 | "@vue/cli-plugin-babel": "^4.2.0", 44 | "@vue/cli-plugin-eslint": "^4.2.0", 45 | "@vue/cli-plugin-pwa": "^4.2.0", 46 | "@vue/cli-service": "^4.2.0", 47 | "babel-eslint": "^10.0.3", 48 | "css-loader": "^3.4.2", 49 | "eslint": "^6.7.2", 50 | "eslint-plugin-vue": "^6.1.2", 51 | "less": "^2.7.3", 52 | "less-loader": "^4.1.0", 53 | "vue-template-compiler": "^2.6.11" 54 | }, 55 | "eslintConfig": { 56 | "root": true, 57 | "env": { 58 | "node": true 59 | }, 60 | "extends": [ 61 | "plugin:vue/essential", 62 | "eslint:recommended" 63 | ], 64 | "parserOptions": { 65 | "parser": "babel-eslint" 66 | }, 67 | "rules": {} 68 | }, 69 | "browserslist": [ 70 | "> 1%", 71 | "last 2 versions" 72 | ] 73 | } 74 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | 4 | function resolve(dir) { 5 | return path.join(__dirname, dir); 6 | } 7 | 8 | module.exports = { 9 | //部署应用包时的基本 URL 10 | publicPath:'./', 11 | //运行 vue-cli-service build 时生成的生产环境构建文件的目录 12 | outputDir:process.env.outputDir, 13 | //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 14 | assetsDir:'', 15 | indexPath:'index.html', 16 | pages: { 17 | index: { 18 | // page 的入口 19 | entry: 'src/main.js', 20 | // 模板来源 21 | template: 'public/index.html', 22 | // 在 dist/index.html 的输出 23 | filename: 'index.html', 24 | // 当使用 title 选项时， 25 | // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %> 26 | // title: 'Index Page', 27 | // 在这个页面中包含的块，默认情况下会包含 28 | // 提取出来的通用 chunk 和 vendor chunk。 29 | chunks: ['chunk-vendors', 'chunk-common', 'index'] 30 | }, 31 | // 当使用只有入口的字符串格式时， 32 | // 模板会被推导为 `public/subpage.html` 33 | // 并且如果找不到的话，就回退到 `public/index.html`。 34 | // 输出文件名会被推导为 `subpage.html`。 35 | // subpage: 'src/subpage/main.js' 36 | }, 37 | devServer: { 38 | host:'localhost', 39 | port:'8088', 40 | disableHostCheck: true, 41 | }, 42 | lintOnSave: process.env.NODE_ENV !== 'production', 43 | productionSourceMap:true, // 生产环境是否需要sourceMap 44 | 45 | chainWebpack: (config) => { 46 | 47 | config.resolve.alias 48 | .set("@", resolve("src")) 49 | .set("~", resolve(__dirname, "node_modules")) 50 | 51 | // .set("assets", resolve("src/assets")) 52 | // 53 | // .set("components", resolve("src/components")) 54 | // 55 | // .set("base", resolve("baseConfig")) 56 | // 57 | // .set("public", resolve("public")); 58 | 59 | }, 60 | // css: { 61 | // loaderOptions: { 62 | // less:{ 63 | // 64 | // }, 65 | // css: { 66 | // // 这里的选项会传递给 css-loader 67 | // }, 68 | // postcss: { 69 | // // 这里的选项会传递给 postcss-loader 70 | // } 71 | // } 72 | // }, 73 | transpileDependencies: [ 74 | 'vue-echarts', 75 | 'resize-detector' 76 | ] 77 | } 78 | -------------------------------------------------------------------------------- /src/plugins/zTree/css/demo.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 2 | margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;} 3 | body {color: #2f332a;font: 15px/21px Arial, Helvetica, simsun, sans-serif;background: #f0f6e4 \9;} 4 | h1, h2, h3, h4, h5, h6 {color: #2f332a;font-weight: bold;font-family: Helvetica, Arial, sans-serif;padding-bottom: 5px;} 5 | h1 {font-size: 24px;line-height: 34px;text-align: center;} 6 | h2 {font-size: 14px;line-height: 24px;padding-top: 5px;} 7 | h6 {font-weight: normal;font-size: 12px;letter-spacing: 1px;line-height: 24px;text-align: center;} 8 | a {color:#3C6E31;text-decoration: underline;} 9 | a:hover {background-color:#3C6E31;color:white;} 10 | input.radio {margin: 0 2px 0 8px;} 11 | input.radio.first {margin-left:0;} 12 | input.empty {color: lightgray;} 13 | code {color: #2f332a;} 14 | .highlight_red {color:#A60000;} 15 | .highlight_green {color:#A7F43D;} 16 | li {list-style: circle;font-size: 12px;} 17 | li.title {list-style: none;} 18 | ul.list {margin-left: 17px;} 19 | 20 | div.content_wrap {width: 600px;height:380px;} 21 | div.content_wrap div.left{float: left;width: 250px;} 22 | div.content_wrap div.right{float: right;width: 340px;} 23 | div.zTreeDemoBackground {width:250px;height:362px;text-align:left;} 24 | 25 | ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;} 26 | ul.log {border: 1px solid #617775;background: #f0f6e4;width:300px;height:170px;overflow: hidden;} 27 | ul.log.small {height:45px;} 28 | ul.log li {color: #666666;list-style: none;padding-left: 10px;} 29 | ul.log li.dark {background-color: #E3E3E3;} 30 | 31 | /* ruler */ 32 | div.ruler {height:20px; width:220px; background-color:#f0f6e4;border: 1px solid #333; margin-bottom: 5px; cursor: pointer} 33 | div.ruler div.cursor {height:20px; width:30px; background-color:#3C6E31; color:white; text-align: right; padding-right: 5px; cursor: pointer} -------------------------------------------------------------------------------- /src/components/progress/Progress.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 71 | 89 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | // 引入elementui 4 | import ElementUI from 'element-ui' 5 | import 'element-ui/lib/theme-chalk/index.css' 6 | // 引入iview 7 | import ViewUI from 'view-design'; 8 | import 'view-design/dist/styles/iview.css'; 9 | // 引入主题 10 | import router from './router' 11 | import store from './store' 12 | import http from './http' 13 | // import * as L from 'leaflet' 14 | import global from './config/index' 15 | // import 'leaflet/dist/leaflet.css'; 16 | import './assets/common.css'; 17 | import './registerServiceWorker' 18 | // 引入echarts 19 | import echarts from 'echarts' 20 | // 引入vue-echarts 21 | import ECharts from 'vue-echarts' 22 | import 'echarts/lib/component/tooltip' 23 | // 引入zTree 24 | import "./plugins/zTree/js/jquery-1.4.4.min.js"; 25 | import "./plugins/zTree/js/jquery.ztree.core.min.js"; 26 | import "./plugins/zTree/js/jquery.ztree.excheck.min.js"; 27 | import "./plugins/zTree/js/jquery.ztree.exhide.min.js"; 28 | // 引入leaflet.draw 29 | import 'leaflet-draw' 30 | import 'leaflet-draw/dist/leaflet.draw.css' 31 | // el-dialog 拖拽 32 | import './utils/dialogDrag' 33 | import vant from './plugins/vant' 34 | 35 | 36 | Vue.component('v-chart', ECharts) 37 | 38 | Vue.use(ElementUI); 39 | Vue.use(ViewUI); 40 | Vue.use(vant); 41 | 42 | Vue.config.productionTip = false; 43 | Vue.prototype.Global = global; 44 | // Vue.L = Vue.prototype.$L = L; // 全局注册leaflet 45 | Vue.prototype.$http = http; // 全局注册$http --> this.$http 46 | Vue.prototype.$echarts = echarts; // 全局注册echarts 47 | 48 | 49 | /*leaflet draw tooltips*/ 50 | L.drawLocal = { 51 | draw: { 52 | toolbar: {actions: { title: '取消绘制', text: '取消' }, finish: { title: '完成绘制', text: '完成' }, undo: { title: '删除最后绘制的点', text: '删除最后一点' }, buttons: { polyline: '画线', polygon: '画多边形', rectangle: '画矩形', circle: '画圆', marker: '画标记', circlemarker: '画圆形标记' } }, 53 | handlers: {circle: {tooltip: {start: '单击并拖动可绘制圆'}, radius: '半径'}, circlemarker: {tooltip: {start: '点击地图放置圆形标记'}}, marker: {tooltip: {start: '点击地图放置标记'}}, polygon: {tooltip: {start: '单击开始绘制多边形', cont: '单击以继续绘制多边形', end: '双击可完成多形形绘制'}}, polyline: {error: '异常: 形状边缘不能交叉!', tooltip: {start: '点击开始画线', cont: '单击以继续绘制线条', end: '双击完成线条绘制'}}, rectangle: {tooltip: {start: '单击并拖动以绘制矩形'}}, simpleshape: {tooltip: {end: '释放鼠标完成绘图'}}} 54 | }, 55 | edit: { 56 | toolbar: {actions: {save: {title: '保存改动', text: '保存'}, cancel: {title: '取消编辑，丢弃所有更改', text: '取消'}, clearAll: {title: '清除所有标记', text: '清除所有'}}, buttons: {edit: '编辑图层', editDisabled: '不需要编辑图层', remove: '删除图层', removeDisabled: '没有要删除的图层'}}, 57 | handlers: {edit: {tooltip: {text: '拖动节点或标记来编辑图形', subtext: '单击“取消”撤消更改'}}, remove: {tooltip: {text: '单击某个标记进行删除'}}}} 58 | }; 59 | 60 | 61 | 62 | 63 | /* leaflet icon */ 64 | delete L.Icon.Default.prototype._getIconUrl; 65 | L.Icon.Default.mergeOptions({ 66 | iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'), 67 | iconUrl: require('leaflet/dist/images/marker-icon.png'), 68 | shadowUrl: require('leaflet/dist/images/marker-shadow.png'), 69 | }); 70 | 71 | console.log(process.env) 72 | 73 | new Vue({ 74 | router, 75 | store, 76 | render: h => h(App) 77 | }).$mount('#app'); 78 | -------------------------------------------------------------------------------- /public/js/chinaProvider.js: -------------------------------------------------------------------------------- 1 | L.TileLayer.ChinaProvider = L.TileLayer.extend({ 2 | 3 | initialize: function(type, options) { // (type, Object) 4 | var providers = L.TileLayer.ChinaProvider.providers; 5 | 6 | var parts = type.split('.'); 7 | 8 | var providerName = parts[0]; 9 | var mapName = parts[1]; 10 | var mapType = parts[2]; 11 | 12 | var url = providers[providerName][mapName][mapType]; 13 | options.subdomains = providers[providerName].Subdomains; 14 | options.key = options.key || providers[providerName].key; 15 | L.TileLayer.prototype.initialize.call(this, url, options); 16 | } 17 | }); 18 | 19 | L.TileLayer.ChinaProvider.providers = { 20 | TianDiTu: { 21 | Normal: { 22 | Map: "http://t{s}.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}", 23 | Annotion: "http://t{s}.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}" 24 | }, 25 | Satellite: { 26 | Map: "http://t{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}", 27 | Annotion: "http://t{s}.tianditu.com/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}" 28 | }, 29 | Terrain: { 30 | Map: "http://t{s}.tianditu.com/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}", 31 | Annotion: "http://t{s}.tianditu.com/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk={key}" 32 | }, 33 | Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], 34 | key: "174705aebfe31b79b3587279e211cb9a" 35 | }, 36 | 37 | GaoDe: { 38 | Normal: { 39 | Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}' 40 | }, 41 | Satellite: { 42 | Map: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', 43 | Annotion: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}' 44 | }, 45 | Subdomains: ["1", "2", "3", "4"] 46 | }, 47 | 48 | Google: { 49 | Normal: { 50 | Map: "http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}" 51 | }, 52 | Satellite: { 53 | Map: "http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}", 54 | Annotion:"https://ditu.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i413113259!3m12!2szh-CN!3sCN!5e18!12m4!1e68!2m2!1sset!2sRoadmapSatellite!12m3!1e37!2m1!1ssmartmaps!4e0!23i1301875&token=59227" 55 | }, 56 | Subdomains: [] 57 | }, 58 | 59 | Geoq: { 60 | Normal: { 61 | Map: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}", 62 | PurplishBlue: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}", 63 | Gray: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}", 64 | Warm: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}", 65 | }, 66 | Theme: { 67 | Hydro: "http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}" 68 | }, 69 | Subdomains: [] 70 | }, 71 | 72 | OSM: { 73 | Normal: { 74 | Map: "http://{s}.tile.osm.org/{z}/{x}/{y}.png", 75 | }, 76 | Subdomains: ['a', 'b', 'c'] 77 | } 78 | 79 | }; 80 | 81 | L.tileLayer.chinaProvider = function(type, options) { 82 | return new L.TileLayer.ChinaProvider(type, options); 83 | }; -------------------------------------------------------------------------------- /src/config/index.js: -------------------------------------------------------------------------------- 1 | import Store from 'store2'; 2 | 3 | /** 4 | * 常量配置项 5 | */ 6 | 7 | // 天地图 底图 8 | const TDT = [ 9 | ['vec_w','vec','w'], 10 | ['cva_w','cva','w'], 11 | ['img_w','img','w'], 12 | ['cia_w','cia','w'], 13 | ['cta_w','cta','w'], 14 | ['ibo_w','ibo','w'], 15 | ['eia_w','eia','w'], 16 | ['eva_w','eva','w'], 17 | ['cva_w','cva','w'], 18 | ] 19 | // 天地图 底图 随机数 20 | // const Num = Math.floor(Math.random() * 8) 21 | const Num = 2; 22 | 23 | export default { 24 | /** 25 | * 26 | * 项目 请求及跳转时 所用地址 开始 27 | * 开发环境对应文件 .env.development 28 | * 测试环境对应文件 .env.test 29 | * 生产环境对应文件 .env.production 30 | * ==== 测试环境及生产环境文件在开发过程中 请勿改动 !!! === 31 | */ 32 | 33 | // server url 34 | serverUrl:process.env.VUE_APP_SERVER_URL, 35 | // url 36 | baseURL: process.env.VUE_APP_BASE_URL , 37 | // Ops Service类接口地址 38 | authURL: process.env.VUE_APP_AUTH_URL , 39 | 40 | /** 41 | * 项目 请求及跳转时 所用地址 结束 42 | */ 43 | 44 | // 请求的失效时间 45 | httpTimeout: 60000, 46 | // 用户信息 47 | setUserInfo: function(userInfo) { 48 | Store.session('userInfo', userInfo) 49 | }, 50 | getUserInfo: function() { 51 | return Store.session('userInfo') 52 | // return {username: 'admin'} 53 | }, 54 | getLn: function() { 55 | return this.getCookie('ln') 56 | }, 57 | getCookie: function(cookieName) { 58 | if (document.cookie.length > 0) { 59 | let start = document.cookie.indexOf(cookieName + '=') 60 | if (start !== -1) { 61 | start = start + cookieName.length + 1 62 | let end = document.cookie.indexOf(';', start) 63 | if (end === -1) end = document.cookie.length 64 | return document.cookie.substring(start, end) 65 | } 66 | } 67 | return null 68 | }, 69 | 70 | // ==== leaflet map===== 71 | map:{ 72 | 73 | // 地图底图 74 | mapSource:{ 75 | A:"http://{s}.tile.osm.org/{z}/{x}/{y}.png", 76 | B:'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 77 | C:'http://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', 78 | blue:'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', 79 | almap:"http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}", // 高德底图 80 | esri:'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', // 高德底图 81 | TianDiTu:`http://t0.tianditu.gov.cn/${TDT[Num][0]}/wmts?layer=${TDT[Num][1]}&style=default&tilematrixset=${TDT[Num][2]}&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=099824dfa2a57512929e6b9d3c6b0eaa`, 82 | }, 83 | zoom:5, //默认缩放 84 | minZoom: 4, //最小绽放层级 85 | maxZoom: 20,//最大绽放层级z 86 | center:[ 30.56226095049944, 108.14941406250001], // 默认地图中心 87 | heatmapConfg:{ // 热力图配置 88 | 'radius': 0.4, 89 | 'maxOpacity': 0.75, 90 | "minOpacity":0, 91 | 'scaleRadius': true, 92 | 'useLocalExtrema': false, 93 | 'blur':1, 94 | latField: 'a', 95 | lngField: 'o', 96 | valueField: 'v', 97 | gradient: { 98 | "0": "rgba(90,86,143,1)", 99 | "0.1": "rgba(72,104,181,1)", 100 | "0.2": "rgba(69,151,168,1)", 101 | "0.3": "rgba(81,180,98,1)", 102 | "0.4": "rgba(106,192,82,1)", // 颜色过渡 103 | "0.5": "rgba(177,209,67,1)", // 颜色过渡 104 | "0.6": "rgba(215,206,60,1)", // 颜色过渡 105 | "0.7": "rgba(214,172,64,1)", // 颜色过渡 106 | "0.8": "rgba(213,137,72,1)", // 颜色过渡 107 | "0.85": "rgba(205,94,93,1)", // 颜色过渡 108 | "0.9": "rgba(144,28,79,1)", // 颜色过渡 109 | "0.99": "rgba(43,0,1,1)" // 颜色过渡 110 | } 111 | }, 112 | customIcon:{ 113 | iconSize:[20,20], 114 | iconAnchor:[10,10] 115 | } 116 | }, 117 | typhoon: { 118 | legendList: [{color: '#00fedf', name: '热带低压(TD)', type: 'fill'}, {color: '#fff45c', name: '热带风暴(TS)', type: 'fill'}, {color: '#fe902c', name: '强热带风暴(STS)', type: 'fill'}, {color: '#fe0404', name: '台风(TY)', type: 'fill'}, {color: '#fe3aa3', name: '强台风(STY)', type: 'fill'}, {color: '#ae00d9', name: '超强台风(Super TY)', type: 'fill'}, {color: '174, 0, 217', name: '12级风圈', type: 'noFill'}, {color: '254, 144, 44', name: '10级风圈', type: 'noFill'}, {color: '255, 244, 92', name: '7级风圈', type: 'noFill'}] 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /public/js/leaflet-typhoon.min.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | L.Typhoon = L.Polygon.extend({ 3 | initialize: function (t, e, i) { 4 | L.Polygon.prototype.initialize.call(this, e), this._latlng = L.latLng(t), this._circle = e,this._style = i; 5 | }, 6 | options: {fill: !0}, 7 | projectLatlngs: function () { 8 | try { 9 | var e = this._latlng; 10 | this._point = this._map.latLngToLayerPoint(e); 11 | var t_northeast = this._getLngRadius(this._getLatRadius(this._circle.ne * 1000)), 12 | i_northeast = this._map.latLngToLayerPoint([e.lat, e.lng - t_northeast]); 13 | this._radius_northeast = Math.max(this._point.x - i_northeast.x, 1); 14 | var t_southeast = this._getLngRadius(this._getLatRadius(this._circle.se * 1000)), 15 | i_southeast = this._map.latLngToLayerPoint([e.lat, e.lng - t_southeast]); 16 | this._radius_southeast = Math.max(this._point.x - i_southeast.x, 1); 17 | var t_southwest = this._getLngRadius(this._getLatRadius(this._circle.sw * 1000)), 18 | i_southwest = this._map.latLngToLayerPoint([e.lat, e.lng - t_southwest]); 19 | this._radius_southwest = Math.max(this._point.x - i_southwest.x, 1); 20 | var t_northwest = this._getLngRadius(this._getLatRadius(this._circle.nw * 1000)), 21 | i_northwest = this._map.latLngToLayerPoint([e.lat, e.lng - t_northwest]); 22 | this._radius_northwest = Math.max(this._point.x - i_northwest.x, 1) 23 | } catch (e) { 24 | this._radius_northeast = null; 25 | this._radius_southeast = null; 26 | this._radius_southwest = null; 27 | this._radius_northwest = null 28 | } 29 | }, 30 | getTyphoonPath: function () { 31 | if (this._radius_northeast && this._radius_southeast && this._radius_southwest && this._radius_northwest) { 32 | var t = this._point; 33 | var e_northeast = this._radius_northeast; 34 | var path_svg = "M" + t.x + "," + (t.y - e_northeast); 35 | var path_vml = "M" + t.x + "," + (t.y - e_northeast); 36 | path_svg += "A" + e_northeast + "," + e_northeast + ",0,0,1," + (t.x + e_northeast) + "," + t.y; 37 | path_vml += " ae " + t.x + "," + t.y + " " + e_northeast + "," + e_northeast + " " + 65535 * 450 + "," + -5898150; 38 | var e_southeast = this._radius_southeast; 39 | path_svg += "L" + (t.x + e_southeast) + "," + t.y; 40 | path_svg += "A" + e_southeast + "," + e_southeast + ",0,0,1," + t.x + "," + (t.y + e_southeast); 41 | path_vml += " ae " + t.x + "," + t.y + " " + e_southeast + "," + e_southeast + " " + 65535 * 360 + "," + -5898150; 42 | var e_southwest = this._radius_southwest; 43 | path_svg += "L" + t.x + "," + (t.y + e_southwest); 44 | path_svg += "A" + e_southwest + "," + e_southwest + ",0,0,1," + (t.x - e_southwest) + "," + t.y; 45 | path_vml += " ae " + t.x + "," + t.y + " " + e_southwest + "," + e_southwest + " " + 65535 * 270 + "," + -5898150; 46 | var e_northwest = this._radius_northwest; 47 | path_svg += "L" + (t.x - e_northwest) + "," + t.y; 48 | path_svg += "A" + e_northwest + "," + e_northwest + ",0,0,1," + t.x + "," + (t.y - e_northwest) + "z"; 49 | path_vml += " ae " + t.x + "," + t.y + " " + e_northwest + "," + e_northwest + " " + 65535 * 180 + "," + -5898150 + "X"; 50 | this.svgPath = L.Browser.svg ? path_svg : path_vml 51 | return L.Browser.svg ? path_svg : path_vml 52 | } 53 | return "" 54 | }, 55 | beforeAdd: function (map) { 56 | // Renderer is set here because we need to call renderer.getEvents 57 | // before this.getEvents. 58 | this._renderer = map.getRenderer(this); 59 | }, 60 | 61 | onAdd: function (map) { 62 | this.projectLatlngs(); 63 | this.getTyphoonPath(); 64 | this._renderer._initPath(this); 65 | this._reset(); 66 | this._path.setAttribute('d',this.svgPath); 67 | this._renderer._addPath(this); 68 | this._setStyle(this._style); 69 | }, 70 | 71 | _setStyle: function (style) { 72 | L.setOptions(this, style); 73 | if (this._renderer) { 74 | this._renderer._updateStyle(this); 75 | } 76 | return this; 77 | }, 78 | _getLatRadius: function (r) { 79 | return r / 40075017 * 360 80 | }, 81 | _getLngRadius: function (lr) { 82 | return lr / Math.cos(Math.PI / 180 * this._latlng.lat) 83 | } 84 | }); 85 | 86 | L.typhoon = function (t, e, i) { 87 | return new L.Typhoon(t, e, i) 88 | } 89 | 90 | })(); -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 48 | 70 | 171 | 174 | -------------------------------------------------------------------------------- /src/plugins/zTree/js/jquery.ztree.exhide.min.js: -------------------------------------------------------------------------------- 1 | !function(e){var i={view:{clearOldFirstNode:function(e,i){for(var o=i.getNextNode();o;){if(o.isFirstNode){o.isFirstNode=!1,c.setNodeLineIcos(e,o);break}if(o.isLastNode)break;o=o.getNextNode()}},clearOldLastNode:function(e,i,o){for(var d=i.getPreNode();d;){if(d.isLastNode){d.isLastNode=!1,o&&c.setNodeLineIcos(e,d);break}if(d.isFirstNode)break;d=d.getPreNode()}},makeDOMNodeMainBefore:function(e,i,o){var d=h.isHidden(i,o);e.push("
  • ")},showNode:function(e,i,o){h.isHidden(e,i,!1),h.initShowForExCheck(e,i),d(i,e).show()},showNodes:function(e,i,o){if(i&&0!=i.length){var d,t,n={};for(d=0,t=i.length;d dark background 14 | @color-normal: white; 15 | // Background color 16 | @color-bg: #af0000; 17 | // Highlight color 18 | @color-highlight: yellow; 19 | // Partially selected (checkboxes, radio buttons) 20 | @color-partial: #aaaaaa; 21 | // Partially selected and focused (checkboxes, radio buttons) 22 | @color-partfocus: #cad96c; 23 | // Disabled altogether 24 | @color-disabled: #808080; 25 | // Editing color 26 | @color-edit: yellow; 27 | @w: 15px; 28 | @h: 17px; 29 | @pad-left: 2px; 30 | @pad-top: 10px; 31 | /* End of Definitions ---------------*/ 32 | 33 | /* Imports -------------------------*/ 34 | @import "fa.less"; 35 | /* End of Imports ------------------*/ 36 | 37 | .ztree * {padding:0; margin:0; font-size:@font-size; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif; background-color: @color-bg;} 38 | .ztree { 39 | margin:0; padding:5px; color:@color-normal; background-color: @color-bg; 40 | li { 41 | padding:0; margin:0; list-style:none; line-height:17px; text-align:left; white-space:nowrap; outline:0; 42 | ul { 43 | margin: 0px; padding:0 0 0 18px; 44 | } 45 | ul.line { } 46 | a {padding-right:3px; margin:0; cursor:pointer; height:@h; color:@color-normal; background-color: transparent; 47 | text-decoration:none; vertical-align:top; display: inline-block; 48 | input.rename {height:14px; width:80px; padding:0; margin:0; 49 | color: @color-bg; background-color: @color-normal; 50 | font-size:@font-size; border:1px #585956 solid; *border:0px} 51 | } 52 | a:hover {text-decoration:underline} 53 | a.curSelectedNode {padding-top:0px; background-color:#af4040; color:@color-highlight; height:@h; opacity:0.8;} 54 | a.curSelectedNode_Edit {padding-top:0px; background-color:transparent; color:@color-highlight; height:@h; border:1px #666 solid; opacity:0.8;} 55 | a.tmpTargetNode_inner {padding-top:0px; background-color:#aaa; color:@color-highlight; height:@h; border:1px #666 solid; 56 | opacity:0.8; filter:alpha(opacity=80)} 57 | a.tmpTargetNode_prev {} 58 | a.tmpTargetNode_next {} 59 | span {line-height:@h; margin-right:2px; background-color:transparent;} 60 | span.button {line-height:0; margin:0; padding: 0; width:@w; height:@h; display: inline-block; vertical-align:top; 61 | border:0px solid; cursor: pointer;outline:none; 62 | background-color:transparent; background-repeat:no-repeat; background-attachment: scroll; 63 | 64 | &::before{color: @color-normal; font-family: FontAwesome; padding-top:@pad-top;} 65 | &.chk { margin:0px; cursor: auto; width: 12px; 66 | display: inline-block;padding-top:@pad-top;padding-left:@pad-left; 67 | 68 | &.checkbox_false_full::before {content: @fa-square-o;} 69 | &.checkbox_false_full_focus::before {content: @fa-square-o; color:@color-highlight;} 70 | &.checkbox_false_part::before {content: @fa-square-o;color: @color-partial;} 71 | &.checkbox_false_part_focus::before {content: @fa-square-o; color:@color-partfocus;} 72 | &.checkbox_false_disable::before {content: @fa-square-o; color:@color-disabled;} 73 | &.checkbox_true_full::before {content: @fa-check-square-o;} 74 | &.checkbox_true_full_focus::before {content: @fa-check-square-o;} 75 | &.checkbox_true_part::before {content: @fa-check-square;} 76 | &.checkbox_true_part_focus::before {content: @fa-check-square; color: @color-highlight} 77 | &.checkbox_true_full_focus::before {content: @fa-check-square-o; color: @color-highlight} 78 | &.checkbox_true_part::before {content: @fa-check-square-o;color: @color-partial} 79 | &.checkbox_true_part_focus::before {content: @fa-check-square-o;color: @color-partfocus;} 80 | &.checkbox_true_disable::before {content: @fa-check-square-o;color: @color-disabled} 81 | 82 | &.radio_false_full::before {content: @fa-circle-o;} 83 | &.radio_false_full_focus::before {content: @fa-circle-o;color: @color-highlight} 84 | &.radio_false_part::before {content: @fa-circle-o;color: @color-partial} 85 | &.radio_false_part_focus::before {content: @fa-circle-o;color: @color-highlight} 86 | &.radio_false_disable::before {content: @fa-circle-thin;color: @color-disabled} 87 | &.radio_true_full::before {content: @fa-dot-circle-o;} 88 | &.radio_true_full_focus::before {content: @fa-dot-circle-o;color: @color-highlight} 89 | &.radio_true_part::before {content: @fa-dot-circle-o;color: @color-partial} 90 | &.radio_true_part_focus::before {content: @fa-dot-circle-o;color: @color-partial;} 91 | &.radio_true_disable::before {content: @fa-circle-thin;color: @color-disabled} 92 | 93 | } 94 | &.switch {width:@w; height:@h} 95 | &.root_open::before{content: @fa-chevron-down;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;} 96 | &.root_close::before{content: @fa-chevron-right;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;} 97 | &.roots_open::before{content: @fa-chevron-down;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;} 98 | &.roots_close::before{content: @fa-chevron-right;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;} 99 | &.center_open::before{content: @fa-chevron-down;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;} 100 | &.center_close::before{content: @fa-chevron-right;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;} 101 | &.bottom_open::before{content: @fa-chevron-down;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;} 102 | &.bottom_close::before{content: @fa-chevron-right;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;} 103 | &.noline_open{} 104 | &.noline_close{} 105 | &.root_docu{ background:none;} 106 | &.roots_docu::before{content: @fa-list-alt;padding-left:@pad-left;display: inline-block;color:@color-normal;} 107 | &.center_docu::before{padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;} 108 | &.bottom_docu::before{padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;} 109 | &.noline_docu{ background:none;} 110 | 111 | &.ico_open::before {content: @fa-folder-open-o;font-family: FontAwesome;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;} 112 | &.ico_close::before {content: @fa-folder-o;font-family: FontAwesome;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;} 113 | &.ico_docu::before{content: @fa-list-alt;font-family: FontAwesome;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;} 114 | 115 | &.edit {margin-left:4px; margin-right: -1px; vertical-align:top; *vertical-align:middle;padding-top:@pad-top;} 116 | &.edit::before{content: @fa-pencil-square-o;font-family: FontAwesome;} 117 | 118 | &.remove {margin-left:4px; margin-right: -1px; vertical-align:top; *vertical-align:middle;padding-top:@pad-top;} 119 | &.remove::before{content: @fa-trash;font-family: FontAwesome;} 120 | 121 | 122 | &.add {margin-left:4px; margin-right: -1px; vertical-align:top; *vertical-align:middle;padding-top:@pad-top;} 123 | &.add::before{content: @fa-plus;font-family: FontAwesome;} 124 | 125 | &.ico_loading{margin-right:2px; background:url(./img/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle} 126 | } 127 | 128 | } 129 | } 130 | 131 | 132 | ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)} 133 | 134 | // this is the arrow that moves 135 | span.tmpzTreeMove_arrow{width:16px; height:@h; display: inline-block; 136 | padding:0; margin:2px 0 0 1px; border:0 none; position:absolute; 137 | background-color:transparent; background-attachment: scroll; 138 | } 139 | span.tmpzTreeMove_arrow::before{content: @fa-play;font-family: FontAwesome;color: @color-highlight; 140 | } 141 | // outline 142 | 143 | ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden; 144 | background-color:#cfcfcf; border:1px @color-highlight dotted; opacity:0.8; filter:alpha(opacity=80)} 145 | .ztreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute} 146 | 147 | -------------------------------------------------------------------------------- /src/components/zTree/ZTree.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 236 | 237 | 252 | 260 | -------------------------------------------------------------------------------- /src/http/index.js: -------------------------------------------------------------------------------- 1 | import config from '../config' 2 | import axios from 'axios' 3 | import Qs from 'qs' 4 | import {Message,MessageBox} from 'element-ui' 5 | import router from '@/router' 6 | import store from '@/store' 7 | import Store from 'store2' 8 | 9 | axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8'; 10 | axios.defaults.crossDomain = true; 11 | axios.defaults.withCredentials = true; //设置cross跨域 并设置访问权限 允许跨域携带cookie信息 12 | axios.defaults.headers.common['Authorization'] = ''; // 设置请求头为 Authorization 13 | axios.defaults.timeout = config.httpTimeout; // 请求的失效时间 14 | 15 | 16 | // http response 拦截器 17 | axios.interceptors.response.use( 18 | (response) => { 19 | //拦截响应，做统一处理 20 | if (response.data.code > -1) { 21 | if (response.data.data == [] && response.data.data == ''){ 22 | // Message({ 23 | // type:'warning', 24 | // message:'数据获取失败,请稍后重试', 25 | // center:true, 26 | // offset:300 27 | // }) 28 | return Promise.resolve(response) 29 | }else{ 30 | return Promise.resolve(response) 31 | } 32 | }else { 33 | if (response.data.code == -2) { 34 | MessageBox.confirm('您未登录！请先登录后,再进行操作。是否登录?', '提示', { 35 | confirmButtonText: '登录', 36 | cancelButtonText: '取消', 37 | type: 'warning', 38 | center: true 39 | }).then(() => { 40 | store.commit('moduleSystem/SHOW_LOGIN_REGISTER') 41 | }).catch((e) => { 42 | console.log(e); 43 | }); 44 | return Promise.resolve(response) 45 | } else if (response.data.code == -1) { 46 | // Message.error('未查询到数据,请重新选择时间',{ 47 | // center:true, 48 | // top:500 49 | // }) 50 | return Promise.resolve(response) 51 | } else { 52 | return Promise.resolve(response) 53 | } 54 | } 55 | store.commit('moduleMap/SET_LAYER_FLAG',true) 56 | }, 57 | //接口错误状态处理，也就是说无响应时的处理 58 | (error) => { 59 | return Promise.reject(error.response.status) // 返回接口返回的错误信息 60 | }) 61 | 62 | 63 | 64 | // 重写 get post fromData 65 | export default { 66 | /** 67 | * get方法，对应get请求 68 | * @param {String} url [请求的url地址] 69 | * @param {Object} params [请求时携带的参数] 70 | */ 71 | get(url, params) { 72 | axios.defaults.baseURL = config.baseURL; 73 | try { 74 | return new Promise((resolve, reject) => { 75 | axios.get(url, { 76 | params: params 77 | }).then((d) => { 78 | // console.log('get===>',d) 79 | resolve(d.data) 80 | }).catch(err => { 81 | reject(err) 82 | }) 83 | }) 84 | } 85 | catch (e) { 86 | console.log(e) 87 | } 88 | }, 89 | /** 90 | * delete方法，对应delete请求 91 | * @param {String} url [请求的url地址] 92 | * @param {Object} params [请求时携带的参数] 93 | */ 94 | delete(url, params) { 95 | axios.defaults.baseURL = config.baseURL; 96 | return new Promise((resolve, reject) => { 97 | axios.delete(url, { 98 | params: params 99 | }).then(res => { 100 | // console.log('get===>',res) 101 | resolve(res.data) 102 | }).catch(err => { 103 | reject(err) 104 | }) 105 | }).catch((e) => {}) 106 | }, 107 | /** 108 | * post方法，对应post请求 109 | * @param {String} url [请求的url地址] 110 | * @param {Object} params [请求时携带的参数] 111 | */ 112 | post(url, params) { 113 | axios.defaults.baseURL = config.baseURL; 114 | return new Promise((resolve, reject) => { 115 | axios.post(url, Qs.stringify(params)) 116 | .then(res => { 117 | resolve(res.data) 118 | }) 119 | .catch(err => { 120 | reject(err) 121 | }) 122 | }).catch((e) => {}) 123 | }, 124 | listPost(url, params) { 125 | axios.defaults.baseURL = config.baseURL; 126 | return new Promise((resolve, reject) => { 127 | axios.post(url, params) 128 | .then(res => { 129 | resolve(res.data) 130 | }) 131 | .catch(err => { 132 | reject(err) 133 | }) 134 | }).catch((e) => {}) 135 | }, 136 | /** 137 | * formData，对应post请求，用来提交文件+数据 138 | * @param {String} url [请求的url地址] 139 | * @param {Object} params [请求时携带的参数] 140 | */ 141 | formData(url, params) { 142 | axios.defaults.baseURL = config.baseURL; 143 | return new Promise((resolve, reject) => { 144 | axios({ 145 | headers: { 146 | 'Content-Type': 'multipart/form-data'// ;boundary=----WebKitFormBoundaryQ6d2Qh69dv9wad2u 147 | }, 148 | transformRequest: [function (data) { // 在请求之前对data传参进行格式转换 149 | const formData = new FormData() 150 | Object.keys(data).forEach(key => { 151 | formData.append(key, data[key]) 152 | }) 153 | return formData 154 | }], 155 | url, 156 | method: 'post', 157 | data: params 158 | }).then(res => { 159 | resolve(res.data) 160 | }).catch(err => { 161 | reject(err) 162 | }) 163 | }).catch((e) => {}) 164 | }, 165 | /** 166 | * formData，对应post请求，用来提交文件+数据 167 | * @param {String} url [请求的url地址] 168 | * @param {Object} params [请求时携带的参数] 169 | */ 170 | formDataAuth(url, params) { 171 | axios.defaults.baseURL = config.authURL; 172 | return new Promise((resolve, reject) => { 173 | axios({ 174 | headers: { 175 | 'Content-Type': 'multipart/form-data'// ;boundary=----WebKitFormBoundaryQ6d2Qh69dv9wad2u 176 | }, 177 | transformRequest: [function (data) { // 在请求之前对data传参进行格式转换 178 | const formData = new FormData() 179 | Object.keys(data).forEach(key => { 180 | formData.append(key, data[key]) 181 | }) 182 | return formData 183 | }], 184 | url, 185 | method: 'post', 186 | data: params 187 | }).then(res => { 188 | resolve(res.data) 189 | }).catch(err => { 190 | reject(err) 191 | }) 192 | }).catch((e) => {}) 193 | }, 194 | /** 195 | * post方法，对应post请求，用于系统类接口使用 196 | * @param {String} url [请求的url地址] 197 | * @param {Object} params [请求时携带的参数] 198 | */ 199 | systemPost(url, params) { 200 | axios.defaults.baseURL = config.authURL 201 | return new Promise((resolve, reject) => { 202 | axios.post(url, Qs.stringify(params)) 203 | .then(res => { 204 | resolve(res.data) 205 | }) 206 | .catch(err => { 207 | reject(err) 208 | }) 209 | }).catch((e) => {}) 210 | }, 211 | /** 212 | * post方法，对应post请求，用于系统类接口使用 213 | * @param {String} url [请求的url地址] 214 | * @param {Object} params [请求时携带的参数] 215 | */ 216 | systemGet(url, params) { 217 | axios.defaults.baseURL = config.authURL; 218 | return new Promise((resolve, reject) => { 219 | axios.get(url, { 220 | params: params 221 | }).then(res => { 222 | resolve(res.data) 223 | }).catch(err => { 224 | reject(err) 225 | }) 226 | }).catch((e) => {}) 227 | }, 228 | /** 229 | * formData，对应post请求，用于系统类接口使用 230 | * @param {String} url [请求的url地址] 231 | * @param {Object} params [请求时携带的参数] 232 | */ 233 | systemForm(url, params) { 234 | axios.defaults.baseURL = config.authURL 235 | return new Promise((resolve, reject) => { 236 | axios({ 237 | headers: { 238 | 'Content-Type': 'multipart/form-data'// ;boundary=----WebKitFormBoundaryQ6d2Qh69dv9wad2u 239 | }, 240 | transformRequest: [function (data) { // 在请求之前对data传参进行格式转换 241 | const formData = new FormData() 242 | Object.keys(data).forEach(key => { 243 | formData.append(key, data[key]) 244 | }) 245 | return formData 246 | }], 247 | url, 248 | method: 'post', 249 | data: params 250 | }).then(res => { 251 | resolve(res.data) 252 | }).catch(err => { 253 | reject(err) 254 | }) 255 | }).catch((e) => {}) 256 | }, 257 | /** 258 | * systemPut，对应Put请求，用于系统类接口使用 259 | * @param {String} url [请求的url地址] 260 | * @param {Object} params [请求时携带的参数] 261 | */ 262 | systemPut(url, params) { 263 | axios.defaults.baseURL = config.authURL 264 | return new Promise((resolve, reject) => { 265 | axios({ 266 | headers: { 267 | 'Content-Type': 'multipart/form-data'// ;boundary=----WebKitFormBoundaryQ6d2Qh69dv9wad2u 268 | }, 269 | transformRequest: [function (data) { // 在请求之前对data传参进行格式转换 270 | const formData = new FormData() 271 | Object.keys(data).forEach(key => { 272 | formData.append(key, data[key]) 273 | }) 274 | return formData 275 | }], 276 | url, 277 | method: 'put', 278 | data: params 279 | }).then(res => { 280 | resolve(res.data) 281 | }).catch(err => { 282 | reject(err) 283 | }) 284 | }).catch((e) => {}) 285 | }, 286 | /** 287 | * put方法，对应put请求 288 | * @param {String} url [请求的url地址] 289 | * @param {Object} params [请求时携带的参数] 290 | */ 291 | put(url, params) { 292 | axios.defaults.baseURL = config.baseURL; 293 | return new Promise((resolve, reject) => { 294 | axios({ 295 | headers: { 296 | 'Content-Type': 'multipart/form-data'// ;boundary=----WebKitFormBoundaryQ6d2Qh69dv9wad2u 297 | }, 298 | transformRequest: [function (data) { // 在请求之前对data传参进行格式转换 299 | const formData = new FormData() 300 | Object.keys(data).forEach(key => { 301 | formData.append(key, data[key]) 302 | }) 303 | return formData 304 | }], 305 | url, 306 | method: 'put', 307 | data: params 308 | }).then(res => { 309 | resolve(res.data) 310 | }).catch(err => { 311 | reject(err) 312 | }) 313 | }).catch((e) => {}) 314 | }, 315 | } 316 | -------------------------------------------------------------------------------- /src/utils/util.js: -------------------------------------------------------------------------------- 1 | import moment from 'moment' 2 | import html2canvas from 'html2canvas' 3 | /** 4 | * 5 | * 公用方法 6 | */ 7 | 8 | const WEEKS = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'] // 星期表 9 | const OBJECT_CONSTRUCOTR_NAME = ['Array','String','Object','Number','Function','Date','RegExp','Symbol','Boolean','Math'] 10 | 11 | // 判断 对象是否为原生 类型 12 | export const checkNavtiveClass = (obj) =>{ 13 | let name = obj.constructor.name; 14 | return OBJECT_CONSTRUCOTR_NAME.includes(name) 15 | } 16 | 17 | 18 | 19 | 20 | // 格式化管线 经纬 数据 21 | export const formatPipeLine = (data) =>{ 22 | let list = data.split(';'); 23 | let arr = [] 24 | list.forEach((v,i) =>{ 25 | let item = v.split(','); 26 | if (item instanceof Array && item.length == 2){ 27 | arr.push(item); 28 | } 29 | }) 30 | return arr; 31 | } 32 | 33 | 34 | // 格式化 时间轴 小时 和 星期 35 | 36 | export const formatDateForTimeline = (date,t) => { 37 | const n = t || 24 * 7 38 | const D = date || '2018/03/01' 39 | const D1 = moment(new Date()).add('year',0).format("YYYY/MM/DD") 40 | let arr = {},arr1 = {},arr2 = [] 41 | let d = new Date(new Date(D).toLocaleDateString()).getTime(); 42 | let d1 = new Date(new Date(D1).toLocaleDateString()).getTime(); 43 | for (let i = 0; i <= n; i++) { 44 | // let obj = {}; 45 | arr[i] = d.toString(); 46 | arr1[i] = d1.toString(); 47 | if(i != 0 && i % 23 == 0){ 48 | arr2.push(moment(new Date(+arr[i])).format('MM/DD')) // 显示年月日 49 | // arr2.push(WEEKS[new Date(d).getDay()]) 50 | } 51 | d += 3600000; 52 | d1 += 3600000; 53 | } 54 | return { 55 | time:arr, // 最小时间间隔 56 | time1: arr1, 57 | week:arr2 // 星期几 58 | } 59 | } 60 | 61 | // 海区风险时间轴 62 | export const formatDateForRiskTimeline = (start, end) => { 63 | console.log('时间格式化：') 64 | let arr = {}, allDats = [], i = 0 65 | const startTime = getDate(start); 66 | const endTime = getDate(end); 67 | while((endTime.getTime()-startTime.getTime())>=0){ 68 | const year = startTime.getFullYear(); 69 | const month = (startTime.getMonth()+1).toString().length==1?"0"+(startTime.getMonth()+1).toString():(startTime.getMonth()+1).toString(); 70 | const day = startTime.getDate().toString().length==1?"0"+startTime.getDate():startTime.getDate(); 71 | const hour = startTime.getHours().toString().length==1?"0"+startTime.getHours():startTime.getHours(); 72 | allDats[i]=year+"/"+month+"/"+day; 73 | startTime.setDate(startTime.getDate()+1); 74 | i+=1; 75 | } 76 | const days = getDays(allDats) 77 | console.log('days', days) 78 | const n = allDats.length * 24 79 | let d = new Date(new Date(start).toLocaleDateString()).getTime(); 80 | for (let i = 0; i <= n; i++) { 81 | arr[i] = d.toString(); 82 | d += 3600000; 83 | } 84 | return { 85 | time:arr, // 最小时间间隔 86 | days:days, // 日期 87 | max: n 88 | } 89 | } 90 | // 航线风险时间轴 91 | export const formatDateForLineRiskTimeline = (start, days) => { 92 | const n = days.length 93 | let arr = {}, formdays = [] 94 | let d = moment(start).valueOf() 95 | 96 | for (let i = 0; i < n; i++) { 97 | arr[i] = moment(days[i]+':00:00').valueOf() 98 | formdays.push(moment(days[i]+':00:00').format("MM/DD HH")) 99 | } 100 | // console.log('=-======', arr) 101 | const newDays = getDays(formdays) 102 | // console.log('newDays', newDays) 103 | return { 104 | time:arr, // 最小时间间隔 105 | days:newDays, // 日期 106 | max: n 107 | } 108 | } 109 | // 均等分时间轴日期数 110 | const getDays = (arr) => { 111 | let newArr = [], step = Math.round(arr.length / 7) 112 | for (let i = 0; i < 7; i++) { 113 | if (i === 6) { 114 | newArr.push(arr[arr.length - 1]) 115 | } else { 116 | let index = i * step 117 | newArr.push(arr[index]) 118 | } 119 | } 120 | return newArr 121 | } 122 | const getDate = (datestr) =>{ 123 | const temp = datestr.split("-"); 124 | return new Date(temp[0],temp[1]-1,temp[2]); 125 | } 126 | //经纬度转换成度分秒 127 | 128 | export const latlngChangeToDMS = (value) => { 129 | if (value == ''){ 130 | return ['','',''] 131 | }else{ 132 | if(!isNaN(Number(value))){ 133 | value = Math.abs(value); 134 | var v1 = Math.floor(value);//度 135 | var v2 = Math.floor((value - v1) * 60);//分 136 | var v3 = Math.round((value - v1) * 3600 % 60);//秒 137 | return [v1 ,v2, v3 ]; 138 | } 139 | } 140 | 141 | } 142 | // 度分秒转为经纬度 143 | export const DMSChangetoLatlng = (value) =>{ 144 | if (value instanceof Array){ 145 | if (value[0] == '' && value[1] == '' && value[2] == 0){ 146 | return '' 147 | }else{ 148 | return Math.abs(value[0]) + (Math.abs(value[1])/60 + Math.abs(value[2])/3600); 149 | } 150 | } 151 | } 152 | 153 | // 获取台风-平台所需枚举名 154 | export const getPlatforEnum = (tPosition, aPosition) => { 155 | let str = "" 156 | if (tPosition === 'center') { 157 | if (aPosition === '1') { 158 | str = 'TYPHOON_CENTER_PLATFORM_ONE' 159 | } else if (aPosition === '2') { 160 | str = 'TYPHOON_CENTER_PLATFORM_TWO' 161 | } else if (aPosition === '3') { 162 | str = 'TYPHOON_CENTER_PLATFORM_THREE' 163 | } else { 164 | str = 'TYPHOON_CENTER_PLATFORM_CENTER' 165 | } 166 | } else if (tPosition === '7') { 167 | if (aPosition === '1') { 168 | str = 'TYPHOON_CENTER_SEVEN_PLATFORM_ONE' 169 | } else if (aPosition === '2') { 170 | str = 'TYPHOON_CENTER_SEVEN_PLATFORM_TWO' 171 | } else if (aPosition === '3') { 172 | str = 'TYPHOON_CENTER_SEVEN_PLATFORM_THREE' 173 | } else { 174 | str = 'TYPHOON_CENTER_SEVEN_PLATFORM_CENTER' 175 | } 176 | } else if (tPosition === '10') { 177 | if (aPosition === '1') { 178 | str = 'TYPHOON_CENTER_TEN_PLATFORM_ONE' 179 | } else if (aPosition === '2') { 180 | str = 'TYPHOON_CENTER_TEN_PLATFORM_TWO' 181 | } else if (aPosition === '3') { 182 | str = 'TYPHOON_CENTER_TEN_PLATFORM_THREE' 183 | } else { 184 | str = 'TYPHOON_CENTER_TEN_PLATFORM_CENTER' 185 | } 186 | } else if (tPosition === '12') { 187 | if (aPosition === '1') { 188 | str = 'TYPHOON_CENTER_TWELVE_PLATFORM_ONE' 189 | } else if (aPosition === '2') { 190 | str = 'TYPHOON_CENTER_TWELVE_PLATFORM_TWO' 191 | } else if (aPosition === '3') { 192 | str = 'TYPHOON_CENTER_TWELVE_PLATFORM_THREE' 193 | } else { 194 | str = 'TYPHOON_CENTER_TWELVE_PLATFORM_CENTER' 195 | } 196 | } 197 | return str 198 | } 199 | // 获取台风-作业区所需枚举名 200 | export const getFieldEnum = (tPosition, aPosition) => { 201 | let str = "" 202 | if (tPosition === 'center') { 203 | if (aPosition === '1') { 204 | str = 'TYPHOON_CENTER_FIELD_ONE' 205 | } else if (aPosition === '2') { 206 | str = 'TYPHOON_CENTER_FIELD_TWO' 207 | } else if (aPosition === '3') { 208 | str = 'TYPHOON_CENTER_FIELD_THREE' 209 | } else { 210 | str = 'TYPHOON_CENTER_FIELD_CENTER' 211 | } 212 | } else if (tPosition === '7') { 213 | if (aPosition === '1') { 214 | str = 'TYPHOON_CENTER_SEVEN_FIELD_ONE' 215 | } else if (aPosition === '2') { 216 | str = 'TYPHOON_CENTER_SEVEN_FIELD_TWO' 217 | } else if (aPosition === '3') { 218 | str = 'TYPHOON_CENTER_SEVEN_FIELD_THREE' 219 | } else { 220 | str = 'TYPHOON_CENTER_SEVEN_FIELD_CENTER' 221 | } 222 | } else if (tPosition === '10') { 223 | if (aPosition === '1') { 224 | str = 'TYPHOON_CENTER_TEN_FIELD_ONE' 225 | } else if (aPosition === '2') { 226 | str = 'TYPHOON_CENTER_TEN_FIELD_TWO' 227 | } else if (aPosition === '3') { 228 | str = 'TYPHOON_CENTER_TEN_FIELD_THREE' 229 | } else { 230 | str = 'TYPHOON_CENTER_TEN_FIELD_CENTER' 231 | } 232 | } else if (tPosition === '12') { 233 | if (aPosition === '1') { 234 | str = 'TYPHOON_CENTER_TWELVE_FIELD_ONE' 235 | } else if (aPosition === '2') { 236 | str = 'TYPHOON_CENTER_TWELVE_FIELD_TWO' 237 | } else if (aPosition === '3') { 238 | str = 'TYPHOON_CENTER_TWELVE_FIELD_THREE' 239 | } else { 240 | str = 'TYPHOON_CENTER_TWELVE_FIELD_CENTER' 241 | } 242 | } 243 | return str 244 | } 245 | // 获取台风-船舶所需枚举名 246 | export const getShipEnum = (tPosition) => { 247 | let str = "" 248 | if (tPosition === 'center') { 249 | str = "TYPHOON_CENTER_SHIP_CENTER" 250 | } else if (tPosition === '7') { 251 | str = "TYPHOON_CENTER_SEVEN_SHIP_CENTER" 252 | } else if (tPosition === '10') { 253 | str = "TYPHOON_CENTER_TEN_SHIP_CENTER" 254 | } else if (tPosition === '12') { 255 | str = "TYPHOON_CENTER_TWELVE_SHIP_CENTER" 256 | } 257 | return str 258 | } 259 | // 获取台风风险统计详情总的枚举名 260 | export const getTyphoonRiskDetailEnum = (tPosition) => { 261 | let str = "" 262 | if (tPosition === '7级风圈') { 263 | str = "TYPHOON_CENTER_SEVEN" 264 | } else if (tPosition === '10级风圈') { 265 | str = "TYPHOON_CENTER_TEN" 266 | } else if (tPosition === '12级风圈') { 267 | str = "TYPHOON_CENTER_TWELVE" 268 | } 269 | return str 270 | } 271 | 272 | // 判断是否为移动端 273 | export const isMobile = () => { 274 | return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) 275 | } 276 | 277 | 278 | // 判断返回 data是否有值 279 | export const checkResponseData = (data) =>{ 280 | let flag = true; 281 | if (data instanceof Array){ 282 | for (let i = 0; i < data.length; i++) { 283 | if (!(data[i].data) || data[i].data == [] ){ 284 | flag = false; 285 | break; 286 | } 287 | } 288 | }else{ 289 | if (!(data.data) || data.data == []){ 290 | flag = false; 291 | } 292 | } 293 | return flag 294 | } 295 | 296 | // 截图 297 | export const handleGetReport = () => { 298 | html2canvas(document.getElementById('map'),{ 299 | useCORS:true // 底图跨域 必须！！ 300 | }).then(function(canvas) { 301 | const url = canvas.toDataURL("image/png") 302 | console.log('截图url：', url) 303 | return url 304 | }); 305 | } 306 | export const fakeTime =(t) =>{ 307 | console.log(t) 308 | let m = new Date(t).getMonth() + 1,d = new Date(t).getDay(); 309 | let test = '2018/' + m +'/' + d 310 | return new Date(test).getTime() 311 | } -------------------------------------------------------------------------------- /src/components/zTree/ZTreeMobile.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 233 | 234 | 249 | 281 | -------------------------------------------------------------------------------- /src/plugins/zTree/css/awesomeStyle/awesome.css: -------------------------------------------------------------------------------- 1 | /*------------------------------------- 2 | zTree Style using fontawesome instead of images 3 | 4 | version: 1.1 5 | author: Mike King 6 | email: mikkelking @ hotmail . com 7 | website: http://code.google.com/p/jquerytree/ 8 | 9 | -------------------------------------*/ 10 | /* Definitions ----------------------*/ 11 | /* End of Definitions ---------------*/ 12 | /* Imports -------------------------*/ 13 | /* End of Imports ------------------*/ 14 | .ztree * { 15 | padding: 0; 16 | margin: 0; 17 | font-size: 12px; 18 | font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif; 19 | background-color: #af0000; 20 | } 21 | .ztree { 22 | margin: 0; 23 | padding: 5px; 24 | color: #ffffff; 25 | background-color: #af0000; 26 | } 27 | .ztree li { 28 | padding: 0; 29 | margin: 0; 30 | list-style: none; 31 | line-height: 17px; 32 | text-align: left; 33 | white-space: nowrap; 34 | outline: 0; 35 | } 36 | .ztree li ul { 37 | margin: 0px; 38 | padding: 0 0 0 18px; 39 | } 40 | .ztree li a { 41 | padding-right: 3px; 42 | margin: 0; 43 | cursor: pointer; 44 | height: 17px; 45 | color: #ffffff; 46 | background-color: transparent; 47 | text-decoration: none; 48 | vertical-align: top; 49 | display: inline-block; 50 | } 51 | .ztree li a input.rename { 52 | height: 14px; 53 | width: 80px; 54 | padding: 0; 55 | margin: 0; 56 | color: #af0000; 57 | background-color: #ffffff; 58 | font-size: 12px; 59 | border: 1px #585956 solid; 60 | *border: 0px; 61 | } 62 | .ztree li a:hover { 63 | text-decoration: underline; 64 | } 65 | .ztree li a.curSelectedNode { 66 | padding-top: 0px; 67 | background-color: #af4040; 68 | color: #ffff00; 69 | height: 17px; 70 | opacity: 0.8; 71 | } 72 | .ztree li a.curSelectedNode_Edit { 73 | padding-top: 0px; 74 | background-color: transparent; 75 | color: #ffff00; 76 | height: 17px; 77 | border: 1px #666 solid; 78 | opacity: 0.8; 79 | } 80 | .ztree li a.tmpTargetNode_inner { 81 | padding-top: 0px; 82 | background-color: #aaa; 83 | color: #ffff00; 84 | height: 17px; 85 | border: 1px #666 solid; 86 | opacity: 0.8; 87 | filter: alpha(opacity=80); 88 | } 89 | .ztree li span { 90 | line-height: 17px; 91 | margin-right: 2px; 92 | background-color: transparent; 93 | } 94 | .ztree li span.button { 95 | line-height: 0; 96 | margin: 0; 97 | padding: 0; 98 | width: 15px; 99 | height: 17px; 100 | display: inline-block; 101 | vertical-align: top; 102 | border: 0px solid; 103 | cursor: pointer; 104 | outline: none; 105 | background-color: transparent; 106 | background-repeat: no-repeat; 107 | background-attachment: scroll; 108 | } 109 | .ztree li span.button::before { 110 | color: #ffffff; 111 | font-family: FontAwesome; 112 | padding-top: 10px; 113 | } 114 | .ztree li span.button.chk { 115 | margin: 0px; 116 | cursor: auto; 117 | width: 12px; 118 | display: inline-block; 119 | padding-top: 10px; 120 | padding-left: 2px; 121 | } 122 | .ztree li span.button.chk.checkbox_false_full::before { 123 | content: "\f096"; 124 | } 125 | .ztree li span.button.chk.checkbox_false_full_focus::before { 126 | content: "\f096"; 127 | color: #ffff00; 128 | } 129 | .ztree li span.button.chk.checkbox_false_part::before { 130 | content: "\f096"; 131 | color: #aaaaaa; 132 | } 133 | .ztree li span.button.chk.checkbox_false_part_focus::before { 134 | content: "\f096"; 135 | color: #cad96c; 136 | } 137 | .ztree li span.button.chk.checkbox_false_disable::before { 138 | content: "\f096"; 139 | color: #808080; 140 | } 141 | .ztree li span.button.chk.checkbox_true_full::before { 142 | content: "\f046"; 143 | } 144 | .ztree li span.button.chk.checkbox_true_full_focus::before { 145 | content: "\f046"; 146 | } 147 | .ztree li span.button.chk.checkbox_true_part::before { 148 | content: "\f14a"; 149 | } 150 | .ztree li span.button.chk.checkbox_true_part_focus::before { 151 | content: "\f14a"; 152 | color: #ffff00; 153 | } 154 | .ztree li span.button.chk.checkbox_true_full_focus::before { 155 | content: "\f046"; 156 | color: #ffff00; 157 | } 158 | .ztree li span.button.chk.checkbox_true_part::before { 159 | content: "\f046"; 160 | color: #aaaaaa; 161 | } 162 | .ztree li span.button.chk.checkbox_true_part_focus::before { 163 | content: "\f046"; 164 | color: #cad96c; 165 | } 166 | .ztree li span.button.chk.checkbox_true_disable::before { 167 | content: "\f046"; 168 | color: #808080; 169 | } 170 | .ztree li span.button.chk.radio_false_full::before { 171 | content: "\f10c"; 172 | } 173 | .ztree li span.button.chk.radio_false_full_focus::before { 174 | content: "\f10c"; 175 | color: #ffff00; 176 | } 177 | .ztree li span.button.chk.radio_false_part::before { 178 | content: "\f10c"; 179 | color: #aaaaaa; 180 | } 181 | .ztree li span.button.chk.radio_false_part_focus::before { 182 | content: "\f10c"; 183 | color: #ffff00; 184 | } 185 | .ztree li span.button.chk.radio_false_disable::before { 186 | content: "\f1db"; 187 | color: #808080; 188 | } 189 | .ztree li span.button.chk.radio_true_full::before { 190 | content: "\f192"; 191 | } 192 | .ztree li span.button.chk.radio_true_full_focus::before { 193 | content: "\f192"; 194 | color: #ffff00; 195 | } 196 | .ztree li span.button.chk.radio_true_part::before { 197 | content: "\f192"; 198 | color: #aaaaaa; 199 | } 200 | .ztree li span.button.chk.radio_true_part_focus::before { 201 | content: "\f192"; 202 | color: #aaaaaa; 203 | } 204 | .ztree li span.button.chk.radio_true_disable::before { 205 | content: "\f1db"; 206 | color: #808080; 207 | } 208 | .ztree li span.button.switch { 209 | width: 15px; 210 | height: 17px; 211 | } 212 | .ztree li span.button.root_open::before { 213 | content: "\f078"; 214 | padding-top: 10px; 215 | padding-left: 2px; 216 | display: inline-block; 217 | } 218 | .ztree li span.button.root_close::before { 219 | content: "\f054"; 220 | padding-top: 10px; 221 | padding-left: 2px; 222 | display: inline-block; 223 | } 224 | .ztree li span.button.roots_open::before { 225 | content: "\f078"; 226 | padding-top: 10px; 227 | padding-left: 2px; 228 | display: inline-block; 229 | } 230 | .ztree li span.button.roots_close::before { 231 | content: "\f054"; 232 | padding-top: 10px; 233 | padding-left: 2px; 234 | display: inline-block; 235 | } 236 | .ztree li span.button.center_open::before { 237 | content: "\f078"; 238 | padding-top: 10px; 239 | padding-left: 2px; 240 | display: inline-block; 241 | } 242 | .ztree li span.button.center_close::before { 243 | content: "\f054"; 244 | padding-top: 10px; 245 | padding-left: 2px; 246 | display: inline-block; 247 | } 248 | .ztree li span.button.bottom_open::before { 249 | content: "\f078"; 250 | padding-top: 10px; 251 | padding-left: 2px; 252 | display: inline-block; 253 | } 254 | .ztree li span.button.bottom_close::before { 255 | content: "\f054"; 256 | padding-top: 10px; 257 | padding-left: 2px; 258 | display: inline-block; 259 | } 260 | .ztree li span.button.root_docu { 261 | background: none; 262 | } 263 | .ztree li span.button.roots_docu::before { 264 | content: "\f022"; 265 | padding-left: 2px; 266 | display: inline-block; 267 | color: #ffffff; 268 | } 269 | .ztree li span.button.center_docu::before { 270 | padding-top: 10px; 271 | padding-left: 2px; 272 | display: inline-block; 273 | color: #ffffff; 274 | } 275 | .ztree li span.button.bottom_docu::before { 276 | padding-top: 10px; 277 | padding-left: 2px; 278 | display: inline-block; 279 | color: #ffffff; 280 | } 281 | .ztree li span.button.noline_docu { 282 | background: none; 283 | } 284 | .ztree li span.button.ico_open::before { 285 | content: "\f115"; 286 | font-family: FontAwesome; 287 | padding-top: 10px; 288 | padding-left: 2px; 289 | display: inline-block; 290 | color: #ffffff; 291 | } 292 | .ztree li span.button.ico_close::before { 293 | content: "\f114"; 294 | font-family: FontAwesome; 295 | padding-top: 10px; 296 | padding-left: 2px; 297 | display: inline-block; 298 | color: #ffffff; 299 | } 300 | .ztree li span.button.ico_docu::before { 301 | content: "\f022"; 302 | font-family: FontAwesome; 303 | padding-top: 10px; 304 | padding-left: 2px; 305 | display: inline-block; 306 | color: #ffffff; 307 | } 308 | .ztree li span.button.edit { 309 | margin-left: 4px; 310 | margin-right: -1px; 311 | vertical-align: top; 312 | *vertical-align: middle; 313 | padding-top: 10px; 314 | } 315 | .ztree li span.button.edit::before { 316 | content: "\f044"; 317 | font-family: FontAwesome; 318 | } 319 | .ztree li span.button.remove { 320 | margin-left: 4px; 321 | margin-right: -1px; 322 | vertical-align: top; 323 | *vertical-align: middle; 324 | padding-top: 10px; 325 | } 326 | .ztree li span.button.remove::before { 327 | content: "\f1f8"; 328 | font-family: FontAwesome; 329 | } 330 | .ztree li span.button.add { 331 | margin-left: 4px; 332 | margin-right: -1px; 333 | vertical-align: top; 334 | *vertical-align: middle; 335 | padding-top: 10px; 336 | } 337 | .ztree li span.button.add::before { 338 | content: "\f067"; 339 | font-family: FontAwesome; 340 | } 341 | .ztree li span.button.ico_loading { 342 | margin-right: 2px; 343 | background: url(./img/loading.gif) no-repeat scroll 0 0 transparent; 344 | vertical-align: top; 345 | *vertical-align: middle; 346 | } 347 | ul.tmpTargetzTree { 348 | background-color: #FFE6B0; 349 | opacity: 0.8; 350 | filter: alpha(opacity=80); 351 | } 352 | span.tmpzTreeMove_arrow { 353 | width: 16px; 354 | height: 17px; 355 | display: inline-block; 356 | padding: 0; 357 | margin: 2px 0 0 1px; 358 | border: 0 none; 359 | position: absolute; 360 | background-color: transparent; 361 | background-attachment: scroll; 362 | } 363 | span.tmpzTreeMove_arrow::before { 364 | content: "\f04b"; 365 | font-family: FontAwesome; 366 | color: #ffff00; 367 | } 368 | ul.ztree.zTreeDragUL { 369 | margin: 0; 370 | padding: 0; 371 | position: absolute; 372 | width: auto; 373 | height: auto; 374 | overflow: hidden; 375 | background-color: #cfcfcf; 376 | border: 1px #ffff00 dotted; 377 | opacity: 0.8; 378 | filter: alpha(opacity=80); 379 | } 380 | .ztreeMask { 381 | z-index: 10000; 382 | background-color: #cfcfcf; 383 | opacity: 0.0; 384 | filter: alpha(opacity=0); 385 | position: absolute; 386 | } 387 | -------------------------------------------------------------------------------- /src/plugins/zTree/js/jquery.ztree.excheck.min.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={event:{CHECK:"ztree_check"},id:{CHECK:"_check"},checkbox:{STYLE:"checkbox",DEFAULT:"chk",DISABLED:"disable",FALSE:"false",TRUE:"true",FULL:"full",PART:"part",FOCUS:"focus"},radio:{STYLE:"radio",TYPE_ALL:"all",TYPE_LEVEL:"level"}},c={check:{enable:!1,autoCheckTrigger:!1,chkStyle:t.checkbox.STYLE,nocheckInherit:!1,chkDisabledInherit:!1,radioType:t.radio.TYPE_LEVEL,chkboxType:{Y:"ps",N:"ps"}},data:{key:{checked:"checked"}},callback:{beforeCheck:null,onCheck:null}},r={onCheckNode:function(e,t){if(!0===t.chkDisabled)return!1;var c=C.getSetting(e.data.treeId);if(0==o.apply(c.callback.beforeCheck,[c.treeId,t],!0))return!0;var h=C.nodeChecked(c,t);C.nodeChecked(c,t,!h),l.checkNodeRelation(c,t);var a=f(t,s.id.CHECK,c);return l.setChkClass(c,a,t),l.repairParentChkClassWithSelf(c,t),c.treeObj.trigger(s.event.CHECK,[e,c.treeId,t]),!0},onMouseoverCheck:function(e,t){if(!0===t.chkDisabled)return!1;var c=C.getSetting(e.data.treeId),h=f(t,s.id.CHECK,c);return t.check_Focus=!0,l.setChkClass(c,h,t),!0},onMouseoutCheck:function(e,t){if(!0===t.chkDisabled)return!1;var c=C.getSetting(e.data.treeId),h=f(t,s.id.CHECK,c);return t.check_Focus=!1,l.setChkClass(c,h,t),!0}},h={tools:{},view:{checkNodeRelation:function(e,t){var c,h,a,n=s.radio,i=C.nodeChecked(e,t);if(e.check.chkStyle==n.STYLE){var r=C.getRadioCheckedList(e);if(i)if(e.check.radioType==n.TYPE_ALL){for(h=r.length-1;0<=h;h--){c=r[h],C.nodeChecked(e,c)&&c!=t&&(C.nodeChecked(e,c,!1),r.splice(h,1),l.setChkClass(e,f(c,s.id.CHECK,e),c),c.parentTId!=t.parentTId&&l.repairParentChkClassWithSelf(e,c))}r.push(t)}else{var o=t.parentTId?t.getParentNode():C.getRoot(e);for(h=0,a=(d=C.nodeChildren(e,o)).length;h