闲置资产清单接口

src/components/pop-window/index.html

@@ -0,0 +1,18 @@
+<div v-if="popIsShow" class="mask" style="z-index: 10099999900000000900">
+  <div class="view" :style="style">
+    <!-- 头部 -->
+    <div class="header">
+      <div class="left">
+        <div class="icon">
+        </div>
+        <div>
+          {{title}}
+        </div>
+      </div>
+      <div class="close hover_pointer" @click="close"></div>
+    </div>
+    <div class="body">
+      <slot></slot>
+    </div>
+  </div>
+</div>

src/components/pop-window/index.js

@@ -0,0 +1,77 @@
+export default {
+  components: {
+  },
+  props: {
+    title: {
+      type: [String],
+      default: '标题'
+    },
+    // 是否显示隐藏
+    isShow: {
+      type: Boolean,
+      default: true
+    },
+    // 宽度
+    width: {
+      type: [String, Number],
+      default: '800'
+    },
+    // 高度
+    height: {
+      type: [String, Number],
+      default: '550'
+    },
+    // 距离顶部偏移
+    top: {
+      type: [String, Number],
+      default: 50
+    },
+    // 距离左侧偏移
+    left: {
+      type: [String, Number],
+      default: 50
+    },
+    marginTop: {
+      type: [String, Number],
+      default: 0
+    },
+    // 控制显示隐藏
+    popIsShow: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    style: function () {
+      let style = {
+        top: this.top + '%',
+        left: this.left + '%',
+        width: this.width + 'px',
+        height: this.height + 'px'
+      };
+
+      if (!(this.marginTop === 0 || this.marginTop === '0')) {
+        style.marginTop = this.marginTop + 'px';
+      }
+      return {
+        top: this.top + '%',
+        left: this.left + '%',
+        width: this.width + 'px',
+        height: this.height + 'px'
+      };
+    }
+  },
+  mounted () {
+    document.body.appendChild(this.$el); // 将组件挂载到 body 上
+  },
+  data () {
+    return {
+    };
+  },
+  methods: {
+    // 关闭
+    close () {
+      this.$emit('update:popIsShow', false);
+    }
+  }
+};

src/components/pop-window/index.scss

@@ -0,0 +1,63 @@
+$border: rgba(49, 129, 246, 1);
+
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 10099999900000000900 !important;
+  align-items: center;
+  justify-content: center;
+
+  .view {
+    z-index: 100999999900 !important;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    border-radius: 0px 0px 40px 0px;
+    background-color: rgba(4, 20, 52, 0.8);
+    border: 1px solid $border;
+    display: flex;
+    flex-direction: column;
+
+    .header {
+      padding: 0 20px;
+      background: url('./header.png');
+      background-size: 100% 100%;
+      text-align: center;
+      height: 40px;
+      line-height: 40px;
+      position: relative;
+
+      .left {
+        display: flex;
+        align-items: center;
+
+        .icon {
+          background: url('./icon.png');
+          background-size: 100% 100%;
+          width: 20px;
+          height: 20px;
+          margin-right: 10px;
+        }
+
+      }
+
+      .close {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        width: 20px;
+        height: 20px;
+        background: url('./close.png') center no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+
+    .body {
+      flex: 1;
+      padding: 20px;
+    }
+  }
+}

src/components/pop-window/index.vue

@@ -0,0 +1,3 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped></style>

src/views/resources/api/index.js

@@ -154,4 +154,18 @@ export function Resources (deptId, year) {
     method: 'get',
     params: query
   })
+}
+
+// 资源一张图-中地图-资源列表
+export function ResourceList (deptId, year, useType = 2) {
+  let query = {
+    deptId,
+    useType,
+    year
+  }
+  return request({
+    url: 'api/home/xixia/resource/zyList',
+    method: 'get',
+    params: query
+  })
 }

src/views/resources/comps/left/bottom/1/index.html

@@ -1,10 +1,13 @@
 <Pannel title="资源发包分析" height="340" flexIble
-@titleCilck="titleCilck"
+@titleClick="titleCilck"
 v-loading="false"
 element-loading-text="拼命加载中"
 element-loading-spinner="el-icon-loading"
 element-loading-background="rgba(0, 0, 0, 0.1)"
 >
+<PopWindow :popIsShow.sync="popIsOpen" title="闲置资源清单">
+  <MyTable></MyTable>
+</PopWindow>
   <div class="full">
     <div class="top">
       <PannelTabs @change="tabChange" :data="pannelTabData"></PannelTabs>

src/views/resources/comps/left/bottom/1/index.js

