源数据管理，图层管理，空间查询

Surpriseplus

2023-02-23 ff2afbce0f31c6f75f4930ba8db7ccb7a99556a4

 src/views/Tools/pipeLineAnaly.vue

@@ -2,11 +2,7 @@
  <div class="pipeLineBox">
    <div class="headerBox">
      <div class="elFrom">
        <el-form
          ref="form"
          :model="ruleFrom"
          label-width="120px"
        >
        <el-form ref="form" :model="ruleFrom" label-width="120px">
          <el-form-item label="管道中心线">
            <el-select
              @change="selectChange"
@@ -39,38 +35,32 @@
          </el-form-item>
        </el-form>
      </div>
      <div style="display:flex">
      <div style="display: flex">
        <div class="transBox">
          <label>基础数据图层</label>
          <div class="checkBox">
            <ul>
              <li
                @click="checkLeft(item)"
                :class="{checkhover:checkedLeftflag == item.id}"
                v-for='(item,index) in cities'
                :class="{ checkhover: checkedLeftflag == item.id }"
                v-for="(item, index) in cities"
                :label="item.label"
                :key="item.id"
              >{{item.label}}</li>
              >
                {{ item.label }}
              </li>
            </ul>
          </div>
        </div>
        <div class="transInfo">
          <div>
            <el-link
              @click="setTransRight"
              :underline="false"
            ><i
                style="color:white"
                class="el-icon-d-arrow-right"
              ></i></el-link>
            <el-link @click="setTransRight" :underline="false"
              ><i class="el-icon-d-arrow-right"></i
            ></el-link>
            <br />
            <el-link
              @click="setTransLeft"
              :underline="false"
            ><i
                style="color:white"
                class="el-icon-d-arrow-left"
              ></i></el-link>
            <el-link @click="setTransLeft" :underline="false"
              ><i class="el-icon-d-arrow-left"></i
            ></el-link>
          </div>
        </div>
        <div class="transBox">
