一张图底图切换优化；综合展示，图层管理模型添加透明度设置；目录管理添加目录下载功能；附件预览添添加图片设置

Surpriseplus

2023-03-27 fcc5348307a44b2312b168e98e880c0e60f3c19e

 src/views/datamanage/SpatialData.vue

@@ -132,17 +132,12 @@
              width="20"
              align="center"
            />
            <!--            <el-table-column
              width="60"
              align="center"
              type="index"
              :label="$t('common.index')"
            />-->
            <!--              :label="item.alias"-->
            <el-table-column
              min-width="135"
              v-for="(item, index) in attributeData"
              :key="index"
              :label="item.alias"
              :label="$i18n.locale == 'zh' ? item.alias : item.field"
              :prop="item.field"
              show-overflow-tooltip
              align="center"
@@ -434,21 +429,75 @@
        v-if="dialog.isJpg"
        class="pdfClass"
      >
        <img
        <el-image
          style="width:100%; height:100%"
          :src="dialog.src"
          alt=""
        />
          :preview-src-list="[dialog.src]"
        >
        </el-image>

      </div>
    </el-dialog>
    <el-dialog
      :title="attribute.name"
      :title="attribute.title"
      :append-to-body="false"
      :visible.sync="AttributedialogVisible"
      width="70%"
      width="80%"
      :close-on-click-modal="false"
    >
      <div class="attributeBox">
        <div class="attrubuteLeft">
          <ul>
            <li
              v-for="item in attrbuteOption"
              :class="{active:attributeFlag === item.name}"
              @click="setChangeAttrubuteData(item)"
            >
              {{item.name}}
            </li>
          </ul>
        </div>
        <div class="attrubuteRight">
          <el-table
            ref="refAttributeTable"
            :data="attributeTable"
            style="width:100%;"
            border
            height="calc(100% - 50px)"
          >
            <el-table-column
              type="selection"
              align="center"
            />

            <el-table-column
              min-width="135"
              v-for="(item, index) in  attributeFild"
              :key="index"
              :label="item.alias"
              :prop="item.field"
              show-overflow-tooltip
              align="center"
            ></el-table-column>

          </el-table>
          <div
            class="pagination_box"
            style="margin-top: 10px"
          >
            <el-pagination
              @size-change="attributeSizeChange"
              @current-change="attributeCurrentChange"
              :current-page="attribute.pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="attribute.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="attribute.count"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
