管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2022-12-22 54837b203b8d23c01e0e6cf716cb6a3829ae60f6
src/views/datamanage/SpatialData.vue
@@ -1,50 +1,68 @@
<template>
  <div class="Spatialbox">
    <My-bread
      :list="[
    <My-bread :list="[
        `${$t('dataManage.dataManage')}`,
        `${$t('dataManage.dataRetrieval')}`,
      ]"
    ></My-bread>
      ]"></My-bread>
    <el-divider />
    <div class="spatialContent">
      <div class="spatial_leftTree">
        <el-tree
          ref="treeDay"
          :data="tree"
          :props="defaultProps"
          :default-expanded-keys="[1]"
          node-key="id"
          :current-node-key="10"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
      <div class="spatial_rightContent">
        <el-form ref="ruleForm" :model="ruleForm" :inline="true">
          <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name">
            <el-input v-model="ruleForm.name" :placeholder="$t('common.choose')" />
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :inline="true"
        >
          <el-form-item>
            <el-input
              type="textarea"
              v-model="ruleForm.fileName"
              class="nm-skin-pretty"
              show-word-limit
              :rows="2"
              resize='none'
              disabled
              style="width: 650px;"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="submitForm('ruleForm')"
              icon="el-icon-search"
              class="primary"
              size="small"
              >{{$t('common.iquery')}}</el-button
            >
              @click="conditionVisible = true"
              class="primaries"
              icon="el-icon-plus"
            >{{$t('common.append')}}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="resetForm('ruleForm')"
              @click="submitForm"
              class="primaries"
              icon="el-icon-search"
            >{{$t('common.iquery')}}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="resetForm"
              icon="el-icon-refresh"
              type="info"
              size="small"
              >{{$t('common.reset')}}</el-button
            >
            <!-- <el-button
              v-if="btnStatus.download"
              icon="el-icon-position"
              type="success"
              size="small"
              >{{$t('common.download')}}</el-button
            > -->
            >{{$t('common.reset')}}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="getSpaceMapVisibale"
              class="primaries"
            >{{
              $t('synthesis.rangequery')
            }}</el-button>
          </el-form-item>
        </el-form>
        <el-divider class="eldivider" />
@@ -55,11 +73,17 @@
            height="500px"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column width="60" type="index" :label="$t('common.index')" />
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              width="60"
              type="index"
              :label="$t('common.index')"
            />
            <el-table-column
              v-for="(item, index) in attributeData"
              :key="index"
@@ -68,22 +92,27 @@
              show-overflow-tooltip
              align="center"
            ></el-table-column>
            <el-table-column min-width="80" :label="$t('common.operate')">
            <el-table-column
              min-width="80"
              :label="$t('common.operate')"
            >
              <template slot-scope="scope">
                <el-link class="elLink"
                <el-link
                  class="elLink"
                  @click="showDetail(scope.$index, scope.row)"
                  >{{$t('common.details')}}</el-link
                >
                <el-link class="elLink"
                >{{$t('common.details')}}</el-link>
                <el-link
                  class="elLink"
                  @click="getAttachTable(scope.$index, scope.row)"
                  style="margin-left: 20px;  "
                  >{{$t('common.enclosure')}}</el-link
                >
                >{{$t('common.enclosure')}}</el-link>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px" class="pagination_box">
          <div
            style="margin-top: 20px"
            class="pagination_box"
          >
            <el-pagination
              v-if="changePag"
              @size-change="handleSizeChange"
@@ -99,11 +128,20 @@
        </div>
      </div>
    </div>
        <div class="infoBox" v-show="showinfoBox">
    <div
      class="infoBox"
      v-show="showinfoBox"
    >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
        <div
          slot="header"
          class="clearfix"
        >
          <span>{{$t('common.details')}}</span>
          <div style="float: right; cursor: pointer" @click="closeDetial">
          <div
            style="float: right; cursor: pointer"
            @click="closeDetial"
          >
            <i class="el-icon-close"></i>
          </div>
        </div>
@@ -120,9 +158,16 @@
        </div>
      </el-card>
    </div>
    <el-dialog :title="$t('common.attachinform')" width="30%" :visible.sync="dialogFormVisible">
      <el-form :model="formInline" class="demo-form-inline">
        <el-form-item >
    <el-dialog
      :title="$t('common.attachinform')"
      width="30%"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item>
          <el-input
            v-model="formInline.file"
            style="width: 300px; margin-right: 20px"
