Commit 11d2f3c4 authored by 耿迪迪's avatar 耿迪迪
parents 4e8346d4 6b0f4270
...@@ -51,7 +51,7 @@ export default class Mutil { ...@@ -51,7 +51,7 @@ export default class Mutil {
let tianSlB = new TileLayer({ let tianSlB = new TileLayer({
className: "mapTypeC", className: "mapTypeC",
source: new XYZ({ source: new XYZ({
//url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997", // url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
url: " http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7", url: " http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
}), }),
visible: false, visible: false,
...@@ -60,7 +60,7 @@ export default class Mutil { ...@@ -60,7 +60,7 @@ export default class Mutil {
let tianSlC = new TileLayer({ let tianSlC = new TileLayer({
className: "mapTypeC", className: "mapTypeC",
source: new XYZ({ source: new XYZ({
//url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997", // url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
url: "http://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}", url: "http://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}",
}), }),
visible: true, visible: true,
...@@ -306,36 +306,14 @@ export default class Mutil { ...@@ -306,36 +306,14 @@ export default class Mutil {
//对获取的点坐标数据进行处理,重构,得到我们需要的数据结构 //对获取的点坐标数据进行处理,重构,得到我们需要的数据结构
for (let i = 0; i < points.length; i++) { for (let i = 0; i < points.length; i++) {
let region = points[i]; //单个面 let region = points[i]; //单个面
//let pointArr = region.split(',');
//let p = pointArr[j];
let pArr = region.split(','); let pArr = region.split(',');
let pos = fromLonLat(pArr); //将坐标转为默认投影,默认投影是EPSG:3857 let pos = fromLonLat(pArr); //将坐标转为默认投影,默认投影是EPSG:3857
//let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326'); //坐标系间坐标转换,由前面的坐标转为后面坐标系坐标 let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326'); //坐标系间坐标转换,由前面的坐标转为后面坐标系坐标
pointsz.push(pos) //将转化格式后的点坐标存储起来 pointsz.push(pArr) //将转化格式后的点坐标存储起来
}; };
//自己造的地图数据(GeoJSON数据) //自己造的地图数据(GeoJSON数据)
let geojsonObject = this.structureGeojson(pointsz);
let vectorSource = new VectorSource({ //提供矢量图层的数据
features: (new GeoJSON().readFeatures(geojsonObject))
});
let vectorLayer = new VectorLayer({
source: vectorSource, //来源
style: new Style({
stroke: new Stroke({
color: '#08d527',
width: 4
}),
fill: new Fill({
color: 'rgba(212, 220, 29, 0.1)'
})
})
});
if (this.tempLayer != ' ') {
this.MAP.removeLayer(this.tempLayer);
}
this.MAP.addLayer(vectorLayer);
this.tempLayer = vectorLayer;
}
structureGeojson(pointsz){
let geojsonObject = { let geojsonObject = {
'type': 'FeatureCollection', //要素集合 'type': 'FeatureCollection', //要素集合
'crs': { 'crs': {
...@@ -355,15 +333,39 @@ export default class Mutil { ...@@ -355,15 +333,39 @@ export default class Mutil {
} }
}] }]
}; };
return geojsonObject; let vectorSource = new VectorSource({ //提供矢量图层的数据
features: (new GeoJSON().readFeatures(geojsonObject))
});
let vectorLayer = new VectorLayer({
source: vectorSource, //来源
style: new Style({
stroke: new Stroke({
color: 'yellow',
width: 6
}),
fill: new Fill({
color: 'rgba(255,255,0,0.1)'
})
})
});
if (this.tempLayer != ' ') {
this.MAP.removeLayer(this.tempLayer);
}
this.MAP.addLayer(vectorLayer);
this.tempLayer = vectorLayer;
} }
getBoundaries(name) { //根据name传参 changeCenter(name) { //根据name传参
axios.get('https://restapi.amap.com/v3/config/district?key=cb087c0fb3b8bc56a4af064630495bb9&subdistrict=0&extensions=all&keywords='+name).then(res => { axios.get('https://restapi.amap.com/v3/config/district?key=cb087c0fb3b8bc56a4af064630495bb9&subdistrict=0&extensions=all&keywords='+name).then(res => {
let local = res.data.districts[0].center.split(","); let local = res.data.districts[0].center.split(",");
let view = this.MAP.getView(); let view = new View({
view.setCenter(fromLonLat(local)); center: transform(fromLonLat(local), 'EPSG:3857', 'EPSG:4326'), //将中心点坐标转为EPSG:4326
view.setZoom(10); projection: get('EPSG:4326'), //投影坐标系 EPSG:4326
zoom: 10
});
this.MAP.setView(view);
this.drawArea(res.data.districts[0]) this.drawArea(res.data.districts[0])
}) })
} }
......
<template>
<div class="wrapper editwrap w100">
<el-dialog
:visible.sync="dialogVisible"
:title="title"
:show-close="false"
:close-on-click-modal="false"
>
<el-row :gutter="20">
<el-col :span="12" class="flcolum">
<div>
<div class="yatit">预案基本信息</div>
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
<el-form-item label="预案标题" prop="planTitle">
<el-input v-model="editForm.planTitle"></el-input>
</el-form-item>
<el-form-item label="预案分类" prop="planType">
<el-input v-model="editForm.planType"></el-input>
</el-form-item>
<el-form-item label="预案等级" prop="planLevel">
<el-radio-group v-model="editForm.planLevel">
<el-radio label="Ⅰ">Ⅰ级</el-radio>
<el-radio label="Ⅱ">Ⅱ级</el-radio>
<el-radio label="Ⅲ">Ⅲ级</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="审核预案" prop="checkStatus">
<el-radio-group v-model="editForm.checkStatus">
<el-radio label="0">审核中</el-radio>
<el-radio label="1">通过</el-radio>
<el-radio label="2">未通过</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="预案源文件">
<el-upload
ref="uploaderB"
class="uploader"
:limit="1"
:action="actionUrl"
:on-success="(a,b,c) => onSuccess(a,b,c,'sourceFile')"
:on-error="onError"
:on-remove="handleRemove"
:before-remove="(a,b,c) => beforeRemove(a,b,c,'sourceFile')"
:on-exceed="onExceed"
:multiple="false"
list-type="picture"
:file-list="fileList"
>
<i class="el-icon-plus"></i>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
</el-upload>
<!-- <div v-if="fileList.length > 0">
<a v-for="(i,ind) in fileList" :key="ind" :href="i.url" target="_blank">{{i.name}}</a>&nbsp;&nbsp;&nbsp;<i class="btn el-icon-delete" @click="deleteList"></i>
</div>-->
</el-form-item>
</el-form>
</div>
</el-col>
<el-col :span="12" class="flcolum">
<div>
<div class="yatit">预案内容</div>
<textarea id="editorA" v-model="editForm.planContents" height="100%"></textarea>
</div>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="confirmFun('editForm')">提交</el-button>
<el-button @click="$emit('dialogFun')" size="small">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import City from "@/components/city.vue";
import METHOD from "@/utils/methods";
import ice from "@/utils/iceEditor-min.js";
let uploadfile = require("@/assets/uploadfile.png");
@Component({
components: { City },
})
export default class PlansMgEdit extends Vue {
//上传
@Provide() actionUrl: any = "";
@Provide() sourceFile: any = [];
@Provide() fileList: any = [];
//属性或参数中使用!:表示强制解析(告诉typescript编译器,这里一定有值),常用于vue-decorator中的@Prop
@Prop(Boolean) dialogVisible!: Boolean;
@Prop(String) title!: String;
@Prop(Object) editForm!:{
id: String;
enterpriseId: String;
sourceFile: String;
planContents: String;
planType: String;
planLevel: String;
planTitle: String;
fileOriginalName: String;
};
@Provide() enterpriseId: String = "";
@Provide() editorA: any;
@Provide() qyvisble: boolean = true;
@Provide() rules: any = {
planLevel: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
planTitle: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
planType: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
checkStatus: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
};
@Watch("sourceFile") change(val: any) {
if (val.length > 0) {
this.editForm.sourceFile = val[0].response.data.viewPath;
this.editForm.fileOriginalName = val[0].response.data.originalName;
this.fileList = [];
this.fileList.push({
name: this.editForm.fileOriginalName,
url: uploadfile,
});
} else {
this.editForm.sourceFile = "";
this.editForm.fileOriginalName = "";
}
}
//取消事件要在父级取消是所以用到 $emit
confirmFun(formName: string) {
let that = this;
that.editForm.planContents = that.editorA.getHTML();
that.editForm.enterpriseId = that.enterpriseId;
(that as any).$refs[formName].validate((valid: boolean) => {
if (that.editorA.getText() == false && that.editForm.sourceFile == "") {
that.$message.error("没有预案内容!");
return;
}
if (valid) {
METHOD.axiosPost(
that,
`/planInfo/addOrEditPlanInfo`,
that.editForm,
function (res: any) {
if (res.code == 0) {
(that as any).$message({
message: "操作成功!",
type: "success",
});
(that as any).$emit("dialogFun");
that.$emit("refreshTableData"); //刷新表格
}
}
);
} else {
return false;
}
});
}
/*
上传
*/
onSuccess(res: any, file: any, fileList: any, key: string) {
this.$data[key] = fileList;
}
onError(err: any, file: any, fileList: any) {
this.$message.error("上传失败!");
}
handleRemove(file: any, fileList: any, key: string) {
this.$data[key] = fileList;
}
onExceed(file: any, fileList: any) {
this.$message.warning("只允许上传一个文件,如需更改请先删除!");
}
beforeRemove(file: any, fileList: any) {
let that = this,
param;
param = file.response
? file.response.data.savePath.replace(/\\/g, "%")
: file.url.replace(/\\/g, "%").slice(9);
METHOD.axiosGet(this, `/file/deleteFile?savePath=${param}`, function (
res: any
) {
if (res.code == 0) that.$message.success("删除成功");
else return false;
});
}
//创建编辑器
creatEditor() {
this.editorA = new ice.editor("editorA");
this.editorA.menu = [
"fontSize",
"foreColor",
"bold",
"italic",
"underline",
"strikeThrough",
"line",
"justifyLeft",
"justifyCenter",
"justifyRight",
"line",
"table",
"insertImage",
"insertOrderedList",
"insertUnorderedList",
"indent",
];
this.editorA.height = "413px";
this.editorA.create();
}
deleteList() {
this.fileList = [];
this.editForm.sourceFile = "";
}
checkFile(url: any) {
window.open(METHOD.URL + url, "_blank");
}
created() {
let that = this;
that.enterpriseId = METHOD.enterpriseId;
// if (that.enterpriseId) {
// that.qyvisble = true;
that.$nextTick(() => {
that.creatEditor();
})
// } else {
// that.qyvisble = false;
// }
// if (that.editForm.id && that.enterpriseId) {
that.$nextTick(() => {
//编辑
if (that.editForm.planContents) {
that.editorA.setValue(that.editForm.planContents);
}
if (that.editForm.fileOriginalName) {
that.fileList.push({
name: that.editForm.fileOriginalName,
url: uploadfile,
});
}
});
// }
that.actionUrl = METHOD.URL + "/file/uploadFile";
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
.w100 .el-dialog {
width: 80%;
.flcolum {
> div {
border-radius: 3px;
}
}
.yatit {
background: #4273bd;
color: #ffffff;
line-height: 2;
height: 2em;
text-align: center;
margin-bottom: 10px;
border-radius: 2px;
}
.el-transfer-panel {
width: calc((100% - 116px) / 2);
}
.el-transfer__buttons {
width: 56px;
}
.el-transfer__button {
margin-left: 0;
display: block;
}
}
</style>
\ No newline at end of file
...@@ -31,11 +31,13 @@ ...@@ -31,11 +31,13 @@
<div style=""> <div style="">
<div style="width: 500px;height: 100%;z-index: 11;background-color: rgba(2, 40, 90, 0.4);position: absolute;top: 0;left: 10px;float: left;"> <div style="width: 500px;height: 100%;z-index: 11;background-color: rgba(2, 40, 90, 0.4);position: absolute;top: 0;left: 10px;float: left;">
<div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div> <div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
<div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div> <div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;">
<div id="main1" style="width:480px;height:250px;"></div>
</div>
<div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div> <div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
<!-- <div id="pieReport" style="width: 400px;height: 300px;background-color: rgba(2, 20, 44, 0.4)"></div> --> <!-- <div id="pieReport" style="width: 400px;height: 300px;background-color: rgba(2, 20, 44, 0.4)"></div> -->
</div> </div>
<div style="width: 500px;height: 100%;z-index: 12;background-color: rgba(0, 0, 0, 0.3);position: absolute;top: 0;right: 10px;float: right"> <div style="width: 500px;height: 100%;z-index: 12;background-color: rgba(2, 40, 90, 0.3);position: absolute;top: 0;right: 10px;float: right">
<!-- <dv-border-box-10 class="show-box" :color="['#4980b5','#4980b5']" backgroundColor="rgba(255, 255, 255, 0.5)" style="width:220px;height:280px;" > <!-- <dv-border-box-10 class="show-box" :color="['#4980b5','#4980b5']" backgroundColor="rgba(255, 255, 255, 0.5)" style="width:220px;height:280px;" >
<div class="markBox"> <div class="markBox">
<ul> <ul>
...@@ -91,16 +93,7 @@ import METHOD from "@/utils/methods"; ...@@ -91,16 +93,7 @@ import METHOD from "@/utils/methods";
}, },
}) })
export default class GIS extends Vue { export default class GIS extends Vue {
data() {
return {
charts: "",
opinion: ["及格人数", "未及格人数"],
opinionData: [
{ value: 12, name: "及格人数", itemStyle: "#1ab394" },
{ value: 18, name: "未及格人数", itemStyle: "#79d2c0" }
]
};
}
@Provide() Mutil: any; @Provide() Mutil: any;
@Provide() mapLoadDone = false; @Provide() mapLoadDone = false;
...@@ -296,9 +289,9 @@ export default class GIS extends Vue { ...@@ -296,9 +289,9 @@ export default class GIS extends Vue {
if (id) that.getPopcon(id); if (id) that.getPopcon(id);
}) })
this.getStatiData(); this.getStatiData();
this.Mutil.getBoundaries("石家庄"); this.Mutil.getBoundaries("石家庄");
} }
getStatiData() { getStatiData() {
let that = this; let that = this;
METHOD.axiosPost( METHOD.axiosPost(
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment