更改部署方式，减小打包面积
This commit is contained in:
parent
1f09e43e44
commit
8e195777e0
@ -1,17 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||
Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vuex@3.6.0"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/js-md5@0.7.3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.0/dist/axios.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.common.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/v-charts@1.19.0/lib/index.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
src/assets/back.jpg
Normal file
BIN
src/assets/back.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.8 MiB |
@ -175,9 +175,9 @@ export default {
|
||||
this.img1 = require("../assets/login-img.png");
|
||||
this.img2 = require("../assets/login-img3.png");
|
||||
this.logo = require("../assets/login-logo.png");
|
||||
this.bgimg = require("../assets/back.png");
|
||||
this.bgimg = require("../assets/back.jpg");
|
||||
this.avter = require("../assets/login-portrait.png");
|
||||
this.logobg = require("../assets/back.png");
|
||||
this.logobg = require("../assets/back.jpg");
|
||||
this.createCode();
|
||||
}
|
||||
};
|
||||
|
||||
@ -62,22 +62,12 @@
|
||||
|
||||
<script>
|
||||
import IconFont from "@/components/icon";
|
||||
// import MapLayout from "@/components/map/Index";
|
||||
// import DetailSearch from "@/components/search/Index";
|
||||
// import Analysis from "@/components/analysis/Index";
|
||||
|
||||
import Logs from "@/components/logs/Index";
|
||||
import Admin from "@/components/admin/Index";
|
||||
import { logout } from "@/utils/http";
|
||||
import PasswordChange from "./admin/forms/PasswordChange.vue";
|
||||
export default {
|
||||
components: {
|
||||
"icon-font": IconFont,
|
||||
// "map-layout": MapLayout,
|
||||
// "detail-search": DetailSearch,
|
||||
// analysis: Analysis,
|
||||
// 'logs':Logs,
|
||||
// admin: Admin,
|
||||
PasswordChange,
|
||||
},
|
||||
data() {
|
||||
@ -89,6 +79,9 @@ export default {
|
||||
},
|
||||
watch:{
|
||||
currentComp: function(old, newVal) {
|
||||
if(old === newVal){
|
||||
return
|
||||
}
|
||||
this.$router.push({
|
||||
name: this.currentComp
|
||||
})
|
||||
@ -122,9 +115,9 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// this.$router.push({
|
||||
// name:this.currentComp
|
||||
// })
|
||||
this.$router.push({
|
||||
name:this.currentComp
|
||||
})
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
:destroyOnClose="true"
|
||||
:footer="null"
|
||||
>
|
||||
<position-select style="height:520px;"
|
||||
<position-select style="height:550px;"
|
||||
:detail="position"
|
||||
@ok="handlePosOk"
|
||||
@cancle="visible=false"
|
||||
|
||||
@ -1,8 +1,26 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-spin :spinning="loading">
|
||||
<a-row>
|
||||
<a-form-model layout="inline" :model="posLatLon" @submit="handleSubmit" @submit.native.prevent>
|
||||
<a-form-model-item>
|
||||
<a-input v-model="posLatLon.lat" type="number" placeholder="经度" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-input v-model="posLatLon.lon" type="number" placeholder="纬度" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="posTrans"
|
||||
>
|
||||
确定
|
||||
</a-button>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-row>
|
||||
<div id="map-pos-select" style="height: 460px; width: 100%"></div>
|
||||
<a-row style="margin-top: 20px">
|
||||
<a-row style="margin-top: 10px">
|
||||
<a-col :span="4" :offset="8">
|
||||
<a-button @click="handleOk" type="primary">确认</a-button>
|
||||
</a-col>
|
||||
@ -24,24 +42,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "ol/ol.css";
|
||||
import Feature from "ol/Feature";
|
||||
import Map from "ol/Map";
|
||||
import View from "ol/View";
|
||||
import OSM from "ol/source/OSM";
|
||||
import Projection from "ol/proj/Projection";
|
||||
import { fromLonLat, toLonLat } from "ol/proj.js";
|
||||
import { Fill, Icon, Stroke, Style } from "ol/style";
|
||||
import { LineString, Point, Polygon } from "ol/geom";
|
||||
import GeoJSON from "ol/format/GeoJSON";
|
||||
import {
|
||||
Pointer as PointerInteraction,
|
||||
defaults as defaultInteractions,
|
||||
} from "ol/interaction";
|
||||
import { TileJSON, Vector as VectorSource } from "ol/source";
|
||||
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
|
||||
import { Drag } from "@/components/utils/olInteraction";
|
||||
import { PointSelect } from "@/components/utils/olInteraction";
|
||||
import { deleteJSON, postJSON, URL_MAP } from "@/utils/http";
|
||||
let mapForSelect = null
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -51,29 +55,41 @@ export default {
|
||||
projection: null,
|
||||
loading: false,
|
||||
posId: "",
|
||||
posLatLon: {
|
||||
lat:114.3,
|
||||
lon:30.6
|
||||
}
|
||||
};
|
||||
},
|
||||
props: {
|
||||
detail: Object,
|
||||
},
|
||||
methods: {
|
||||
posTrans() {
|
||||
this.pointFeature.setCoordinates(fromLonLat([this.posLatLon.lat, this.posLatLon.lon]))
|
||||
mapForSelect.setView(new ol.View({
|
||||
center: fromLonLat([this.posLatLon.lat, this.posLatLon.lon]),
|
||||
zoom: 10,
|
||||
}))
|
||||
},
|
||||
init() {
|
||||
var osm = new OSM();
|
||||
var layer = new TileLayer({
|
||||
var osm = new ol.source.OSM();
|
||||
var layer = new ol.layer.Tile({
|
||||
source: osm,
|
||||
wrapX: false,
|
||||
});
|
||||
this.projection = osm.getProjection();
|
||||
var map = new Map({
|
||||
interactions: defaultInteractions().extend([new Drag()]),
|
||||
|
||||
mapForSelect = new ol.Map({
|
||||
interactions: ol.interaction.defaults().extend([new PointSelect(this.pointFeature)]),
|
||||
layers: [
|
||||
layer,
|
||||
new VectorLayer({
|
||||
source: new VectorSource({
|
||||
features: [this.pointFeature],
|
||||
new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: [ new ol.Feature(this.pointFeature)],
|
||||
}),
|
||||
style: new Style({
|
||||
image: new Icon({
|
||||
style: new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
anchor: [0.5, 0.5],
|
||||
anchorXUnits: "fraction",
|
||||
anchorYUnits: "fraction",
|
||||
@ -85,8 +101,8 @@ export default {
|
||||
}),
|
||||
],
|
||||
target: "map-pos-select",
|
||||
view: new View({
|
||||
center: fromLonLat([114.3, 30.6]),
|
||||
view: new ol.View({
|
||||
center: fromLonLat([this.posLatLon.lat, this.posLatLon.lon]),
|
||||
zoom: 10,
|
||||
}),
|
||||
});
|
||||
@ -98,15 +114,14 @@ export default {
|
||||
this.visible = false;
|
||||
this.loading = true;
|
||||
try {
|
||||
let f = new GeoJSON().writeFeatureObject(this.pointFeature, {
|
||||
let f = new ol.format.GeoJSON().writeGeometryObject(this.pointFeature, {
|
||||
dataProjection: this.projection,
|
||||
});
|
||||
|
||||
let coors = f.geometry.coordinates;
|
||||
f.geometry.coordinates = toLonLat(coors, this.projection);
|
||||
let coors = f.coordinates;
|
||||
f.coordinates = toLonLat(coors, this.projection);
|
||||
let data = await postJSON(URL_MAP.POSITION_LIST, {
|
||||
detail: this.posDetail,
|
||||
position: JSON.stringify(f.geometry),
|
||||
position: JSON.stringify(f),
|
||||
});
|
||||
this.$emit("ok", data);
|
||||
} catch (e) {
|
||||
@ -121,15 +136,17 @@ export default {
|
||||
this.posDetail = this.detail.detail;
|
||||
if (this.detail.position) {
|
||||
let g = JSON.parse(this.detail.position.replace(/'/g, '"'));
|
||||
this.posLatLon.lat = g.coordinates[0]
|
||||
this.posLatLon.lon = g.coordinates[1]
|
||||
g.coordinates = fromLonLat(g.coordinates);
|
||||
this.pointFeature = new Feature(new GeoJSON().readGeometry(g));
|
||||
this.pointFeature =new ol.format.GeoJSON().readGeometry(g);
|
||||
} else {
|
||||
this.pointFeature = new Feature(new Point(fromLonLat([114.3, 30.6])));
|
||||
this.pointFeature = new ol.geom.Point(fromLonLat([this.posLatLon.lat, this.posLatLon.lon]));
|
||||
}
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -19,7 +19,7 @@
|
||||
{{ project.name }}
|
||||
</a-tag>
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<span slot="action" slot-scope="record">
|
||||
<a-button size="small" type="link" @click="() => handleDetail(record)"
|
||||
>查看</a-button
|
||||
>
|
||||
@ -106,6 +106,7 @@ export default {
|
||||
let results = await getData(this.listUrl, params);
|
||||
let data = results.data;
|
||||
const pagination = { ...this.pages };
|
||||
console.log(data)
|
||||
pagination.total = data.length;
|
||||
this.tableRows = data;
|
||||
this.pages = pagination;
|
||||
@ -116,7 +117,6 @@ export default {
|
||||
}
|
||||
},
|
||||
handleDetail(record) {
|
||||
// console.log(record)
|
||||
this.visible = true;
|
||||
this.record = record;
|
||||
},
|
||||
|
||||
@ -12,29 +12,21 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Map, View } from "ol";
|
||||
import OSM from "ol/source/OSM";
|
||||
import { fromLonLat, toLonLat } from "ol/proj.js";
|
||||
import { Fill, Icon, Stroke, Style } from "ol/style";
|
||||
import { TileJSON, Vector as VectorSource } from "ol/source";
|
||||
import { LineString, Point, Polygon } from "ol/geom";
|
||||
import GeoJSON from "ol/format/GeoJSON";
|
||||
import Feature from "ol/Feature";
|
||||
import "ol/ol.css";
|
||||
import { getData, login, logout, URL_MAP } from "@/utils/http";
|
||||
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
|
||||
|
||||
let map = null;
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
view: new View({
|
||||
view: new ol.View({
|
||||
center: fromLonLat([114.3, 30.6]),
|
||||
zoom: 10,
|
||||
}),
|
||||
waterLayer: '',
|
||||
waterLayer: "",
|
||||
projection: "",
|
||||
center: fromLonLat([114.3, 30.6]),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -47,31 +39,47 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
mapinit() {
|
||||
var osm = new OSM();
|
||||
var layer = new TileLayer({
|
||||
var osm = new ol.source.OSM();
|
||||
var layer = new ol.layer.Tile({
|
||||
source: osm,
|
||||
wrapX: false,
|
||||
});
|
||||
this.projection = osm.getProjection();
|
||||
this.waterLayer = this.getDeviceVectorLayer();
|
||||
map = new Map({
|
||||
|
||||
this.view = new ol.View({
|
||||
center: this.center,
|
||||
zoom: 10,
|
||||
});
|
||||
|
||||
map = new ol.Map({
|
||||
target: "map",
|
||||
layers: [layer],
|
||||
view: this.view,
|
||||
});
|
||||
|
||||
map.addLayer(this.waterLayer);
|
||||
},
|
||||
getDeviceVectorLayer() {
|
||||
let devices = this.deviceList.filter((d) => !!d.position);
|
||||
let features = []
|
||||
let features = [];
|
||||
let center = [0, 0];
|
||||
let count = 0;
|
||||
devices.forEach((d) => {
|
||||
let g = JSON.parse(d.position.position.replace(/'/g, '"'));
|
||||
g.coordinates = fromLonLat(g.coordinates, this.projection);
|
||||
features.push(new Feature(new GeoJSON().readGeometry(g)));
|
||||
center[0] += g.coordinates[0];
|
||||
center[1] += g.coordinates[1];
|
||||
count += 1;
|
||||
features.push(new ol.Feature(new ol.format.GeoJSON().readGeometry(g)));
|
||||
});
|
||||
console.log(features);
|
||||
let style = new Style({
|
||||
image: new Icon({
|
||||
if (count > 0) {
|
||||
center[0] /= count;
|
||||
center[1] /= count;
|
||||
this.center = center;
|
||||
}
|
||||
let style = new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
anchor: [0.5, 0.5],
|
||||
anchorXUnits: "fraction",
|
||||
anchorYUnits: "fraction",
|
||||
@ -80,8 +88,8 @@ export default {
|
||||
src: require("@/assets/water.png"),
|
||||
}),
|
||||
});
|
||||
return new VectorLayer({
|
||||
source: new VectorSource({
|
||||
return new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: features,
|
||||
}),
|
||||
style: style,
|
||||
@ -95,15 +103,11 @@ export default {
|
||||
let data = await Promise.all(results);
|
||||
this.$store.commit("deviceList", data[0].data);
|
||||
this.$store.commit("sensorList", data[1].data);
|
||||
map.setView(
|
||||
new View({
|
||||
center: fromLonLat([114.3, 30.6]),
|
||||
zoom: 10,
|
||||
})
|
||||
);
|
||||
map.removeLayer(this.waterLayer)
|
||||
this.waterLayer = this.getDeviceVectorLayer()
|
||||
map.addLayer(this.waterLayer)
|
||||
map.removeLayer(this.waterLayer);
|
||||
this.waterLayer = this.getDeviceVectorLayer();
|
||||
this.view.setCenter(this.center);
|
||||
map.setView(this.view);
|
||||
map.addLayer(this.waterLayer);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@ -44,7 +44,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
datetimeRange: [Moment('2020-10-01'), Moment('2020-12-31')],
|
||||
datetimeRange: [Moment().hour(0).minute(0).second(0), Moment()],
|
||||
update: false,
|
||||
device: "",
|
||||
deviceList: [],
|
||||
|
||||
@ -25,9 +25,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// const echarts = require('echarts');
|
||||
// import Model from './Model'
|
||||
|
||||
export default {
|
||||
// name: "BasicChart",
|
||||
data() {
|
||||
|
||||
@ -1,8 +1,5 @@
|
||||
import {
|
||||
Pointer as PointerInteraction,
|
||||
defaults as defaultInteractions,
|
||||
} from 'ol/interaction';
|
||||
|
||||
const PointerInteraction = ol.interaction.Pointer
|
||||
export const Drag = /*@__PURE__*/(function (PointerInteraction) {
|
||||
function Drag() {
|
||||
PointerInteraction.call(this, {
|
||||
@ -55,10 +52,8 @@ export const Drag = /*@__PURE__*/(function (PointerInteraction) {
|
||||
return feature;
|
||||
});
|
||||
|
||||
if (feature) {
|
||||
this.coordinate_ = evt.coordinate;
|
||||
this.feature_ = feature;
|
||||
}
|
||||
this.coordinate_[0] = evt.coordinate[0];
|
||||
this.coordinate_[1] = evt.coordinate[1];
|
||||
|
||||
return !!feature;
|
||||
}
|
||||
@ -107,3 +102,40 @@ export const Drag = /*@__PURE__*/(function (PointerInteraction) {
|
||||
this.feature_ = null;
|
||||
return false;
|
||||
}
|
||||
|
||||
export const PointSelect = /*@__PURE__*/(function (PointerInteraction) {
|
||||
function PointSelect(point) {
|
||||
PointerInteraction.call(this, {
|
||||
handleDownEvent: handlePointSelectEvent,
|
||||
});
|
||||
|
||||
/**
|
||||
* @type {import("../src/ol/coordinate.js").Coordinate}
|
||||
* @private
|
||||
*/
|
||||
this.coordinate_ = null;
|
||||
|
||||
/**
|
||||
* @type {string|undefined}
|
||||
* @private
|
||||
*/
|
||||
this.cursor_ = 'pointer';
|
||||
|
||||
/**
|
||||
* @type {Feature}
|
||||
* @private
|
||||
*/
|
||||
this.point_ = point;
|
||||
}
|
||||
|
||||
if ( PointerInteraction ) PointSelect.__proto__ = PointerInteraction;
|
||||
PointSelect.prototype = Object.create( PointerInteraction && PointerInteraction.prototype );
|
||||
PointSelect.prototype.constructor = PointSelect;
|
||||
|
||||
return PointSelect;
|
||||
}(PointerInteraction));
|
||||
|
||||
function handlePointSelectEvent(evt) {
|
||||
this.point_.setCoordinates(evt.coordinate)
|
||||
return false;
|
||||
}
|
||||
10
src/main.js
10
src/main.js
@ -2,12 +2,12 @@ import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import store from './utils/store'
|
||||
import router from './utils/router'
|
||||
import Antd from 'ant-design-vue';
|
||||
import VCharts from 'v-charts'
|
||||
import 'ant-design-vue/dist/antd.css';
|
||||
// import Antd from 'ant-design-vue';
|
||||
// import VCharts from 'v-charts'
|
||||
// import 'ant-design-vue/dist/antd.css';
|
||||
|
||||
Vue.use(Antd)
|
||||
Vue.use(VCharts)
|
||||
// Vue.use(Antd)
|
||||
// Vue.use(VCharts)
|
||||
Vue.config.productionTip = false
|
||||
Vue.prototype.$store = store
|
||||
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Index from '@/components/Main'
|
||||
import VueRouter from 'vue-router'
|
||||
import Login from '@/components/Login'
|
||||
import store from './store'
|
||||
import { setAuth } from './http'
|
||||
|
||||
Vue.use(Router)
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const funcRoutes = [
|
||||
{ path:'map-layout', name:'map-layout', component: ()=>import(/* webpackChunkName: "map-layout" */ '@/components/map/Index' ) },
|
||||
@ -44,7 +43,7 @@ if (sessionStorage.getItem("store")) {
|
||||
}
|
||||
}
|
||||
|
||||
const router = new Router({
|
||||
const router = new VueRouter({
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
})
|
||||
|
||||
@ -16,6 +16,14 @@ module.exports = {
|
||||
},
|
||||
productionSourceMap: false,
|
||||
|
||||
chainWebpack: config => {
|
||||
config
|
||||
.plugin('html')
|
||||
.tap(args => {
|
||||
args[0].title = '水质监测平台'
|
||||
return args
|
||||
})
|
||||
},
|
||||
configureWebpack: {
|
||||
resolve: {
|
||||
alias: {
|
||||
@ -23,7 +31,17 @@ module.exports = {
|
||||
'com': path.resolve(__dirname, 'src', 'components')
|
||||
}
|
||||
},
|
||||
|
||||
externals: {
|
||||
'vue': 'Vue',
|
||||
'vuex':'Vuex',
|
||||
'antd': 'antd',
|
||||
'vue-router': 'VueRouter',
|
||||
"moment": "moment",
|
||||
"md5": "js-md5",
|
||||
'axios': 'axios',
|
||||
'v-charts':'VCharts',
|
||||
'ol':'ol'
|
||||
},
|
||||
module: {
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user