@@ -135,55 +180,161 @@
            id="insertFile"
            multiple="multiple"
            style="display: none"
              @change="insertFile( )"
            @change="insertFile( )"
          />
          <el-link  @click="getInsertFile( )" :underline="false"
            ><i class="el-icon-folder-opened"></i
          ></el-link>
          <el-link
            @click="getInsertFile( )"
            :underline="false"
          ><i class="el-icon-folder-opened"></i></el-link>
        </el-form-item>
        <el-form-item>
          <el-row  >
            <el-col :span="3"> <el-link  class="elLink" :underline="false" @click="setAttachInsert" >{{$t('common.append')}}</i></el-link></el-col>
            <el-col :span="3">   <el-link  class="elLink" :underline="false" @click="setAttachDel" >{{$t('common.delete')}}</i></el-link></el-col>
          <el-row>
            <el-col :span="3">
              <el-link
                class="elLink"
                :underline="false"
                @click="setAttachInsert"
              >{{$t('common.append')}}</i></el-link>
            </el-col>
            <el-col :span="3">
              <el-link
                class="elLink"
                :underline="false"
                @click="setAttachDel"
              >{{$t('common.delete')}}</i></el-link>
            </el-col>
            <!-- <el-col :span="3">  <el-link  class="elLink" :underline="false" >{{$t('common.reset')}}</i></el-link></el-col> -->
          </el-row>
        </el-form-item>
        <el-form-item>
 <el-table
       :data="tableAttach"
          <el-table
            :data="tableAttach"
            ref="filterTable"
            height="99%"
            border
            style="width: 100%"
            @selection-change="handleAttatchChange"
          >
                  <el-table-column type="selection" width="55" />
          <el-table-column width="60" type="index" :label="$t('common.index')" />
              <el-table-column  prop="date"
         :label="$t('common.fileNme')"
         />
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              width="60"
              type="index"
              :label="$t('common.index')"
            />
            <el-table-column
              prop="date"
              :label="$t('common.fileNme')"
            />
      <el-table-column
        prop="name"
        :label="$t('common.filePath')"
        />
            <el-table-column
              prop="name"
              :label="$t('common.filePath')"
            />
           </el-table>
          </el-table>
        </el-form-item>
        <el-form-item>
<el-row :gutter="20">
  <el-col :span="12" :offset="8">  <el-button  class="primary" @click="dialogFormVisible = false">确认</el-button>  <el-button type="info"   @click="dialogFormVisible = false">取消</el-button></el-col>
</el-row>
          <el-row :gutter="20">
            <el-col
              :span="12"
              :offset="8"
            >
              <el-button
                class="primary"
                @click="dialogFormVisible = false"
              >确认</el-button>
              <el-button
                type="info"
                @click="dialogFormVisible = false"
              >取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      width="37%"
      :visible.sync="conditionVisible"
      append-to-body
      title="查询条件"
      :before-close="handleconditionClose"
    >
      <el-form
        :inline="true"
        :model="formSql"
        class="demo-form-inline"
      >
        <el-form-item>
          <el-select
            @change="fieldChange($event)"
            v-model="formSql.field"
          >
            <el-option
              v-for="item in filedsOption"
              :key="item.field"
              :label="item.alias"
              :value="item.field"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSql.condition">
            <el-option
              v-for="item in condOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="!fromSqlflag">
          <el-input v-model="formSql.value"></el-input>
        </el-form-item>
        <el-form-item v-show="fromSqlflag">
          <el-date-picker
            v-model="formSql.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="startFiledAndcondition">取 消</el-button>
        <el-button
          class="primaries"
          @click="appendQueryFilter"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title=" $t('synthesis.rangequery')"
      :visible.sync="dialogMapVisible"
      width="90%"
      :before-close="handleMapClose"
    >
      <div style="height:700px">
        <map-sdk v-if='showMapVisible'></map-sdk>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import MapSdk from '../../components/mapsdk.vue'