@@ -79,28 +69,22 @@
            <ul>
              <li
                @click="checkRight(item)"
                :class="{checkhover:checkedRightflag == item.id}"
                v-for='(item,index) in citiyData'
                :class="{ checkhover: checkedRightflag == item.id }"
                v-for="(item, index) in citiyData"
                :label="item.label"
                :key="item.id"
              >{{item.label}}</li>
              >
                {{ item.label }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="sureButton">

        <div class="suerBox">
          <el-button
            @click="setAnalysis"
            size="small"
          >分析</el-button>
          <el-button
            @click="clearAnalysis"
            size="small"
          >取消</el-button>
          <el-button @click="setAnalysis" size="small">分析</el-button>
          <el-button @click="clearAnalysis" size="small">取消</el-button>
        </div>

      </div>
    </div>
    <div class="contentBox">
@@ -108,19 +92,19 @@
        <ul>
          <li
            @click="setlistChange(item)"
            :class="{checkhover:listflag == item.id}"
            :class="{ checkhover: listflag == item.id }"
            v-for="item in listData"
          >{{item.label}}</li>
          >
            {{ item.label }}
          </li>
        </ul>
      </div>

      <div class="contentLeft">
        <div style="float:right;padding:2px">
          <el-button
            @click="showDialogVivable()"
            size="small"
            type="info"
          >下载</el-button>
        <div style="float: right; padding: 2px">
          <el-button @click="showDialogVivable()" size="small" type="info"
            >下载</el-button
          >
          <!-- <el-button
            size="mini"
            type="info"
@@ -130,22 +114,14 @@
            type="info"
          >删除</el-button> -->
        </div>
        <el-table
          :data="tableData"
          style="width: 100%"
          height="70%"
        >
        <el-table :data="tableData" style="width: 100%" height="70%">
          <el-table-column
            align="center"
            type="index"
            :label="$t('operatManage.ELM.index')"
            width="70px"
          />
          <el-table-column
            label="定位"
            width="100"
            align="center"
          >
          <el-table-column label="定位" width="100" align="center">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-map-location"
@@ -154,41 +130,18 @@
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="acrossName"
            label="被穿越地物名称"
            width="180"
          >
          <el-table-column prop="acrossName" label="被穿越地物名称" width="180">
          </el-table-column>
          <el-table-column
            prop="acrossLength"
            label="穿越长度"
            width="100"
          >
          <el-table-column prop="acrossLength" label="穿越长度" width="100">
          </el-table-column>
          <el-table-column
            prop="pipeName"
            label="管线名称"
            width="180"
          >
          <el-table-column prop="pipeName" label="管线名称" width="180">
          </el-table-column>
          <el-table-column
            prop="segName"
            label="管段名称"
            width="180"
          >
          <el-table-column prop="segName" label="管段名称" width="180">
          </el-table-column>
          <el-table-column
            prop="remarks"
            label="备注"
            width="100"
          >
          <el-table-column prop="remarks" label="备注" width="100">
          </el-table-column>
        </el-table>
        <div
          class="pagination_box"
          style="margin-top:10px"
        >
        <div class="pagination_box" style="margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
@@ -218,20 +171,14 @@
        label-width="100px"
        class="codeForm"
      >
        <el-form-item
          :label="$t('common.passworld')"
          prop="password"
        >
        <el-form-item :label="$t('common.passworld')" prop="password">
          <el-input
            type="password"
            v-model="codeForm.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('common.SPassword')"
          prop="repassword"
        >
        <el-form-item :label="$t('common.SPassword')" prop="repassword">
          <el-input
            type="password"
            v-model="codeForm.repassword"
@@ -239,16 +186,12 @@
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="info"
            size="small"
            @click="download "
          >{{$t('common.confirm')}}</el-button>
          <el-button
            type="info"
            size="small"
            @click="closeDialog "
          >{{$t('common.cancel')}}</el-button>
          <el-button type="info" size="small" @click="download">{{
            $t("common.confirm")
          }}</el-button>
          <el-button type="info" size="small" @click="closeDialog">{{
            $t("common.cancel")
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
@@ -261,17 +204,22 @@
</template>

<script>
import WKT from 'terraformer-wkt-parser'
import WKT from "terraformer-wkt-parser";
import { getToken } from "@/utils/auth";
import { pipelines_selectSegNames, pipeline_selectPipeAnalysis, sign_getPublicKey, pipeline_downloadReq } from '../../api/api.js';
import {
  pipelines_selectSegNames,
  pipeline_selectPipeAnalysis,
  sign_getPublicKey,
  pipeline_downloadReq,
} from "../../api/api.js";
import $ from "jquery";
export default {
  data() {
    var repasswordValidator = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.codeForm.password) {
        callback(new Error('两次输入密码不一致!'));
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
@@ -280,61 +228,68 @@
      var passwordreg =
        /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{12,20}$/;
      if (!passwordreg.test(value)) {
        callback(
          new Error('密码必须由数字、字母、特殊字符组合,请输入13-20位')
        );
        callback(new Error("密码必须由数字、字母、特殊字符组合,请输入13-20位"));
      } else {
        callback();
      }
    };
    return {
      rules: {
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { validator: passwordValidator, trigger: 'blur' }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: passwordValidator, trigger: "blur" },
        ],
        repassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: repasswordValidator, trigger: 'blur' },
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: repasswordValidator, trigger: "blur" },
        ],
      },
      dialogVisible: false,
      codeForm: {
        repassword: '', password: ''
        repassword: "",
        password: "",
      },
      ruleFrom: {
        value1: '',
        value2: ''
        value1: "",
        value2: "",
      },
      options1: [],
      options2: [],
      checkList: [],
      checkData: [{
        id: 1,
        label: '铁路(dlg_25w_lrrl)',
        tabs: 'dlg_25w_lrrl',
        tabdesc: '铁路',
        table: 'bd.dlg_25w_lrrl',
        checked: false,
      }, {
        id: 2,
        label: '公路(dlg_25w_lrdl)',
        tabs: 'dlg_25w_lrdl',
        tabdesc: '公路',
        table: 'bd.dlg_25w_lrdl',
        checked: false,
      }, {
        id: 3,
        label: '水系线(dlg_25w_hydl)',
        tabs: 'dlg_25w_hydl',
        tabdesc: '水系线',
        table: 'bd.dlg_25w_hydl',
        checked: false,
      }, {
        id: 4,
        label: '水系面(dlg_25w_hyda)',
        tabs: 'dlg_25w_hyda',
        tabdesc: '水系面',
        table: 'bd.dlg_25w_hyda',
        checked: false,
      }],
      checkData: [
        {
          id: 1,
          label: "铁路(dlg_25w_lrrl)",
          tabs: "dlg_25w_lrrl",
          tabdesc: "铁路",
          table: "bd.dlg_25w_lrrl",
          checked: false,
        },
        {
          id: 2,
          label: "公路(dlg_25w_lrdl)",
          tabs: "dlg_25w_lrdl",
          tabdesc: "公路",
          table: "bd.dlg_25w_lrdl",
          checked: false,
        },
        {
          id: 3,
          label: "水系线(dlg_25w_hydl)",
          tabs: "dlg_25w_hydl",
          tabdesc: "水系线",
          table: "bd.dlg_25w_hydl",
          checked: false,
        },
        {
          id: 4,
          label: "水系面(dlg_25w_hyda)",
          tabs: "dlg_25w_hyda",
          tabdesc: "水系面",
          table: "bd.dlg_25w_hyda",
          checked: false,
        },
      ],
      citiyData: [],
      cities: [],
      checkedCities: [],
