土地管理弹框样式修改

lixuliang

2023-11-13 b49bf267402c81be232ea41aaf038db4f2997375

 src/components/map/viewer1.vue

@@ -3,12 +3,19 @@
    <div id="sdkContainer1" style="height: 100%"></div>
    <div class="listBox" v-show="!isLand">
      <ul>
        <li v-for="(item, index) in arr" :key="index" @click="changeLeftMap($event, item, index)">
        <li
          v-for="(item, index) in arr"
          :key="index"
          @click="changeLeftMap($event, item, index)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <layerTreeTwoScreenRight v-if="layerTreeTwoScreen" id="layerTreeTwoScreen111" />
    <layerTreeTwoScreenRight
      v-if="layerTreeTwoScreen"
      id="layerTreeTwoScreen111"
    />
    <div class="tdInfo" v-if="showTDinfo">
      <div class="tdInfo_close" @click="tdInfoClose">×</div>
      <p v-if="dikuanxinxi" class="noInfo">暂无该地块信息</p>
@@ -45,7 +52,12 @@
        <div v-else class="title">
          <li>
            企业
            <el-tooltip class="item" effect="dark" content="点击查看企业信息" placement="bottom">
            <el-tooltip
              class="item"
              effect="dark"
              content="点击查看企业信息"
              placement="bottom"
            >
              <a @click="showYZCQY"> {{ qysl }}</a>
            </el-tooltip>
            家
@@ -53,35 +65,104 @@
        </div>
      </ul>
    </div>
    <el-dialog class="aboutDialog" title="企业信息" append-to-body width="60%" height="60%" style="overflow: auto"
      :visible.sync="QYbox" :before-close="dialogClose">
      <div class="el-dialog-div">
        <div class="inquire">
          <el-form size="medium" ref="queryForm" :model="queryForm" :inline="true">
            <el-form-item label="查询内容" prop="name">
              <el-input v-model="queryForm.content" placeholder="请输入查询内容" />
            </el-form-item>
            <el-form-item>
              <el-button @click="queryInfo('queryForm')" icon="el-icon-search" class="primary">查询</el-button>
            </el-form-item>
          </el-form>
    <div
      :style="{
        width: `${size}`,
        height: `${size}`,
        transform: `scale(${scale}) translate(${offset},${offset})`,
        '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`,
        '-moz-transform': `scale(${scale}) translate(${offset},${offset})`,
        '-o-transform': `scale(${scale}) translate(${offset},${offset})`,
        '-ms-transform': `scale(${scale}) translate(${offset},${offset})`,
      }"
    >
      <el-dialog
        class="aboutDialog"
        title="企业信息"
        append-to-body
        width="60%"
        height="60%"
        style="overflow: auto"
        :visible.sync="QYbox"
        :before-close="dialogClose"
      >
        <div class="el-dialog-div">
          <div class="inquire">
            <el-form
              size="medium"
              ref="queryForm"
              :model="queryForm"
              :inline="true"
            >
              <el-form-item label="查询内容" prop="name">
                <el-input
                  v-model="queryForm.content"
                  placeholder="请输入查询内容"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  @click="queryInfo('queryForm')"
                  icon="el-icon-search"
                  class="primary"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <el-table
            fit
            style="width: 100%"
            :data="tableData"
            highlight-current-row
          >
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column
              property="企业名称"
              label="企业名称"
            ></el-table-column>
            <el-table-column
              property="企业类型"
              label="企业类型"
            ></el-table-column>
            <el-table-column
              property="成立时间"
              label="成立时间"
            ></el-table-column>
            <el-table-column
              property="所属行业"
              label="所属行业"
            ></el-table-column>
            <el-table-column
              property="法人"
              label="法人"
              width="100"
            ></el-table-column>
            <el-table-column
              property="注册地址"
              label="注册地址"
              width="200"
            ></el-table-column>
          </el-table>
          <div
            slot="footer"
            class="dialog-footer"
            style="text-align: center; margin-top: 5px"
          >
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="10"
              :pager-count="11"
              layout="total, pager"
              :total="searchNum"
            >
            </el-pagination>
          </div>
        </div>
        <el-table fit style="width: 100%" :data="tableData" highlight-current-row>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column property="企业名称" label="企业名称"></el-table-column>
          <el-table-column property="企业类型" label="企业类型"></el-table-column>
          <el-table-column property="成立时间" label="成立时间"></el-table-column>
          <el-table-column property="所属行业" label="所属行业"></el-table-column>
          <el-table-column property="法人" label="法人"></el-table-column>
          <el-table-column property="注册地址" label="注册地址"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer" style="text-align: center; margin-top: 5px">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage" :page-size="10" :pager-count="11" layout="total, pager" :total="searchNum">
          </el-pagination>
        </div>
      </div>
    </el-dialog>
      </el-dialog>
    </div>
  </div>