@@ -465,6 +514,7 @@
  dataQuery_uploadFiles,
  dataQuery_selectFiles,
  dataQuery_deletes,
  dataUploadSelectVerByDirid,
} from "../../api/api";
import { getToken } from "../../utils/auth.js";
import catalogueTree from "../../components/catalogueTree.vue";
@@ -574,7 +624,13 @@
        pageIndex: 1,
        pageSize: 10,
        count: 0,
      }
        title: null
      },
      attrbuteOption: [],
      attributeFlag: null,
      attributeTable: [],
      attributeLayer: null,
      attributeFild: null,
    };
  },
  created() {
@@ -590,10 +646,115 @@
  },

  methods: {
    getAttributeTable(idnex, row) {
      this.attribute.name = row.workname;
      this.AttributedialogVisible = true;
    //分页点击事件
    attributeSizeChange(val) {
      this.attribute.pageSize = val;
      this.attribute.pageIndex = 1;
      //获取table信息
      this.setAttributeTableData(this.attributeLayer);
    },
    attributeCurrentChange(val) {
      this.attribute.pageIndex = val;
      //获取table信息
      this.setAttributeTableData(this.attributeLayer);
    },
    getAttributeTable(idnex, row) {
      this.attribute.title = row.workname;
      this.attrbuteOption = workSite;

      this.AttributedialogVisible = true;
      this.setChangeAttrubuteData(this.attrbuteOption[0])
    },
    setChangeAttrubuteData(res) {
      this.attributeFlag = res.name;
      this.attribute.pageIndex = 1;
      this.attribute.pageSize = 10;
      this.attribute.count = 0;
      this.attributeLayer = res;
      this.setAttributeTableData(res)
    },
    setAttributeTableData(res) {
      var name = res.table.replaceAll("_", "");
      this.attribute.name = name;
      var value = this.getAttributeDomFiled(name)
      this.getAttributeTableData(value, res)
    },

    //获取每个表字段名称及阈值
    async getAttributeDomFiled(res) {
      //查询字段信息;
      const fileds = await dataQuery_selectFields({
        name: res,
      });
      if (fileds.code != 200) {
        this.$message.error("调用列表失败,请联系工作人员!");
        return;
      }

      //查询阈值信息；
      const domains = await dataQuery_selectDomains({
        name: res,
      });
      if (domains.code != 200) {
        this.$message.error("调用列表失败,请联系工作人员!");
        return;
      }
      var data1 = fileds.result;
      var data2 = domains.result;
      var std = [];
      this.filedsOption = [];
      for (var i in data1) {
        if (data1[i].type != 'geometry' && data1[i].type) {

          this.filedsOption.push(data1[i]);
        }
        if (data1[i].showtype == 1) {
          if (data1[i].domainNa != null) {
            data1[i].domainNa = this.getDomainNaFild(data1[i].domainNa, data2);
          }
          std.push(data1[i]);
        }
      }
      return std;
    },

    //获取表格信息
    async getAttributeTableData(res, result) {
      res.then((val) => {
        this.attributeFild = val;
      });

      this.attribute.filter = "workname = " + "'" + this.attribute.title + "'";


      const data = await dataQuery_selectByPage(this.attribute);
      if (data.code != 200) {
        this.$message.error("调用列表失败,请联系工作人员!");
        return;
      }
      this.attributeTable = []
      var res_val = this.attributeFild;
      this.attribute.count = data.count;
      for (var i in data.result) {
        let val_Data = data.result[i];

        for (var j in res_val) {
          if (res_val[j].domainNa != null && res_val[j].domainNa != undefined) {

            val_Data[res_val[j].field] = res_val[j].domainNa;
          }
        }
      }

      this.attributeTable = data.result;
      this.$nextTick(() => {
        this.$resfs.refAttributeTable.doLayout()
      });

    },



    matchState1(state = "", reg) {
      var row = state.row;
      if (
@@ -655,15 +816,26 @@

      this.refreshAttatchDetail()
      var name = row.name;
      if (name.indexOf('.pdf') != -1) {
      if (name.indexOf('.pdf') != -1 || name.indexOf('.PDF') != -1) {
        this.dialog.dialogVisible = true;
        this.dialog.isPdf = true;
        var url = BASE_URL + "/res/downloadForView?guid=" + row.guid + "&token=" + getToken();
        var url = BASE_URL + "/comprehensive/downloadForView?guid=" + row.guid + "&token=" + getToken();
        this.dialog.src = url
      } else if (name.indexOf('.jpg') != -1 || name.indexOf('.gif') != -1 || name.indexOf('.png') != -1 || name.indexOf('.jpeg') != -1) {
      } else if (
        name.indexOf('.jpg') != -1
        || name.indexOf('.gif') != -1
        || name.indexOf('.png') != -1
        || name.indexOf('.jpeg') != -1
        || name.indexOf('.JPG') != -1
        || name.indexOf('.GIF') != -1
        || name.indexOf('.PNG') != -1
        || name.indexOf('.JPEG') != -1
        || name.indexOf('.BMP') != -1
        || name.indexOf('.bmp') != -1
      ) {
        this.dialog.dialogVisible = true;
        this.dialog.isJpg = true;
        var url = BASE_URL + "/res/downloadForView?guid=" + row.guid + "&token=" + getToken();
        var url = BASE_URL + "/comprehensive/downloadForView?guid=" + row.guid + "&token=" + getToken();
        this.dialog.src = url
      }
    },
@@ -673,7 +845,18 @@
      var name = row.name;

      if (name) {
        if (name.indexOf('.pdf') != -1 || name.indexOf('.jpg') != -1 || name.indexOf('.gif') != -1 || name.indexOf('.png') != -1 || name.indexOf('.jpeg') != -1) {
        if (name.indexOf('.pdf') != -1
          || name.indexOf('.jpg') != -1
          || name.indexOf('.gif') != -1
          || name.indexOf('.png') != -1
          || name.indexOf('.jpeg') != -1
          || name.indexOf('.PDF') != -1
          || name.indexOf('.JPG') != -1
          || name.indexOf('.GIF') != -1
          || name.indexOf('.PNG') != -1
          || name.indexOf('.JPEG') != -1
          || name.indexOf('.BMP') != -1
          || name.indexOf('.bmp') != -1) {
          return true;
        }
      }
@@ -800,7 +983,7 @@
          this.tree.push(
            {
              val: item.bak,
              label: item.tabDesc,
              label: item.bak,
              children: [],
            }
          )
@@ -815,6 +998,7 @@
          }
        })
      })

      this.handleNodeClick(this.tree[0].children[0]);
    },
    //授权管理
@@ -868,17 +1052,72 @@

        for (var j in res_val) {
          if (res_val[j].domainNa != null && res_val[j].domainNa != undefined) {

            val_Data[res_val[j].field] = res_val[j].domainNa;
          }
        }
      }
      var that = this;
      var value = data.result.filter((item) => {

      this.tableData = data.result;
        if (item.dirName) {
          item.dirid = item.dirName
        }
        if (item.depName) {

          item.depid = item.depName
        }
        if (item.verName) {
          item.verid = item.verName
        }

        if (item.createName) {
          item.createuser = item.createName
        }
        if (item.updateName) {
          item.updateuser = item.updateName
        }
        if (item.createtime) {
          item.createtime = that.format(item.createtime);
        }

        if (item.updatetime) {
          item.updatetime = that.format(item.updatetime);
        }
        return item
      })





      this.tableData = value;

      this.$nextTick(() => {
        this.$refs.refTableData.doLayout();
      });
    },
    //格式化时间
    format(shijianchuo) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + "-" + this.add0(m) + "-" + this.add0(d);
    },
    //格式化时间
    add0(m) {
      return m < 10 ? "0" + m : m;
    },





    //获取每个表字段名称及阈值
    async getCollapseDomFiled() {
      //查询字段信息;
@@ -1318,6 +1557,38 @@
    width: 100%;
    position: relative;
  }
  .attributeBox {
    height: 63vh;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    .attrubuteLeft {
      width: calc(20% - 20px);
      height: calc(100% - 20px);
      border: 1px solid #dcdfe6;
      border-radius: 5px;
      padding: 10px;
      li {
        border-bottom: 1px solid #dcdfe6;
        line-height: 30px;
        text-align: center;
      }
      li:hover {
        background: rgba(255, 255, 255, 0.3);
        color: #409eff;
      }
      .active {
        color: #409eff;
      }
    }
    .attrubuteRight {
      width: 79%;
      height: 100%;
      border: 1px solid #dcdfe6;
      border-radius: 5px;
    }
  }
}

.table_box2 {