管道基础大数据平台系统开发-【前端】-新系統界面
src/views/datamanage/uploadmanage.vue
@@ -10,7 +10,7 @@
    <div class="tabs_box">
      <div
        class="tabs_pane"
        @click="setTabsChange()"
        @click="setTabsChange(1)"
      >
        <div
          class="tabsSpan"
@@ -21,7 +21,7 @@
      </div>
      <div
        class="tabs_pane"
        @click="setTabsChange()"
        @click="setTabsChange(2)"
      >
        <div
          class="tabsSpan"
@@ -30,8 +30,22 @@
          <span> {{$t('dataManage.uploadObj.releaseList')}}</span>
        </div>
      </div>
      <div
        class="tabs_pane"
        @click="setTabsChange(3)"
      >
        <div
          class="tabsSpan"
          :class="{ changetabs : active == 'third'}"
        >
          <span> {{$t('dataManage.uploadObj.modelAttachMount')}}</span>
        </div>
      </div>
    </div>
    <div class="content_box">
    <div
      v-if="active != 'third'"
      class="content_box"
    >
      <el-form
        :inline="true"
        :model="formInline"
@@ -155,8 +169,8 @@
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
          @cell-dblclick="copyText"
          height="calc(100% - 1px)"
        >
          <el-table-column
@@ -281,18 +295,53 @@
        </el-pagination>
      </div>
    </div>
    <div
      v-if="active == 'third'"
      class="content_box"
    >
      <mapview v-if="active == 'third'"></mapview>
    </div>
    <!-- 地址预览 -->
    <el-dialog
      :title="$t('common.preview')"
      :class="isFullscreen ? '' : 'dialogClass_his'"
      custom-class="handleDialogClass"
      width="73.4%"
      :fullscreen="isFullscreen"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <dialog-header
        slot="title"
        :dialog-tittle="$t('common.preview')"
        :fullscreen="isFullscreen"
        @handle-closed="handleClose"
        @is-fullscreen="onFullscreen"
      ></dialog-header>
      <div :class="{'fullscreen1':isFullscreen}">
        <mapview v-if="showMapView"></mapview>
      </div>
    </el-dialog>
    <!-- <el-dialog
      :title="$t('common.preview')"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
      top="13vh"
      :lock-scroll="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      v-el-drag-dialog
    >
      <div style="width:100%;height:65vh">
        <mapview v-if="showMapView"></mapview>
      </div>
    </el-dialog>
      <div
        id="MapDiv"
        style="background:red;widht:100%;height:calc(100% - 10px)"
      ></div>
      <!--
    </el-dialog> -->
    <!-- 修改数据 -->
    <el-dialog
      :title="$t('common.update')"
@@ -389,6 +438,7 @@
      :visible.sync="insertDialogVisible"
      width="40%"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div style="width:100%;height:30vh">
        <el-form
@@ -409,16 +459,42 @@
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('dataManage.vmobj.minLevel')">
            <el-input
            <!-- <el-input
              v-model="insertLayer.min"
              :placeholder="$t('dataManage.vmobj.labe11')"
            ></el-input>
            ></el-input> -->
            <el-select
              style="width:100%"
              v-model="insertLayer.min"
              :placeholder="$t('dataManage.vmobj.labe11')"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('dataManage.vmobj.maxLevel')">
            <el-input
            <!-- <el-input
              v-model="insertLayer.max"
              :placeholder="$t('dataManage.vmobj.labe12')"
            ></el-input>
            ></el-input> -->
            <el-select
              style="width:100%"
              v-model="insertLayer.max"
              :placeholder="$t('dataManage.vmobj.labe12')"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
@@ -454,7 +530,6 @@
        element-loading-text="数据发布中"
        style="margin: 0px 20px;widht:100%;height:calc(100% - 80px); "
      >
      </div>
    </div>
  </div>