</template>

@@ -94,7 +175,17 @@

import Bus from "../tools/Bus";

let line, line1, handler, handler1, divPoint, divPoint1, dx, activeLi, nLayer, TDLayer, LWLayer;
let line,
  line1,
  handler,
  handler1,
  divPoint,
  divPoint1,
  dx,
  activeLi,
  nLayer,
  TDLayer,
  LWLayer;
export default {
  name: "viewer1",
  components: { layerTreeTwoScreenRight },
@@ -131,7 +222,6 @@
      ],
      tableData: [],


      queryForm: {
        type: "企业名称",
        content: "",
@@ -141,9 +231,7 @@
      offset: "0%",
    };
  },
  created() {

  },
  created() {},
  computed: {
    ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen"]),
  },
@@ -184,9 +272,13 @@
          this.loadTDGLLayer();
        }
      }
    }
    },
  },
  mounted() {
    let size = this.detectZoom();
    this.scale = (100 / size).toFixed(2);
    this.offset = "-" + ((size - 100) / 2).toFixed(2) + "%";
    this.size = size + "%";
    this.$nextTick(function () {
      let that = this;
      let option = {
@@ -244,7 +336,6 @@
        }
      );


      window.Viewer1 = sgworld1._Viewer;
      Viewer1.shadows = false;

@@ -256,7 +347,6 @@
      Viewer1.scene.globe.translucency.frontFaceAlpha = 0.5;
      Viewer1.scene.globe.undergroundColor = undefined;


      this.addEvent();
    });
    //关闭弹窗
@@ -267,7 +357,6 @@
    });
  },
  methods: {

    setImageComparison(isStart) {
      this.isImage = isStart;
      if (!this.isImage) {
@@ -276,7 +365,7 @@
    },
    destroyImageLayer() {
      if (activeLi) {
        activeLi.classList.remove('active');
        activeLi.classList.remove("active");
        activeLi = null;
      }
      if (nLayer) {
@@ -291,10 +380,10 @@
    changeLeftMap(event, item, index) {
      let liObj = event.currentTarget;
      if (activeLi) {
        activeLi.classList.remove('active');
        activeLi.classList.remove("active");
        activeLi = null;
      }
      liObj.classList.add('active');
      liObj.classList.add("active");
      activeLi = liObj;
      this.loadImageLayer(item);
    },
@@ -313,15 +402,15 @@
      //let url = option.url;
      //let year = option.year;
      let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Shiliang_Lw_2019&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
      let minx = 113.168199 * Math.PI / 180.0;
      let miny = 39.230551 * Math.PI / 180.0;
      let maxx = 118.562362 * Math.PI / 180.0;
      let maxy = 41.294714 * Math.PI / 180.0;
      let minx = (113.168199 * Math.PI) / 180.0;
      let miny = (39.230551 * Math.PI) / 180.0;
      let maxx = (118.562362 * Math.PI) / 180.0;
      let maxy = (41.294714 * Math.PI) / 180.0;
      let rectangle = new Cesium.Rectangle(minx, miny, maxx, maxy);
      let tilingScheme = new Cesium.GeographicTilingScheme({
        rectangle: rectangle,
        numberOfLevelZeroTilesX: 2,
        numberOfLevelZeroTilesY: 1
        numberOfLevelZeroTilesY: 1,
      });
      var dx = {
        url: paramUrl,
@@ -332,11 +421,14 @@
          },
          ny: function (imageryProvider, x, y, level) {
            return (2 << (level - 1)) + y;
          }
        }
          },
        },
      };
      var imageryProvider = new Cesium.UrlTemplateImageryProvider(dx);
      let imageLayer = new Cesium.ImageryLayer(imageryProvider, { alpha: 1, brightness: 1.0 });
      let imageLayer = new Cesium.ImageryLayer(imageryProvider, {
        alpha: 1,
        brightness: 1.0,
      });
      Viewer1.imageryLayers.add(imageLayer, 3);
      return imageLayer;
    },
