Commit 11d2f3c4 authored by 耿迪迪's avatar 耿迪迪
parents 4e8346d4 6b0f4270
......@@ -51,7 +51,7 @@ export default class Mutil {
let tianSlB = new TileLayer({
className: "mapTypeC",
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",
}),
visible: false,
......@@ -60,7 +60,7 @@ export default class Mutil {
let tianSlC = new TileLayer({
className: "mapTypeC",
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}",
}),
visible: true,
......@@ -306,13 +306,33 @@ export default class Mutil {
//对获取的点坐标数据进行处理,重构,得到我们需要的数据结构
for (let i = 0; i < points.length; i++) {
let region = points[i]; //单个面
//let pointArr = region.split(',');
//let p = pointArr[j];
let pArr = region.split(',');
let pos = fromLonLat(pArr); //将坐标转为默认投影,默认投影是EPSG:3857
//let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326'); //坐标系间坐标转换,由前面的坐标转为后面坐标系坐标
pointsz.push(pos) //将转化格式后的点坐标存储起来
let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326'); //坐标系间坐标转换,由前面的坐标转为后面坐标系坐标
pointsz.push(pArr) //将转化格式后的点坐标存储起来
};
//自己造的地图数据(GeoJSON数据)
let geojsonObject = this.structureGeojson(pointsz);
let geojsonObject = {
'type': 'FeatureCollection', //要素集合
'crs': {
'type': 'name',
'properties': { //特性
'name': 'EPSG:3857'
}
},
'features': [{ //要素
'type': 'Feature',
'geometry': { //几何图形
'type': 'GeometryCollection', //几何图形集合
'geometries': [{ //几何形状
'type': 'Polygon', //多边形
'coordinates': [pointsz] //坐标
}]
}
}]
};
let vectorSource = new VectorSource({ //提供矢量图层的数据
features: (new GeoJSON().readFeatures(geojsonObject))
});
......@@ -320,11 +340,11 @@ export default class Mutil {
source: vectorSource, //来源
style: new Style({
stroke: new Stroke({
color: '#08d527',
width: 4
color: 'yellow',
width: 6
}),
fill: new Fill({
color: 'rgba(212, 220, 29, 0.1)'
color: 'rgba(255,255,0,0.1)'
})
})
});
......@@ -335,35 +355,17 @@ export default class Mutil {
this.MAP.addLayer(vectorLayer);
this.tempLayer = vectorLayer;
}
structureGeojson(pointsz){
let geojsonObject = {
'type': 'FeatureCollection', //要素集合
'crs': {
'type': 'name',
'properties': { //特性
'name': 'EPSG:3857'
}
},
'features': [{ //要素
'type': 'Feature',
'geometry': { //几何图形
'type': 'GeometryCollection', //几何图形集合
'geometries': [{ //几何形状
'type': 'Polygon', //多边形
'coordinates': [pointsz] //坐标
}]
}
}]
};
return geojsonObject;
}
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 => {
let local = res.data.districts[0].center.split(",");
let view = this.MAP.getView();
view.setCenter(fromLonLat(local));
view.setZoom(10);
let view = new View({
center: transform(fromLonLat(local), 'EPSG:3857', 'EPSG:4326'), //将中心点坐标转为EPSG:4326
projection: get('EPSG:4326'), //投影坐标系 EPSG:4326
zoom: 10
});
this.MAP.setView(view);
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 @@
<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 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: 400px;height: 300px;background-color: rgba(2, 20, 44, 0.4)"></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;" >
<div class="markBox">
<ul>
......@@ -91,16 +93,7 @@ import METHOD from "@/utils/methods";
},
})
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() mapLoadDone = false;
......@@ -296,9 +289,9 @@ export default class GIS extends Vue {
if (id) that.getPopcon(id);
})
this.getStatiData();
this.Mutil.getBoundaries("石家庄");
}
getStatiData() {
let that = this;
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