@@ -462,6 +537,8 @@
</template>
<script>
import axios from 'axios';
import dialogHeader from './dialogHeader.vue'
import mapview from '../../components/preview_map.vue'
import MyBread from "../../components/MyBread.vue"
import {
@@ -476,7 +553,10 @@
} from '../../api/api.js'
export default {
  components: { MyBread, mapview },
  components: {
    MyBread, mapview,
    'dialog-header': dialogHeader,
  },
  data() {
    return {
      active: 'first',
@@ -528,17 +608,39 @@
      detailsDialogVisible: false,
      itemdetail: {},
      insertDialogVisible: false,
      insertLayer: { name: '', number: null, min: 4, max: 8 },
      loadDialogVisible: false
      insertLayer: { name: '', number: null, min: 4, max: 18 },
      loadDialogVisible: false,
      options: [],
      isFullscreen: false,
    }
  },
  methods: {
    copyText(row, column, cell, event) {
      // 双击复制
      let save = function (e) {
        e.clipboardData.setData('text/plain', event.target.innerText);
        e.preventDefault();  //阻止默认行为
      }
      document.addEventListener('copy', save);//添加一个copy事件
      document.execCommand("copy");//执行copy方法
      this.$message({ message: '复制成功', type: 'success' })//提示
    },
    setOptions() {
      var std = [];
      for (var i = 0; i < 21; i++) {
        std.push({
          value: i,
          label: i
        })
      }
      this.options = std;
    },
    setloadDialogVisible() {
      this.loadDialogVisible = false
    },
    setinsertLayerCancel() {
      this.insertDialogVisible = false;
      this.insertLayer = { name: '', number: null, min: 4, max: 8 };
      this.insertLayer = { name: '', number: null, min: 4, max: 18 };
    },
    //发布提交
    async setinsertLayerSubmit() {
@@ -574,7 +676,7 @@
      }
      var std = [];
      for (var i in this.multipleSelection) {
        std.push(this.multipleSelection[i])
        std.push(this.multipleSelection[i].id)
      }
      var obj = {
        dircode: this.formInline.dirid,
@@ -582,14 +684,14 @@
        min: min,
        max: max,
        name: name,
        ids: std.toString(),
        ids: std,
        type: this.formInline.type
      }
      this.loadDialogVisible = true
      this.insertDialogVisible = false;
      const data = await publish_insert(obj);
      if (data.code != 200) {
      if (data.code != 200 || data.count > 0) {
        this.$message.error("数据发布失败")
      } else {
@@ -615,13 +717,13 @@
      } else {
        var std = [];
        for (var i in this.multipleSelection) {
          std.push(this.multipleSelection[i])
          std.push(this.multipleSelection[i].id)
        }
        var obj = {
          dircode: this.formInline.dirid,
          depcode: this.formInline.depid,
          ids: std.toString(),
          ids: std,
          type: this.formInline.type
        }
        this.loadDialogVisible = true
@@ -682,27 +784,36 @@
      this.editDialogVisible = true;
    },
    //删除
    async setPageDelete() {
    setPageDelete() {
      if (this.multipleSelection.length == 0) {
        return this.$message.error("请选择要删除的数据")
      } else {
        var std = [];
        for (var i in this.multipleSelection) {
          std.push(this.multipleSelection[i].id);
        }
        const data = await publish_deletes({ ids: std.toString() });
        if (data.code != 200) {
          this.$message.error("单位列表获取失败")
          return
        } else {
          this.$message({
            message: '删除成功',
            type: 'success'
        var that = this
        this.$confirm('确定是否删除所选内容?')
          .then(_ => {
            done();
          })
          .catch(_ => {
            that.deletePage()
          });
          this.getTableData();
        }
      }
    },
    async deletePage() {
      var std = [];
      for (var i in this.multipleSelection) {
        std.push(this.multipleSelection[i].id);
      }
      const data = await publish_deletes({ ids: std.toString() });
      if (data.code != 200) {
        this.$message.error("单位列表获取失败")
        return
      } else {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.getTableData();
      }
    },
    //预览弹窗打开
    setPreviewLayer(res) {
@@ -710,8 +821,13 @@
      this.dialogVisible = true;
      this.showMapView = true;
    },
    //是否为全屏函数
    onFullscreen(fullscreen) {
      this.isFullscreen = fullscreen;
    },
    //预览弹窗关闭
    handleClose() {
      this.getTableData();
      this.dialogVisible = false;
      this.showMapView = false;
@@ -758,17 +874,23 @@
      this.getTableData();
    },
    //tabs切換
    setTabsChange() {
      switch (this.active) {
        case 'first':
          this.active = 'second';
          this.setPageStart();
          break;
        case 'second':
    setTabsChange(res) {
      switch (res) {
        case 1:
          this.active = 'first';
          this.setPageStart();
          break;
        case 2:
          this.active = 'second';
          this.setPageStart();
          break;
        case 3:
          this.$store.state.previewLayer = {
            url: "menuLayer"
          }
          this.active = 'third';
          break;
      }
    },
    //页面初始化
@@ -961,6 +1083,7 @@
  mounted() {
    this.active = 'first';
    this.setPageStart();
    this.setOptions();
  }
}
</script>
@@ -1024,5 +1147,15 @@
      background: transparent !important;
    }
  }
  .fullscreen1 {
    width: 100%;
    height: 92vh;
  }
  /deep/.el-dialog__body {
    padding: 10px !important;
  }
  /deep/.el-dialog__header {
    padding: 10px !important;
  }
}
</style>