BJYSYBZ/BJYSYBZ_C/src/views/BjWlydManageView/components/FourContent.vue

<template>
  <div class="FourContent">
    <cart-item title="地块资源">
      <div class="xm-list flex-1 flex-col">
        <div class="statistics-wrapper flex">
          <div class="statistics-item flex">
            <img
              src="@/assets/images/GyzzView/gyzs.png"
              class="item-left-icon"
            />
            <div class="text">
              <span>地块宗数</span>
              <br />
              <span class="num"> {{ zs }} </span>
              <span style="font-size: 15px">宗</span>
            </div>
          </div>
          <div class="statistics-item flex">
            <img
              src="@/assets/images/GyzzView/gymj.png"
              class="item-left-icon"
            />
            <div class="text">
              <span>地块面积</span>
              <br />
              <span class="num"> {{ mj }} </span
              ><span style="font-size: 15px">亩</span>
            </div>
          </div>
        </div>
        <div class="search-wrapper">
          <table>
            <tr>
              <th>行政区划</th>
              <td>
                <el-select
                  :popper-append-to-body="false"
                  v-model="query.xzqdm"
                  placeholder="请选择"
                  size="medium"
                  style="width: 100%"
                  clearable
                >
                  <el-option label="滨江区" value=""> </el-option>
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </td>
              <th>地块编号</th>
              <td>
                <el-input
                  size="medium"
                  v-model="query.name"
                  placeholder="地块编号"
                  style="width: 100%"
                  clearable
                ></el-input>
              </td>
            </tr>
            <tr>
              <th>管地单位</th>
              <td colspan="3" style="width: auto">
                <el-input
                  size="medium"
                  v-model="query.gddw"
                  placeholder="管地单位"
                  clearable
                  :disabled="disabledShow"
                ></el-input>
              </td>
            </tr>
          </table>

          <table>
            <tr>
              <th>面积(亩)</th>
              <td style="width: 130px;">
                <el-input
                  size="medium"
                  v-model="query.small"
                  placeholder="面积小"
                  style="width: 70%"
                  clearable
                ></el-input>
                <span style="color: white;margin-left: 15px">-</span>
              </td>
              <td style="width: 130px;">
                <el-input
                  size="medium"
                  v-model="query.big"
                  placeholder="面积大"
                  style="width: 70%"
                  clearable
                ></el-input>
                <!-- <div class="fold-wrapper" @click="foldShow = !foldShow"> <img src="@/assets/images/bjybz/choose.png" title="折叠/展开" style="vertical-align: middle"></div> -->
              </td>
              <td>
                <el-button
                  size="mini"
                  type="primary"
                  @click="queryData()"
                  icon="el-icon-search"
                  style="position: absolute;top:7px;right:80px"
                  >查询</el-button
                >
                <el-button
                  size="mini"
                  type="success"
                  @click="openExcel()"
                  icon="el-icon-download"
                  style="position: absolute;top:7px;right:0px"
                  >导出</el-button
                >
              </td>
            </tr>
          </table>
        </div>
        <div class="xm-wrapper">
          <div
            class="item-box"
            v-for="(item, index) in xzList"
            :key="index"
            @click="xzClick(item)"
            :title="item.dkbh"
          >
            <div
              class="tag-box"
              :style="{ background: tagBoxInitStyle(item.yj_status) }"
            >
              <p>
                {{ tagBoxInit(item.yj_status) }}
              </p>
            </div>
            <div class="left-xzq">
              <div class="top-title">
                {{ index + 1 }}<span>.</span>{{ item.dkbh }}
              </div>
              <div class="bottom-xzq">
                <img src="@/assets/images/YsbzView/location.png" alt="" />
                滨江区-{{ item.dkwz }}
              </div>
              <div class="bottom-xzq text-ellipsis">
                <span class="sssr-title">管地单位：</span>
                <span class="sssr-value">{{ item.gddw }}</span>
                <span class="sssr-unit"></span>
                <span class="sssr-title">面积：</span>
                <span class="sssr-value">{{ item.mj }}</span>
                <span class="sssr-unit">亩</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page-div">
        <el-pagination
          background
          ref="test"
          layout="prev, pager, next"
          :total="config.total"
          :page-size="config.page.count"
          :page-sizes="[10, 20, 30]"
          :current-page="config.page.index"
          @current-change="pageToMe"
          @size-change="changePageMe"
        >
        </el-pagination>
      </div>
    </cart-item>
  </div>
</template>

<script>
import CartItem from '@/views/components/CartItem.vue';
import Excels from '@/utils/openExcel';
export default {
  name: 'FourContent',
  components: {
    CartItem,
  },
  data() {
    return {
      disabledShow: false,
      userInfo: {},
      mj: 0,
      zs: 0,
      query: {
        xzqdm: '',
        name: '',
        gddw: '',
        big: '',
        small: '',
      },
      options: [
        {
          label: '西兴街道',
          value: '西兴街道',
        },
        {
          label: '长河街道',
          value: '长河街道',
        },
        {
          label: '浦沿街道',
          value: '浦沿街道',
        },
      ],
      xzList: [],
      config: {
        page: {
          count: 10,
          index: 1,
        },
        total: 100,
      },
      foldShow: false,
    };
  },
  created() {
    let users = JSON.parse(localStorage.getItem('userInfo'));
    if (users) {
      this.userInfo = users;
      let roles = users.roles.join(',');
      if (roles.indexOf('admin') > -1) {
      } else {
        if (users.nickName == '滨江地块监督') {
          this.query.gddw = '';
        } else {
          this.query.gddw = users.nickName;
          this.disabledShow = true;
        }
      }
    }
  },
  mounted() {
    this.$vm.$emit('setGdDetailType', 24);
    this.initHZ();
    this.getTsxzListData();
  },
  methods: {
    tagBoxInit(state) {
      if (state == 0) {
        return '待审核';
      } else if (state == 1) {
        return '不通过';
      }
    },
    tagBoxInitStyle(state) {
      if (state == 0) {
        return '#95AF2E';
      } else if (state == 1) {
        return '#CC4959';
      }
    },
    openExcel() {
      //导出表格
      var params = this.query;
      let url = `/api/ybz-bj/manageExport`;
      Excels.open(url, params, this, true, false, '滨江区管理地块情况表');
    },
    queryData() {
      this.initHZ();
      this.getTsxzListData();
      let refreshP = '1=1';
      console.log(this.query)
      if (this.query.xzqdm) {
        refreshP += ` and dkwz = '${this.query.xzqdm}'`;
      }
      if (this.query.name) {
        refreshP += ` and dkbh like '%${this.query.name}%'`;
      }
      if (this.query.gddw) {
        refreshP += ` and gddw like '${this.query.gddw}'`;
      }
      if (this.query.small) {
        refreshP += ` and mj >= ${this.query.small}`;
      }
      if (this.query.big) {
        refreshP += ` and mj <= ${this.query.big}`;
      }
      if (refreshP !== '1=1') {
        refreshP = refreshP.replace('1=1 and ', '');
      }
      this.$vm.$emit('updateLayer', {
        id: 'bj-dkgl',
        param: refreshP,
        layerIdx1: 0,
        layerIdx2: null,
      });
    },
    initHZ() {
      let p = {
        ...this.query,
      };
      if (this.userInfo && this.userInfo['nickName'] == '滨江地块监督') {
        p['gddw'] = ''
      }
      const urlApi = `/api/ybz-bj/manageHZ`;
      this.$ajax.get(urlApi, p, this, false).then((result) => {
        const { sl, mj } = result.data;
        this.zs = sl;
        this.mj = mj;
      });
    },
    getTsxzListData() {
      const urlApi = `/api/ybz-bj/manageList`;
      let p = {
        ...this.query,
        pageIndex: this.config.page.index,
        pageSize: this.config.page.count,
      };
      if (this.userInfo && this.userInfo['nickName'] == '滨江地块监督') {
        p['gddw'] = ''
      }
      this.$ajax.get(urlApi, p, this, false).then((result) => {
        const data = result['data'] || {};
        this.xzList = data['list'];
        this.config.total = data['total'];
      });
    },
    // 点击上一页、下一页以及指定页
    pageToMe(index) {
      this.config.page.index = index;
      this.getTsxzListData();
    },
    // 改变每页显示的条数
    changePageMe(size) {
      this.config.page.count = size;
      this.getTsxzListData();
    },
    xzClick(item) {
      this.$vm.$emit('setGdDetailType', 24);
      this.$vm.$emit('location-feature-where', {
        layerId: 'bj-dkgl',
        where: `dksyh = '${item.dksyh}'`,
        setting: { outFields: 'dksyh,dkbh,dkwz,gddw,dkmj' },
      });
      this.$emit('clickCallback', item);
    },
    dateFormat(date) {
      if (date === null || date === undefined || date === '') {
        console.log('时间格式化有误，时间为null');
        return '';
      }
      if (typeof date === 'string') {
        return date.substr(0, 10);
      }
      var time = new Date(date);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      return y + '-' + this.add0(m) + '-' + this.add0(d);
    },
  },
};
</script>