@@ -3,8 +3,13 @@ import PannelTabs from '@/components/pannel-tabs/index.vue';
 import Bar from '@/components/charts/bar/index.vue';
 import { resourceOutsourcingAnalysis } from '../../../../api/index.js'
 import { mapGetters } from 'vuex'
+import PopWindow from '@/components/pop-window/index.vue';
+import MyTable from './my-table/index.vue';
+
 export default {
   components: {
+    MyTable,
+    PopWindow,
     Bar,
     PannelTabs,
     Pannel
@@ -28,6 +33,7 @@ export default {
   },
   data () {
     return {
+      popIsOpen: false,
       isLoad: false,
       pannelTabData: [
         {
@@ -47,8 +53,17 @@ export default {
   mounted () {
   },
   methods: {
+    closePop () {
+      this.popIsOpen = false
+    },
     titleCilck () {
-      console.log(222);
+      this.popIsOpen = true
+    },
+    /**
+     * 打开弹窗
+     */
+    openPop () {
+
     },
     getData () {
       if (this.year, this.deptId) {

src/views/resources/comps/left/bottom/1/my-table/index.html

@@ -0,0 +1,20 @@
+<div class="my_table">
+  <el-table :data="tableData" stripe style="width: 100%;height: 100%"  max-height="470" :style="{backgroundColor: 'transparent'}" class="scrollbar">
+    <el-table-column prop="name" label="资源名称" width="180">
+    </el-table-column>
+    <el-table-column prop="resourceType" label="资产类别" width="180">
+      <template slot-scope="scope">
+        <span>{{scope.row.resourceType | fmtresourceType}}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="location" label="坐落位置">
+    </el-table-column>
+    <el-table-column prop="totalArea" label="面积(亩)">
+    </el-table-column>
+    <el-table-column prop="attachments" label="附件">
+      <template slot-scope="scope">
+        <span @click="look(scope.row)" class="look hover_pointer">查看</span>
+      </template>
+    </el-table-column>
+  </el-table>
+</div>

src/views/resources/comps/left/bottom/1/my-table/index.js

@@ -0,0 +1,77 @@
+import { mapGetters } from 'vuex';
+import { ResourceList } from '../../../../../api/index.js';
+const map = {
+  '1': '农用地',
+  '2': '建设用地',
+  '3': '未利用地、林木'
+}
+export default {
+  components: {
+  },
+  computed: {
+    ...mapGetters(['year', 'deptId'])
+  },
+  watch: {
+    year: {
+      handler () {
+        this.getData();
+      },
+      immediate: true, // 立即执行
+    },
+    deptId: {
+      handler () {
+        this.getData();
+      },
+      immediate: true, // 立即执行
+    }
+  },
+  data () {
+    return {
+      tableData: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ]
+    };
+  },
+  filters: {
+    fmtresourceType: function (val) {
+      return map[val]
+    }
+  },
+  methods: {
+    look (info) {
+      if (info.attachments) {
+        window.open(info.attachments.fileUrl)
+      } else {
+        return
+      }
+    },
+    getData () {
+      if (this.year, this.deptId) {
+        this.isLoad = false;
+        ResourceList(this.deptId, this.year).then(res => {
+          this.tableData = res.rows;
+          this.isLoad = true;
+        })
+      }
+    },
+  }
+};

src/views/resources/comps/left/bottom/1/my-table/index.scss

@@ -0,0 +1,53 @@
+.my_table {
+  // border: 1px solid red;
+  width: 100%;
+  height: 100%;
+}
+
+.look {
+  color: rgba(15, 252, 252, 1);
+}
+
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+
+
+// 去掉el-table的所有背景颜色以及所有hover的颜色
+::v-deep .el-table,
+
+::v-deep .el-table--border {
+  background-color: transparent !important;
+  color: rgba(214, 234, 252, 1);
+  border: 0;
+}
+
+::v-deep .el-table .el-table__header-wrapper th {
+  background-color: rgba(44, 116, 223, 0.462) !important;
+  color: rgba(214, 234, 252, 1);
+  border: 0;
+}
+
+::v-deep .el-table tr,
+::v-deep .el-table__body tr:hover>td {
+  border: 0;
+  background-color: transparent !important;
+}
+
+::v-deep.el-table--striped .el-table__body tr.el-table__row--striped td {
+  border: 0;
+  // background-color: transparent !important;
+  background: rgba(49, 129, 246, 0.1);
+}
+
+::v-deep.el-table td,
+.el-table th.is-leaf {
+  border: 0;
+}
+
+::v-deep .my_table .el-table .el-table__header-wrapper {
+  background-color: rgba(44, 117, 223, 1) !important;
+}

src/views/resources/comps/left/bottom/1/my-table/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>