|
@@ -1,133 +1,206 @@
|
|
|
<template>
|
|
|
- <div class="fzjcyp ghzc">
|
|
|
- <el-form :model="ruleForm" ref="ruleForm" label-width="88px" :rules="rules" label-position="left">
|
|
|
- <el-form-item label="选址范围:" prop="xzmj">
|
|
|
- <range type="fzjcyp" :keys="['hx', 'sc']" class="range" ref="range" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="项目名称:" prop="xmmc">
|
|
|
- <el-input v-model="ruleForm.xmmc" size="mini" placeholder="请输入项目名称"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <div class="site-title">
|
|
|
- <div class="siteCon">
|
|
|
- <div class="site_Icon"></div>
|
|
|
- <span>分析模型</span>
|
|
|
- </div>
|
|
|
- <el-button size="mini" @click="zdyModel">自定义模型</el-button>
|
|
|
- </div>
|
|
|
- <div class="treeDiv">
|
|
|
- <el-table :data="anaModels" style="width: 100%" :show-header="false">
|
|
|
- <el-table-column type="selection" width="33"> </el-table-column>
|
|
|
- <el-table-column prop="name" show-overflow-tooltip> </el-table-column>
|
|
|
- <el-table-column width="50">
|
|
|
- <template slot-scope="scope">
|
|
|
- <!-- <span>编辑</span> -->
|
|
|
- <el-button size="mini" type="text"
|
|
|
- @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- <zdyModelPop :tableData="tableData" ref="zdyPop"></zdyModelPop>
|
|
|
+ <div class="fzjcyp ghzc">
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="88px"
|
|
|
+ :rules="rules"
|
|
|
+ label-position="left"
|
|
|
+ >
|
|
|
+ <el-form-item label="选址范围:" prop="xzmj">
|
|
|
+ <range type="fzjcyp" :keys="['hx', 'sc']" class="range" ref="range" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="项目名称:" prop="xmmc">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.xmmc"
|
|
|
+ size="mini"
|
|
|
+ placeholder="请输入项目名称"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="site-title">
|
|
|
+ <div class="siteCon">
|
|
|
+ <div class="site_Icon"></div>
|
|
|
+ <span>分析模型</span>
|
|
|
+ </div>
|
|
|
+ <el-button size="mini" @click="zdyModel">自定义模型</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="treeDiv">
|
|
|
+ <el-table :data="anaModels" style="width: 100%" :show-header="false">
|
|
|
+ <el-table-column type="selection" width="33"> </el-table-column>
|
|
|
+ <el-table-column prop="name" show-overflow-tooltip> </el-table-column>
|
|
|
+ <el-table-column width="50">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- <span>编辑</span> -->
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ @click="handleEdit(scope.$index, scope.row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <div class="bottomBtns">
|
|
|
+ <span class="clearBtn" @click="reset">取消</span>
|
|
|
+ <span class="sureBtn" @click="submitData">确定</span>
|
|
|
</div>
|
|
|
+ <zdyModelPop :tableData="tableData" ref="zdyPop"></zdyModelPop>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import range from "@/components/mapview/range.vue"; //绘制范围
|
|
|
import zdyModelPop from "./zdyModelPop.vue"; //自定义模型面板
|
|
|
import moment from "moment";
|
|
|
+import { Message } from "element-ui";
|
|
|
export default {
|
|
|
- components: {
|
|
|
- range,
|
|
|
- zdyModelPop
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- ruleForm: {
|
|
|
- xzmj: 0,
|
|
|
- xmmc: "耕地保护项目_" + this.getCurrentDateTime(),
|
|
|
- },
|
|
|
- rules: {
|
|
|
- xzmj: [{ required: true, message: "请填写范围的数据" }],
|
|
|
- xmmc: [
|
|
|
- { required: true, message: "请输入项目名称", trigger: "blur" },
|
|
|
- {
|
|
|
- min: 1,
|
|
|
- message: "请输入至少为一个字符的项目名称",
|
|
|
- trigger: "blur",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- //分析模型列表
|
|
|
- anaModels: [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- name: "耕地监测分析模型",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: "基本农田保护模型",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: "生态保护分析模型",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- name: "矿产监测分析模型",
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getCurrentDateTime() {
|
|
|
- return moment(new Date()).format("YYYYMMDDHHmmss");
|
|
|
- const now = new Date();
|
|
|
- const year = now.getFullYear();
|
|
|
- const month = this.padNumber(now.getMonth() + 1); // 月份是从0开始的
|
|
|
- const day = this.padNumber(now.getDate());
|
|
|
- const hours = this.padNumber(now.getHours());
|
|
|
- const minutes = this.padNumber(now.getMinutes());
|
|
|
- const seconds = this.padNumber(now.getSeconds());
|
|
|
- return `${year}-${month}-${day} ${hours}-${minutes}-${seconds}`;
|
|
|
+ components: {
|
|
|
+ range,
|
|
|
+ zdyModelPop,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ruleForm: {
|
|
|
+ xzmj: 0,
|
|
|
+ xmmc: "耕地保护项目_" + this.getCurrentDateTime(),
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ xzmj: [{ required: true, message: "请填写范围的数据" }],
|
|
|
+ xmmc: [
|
|
|
+ { required: true, message: "请输入项目名称", trigger: "blur" },
|
|
|
+ {
|
|
|
+ min: 1,
|
|
|
+ message: "请输入至少为一个字符的项目名称",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ //分析模型列表
|
|
|
+ anaModels: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "耕地监测分析模型",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "基本农田保护模型",
|
|
|
},
|
|
|
- padNumber(num) {
|
|
|
- return num < 10 ? "0" + num : num;
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "生态保护分析模型",
|
|
|
},
|
|
|
- //自定义模型按钮
|
|
|
- zdyModel() {
|
|
|
- this.$refs.zdyPop.dialogVisible = true;
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: "矿产监测分析模型",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getCurrentDateTime() {
|
|
|
+ return moment(new Date()).format("YYYYMMDDHHmmss");
|
|
|
+ const now = new Date();
|
|
|
+ const year = now.getFullYear();
|
|
|
+ const month = this.padNumber(now.getMonth() + 1); // 月份是从0开始的
|
|
|
+ const day = this.padNumber(now.getDate());
|
|
|
+ const hours = this.padNumber(now.getHours());
|
|
|
+ const minutes = this.padNumber(now.getMinutes());
|
|
|
+ const seconds = this.padNumber(now.getSeconds());
|
|
|
+ return `${year}-${month}-${day} ${hours}-${minutes}-${seconds}`;
|
|
|
+ },
|
|
|
+ padNumber(num) {
|
|
|
+ return num < 10 ? "0" + num : num;
|
|
|
+ },
|
|
|
+ //自定义模型按钮
|
|
|
+ zdyModel() {
|
|
|
+ this.$refs.zdyPop.dialogVisible = true;
|
|
|
+ },
|
|
|
+ handleEdit(item) {
|
|
|
+ console.log(item, "暂时使用");
|
|
|
+ this.zdyModel();
|
|
|
+ },
|
|
|
+ reset(){
|
|
|
+ this.ruleForm={
|
|
|
+ xzmj: 0,
|
|
|
+ xmmc: "耕地保护项目_" + this.getCurrentDateTime(),
|
|
|
+ }
|
|
|
+ this.$refs.ruleForm.resetFields();
|
|
|
+ this.$refs.range.reset();
|
|
|
+ },
|
|
|
+ submitData() {
|
|
|
+ //更新范围
|
|
|
+ var _temp = this.$refs.range.getRange();
|
|
|
+ this.ruleForm.xzmj = _temp.xzmj;
|
|
|
+ this.$refs.ruleForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (!this.$refs.range.fileDataID) {
|
|
|
+ Message.warning("请绘制或导入选址范围!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let obj = {
|
|
|
+ xzmj: Number(this.ruleForm.xzmj),
|
|
|
+ xmmc: this.ruleForm.xmmc,
|
|
|
+ };
|
|
|
|
|
|
- },
|
|
|
- handleEdit(item){
|
|
|
- console.log(item,'暂时使用');
|
|
|
- this.zdyModel()
|
|
|
- }
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: "分析中",
|
|
|
+ spinner: "el-icon-loading",
|
|
|
+ background: "rgba(0, 0, 0, 0.7)",
|
|
|
+ });
|
|
|
+ setTimeout(()=>{
|
|
|
+ loading.close();
|
|
|
+ this.activeTabs = "lsju";
|
|
|
+ this.$emit("updateParent", "activeTabs", "lsju");
|
|
|
+ },1000)
|
|
|
+ // AddFzxz(obj)
|
|
|
+ // .then((res) => {
|
|
|
+ // loading.close();
|
|
|
+ // this.activeTabs = "lsju";
|
|
|
+ // this.$emit("updateParent", "activeTabs", "lsju");
|
|
|
+ // this.$message({
|
|
|
+ // message: res.message,
|
|
|
+ // type: res.success ? "success" : "warning",
|
|
|
+ // });
|
|
|
+ // this.reset();
|
|
|
+ // }).catch((error) => {
|
|
|
+ // loading.close();
|
|
|
+ // Message.error(error)
|
|
|
+ // });
|
|
|
+ } else {
|
|
|
+ loading.close();
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.fzjcyp {
|
|
|
- height: 100%;
|
|
|
- line-height: 40px;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 40px;
|
|
|
|
|
|
- .range {
|
|
|
- flex: 1;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ .range {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
|
|
|
- .XZtree {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 400px);
|
|
|
- // padding: 7px;
|
|
|
- margin-bottom: 10px;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
+ .XZtree {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 400px);
|
|
|
+ // padding: 7px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
|
|
|
- ::v-deep .ghzc .el-table td.el-table__cell,
|
|
|
- .ghzc .el-table th.el-table__cell.is-leaf {
|
|
|
- border-bottom: none !important;
|
|
|
- }
|
|
|
+ ::v-deep .ghzc .el-table td.el-table__cell,
|
|
|
+ .ghzc .el-table th.el-table__cell.is-leaf {
|
|
|
+ border-bottom: none !important;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|