wangtong/CVEO-water-frontend
1
0
Fork 0
Code Issues 1 Pull Requests Releases 1 Wiki Activity

更改部署方式，减小打包面积

Browse Source
This commit is contained in:
王铜 2020-11-30 17:19:12 +08:00
parent 1f09e43e44
commit 8e195777e0
15 changed files with 208 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
public/index.html
View File

@ -1,17 +1,33 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8"> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
</head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.min.css">
<body> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
<noscript> <title><%= htmlWebpackPlugin.options.title %></title>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </head>
</noscript>
<div id="app"></div> <body>
<!-- built files will be auto injected --> <noscript>
</body> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
</html> 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 241 KiB

BIN
src/assets/back.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.8 MiB

4
src/components/Login.vue
View File

@ -175,9 +175,9 @@ export default {
this.img1 = require("../assets/login-img.png"); this.img1 = require("../assets/login-img.png");
this.img2 = require("../assets/login-img3.png"); this.img2 = require("../assets/login-img3.png");
this.logo = require("../assets/login-logo.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.avter = require("../assets/login-portrait.png");
this.logobg = require("../assets/back.png"); this.logobg = require("../assets/back.jpg");
this.createCode(); this.createCode();
} }
}; };

19
src/components/Main.vue
View File

@ -62,22 +62,12 @@
<script> <script>
import IconFont from "@/components/icon"; 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 Logs from "@/components/logs/Index";
import Admin from "@/components/admin/Index";
import { logout } from "@/utils/http"; import { logout } from "@/utils/http";
import PasswordChange from "./admin/forms/PasswordChange.vue"; import PasswordChange from "./admin/forms/PasswordChange.vue";
export default { export default {
components: { components: {
"icon-font": IconFont, "icon-font": IconFont,
// "map-layout": MapLayout,
// "detail-search": DetailSearch,
// analysis: Analysis,
// 'logs':Logs,
// admin: Admin,
PasswordChange, PasswordChange,
}, },
data() { data() {
@ -89,6 +79,9 @@ export default {
}, },
watch:{ watch:{
currentComp: function(old, newVal) { currentComp: function(old, newVal) {
if(old === newVal){
return
}
this.$router.push({ this.$router.push({
name: this.currentComp name: this.currentComp
}) })
@ -122,9 +115,9 @@ export default {
}, },
}, },
mounted() { mounted() {
// this.$router.push({ this.$router.push({
// name:this.currentComp name:this.currentComp
// }) })
} }
}; };
</script> </script>

2
src/components/admin/forms/DeviceDetail.vue
View File

@ -57,7 +57,7 @@
:destroyOnClose="true" :destroyOnClose="true"
:footer="null" :footer="null"
> >
<position-select style="height:520px;" <position-select style="height:550px;"
:detail="position" :detail="position"
@ok="handlePosOk" @ok="handlePosOk"
@cancle="visible=false" @cancle="visible=false"

89
src/components/admin/forms/PositionSelect.vue
View File

@ -1,8 +1,26 @@
<template> <template>
<div> <div>
<a-spin :spinning="loading"> <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> <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-col :span="4" :offset="8">
<a-button @click="handleOk" type="primary">确认</a-button> <a-button @click="handleOk" type="primary">确认</a-button>
</a-col> </a-col>
@ -24,24 +42,10 @@
</template> </template>
<script> <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 { fromLonLat, toLonLat } from "ol/proj.js";
import { Fill, Icon, Stroke, Style } from "ol/style"; import { PointSelect } from "@/components/utils/olInteraction";
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 { deleteJSON, postJSON, URL_MAP } from "@/utils/http"; import { deleteJSON, postJSON, URL_MAP } from "@/utils/http";
let mapForSelect = null
export default { export default {
data() { data() {
return { return {
@ -51,29 +55,41 @@ export default {
projection: null, projection: null,
loading: false, loading: false,
posId: "", posId: "",
posLatLon: {
lat:114.3,
lon:30.6
}
}; };
}, },
props: { props: {
detail: Object, detail: Object,
}, },
methods: { 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() { init() {
var osm = new OSM(); var osm = new ol.source.OSM();
var layer = new TileLayer({ var layer = new ol.layer.Tile({
source: osm, source: osm,
wrapX: false, wrapX: false,
}); });
this.projection = osm.getProjection(); 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: [ layers: [
layer, layer,
new VectorLayer({ new ol.layer.Vector({
source: new VectorSource({ source: new ol.source.Vector({
features: [this.pointFeature], features: [ new ol.Feature(this.pointFeature)],
}), }),
style: new Style({ style: new ol.style.Style({
image: new Icon({ image: new ol.style.Icon({
anchor: [0.5, 0.5], anchor: [0.5, 0.5],
anchorXUnits: "fraction", anchorXUnits: "fraction",
anchorYUnits: "fraction", anchorYUnits: "fraction",
@ -85,8 +101,8 @@ export default {
}), }),
], ],
target: "map-pos-select", target: "map-pos-select",
view: new View({ view: new ol.View({
center: fromLonLat([114.3, 30.6]), center: fromLonLat([this.posLatLon.lat, this.posLatLon.lon]),
zoom: 10, zoom: 10,
}), }),
}); });
@ -98,15 +114,14 @@ export default {
this.visible = false; this.visible = false;
this.loading = true; this.loading = true;
try { try {
let f = new GeoJSON().writeFeatureObject(this.pointFeature, { let f = new ol.format.GeoJSON().writeGeometryObject(this.pointFeature, {
dataProjection: this.projection, dataProjection: this.projection,
}); });
let coors = f.coordinates;
let coors = f.geometry.coordinates; f.coordinates = toLonLat(coors, this.projection);
f.geometry.coordinates = toLonLat(coors, this.projection);
let data = await postJSON(URL_MAP.POSITION_LIST, { let data = await postJSON(URL_MAP.POSITION_LIST, {
detail: this.posDetail, detail: this.posDetail,
position: JSON.stringify(f.geometry), position: JSON.stringify(f),
}); });
this.$emit("ok", data); this.$emit("ok", data);
} catch (e) { } catch (e) {
@ -121,15 +136,17 @@ export default {
this.posDetail = this.detail.detail; this.posDetail = this.detail.detail;
if (this.detail.position) { if (this.detail.position) {
let g = JSON.parse(this.detail.position.replace(/'/g, '"')); 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); g.coordinates = fromLonLat(g.coordinates);
this.pointFeature = new Feature(new GeoJSON().readGeometry(g)); this.pointFeature =new ol.format.GeoJSON().readGeometry(g);
} else { } 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(); this.init();
}, },
}; };
</script> </script>
<style> <style scoped>
</style> </style>

4
src/components/admin/tables/DeviceTable.vue
View File

@ -19,7 +19,7 @@
{{ project.name }} {{ project.name }}
</a-tag> </a-tag>
</span> </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 size="small" type="link" @click="() => handleDetail(record)"
>查看</a-button >查看</a-button
> >
@ -106,6 +106,7 @@ export default {
let results = await getData(this.listUrl, params); let results = await getData(this.listUrl, params);
let data = results.data; let data = results.data;
const pagination = { ...this.pages }; const pagination = { ...this.pages };
console.log(data)
pagination.total = data.length; pagination.total = data.length;
this.tableRows = data; this.tableRows = data;
this.pages = pagination; this.pages = pagination;
@ -116,7 +117,6 @@ export default {
} }
}, },
handleDetail(record) { handleDetail(record) {
// console.log(record)
this.visible = true; this.visible = true;
this.record = record; this.record = record;
}, },

78
src/components/map/Index.vue
View File

@ -12,29 +12,21 @@
</template> </template>
<script> <script>
import { Map, View } from "ol";
import OSM from "ol/source/OSM";
import { fromLonLat, toLonLat } from "ol/proj.js"; 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 { getData, login, logout, URL_MAP } from "@/utils/http";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
let map = null; let map = null;
export default { export default {
data() { data() {
return { return {
view: new View({ view: new ol.View({
center: fromLonLat([114.3, 30.6]), center: fromLonLat([114.3, 30.6]),
zoom: 10, zoom: 10,
}), }),
waterLayer: '', waterLayer: "",
projection: "", projection: "",
center: fromLonLat([114.3, 30.6]),
}; };
}, },
computed: { computed: {
@ -47,41 +39,57 @@ export default {
}, },
methods: { methods: {
mapinit() { mapinit() {
var osm = new OSM(); var osm = new ol.source.OSM();
var layer = new TileLayer({ var layer = new ol.layer.Tile({
source: osm, source: osm,
wrapX: false, wrapX: false,
}); });
this.projection = osm.getProjection(); this.projection = osm.getProjection();
this.waterLayer = this.getDeviceVectorLayer(); this.waterLayer = this.getDeviceVectorLayer();
map = new Map({
this.view = new ol.View({
center: this.center,
zoom: 10,
});
map = new ol.Map({
target: "map", target: "map",
layers: [layer], layers: [layer],
view: this.view, view: this.view,
}); });
map.addLayer(this.waterLayer); map.addLayer(this.waterLayer);
}, },
getDeviceVectorLayer() { getDeviceVectorLayer() {
let devices = this.deviceList.filter((d) => !!d.position); let devices = this.deviceList.filter((d) => !!d.position);
let features = [] let features = [];
let center = [0, 0];
let count = 0;
devices.forEach((d) => { devices.forEach((d) => {
let g = JSON.parse(d.position.position.replace(/'/g, '"')); let g = JSON.parse(d.position.position.replace(/'/g, '"'));
g.coordinates = fromLonLat(g.coordinates, this.projection); 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); if (count > 0) {
let style = new Style({ center[0] /= count;
image: new Icon({ center[1] /= count;
anchor: [0.5, 0.5], this.center = center;
anchorXUnits: "fraction", }
anchorYUnits: "fraction", let style = new ol.style.Style({
opacity: 0.95, image: new ol.style.Icon({
scale: 0.6, anchor: [0.5, 0.5],
src: require("@/assets/water.png"), anchorXUnits: "fraction",
}), anchorYUnits: "fraction",
opacity: 0.95,
scale: 0.6,
src: require("@/assets/water.png"),
}),
}); });
return new VectorLayer({ return new ol.layer.Vector({
source: new VectorSource({ source: new ol.source.Vector({
features: features, features: features,
}), }),
style: style, style: style,
@ -95,15 +103,11 @@ export default {
let data = await Promise.all(results); let data = await Promise.all(results);
this.$store.commit("deviceList", data[0].data); this.$store.commit("deviceList", data[0].data);
this.$store.commit("sensorList", data[1].data); this.$store.commit("sensorList", data[1].data);
map.setView( map.removeLayer(this.waterLayer);
new View({ this.waterLayer = this.getDeviceVectorLayer();
center: fromLonLat([114.3, 30.6]), this.view.setCenter(this.center);
zoom: 10, map.setView(this.view);
}) map.addLayer(this.waterLayer);
);
map.removeLayer(this.waterLayer)
this.waterLayer = this.getDeviceVectorLayer()
map.addLayer(this.waterLayer)
}, },
}, },
mounted() { mounted() {

2
src/components/search/Index.vue
View File

@ -44,7 +44,7 @@ export default {
}, },
data() { data() {
return { return {
datetimeRange: [Moment('2020-10-01'), Moment('2020-12-31')], datetimeRange: [Moment().hour(0).minute(0).second(0), Moment()],
update: false, update: false,
device: "", device: "",
deviceList: [], deviceList: [],

3
src/components/search/SZJCChart.vue
View File

@ -25,9 +25,6 @@
</template> </template>
<script> <script>
// const echarts = require('echarts');
// import Model from './Model'
export default { export default {
// name: "BasicChart", // name: "BasicChart",
data() { data() {

50
src/components/utils/olInteraction.js
View File

@ -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) { export const Drag = /*@__PURE__*/(function (PointerInteraction) {
function Drag() { function Drag() {
PointerInteraction.call(this, { PointerInteraction.call(this, {
@ -36,7 +33,7 @@ export const Drag = /*@__PURE__*/(function (PointerInteraction) {
*/ */
this.previousCursor_ = undefined; this.previousCursor_ = undefined;
} }
if ( PointerInteraction ) Drag.__proto__ = PointerInteraction; if ( PointerInteraction ) Drag.__proto__ = PointerInteraction;
Drag.prototype = Object.create( PointerInteraction && PointerInteraction.prototype ); Drag.prototype = Object.create( PointerInteraction && PointerInteraction.prototype );
Drag.prototype.constructor = Drag; Drag.prototype.constructor = Drag;
@ -55,10 +52,8 @@ export const Drag = /*@__PURE__*/(function (PointerInteraction) {
return feature; return feature;
}); });
if (feature) { this.coordinate_[0] = evt.coordinate[0];
this.coordinate_ = evt.coordinate; this.coordinate_[1] = evt.coordinate[1];
this.feature_ = feature;
}
return !!feature; return !!feature;
} }
@ -106,4 +101,41 @@ export const Drag = /*@__PURE__*/(function (PointerInteraction) {
this.coordinate_ = null; this.coordinate_ = null;
this.feature_ = null; this.feature_ = null;
return false; 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
View File

@ -2,12 +2,12 @@ import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import store from './utils/store' import store from './utils/store'
import router from './utils/router' import router from './utils/router'
import Antd from 'ant-design-vue'; // import Antd from 'ant-design-vue';
import VCharts from 'v-charts' // import VCharts from 'v-charts'
import 'ant-design-vue/dist/antd.css'; // import 'ant-design-vue/dist/antd.css';
Vue.use(Antd) // Vue.use(Antd)
Vue.use(VCharts) // Vue.use(VCharts)
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.prototype.$store = store Vue.prototype.$store = store

7
src/utils/router.js
View File

@ -1,11 +1,10 @@
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import VueRouter from 'vue-router'
import Index from '@/components/Main'
import Login from '@/components/Login' import Login from '@/components/Login'
import store from './store' import store from './store'
import { setAuth } from './http' import { setAuth } from './http'
Vue.use(Router) Vue.use(VueRouter)
const funcRoutes = [ const funcRoutes = [
{ path:'map-layout', name:'map-layout', component: ()=>import(/* webpackChunkName: "map-layout" */ '@/components/map/Index' ) }, { 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, base: process.env.BASE_URL,
routes routes
}) })

26
vue.config.js
View File

@ -15,17 +15,35 @@ module.exports = {
} }
}, },
productionSourceMap: false, productionSourceMap: false,
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = '水质监测平台'
return args
})
},
configureWebpack: { configureWebpack: {
resolve: { resolve: {
alias: { alias: {
'@': path.resolve(__dirname, 'src'), '@': path.resolve(__dirname, 'src'),
'com': path.resolve(__dirname, 'src', 'components') '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: { module: {
} }
} }
} }