@@ -345,15 +437,15 @@
      //let url = option.url;
      //let year = option.year;
      let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Sate_${year}&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
      let minx = 113.168199 * Math.PI / 180.0;
      let miny = 39.230551 * Math.PI / 180.0;
      let maxx = 118.562362 * Math.PI / 180.0;
      let maxy = 41.294714 * Math.PI / 180.0;
      let minx = (113.168199 * Math.PI) / 180.0;
      let miny = (39.230551 * Math.PI) / 180.0;
      let maxx = (118.562362 * Math.PI) / 180.0;
      let maxy = (41.294714 * Math.PI) / 180.0;
      let rectangle = new Cesium.Rectangle(minx, miny, maxx, maxy);
      let tilingScheme = new Cesium.GeographicTilingScheme({
        rectangle: rectangle,
        numberOfLevelZeroTilesX: 2,
        numberOfLevelZeroTilesY: 1
        numberOfLevelZeroTilesY: 1,
      });
      var dx = {
        url: paramUrl,
@@ -364,11 +456,14 @@
          },
          ny: function (imageryProvider, x, y, level) {
            return (2 << (level - 1)) + y;
          }
        }
          },
        },
      };
      var imageryProvider = new Cesium.UrlTemplateImageryProvider(dx);
      let imageLayer = new Cesium.ImageryLayer(imageryProvider, { alpha: 1, brightness: 1.0 });
      let imageLayer = new Cesium.ImageryLayer(imageryProvider, {
        alpha: 1,
        brightness: 1.0,
      });
      Viewer1.imageryLayers.add(imageLayer, 2);
      return imageLayer;
    },