import $ from 'jquery';
import { conditions } from '../Archive/Archive.js'
import {
  dataQuery_selectTabs,
  dataQuery_selectDomains,
@@ -199,21 +350,32 @@
export default {
  //import引入的组件需要注入到对象中才能使用
  name: 'dataSearch',
  components: { MyBread, catalogueTree },
  components: { MyBread, catalogueTree, MapSdk },
  data() {
    return {
      attachtable: ['b_pac_geologic_hazard', 'b_hydrogeology', 'b_pac_meteorological', 'b_pac_marine_meteorological', 'b_pac_frozensoil', 's_borehole', 'm_marker', 'm_hydraulic_protection', 'm_equipment_nameplate'],
      formInline: {
        file: '',
      },
      formSql: {
        field: '',
        condition: '',
        value: '',
        type: '',
        date: '',
      },
      fromSqlflag: false,
      tree: [
        {
          tabDesc: '基础数据',
          label: '基础数据',
          value: 'BD',
          id: 1,
          children: [],
        },
        {
          id: 2,
          tabDesc: '业务数据',
          label: '业务数据',
          value: 'BS',
@@ -221,6 +383,9 @@
        },
      ],
      tableAttach: [],
      filedsOption: [],
      condOption: [],
      defaultProps: {
        children: 'children',
        label: 'label',
@@ -235,7 +400,7 @@
      },
      tableType: null,
      ruleForm: {
        name: null,
        fileName: ''
      },
      FBtest: false,
      tableData: [],
@@ -272,10 +437,14 @@
      },
      getClickTable: null,
      attacgSelection: [],
      upAttach:{
        tabName:null,
        eventid:null,
      conditionVisible: false,
      dialogMapVisible: false,
      showMapVisible: false,
      upAttach: {
        tabName: null,
        eventid: null,
      }
    };
  },
  created() {
@@ -285,16 +454,43 @@
    this.getTreeDataAll();
  },
  methods: {
  async setAttachDel() {
       var std = [];
    getSpaceMapVisibale() {
      this.dialogMapVisible = true;
      this.showMapVisible = true;
      this.$store.state.mapMenuBoolean = true;
      this.$store.state.mapMenuBoxFlag = '1';
      this.$store.state.mapPopBoolean = false;
      this.$store.state.mapPopBoxFlag = null;
      this.$store.state.download = true;
    },
    handleMapClose() {
      this.$confirm('确认关闭?')
        .then((_) => {
          this.closeMapDown();
        })
        .catch((_) => { });
    },
    closeMapDown() {
      this.dialogMapVisible = false;
      this.showMapVisible = false;
      this.$store.state.mapMenuBoolean = false;
      this.$store.state.mapMenuBoxFlag = null;
      this.$store.state.download = false;
      this.$store.state.mapPopBoolean = false;
      this.$store.state.mapPopBoxFlag = null;
    },
    async setAttachDel() {
      var std = [];
      for (var i in this.attacgSelection) {
        std.push(this.attacgSelection[i].id);
      }
      const res = await dataQuery_deletes({ ids: std.toString() });
      if(res.code != 200){
      if (res.code != 200) {
        this.$message.error('文件删除失败');
      }
       this.getAttacthFlieList();
      this.getAttacthFlieList();
    },
    setAttachInsert() {
      var token = getToken();
@@ -309,7 +505,7 @@
        formData.append('file', fs.files[i]); // fs.files[i].name,file
      }
      $.ajax(BASE_URL + "/dataQuery/uploadFiles?token=" + token + "&tabName= "+this.upAttach.tabName+"&eventid="+this.upAttach.eventid, {
      $.ajax(BASE_URL + "/dataQuery/uploadFiles?token=" + token + "&tabName= " + this.upAttach.tabName + "&eventid=" + this.upAttach.eventid, {
        type: "post",
        data: formData,
        async: true,
@@ -334,7 +530,7 @@
      });
    },
    async getAttacthFlieList() {
      var obj =this.upAttach
      var obj = this.upAttach
      const res = await dataQuery_selectFiles(obj);
      if (res.code != 200) {
        this.$message.error('列表调用失败');
@@ -345,10 +541,10 @@
    getAttachTable(index, row) {
      if(row.eventid != null){
      if (row.eventid != null) {
        this.upAttach.eventid = row.eventid;
      }else{
         this.upAttach.eventid = '';
      } else {
        this.upAttach.eventid = '';
      }
      this.getAttacthFlieList();
      this.dialogFormVisible = true;
@@ -374,13 +570,16 @@
      for (var i in option) {
        var val_Data = option[i];
        val_Data.id = '1' + i;
      val_Data.label= val_Data.tabDesc+"("+val_Data.tab+")"
        val_Data.label = val_Data.tabDesc + "(" + val_Data.tab + ")"
        option[i].id = parseInt(option[i].id)
        if (option[i].ns == 'bd') {
          this.tree[0].children.push(val_Data);
        } else {
          this.tree[1].children.push(val_Data);
        }
      }
      this.handleNodeClick(this.tree[0].children[0])
    },
    //授权管理
    showPermsBtn() {
@@ -399,10 +598,10 @@
      if (data.children != null) return;
      this.listData.name = data.entity; //要查询表格类型;
      this.getClickTable = data;
      this.listData.pageIndex =1;
      this.listData.pageSize=10;
      this.listData.pageIndex = 1;
      this.listData.pageSize = 10;
      this.count = 0;
this.upAttach.tabName= data.ns+"."+data.tab;
      this.upAttach.tabName = data.ns + "." + data.tab;
      this.filedsLayer = this.getCollapseDomFiled(); //获取每个表字段名称及阈值
      //获取table信息
@@ -413,8 +612,8 @@
      res.then((val) => {
        this.attributeData = val;
      });
      if (this.ruleForm.name != null) {
        this.listData.filter = 'name like ' + this.ruleForm.name;
      if (this.ruleForm.fileName != '') {
        this.listData.filter = this.ruleForm.fileName;
      } else {
        this.listData.filter = null;
      }
@@ -462,6 +661,9 @@
      var data2 = domains.result;
      var std = [];
      for (var i in data1) {
        if (data1[i].type != 'geomtry' && data1[i].type != 'null') {
          this.filedsOption.push(data1[i])
        }
        if (data1[i].showtype == 1) {
          if (data1[i].domainNa != null) {
            data1[i].domainNa = this.getDomainNaFild(data1[i].domainNa, data2);
@@ -469,8 +671,104 @@
          std.push(data1[i]);
        }
      }
      this.startFiledAndcondition();
      return std;
    },
    startFiledAndcondition() {
      this.conditionVisible = false;
      this.conditionChange(this.filedsOption[0]);
      this.formSql.value = "";
      this.formSql.date = new Date();
    },
    handleconditionClose() {
      this.$confirm('确认关闭?')
        .then(_ => {
          this.startFiledAndcondition();
        })
        .catch(_ => { });
    },
    fieldChange(value) {
      var obj = {}
      obj = this.filedsOption.find(function (item) {
        return item.field === value;
      })
      this.conditionChange(obj)
    },
    conditionChange(res) {
      this.formSql.field = res.field;
      this.formSql.type = res.type;
      if (res.type == "date" || res.type == "datetime") {
        this.fromSqlflag = true
      } else {
        this.fromSqlflag = false
      }
      var std = [];
      this.condOption = [];
      if (res.type == 'text' || res.type == 'blob') {
        std = conditions[0]
      } else if (res.type == 'date' || res.type == 'datetime') {
        std = conditions[2]
      } else {
        std = conditions[1]
      }
      for (var i in std) {
        this.condOption.push({
          label: std[i],
          value: std[i],
        })
      }
      this.formSql.condition = this.condOption[0].value
    },
    appendQueryFilter() {
      if (this.formSql.type == "date" || this.formSql.type == "datetime") {
        if (this.formSql.date == null) {
          this.$message.error('请输入要查询的信息!');
          return;
        }
      } else {
        if (this.formSql.value == "") {
          this.$message.error('请输入要查询的信息!');
          return;
        }
      }
      if (this.ruleForm.fileName != "") {
        this.ruleForm.fileName += " and ";
      }
      var val;
      if (this.formSql.type == "long" || this.formSql.type == "integer") {
        val = parseInt(this.formSql.value);
      } else if (this.formSql.type == 'double') {
        if (this.formSql.value.indexOf(".") != -1) {
          val = this.formSql.value;
        } else {
          val = parseFloat(this.formSql.value).toFixed(1)
        }
      } else if (this.formSql.type == "date" || this.formSql.type == "datetime") {
        var time = new Date(this.formSql.date);
        var m = time.getMonth() + 1;
        var d = time.getDate();
        var y = time.getFullYear();
        val = "'" + y +
          '-' +
          this.add0(m) +
          '-' +
          this.add0(d) + "'";
      } else {
        val = "'" + this.formSql.value + "'";
      }
      this.ruleForm.fileName += this.formSql.field + " " + this.formSql.condition + " " + val;
      this.startFiledAndcondition();
    },
    //值域字段匹配
    getDomainNaFild(res, result) {
      for (var i in result) {
@@ -538,11 +836,13 @@
      this.getCollapseTable(this.filedsLayer);
    },
    // 重置查询
    resetForm(formName) {
      this.searchName = '';
      this.$refs[formName].resetFields();
    resetForm() {
      this.ruleForm.fileName = '';
      this.listData.pageIndex = 1;
      this.listData.pageSize = 10;
      //获取table信息
      this.getCollapseTable(this.filedsLayer);
    },
    // 发布按钮
@@ -767,7 +1067,7 @@
      border-radius: 5px;
      padding: 1%;
      max-height: 670px;
      overflow : auto;
      overflow: auto;
    }
    .spatial_rightContent {
      width: 80%;
@@ -938,5 +1238,32 @@
  /deep/.el-dialog__title {
    color: white;
  }
  /deep/.el-textarea__inner {
    background: transparent !important;
    border-color: #fff !important;
    color: white;
  }
}
/deep/ .el-dialog {
  background: #303030;
}
/deep/.el-range-editor.is-active,
.el-range-editor.is-active:hover,
.el-select .el-input.is-focus .el-input__inner {
  border: 1px solid;
}
/deep/.el-dialog__title {
  color: white;
}
/deep/ .el-dialog__body {
  padding: 10px;
}
/deep/.el-input__inner {
  background-color: transparent !important ;
  color: #fff;
  border: 1px solid white !important;
}
/deep/.el-dialog__wrapper {
  overflow: hidden !important;
}
</style>