BJYSYBZ/BJYSYBZ_C/src/views/YgxqView/components/Xq.vue

<template>
  <div class="TwoContent">
    <cart-item title="详情">
      <div class="modal-close-wrapper" @click="detailClose">关闭 <img src="@/assets/images/GyzzView/close.png" class="close-icon"/> </div>
      <ItemCardBox title="基本信息" style="margin-top: 5px"/>
      <table class="border">
        <tr>
          <td class="th">地块编号</td>
          <td>
            {{ obj.dkbh }}
          </td>
        </tr>
        <tr>
          <td class="th">行政区划</td>
          <td>
            {{ obj.ssqx }} - {{ obj.ssjd }}
          </td>
        </tr>
        <tr>
          <td class="th">规划单元</td>
          <td>
            {{ obj.ghdy }}
          </td>
        </tr>
        <tr>
          <td class="th">面积(亩)</td>
          <td>
            {{ obj.mj && (obj.mj * 15).toFixed(2) }} 亩
          </td>
        </tr>
        <tr>
          <td class="th">用地性质</td>
          <td>
            {{ obj.ydxz }}
          </td>
        </tr>
        <tr>
          <td class="th">用地性质名称</td>
          <td>
            {{ obj.ydxzmc }}
          </td>
        </tr>
        <!-- <tr>
          <td class="th">主用地性质</td>
          <td>
            {{ obj.zydxz }}
          </td>
        </tr>
        <tr>
          <td class="th">主用地性质名称</td>
          <td>
            {{ obj.zydxzmc }}
          </td>
        </tr> -->
        <tr>
          <td class="th">容积率</td>
          <td>
            {{ obj.rjl }}
          </td>
        </tr>
        <tr>
          <td class="th">绿地率</td>
          <td>
            {{ obj.ldl }}
          </td>
        </tr>
        <tr>
          <td class="th">建筑密度</td>
          <td>
            {{ obj.jzmd }}
          </td>
        </tr>
        <tr>
          <td class="th">建筑限高</td>
          <td>
            {{ obj.jzxg }}
          </td>
        </tr>
      </table>
      <ItemCardBox title="填报信息" style="margin-top: 10px"/>
      <div class="flex-1">
        <table class="border">
          <tr>
            <th class="th">是否完成征迁</th>
            <td>{{ obj.sfwczq }}</td>
          </tr>
          <tr v-show="obj.sfwczq === '否'">
            <th class="th">未征迁具体情况</th>
            <td>
              {{ obj.sfwczqsm }}
            </td>
          </tr>
          <tr>
            <th class="th">是否完成农转用</th>
            <td>
              {{ obj.sfwcnzy }}
            </td>
          </tr>
          <tr v-show="obj.sfwcnzy === '否'">
            <th class="th">未农转用具体情况</th>
            <td>
              {{ obj.sfwcnzysm }}
            </td>
          </tr>
          <tr>
            <th class="th">是否净地</th>
            <td>
              {{ obj.sfjd }}
            </td>
          </tr>
          <tr v-show="obj.sfjd === '否'">
            <th class="th">未净地具体情况</th>
            <td>
              {{ obj.sfjdsm }}
            </td>
          </tr>
          <tr>
            <th class="th">收储计划</th>
            <td>
              {{ obj.crjh }}
            </td>
          </tr>
        </table>
      </div>
    </cart-item>
  </div>
</template>

<script>
import CartItem from "@/views/components/CartItem.vue";
import ItemCardBox from "@/views/components/ItemCardBox";

export default {
  name: "Xq",
  components: {CartItem,ItemCardBox},
  props: {
    id: String
  },
  watch: {
    id: {
      handler(nVal, oVal) {
        this.resetObj()
        this.getInfo(nVal)
      }
    }
  },
  data() {
    return {
      obj: {
        "gddw": "",
        "xmbh": '',
        "crjh": "",
        "sfwczq": "",
        "ghdy": "",
        "gkyq": "",
        "jzxg": "",
        "ydxzmc": "",
        "jzmd": "",
        "bz": "",
        "sfwcnzy": "",
        "mj": "",
        "dkbh": "",
        "sffd": "",
        "jcmj": "",
        "zydxz": "",
        "ssjd": "",
        "sfwczqsm": "",
        "ssqx": "",
        "pfwh": "",
        "sftb": "",
        "ydxz": "",
        "rjl": "",
        "ldl": "",
        "pfsj": "",
        "sfwcnzysm": "",
        "tdm": "",
        "zydxzmc": "",
        "sfygd": '',
        "sfjd": '',
        "sfjdsm": '',
      }
    }
  },
  mounted() {
  },
  methods:{
    getInfo() {
      let urlApi = `/api/ybz-bj/getWlydById`;
      let params = {
        id: this.id,
      };
      this.$ajax.get(urlApi, params, this, false).then(resp => {
        let { data, success } = resp
        this.obj = { ...data }
      });
    },
    detailClose() {
      this.resetObj()
      this.$emit('detailClose')
    },
    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);
    },
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    resetObj() {
      this.obj = {
        "gddw": "",
        "xmbh": '',
        "crjh": "",
        "sfwczq": "",
        "ghdy": "",
        "gkyq": "",
        "jzxg": "",
        "ydxzmc": "",
        "jzmd": "",
        "bz": "",
        "sfwcnzy": "",
        "mj": "",
        "dkbh": "",
        "sffd": "",
        "jcmj": "",
        "zydxz": "",
        "ssjd": "",
        "sfwczqsm": "",
        "ssqx": "",
        "pfwh": "",
        "sftb": "",
        "ydxz": "",
        "rjl": "",
        "ldl": "",
        "pfsj": "",
        "sfwcnzysm": "",
        "tdm": "",
        "zydxzmc": "",
        "sfygd": '',
        "sfjd": '',
        "sfjdsm": '',
      }
    }
  }

}
</script>

<style scoped lang="scss">
.TwoContent {
  height: 100%;
  position: relative;
  overflow-y: auto;
  ::v-deep .content {
    display: flex;
    flex-direction: column;
  }
  div {
    overflow-y: auto;
  }
  table {
    width: 100%;
    margin: 5px 0;
    position: relative;
    &.border {
      border-right: 1px solid #2B6DA7;
      border-bottom: 1px solid #2B6DA7;
      tr {
        .th {
          text-align: center;
          color: #A5DAFF;
          background: #0E4380;
          width: 146px;
          padding-left: 0px;
        }
        td {
          color: #fff;
          border-left: 1px solid #2B6DA7;
          border-top: 1px solid #2B6DA7;
          padding-left: 10px;
          ::v-deep .el-input {
            input {
              border: none;
            }
          }  
        }
      }
    }
    tr {
      height: 40px;
      th {
        font-size: 16px;
        color: rgba(135, 193, 255, 1);
      }
      td {
        ::v-deep .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);
            }
          }
        }
        ::v-deep .el-radio-group {
          label {
            color: rgba(135, 193, 255, 1);
          }
        }
      }
    }
  }
  .btn-wrapper {
    text-align: center;
    .submit-btn {
      color: #133887;
      background: #56C1FF;
      &:hover {
        color: #FFF;
      }
    }
  }
  .modal-close-wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #38D0FF;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    .close-icon {
      width: 20px;
      vertical-align: middle;
    }
  }
}
</style>