@@ -350,12 +305,12 @@
      pageData: {
        pageIndex: 1,
        pageSize: 10,
        pageCount: 0
        pageCount: 0,
      },
      multipleSelection: [],
      featurTable: null,
      featureLayer: [],
    }
    };
  },
  methods: {
    spaceLocation(index, row) {
@@ -368,43 +323,55 @@

      this.claerAll();
      switch (geojson.type) {
        case 'Point':
          this.setShowImagePoint(geojson.coordinates)
        case "Point":
          this.setShowImagePoint(geojson.coordinates);
          break;
        case 'MultiPoint':
        case "MultiPoint":
          for (var i in geojson.coordinates) {
            this.setShowImagePoint(geojson.coordinates[i])
            this.setShowImagePoint(geojson.coordinates[i]);
          }
          break;
        case 'LineString':
          this.setShowImageLine(geojson.coordinates)
        case "LineString":
          this.setShowImageLine(geojson.coordinates);
          break;
        case 'MultiLineString':
        case "MultiLineString":
          for (var i in geojson.coordinates) {
            this.setShowImageLine(geojson.coordinates[i])
            this.setShowImageLine(geojson.coordinates[i]);
          }

          break;
      }
    },
    setShowImagePoint(res) {
      var obj = { X: res[0], Y: res[1], Altitude: 1000 }
      var imageLabel = sgworld.Creator.CreateImageLabel(obj, SmartEarthRootUrl + "Workers/image/mark.png", {}, 0, "管道空间分析");
      this.$store.state.pipelineEntity.push(imageLabel.item)
      var obj = { X: res[0], Y: res[1], Altitude: 1000 };
      var imageLabel = sgworld.Creator.CreateImageLabel(
        obj,
        SmartEarthRootUrl + "Workers/image/mark.png",
        {},
        0,
        "管道空间分析"
      );
      this.$store.state.pipelineEntity.push(imageLabel.item);
      sgworld.Navigate.flyToObj(imageLabel.item);
    },
    setShowImageLine(res) {
      var obj = [];
      for (var i in res) {
        obj.push({ x: res[i][0], y: res[i][1], z: 1000 })
        obj.push({ x: res[i][0], y: res[i][1], z: 1000 });
      }
      var line = sgworld.Creator.createPolyline(obj, "#ffff00", 1, 0, "管道空间分析");
      this.$store.state.pipelineEntity.push(line.item)
      var line = sgworld.Creator.createPolyline(
        obj,
        "#ffff00",
        1,
        0,
        "管道空间分析"
      );
      this.$store.state.pipelineEntity.push(line.item);
      sgworld.Navigate.flyToObj(line.item);
    },
    claerAll() {
      for (var i in this.$store.state.pipelineEntity) {
        var item = this.$store.state.pipelineEntity[i]
        var item = this.$store.state.pipelineEntity[i];
        sgworld.Viewer.entities.remove(item);
      }
      this.$store.state.pipelineEntity = [];
@@ -417,20 +384,17 @@
      }
    },
    async download() {

      var std = [];
      for (var i in this.listData) {

        std.push(this.listData[i].table)
        std.push(this.listData[i].table);
      }
      var obj = {
        pwd: encrypt.encrypt(this.codeForm.password),
        gid: this.analyGid,
        tabs: std
        tabs: std,
      };
      const data = await pipeline_downloadReq(obj);
      if (data.code != 200) {

        this.$message.error("下载请求失败");
        this.closeDialog();

@@ -452,47 +416,47 @@
      //  this.$store.state.loading = false;
    },
    showDialogVivable() {
      if (this.listData.length == 0) return
      this.dialogVisible = true
      if (this.listData.length == 0) return;
      this.dialogVisible = true;
    },
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.closeDialog()
      this.$confirm("确认关闭？")
        .then((_) => {
          this.closeDialog();
        })
        .catch(_ => { });
        .catch((_) => {});
    },
    closeDialog() {
      this.dialogVisible = false
      this.dialogVisible = false;
      this.codeForm = {
        repassword: '', password: ''
      }
        repassword: "",
        password: "",
      };
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    setTransLeft() {
      if (this.rightChecked == null) return
      this.cities.push(this.rightChecked)
      if (this.rightChecked == null) return;
      this.cities.push(this.rightChecked);
      this.citiyData.forEach((value, index, array) => {
        if (value.label == this.rightChecked.label) {
          array.splice(index, 1)
          array.splice(index, 1);
        }
      });
      this.checkedLeftflag = null;
      this.rightChecked = null

      this.rightChecked = null;
    },
    setTransRight() {
      if (this.leftChecked == null) return
      this.citiyData.push(this.leftChecked)
      if (this.leftChecked == null) return;
      this.citiyData.push(this.leftChecked);
      this.cities.forEach((value, index, array) => {
        if (value.label == this.leftChecked.label) {
          array.splice(index, 1)
          array.splice(index, 1);
        }
      });
      this.checkedRightflag = null;
      this.leftChecked = null
      this.leftChecked = null;
    },
    checkLeft(res) {
      this.checkedLeftflag = res.id;
@@ -503,10 +467,9 @@
      this.rightChecked = res;
    },
    selectChange(res) {
      this.changeSelect2(res)
      this.changeSelect2(res);
    },
    selectChange1(res) {

      this.analyGid = res;
    },
    changeSelect2(res) {
@@ -514,7 +477,7 @@
      var value = this.featureLayer;
      for (var i in value) {
        if (value[i].pipeName == res) {
          this.options2.push(value[i])
          this.options2.push(value[i]);
        }
      }
      this.ruleFrom.value2 = this.options2[0].segName;
@@ -524,35 +487,40 @@
      this.tableData = [];
      this.listData = [];

      this.cities = [{
        id: 1,
        label: '铁路(dlg_25w_lrrl)',
        tabs: 'dlg_25w_lrrl',
        tabdesc: '铁路',
        table: 'bd.dlg_25w_lrrl',
        checked: false,
      }, {
        id: 2,
        label: '公路(dlg_25w_lrdl)',
        tabs: 'dlg_25w_lrdl',
        tabdesc: '公路',
        table: 'bd.dlg_25w_lrdl',
        checked: false,
      }, {
        id: 3,
        label: '水系线(dlg_25w_hydl)',
        tabs: 'dlg_25w_hydl',
        tabdesc: '水系线',
        table: 'bd.dlg_25w_hydl',
        checked: false,
      }, {
        id: 4,
        label: '水系面(dlg_25w_hyda)',
        tabs: 'dlg_25w_hyda',
        tabdesc: '水系面',
        table: 'bd.dlg_25w_hyda',
        checked: false,
      }];
      this.cities = [
        {
          id: 1,
          label: "铁路(dlg_25w_lrrl)",
          tabs: "dlg_25w_lrrl",
          tabdesc: "铁路",
          table: "bd.dlg_25w_lrrl",
          checked: false,
        },
        {
          id: 2,
          label: "公路(dlg_25w_lrdl)",
          tabs: "dlg_25w_lrdl",
          tabdesc: "公路",
          table: "bd.dlg_25w_lrdl",
          checked: false,
        },
        {
          id: 3,
          label: "水系线(dlg_25w_hydl)",
          tabs: "dlg_25w_hydl",
          tabdesc: "水系线",
          table: "bd.dlg_25w_hydl",
          checked: false,
        },
        {
          id: 4,
          label: "水系面(dlg_25w_hyda)",
          tabs: "dlg_25w_hyda",
          tabdesc: "水系面",
          table: "bd.dlg_25w_hyda",
          checked: false,
        },
      ];
      this.citiyData = [];
      this.getAllData();
      this.listflag = null;
@@ -561,40 +529,40 @@
      this.pageData = {
        pageIndex: 1,
        pageSize: 10,
        pageCount: 0
      }
        pageCount: 0,
      };
    },

    async setAnalysis() {
      if (this.citiyData.length == 0) {
        this.$message.error('请选择要分析的图层!');
        this.$message.error("请选择要分析的图层!");
      }
      var std = [];
      var listTable = [];
      for (var i in this.citiyData) {
        std.push(this.citiyData[i].table)
        listTable.push(this.citiyData[i])
        std.push(this.citiyData[i].table);
        listTable.push(this.citiyData[i]);
      }
      this.listData = listTable;
      this.listflag = this.listData[0].id
      this.listflag = this.listData[0].id;
      var obj = {
        gid: this.analyGid,
        tabs: std
      }
        tabs: std,
      };
      const data = await pipeline_selectPipeAnalysis(obj);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败");
      }
      this.featureData = data.result;
      this.featurTable = this.featureData[this.listData[0].table]
      this.featurTable = this.featureData[this.listData[0].table];
      this.pageData.pageCount = this.featurTable.length;
      this.pageData.pageIndex = 1;
      this.pageData.pageSize = 10;
      this.changePageData();
    },
    setlistChange(res) {
      this.listflag = res.id
      this.featurTable = this.featureData[res.table]
      this.listflag = res.id;
      this.featurTable = this.featureData[res.table];
      this.pageData.pageCount = this.featurTable.length;
      this.pageData.pageIndex = 1;
      this.pageData.pageSize = 10;
@@ -615,10 +583,9 @@
      this.changePageData();
    },
    async getAllData() {

      const data = await pipelines_selectSegNames();
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败");
      }
      var std = [];
      var str = [];