@@ -396,7 +491,6 @@
        true,
        ""
      );

    },
    addEvent() {
      let type = 0;
@@ -434,10 +528,10 @@
            axios
              .get(
                "http://10.10.4.115:8022/geowinmap_xncs/ds?r=0.9158559377752831&serviceproviderid=map.vectorserviceprovider&serviceid=queryfeature&featcls=225%25E8%258C%2583%25E5%259B%25B4%25E5%2588%2586%25E5%258C%25BA%25E8%25A7%2584%25E5%2588%2592.geojson&lng=" +
                p.lon +
                "&lat=" +
                p.lat +
                "&geom=true&requesttype=json"
                  p.lon +
                  "&lat=" +
                  p.lat +
                  "&geom=true&requesttype=json"
              )
              .then((response) => {
                let center = { lon: 0, lat: 0 };
@@ -482,7 +576,7 @@
                  axios
                    .get(
                      "http://10.10.4.115:8022//poisearch/guihuacon/getInfo?ydbm=" +
                      response.data.NO
                        response.data.NO
                    )
                    .then(
                      (info) => {
@@ -518,10 +612,10 @@
                          }
                          try {
                            this.ydlx = data.yongdishuju["ydlxmc"];
                          } catch (e) { }
                          } catch (e) {}
                          try {
                            this.cyfx = data.yongdishuju["cyfx"];
                          } catch (e) { }
                          } catch (e) {}
                          try {
                            // this.crzt = response.data["ZT"];
                            switch (response.data["ZT"]) {
@@ -532,28 +626,28 @@
                                this.crzt = "未出让";
                                break;
                            }
                          } catch (e) { }
                          } catch (e) {}
                          try {
                            this.ydmj = parseFloat(
                              "" + data.yongdishuju["ydmj"]
                            ).toFixed(0);
                          } catch (e) { }
                          } catch (e) {}
                          try {
                            this.crnx = data.churangxinxi["crnx"];
                          } catch (e) { }
                          } catch (e) {}
                          try {
                            this.crnf = data.churangxinxi["crnf"];
                          } catch (e) { }
                          } catch (e) {}
                          try {
                            this.rjl = data.yongdishuju["rjl"];
                          } catch (e) { }
                          } catch (e) {}
                          try {
                            this.jzxg = data.yongdishuju["jzxg"];
                          } catch (e) { }
                          } catch (e) {}
                          try {
                            this.jzmd = data.yongdishuju["jzmd"];
                          } catch (e) { }
                        } catch (e) { }
                          } catch (e) {}
                        } catch (e) {}
                      },
                      (info) => {
                        this.$notify.error({
@@ -569,7 +663,6 @@
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    },
    dialogClose() {
      this.queryForm.content = "";
@@ -882,21 +975,13 @@
      this.qysl = 0;
      this.ydbm = "";
      this.ydlx = "";

      this.cyfx = "";

      this.crzt = "";

      this.ydmj = "";

      this.crnx = "";

      this.crnf = "";

      this.rjl = "";

      this.jzxg = "";

      this.jzmd = "";
    },
    //初始化弹窗事件
@@ -1073,22 +1158,20 @@
}

.noInfo {
  margin-top: 30px;
  margin-left: 20px;
  width: 150px;
  margin: 30px 20px 20px;
  width: 200px;
  text-align: center;
}

.tdInfo {
  position: absolute;
  z-index: 999;
  top: 20%;
  /* left: 35%; */
  top: 15%;
  right: 0%;
  transform: translateX(50%);
  padding-top: 20px;
  width: 401px;
  height: 549px;
  box-sizing: border-box;
  padding: 20px 0;
  /* height: 529px; */
  /* box-sizing: border-box; */
  background: rgba(14, 50, 143, 0.85);
  border: 1px solid #205fbc;
  box-shadow: 0px 1px 10px 0px rgba(3, 10, 26, 0.38);
@@ -1098,20 +1181,15 @@
}

.tdInfo .title {
  width: 378px;
  height: 30px;
  background-image: url("~@/assets/img/new/tdgltitle.png");
  background-size: 100% 100%;
  margin: 0 auto;
}

.tdInfo .title li {
  margin-left: 32px;
  /* width: 78px; */
  line-height: 30px;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
@@ -1120,12 +1198,16 @@
.content1,
.content2,
.content3 {
  width: 342px;
  /* width: 100%; */
  box-sizing: border-box;
  margin-left: 42px;
  /* margin-left: 42px; */
  min-width: 220px;
  max-width: 280px;
  margin: 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 19px 0;
}

.content1 li,
@@ -1134,24 +1216,9 @@
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  /* background-color: rgb(255, 218, 170); */
  line-height: 26px;
  text-shadow: 0px 1px 6px rgba(3, 10, 26, 0.5);
}

.content1 {
  height: 136px;
  padding: 19px 0;
}

.content2 {
  height: 132px;
  padding: 21px 0;
}

.content3 {
  height: 116px;
  padding-top: 21px;
  padding-bottom: 27px;
}

.tdInfo a {
@@ -1165,30 +1232,25 @@
  font-weight: bold;
  color: #ebb01e;
  /* text-shadow: 0px 2px 9px #003f85; */

  background: linear-gradient(0deg, #ecaa0b 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*
  
 */

.aboutDialog /deep/ .el-dialog {
  background: rgba(14, 50, 143, 0.7);
  background: rgba(14, 50, 143, 0.8);
  border: 2px solid #205fbc;
  border-radius: 10px;
  box-shadow: 0px 1px 10px 0px rgba(3, 10, 26, 0.38);
}

.aboutDialog>>>.el-dialog__body {
.aboutDialog >>> .el-dialog__body {
  height: 77%;
  padding: 0px !important;
  padding: 15px !important;
}

.aboutDialog>>>.el-dialog__header {
.aboutDialog >>> .el-dialog__header {
  padding: 10px 20px;
  height: 25px;
  line-height: 25px;
@@ -1197,28 +1259,28 @@
  background: transparent;
}

.aboutDialog>>>.el-dialog__title {
.aboutDialog >>> .el-dialog__title {
  color: #fff;
  font-size: 1.1rem;
}

.aboutDialog>>>.el-dialog__headerbtn .el-dialog__close {
.aboutDialog >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.aboutDialog>>>.el-dialog__headerbtn:hover .el-dialog__close {
.aboutDialog >>> .el-dialog__headerbtn:hover .el-dialog__close {
  color: #fff;
}

.aboutDialog>>>.el-dialog__headerbtn {
.aboutDialog >>> .el-dialog__headerbtn {
  top: 13px;
}

.aboutDialog>>>.el-form-item {
.aboutDialog >>> .el-form-item {
  margin-bottom: 10px;
}

.el-form>>>.el-form-item__label {
.el-form >>> .el-form-item__label {
  color: #fff;
}

@@ -1267,40 +1329,41 @@
  background-color: transparent;
}

.el-table /deep/ .el-table__body tr.current-row>td {
.el-table /deep/ .el-table__body tr.current-row > td {
  background-color: transparent;
}

.el-table--enable-row-hover /deep/ .el-table__body tr:hover>td {
.el-table--enable-row-hover /deep/ .el-table__body tr:hover > td {
  background-color: rgba(0, 32, 70, 0.7) !important;
}

.el-table__body /deep/ tr.current-row>td {
.el-table__body /deep/ tr.current-row > td {
  background-color: rgba(0, 32, 70, 0.7) !important;
}

.aboutDialog .el-dialog-div .dialog-footer {}
.aboutDialog .el-dialog-div .dialog-footer {
}

.el-pagination {
  color: #fff;
}

.el-pagination>>>.el-pagination__total,
.el-pagination>>>.btn-next,
.el-pagination>>>.btn-prev {
.el-pagination >>> .el-pagination__total,
.el-pagination >>> .btn-next,
.el-pagination >>> .btn-prev {
  background: transparent;
  color: #fff;
  font-size: 1rem;
}

.el-pagination>>>.el-pager li {
.el-pagination >>> .el-pager li {
  line-height: 27px;
  background-color: transparent;
  font-size: 1rem;
}

.el-pagination>>>.el-pager li.btn-quicknext,
.el-pagination>>>.el-pager li.btn-quickprev {
.el-pagination >>> .el-pager li.btn-quicknext,
.el-pagination >>> .el-pager li.btn-quickprev {
  font-size: 1rem;
  line-height: 28px;
  color: #fff;
@@ -1310,13 +1373,10 @@
  position: absolute;
  right: 20px;
  top: 100px;

}

.listBox .active {

  background: rgba(255, 166, 0, 0.808);

}

.listBox li {
@@ -1334,6 +1394,9 @@
  .listBox li {
    font-size: 12px;
  }
  .el-table {
    font-size: 12px;
  }
}

.listBox li:hover {