20251113炳辰版本
This commit is contained in:
wxlong
14
src/components/404.vue
Normal file
14
src/components/404.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="bg">
|
||||
<p>404 NOT FOUNT o(╯□╰)o</p>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
html,body {
|
||||
height: 100%;
|
||||
}
|
||||
#app {
|
||||
height: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
3456
src/components/Analysis/analysisPage.vue
Normal file
3456
src/components/Analysis/analysisPage.vue
Normal file
File diff suppressed because it is too large
Load Diff
1901
src/components/DataManagement/DataManagement.vue
Normal file
1901
src/components/DataManagement/DataManagement.vue
Normal file
File diff suppressed because it is too large
Load Diff
204
src/components/DataManagement/featureInfo.vue
Normal file
204
src/components/DataManagement/featureInfo.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="cardCon">
|
||||
<el-tabs type="border-card" v-model="activeName">
|
||||
<el-tab-pane label="属性" name="first">
|
||||
<div id="infobox">
|
||||
<div>
|
||||
<el-row class="detail-row" v-for="(val, key) in data" :key="key">
|
||||
<template
|
||||
v-if="!isJSON(val)"
|
||||
>
|
||||
<el-col
|
||||
:span="12"
|
||||
class="detail-col"
|
||||
v-show="
|
||||
key !== 'mediaFileURLs' &&
|
||||
key !== 'imagedata' &&
|
||||
key !== 'videodata' &&
|
||||
key !== 'id'
|
||||
"
|
||||
>{{ key }}</el-col>
|
||||
<el-col
|
||||
:span="12"
|
||||
v-show="
|
||||
key !== 'mediaFileURLs' &&
|
||||
key !== 'imagedata' &&
|
||||
key !== 'videodata' &&
|
||||
key !== 'id'
|
||||
"
|
||||
class="detail-col"
|
||||
>{{ val }}</el-col>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-col
|
||||
:span="12"
|
||||
class="detail-col"
|
||||
v-show="
|
||||
key !== 'mediaFileURLs' &&
|
||||
key !== 'imagedata' &&
|
||||
key !== 'videodata' &&
|
||||
key !== 'id'
|
||||
"
|
||||
>{{ key }}</el-col>
|
||||
<el-col
|
||||
:span="12"
|
||||
class="detail-col"
|
||||
>
|
||||
<el-table :data="parseJSON(val)" style="width: 100%">
|
||||
<el-table-column prop="value" label="名称"></el-table-column>
|
||||
<el-table-column prop="key" label="值"></el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="图片" name="second">
|
||||
<el-image
|
||||
v-if="imageshow"
|
||||
style="width: 100%; height: 370px"
|
||||
:src="data.imagedata[0] ? data.imagedata[0] : null"
|
||||
fit="contain"
|
||||
:preview-src-list="data.imagedata"
|
||||
></el-image>
|
||||
<div style="height: 370px" v-else>暂无图片</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="视频" name="third">
|
||||
<el-carousel height="370px" :autoplay="false" v-if="videoshow">
|
||||
<el-carousel-item v-for="(item, i) in data.videodata" :key="i">
|
||||
<div style="margin: auto 0; margin-top: 85px">
|
||||
<video-player
|
||||
class="video-player vjs-custom-skin"
|
||||
ref="videoPlayer"
|
||||
:playsinline="true"
|
||||
:options="{
|
||||
playbackRates: [0.7, 1.0, 1.5, 2.0],
|
||||
preload: 'auto',
|
||||
language: 'zh-CN',
|
||||
aspectRatio: '16:9',
|
||||
fluid: true,
|
||||
sources: [{ type: 'video/mp4', src: item }],
|
||||
notSupportedMessage: '此视频暂无法播放，请稍后再试',
|
||||
controlBar: {
|
||||
timeDivider: true,
|
||||
durationDisplay: true,
|
||||
remainingTimeDisplay: false,
|
||||
fullscreenToggle: true
|
||||
}
|
||||
}"
|
||||
></video-player>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<div style="height: 370px" v-else>暂无视频</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { videoPlayer } from 'vue-video-player'
|
||||
import 'video.js/dist/video-js.css'
|
||||
|
||||
export default {
|
||||
name: 'featureInfo',
|
||||
components: {
|
||||
videoPlayer
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
imageshow: false,
|
||||
videoshow: false,
|
||||
activeName: 'first',
|
||||
imagedata1: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isJSON (value) {
|
||||
try {
|
||||
const parsed = JSON.parse(value)
|
||||
return Array.isArray(parsed) && parsed.every(item => typeof item === 'object')
|
||||
} catch (e) {
|
||||
return false
|
||||
}
|
||||
},
|
||||
parseJSON (value) {
|
||||
try {
|
||||
return JSON.parse(value).map(item => ({ key: item.key, value: item.value }))
|
||||
} catch (e) {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created () {},
|
||||
watch: {
|
||||
data: {
|
||||
handler () {
|
||||
this.imagedata1 = []
|
||||
if (this.data.videodata && this.data.imagedata) {
|
||||
if (this.data.videodata.length > 0) {
|
||||
this.videoshow = true
|
||||
} else {
|
||||
this.videoshow = false
|
||||
}
|
||||
if (this.data.imagedata.length > 0) {
|
||||
this.imageshow = true
|
||||
} else {
|
||||
this.imageshow = false
|
||||
}
|
||||
}
|
||||
for (var key in this.data) {
|
||||
if (
|
||||
key !== 'mediaFileURLs' &&
|
||||
key !== 'imagedata' &&
|
||||
key !== 'videodata' &&
|
||||
key !== 'id' &&
|
||||
this.isJSON(this.data[key])
|
||||
) {
|
||||
this.imagedata1.push(...this.parseJSON(this.data[key]))
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cardCon {
|
||||
border: 1px solid #9dbbe7 !important;
|
||||
border-radius: 4px;
|
||||
width: 95%;
|
||||
}
|
||||
#infobox {
|
||||
height: 378px;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
#infobox > div {
|
||||
width: 100%;
|
||||
}
|
||||
.detail-row {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
.detail-col {
|
||||
border: 1px solid #cfcece;
|
||||
line-height: 200%;
|
||||
}
|
||||
.vjs-menu .vjs-menu-content {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
158
src/components/Home.vue
Normal file
158
src/components/Home.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-row class="container">
|
||||
<el-col class="topbar-wrap">
|
||||
<div class="topbar-logo topbar-btn">
|
||||
<a href>
|
||||
<img
|
||||
src="../assets/icon/logo.png"
|
||||
style="padding: 10px 23px 0px 20px; height: 25px; width: 20px"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="topbar-logos">
|
||||
<a
|
||||
href
|
||||
style="
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 18px;
|
||||
line-height: 70px;
|
||||
color: #264672;
|
||||
margin-left: 10px;
|
||||
"
|
||||
>{{ myname }}</a
|
||||
>
|
||||
</div>
|
||||
<div class="topbar-title">
|
||||
<el-menu
|
||||
:default-active="$route.path"
|
||||
class="el-menu"
|
||||
mode="horizontal"
|
||||
background-color="#F7F8F1"
|
||||
router
|
||||
>
|
||||
<template v-for="item in menu">
|
||||
<el-submenu
|
||||
v-if="item.children"
|
||||
:index="item.index"
|
||||
:key="item.index"
|
||||
>
|
||||
<template slot="title">{{ item.name }}</template>
|
||||
<el-menu-item
|
||||
v-for="submenu in item.children"
|
||||
:index="submenu.index"
|
||||
:key="submenu.index"
|
||||
style="width: 100%"
|
||||
>{{ submenu.name }}</el-menu-item
|
||||
>
|
||||
</el-submenu>
|
||||
<el-menu-item v-else :index="item.index" :key="item.index">{{
|
||||
item.name
|
||||
}}</el-menu-item>
|
||||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<div class="content">
|
||||
<router-view />
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "element-ui/lib/theme-chalk/display.css";
|
||||
import "../assets/css/main.css";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
data() {
|
||||
return {
|
||||
menu: [],
|
||||
myname: myname,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (sessionStorage.getItem("access-user") == "Leader") {
|
||||
this.menu = [
|
||||
{ index: "/view", name: "工作监管" },
|
||||
{ index: "/statistic", name: "汇总统计" },
|
||||
{ index: "/analysis", name: "分析决策" },
|
||||
{ index: "/data", name: "数据管理" },
|
||||
{ index: "/login", name: "退出" },
|
||||
];
|
||||
} else if (
|
||||
sessionStorage.getItem("access-user") == "Admin" ||
|
||||
sessionStorage.getItem("access-user") == "SuperAdmin"
|
||||
) {
|
||||
this.menu = [
|
||||
{ index: "/view", name: "工作监管" },
|
||||
{ index: "/statistic", name: "汇总统计" },
|
||||
{ index: "/analysis", name: "分析决策" },
|
||||
{ index: "/data", name: "数据管理" },
|
||||
{ index: "/main", name: "任务管理" },
|
||||
{ index: "/login", name: "退出" },
|
||||
];
|
||||
} else if (sessionStorage.getItem("access-user") == "Operator") {
|
||||
this.menu = [
|
||||
{ index: "/main", name: "任务管理" },
|
||||
{ index: "/login", name: "退出" },
|
||||
];
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header ul {
|
||||
z-index: 1;
|
||||
list-style-type: none;
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.header ul li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
padding: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.topbar-title .el-menu--horizontal > .el-menu-item {
|
||||
height: 50px;
|
||||
line-height: 70px;
|
||||
width: 114px;
|
||||
text-align: center;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 16px;
|
||||
color: #264672;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.el-menu--horizontal > .el-menu-item.is-active {
|
||||
color: #3a87f9 !important;
|
||||
font-family: PingFangSC-Semibold;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0;
|
||||
border-bottom: 3px solid #409eff !important;
|
||||
}
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
|
||||
outline: 0;
|
||||
background: #f7f8f1 !important;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
218
src/components/MapView/Map.vue
Normal file
218
src/components/MapView/Map.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="map"></div>
|
||||
<div
|
||||
style="
|
||||
display: none;
|
||||
width: 400px;
|
||||
height: 160px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 250px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
"
|
||||
class="sub-main"
|
||||
></div>
|
||||
<div id="control">
|
||||
<div class="map-control">
|
||||
<div class="map-type-button" v-if="isImg" @click="changeMap">
|
||||
<img class="map-img" src="../../../static/img/vec.png" />
|
||||
</div>
|
||||
<div class="map-type-button" v-else @click="changeMap">
|
||||
<img class="map-img" src="../../../static/img/img.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-dimensional">
|
||||
<div class="map-type-button" v-if="is3D" @click="change3D">
|
||||
<img class="map-img" src="../../../static/img/2d.png" />
|
||||
</div>
|
||||
<div class="map-type-button" v-else @click="change3D">
|
||||
<img class="map-img" src="../../../static/img/3d.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { store } from "@/components/vuex/store.js";
|
||||
import OLCesium from "ol-cesium";
|
||||
import Map from "ol/Map";
|
||||
import View from "ol/View";
|
||||
import TileLayer from "ol/layer/Tile";
|
||||
import XYZ from "ol/source/XYZ";
|
||||
|
||||
export default {
|
||||
name: "Map",
|
||||
data() {
|
||||
return {
|
||||
is3D: false,
|
||||
isImg: false,
|
||||
baseLayers: {},
|
||||
mapData: [
|
||||
{
|
||||
name: "天地图影像地图",
|
||||
url: "http://t3.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=52d807a08ad1a0e039950cb65de3d49b",
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
name: "天地图影像注记",
|
||||
url: "http://t3.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=52d807a08ad1a0e039950cb65de3d49b",
|
||||
index: 1,
|
||||
},
|
||||
{
|
||||
name: "天地图矢量地图",
|
||||
url: "http://t3.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=52d807a08ad1a0e039950cb65de3d49b",
|
||||
index: 2,
|
||||
},
|
||||
{
|
||||
name: "天地图矢量注记",
|
||||
url: "http://t3.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=52d807a08ad1a0e039950cb65de3d49b",
|
||||
index: 3,
|
||||
},
|
||||
],
|
||||
token:
|
||||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiZmY0YjNlOC0xNDhlLTQ2NDctYmVjYi1mYWRhMjE0NzNhMTAiLCJpZCI6MTIyMDUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjA1NTk5NzB9.3vV7ACQa7bCp-SoXaWGm36wNF3EgoqvYpAJ8xPIPPfs",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
initmap(coordinate) {
|
||||
let that = this;
|
||||
that.map = new Map({
|
||||
target: "map",
|
||||
view: new View({
|
||||
center: coordinate,
|
||||
projection: "EPSG:4326",
|
||||
zoom: 12,
|
||||
}),
|
||||
});
|
||||
for (let i = 0; i < that.mapData.length; i++) {
|
||||
let layer = that.mapData[i];
|
||||
let name = layer.name;
|
||||
let url = layer.url;
|
||||
let tileLayer = new TileLayer({
|
||||
title: name,
|
||||
source: new XYZ({
|
||||
crossOrigin: "anonymous",
|
||||
url: url,
|
||||
}),
|
||||
});
|
||||
tileLayer.setZIndex(layer.index);
|
||||
let key = i.toString();
|
||||
that.baseLayers[key] = tileLayer;
|
||||
if (i === 0 || i === 1) {
|
||||
tileLayer.setVisible(false);
|
||||
}
|
||||
that.map.addLayer(tileLayer);
|
||||
}
|
||||
that.ol3d = new OLCesium({ map: that.map }); // map is the ol.Map instance
|
||||
that.ol3d.setEnabled(that.is3D);
|
||||
window.ol3d = that.ol3d; // temporary hack for easy console debugging
|
||||
that.$emit("view", that.ol3d);
|
||||
that.$emit("mapView", that.ol3d.getOlMap());
|
||||
},
|
||||
init() {
|
||||
var geoLocation = new BMap.Geolocation();
|
||||
var coordinate = [];
|
||||
var that = this;
|
||||
if (
|
||||
this.$store.state.LocalLocation.currentPosition != "" &&
|
||||
this.$store.state.LocalLocation.currentLocation != ""
|
||||
) {
|
||||
coordinate.push(this.$store.state.LocalLocation.currentPosition.lng);
|
||||
coordinate.push(this.$store.state.LocalLocation.currentPosition.lat);
|
||||
if (coordinate == []) {
|
||||
coordinate = [116.397499, 39.90871];
|
||||
}
|
||||
this.initmap(coordinate);
|
||||
} else {
|
||||
geoLocation.getCurrentPosition(function (res) {
|
||||
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
|
||||
var currentPosition = res.point;
|
||||
var currentLocation = res.address;
|
||||
that.$store.dispatch("updateLocation", {
|
||||
location: currentLocation,
|
||||
});
|
||||
that.$store.dispatch("updatePosition", {
|
||||
position: currentPosition,
|
||||
});
|
||||
coordinate.push(
|
||||
that.$store.state.LocalLocation.currentPosition.lng
|
||||
);
|
||||
coordinate.push(
|
||||
that.$store.state.LocalLocation.currentPosition.lat
|
||||
);
|
||||
that.initmap(coordinate);
|
||||
} else {
|
||||
that.$message.info("位置权限未打开，请重新操作！");
|
||||
coordinate = [116.397499, 39.90871];
|
||||
that.initmap(coordinate);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
change3D: function (callback) {
|
||||
this.is3D = !this.is3D;
|
||||
this.ol3d.setEnabled(this.is3D);
|
||||
},
|
||||
changeMap: function (callback) {
|
||||
this.isImg = !this.isImg;
|
||||
if (this.isImg) {
|
||||
// 显示影像图层，设置矢量图层不可见
|
||||
this.baseLayers["0"].setVisible(true);
|
||||
this.baseLayers["1"].setVisible(true);
|
||||
this.baseLayers["2"].setVisible(false);
|
||||
this.baseLayers["3"].setVisible(false);
|
||||
} else {
|
||||
// 显示矢量图层，设置影像图层不可见
|
||||
this.baseLayers["0"].setVisible(false);
|
||||
this.baseLayers["1"].setVisible(false);
|
||||
this.baseLayers["2"].setVisible(true);
|
||||
this.baseLayers["3"].setVisible(true);
|
||||
}
|
||||
},
|
||||
},
|
||||
store,
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#control {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
bottom: 20px;
|
||||
right: 60px;
|
||||
}
|
||||
#map {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
}
|
||||
body {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
.map-img {
|
||||
width: 80px;
|
||||
height: 100px;
|
||||
}
|
||||
.map-type-button {
|
||||
width: 50px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.map-control .map-type-button {
|
||||
margin-right: 35px;
|
||||
}
|
||||
</style>
|
||||
1246
src/components/Statistic/statPage.vue
Normal file
1246
src/components/Statistic/statPage.vue
Normal file
File diff suppressed because it is too large
Load Diff
5100
src/components/Supervision/ViewTask.vue
Normal file
5100
src/components/Supervision/ViewTask.vue
Normal file
File diff suppressed because it is too large
Load Diff
42
src/components/SvgIcon/index.vue
Normal file
42
src/components/SvgIcon/index.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<svg :class="svgClass" aria-hidden="true">
|
||||
<use :xlink:href="iconName"></use>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'svg-icon',
|
||||
props: {
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconName() {
|
||||
return `#icon-${this.iconClass}`
|
||||
},
|
||||
svgClass() {
|
||||
if (this.className) {
|
||||
return 'svg-icon ' + this.className
|
||||
} else {
|
||||
return 'svg-icon'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
1611
src/components/TaskManagement/manage/DataManage.vue
Normal file
1611
src/components/TaskManagement/manage/DataManage.vue
Normal file
File diff suppressed because it is too large
Load Diff
1413
src/components/TaskManagement/manage/ManualAllocate.vue
Normal file
1413
src/components/TaskManagement/manage/ManualAllocate.vue
Normal file
File diff suppressed because it is too large
Load Diff
99
src/components/TaskManagement/manage/TPManage.vue
Normal file
99
src/components/TaskManagement/manage/TPManage.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div id="TPcontainer">
|
||||
<el-container style="height: 100%">
|
||||
<el-aside class="MyAside">
|
||||
<el-menu
|
||||
background-color="#F7F8F1"
|
||||
text-color="rgb(38,70,114)"
|
||||
active-text-color="#3A87F9"
|
||||
:default-active="this.$route.path"
|
||||
router
|
||||
>
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-folder-opened"></i>任务管理
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item :index="'/main'">任务管理</el-menu-item>
|
||||
<el-menu-item :index="'/datamanage'">数据管理</el-menu-item>
|
||||
<el-menu-item :index="'/taskmanage'">任务分配</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-menu-item
|
||||
:index="'/usermanage'"
|
||||
style="padding-left: 10px !important"
|
||||
>
|
||||
<i class="el-icon-user-solid"></i>用户管理
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-main class="tpcontent">
|
||||
<router-view class="view" style="padding: 20px"></router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
method: {},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.MyAside {
|
||||
width: 255px !important;
|
||||
opacity: 0.9;
|
||||
background-color: #f7f8f1;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
line-height: 200px;
|
||||
z-index: 10;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.tpcontent {
|
||||
position: absolute;
|
||||
left: 255px;
|
||||
right: 0px;
|
||||
width: calc(100% - 255px);
|
||||
padding: 0px;
|
||||
background: #fff;
|
||||
}
|
||||
.MyAside .usermp {
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) and (max-width: 1401px) {
|
||||
.tpcontent {
|
||||
position: absolute;
|
||||
left: 255px;
|
||||
width: calc(100% - 255px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 420px) and (max-width: 840px) {
|
||||
.MyAside {
|
||||
width: 160px !important;
|
||||
}
|
||||
.tpcontent {
|
||||
position: absolute;
|
||||
left: 160px;
|
||||
width: calc(100% - 160px);
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 420px) {
|
||||
.MyAside {
|
||||
width: 120px !important;
|
||||
}
|
||||
.tpcontent {
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
632
src/components/TaskManagement/manage/TaskManage.vue
Normal file
632
src/components/TaskManagement/manage/TaskManage.vue
Normal file
@@ -0,0 +1,632 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 添加搜索区域 -->
|
||||
<div class="search-container">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="请输入关键词进行搜索"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
size="small"
|
||||
style="width: 300px; margin-bottom: 20px;"
|
||||
@input="handleSearch"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<!-- <h2 style="text-align: left">任务</h2>
|
||||
<h5 style="text-align: left">管理任务人员</h5> -->
|
||||
<el-table
|
||||
:data="filteredData"
|
||||
max-height="720px"
|
||||
style="width: 100%;"
|
||||
:header-cell-class-name="sinClo"
|
||||
>
|
||||
<el-table-column
|
||||
prop="taskName"
|
||||
label="任务名称"
|
||||
min-width="100"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column min-width="110" filterable label="是否需要分配" sortable>
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span>是否需要分配</span>
|
||||
<el-dropdown @command="handleFilter" style="margin-left: 5px;">
|
||||
<span class="el-dropdown-link">
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="all">全部</el-dropdown-item>
|
||||
<el-dropdown-item command="need">需要分配</el-dropdown-item>
|
||||
<el-dropdown-item command="notNeed">不需分配</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox
|
||||
label="需要分配"
|
||||
v-model="scope.row.isAllocationOptional"
|
||||
@change="changeisAllocationOptional(scope.row.id)"
|
||||
></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="95" filterable label="是否已分配" sortable>
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox
|
||||
label="已分配"
|
||||
v-model="scope.row.allocated"
|
||||
disabled
|
||||
></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
header-align="center"
|
||||
class-name="comClo"
|
||||
label="自动分配"
|
||||
>
|
||||
<el-table-column min-width="120" label="工作区域">
|
||||
<template slot-scope="scope">
|
||||
<el-upload
|
||||
accept=".shp"
|
||||
class="upload-demo"
|
||||
action="shp"
|
||||
:auto-upload="false"
|
||||
:limit="1"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:on-change="
|
||||
(file, fileList) => {
|
||||
getFile(file, fileList, scope.row.id);
|
||||
}
|
||||
"
|
||||
:on-remove="
|
||||
(file, fileList) => {
|
||||
removeFile(file, fileList, scope.row.id);
|
||||
}
|
||||
"
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
plain
|
||||
:disabled="!scope.row.isAllocationOptional"
|
||||
>上传shp数据</el-button
|
||||
>
|
||||
</el-upload>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="120" filterable label="任务人员">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
size="small"
|
||||
@click.native="selectWorkers(scope.row.id)"
|
||||
:disabled="!scope.row.isAllocationOptional"
|
||||
>选择任务人员</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="100" label="划分等级">
|
||||
<template slot-scope="scope">
|
||||
<el-select
|
||||
v-model="scope.row.precision"
|
||||
size="small"
|
||||
placeholder="请选择"
|
||||
:disabled="!scope.row.isAllocationOptional"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in precisionOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="100" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click.native="submitUploadShp(scope.row.id)"
|
||||
:disabled="!scope.row.isAllocationOptional"
|
||||
>自动分配</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="100" label="手动分配">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
style="margin-left: 10px !important"
|
||||
size="small"
|
||||
@click.native="manualAllocate(scope.row.id, false)"
|
||||
:disabled="!scope.row.isAllocationOptional"
|
||||
>手动分配</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
class="taskDialog"
|
||||
title="选择任务人员"
|
||||
:visible.sync="WorkersVisible"
|
||||
:close-on-click-modal="false"
|
||||
style="position: absolute !important"
|
||||
>
|
||||
<el-table
|
||||
:data="workers"
|
||||
:height="400"
|
||||
stripe
|
||||
highlight-current-row
|
||||
class="tb-edit"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="index" min-width="40"></el-table-column>
|
||||
<el-table-column prop="username" label="工作人员" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-select
|
||||
v-model="scope.row.username"
|
||||
filterable
|
||||
placeholder="请选择"
|
||||
@focus="makeuername(scope.$index)"
|
||||
@change="makeId(scope.$index)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectworkersdata"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="role" label="工作角色" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.role" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in roleOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" min-width="80">
|
||||
<template slot="header">
|
||||
<el-button @click="addWorker()" type="primary" class="allomapBtn"
|
||||
>添加人员</el-button
|
||||
>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click.native.prevent="deleteWorker(scope.$index)"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button type="primary" @click="UploadWorkers()" class="allomapBtn"
|
||||
>确认</el-button
|
||||
>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ajax as request } from "@/request.js";
|
||||
import axios from "axios";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
WorkersVisible: false,
|
||||
DialogVisible: false,
|
||||
workersIndex: -1,
|
||||
tasksData: [],
|
||||
filteredData: [], // 过滤后的数据
|
||||
currentFilter: 'all', // 当前筛选状态
|
||||
workers: [],
|
||||
selectworkersdata: [],
|
||||
options: [],
|
||||
roleOptions: [
|
||||
{
|
||||
value: "0",
|
||||
label: "采集人员",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "巡查人员",
|
||||
},
|
||||
],
|
||||
precisionOptions: [
|
||||
{
|
||||
value: "0",
|
||||
label: "默认",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1(2500km)",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2(630km)",
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "3(78km)",
|
||||
},
|
||||
{
|
||||
value: "4",
|
||||
label: "4(20km)",
|
||||
},
|
||||
{
|
||||
value: "5",
|
||||
label: "5(2.4km)",
|
||||
},
|
||||
{
|
||||
value: "6",
|
||||
label: "6(610m)",
|
||||
},
|
||||
{
|
||||
value: "7",
|
||||
label: "7(76m)",
|
||||
},
|
||||
{
|
||||
value: "8",
|
||||
label: "8(19.11m)",
|
||||
},
|
||||
{
|
||||
value: "9",
|
||||
label: "9(4.78m)",
|
||||
},
|
||||
{
|
||||
value: "10",
|
||||
label: "10(0.5971m)",
|
||||
},
|
||||
{
|
||||
value: "11",
|
||||
label: "11(0.1492m)",
|
||||
},
|
||||
{
|
||||
value: "12",
|
||||
label: "12(0.0186m)",
|
||||
},
|
||||
],
|
||||
searchKeyword: "", // 搜索关键词
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 搜索处理方法
|
||||
handleSearch() {
|
||||
this.applyFilter();
|
||||
},
|
||||
|
||||
// 应用筛选和搜索
|
||||
applyFilter() {
|
||||
let filtered = [...this.tasksData];
|
||||
|
||||
// 先应用分配状态筛选
|
||||
if (this.currentFilter === 'need') {
|
||||
filtered = filtered.filter(item => item.isAllocationOptional === true);
|
||||
} else if (this.currentFilter === 'notNeed') {
|
||||
filtered = filtered.filter(item => item.isAllocationOptional === false);
|
||||
}
|
||||
|
||||
// 再应用搜索关键词筛选
|
||||
if (this.searchKeyword.trim()) {
|
||||
const keyword = this.searchKeyword.toLowerCase();
|
||||
filtered = filtered.filter(item => {
|
||||
return item.taskName && item.taskName.toLowerCase().includes(keyword);
|
||||
});
|
||||
}
|
||||
|
||||
this.filteredData = filtered;
|
||||
},
|
||||
|
||||
// 筛选处理方法
|
||||
handleFilter(command) {
|
||||
this.currentFilter = command;
|
||||
this.applyFilter();
|
||||
},
|
||||
|
||||
// 修改方法参数，从index改为taskId
|
||||
changeisAllocationOptional(taskId) {
|
||||
let row = this.tasksData.find(item => item.id === taskId);
|
||||
if (!row) return;
|
||||
|
||||
let that = this;
|
||||
let str = row.isAllocationOptional === true
|
||||
? "确认任务需要分配吗？"
|
||||
: "确认任务无需分配吗？";
|
||||
let res = row.isAllocationOptional === true ? 0 : 1;
|
||||
|
||||
this.$confirm(str, "提示", {})
|
||||
.then(() => {
|
||||
request({
|
||||
url: "/allocation/optional",
|
||||
method: "get",
|
||||
params: {
|
||||
taskId: taskId,
|
||||
optional: res,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success == true) {
|
||||
that.$message.success("设置成功");
|
||||
|
||||
// 重新获取数据以确保状态同步
|
||||
that.init();
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
} else {
|
||||
that.$message.error("设置失败");
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
// 取消操作，不需要回滚状态
|
||||
});
|
||||
},
|
||||
init() {
|
||||
let that = this;
|
||||
// 请求任务列表
|
||||
request({
|
||||
url: "/task/selectTaskHasCreated",
|
||||
method: "get",
|
||||
}).then(function (response) {
|
||||
if (response.data.success == true) {
|
||||
var jsondata = JSON.parse(response.data.data);
|
||||
that.tasksData = jsondata.data;
|
||||
//0表示需要分配
|
||||
for (var i = 0; i < that.tasksData.length; i++) {
|
||||
if (that.tasksData[i].isAllocationOptional == 0) {
|
||||
that.tasksData[i].isAllocationOptional = true;
|
||||
} else {
|
||||
that.tasksData[i].isAllocationOptional = false;
|
||||
}
|
||||
if (that.tasksData[i].allocated == "true") {
|
||||
that.tasksData[i].allocated = true;
|
||||
} else {
|
||||
that.tasksData[i].allocated = false;
|
||||
}
|
||||
}
|
||||
// 应用当前筛选和搜索
|
||||
that.applyFilter();
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
request({
|
||||
url: "/user/all_worker",
|
||||
method: "get",
|
||||
}).then(function (response) {
|
||||
if (response.data.success == true) {
|
||||
var worksdata = response.data.data;
|
||||
that.options = [];
|
||||
for (var i = 0; i < worksdata.length; i++) {
|
||||
that.options.push({
|
||||
value: worksdata[i].id,
|
||||
label: worksdata[i].username,
|
||||
});
|
||||
}
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
},
|
||||
// onchange文件改变时的钩子 可以通过参数file找到文件 filr.raw获取文件流
|
||||
getFile(file, fileList, taskId) {
|
||||
let row = this.tasksData.find(item => item.id === taskId);
|
||||
if (!row) return;
|
||||
|
||||
let fileList1 = [];
|
||||
fileList1.push(file.raw);
|
||||
row.fileList = fileList1;
|
||||
},
|
||||
submitUploadShp(taskId) {
|
||||
let row = this.tasksData.find(item => item.id === taskId);
|
||||
if (!row) return;
|
||||
|
||||
if (row.allocated) {
|
||||
let that = this;
|
||||
this.$confirm("任务已经完成自动分配，是否重新分配？", "提示", {
|
||||
cancelButtonText: "取消",
|
||||
confirmButtonText: "确定",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
that.AutoTask(taskId);
|
||||
})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
this.AutoTask(taskId);
|
||||
}
|
||||
},
|
||||
AutoTask(taskId) {
|
||||
let row = this.tasksData.find(item => item.id === taskId);
|
||||
if (!row) return;
|
||||
|
||||
let that = this;
|
||||
let fd = new FormData();
|
||||
if (row.fileList && row.fileList[0]) {
|
||||
fd.append("shp", row.fileList[0]);
|
||||
} else {
|
||||
that.$alert("请上传shp文件！", "提示", { confirmButtonText: "确定" });
|
||||
return;
|
||||
}
|
||||
if (!row.workers) {
|
||||
that.$alert("请选择任务人员！", "提示", { confirmButtonText: "确定" });
|
||||
return;
|
||||
}
|
||||
fd.append("taskId", taskId);
|
||||
fd.append("workers", JSON.stringify(row.workers));
|
||||
if (row.precision) {
|
||||
fd.append("precision", row.precision);
|
||||
}
|
||||
axios({
|
||||
url: "/allocation/assignment",
|
||||
method: "post",
|
||||
data: fd,
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success == true) {
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "自动分配完成！",
|
||||
});
|
||||
that.manualAllocate(taskId, true);
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: response.data.message,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
if (file.type != "shp") {
|
||||
this.$message.error("只能上传shp格式数据!");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
selectWorkers(taskId) {
|
||||
let row = this.tasksData.find(item => item.id === taskId);
|
||||
if (!row) return;
|
||||
|
||||
this.workersIndex = taskId; // 存储任务ID而不是索引
|
||||
if (row.workers) {
|
||||
this.workers = row.workers;
|
||||
} else {
|
||||
this.workers = [];
|
||||
}
|
||||
this.WorkersVisible = true;
|
||||
},
|
||||
addWorker() {
|
||||
let row = this.tasksData.find(item => item.id === this.workersIndex);
|
||||
if (!row) return;
|
||||
|
||||
if (row.taskType === "0") {
|
||||
this.workers.push({
|
||||
username: "",
|
||||
role: "0",
|
||||
});
|
||||
} else {
|
||||
this.workers.push({
|
||||
username: "",
|
||||
role: "1",
|
||||
});
|
||||
}
|
||||
},
|
||||
removeFile(file, fileList, taskId) {
|
||||
let row = this.tasksData.find(item => item.id === taskId);
|
||||
if (!row) return;
|
||||
|
||||
row.fileList = [];
|
||||
},
|
||||
deleteWorker(index) {
|
||||
this.workers.splice(index, 1);
|
||||
},
|
||||
UploadWorkers() {
|
||||
for (var i = 0; i < this.workers.length; i++) {
|
||||
if (this.workers[i].username == "") {
|
||||
this.$alert("任务人员不可为空！", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
let row = this.tasksData.find(item => item.id === this.workersIndex);
|
||||
if (row) {
|
||||
row.workers = this.workers;
|
||||
}
|
||||
this.WorkersVisible = false;
|
||||
// this.$alert(this.tasksData[this.workersIndex].workers, '提示', {confirmButtonText: '确定'})
|
||||
},
|
||||
makeuername() {
|
||||
this.selectworkersdata = this.options.slice();
|
||||
for (var i = 0; i < this.workers.length; i++) {
|
||||
for (var j = 0; j < this.selectworkersdata.length; j++) {
|
||||
if (this.selectworkersdata[j].label == this.workers[i].username) {
|
||||
this.selectworkersdata.splice(j, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
makeId(index) {
|
||||
for (var j = 0; j < this.options.length; j++) {
|
||||
if (this.options[j].label == this.workers[index].username) {
|
||||
this.workers[index].id = this.options[j].value;
|
||||
}
|
||||
}
|
||||
},
|
||||
manualAllocate(taskId, isRequest) {
|
||||
let row = this.tasksData.find(item => item.id === taskId);
|
||||
if (!row) return;
|
||||
|
||||
if (isRequest) {
|
||||
this.$router.push({
|
||||
path: "/manualallocate/" + taskId + "/" + row.taskName,
|
||||
});
|
||||
} else {
|
||||
request({
|
||||
url: "/allocation/is_assigned?taskId=" + Number(taskId),
|
||||
method: "get",
|
||||
}).then((response) => {
|
||||
if (response.data.data) {
|
||||
this.$router.push({
|
||||
path: "/manualallocate/" + taskId + "/" + row.taskName,
|
||||
});
|
||||
} else if (response.data.status == "401") {
|
||||
this.$alert(response.data.message);
|
||||
this.$router.push({ path: "/login" });
|
||||
} else {
|
||||
this.$notify.error({
|
||||
title: "提示",
|
||||
message: response.data.message + "，" + "请先进行自动分配",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
sinClo({ row, column, rowIndex, columnIndex }) {
|
||||
if (!(columnIndex == 3 && rowIndex == 0)) {
|
||||
return "sinCl";
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
|
||||
background-color: rgb(89, 103, 120) !important;
|
||||
border-color: #304156 !important;
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.el-dropdown-link:hover {
|
||||
color: #66b1ff;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
547
src/components/TaskManagement/manage/UserManage.vue
Normal file
547
src/components/TaskManagement/manage/UserManage.vue
Normal file
@@ -0,0 +1,547 @@
|
||||
<template>
|
||||
<div style="height: (screenHeight-300)+'px'">
|
||||
<div id="buttomContain">
|
||||
<div class="search-container">
|
||||
<el-input
|
||||
style="width: 300px; margin-right: 15px;"
|
||||
placeholder="请输入用户名搜索"
|
||||
v-model="inputUsername"
|
||||
>
|
||||
<i
|
||||
slot="suffix"
|
||||
class="el-input__icon el-icon-search"
|
||||
@click="searchUser()"
|
||||
></i>
|
||||
<i
|
||||
slot="suffix"
|
||||
class="el-input__icon el-icon-circle-close"
|
||||
@click="cancelSearch()"
|
||||
></i>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<el-button
|
||||
id="buttonStyle"
|
||||
size="small"
|
||||
style="margin-top: 20px"
|
||||
@click="adduser1()"
|
||||
>添加用户</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
id="tableStyle"
|
||||
:data="usersData"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="sinCl"
|
||||
>
|
||||
<el-table-column
|
||||
fixed="left"
|
||||
prop="username"
|
||||
label="用户名称"
|
||||
min-width="100"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
fixed="left"
|
||||
prop="realName"
|
||||
label="真实姓名"
|
||||
min-width="100"
|
||||
></el-table-column>
|
||||
<el-table-column prop="role" label="权限" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-select size="small" v-model="scope.row.role" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in idenOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="280" fixed="right" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.native="EditField(scope.$index)"
|
||||
>确认</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.native="deleteField(scope.$index)"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.native="resetPassword(scope.$index)"
|
||||
>重置密码</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 50px">
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:page-count="dataPageNum"
|
||||
@current-change="pageChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
class="taskDialog"
|
||||
title="添加用户"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="dialogVisible"
|
||||
>
|
||||
<div style="text-align: left">
|
||||
<el-form
|
||||
ref="account"
|
||||
:model="account"
|
||||
:rules="rules"
|
||||
label-width="130px"
|
||||
style="margin-top: 20px"
|
||||
>
|
||||
<el-form-item prop="username" label="用户名：">
|
||||
<el-input
|
||||
style="width: 90%"
|
||||
type="text"
|
||||
v-model="account.username"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入用户名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="realName" label="真实姓名：">
|
||||
<el-input
|
||||
style="width: 90%"
|
||||
type="text"
|
||||
v-model="account.realName"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入真实姓名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" label="密码：">
|
||||
<el-input
|
||||
style="width: 90%"
|
||||
type="password"
|
||||
v-model="account.password"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password1" label="确认密码：">
|
||||
<el-input
|
||||
style="width: 90%"
|
||||
type="password"
|
||||
v-model="account.password1"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请确认密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="role" label="权限：">
|
||||
<el-select
|
||||
style="width: 90%"
|
||||
size="small"
|
||||
v-model="account.role"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in idenOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-button id="buttonStyle" size="small" @click="addUser()"
|
||||
>确认</el-button
|
||||
>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ajax as request } from "@/request.js";
|
||||
import md5 from "js-md5";
|
||||
export default {
|
||||
data() {
|
||||
var validatePass = (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请再次输入密码"));
|
||||
} else if (value !== this.account.password) {
|
||||
callback(new Error("两次输入密码不一致!"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validpassword = (rule, value, callback) => {
|
||||
let reg = /[0-9a-zA-Z]{6,18}/;
|
||||
if (!reg.test(value)) {
|
||||
callback(new Error("密码必须是由6-18位数字和字母组合"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
isSearch: false,
|
||||
currentSearchUser: "",
|
||||
inputUsername: "",
|
||||
dataPageNum: 1,
|
||||
currentPage: 1,
|
||||
account: {
|
||||
username: "",
|
||||
realName: "",
|
||||
password: "",
|
||||
password1: "",
|
||||
role: "Worker",
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: "请输入用户名", trigger: "blur" },
|
||||
{ min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" },
|
||||
],
|
||||
realName: [
|
||||
{ required: true, message: "请输入真实姓名", trigger: "blur" },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||
{ validator: validpassword, trigger: "blur" },
|
||||
],
|
||||
password1: [
|
||||
{ required: true, message: "请再次输入密码", trigger: "blur" },
|
||||
{ validator: validatePass, trigger: "blur" },
|
||||
],
|
||||
},
|
||||
dialogVisible: false,
|
||||
screenHeight: document.documentElement.clientHeight,
|
||||
usersData: [],
|
||||
idenOptions: [
|
||||
{
|
||||
value: "Admin",
|
||||
label: "管理员",
|
||||
},
|
||||
{
|
||||
value: "Leader",
|
||||
label: "领导人员",
|
||||
},
|
||||
{
|
||||
value: "Worker",
|
||||
label: "外业人员",
|
||||
},
|
||||
{
|
||||
value: "Operator",
|
||||
label: "工作人员",
|
||||
},
|
||||
{
|
||||
value: "SuperAdmin",
|
||||
label: "超级管理员",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let that = this;
|
||||
request({
|
||||
url: "/user/all",
|
||||
method: "get",
|
||||
params: {
|
||||
page: 1,
|
||||
},
|
||||
}).then(function (response) {
|
||||
//登录成功获取数据存入usersData
|
||||
if (response.data.success) {
|
||||
that.usersData = response.data.data.users;
|
||||
that.dataPageNum = response.data.data.totalPages;
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
},
|
||||
pageChange(val) {
|
||||
let that = this;
|
||||
this.usersData = [];
|
||||
this.currentPage = val;
|
||||
if (this.isSearch) {
|
||||
request({
|
||||
url: "/user/search",
|
||||
method: "post",
|
||||
params: { page: 1, username: that.currentSearchUser },
|
||||
}).then(function (response) {
|
||||
//上传成功
|
||||
if (response.data.success) {
|
||||
that.usersData = response.data.data.users;
|
||||
that.dataPageNum = response.data.data.totalPages;
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
} else {
|
||||
request({
|
||||
url: "/user/all",
|
||||
method: "post",
|
||||
params: {
|
||||
page: val,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that.usersData = response.data.data.users;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
//重置密码
|
||||
resetPassword(index) {
|
||||
let that = this;
|
||||
this.$confirm("确认重置该用户密码？", "提示", {
|
||||
cancelButtonText: "取消",
|
||||
confirmButtonText: "确认",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
// 调用重置密码接口
|
||||
request({
|
||||
url: "/user/resetPassword",
|
||||
method: "post",
|
||||
params: {
|
||||
id: that.usersData[index].id,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "密码已成功重置为默认密码！",
|
||||
});
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: response.data.message || "密码重置失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
// 刷新用户列表
|
||||
request({
|
||||
url: "/user/all",
|
||||
method: "post",
|
||||
params: {
|
||||
page: that.currentPage,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that.usersData = response.data.data.users;
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
that.$notify.info({
|
||||
title: "提示",
|
||||
message: "已取消操作",
|
||||
});
|
||||
});
|
||||
},
|
||||
deleteField(index) {
|
||||
let that = this;
|
||||
this.$confirm("确认删除？", "提示", {
|
||||
cancelButtonText: "取消",
|
||||
confirmButtonText: "确认",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
request({
|
||||
url: "/user/delete",
|
||||
method: "post",
|
||||
params: {
|
||||
id: that.usersData[index].id,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "删除成功！",
|
||||
});
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: "删除失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
request({
|
||||
url: "/user/all",
|
||||
method: "post",
|
||||
params: {
|
||||
page: that.currentPage,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that.usersData = response.data.data.users;
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$notify.error({
|
||||
title: "提示",
|
||||
message: "删除失败",
|
||||
});
|
||||
});
|
||||
},
|
||||
EditField(index) {
|
||||
let that = this;
|
||||
request({
|
||||
url: "/user/role_change",
|
||||
method: "post",
|
||||
params: {
|
||||
id: that.usersData[index].id,
|
||||
role: that.usersData[index].role,
|
||||
},
|
||||
}).then(function (response) {
|
||||
//上传成功
|
||||
if (response.data.success) {
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "提交成功！",
|
||||
});
|
||||
that.init();
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
request({
|
||||
url: "/user/all",
|
||||
method: "post",
|
||||
params: {
|
||||
page: that.currentPage,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that.usersData = response.data.data.users;
|
||||
}
|
||||
});
|
||||
},
|
||||
cancelSearch() {
|
||||
this.isSearch = false;
|
||||
this.inputUsername = "";
|
||||
},
|
||||
searchUser() {
|
||||
this.isSearch = true;
|
||||
let that = this;
|
||||
this.currentSearchUser = this.inputUsername;
|
||||
request({
|
||||
url: "/user/search",
|
||||
method: "post",
|
||||
params: { page: 1, username: that.currentSearchUser },
|
||||
}).then(function (response) {
|
||||
//上传成功
|
||||
if (response.data.success) {
|
||||
that.usersData = response.data.data.users;
|
||||
that.dataPageNum = response.data.data.totalPages;
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: "未查找到符合条件的用户！",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
addUser() {
|
||||
let that = this;
|
||||
this.$refs.account.validate((valid) => {
|
||||
if (valid) {
|
||||
let that = this;
|
||||
request({
|
||||
url: "/user/new",
|
||||
method: "post",
|
||||
params: {
|
||||
username: that.account.username,
|
||||
realName: that.account.realName,
|
||||
password: md5(md5(that.account.password)),
|
||||
role: that.account.role,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that.dialogVisible = false;
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "添加成功！",
|
||||
});
|
||||
that.init();
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
adduser1() {
|
||||
this.dialogVisible = true;
|
||||
this.account = {
|
||||
username: "",
|
||||
realName: "",
|
||||
password: "",
|
||||
password1: "",
|
||||
role: "Worker",
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.el-input__inner {
|
||||
>>> &::placeholder {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
|
||||
#buttomContain {
|
||||
top: 5px;
|
||||
right: 25px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.search-container {
|
||||
/* 搜索容器靠左 */
|
||||
}
|
||||
|
||||
.button-container {
|
||||
/* 按钮容器靠右 */
|
||||
}
|
||||
|
||||
#tableStyle {
|
||||
top: 50px;
|
||||
margin-bottom: 30px;
|
||||
height: 600px;
|
||||
}
|
||||
>>> .el-pager li {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
>>> .el-pagination button {
|
||||
background: #fff !important;
|
||||
}
|
||||
</style>
|
||||
114
src/components/TaskManagement/xml/HelloWorld.vue
Normal file
114
src/components/TaskManagement/xml/HelloWorld.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<h2>Essential Links</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://vuejs.org"
|
||||
target="_blank"
|
||||
>
|
||||
Core Docs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://forum.vuejs.org"
|
||||
target="_blank"
|
||||
>
|
||||
Forum
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://chat.vuejs.org"
|
||||
target="_blank"
|
||||
>
|
||||
Community Chat
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://twitter.com/vuejs"
|
||||
target="_blank"
|
||||
>
|
||||
Twitter
|
||||
</a>
|
||||
</li>
|
||||
<br>
|
||||
<li>
|
||||
<a
|
||||
href="http://vuejs-templates.github.io/webpack/"
|
||||
target="_blank"
|
||||
>
|
||||
Docs for This Template
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Ecosystem</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="http://router.vuejs.org/"
|
||||
target="_blank"
|
||||
>
|
||||
vue-router
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="http://vuex.vuejs.org/"
|
||||
target="_blank"
|
||||
>
|
||||
vuex
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="http://vue-loader.vuejs.org/"
|
||||
target="_blank"
|
||||
>
|
||||
vue-loader
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/awesome-vue"
|
||||
target="_blank"
|
||||
>
|
||||
awesome-vue
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
data () {
|
||||
return {
|
||||
msg: 'Welcome to Your Vue.js App'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h1, h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
558
src/components/TaskManagement/xml/basemap.vue
Normal file
558
src/components/TaskManagement/xml/basemap.vue
Normal file
@@ -0,0 +1,558 @@
|
||||
<template>
|
||||
<div id="tablecontainer">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
height="90%"
|
||||
highlight-current-row
|
||||
class="tb-edit"
|
||||
style="width: 98%; margin-left: 10px"
|
||||
header-cell-class-name="sinCl"
|
||||
>
|
||||
<el-table-column type="index" min-width="40"></el-table-column>
|
||||
<el-table-column prop="name" label="名称" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-if="getInfo == '1'"
|
||||
size="small"
|
||||
v-model="scope.row.name"
|
||||
placeholder="请输入内容"
|
||||
></el-input>
|
||||
<span v-else>{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="地图类型" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-select
|
||||
v-if="getInfo == '1'"
|
||||
size="small"
|
||||
v-model="scope.row.type"
|
||||
placeholder="请选择"
|
||||
@change="makeType(scope.row.type, scope.$index)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<span v-else>{{ scope.row.type }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 修改type后必须每个控件都绑定一个列表 不然会出现中英文跳转的问题 -->
|
||||
<el-table-column prop="subType" label="枚举子类型" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<!-- @focus="makeSubType(scope.$index)" -->
|
||||
<el-select
|
||||
v-if="getInfo == '1'"
|
||||
size="small"
|
||||
v-model="scope.row.subType"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in getSubType(scope.$index)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<span v-else>{{ scope.row.subType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="group" label="分组" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-select
|
||||
v-if="getInfo == '1'"
|
||||
size="small"
|
||||
v-model="scope.row.group"
|
||||
placeholder="请选择"
|
||||
@focus="makeGroup(scope.$index)"
|
||||
@change="makeGroup(scope.$index)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in groupOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<span v-else>{{ scope.row.group }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="index"
|
||||
label="显示顺序"
|
||||
min-width="100"
|
||||
:render-header="renderHeader"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-if="getInfo == '1'"
|
||||
size="small"
|
||||
v-model="scope.row.index"
|
||||
placeholder="请输入内容"
|
||||
></el-input>
|
||||
<span v-else>{{ scope.row.index }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="url" label="地址" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-if="
|
||||
(scope.row.type == 'ArcGISTiledLayer' ||
|
||||
scope.row.type == 'ArcGISMapImageLayer' ||
|
||||
scope.row.type == 'ArcGISVectorTiledLayer') &&
|
||||
getInfo == '1'
|
||||
"
|
||||
size="small"
|
||||
v-model="scope.row.url"
|
||||
placeholder="请输入内容"
|
||||
></el-input>
|
||||
<span v-else>{{ scope.row.url }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="150" v-if="getInfo == '1'">
|
||||
<template slot="header">
|
||||
<el-button id="buttonStyle1" size="small" @click="addRow()"
|
||||
>添加图层</el-button
|
||||
>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click.native.prevent="deleteRow(scope.$index)"
|
||||
type="text"
|
||||
size="small"
|
||||
v-if="getInfo == '1'"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button
|
||||
id="buttonStyle"
|
||||
size="small"
|
||||
v-if="getInfo == '1'"
|
||||
style="margin-top: 5px; margin-bottom: 5px"
|
||||
@click="backUploadData()"
|
||||
>上一步</el-button
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
v-if="getInfo == '1'"
|
||||
style="margin-top: 5px; margin-bottom: 5px"
|
||||
@click="UploadData()"
|
||||
>保存</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { store } from "@/components/vuex/store.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: "",
|
||||
key: "",
|
||||
name: "",
|
||||
getInfo: sessionStorage.getItem("getInfo"),
|
||||
options: [
|
||||
{
|
||||
value: "tianditu",
|
||||
label: "天地图",
|
||||
},
|
||||
{
|
||||
value: "amap",
|
||||
label: "高德",
|
||||
},
|
||||
{
|
||||
value: "esri",
|
||||
label: "esri",
|
||||
},
|
||||
{
|
||||
value: "OpenStreetMapLayer",
|
||||
label: "OpenStreetMapLayer",
|
||||
},
|
||||
{
|
||||
value: "ArcGISTiledLayer",
|
||||
label: "ArcGISTiledLayer",
|
||||
},
|
||||
{
|
||||
value: "ArcGISMapImageLayer",
|
||||
label: "ArcGISMapImageLayer",
|
||||
},
|
||||
{
|
||||
value: "ArcGISVectorTiledLayer",
|
||||
label: "ArcGISVectorTiledLayer",
|
||||
},
|
||||
],
|
||||
// subtypeOptions: [], // 可以不用了by lbz 20210703
|
||||
//尝试修改 by lbz 避免子类型的字符串判断 20210703
|
||||
tiandituOptions: [
|
||||
{
|
||||
value: "VEC_C",
|
||||
label: "矢量底图(WGS84)",
|
||||
},
|
||||
{
|
||||
value: "CVA_C",
|
||||
label: "矢量注记(WGS84)",
|
||||
},
|
||||
{
|
||||
value: "IMG_C",
|
||||
label: "影像底图(WGS84)",
|
||||
},
|
||||
{
|
||||
value: "CIA_C",
|
||||
label: "影像注记(WGS84)",
|
||||
},
|
||||
{
|
||||
value: "TER_C",
|
||||
label: "地形晕渲(WGS84)",
|
||||
},
|
||||
{
|
||||
value: "VEC_W",
|
||||
label: "矢量底图(web mercator)",
|
||||
},
|
||||
{
|
||||
value: "CVA_W",
|
||||
label: "矢量注记(web mercator)",
|
||||
},
|
||||
{
|
||||
value: "IMG_W",
|
||||
label: "影像底图(web mercator)",
|
||||
},
|
||||
{
|
||||
value: "CIA_W",
|
||||
label: "影像注记(web mercator)",
|
||||
},
|
||||
{
|
||||
value: "TER_W",
|
||||
label: "地形晕渲(web mercator)",
|
||||
},
|
||||
],
|
||||
amapOptions: [
|
||||
{
|
||||
value: "AMAP_VECTOR",
|
||||
label: "矢量底图",
|
||||
},
|
||||
{
|
||||
value: "AMAP_IMAGE",
|
||||
label: "影像底图",
|
||||
},
|
||||
{
|
||||
value: "AMAP_IMAGE_LABEL",
|
||||
label: "影像底图注记",
|
||||
},
|
||||
],
|
||||
esriOptions: [
|
||||
{
|
||||
value: "NatGeo_World_Map",
|
||||
label: "国家地理地图",
|
||||
},
|
||||
{
|
||||
value: "USA_Topo_Maps",
|
||||
label: "美国地形图",
|
||||
},
|
||||
{
|
||||
value: "World_Imagery",
|
||||
label: "世界图像",
|
||||
},
|
||||
{
|
||||
value: "World_Physical_Map",
|
||||
label: "世界物理地图",
|
||||
},
|
||||
{
|
||||
value: "World_Shaded_Relief",
|
||||
label: "世界阴影浮雕",
|
||||
},
|
||||
{
|
||||
value: "World_Street_Map",
|
||||
label: "世界街道地图",
|
||||
},
|
||||
{
|
||||
value: "World_Terrain_Base",
|
||||
label: "世界地形基础地图",
|
||||
},
|
||||
{
|
||||
value: "World_Topo_Map",
|
||||
label: "世界地形图",
|
||||
},
|
||||
],
|
||||
groupOptions: [
|
||||
{
|
||||
value: "vector",
|
||||
label: "矢量分组",
|
||||
},
|
||||
{
|
||||
value: "image",
|
||||
label: "影像分组",
|
||||
},
|
||||
{
|
||||
value: "",
|
||||
label: "覆盖图层",
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
addRow() {
|
||||
this.tableData.push({
|
||||
name: "",
|
||||
index: "",
|
||||
subType: "",
|
||||
type: "",
|
||||
group: "",
|
||||
url: "",
|
||||
});
|
||||
},
|
||||
deleteRow(index) {
|
||||
this.$confirm("确认删除此图层", "提示", {
|
||||
cancelButtonText: "取消",
|
||||
confirmButtonText: "确定",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
// 删除
|
||||
this.tableData.splice(index, 1);
|
||||
})
|
||||
.catch(() => {
|
||||
this.$notify.error({
|
||||
title: "提示",
|
||||
message: "删除失败",
|
||||
});
|
||||
});
|
||||
},
|
||||
//提交数据
|
||||
backUploadData() {
|
||||
this.UploadData();
|
||||
this.$router.push({
|
||||
path:
|
||||
"/home/" + this.name + "/" + this.key + "/" + this.id + "/position",
|
||||
});
|
||||
},
|
||||
UploadData() {
|
||||
let that = this;
|
||||
//确认name\url\index是否填写 tmp为符合要求的标志
|
||||
for (var j = 0; j < this.tableData.length; j++) {
|
||||
if (this.tableData[j].name == "") {
|
||||
this.$alert("图层名称不可为空", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.tableData[j].index == "") {
|
||||
this.$alert("图层显示顺序不可为空", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.tableData[j].type == "") {
|
||||
this.$alert("地图类型不可为空", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (
|
||||
this.tableData[j].type == "ArcGISTiledLayer" ||
|
||||
this.tableData[j].type == "ArcGISMapImageLayer" ||
|
||||
this.tableData[j].type == "ArcGISVectorTiledLayer"
|
||||
) {
|
||||
if (this.tableData[j].url == "") {
|
||||
this.$alert("图层url不可为空", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$store.dispatch("updateBasemap", { basemap: this.tableData });
|
||||
this.$notify.success({
|
||||
title: "提示",
|
||||
message: "保存成功",
|
||||
});
|
||||
},
|
||||
//当subtype修改
|
||||
//可以不用了 by lbz 20210703
|
||||
// makeSubType(index) {
|
||||
// switch (this.tableData[index].type) {
|
||||
// case "tianditu":
|
||||
// this.subtypeOptions = this.tiandituOptions;
|
||||
// break;
|
||||
// case "amap":
|
||||
// this.subtypeOptions = this.amapOptions;
|
||||
// break;
|
||||
// case "esri":
|
||||
// this.subtypeOptions = this.esriOptions;
|
||||
// break;
|
||||
// default:
|
||||
// this.subtypeOptions = [];
|
||||
// break;
|
||||
// }
|
||||
// },
|
||||
getSubType(index) {
|
||||
switch (this.tableData[index].type) {
|
||||
case "tianditu":
|
||||
return this.tiandituOptions;
|
||||
case "amap":
|
||||
return this.amapOptions;
|
||||
case "esri":
|
||||
return this.esriOptions;
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
},
|
||||
//当group修改
|
||||
makeGroup(index) {
|
||||
switch (this.tableData[index].type) {
|
||||
case "tianditu":
|
||||
case "amap":
|
||||
case "esri":
|
||||
case "OpenStreetMapLayer":
|
||||
break;
|
||||
default:
|
||||
this.tableData[index].group = "";
|
||||
break;
|
||||
}
|
||||
},
|
||||
//当type修改 主要是修改subtype、group的值
|
||||
//尝试修改 by lbz 避免子类型的字符串判断 20210703
|
||||
makeType(type, index) {
|
||||
switch (type) {
|
||||
case "tianditu":
|
||||
this.tableData[index].subType = "VEC_C";
|
||||
this.tableData[index].url = "";
|
||||
if (this.tableData[index].group == "")
|
||||
this.tableData[index].group = "vector";
|
||||
break;
|
||||
case "amap":
|
||||
this.tableData[index].subType = "AMAP_VECTOR";
|
||||
this.tableData[index].url = "";
|
||||
if (this.tableData[index].group == "")
|
||||
this.tableData[index].group = "vector";
|
||||
break;
|
||||
case "esri":
|
||||
this.tableData[index].subType = "NatGeo_World_Map";
|
||||
this.tableData[index].url = "";
|
||||
if (this.tableData[index].group == "")
|
||||
this.tableData[index].group = "vector";
|
||||
break;
|
||||
case "OpenStreetMapLayer":
|
||||
this.tableData[index].subType = "";
|
||||
this.tableData[index].url = "";
|
||||
if (this.tableData[index].group == "")
|
||||
this.tableData[index].group = "vector";
|
||||
break;
|
||||
default:
|
||||
this.tableData[index].subType = "";
|
||||
this.tableData[index].group = "";
|
||||
break;
|
||||
}
|
||||
},
|
||||
renderHeader(h, { column }) {
|
||||
// h即为cerateElement的简写，具体可看vue官方文档
|
||||
return h("div", [
|
||||
h("span", column.label),
|
||||
h(
|
||||
"el-tooltip",
|
||||
{
|
||||
props: {
|
||||
effect: "dark",
|
||||
content: "图层的显示顺序，随着数字的增大，图层从下往上依次叠加",
|
||||
placement: "top",
|
||||
},
|
||||
},
|
||||
[
|
||||
h("i", {
|
||||
class: "el-icon-info",
|
||||
style: "margin-left:5px;cursor:pointer;",
|
||||
}),
|
||||
]
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
let config = sessionStorage["Data"];
|
||||
if (config) {
|
||||
config = JSON.parse(config);
|
||||
this.tableData = config.meta.basemap;
|
||||
} else {
|
||||
if (this.$store.state.config.meta.basemap.length > 0)
|
||||
this.tableData = JSON.parse(
|
||||
JSON.stringify(this.$store.state.config.meta.basemap)
|
||||
);
|
||||
}
|
||||
if (this.getInfo != 1) {
|
||||
for (var i = 0; i < this.tableData.length; i++) {
|
||||
if (this.tableData[i].group == "") {
|
||||
this.tableData[i].group = "覆盖图层";
|
||||
}
|
||||
if (this.tableData[i].group == "image") {
|
||||
this.tableData[i].group = "影像分组";
|
||||
}
|
||||
if (this.tableData[i].group == "vector") {
|
||||
this.tableData[i].group = "矢量分组";
|
||||
}
|
||||
if (this.tableData[i].type == "tianditu") {
|
||||
this.tableData[i].type = "天地图";
|
||||
}
|
||||
if (this.tableData[i].type == "amap") {
|
||||
this.tableData[i].type = "高德";
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler(to, from) {
|
||||
this.id = to.params.id;
|
||||
this.key = to.params.key;
|
||||
this.name = to.params.name;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
tableData: {
|
||||
handler() {
|
||||
if (this.tableData) {
|
||||
for (var i = 0; i < this.tableData.length; i++) {
|
||||
let reg = /\D/;
|
||||
if (reg.test(this.tableData[i].index)) {
|
||||
if (this.tableData[i].index != "")
|
||||
this.$message.info("显示顺序只可为数字");
|
||||
}
|
||||
this.tableData[i].index = this.tableData[i].index
|
||||
.toString()
|
||||
.replace(/\D/, "");
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
store,
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#buttonStyle1 {
|
||||
background: #9dbbe7;
|
||||
border-radius: 4px;
|
||||
border-color: #ecedf0;
|
||||
color: #fff;
|
||||
}
|
||||
.el-input__inner {
|
||||
>>> &::placeholder {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.el-input__inner {
|
||||
background: #9dbbe7 !important;
|
||||
color: #fff;
|
||||
}
|
||||
>>> .el-table td,
|
||||
>>> .el-table th.is-leaf {
|
||||
border: 1px solid rgba(211, 226, 246, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
2260
src/components/TaskManagement/xml/creatTable.vue
Normal file
2260
src/components/TaskManagement/xml/creatTable.vue
Normal file
File diff suppressed because it is too large
Load Diff
372
src/components/TaskManagement/xml/drawtool.vue
Normal file
372
src/components/TaskManagement/xml/drawtool.vue
Normal file
@@ -0,0 +1,372 @@
|
||||
<template>
|
||||
<div id="tablecontainer">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="绘图工具" name="first"></el-tab-pane>
|
||||
<el-main>
|
||||
<el-menu mode="vertical">
|
||||
<el-submenu :index="group.name" v-for="(group, groupIndex) in drawtoolGroups" :key="groupIndex">
|
||||
<template #title>
|
||||
{{ group.name }}
|
||||
<el-button
|
||||
v-if="groupIndex !== 0"
|
||||
type="text"
|
||||
size="small"
|
||||
@click.stop="editGroupName(groupIndex)"
|
||||
>编辑名称</el-button>
|
||||
<el-button
|
||||
v-if="groupIndex !== 0"
|
||||
type="text"
|
||||
size="small"
|
||||
@click.stop="removeGroup(groupIndex)"
|
||||
>删除分组</el-button>
|
||||
</template>
|
||||
<el-menu-item :index="tool.value" v-for="tool in (groupIndex === 0 ? group.tools : availableTools)" :key="tool.label">
|
||||
<el-checkbox
|
||||
v-model="group.checkList"
|
||||
:label="tool.value"
|
||||
border
|
||||
style="width: 160px; margin-top: 10px;"
|
||||
>
|
||||
{{ tool.label }}
|
||||
</el-checkbox>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
style="margin-top: 30px; margin-left: 40px"
|
||||
@click="addGroup"
|
||||
>
|
||||
添加分组
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
id="buttonStyle"
|
||||
type="primary"
|
||||
size="small"
|
||||
style="margin-top: 30px; margin-left: 40px"
|
||||
v-if="getInfo == '1'"
|
||||
@click="UploadData()"
|
||||
>保存并下一步</el-button>
|
||||
</el-main>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { store } from "@/components/vuex/store.js";
|
||||
import { ajax as request } from "@/request.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
getInfo: sessionStorage.getItem("getInfo"),
|
||||
activeName: "first",
|
||||
defaultTools: [
|
||||
{ value: "location", label: "位置" },
|
||||
{ value: "point", label: "点" },
|
||||
{ value: "line", label: "线" },
|
||||
{ value: "polygon", label: "面" },
|
||||
{ value: "rectangle", label: "矩形" },
|
||||
{ value: "circle", label: "圆" },
|
||||
{ value: "freehand_polygon", label: "手绘面" },
|
||||
{ value: "freehand_line", label: "手绘线" },
|
||||
{ value: "path", label: "轨迹" },
|
||||
{ value: "draft", label: "草图" },
|
||||
{ value: "transfer_point", label: "引点定位" }
|
||||
],
|
||||
drawtoolGroups: [
|
||||
{
|
||||
name: "default",
|
||||
checkList: [],
|
||||
tools: [
|
||||
{ value: "location", label: "位置" },
|
||||
{ value: "point", label: "点" },
|
||||
{ value: "line", label: "线" },
|
||||
{ value: "polygon", label: "面" },
|
||||
{ value: "rectangle", label: "矩形" },
|
||||
{ value: "circle", label: "圆" },
|
||||
{ value: "freehand_polygon", label: "手绘面" },
|
||||
{ value: "freehand_line", label: "手绘线" },
|
||||
{ value: "path", label: "轨迹" },
|
||||
{ value: "draft", label: "草图" },
|
||||
{ value: "transfer_point", label: "引点定位" }
|
||||
]
|
||||
}
|
||||
],
|
||||
drawtool: {},
|
||||
id: "-1",
|
||||
key: "",
|
||||
name: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
availableTools() {
|
||||
const defaultGroupSelectedTools = this.drawtoolGroups[0].checkList;
|
||||
return this.defaultTools.filter(tool => !defaultGroupSelectedTools.includes(tool.value));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let that = this;
|
||||
let config = sessionStorage["Data"];
|
||||
if (config) {
|
||||
config = JSON.parse(config);
|
||||
console.log('从sessionStorage获取的配置:', config);
|
||||
this.drawtool = config.meta.drawtool;
|
||||
if (this.drawtool) {
|
||||
console.log('绘图工具配置:', this.drawtool);
|
||||
const newGroups = [];
|
||||
if (this.drawtool.default) {
|
||||
newGroups.push({
|
||||
name: "default",
|
||||
checkList: this.drawtool.default.map(tool => tool.name),
|
||||
tools: [...this.defaultTools]
|
||||
});
|
||||
}
|
||||
for (const [groupName, tools] of Object.entries(this.drawtool)) {
|
||||
if (groupName !== 'default') {
|
||||
newGroups.push({
|
||||
name: groupName,
|
||||
checkList: tools.map(tool => tool.name),
|
||||
tools: [...this.defaultTools]
|
||||
});
|
||||
}
|
||||
}
|
||||
console.log('解析后的分组数据:', newGroups);
|
||||
this.drawtoolGroups = newGroups;
|
||||
this.$nextTick(() => {
|
||||
console.log('视图更新后的勾选状态:', this.drawtoolGroups);
|
||||
});
|
||||
}
|
||||
} else if (this.id != "-1") {
|
||||
request({
|
||||
url: "/xml/requesting",
|
||||
method: "post",
|
||||
params: {
|
||||
id: that.id,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.data) {
|
||||
console.log('从接口获取的原始数据:', response.data.data);
|
||||
config = sessionStorage["Data"];
|
||||
if (!config) {
|
||||
var jsondata = JSON.parse(response.data.data);
|
||||
console.log('解析后的配置:', jsondata);
|
||||
that.$store.dispatch("updateData", { config: jsondata });
|
||||
sessionStorage["Data"] = JSON.stringify(that.$store.state.config);
|
||||
}
|
||||
config = sessionStorage["Data"];
|
||||
config = JSON.parse(config);
|
||||
that.drawtool = config.meta.drawtool;
|
||||
if (that.drawtool) {
|
||||
console.log('绘图工具配置:', that.drawtool);
|
||||
that.drawtoolGroups = [];
|
||||
if (that.drawtool.default) {
|
||||
that.drawtoolGroups.push({
|
||||
name: "default",
|
||||
checkList: that.drawtool.default.map(tool => tool.name),
|
||||
tools: that.defaultTools
|
||||
});
|
||||
}
|
||||
for (const [groupName, tools] of Object.entries(that.drawtool)) {
|
||||
if (groupName !== 'default') {
|
||||
that.drawtoolGroups.push({
|
||||
name: groupName,
|
||||
checkList: tools.map(tool => tool.name),
|
||||
tools: that.defaultTools
|
||||
});
|
||||
}
|
||||
}
|
||||
console.log('解析后的分组数据:', that.drawtoolGroups);
|
||||
}
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
addGroup() {
|
||||
this.$prompt('请输入分组名称', '新建分组', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputPattern: /\S+/,
|
||||
inputErrorMessage: '分组名称不能为空！'
|
||||
}).then(({ value }) => {
|
||||
this.drawtoolGroups.push({
|
||||
name: value,
|
||||
checkList: []
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消创建'
|
||||
});
|
||||
});
|
||||
},
|
||||
editGroupName(index) {
|
||||
const oldName = this.drawtoolGroups[index].name;
|
||||
this.$prompt('请输入新分组名称', '编辑分组', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputValue: oldName,
|
||||
inputPattern: /\S+/,
|
||||
inputErrorMessage: '分组名称不能为空！'
|
||||
}).then(({ value }) => {
|
||||
// 更新分组名称
|
||||
this.drawtoolGroups[index].name = value;
|
||||
// 删除旧名称的分组数据
|
||||
if (oldName !== 'default' && oldName in this.drawtool) {
|
||||
delete this.drawtool[oldName];
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消编辑'
|
||||
});
|
||||
});
|
||||
},
|
||||
removeGroup(index) {
|
||||
if (index === 0) return;
|
||||
this.drawtoolGroups.splice(index, 1);
|
||||
// 更新sessionStorage
|
||||
this.drawtool = {};
|
||||
this.drawtoolGroups.forEach(group => {
|
||||
this.drawtool[group.name] = group.checkList.map(name => ({ name }));
|
||||
});
|
||||
this.$store.dispatch("updateDrawtool", { drawtool: this.drawtool });
|
||||
sessionStorage["Data"] = JSON.stringify(this.$store.state.config);
|
||||
},
|
||||
updateGroupCheckList(groupIndex, val) {
|
||||
// 获取default分组的选中工具
|
||||
const defaultSelected = this.drawtoolGroups[0].checkList;
|
||||
// 如果是非default分组，过滤掉default分组已选的工具
|
||||
const filteredVal = groupIndex === 0 ? val : val.filter(
|
||||
tool => !defaultSelected.includes(tool)
|
||||
);
|
||||
this.drawtoolGroups[groupIndex].checkList = filteredVal;
|
||||
},
|
||||
UploadData() {
|
||||
let that = this;
|
||||
// 获取default分组的选中工具
|
||||
const defaultSelected = this.drawtoolGroups[0].checkList;
|
||||
|
||||
// 处理每个分组，确保不包含default分组已选的工具
|
||||
this.drawtoolGroups.forEach(group => {
|
||||
if (!this.drawtool[group.name]) {
|
||||
this.drawtool[group.name] = [];
|
||||
}
|
||||
// 过滤掉default分组已选的工具
|
||||
const filteredCheckList = group.name === 'default'
|
||||
? group.checkList
|
||||
: group.checkList.filter(tool => !defaultSelected.includes(tool));
|
||||
this.drawtool[group.name] = filteredCheckList.map(name => ({ name }));
|
||||
});
|
||||
|
||||
this.$store.dispatch("updateDrawtool", { drawtool: this.drawtool });
|
||||
sessionStorage["Data"] = JSON.stringify(that.$store.state.config);
|
||||
this.$notify.success({
|
||||
title: "提示",
|
||||
message: "保存成功",
|
||||
});
|
||||
if (this.name && this.key && this.id) {
|
||||
this.$router.push({
|
||||
path: `/home/${this.name}/${this.key}/${this.id}/position`,
|
||||
});
|
||||
} else {
|
||||
console.error('缺少必要的路由参数');
|
||||
this.$notify.error({
|
||||
title: '错误',
|
||||
message: '无法跳转，缺少必要的参数'
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'drawtoolGroups': {
|
||||
handler() {
|
||||
this.$forceUpdate();
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'$route': {
|
||||
handler(to) {
|
||||
this.name = to.params.name;
|
||||
this.id = to.params.id;
|
||||
if (to.params.key) {
|
||||
this.key = to.params.key;
|
||||
}
|
||||
console.log('路由参数更新:', {
|
||||
name: this.name,
|
||||
key: this.key,
|
||||
id: this.id
|
||||
});
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
store,
|
||||
created: function () {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
#tablecontainer .el-menu .el-submenu__title:hover {
|
||||
background-color: #f0f7ff !important;
|
||||
}
|
||||
.el-menu-item:hover {
|
||||
background-color: #f0f7ff !important;
|
||||
}
|
||||
#buttonStyle {
|
||||
background: #9dbbe7;
|
||||
border-radius: 4px;
|
||||
border-color: #9dbbe7;
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
background-color: #304156;
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
color: #304156;
|
||||
}
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
color: #304156;
|
||||
}
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner,
|
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
background-color: #304156;
|
||||
border-color: #304156;
|
||||
}
|
||||
.el-checkbox.is-bordered.is-checked {
|
||||
border-color: #dcdfe6;
|
||||
}
|
||||
@media screen and (min-height: 800px) {
|
||||
#checkcontainer {
|
||||
height: 500px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-height: 700px) and (max-height: 800px) {
|
||||
#checkcontainer {
|
||||
height: 400px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-height: 600px) and (max-height: 700px) {
|
||||
#checkcontainer {
|
||||
height: 350px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-height: 500px) and (max-height: 600px) {
|
||||
#checkcontainer {
|
||||
height: 300px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-height: 500px) {
|
||||
#checkcontainer {
|
||||
height: 250px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
412
src/components/TaskManagement/xml/home.vue
Normal file
412
src/components/TaskManagement/xml/home.vue
Normal file
@@ -0,0 +1,412 @@
|
||||
<template>
|
||||
<div id="TPcontainer">
|
||||
<el-container>
|
||||
<el-aside width="160px" style="text-align: left">
|
||||
<el-menu router :default-active="this.$route.path">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-menu"></i>基础配置</template
|
||||
>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item
|
||||
:index="'/home/' + name + '/' + key + '/' + id + '/drawtool'"
|
||||
class="{'isActive': !active}"
|
||||
>绘图工具</el-menu-item
|
||||
>
|
||||
<el-menu-item
|
||||
:index="'/home/' + name + '/' + key + '/' + id + '/position'"
|
||||
class="{'isActive': !active}"
|
||||
>定位方式</el-menu-item
|
||||
>
|
||||
<el-menu-item
|
||||
:index="'/home/' + name + '/' + key + '/' + id + '/basemap'"
|
||||
class="{'isActive': !active}"
|
||||
>地图配置</el-menu-item
|
||||
>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-submenu index="0">
|
||||
<template slot="title">
|
||||
<i class="el-icon-menu"></i>数据表
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
id="buttonStyle"
|
||||
plain
|
||||
@click="addTable"
|
||||
v-if="getInfo == '1'"
|
||||
>+</el-button
|
||||
>
|
||||
</template>
|
||||
<el-menu-item
|
||||
v-for="(item, i) in tables"
|
||||
:key="i"
|
||||
:index="
|
||||
'/home/' + name + '/' + key + '/' + id + '/' + i + '/tablecon'
|
||||
"
|
||||
>{{ item.name }}</el-menu-item
|
||||
>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<div id="buttomC">
|
||||
<el-button
|
||||
v-if="getInfo == '1'"
|
||||
id="buttonS"
|
||||
type="primary"
|
||||
@click="uploadConfig()"
|
||||
>提交</el-button
|
||||
>
|
||||
<el-button id="buttonS" type="primary" @click="toMain()"
|
||||
>取消并返回上页</el-button
|
||||
>
|
||||
</div>
|
||||
<el-main style="margin-top: 55px">
|
||||
<router-view class="view"></router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
import { store } from "@/components/vuex/store.js";
|
||||
import { ajax as request } from "@/request.js";
|
||||
import Qs from "qs";
|
||||
|
||||
export default {
|
||||
name: "Meta",
|
||||
data: function () {
|
||||
return {
|
||||
getInfo: sessionStorage.getItem("getInfo"),
|
||||
key: "",
|
||||
name: "",
|
||||
id: "-1",
|
||||
active: true,
|
||||
contextMenuTarget: null,
|
||||
contextMenuVisible: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initConfig() {
|
||||
let config1 = sessionStorage["Data"];
|
||||
if (config1) {
|
||||
config1 = JSON.parse(config1);
|
||||
this.$store.dispatch("updateData", { config: config1 });
|
||||
} else if (this.id != "-1") {
|
||||
let that = this;
|
||||
request({
|
||||
url: "/xml/requesting",
|
||||
method: "post",
|
||||
params: {
|
||||
id: that.id,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.data) {
|
||||
//获取数据存入config
|
||||
var jsondata = JSON.parse(response.data.data);
|
||||
// jsondata = that.changeC(jsondata);
|
||||
that.$store.dispatch("updateData", { config: jsondata });
|
||||
sessionStorage["Data"] = JSON.stringify(that.$store.state.config);
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
toMain() {
|
||||
sessionStorage.removeItem("Data");
|
||||
var config1 = {
|
||||
meta: {
|
||||
drawtool: {},
|
||||
position: [],
|
||||
basemap: [],
|
||||
},
|
||||
tables: [],
|
||||
};
|
||||
this.$store.dispatch("updateData", { config: config1 });
|
||||
this.$router.push({ path: "/main" });
|
||||
},
|
||||
addTable() {
|
||||
this.$router.push({
|
||||
path:
|
||||
"/home/" + this.name + "/" + this.key + "/" + this.id + "/creattable",
|
||||
});
|
||||
},
|
||||
uploadConfig() {
|
||||
let that = this;
|
||||
this.$confirm("确认提交任务？", "提示", {
|
||||
cancelButtonText: "取消",
|
||||
confirmButtonText: "确定",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
//移除isgroup
|
||||
// var datadeleteIsGroup = that.changeE(that.$store.state.config);
|
||||
var datadeleteIsGroup = that.$store.state.config;
|
||||
for (var i = 0; i < datadeleteIsGroup.tables.length; i++) {
|
||||
for (
|
||||
var j = 0;
|
||||
j < datadeleteIsGroup.tables[i].fields.length;
|
||||
j++
|
||||
) {
|
||||
delete datadeleteIsGroup.tables[i].fields[j].group;
|
||||
if (datadeleteIsGroup.tables[i].fields[j].identity == true) {
|
||||
datadeleteIsGroup.tables[i].fields[j].autoIncrement = true;
|
||||
} else {
|
||||
datadeleteIsGroup.tables[i].fields[j].autoIncrement = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
if (datadeleteIsGroup.meta.drawtool.length == 0) {
|
||||
that.$alert("请选择绘图工具！", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (datadeleteIsGroup.meta.position.length == 0) {
|
||||
that.$alert("请选择定位方式！", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (datadeleteIsGroup.meta.basemap.length == 0) {
|
||||
that.$alert("请添加地图图层！", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (datadeleteIsGroup.tables.length == 0) {
|
||||
that.$alert("请添加数据表！", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 修改datadeleteIsGroup内容
|
||||
const newConfig = {
|
||||
name: "测试任务",
|
||||
key: "test",
|
||||
config: {
|
||||
meta: {
|
||||
drawtool: datadeleteIsGroup.meta.drawtool,
|
||||
position: datadeleteIsGroup.meta.position,
|
||||
basemap: datadeleteIsGroup.meta.basemap.map(item => ({
|
||||
...item,
|
||||
url: ""
|
||||
}))
|
||||
},
|
||||
tables: datadeleteIsGroup.tables.map(table => ({
|
||||
...table,
|
||||
fields: table.fields.map(field => ({
|
||||
...field,
|
||||
index: field.index || "",
|
||||
name: field.name || "",
|
||||
type: field.type || "",
|
||||
selector: field.selector || [],
|
||||
select: field.select || "",
|
||||
mode: field.mode || "",
|
||||
parentID: field.parentID || "",
|
||||
resultType: field.resultType || "",
|
||||
geometry: field.geometry || "",
|
||||
required: field.required || "",
|
||||
identity: field.identity || "",
|
||||
uploadName: field.uploadName || "",
|
||||
autoDate: field.autoDate || "",
|
||||
show: field.show || "",
|
||||
enable: field.enable || "",
|
||||
script: field.script || "",
|
||||
associate: field.associate || "",
|
||||
collection: field.collection || "",
|
||||
autoIncrement: field.autoIncrement || ""
|
||||
}))
|
||||
}))
|
||||
},
|
||||
id: "1",
|
||||
introduction: "aaa",
|
||||
taskUploadTime: "23:00"
|
||||
};
|
||||
|
||||
if (this.id == "-1") {
|
||||
request({
|
||||
url: "/task/createTask",
|
||||
method: "post",
|
||||
params: {
|
||||
configString: JSON.stringify(newConfig),
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
//清空config和本地缓存
|
||||
sessionStorage.removeItem("Data");
|
||||
sessionStorage.removeItem("daytaskNum");
|
||||
sessionStorage.removeItem("taskUploadTime");
|
||||
var config1 = {
|
||||
meta: {
|
||||
drawtool: {},
|
||||
position: [],
|
||||
basemap: [],
|
||||
},
|
||||
tables: [],
|
||||
};
|
||||
that.$store.dispatch("updateData", { config: config1 });
|
||||
that.$router.push({ path: "/main" });
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "提交成功",
|
||||
});
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: "提交失败" + "," + response.data.message,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
request({
|
||||
url: "/task/updateTask",
|
||||
method: "post",
|
||||
params: {
|
||||
id: that.id,
|
||||
configString: JSON.stringify(newConfig),
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
//清空config和本地缓存
|
||||
sessionStorage.removeItem("Data");
|
||||
var config1 = {
|
||||
meta: {
|
||||
drawtool: {},
|
||||
position: [],
|
||||
basemap: [],
|
||||
},
|
||||
tables: [],
|
||||
};
|
||||
that.$store.dispatch("updateData", { config: config1 });
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "提交成功",
|
||||
});
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: "提交失败" + "," + response.data.message,
|
||||
});
|
||||
}
|
||||
});
|
||||
request({
|
||||
url: "/task/checkTaskXmlMD5Code",
|
||||
method: "post",
|
||||
params: {
|
||||
id: that.id,
|
||||
},
|
||||
}).then(function (response) {
|
||||
that.$router.push({ path: "/main" });
|
||||
if (response.data.success) {
|
||||
that.$alert(response.data.message, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
components: {},
|
||||
mounted() {
|
||||
let menu = document.getElementsByClassName("el-menu")[0];
|
||||
let menuitem = menu.children[1];
|
||||
this.contextMenuTarget = menuitem;
|
||||
this.initConfig();
|
||||
},
|
||||
computed: {
|
||||
tables() {
|
||||
return this.$store.state.config.tables;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
//用watch监听变化
|
||||
$route: {
|
||||
handler(to, from) {
|
||||
this.name = to.params.name;
|
||||
this.id = to.params.id;
|
||||
if (to.params.key) {
|
||||
this.key = to.params.key;
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
store,
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#buttomC {
|
||||
top: 15px;
|
||||
right: 25px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
background-color: #b3c0d1;
|
||||
color: #264672;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
}
|
||||
.el-aside {
|
||||
height: 100vh;
|
||||
background-color: #d3dce6;
|
||||
color: #264672;
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
}
|
||||
.right-menu {
|
||||
position: fixed;
|
||||
background: #fff;
|
||||
border: solid 1px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
z-index: 999;
|
||||
}
|
||||
.right-menu a {
|
||||
width: 75px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.right-menu a:hover {
|
||||
background: #eee;
|
||||
color: #fff;
|
||||
}
|
||||
.right-menu {
|
||||
border: 1px solid #eee;
|
||||
box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 1px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.right-menu a {
|
||||
padding: 2px;
|
||||
}
|
||||
.right-menu a:hover {
|
||||
background: #42b983;
|
||||
}
|
||||
.v-modal {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
727
src/components/TaskManagement/xml/main.vue
Normal file
727
src/components/TaskManagement/xml/main.vue
Normal file
@@ -0,0 +1,727 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="buttomContain">
|
||||
<div class="search-container">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="请输入关键词进行搜索"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
size="small"
|
||||
style="width: 450px; margin-right: 15px;"
|
||||
@input="handleSearch"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<el-button id="buttonStyle" size="small" @click="addRow()"
|
||||
>添加任务</el-button
|
||||
>
|
||||
<el-button id="buttonStyle" size="small" @click="addXml()"
|
||||
>导入xml文件</el-button
|
||||
></div>
|
||||
</div>
|
||||
<el-table
|
||||
id="tableStyle"
|
||||
:data="filteredData"
|
||||
:height="720"
|
||||
stripe
|
||||
border
|
||||
highlight-current-row
|
||||
header-cell-class-name="sinCl"
|
||||
:default-sort = "{prop: 'date', order: 'descending'}"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="60" ></el-table-column>
|
||||
<el-table-column
|
||||
prop="taskName"
|
||||
label="任务名称"
|
||||
sortable
|
||||
min-width="85"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="databaseName"
|
||||
label="数据库名称"
|
||||
sortable
|
||||
min-width="100"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="introduction"
|
||||
label="任务备注"
|
||||
sortable
|
||||
min-width="85"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="operator"
|
||||
label="操作人员"
|
||||
sortable
|
||||
min-width="85"
|
||||
></el-table-column>
|
||||
<el-table-column min-width="90" filterable label="是否已创库" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.hasCreateTables == true">已创库 </span>
|
||||
<span v-else>未创库</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="110" filterable label="是否及时审核">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.isReviewerRestricted"
|
||||
active-color="#9DBBE7"
|
||||
@change="
|
||||
changeRestricted(scope.row.id, scope.row.isReviewerRestricted)
|
||||
"
|
||||
>
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
label="创建时间"
|
||||
min-width="90"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="modifyTime"
|
||||
label="修改时间"
|
||||
min-width="90"
|
||||
sortable
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column width="290" fixed="right" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="scope.row.hasCreateTables == true"
|
||||
type="text"
|
||||
size="small"
|
||||
@click.native.prevent="getRow(scope.row.id)"
|
||||
>查看任务</el-button
|
||||
>
|
||||
<el-button
|
||||
v-else
|
||||
@click.native.prevent="editRow(scope.row.id)"
|
||||
type="text"
|
||||
size="small"
|
||||
>编辑任务</el-button
|
||||
>
|
||||
<!-- <el-button-->
|
||||
<!-- @click.native.prevent="deleteRow(scope.$index)"-->
|
||||
<!-- type="text"-->
|
||||
<!-- size="small"-->
|
||||
<!-- >删除任务</el-button-->
|
||||
<!-- >-->
|
||||
<el-button
|
||||
@click.native.prevent="taskCreat(scope.row.id)"
|
||||
type="text"
|
||||
size="small"
|
||||
>任务创库</el-button
|
||||
>
|
||||
<el-button
|
||||
@click.native.prevent="downloadXml(scope.row.id)"
|
||||
type="text"
|
||||
size="small"
|
||||
>下载xml文件</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
class="taskDialog"
|
||||
title="新建任务"
|
||||
:visible.sync="DialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="form" :model="form" label-width="138px">
|
||||
<el-form-item>
|
||||
<span slot="label"
|
||||
>任务名称
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="任务的中文名称"
|
||||
placement="top-end"
|
||||
><i class="el-icon-info"></i
|
||||
></el-tooltip>
|
||||
</span>
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<span slot="label"
|
||||
>数据库名称
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="任务在创建数据库时进行存储的数据库名称(英文)"
|
||||
placement="top-end"
|
||||
><i class="el-icon-info"></i
|
||||
></el-tooltip>
|
||||
</span>
|
||||
<el-input v-model="form.key"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<span slot="label"
|
||||
>任务上传时间
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="用于任务每日统计的截止日期，在该时间会统计每个用户的具体上传数量"
|
||||
placement="top-end"
|
||||
><i class="el-icon-info"></i
|
||||
></el-tooltip>
|
||||
</span>
|
||||
<el-time-picker
|
||||
v-model="form.taskUploadTime"
|
||||
value-format="HH:mm"
|
||||
format="HH:mm"
|
||||
:picker-options="{
|
||||
selectableRange: '00:00:00 - 23:59:59',
|
||||
}"
|
||||
></el-time-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<span slot="label"
|
||||
>任务备注
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="任务的描述，将在移动端进行展示"
|
||||
placement="top-end"
|
||||
><i class="el-icon-info"></i
|
||||
></el-tooltip>
|
||||
</span>
|
||||
<el-input v-model="form.introduction"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" size="small" @click="Upload()">确认</el-button>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
class="taskDialog"
|
||||
title="上传xml文件"
|
||||
:visible.sync="xmlDialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div style="text-align: left">
|
||||
<el-form ref="xmlform" :model="xmlform" label-width="138px">
|
||||
<el-form-item label="任务名称">
|
||||
<el-input v-model="xmlform.xmlname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据库名称(英文)">
|
||||
<el-input v-model="xmlform.xmlkey"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务上传时间">
|
||||
<el-time-picker
|
||||
v-model="xmlform.xmltaskUploadTime"
|
||||
value-format="HH:mm"
|
||||
format="HH:mm"
|
||||
:picker-options="{
|
||||
selectableRange: '00:00:00 - 23:59:59',
|
||||
}"
|
||||
></el-time-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务备注">
|
||||
<el-input v-model="xmlform.introduction"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="xml文件">
|
||||
<el-upload
|
||||
accept=".xml"
|
||||
class="upload-demo"
|
||||
action="xml"
|
||||
ref="uploadfile"
|
||||
:auto-upload="false"
|
||||
:limit="1"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:on-change="getFile"
|
||||
:on-remove="removeFile"
|
||||
>
|
||||
<el-button size="small" type="primary" plain>选择文件</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-button type="primary" size="small" @click="UploadXml()"
|
||||
>确认</el-button
|
||||
>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { store } from "@/components/vuex/store.js";
|
||||
import { ajax as request } from "@/request.js";
|
||||
import axios from "axios";
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
form: {
|
||||
name: "",
|
||||
key: "",
|
||||
taskUploadTime: "23:00",
|
||||
introduction: "",
|
||||
},
|
||||
DialogVisible: false,
|
||||
xmlDialogVisible: false,
|
||||
xmlform: {
|
||||
xmlname: "",
|
||||
xmlkey: "",
|
||||
xmltaskUploadTime: "23:00",
|
||||
introduction: "",
|
||||
},
|
||||
xmlData: [],
|
||||
fileList: [],
|
||||
searchKeyword: "", // 搜索关键词
|
||||
filteredData: [], // 过滤后的数据
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 搜索处理方法
|
||||
handleSearch() {
|
||||
if (!this.searchKeyword.trim()) {
|
||||
this.filteredData = [...this.xmlData];
|
||||
} else {
|
||||
const keyword = this.searchKeyword.toLowerCase();
|
||||
this.filteredData = this.xmlData.filter(item => {
|
||||
return (
|
||||
(item.taskName && item.taskName.toLowerCase().includes(keyword)) ||
|
||||
(item.databaseName && item.databaseName.toLowerCase().includes(keyword)) ||
|
||||
(item.introduction && item.introduction.toLowerCase().includes(keyword))
|
||||
);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
//读取数据库 初始化xml
|
||||
init() {
|
||||
let that = this;
|
||||
request({
|
||||
url: "/task/selectAll",
|
||||
method: "get",
|
||||
}).then(function (response) {
|
||||
if (response.data.success == true) {
|
||||
var jsondata = JSON.parse(response.data.data);
|
||||
that.xmlData = jsondata.data;
|
||||
that.filteredData = [...that.xmlData]; // 初始化过滤数据
|
||||
for (var i = 0; i < that.xmlData.length; i++) {
|
||||
if (that.xmlData[i].hasCreateTables == 1) {
|
||||
that.xmlData[i].hasCreateTables = true;
|
||||
} else {
|
||||
that.xmlData[i].hasCreateTables = false;
|
||||
}
|
||||
if (
|
||||
that.xmlData[i].isReviewerRestricted == 1 ||
|
||||
that.xmlData[i].isReviewerRestricted == true
|
||||
) {
|
||||
that.xmlData[i].isReviewerRestricted = true;
|
||||
} else {
|
||||
that.xmlData[i].isReviewerRestricted = false;
|
||||
}
|
||||
}
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改方法参数，从index改为id
|
||||
changeRestricted(id, val) {
|
||||
let str = val == true ? "确认任务及时审核吗？" : "确认任务不需及时审核吗？";
|
||||
let result = val == true ? 1 : 0;
|
||||
let that = this;
|
||||
|
||||
this.$confirm(str, "提示", {})
|
||||
.then(() => {
|
||||
request({
|
||||
url: "/task/setReviewerMode",
|
||||
method: "get",
|
||||
params: {
|
||||
taskId: id,
|
||||
isReviewerRestricted: result,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success == true) {
|
||||
that.$message.success("设置成功");
|
||||
// 更新本地数据状态
|
||||
let row = that.xmlData.find(item => item.id === id);
|
||||
if (row) {
|
||||
row.isReviewerRestricted = val;
|
||||
}
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
} else {
|
||||
that.$message.error("设置失败");
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
addRow() {
|
||||
this.DialogVisible = true;
|
||||
},
|
||||
deleteRow(id) {
|
||||
this.$confirm("确认删除？", "提示", {
|
||||
cancelButtonText: "取消",
|
||||
confirmButtonText: "确定",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
let that = this;
|
||||
request({
|
||||
url: "/task/deleteTask",
|
||||
method: "post",
|
||||
params: { id: id },
|
||||
}).then(function (response) {
|
||||
var deleteresult = response.data.success;
|
||||
if (deleteresult == true) {
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "删除成功",
|
||||
});
|
||||
that.init();
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: "删除失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
Upload() {
|
||||
if (this.form.name == "") {
|
||||
this.$alert("任务名不可为空", "提示", { confirmButtonText: "确定" });
|
||||
return;
|
||||
}
|
||||
if (this.form.key == "") {
|
||||
this.$alert("数据库名称不可为空", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.xmlData.length > 0) {
|
||||
for (var i = 0; i < this.xmlData.length; i++) {
|
||||
if (this.form.key == this.xmlData[i].databaseName) {
|
||||
this.$alert("数据库名称重复!", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
//存入time和num
|
||||
|
||||
this.DialogVisible = false;
|
||||
// this.$store.dispatch('updateData',{config:''})
|
||||
sessionStorage.setItem("taskUploadTime", this.form.taskUploadTime);
|
||||
sessionStorage.setItem("introduction", this.form.introduction);
|
||||
|
||||
sessionStorage.removeItem("Data");
|
||||
var config1 = {
|
||||
meta: {
|
||||
drawtool: {},
|
||||
position: [],
|
||||
basemap: [],
|
||||
},
|
||||
tables: [],
|
||||
};
|
||||
this.$store.dispatch("updateData", { config: config1 });
|
||||
sessionStorage.setItem("getInfo", "1");
|
||||
this.$router.push({
|
||||
path:
|
||||
"/home/" + this.form.name + "/" + this.form.key + "/-1" + "/drawtool",
|
||||
});
|
||||
},
|
||||
editRow(id) {
|
||||
let row = this.xmlData.find(item => item.id === id);
|
||||
if (!row) return;
|
||||
|
||||
sessionStorage.removeItem("Data");
|
||||
sessionStorage.setItem("getInfo", "1");
|
||||
var config1 = {
|
||||
meta: {
|
||||
drawtool: {},
|
||||
position: [],
|
||||
basemap: [],
|
||||
},
|
||||
tables: [],
|
||||
};
|
||||
this.$store.dispatch("updateData", { config: config1 });
|
||||
this.$router.push({
|
||||
path: "/home/" + row.taskName + "/taskKey/" + id + "/drawtool",
|
||||
});
|
||||
},
|
||||
getRow(id) {
|
||||
let row = this.xmlData.find(item => item.id === id);
|
||||
if (!row) return;
|
||||
|
||||
sessionStorage.removeItem("Data");
|
||||
sessionStorage.setItem("getInfo", "0");
|
||||
var config1 = {
|
||||
meta: {
|
||||
drawtool: {},
|
||||
position: [],
|
||||
basemap: [],
|
||||
},
|
||||
tables: [],
|
||||
};
|
||||
this.$store.dispatch("updateData", { config: config1 });
|
||||
this.$router.push({
|
||||
path: "/home/" + row.taskName + "/taskKey/" + id + "/drawtool",
|
||||
});
|
||||
},
|
||||
taskCreat(id) {
|
||||
this.$confirm("确认生成？", "提示", {
|
||||
cancelButtonText: "取消",
|
||||
confirmButtonText: "确定",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
let that = this;
|
||||
request({
|
||||
url: "/table/createTable",
|
||||
method: "post",
|
||||
params: { id: id },
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "创建成功",
|
||||
});
|
||||
that.init();
|
||||
} else if (response.data.message == "hasCreated") {
|
||||
that.$confirm("该任务已经创库，是否重新创库？", "提示", {
|
||||
cancelButtonText: "取消",
|
||||
confirmButtonText: "确定",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
let that1 = that;
|
||||
request({
|
||||
url: "table/deleteAndCreateTable",
|
||||
method: "post",
|
||||
params: { id: id },
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that1.$notify.success({
|
||||
title: "提示",
|
||||
message: "创建成功",
|
||||
});
|
||||
that1.init();
|
||||
} else {
|
||||
that1.$notify.error({
|
||||
title: "提示",
|
||||
message: "创建失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: "创建失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
downloadXml(id) {
|
||||
let that = this;
|
||||
request({
|
||||
url: "/xml/downloading",
|
||||
method: "post",
|
||||
params: { id: id },
|
||||
}).then(function (response) {
|
||||
if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
} else if (response.status == 200) {
|
||||
let row = that.xmlData.find(item => item.id === id);
|
||||
if (row) {
|
||||
that.download(response.data, row.taskName);
|
||||
}
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "正在下载",
|
||||
});
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: response.data.message,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
download(data, name) {
|
||||
let fileName = name + ".xml";
|
||||
if ("download" in document.createElement("a")) {
|
||||
// 不是IE浏览器
|
||||
let blob = new Blob([data]);
|
||||
let url = window.URL.createObjectURL(blob);
|
||||
let link = document.createElement("a");
|
||||
link.style.display = "none";
|
||||
link.href = url;
|
||||
link.setAttribute("download", fileName);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link); // 下载完成移除元素
|
||||
window.URL.revokeObjectURL(url); // 释放掉blob对象
|
||||
} else {
|
||||
// IE 10+
|
||||
window.navigator.msSaveBlob(blob, fileName);
|
||||
}
|
||||
},
|
||||
addXml() {
|
||||
this.xmlDialogVisible = true;
|
||||
this.xmlform.xmlname = "";
|
||||
this.xmlform.xmlkey = "";
|
||||
this.xmlform.xmltaskUploadTime = "23:00";
|
||||
this.xmlform.introduction = "";
|
||||
this.fileList = [];
|
||||
if (this.$refs.uploadfile) {
|
||||
this.$refs.uploadfile.clearFiles();
|
||||
}
|
||||
},
|
||||
UploadXml() {
|
||||
let fd = new FormData();
|
||||
if (!this.xmlform.xmlname) {
|
||||
this.$alert("请输入任务名称！", "提示", { confirmButtonText: "确定" });
|
||||
return;
|
||||
}
|
||||
if (!this.xmlform.xmlkey) {
|
||||
that.$alert("请输入数据库名称！", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.xmlData.length > 0) {
|
||||
for (var i = 0; i < this.xmlData.length; i++) {
|
||||
if (this.xmlform.xmlkey == this.xmlData[i].databaseName) {
|
||||
this.$alert("数据库名称重复!", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!this.fileList[0]) {
|
||||
this.$alert("请选择xml文件！", "提示", { confirmButtonText: "确定" });
|
||||
return;
|
||||
} else {
|
||||
fd.append("file", this.fileList[0]);
|
||||
}
|
||||
var userid = sessionStorage.getItem("access-id");
|
||||
var configString = {
|
||||
name: this.xmlform.xmlname,
|
||||
key: this.xmlform.xmlkey,
|
||||
id: userid,
|
||||
introduction: this.xmlform.introduction,
|
||||
taskUploadTime: this.xmlform.xmltaskUploadTime,
|
||||
};
|
||||
fd.append("configString", JSON.stringify(configString));
|
||||
let that = this;
|
||||
axios({
|
||||
url: "/task/createTaskByXmlFile",
|
||||
method: "post",
|
||||
data: fd,
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success == true) {
|
||||
that.xmlDialogVisible = false;
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "任务上传成功！",
|
||||
});
|
||||
that.init();
|
||||
} else {
|
||||
if (response.data.status == 400) {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: response.data.message,
|
||||
});
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: "上传出错",
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
if (file.type != "xml") {
|
||||
this.$message.error("只能上传xml格式数据!");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
getFile(file) {
|
||||
this.fileList = [];
|
||||
this.fileList.push(file.raw);
|
||||
},
|
||||
removeFile() {
|
||||
this.fileList = [];
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
store,
|
||||
watch: {
|
||||
"form.key": {
|
||||
handler() {
|
||||
let reg = /[^\w_]+$/;
|
||||
if (reg.test(this.form.key)) {
|
||||
this.$alert("数据库名称只可为字母、数字、下划线组合！", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
}
|
||||
this.form.key = this.form.key.replace(/[^\w_]/g, "");
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
"xmlform.xmlkey": {
|
||||
handler() {
|
||||
let reg = /[^\w_]+$/;
|
||||
if (reg.test(this.xmlform.xmlkey)) {
|
||||
this.$alert("数据库名称只可为字母、数字、下划线组合！", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
}
|
||||
this.xmlform.xmlkey = this.xmlform.xmlkey.replace(/[^\w_]/g, "");
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#buttomContain {
|
||||
right: 25px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between; /* 让搜索容器和按钮分别靠左和靠右 */
|
||||
width: calc(100% - 50px); /* 设置容器宽度，减去左右边距 */
|
||||
}
|
||||
|
||||
.search-container {
|
||||
/* 移除右边距，让搜索容器靠左 */
|
||||
}
|
||||
|
||||
#tableStyle {
|
||||
top: 40px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
197
src/components/TaskManagement/xml/position.vue
Normal file
197
src/components/TaskManagement/xml/position.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div id="tablecontainer">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="定位方式" name="first"></el-tab-pane>
|
||||
<el-main>
|
||||
<el-checkbox-group
|
||||
v-model="checkList"
|
||||
style="margin-top: 30px"
|
||||
@change="changePosition"
|
||||
>
|
||||
<ul>
|
||||
<el-checkbox label="gps" border style="width: 160px"
|
||||
>GPS定位</el-checkbox
|
||||
>
|
||||
</ul>
|
||||
<ul>
|
||||
<el-checkbox
|
||||
label="network"
|
||||
border
|
||||
style="margin-top: 10px; width: 160px"
|
||||
>网络</el-checkbox
|
||||
>
|
||||
</ul>
|
||||
<ul>
|
||||
<el-checkbox
|
||||
label="bluetooth"
|
||||
border
|
||||
style="margin-top: 10px; width: 160px"
|
||||
>蓝牙</el-checkbox
|
||||
>
|
||||
</ul>
|
||||
<ul>
|
||||
<el-checkbox
|
||||
label="baidu"
|
||||
border
|
||||
style="margin-top: 10px; width: 160px"
|
||||
>百度</el-checkbox
|
||||
>
|
||||
</ul>
|
||||
<ul>
|
||||
<el-checkbox
|
||||
label="auto"
|
||||
border
|
||||
style="margin-top: 10px; width: 160px"
|
||||
>自动</el-checkbox
|
||||
>
|
||||
</ul>
|
||||
</el-checkbox-group>
|
||||
<el-button
|
||||
id="buttonStyle"
|
||||
size="small"
|
||||
style="margin-top: 30px; margin-left: 40px"
|
||||
v-if="getInfo == '1'"
|
||||
@click="backUploadData(checkList)"
|
||||
>上一步</el-button
|
||||
>
|
||||
<el-button
|
||||
id="buttonStyle"
|
||||
size="small"
|
||||
style="margin-top: 30px"
|
||||
v-if="getInfo == '1'"
|
||||
@click="UploadData(checkList)"
|
||||
>保存并下一步</el-button
|
||||
>
|
||||
</el-main>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { store } from "@/components/vuex/store.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
getInfo: sessionStorage.getItem("getInfo"),
|
||||
activeName: "first",
|
||||
checkList: [],
|
||||
checkList1: [],
|
||||
|
||||
position: [],
|
||||
id: "",
|
||||
name: "",
|
||||
key: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let that = this;
|
||||
let config = sessionStorage["Data"];
|
||||
if (config) {
|
||||
config = JSON.parse(config);
|
||||
this.position = config.meta.position;
|
||||
} else {
|
||||
if (that.$store.state.config.meta.position)
|
||||
this.position = that.$store.state.config.meta.position;
|
||||
}
|
||||
if (this.position.length > 0) {
|
||||
for (var i = 0; i < this.position.length; i++) {
|
||||
var select = this.position[i].name;
|
||||
this.checkList.push(select);
|
||||
this.checkList1.push(select);
|
||||
}
|
||||
}
|
||||
},
|
||||
backUploadData(checkList) {
|
||||
let that = this;
|
||||
//传入position
|
||||
that.position = [];
|
||||
for (var j = 0; j < that.checkList.length; j++) {
|
||||
var name1 = that.checkList[j];
|
||||
var draw = {
|
||||
name: name1,
|
||||
};
|
||||
that.position.push(draw);
|
||||
}
|
||||
that.$store.dispatch("updatePosition1", { position: that.position });
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "保存成功",
|
||||
});
|
||||
this.$router.push({
|
||||
path:
|
||||
"/home/" + this.name + "/" + this.key + "/" + this.id + "/drawtool",
|
||||
});
|
||||
},
|
||||
UploadData(checkList) {
|
||||
let that = this;
|
||||
//传入position
|
||||
that.position = [];
|
||||
for (var j = 0; j < that.checkList.length; j++) {
|
||||
var name1 = that.checkList[j];
|
||||
var draw = {
|
||||
name: name1,
|
||||
};
|
||||
that.position.push(draw);
|
||||
}
|
||||
that.$store.dispatch("updatePosition1", { position: that.position });
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "保存成功",
|
||||
});
|
||||
this.$router.push({
|
||||
path:
|
||||
"/home/" + this.name + "/" + this.key + "/" + this.id + "/basemap",
|
||||
});
|
||||
},
|
||||
changePosition() {
|
||||
if (this.getInfo != 1) {
|
||||
this.checkList = this.checkList1;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
//用watch监听变化
|
||||
$route: {
|
||||
handler(to, from) {
|
||||
this.id = to.params.id;
|
||||
this.key = to.params.key;
|
||||
this.name = to.params.name;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
store,
|
||||
mounted: function () {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
@media screen and (min-height: 800px) {
|
||||
#checkcontainer {
|
||||
height: 500px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-height: 700px) and (max-height: 800px) {
|
||||
#checkcontainer {
|
||||
height: 400px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-height: 600px) and (max-height: 700px) {
|
||||
#checkcontainer {
|
||||
height: 350px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-height: 500px) and (max-height: 600px) {
|
||||
#checkcontainer {
|
||||
height: 300px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-height: 500px) {
|
||||
#checkcontainer {
|
||||
height: 250px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
2470
src/components/TaskManagement/xml/tableCon.vue
Normal file
2470
src/components/TaskManagement/xml/tableCon.vue
Normal file
File diff suppressed because it is too large
Load Diff
236
src/components/login/Addinfo.vue
Normal file
236
src/components/login/Addinfo.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="register-main">
|
||||
<div class="header-title">
|
||||
<span class="left-text">完善信息</span>
|
||||
</div>
|
||||
<el-row :gutter="10" class="register-body">
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
class="el-col-sm-push-6 el-col-md-push-6 el-col-lg-push-6"
|
||||
>
|
||||
<el-form
|
||||
ref="account"
|
||||
:model="account"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item prop="username" label="用户名：">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="account.username"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入用户名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="phone" label="手机号：">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="account.phone"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入手机号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email" label="邮箱：">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="account.email"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入邮箱"
|
||||
@change="time = 0"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 0; width: 100%">
|
||||
<el-button
|
||||
type="primary"
|
||||
style="width: 100%"
|
||||
@click.native.prevent="handleModify"
|
||||
:loading="loading"
|
||||
>确定</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item class="extra-text">
|
||||
<router-link
|
||||
:to="{ path: '/login' }"
|
||||
class="login-text"
|
||||
title="立即登录"
|
||||
>返回登录</router-link
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ajax as request } from "@/request.js";
|
||||
export default {
|
||||
data() {
|
||||
var validemail = (rule, value, callback) => {
|
||||
var regEmail =
|
||||
/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
|
||||
if (!regEmail.test(value)) {
|
||||
callback(new Error("邮箱格式不正确"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
loading: false,
|
||||
account: {
|
||||
username: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: "请输入用户名", trigger: "blur" },
|
||||
{ min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" },
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: "请输入手机号", trigger: "blur" },
|
||||
{ min: 11, max: 11, message: "请输入11位手机号", trigger: "blur" },
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: "请输入邮箱", trigger: "blur" },
|
||||
{ validator: validemail, trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
handleModify() {
|
||||
this.$refs.account.validate((valid) => {
|
||||
if (valid) {
|
||||
let that = this;
|
||||
request({
|
||||
url: "/user/update",
|
||||
method: "post",
|
||||
params: {
|
||||
username: that.account.username,
|
||||
phone: that.account.phone,
|
||||
email: that.account.email,
|
||||
},
|
||||
}).then(function (response) {
|
||||
//获取数据存入config
|
||||
if (response.data.success == true) {
|
||||
that.$router.push({ path: "/login" });
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "成功！",
|
||||
});
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: response.data.message,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
account: {
|
||||
handler() {
|
||||
if (this.account.phone != "") {
|
||||
var reg = /\D/;
|
||||
if (reg.test(this.account.phone)) {
|
||||
this.$message.info("手机号只可为数字");
|
||||
}
|
||||
this.account.phone = this.account.phone.replace(/\D/, "");
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#app {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.container {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #2d3a4b;
|
||||
}
|
||||
.register-main {
|
||||
margin: 200px auto;
|
||||
padding: 18px;
|
||||
max-width: 836px;
|
||||
min-width: 280px;
|
||||
background-clip: padding-box;
|
||||
background: #f2f6fc;
|
||||
border: 1px solid #eaeaea;
|
||||
|
||||
background: -ms-linear-gradient(top, #ace, #00c1de); /* IE 10 */
|
||||
background: -moz-linear-gradient(top, #ace, #00c1de); /*火狐*/
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
0% 0%,
|
||||
0% 100%,
|
||||
from(#ace),
|
||||
to(#00c1de)
|
||||
); /*谷歌*/
|
||||
background: -webkit-linear-gradient(
|
||||
top,
|
||||
#ace,
|
||||
#00c1de
|
||||
); /*Safari5.1 Chrome 10+*/
|
||||
background: -o-linear-gradient(top, #ace, #00c1de); /*Opera 11.10+*/
|
||||
}
|
||||
|
||||
.header-title {
|
||||
position: relative;
|
||||
padding: 15px 10px 15px;
|
||||
border-bottom: 5px solid #ccc;
|
||||
|
||||
.left-text {
|
||||
font-size: 1.7rem;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.right-text {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 10px;
|
||||
font-size: 1.28rem;
|
||||
}
|
||||
}
|
||||
|
||||
.register-body {
|
||||
padding: 40px 3%;
|
||||
}
|
||||
.extra-text {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.login-text {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 2px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
.register-main {
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
271
src/components/login/ForgetPassword.vue
Normal file
271
src/components/login/ForgetPassword.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="register-main">
|
||||
<div class="header-title">
|
||||
<span class="left-text">忘记密码</span>
|
||||
</div>
|
||||
<el-row :gutter="10" class="register-body">
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
class="el-col-sm-push-6 el-col-md-push-6 el-col-lg-push-6"
|
||||
>
|
||||
<el-form ref="account" :model="account" :rules="rules" label-width="100px">
|
||||
<el-form-item prop="email" label="邮箱：">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="account.email"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入注册邮箱"
|
||||
@change="time=0"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" label="新密码：">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="account.password"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入新密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" label="验证码：">
|
||||
<el-input
|
||||
type="text"
|
||||
style="width:48%;"
|
||||
v-model="account.code"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入验证码"
|
||||
></el-input>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
:disabled="disabled"
|
||||
style="width:50%;"
|
||||
@click.native.prevent="sendcode"
|
||||
:loading="loading"
|
||||
>{{btntxt}}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom:0; width:100%;">
|
||||
<el-button
|
||||
type="primary"
|
||||
style="width:100%;"
|
||||
@click.native.prevent="handleModify"
|
||||
:loading="loading"
|
||||
>确定</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item class="extra-text">
|
||||
<router-link :to="{path: '/login'}" class="login-text" title="立即登录">返回登录</router-link>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ajax as request } from "@/request.js";
|
||||
import md5 from "js-md5";
|
||||
export default {
|
||||
data() {
|
||||
var validpassword = (rule, value, callback) => {
|
||||
let reg = /[0-9a-zA-Z]{6,18}/;
|
||||
if (!reg.test(value)) {
|
||||
callback(new Error("密码必须是由6-18位数字和字母组合"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validemail = (rule, value, callback) => {
|
||||
var regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
|
||||
if (!regEmail.test(value)) {
|
||||
callback(new Error("邮箱格式不正确"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
disabled: false,
|
||||
loading: false,
|
||||
time: 0,
|
||||
btntxt: "获取验证码",
|
||||
account: {
|
||||
password: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
code: ""
|
||||
},
|
||||
rules: {
|
||||
password: [
|
||||
{ required: true, message: "请输入新密码", trigger: "blur" },
|
||||
{ validator: validpassword, trigger: "blur" }
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: "请输入注册手机号", trigger: "blur" },
|
||||
{ min: 11, max: 11, message: "请输入11位手机号", trigger: "blur" }
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: "请输入注册邮箱", trigger: "blur" },
|
||||
{ validator: validemail, trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
sendcode() {
|
||||
this.time = 60;
|
||||
this.disabled = true;
|
||||
this.timer();
|
||||
//向后台发送邮箱地址 接收返回值
|
||||
let that = this;
|
||||
request({
|
||||
url: "/user/password_recover/authentication",
|
||||
method: "post",
|
||||
params: {
|
||||
email: that.account.email
|
||||
}
|
||||
}).then(function(response) {
|
||||
if (response.data.success == true) {
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "验证码已发送！"
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
timer() {
|
||||
if (this.time > 0) {
|
||||
this.time--;
|
||||
this.btntxt = this.time + "s后重新获取";
|
||||
setTimeout(this.timer, 1000);
|
||||
} else {
|
||||
this.time = 0;
|
||||
this.btntxt = "获取验证码";
|
||||
this.disabled = false;
|
||||
}
|
||||
},
|
||||
handleModify() {
|
||||
this.$refs.account.validate(valid => {
|
||||
if (valid) {
|
||||
//判断验证码是否正确 发送用户名、新旧密码、手机号给后台
|
||||
let that = this;
|
||||
request({
|
||||
url: " /user/password_recover/action",
|
||||
method: "post",
|
||||
params: {
|
||||
email: that.account.email,
|
||||
newPassword: md5(md5(that.account.password)),
|
||||
code: that.account.code
|
||||
}
|
||||
}).then(function(response) {
|
||||
//获取数据存入config
|
||||
if (response.data.success == true) {
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "修改成功！"
|
||||
});
|
||||
that.$router.push({ path: "/login" });
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: response.data.message
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#app {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.container {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: url(../../assets/images/background.jpg) no-repeat;
|
||||
background-size:100% 100%;
|
||||
background-attachment:fixed
|
||||
}
|
||||
.register-main {
|
||||
margin: 180px auto;
|
||||
padding: 18px;
|
||||
max-width: 736px;
|
||||
min-width: 280px;
|
||||
|
||||
background: #F7F8F1;
|
||||
box-shadow: 0 2px 40px 0 rgba(157,187,231,0.50);
|
||||
border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
background: -ms-linear-gradient(top, #ace, #00c1de); /* IE 10 */
|
||||
background: -moz-linear-gradient(top, #ace, #00c1de); /*火狐*/
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
0% 0%,
|
||||
0% 100%,
|
||||
from(#ace),
|
||||
to(#00c1de)
|
||||
); /*谷歌*/
|
||||
background: -webkit-linear-gradient(
|
||||
top,
|
||||
#ace,
|
||||
#00c1de
|
||||
); /*Safari5.1 Chrome 10+*/
|
||||
background: -o-linear-gradient(top, #ace, #00c1de); /*Opera 11.10+*/
|
||||
}
|
||||
|
||||
.header-title {
|
||||
position: relative;
|
||||
padding: 15px 10px 15px;
|
||||
border-bottom: 5px solid #264672;
|
||||
|
||||
.left-text {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 20px;
|
||||
color: #264672;
|
||||
}
|
||||
}
|
||||
.el-form-item__label {
|
||||
color: #264672 !important;
|
||||
}
|
||||
.el-input__inner {
|
||||
&::placeholder {
|
||||
font-family: PingFangSC-Regular;
|
||||
}
|
||||
}
|
||||
|
||||
.register-body {
|
||||
padding: 40px 3%;
|
||||
}
|
||||
.extra-text {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.login-text {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 2px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
.register-main {
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
280
src/components/login/ModifyPassword.vue
Normal file
280
src/components/login/ModifyPassword.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="register-main">
|
||||
<div class="header-title">
|
||||
<span class="left-text">修改密码</span>
|
||||
</div>
|
||||
<el-row :gutter="10" class="register-body">
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
class="el-col-sm-push-6 el-col-md-push-6 el-col-lg-push-6"
|
||||
>
|
||||
<el-form ref="account" :model="account" :rules="rules" label-width="100px">
|
||||
<el-form-item prop="username" label="用户名：">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="account.username"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入用户名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" label="旧密码：">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="account.password"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入旧密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password1" label="新密码：">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="account.password1"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入新密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password2" label="确认密码：">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="account.password2"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请确认密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom:0; width:100%;">
|
||||
<el-button
|
||||
type="primary"
|
||||
style="width:100%;"
|
||||
@click.native.prevent="handleModify"
|
||||
:loading="loading"
|
||||
>确定</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item class="extra-text">
|
||||
<router-link :to="{path: '/login'}" class="login-text" title="立即登录">返回登录</router-link>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ajax as request } from "@/request.js";
|
||||
import md5 from "js-md5";
|
||||
export default {
|
||||
data() {
|
||||
var validatePass = (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请再次输入密码"));
|
||||
} else if (value !== this.account.password1) {
|
||||
callback(new Error("两次输入密码不一致!"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validpassword = (rule, value, callback) => {
|
||||
let reg = /[0-9a-zA-Z]{6,18}/;
|
||||
if (!reg.test(value)) {
|
||||
callback(new Error("密码必须是由6-18位数字和字母组合"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
var validemail = (rule, value, callback) => {
|
||||
var regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
|
||||
if (!regEmail.test(value)) {
|
||||
callback(new Error("邮箱格式不正确"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
disabled: false,
|
||||
loading: false,
|
||||
time: 0,
|
||||
btntxt: "获取验证码",
|
||||
account: {
|
||||
username: "",
|
||||
password: "",
|
||||
password1: "",
|
||||
password2: ""
|
||||
/* phone:'',
|
||||
email:'',
|
||||
code:''*/
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: "请输入用户名", trigger: "blur" },
|
||||
{ min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "请输入旧密码", trigger: "blur" },
|
||||
{ validator: validpassword, trigger: "blur" }
|
||||
],
|
||||
password1: [
|
||||
{ required: true, message: "请输入新密码", trigger: "blur" },
|
||||
{ validator: validatePass, trigger: "blur" },
|
||||
{ validator: validpassword, trigger: "blur" }
|
||||
],
|
||||
password2: [
|
||||
{ required: true, message: "请再次输入密码", trigger: "blur" },
|
||||
{ validator: validatePass, trigger: "blur" }
|
||||
]
|
||||
/* phone:[
|
||||
{ required: true, message: '请输入注册手机号', trigger: 'blur' },
|
||||
{ min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' }
|
||||
],
|
||||
email:[
|
||||
{ required: true, message: '请输入注册邮箱', trigger: 'blur' },
|
||||
{ validator: validemail, trigger: 'blur' }
|
||||
]*/
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
/* sendcode(){
|
||||
this.time=60;
|
||||
this.disabled=true;
|
||||
this.timer();
|
||||
//向后台发送邮箱地址 接收返回值
|
||||
},
|
||||
timer(){
|
||||
if (this.time > 0) {
|
||||
this.time--;
|
||||
this.btntxt=this.time+"s后重新获取";
|
||||
setTimeout(this.timer, 1000);
|
||||
} else{
|
||||
this.time=0;
|
||||
this.btntxt="获取验证码";
|
||||
this.disabled=false;
|
||||
}
|
||||
},*/
|
||||
handleModify() {
|
||||
this.$refs.account.validate(valid => {
|
||||
if (valid) {
|
||||
//判断验证码是否正确 发送用户名、新旧密码、手机号给后台
|
||||
let that = this;
|
||||
request({
|
||||
url: "/user/password_reset",
|
||||
method: "post",
|
||||
params: {
|
||||
username: that.account.username,
|
||||
oldPassword: md5(md5(that.account.password)),
|
||||
newPassword: md5(md5(that.account.password1))
|
||||
}
|
||||
}).then(function(response) {
|
||||
//获取数据存入config
|
||||
if (response.data.success == true) {
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "修改成功！"
|
||||
});
|
||||
that.$router.push({ path: "/login" });
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: response.data.message
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#app {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.container {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: url(../../assets/images/background.jpg) no-repeat;
|
||||
background-size:100% 100%;
|
||||
background-attachment:fixed
|
||||
}
|
||||
.register-main {
|
||||
margin: 150px auto;
|
||||
padding: 18px;
|
||||
max-width: 736px;
|
||||
min-width: 280px;
|
||||
background: #F7F8F1;
|
||||
box-shadow: 0 2px 40px 0 rgba(157,187,231,0.50);
|
||||
border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
background: -ms-linear-gradient(top, #ace, #00c1de); /* IE 10 */
|
||||
background: -moz-linear-gradient(top, #ace, #00c1de); /*火狐*/
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
0% 0%,
|
||||
0% 100%,
|
||||
from(#ace),
|
||||
to(#00c1de)
|
||||
); /*谷歌*/
|
||||
background: -webkit-linear-gradient(
|
||||
top,
|
||||
#ace,
|
||||
#00c1de
|
||||
); /*Safari5.1 Chrome 10+*/
|
||||
background: -o-linear-gradient(top, #ace, #00c1de); /*Opera 11.10+*/
|
||||
}
|
||||
|
||||
.header-title {
|
||||
position: relative;
|
||||
padding: 15px 10px 15px;
|
||||
border-bottom: 5px solid #264672;
|
||||
|
||||
.left-text {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 20px;
|
||||
color: #264672;
|
||||
}
|
||||
}
|
||||
.el-form-item__label {
|
||||
color: #264672 !important;
|
||||
}
|
||||
.el-input__inner {
|
||||
&::placeholder {
|
||||
font-family: PingFangSC-Regular;
|
||||
}
|
||||
}
|
||||
|
||||
.register-body {
|
||||
padding: 40px 3%;
|
||||
}
|
||||
.extra-text {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.login-text {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 2px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
.register-main {
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
332
src/components/login/login.vue
Normal file
332
src/components/login/login.vue
Normal file
@@ -0,0 +1,332 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<img
|
||||
style="position: fixed; width: 100%; height: 100%; z-index: -1; left: 0"
|
||||
src="../../assets/images/background.jpg"
|
||||
/>
|
||||
<el-form
|
||||
autocomplete="on"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
ref="loginForm"
|
||||
label-position="left"
|
||||
label-width="0px"
|
||||
class="card-box login-form"
|
||||
>
|
||||
<p class="title">{{ myname }}</p>
|
||||
<el-form-item prop="username">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input
|
||||
name="username"
|
||||
type="text"
|
||||
v-model="loginForm.username"
|
||||
autocomplete="on"
|
||||
placeholder="用户名"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password"></svg-icon>
|
||||
</span>
|
||||
<el-input
|
||||
name="password"
|
||||
:type="pwdType"
|
||||
@keyup.enter.native="handleLogin"
|
||||
v-model="loginForm.password"
|
||||
autocomplete="on"
|
||||
placeholder="密码"
|
||||
></el-input>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon v-show="pwdType == 'password'" icon-class="eye" />
|
||||
<svg-icon v-show="pwdType == ''" icon-class="eye2" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="loginbutton"
|
||||
:loading="loading"
|
||||
@click.native.prevent="handleLogin"
|
||||
>登录</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="loginbutton" @click.native.prevent="toRegister"
|
||||
>注册</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<div class="extra-text">
|
||||
<router-link
|
||||
:to="{ path: '/modifypassword' }"
|
||||
class="login-text1"
|
||||
title="修改密码"
|
||||
>修改密码</router-link
|
||||
>
|
||||
<router-link
|
||||
:to="{ path: '/forgetpassword' }"
|
||||
class="login-text"
|
||||
title="忘记密码"
|
||||
>忘记密码</router-link
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
<span style="position: fixed; bottom: 10px; left: 10px; color: lightgray"
|
||||
>6.12</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ajax as request } from "@/request.js";
|
||||
import md5 from "js-md5";
|
||||
export default {
|
||||
name: "login",
|
||||
data() {
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length < 6) {
|
||||
callback(new Error("密码不能小于6位"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
myname: myname,
|
||||
loginForm: {
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
loginRules: {
|
||||
username: [
|
||||
{ required: true, message: "请输入用户名", trigger: "blur" },
|
||||
// { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" },
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", validator: validatePass },
|
||||
],
|
||||
},
|
||||
loading: false,
|
||||
pwdType: "password",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showPwd() {
|
||||
if (this.pwdType === "password") {
|
||||
this.pwdType = "";
|
||||
} else {
|
||||
this.pwdType = "password";
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
let that = this;
|
||||
that.loading = true;
|
||||
|
||||
// sessionStorage.setItem("access-user", "Admin");
|
||||
// that.$router.push({ path: "/view" });
|
||||
request({
|
||||
url: "/user/login",
|
||||
method: "post",
|
||||
params: {
|
||||
username: that.loginForm.username,
|
||||
password: md5(md5(that.loginForm.password)),
|
||||
},
|
||||
}).then(function (response) {
|
||||
//获取数据存入config
|
||||
if (response.data.success == true) {
|
||||
sessionStorage.setItem("access-user", response.data.data.role);
|
||||
sessionStorage.setItem("access-id", response.data.data.id);
|
||||
if (
|
||||
sessionStorage.getItem("access-user") == "Admin" ||
|
||||
sessionStorage.getItem("access-user") == "SuperAdmin" ||
|
||||
sessionStorage.getItem("access-user") == "Leader"
|
||||
) {
|
||||
that.loading = false;
|
||||
that.$router.push({ path: "/view" });
|
||||
} else if (sessionStorage.getItem("access-user") == "Operator") {
|
||||
that.loading = false;
|
||||
that.$router.push({ path: "/main" });
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: "用户不可登录该系统！",
|
||||
});
|
||||
that.loading = false;
|
||||
}
|
||||
} else if (response.data.status == "204") {
|
||||
that
|
||||
.$confirm("用户信息不完善，是否去完善信息？", "提示", {
|
||||
cancelButtonText: "取消",
|
||||
confirmButtonText: "确定",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
that.loading = false;
|
||||
that.$router.push({ path: "/addinfo" });
|
||||
})
|
||||
.catch(() => {
|
||||
that.loading = false;
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: "登录失败",
|
||||
});
|
||||
});
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: response.data.message,
|
||||
});
|
||||
that.loading = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
toRegister() {
|
||||
this.$router.push({ path: "/register" });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.login-container {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
/*background: url(../../assets/images/background.jpg) no-repeat;
|
||||
background-size:100% 100%;
|
||||
background-attachment:fixed;*/
|
||||
.tips {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.svg-container {
|
||||
color: #264672;
|
||||
vertical-align: middle;
|
||||
padding: 6px 0px 6px 0px;
|
||||
vertical-align: middle;
|
||||
width: 14.5px;
|
||||
display: inline-block;
|
||||
&_login {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 20px;
|
||||
color: #264672;
|
||||
background: rgba(157, 187, 231, 0.1);
|
||||
width: 402px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-left: 21px;
|
||||
margin-top: 24px;
|
||||
width: 360px;
|
||||
height: 50px;
|
||||
background: rgba(157, 187, 231, 0.3) !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 47px;
|
||||
width: 85%;
|
||||
}
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
padding: 12px 0px 12px 10.8px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 16px;
|
||||
color: #264672;
|
||||
}
|
||||
.el-input__inner {
|
||||
&::placeholder {
|
||||
color: #264672;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.login-form {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 150px auto;
|
||||
//opacity: 0.9;
|
||||
background: rgba(247, 248, 241, 0.9);
|
||||
box-shadow: 0 2px 40px 0 rgba(157, 187, 231, 0.5);
|
||||
border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
width: 402px;
|
||||
height: 438px;
|
||||
}
|
||||
.loginbutton {
|
||||
width: 360px;
|
||||
height: 50px;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 0px;
|
||||
background: #9dbbe7 !important;
|
||||
border-color: #9dbbe7 !important;
|
||||
border-radius: 4px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.login-text1 {
|
||||
position: absolute;
|
||||
left: 21px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
font-family: PingFangSC-Regular;
|
||||
}
|
||||
.login-text {
|
||||
position: absolute;
|
||||
right: 21px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
font-family: PingFangSC-Regular;
|
||||
}
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: #889aa4;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.extra-text {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 480px) {
|
||||
.login-form {
|
||||
width: 300px !important;
|
||||
}
|
||||
.login-container .loginbutton {
|
||||
width: 260px !important;
|
||||
}
|
||||
.login-container .el-form-item {
|
||||
width: 260px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
305
src/components/login/register.vue
Normal file
305
src/components/login/register.vue
Normal file
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div style="height: 80%; position: relative">
|
||||
<div class="register-main" style="overflow-y: hidden; overflow-y: scroll">
|
||||
<div style="height: 400px">
|
||||
<div class="header-title">
|
||||
<span class="left-text">注册账号</span>
|
||||
</div>
|
||||
<el-row :gutter="10" class="register-body">
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
class="el-col-sm-push-6 el-col-md-push-6 el-col-lg-push-6"
|
||||
>
|
||||
<el-form
|
||||
ref="account"
|
||||
:model="account"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item prop="username" label="用户名：">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="account.username"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入用户名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="realName" label="真实姓名：">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="account.realName"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入真实姓名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" label="密码：">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="account.password"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password1" label="确认密码：">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="account.password1"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请确认密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="phone" label="手机号：">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="account.phone"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入注册手机号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email" label="邮箱：">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="account.email"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入注册邮箱"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="code" prop="code" label="邀请码：">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="account.code"
|
||||
auto-complete="off"
|
||||
placeholder="请输入邀请码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 0; width: 100%">
|
||||
<el-button
|
||||
type="primary"
|
||||
style="width: 100%"
|
||||
@click.native.prevent="handleRegister"
|
||||
:loading="loading"
|
||||
>注册</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item class="extra-text">
|
||||
<router-link
|
||||
:to="{ path: '/login' }"
|
||||
class="login-text"
|
||||
title="立即登录"
|
||||
>已经拥有账户？登录</router-link
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ajax as request } from "@/request.js";
|
||||
import md5 from "js-md5";
|
||||
export default {
|
||||
data() {
|
||||
var validatePass = (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请再次输入密码"));
|
||||
} else if (value !== this.account.password) {
|
||||
callback(new Error("两次输入密码不一致!"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validpassword = (rule, value, callback) => {
|
||||
let reg = /[0-9a-zA-Z]{6,18}/;
|
||||
if (!reg.test(value)) {
|
||||
callback(new Error("密码必须是由6-18位数字和字母组合"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validemail = (rule, value, callback) => {
|
||||
var regEmail =
|
||||
/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
|
||||
if (!regEmail.test(value)) {
|
||||
callback(new Error("邮箱格式不正确"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
loading: false,
|
||||
account: {
|
||||
username: "",
|
||||
password: "",
|
||||
password1: "",
|
||||
realName: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
code: "",
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: "请输入用户名", trigger: "blur" },
|
||||
// { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" }
|
||||
],
|
||||
realName: [
|
||||
{ required: true, message: "请输入真实姓名", trigger: "blur" },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||
{ validator: validpassword, trigger: "blur" },
|
||||
],
|
||||
code: [{ required: true, message: "请输入邀请码", trigger: "blur" }],
|
||||
password1: [
|
||||
{ required: true, message: "请再次输入密码", trigger: "blur" },
|
||||
{ validator: validatePass, trigger: "blur" },
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: "请输入手机号", trigger: "blur" },
|
||||
{ min: 11, max: 11, message: "请输入11位手机号", trigger: "blur" },
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: "请输入邮箱", trigger: "blur" },
|
||||
{ validator: validemail, trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
handleRegister() {
|
||||
//注册
|
||||
this.$refs.account.validate((valid) => {
|
||||
if (valid) {
|
||||
let that = this;
|
||||
request({
|
||||
url: "/user/register",
|
||||
method: "post",
|
||||
params: {
|
||||
username: that.account.username,
|
||||
realName: that.account.realName,
|
||||
password: md5(md5(that.account.password)),
|
||||
phone: that.account.phone,
|
||||
email: that.account.email,
|
||||
code: that.account.code,
|
||||
},
|
||||
}).then(function (response) {
|
||||
//获取数据存入config
|
||||
if (response.data.success == true) {
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "注册成功！",
|
||||
});
|
||||
that.loading = true;
|
||||
that.$router.push({ path: "/login" });
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: response.data.message,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
body {
|
||||
margin: 0px;
|
||||
background: url(../../assets/images/background.jpg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
.container {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: url(../../assets/images/background.jpg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
.register-main {
|
||||
margin-top: 150px;
|
||||
position: absolute;
|
||||
padding: 18px;
|
||||
margin-left: 18%;
|
||||
width: 64%;
|
||||
height: 80%;
|
||||
background: #f7f8f1;
|
||||
box-shadow: 0 2px 40px 0 rgba(157, 187, 231, 0.5);
|
||||
border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
background: -ms-linear-gradient(top, #ace, #00c1de); /* IE 10 */
|
||||
background: -moz-linear-gradient(top, #ace, #00c1de); /*火狐*/
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
0% 0%,
|
||||
0% 100%,
|
||||
from(#ace),
|
||||
to(#00c1de)
|
||||
); /*谷歌*/
|
||||
background: -webkit-linear-gradient(top, #ace, #00c1de);
|
||||
background: -o-linear-gradient(top, #ace, #00c1de); /*Opera 11.10+*/
|
||||
}
|
||||
|
||||
.header-title {
|
||||
position: relative;
|
||||
padding: 15px 10px 15px;
|
||||
border-bottom: 5px solid #264672;
|
||||
|
||||
.left-text {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 20px;
|
||||
color: #264672;
|
||||
}
|
||||
}
|
||||
.el-form-item__label {
|
||||
color: #264672 !important;
|
||||
}
|
||||
.el-input__inner {
|
||||
&::placeholder {
|
||||
font-family: PingFangSC-Regular;
|
||||
}
|
||||
}
|
||||
|
||||
.register-body {
|
||||
padding: 40px 3%;
|
||||
}
|
||||
.extra-text {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.login-text {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 2px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
.register-main {
|
||||
margin: 20 auto 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
93
src/components/vuex/store.js
Normal file
93
src/components/vuex/store.js
Normal file
@@ -0,0 +1,93 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
Vue.use(Vuex)
|
||||
|
||||
export const store = new Vuex.Store({
|
||||
state: {
|
||||
config: {
|
||||
meta: {
|
||||
drawtool: {},
|
||||
position: [],
|
||||
basemap: [],
|
||||
},
|
||||
tables: [],
|
||||
},
|
||||
LocalLocation: {
|
||||
currentPosition: '',
|
||||
currentLocation: ''
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
updateDrawtool(state, drawtool) {
|
||||
//刷新之后 重新赋值 页面数据会丢失
|
||||
let config = sessionStorage["Data"]
|
||||
if (config) {
|
||||
state.config = JSON.parse(config)
|
||||
}
|
||||
|
||||
state.config.meta.drawtool = drawtool
|
||||
sessionStorage["Data"] = JSON.stringify(state.config)
|
||||
},
|
||||
updatePosition1(state, position) {
|
||||
let config = sessionStorage["Data"]
|
||||
if (config) {
|
||||
state.config = JSON.parse(config)
|
||||
}
|
||||
|
||||
state.config.meta.position = position
|
||||
sessionStorage["Data"] = JSON.stringify(state.config)
|
||||
},
|
||||
updateBasemap(state, basemap) {
|
||||
let config = sessionStorage["Data"]
|
||||
if (config) {
|
||||
state.config = JSON.parse(config)
|
||||
}
|
||||
|
||||
state.config.meta.basemap = basemap
|
||||
sessionStorage["Data"] = JSON.stringify(state.config)
|
||||
},
|
||||
updateTables(state, tables) {
|
||||
let config = sessionStorage["Data"]
|
||||
if (config) {
|
||||
state.config = JSON.parse(config)
|
||||
}
|
||||
|
||||
state.config.tables = tables
|
||||
sessionStorage["Data"] = JSON.stringify(state.config)
|
||||
},
|
||||
updateData(state, config) {
|
||||
state.config = config
|
||||
},
|
||||
updateLocation(state, location) {
|
||||
state.LocalLocation.currentLocation = location
|
||||
},
|
||||
updatePosition(state, position) {
|
||||
state.LocalLocation.currentPosition = position
|
||||
}
|
||||
|
||||
},
|
||||
actions: {
|
||||
updateDrawtool({ commit, state }, obj) {
|
||||
commit('updateDrawtool', obj.drawtool)
|
||||
},
|
||||
updatePosition1({ commit, state }, obj) {
|
||||
commit('updatePosition1', obj.position)
|
||||
},
|
||||
updateBasemap({ commit, state }, obj) {
|
||||
commit('updateBasemap', obj.basemap)
|
||||
},
|
||||
updateTables({ commit, state }, obj) {
|
||||
commit("updateTables", obj.tables)
|
||||
},
|
||||
updateData({ commit, state }, obj) {
|
||||
commit("updateData", obj.config)
|
||||
},
|
||||
updateLocation({ commit, state }, obj) {
|
||||
commit("updateLocation", obj.location)
|
||||
},
|
||||
updatePosition({ commit, state }, obj) {
|
||||
commit("updatePosition", obj.position)
|
||||
}
|
||||
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user