<style scoped lang="scss">
.FourContent {
  height: 100%;
  position: relative;
  overflow: hidden;
  ::v-deep .content {
    display: flex;
    flex-direction: column;
  }
  .xm-list {
    .statistics-wrapper {
      margin-bottom: 10px;
      border-radius: 5px;
      background: #1b366a;
      padding: 10px 20px;
      .statistics-item {
        width: 50%;
        .item-left-icon {
          width: 44px;
          height: 44px;
          margin-right: 15px;
          margin-top: 2px;
        }
        .text {
          span {
            font-size: 18px;
            font-family: MicrosoftYaHei;
            color: #fff;
            &.num {
              font-size: 20px;
              font-weight: bold;
            }
          }
        }
      }
    }
    ::v-deep .search-wrapper {
      table {
        width: 100%;
        tr {
          height: 40px;
          td,
          th {
            position: relative;
            .el-input {
              input {
                color: rgba(135, 193, 255, 1);
                background: transparent;
                border: 1px solid #4f91d7;
                &::-webkit-input-placeholder {
                  /* WebKit browsers，webkit内核浏览器 */
                  color: rgba(135, 193, 255, 0.8);
                }
                &:-moz-placeholder {
                  /* Mozilla Firefox 4 to 18 */
                  color: rgba(135, 193, 255, 0.8);
                }
                &::-moz-placeholder {
                  /* Mozilla Firefox 19+ */
                  color: rgba(135, 193, 255, 0.8);
                }
                &:-ms-input-placeholder {
                  /* Internet Explorer 10+ */
                  color: rgba(135, 193, 255, 0.8);
                }
              }
            }
          }
          th {
            width: 20%;
            font-size: 16px;
            color: rgba(135, 193, 255, 1);
          }
          td {
            width: 30%;
            .el-select {
              .el-select__tags {
                input {
                  color: rgba(135, 193, 255, 1);
                }
                span {
                  .el-tag {
                    border: 1px solid #4f91d7;
                    background: transparent;
                    .el-select__tags-text {
                      color: rgba(135, 193, 255, 1);
                    }
                    .el-tag__close {
                      color: rgba(135, 193, 255, 1);
                      background: transparent;
                      border: 1px solid #4f91d7;
                    }
                  }
                }
              }
            }
            .submit-btn {
              color: #133887;
              background: #56c1ff;
              float: right;
              &:hover {
                color: #fff;
              }
            }
          }
        }
      }
      @keyframes rollIn {
        0% {
          opacity: 0;
          height: 0;
          transform: translateY(-100%);
        }
        100% {
          opacity: 1;
          height: 128px;
          transform: translateY(0);
        }
      }
      @keyframes rollOut {
        0% {
          height: 128px;
          opacity: 1;
          transform: translateY(0);
        }
        100% {
          opacity: 0;
          height: 0;
          transform: translateY(-100%);
        }
      }
      /*滚入——从上侧*/
      .rollIn {
        animation: rollIn 0.3s;
      }
      /*滚出——从上侧*/
      .rollOut {
        animation: rollOut 0.3s;
      }
      .fold-wrapper {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 30px;
        line-height: 32px;
        height: 32px;
        border-radius: 5px;
        color: #fff;
        background: transparent;
        border: 1px solid #4f91d7;
        box-shadow: inset 0 0 10px #4f91d7;
        font-weight: normal;
        padding-left: 2px;
        cursor: pointer;
        font-size: 14px;
        &:hover {
          color: rgba(135, 193, 255, 1);
        }
      }
    }
    .xm-wrapper {
      flex: 1;
      overflow-y: auto;
      margin-top: 5px;
      .item-box {
        // height: 80px;
        // line-height: 45px;
        background: rgba(27, 54, 104, 0.3);
        border: 0.0625rem solid #395fa5;
        cursor: pointer;
        margin-bottom: 8px;
        display: flex;
        padding-bottom: 10px;
        position: relative;
        &:hover {
          background: linear-gradient(90deg, #0e66bf, #0c2b68);
        }

        .tag-box {
          width: 57px;
          height: 22px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          right: 20px;
          top: 15px;
          border-radius: 4px;
          p {
            color: #fff;
          }
        }
        .left-xzq {
          // width: 360px;
          // height: 80px;
          overflow: hidden;
          text-overflow: ellipsis;
          font-weight: 400;
          .top-title {
            width: 100%;
            padding-top: 0.625rem;
            padding-left: 1.25rem;
            font-size: 20px;
            font-family: Alibaba PuHuiTi;
            font-weight: 700;
            color: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 400;
          }
          .bottom-xzq {
            width: 100%;
            // height: 1.5625rem;
            padding-left: 1.25rem;
            font-size: 1rem;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #25f7ff;
            margin-top: 5px;
            img {
              width: 20px;
              vertical-align: sub;
            }
            .sssr-title {
              margin-left: 20px;
              color: #ffd100;
            }
            .sssr-value {
              font-size: 18px;
            }
            .sssr-unit {
              color: #fff;
            }
          }
        }
        .right-des {
          height: 30px;
          border-radius: 5px;
          padding: 5px 10px;
          text-align: center;
          color: #fff;
          margin-top: 24px;
          font-size: 13px;
          font-weight: bold;
          &.yes {
            background: #00bc77 !important;
            .color-circle {
              background: #0cbf97;
            }
          }
          &.no {
            // background: #009FFB;
            background: orange;
            .color-circle {
              background: orange;
            }
          }
          .color-circle {
            width: 12px;
            height: 12px;
            display: inline-block;
            border-radius: 50%;
          }
        }
      }
    }
  }
  .page-div {
    // height: 50px;
    padding-top: 10px;
    text-align: center;
    ::v-deep {
      .el-pagination .el-select .el-input {
      }
      .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #114f8f !important;
        color: #1ea0f7 !important;
      }
      .el-input__inner {
        -webkit-appearance: none;
        background-color: #04376c;
        background-image: none;
        border-radius: 0.25rem;
        border: 0.0625rem solid #3264da !important;
        box-sizing: border-box;
        color: #fff !important;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        outline: 0;
        padding: 0 0.9375rem;
        -webkit-transition: border-color 0.2s
          cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      }
      .el-pagination.is-background .btn-next,
      .el-pagination.is-background .btn-prev,
      .el-pagination.is-background .el-pager li {
        margin: 0 0.3125rem;
        background-color: #04376c;
        color: #fff;
        min-width: 1.875rem;
        border-radius: 0.125rem;
      }
    }
  }
}

::v-deep .el-select-dropdown {
  background-color: #264584;
  border: 1px solid #2c64a1;
  .el-select-dropdown__item {
    span {
      color: #1bf1ff;
    }
  }
  .selected {
    background-color: #2363ae !important;
    span {
      color: #1bf1ff;
    }
  }
  .hover {
    background-color: #2363ae !important;
  }
  .popper__arrow {
    border-bottom-color: #2c64a1;
  }
  .popper__arrow::after {
    border-bottom-color: #264584;
  }
}
</style>