@@ -626,50 +593,54 @@
      for (var i in result) {
        if (std.indexOf(result[i].pipeName) == -1) {
          std.push(result[i].pipeName);
          str.push(result[i])
          str.push(result[i]);
        }
      }
      this.featureLayer = data.result;
      this.options1 = str;
      this.ruleFrom.value1 = this.options1[0].pipeName;
      this.changeSelect2(this.ruleFrom.value1)
      this.changeSelect2(this.ruleFrom.value1);
    },
  },
  mounted() {

    this.cities = [{
      id: 1,
      label: '铁路(dlg_25w_lrrl)',
      tabs: 'dlg_25w_lrrl',
      tabdesc: '铁路',
      table: 'bd.dlg_25w_lrrl',
      checked: false,
    }, {
      id: 2,
      label: '公路(dlg_25w_lrdl)',
      tabs: 'dlg_25w_lrdl',
      tabdesc: '公路',
      table: 'bd.dlg_25w_lrdl',
      checked: false,
    }, {
      id: 3,
      label: '水系线(dlg_25w_hydl)',
      tabs: 'dlg_25w_hydl',
      tabdesc: '水系线',
      table: 'bd.dlg_25w_hydl',
      checked: false,
    }, {
      id: 4,
      label: '水系面(dlg_25w_hyda)',
      tabs: 'dlg_25w_hyda',
      tabdesc: '水系面',
      table: 'bd.dlg_25w_hyda',
      checked: false,
    }];
    this.cities = [
      {
        id: 1,
        label: "铁路(dlg_25w_lrrl)",
        tabs: "dlg_25w_lrrl",
        tabdesc: "铁路",
        table: "bd.dlg_25w_lrrl",
        checked: false,
      },
      {
        id: 2,
        label: "公路(dlg_25w_lrdl)",
        tabs: "dlg_25w_lrdl",
        tabdesc: "公路",
        table: "bd.dlg_25w_lrdl",
        checked: false,
      },
      {
        id: 3,
        label: "水系线(dlg_25w_hydl)",
        tabs: "dlg_25w_hydl",
        tabdesc: "水系线",
        table: "bd.dlg_25w_hydl",
        checked: false,
      },
      {
        id: 4,
        label: "水系面(dlg_25w_hyda)",
        tabs: "dlg_25w_hyda",
        tabdesc: "水系面",
        table: "bd.dlg_25w_hyda",
        checked: false,
      },
    ];
    this.getAllData();
    this.signGetPublicKey();
  }
}
  },
};
</script>

<style scoped lang="less">
@@ -698,8 +669,6 @@
        border-radius: 5px;
        overflow-y: auto;
      }

       
    }

    .transInfo {
@@ -736,7 +705,7 @@
  .checkhover {
    color: #409eff;
  }
 

  .country-group {
    display: flex;
    justify-content: center;
@@ -745,7 +714,5 @@
      margin: 4px 0;
    }
  }
  
  
}
</style>
</style>